/* The personal site as a terminal session. Colours are tokens; the dark
   set applies with the system's dark mode unless /theme chose light, or when it chose dark. */
:root {
  --bg: #faf9f5; --fg: #1f1e1d; --dim: #6b6860; --faint: #9a968c;
  --accent: #c15f3c; --link: #2b5fb8; --ok: #3f8a3a; --err: #b3261e;
  --user-bg: #efede6; --border: #cfcabf; --code-bg: #f1efe8; --sel: #f3e3db;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1b19; --fg: #e8e6df; --dim: #9a968c; --faint: #6b6860;
    --accent: #d97757; --link: #8ab4f8; --ok: #7fb069; --err: #f28b82;
    --user-bg: #2a2926; --border: #4a4843; --code-bg: #24231f; --sel: #3a2a22;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1b19; --fg: #e8e6df; --dim: #9a968c; --faint: #6b6860;
  --accent: #d97757; --link: #8ab4f8; --ok: #7fb069; --err: #f28b82;
  --user-bg: #2a2926; --border: #4a4843; --code-bg: #24231f; --sel: #3a2a22;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.6 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
::selection { background: var(--sel); }
a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
kbd { font: inherit; color: var(--accent); }
.dim { color: var(--dim); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.term { max-width: 104ch; margin: 0 auto; padding: 24px 16px 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* the welcome box */
.welcome-box { border: 1px solid var(--accent); border-radius: 8px; padding: 10px 16px; max-width: 72ch; }
.welcome-box p { margin: 0; }
/* no one-word last lines (widows) where the browser can avoid them */
.welcome-box p, .md p, .md li, .result { text-wrap: pretty; }
.welcome-box p + p { margin-top: 6px; }
.star { color: var(--accent); }
.cmds { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 8px; }
.cmds a { color: var(--dim); text-decoration: none; }
.cmds a:hover, .cmds a[aria-current] { color: var(--accent); }

/* one exchange: the prompt, the tool call, its result, the reply */
.turn { margin: 22px 0 8px; }
.user { background: var(--user-bg); padding: 4px 10px; border-radius: 4px; color: var(--dim); overflow-wrap: anywhere; }
.user .said { color: var(--fg); }
.caret { color: var(--dim); }
.tool, .msg { display: flex; gap: 1ch; margin-top: 14px; }
.tool { display: block; }
.tool .arg { color: var(--dim); overflow-wrap: anywhere; }
.dot { flex: none; }
.dot.ok { color: var(--ok); }
.dot.err, .result.err { color: var(--err); }
.result { color: var(--dim); padding-left: 2ch; }
.elbow { color: var(--faint); margin-right: 1ch; }
.msg .md { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.spinner { color: var(--accent); margin-top: 14px; }
.spinner .verb { color: var(--accent); }
.spinner .hint { color: var(--faint); }

/* markdown, as a terminal renders it */
.md > :first-child { margin-top: 0; }
.md h1 { font-size: 1em; margin: 0 0 12px; color: var(--accent); }
.md h1::before { content: "# "; color: var(--faint); }
.md h2 { font-size: 1em; margin: 22px 0 8px; }
.md h2::before { content: "## "; color: var(--faint); }
.md h3 { font-size: 1em; margin: 16px 0 6px; font-weight: 600; color: var(--dim); }
.md h3::before { content: "### "; color: var(--faint); }
.md p { margin: 8px 0; }
.md ul { padding-left: 2ch; margin: 6px 0; }
.md li { margin: 3px 0; }
.md ul > li::marker { content: "• "; color: var(--faint); }
.md code { color: var(--accent); }
.md table { border-collapse: collapse; margin: 8px 0; }
.md td, .md th { border: 1px solid var(--border); padding: 2px 10px; text-align: left; vertical-align: top; }
.md thead:has(th:empty) { display: none; }
.md td:first-child { color: var(--dim); }
.portrait { float: right; width: 128px; height: 128px; margin: 0 0 12px 16px; border-radius: 6px; filter: grayscale(.25); }

/* publications */
.pubs { list-style: none; padding-left: 0 !important; }
.md .pubs > li::marker { content: none; }
.pub { margin: 0 0 16px; padding-left: 2ch; text-indent: -2ch; }
.pub > * { text-indent: 0; }
.pub-title { font-weight: 600; text-indent: -2ch; }
.pub-title::before { content: "● "; color: var(--faint); font-weight: 400; }
.pub-short .pub-title { font-weight: 400; font-style: italic; }
.me { color: var(--fg); font-weight: 600; text-decoration: underline dotted var(--faint); }
.pub-authors { color: var(--dim); }
.tag { font-weight: 400; color: var(--bg); background: var(--accent); padding: 0 .6ch; border-radius: 3px; font-size: .86em; }
.tag.award { background: #b07d12; color: #fff; }
.pub-links { color: var(--faint); }
.pub-links::before { content: "⎿ "; }
/* artifact-evaluation badges: a label, then one segment per badge (USENIX colours), each opening the artifact */
.badges { display: inline-flex; vertical-align: 1px; margin-left: 1ch; border-radius: 3px; overflow: hidden; font-size: .82em; line-height: 1.5; }
.badge-label, .badges .badge { padding: 0 .7ch; color: #fff; }
.badge-label { background: #55524c; }
.badges .badge { text-decoration: none; }
.badges .badge:hover { filter: brightness(1.15); }
.badge-available { background: #c4471f; }
.badge-functional { background: #3a76c4; }
.badge-reusable { background: #1f8a70; }
.badge-reproduced, .badge-replicated { background: #6b3fa0; }
.pub details { display: inline-block; margin-right: 2ch; vertical-align: top; }
.pub details[open] { display: block; }
.pub summary { cursor: pointer; color: var(--dim); list-style: none; }
.pub summary::-webkit-details-marker { display: none; }
.pub summary::before { content: "▸ "; color: var(--faint); }
.pub details[open] summary::before { content: "▾ "; }
.abstract { border-left: 2px solid var(--border); padding-left: 2ch; margin: 4px 0 6px; }
.bib { position: relative; }
.bib pre { background: var(--code-bg); padding: 10px 12px; margin: 4px 0 6px; overflow-x: auto; font-size: .9em; line-height: 1.45; border-radius: 4px; }
.copy { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--dim); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.copy:hover { color: var(--accent); border-color: var(--accent); }
.copy .i-done, .copy.done .i-copy { display: none; }
.copy.done .i-done { display: block; color: var(--ok); }
.abstract { position: relative; padding-right: 36px; }
.pub-area[hidden], .pub[hidden] { display: none; }
.count { font-weight: 400; }

/* search and help output */
.hits { list-style: none; padding-left: 0 !important; }
.md .hits > li::marker { content: none; }
.hits .where { color: var(--faint); }
.help-table td:first-child { color: var(--accent); white-space: nowrap; }

/* /directions: the map, one character per grid cell (so fallback glyphs keep the columns),
   scaled down to fit narrow screens (80 columns of about .6em) */
.walk { margin-top: 4px; }
.map { margin: 6px 0 4px; line-height: 1.15; font-size: min(1em, calc((100vw - 56px) / 48.5)); color: var(--dim); overflow-x: auto; overflow-y: hidden; }
.map .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1ch; justify-content: start; height: 1.15em; }
.map i { font-style: normal; text-align: center; white-space: pre; }
.map .p, .map-key .p { color: var(--accent); font-weight: 600; }
.map .t, .map-key .t { color: color-mix(in srgb, var(--accent) 45%, transparent); }
.map.arrived .dest { animation: there .9s ease-in-out 3; }
@keyframes there { 50% { color: var(--accent); } }
.map { position: relative; }
.map .visitor { position: absolute; aspect-ratio: 12 / 15; translate: -50% 0; pointer-events: none; }
.map .visitor svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .visitor .still, .map .visitor.done svg:not(.still) { display: none; }
.map .visitor.done .still { display: block; }
.map .visitor .bubble { position: absolute; bottom: 100%; left: 50%; translate: -50% -2px; font-size: 11px; line-height: 1.3; white-space: nowrap; color: var(--fg); background: var(--user-bg); border: 1px solid var(--border); border-radius: 5px; padding: 0 .6ch; }
.map .visitor.done .bubble { opacity: 0; transition: opacity .4s 1s; }
@media (prefers-reduced-motion: no-preference) {
  .map .visitor { animation: pop .35s ease-out; }
  @keyframes pop { from { opacity: 0; translate: -50% 6px; } }
}
.buddy.away { visibility: hidden; }
.flyer { position: fixed; z-index: 5; aspect-ratio: 12 / 15; translate: -50% 0; pointer-events: none; }
.flyer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flyer .alt, .flyer.b svg:not(.alt) { display: none; }
.flyer.b .alt { display: block; }
.flyer.left svg { transform: scaleX(-1); }
.map-key { font-size: .9em; color: var(--faint); }
.arrive .ok { color: var(--ok); }
.replay { font: inherit; color: var(--link); background: none; border: 0; padding: 0; margin-left: 1ch; cursor: pointer; }
.replay:hover { text-decoration: underline; }

/* the prompt, pinned to the bottom */
.prompt { position: sticky; bottom: 0; background: linear-gradient(to bottom, transparent, var(--bg) 22px); padding: 46px 0 14px; margin-top: 4px; }
.box { position: relative; display: flex; gap: 1ch; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: text; }
.box:focus-within { border-color: var(--dim); }
.box input { flex: 1; min-width: 0; font: inherit; color: var(--fg); background: none; border: 0; outline: none; padding: 0; caret-color: var(--accent); }
.box input::placeholder { color: var(--faint); }
.status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2ch; padding: 4px 12px 0; font-size: .9em; }
.status .where { color: var(--faint); }
.status .copyright { color: var(--faint); }
.status .where:not(:empty)::after { content: " ·"; }
.panel { padding: 4px 12px 8px; }
.panel .row { display: flex; gap: 2ch; padding: 1px 0; cursor: pointer; color: var(--dim); }
.panel .row .name { min-width: 15ch; }
.panel .row.sel { color: var(--accent); }
.panel .row.sel .desc { color: var(--fg); }
.panel .keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr)); gap: 2px 3ch; color: var(--dim); }
.panel .keys b { color: var(--fg); font-weight: 400; }

/* the little Marco on the prompt box */
.buddy { position: absolute; left: 0; bottom: 100%; margin-bottom: -2px; width: 36px; height: 45px; cursor: pointer; will-change: transform; }
.buddy svg { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
.buddy.hop svg { animation: hop .38s ease-out; }
@keyframes hop { 40% { translate: 0 -12px; } }
.buddy .bubble { position: absolute; bottom: 100%; left: 50%; translate: -50% -4px; white-space: nowrap; font-size: .85em; color: var(--fg); background: var(--user-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0 .8ch; opacity: 0; transition: opacity .15s; pointer-events: none; }
.buddy.talking .bubble { opacity: 1; }
.panel:not([hidden]) + .box .buddy { visibility: hidden; }

@media (max-width: 600px) {
  .buddy { width: 28px; height: 35px; }
  .prompt { padding-top: 38px; }
  body { font-size: 13px; }
  .term { padding-top: 16px; }
  .portrait { width: 88px; height: 88px; }
  .panel .row .desc { display: none; }
  .md td, .md th { padding: 2px 6px; }
  .md table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .turn.fresh { animation: in .18s ease-out; }
  @keyframes in { from { opacity: 0; transform: translateY(4px); } }
}