:root {
  color-scheme: dark;
  --bg: #002b36;
  --surface: #073642;
  --text: #a4b0ad;
  --muted: #839496;
  --heading: #eee8d5;
  --accent: #42b5a9;
  --line: #284a53;
  --focus: #b58900;
  --green: #a0ae36;
  --gold: #b58900;
  --blue: #268bd2;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fdf6e3;
  --surface: #eee8d5;
  --text: #50666d;
  --muted: #586e75;
  --heading: #073642;
  --accent: #08746e;
  --line: #d8d0b8;
  --focus: #836200;
  --green: #596900;
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.7; }
h1, h2, p, figure { margin: 0; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; text-underline-offset: .3em; }
a:hover { color: var(--accent); text-decoration: underline; }
button { font: inherit; color: inherit; }
button, summary { touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; border-radius: 1px; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--bg); }
.page { width: min(100% - 6rem, 1080px); margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding-top: 2.1rem; }
.wordmark { font-size: .8rem; color: var(--muted); letter-spacing: -.03em; }
.wordmark span { color: var(--accent); }
.theme-toggle { display: inline-flex; align-items: center; gap: .6rem; border: none; background: transparent; color: var(--muted); font-size: .74rem; padding: .55rem 0 .55rem .7rem; cursor: pointer; min-height: 38px; }
.theme-toggle:hover { color: var(--heading); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; column-gap: 3.2rem; align-items: start; }
.intro, .work, .about, .writing { grid-column: 1; min-width: 0; }
.intro { grid-row: 1; padding: 4.5rem 0 3.1rem; }
h1 { color: var(--heading); font-size: clamp(1.8rem, 3vw, 2.25rem); line-height: 1.2; font-weight: 500; letter-spacing: -.065em; }
.degree { font-size: .44em; font-weight: 400; letter-spacing: -.03em; color: var(--muted); }
.discipline { color: var(--accent); font-size: .8rem; margin-top: .8rem; }
.bio { max-width: 66ch; font-size: .84rem; line-height: 1.95; margin-top: 1.15rem; }
.companion-rail { grid-column: 2; grid-row: 1 / 5; position: sticky; top: 3rem; align-self: start; margin-top: 4rem; min-width: 0; }
.companion-stage { width: 100%; }
#companion { display: block; width: 100%; height: auto; aspect-ratio: 400 / 340; image-rendering: auto; }
.companion-meta { min-height: 3.4rem; padding-top: .3rem; text-align: center; }
#companion-label { color: var(--muted); font-size: .61rem; line-height: 1.6; min-height: 1.6em; }
.companion-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: .2rem; }
.companion-controls button { padding: .3rem .1rem; min-height: 32px; border: 0; background: none; color: var(--muted); font-size: .59rem; cursor: pointer; }
.companion-controls button:hover { color: var(--accent); }
.work { grid-row: 2; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
h2 { color: var(--muted); font-weight: 400; font-size: .68rem; letter-spacing: .025em; }
.interaction-hint, .section-heading > a { color: var(--muted); font-size: .61rem; }
.project { border-top: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.project:last-child { border-bottom: 1px solid var(--line); }
summary { list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1.3rem .1rem; cursor: pointer; position: relative; }
summary::-webkit-details-marker { display: none; }
.row-number { font-size: .61rem; color: var(--muted); width: 1.2rem; flex: 0 0 auto; }
.row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.row-title { font-size: .94rem; letter-spacing: -.025em; color: var(--heading); }
.row-subtitle { font-size: .7rem; color: var(--muted); line-height: 1.65; }
.row-category { font-size: .59rem; color: var(--muted); }
.expand-icon { position: relative; display: block; width: 12px; height: 12px; margin-left: .3rem; flex: 0 0 auto; color: var(--muted); }
.expand-icon::before, .expand-icon::after { content: ''; position: absolute; background: currentColor; }
.expand-icon::before { height: 1px; width: 11px; top: 5px; left: 0; }
.expand-icon::after { height: 11px; width: 1px; top: 0; left: 5px; transition: transform .16s ease; }
.project[open] .expand-icon::after, .about-details[open] .expand-icon::after { transform: rotate(90deg); }
summary:hover .row-title, summary:hover .expand-icon, .project[open] .row-title { color: var(--accent); }
.project-content { display: grid; grid-template-columns: minmax(0, 1fr) 162px; align-items: center; gap: 1.5rem; padding: .15rem 0 1.7rem 2.3rem; }
.project-description { min-width: 0; font-size: .84rem; line-height: 1.95; }
.project-description p + p, .about-copy p + p { margin-top: 1em; }
.project-links { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; margin-top: .85rem; font-size: .7rem; color: var(--accent); }
.project-figure { min-width: 0; width: 100%; }
.project-figure svg, .project-figure img { display: block; width: 100%; height: auto; overflow: visible; }
.project-figure figcaption { text-align: center; font-size: .52rem; color: var(--muted); line-height: 1.5; margin-top: .4rem; }
.figure-surface { fill: var(--surface); stroke: var(--line); stroke-width: 1.4; }
.figure-line { stroke: var(--muted); stroke-width: 1.4; }
.figure-accent { stroke: var(--accent); stroke-width: 2; }
.figure-dot { fill: var(--muted); }
.map-contours { stroke: var(--accent); stroke-width: 1.2; opacity: .65; }
.map-points { fill: var(--gold); }
.packing-triangles polygon { fill: color-mix(in srgb, var(--accent) 12%, var(--bg)); stroke: var(--accent); stroke-width: 2.8; }
.packing-triangles polygon:nth-child(3n + 2) { fill: color-mix(in srgb, var(--blue) 12%, var(--bg)); stroke: var(--blue); }
.packing-triangles polygon:nth-child(3n) { fill: color-mix(in srgb, var(--gold) 12%, var(--bg)); stroke: var(--gold); }
.packing-boundary { stroke: var(--muted); stroke-width: 2; }
.token-boxes rect { stroke: var(--line); stroke-width: 1; }
.token-boxes .selected-token { fill: color-mix(in srgb, var(--green) 12%, var(--bg)); stroke: var(--green); }
.token-text { fill: var(--text); font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; text-anchor: middle; }
.selected-token-text { fill: var(--green); }
.signal-line { stroke: var(--green); stroke-width: 2; }
.other-experiments { margin-top: 1rem; font-size: .7rem; color: var(--muted); }
.other-experiments a { color: var(--accent); }
.about { grid-row: 3; margin-top: 1.7rem; }
.about-details { border: 1px solid var(--line); border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.about-details summary { justify-content: space-between; padding: .9rem 1rem; font-size: .9rem; color: var(--heading); }
.about-details summary:hover, .about-details[open] summary { color: var(--accent); }
.about-copy { max-width: 68ch; padding: .2rem 1rem 1.1rem; font-size: .84rem; line-height: 1.95; }
.writing { grid-row: 4; margin-top: 2.5rem; }
.publication-group { margin: 1.5rem 0 .4rem; color: var(--accent); font-size: .7rem; font-weight: 400; }
.papers { margin: 0; padding: 0; list-style: none; }
.papers li { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 1rem; font-size: .78rem; line-height: 1.85; margin-top: 1.1rem; }
.paper-venue { display: block; color: var(--muted); font-size: .68rem; margin-top: .2rem; }
.paper-venue cite { font-style: normal; }
.papers time { color: var(--muted); font-size: .65rem; padding-top: .15rem; text-align: right; }
.papers a { color: var(--text); }
.papers a span { color: var(--accent); }
footer { margin-top: 3rem; border-top: 1px solid var(--line); padding: 1.5rem 0 2.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; color: var(--muted); font-size: .63rem; }
footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.6rem; }
.footer-links { display: grid; gap: .85rem; min-width: 0; }
.reading-links { font-size: .6rem; }
.copyright { font-size: .58rem; white-space: nowrap; }
.skip-link { position: absolute; z-index: 10; top: -6rem; left: 1rem; padding: .5rem 1rem; color: var(--heading); background: var(--surface); }
.skip-link:focus { top: .5rem; }
@media (max-width: 1060px) {
  .page { width: calc(100% - 4rem); }
  .layout { grid-template-columns: minmax(0, 1fr) 230px; column-gap: 2rem; }
  .row-category { display: none; }
  .project-content { grid-template-columns: minmax(0, 1fr) 136px; gap: 1rem; }
}
@media (max-width: 800px) {
  .page { width: calc(100% - 3rem); }
  .topbar { padding-top: 1.2rem; }
  .layout { display: flex; flex-direction: column; }
  .intro { order: 0; width: 100%; padding: 3.1rem 0 1.8rem; }
  h1 { font-size: 2rem; }
  .bio { max-width: 68ch; }
  .companion-rail { order: 1; position: sticky; z-index: 3; top: 0; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; margin-top: 0; margin-bottom: 1.8rem; padding: .15rem 0 .4rem; border-bottom: 1px solid var(--line); background: var(--bg); }
  .companion-stage { flex: 0 0 108px; width: 108px; }
  .companion-meta { padding: 0 .5rem 0 0; min-height: 0; max-width: 24ch; text-align: left; }
  #companion-label { font-size: .62rem; }
  .companion-controls { justify-content: flex-start; gap: 1.35rem; margin-top: .3rem; }
  .companion-controls button { font-size: .6rem; min-height: 36px; }
  .work { order: 2; width: 100%; }
  .about { order: 3; width: 100%; }
  .writing { order: 4; width: 100%; }
  .project, summary, .project-links a, .papers a, .other-experiments a { scroll-margin-top: 120px; }
  .project-content { grid-template-columns: minmax(0, 1fr) 166px; gap: 1.5rem; }
  .row-category { display: block; }
  .row-title { font-size: .9rem; }
  .row-subtitle { font-size: .75rem; }
}
@media (max-width: 560px) {
  .row-category { display: none; }
  summary { gap: .9rem; padding: 1.1rem 0; }
  .project-content { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-left: 2.1rem; }
  .project-figure { width: 178px; justify-self: center; }
  .packing-figure { width: 155px; }
  .terminal-figure { width: 142px; }
  .papers li { gap: .75rem; }
  .writing { margin-top: 2.5rem; }
  footer { align-items: flex-start; }
}
@media (max-width: 380px) {
  .page { width: calc(100% - 2.25rem); }
  h1 { font-size: 1.75rem; }
  .discipline { font-size: .75rem; }
  #companion-label { font-size: .56rem; }
  .companion-controls button { font-size: .56rem; }
  .row-title { font-size: .88rem; }
  .row-number { font-size: .57rem; width: .95rem; }
  .project-content { padding-left: 0; }
  .project-links { font-size: .64rem; }
  footer nav { gap: .6rem 1rem; font-size: .59rem; }
  .copyright { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  :root { --bg: white; --surface: white; --text: #333; --muted: #555; --heading: #111; --accent: #222; --line: #ccc; }
  .page { width: 100%; }
  .layout { display: block; }
  .theme-toggle, .companion-rail, .interaction-hint, .expand-icon, .skip-link { display: none; }
  .intro { padding: 2rem 0; }
  .project { break-inside: avoid; }
}

/* A small field trip, tucked behind the companion. */
.companion-secret { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.companion-secret:focus-visible { outline-offset: -2px; }
body.hop-open { overflow: hidden; }
.hop-dialog { width: min(940px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; border: 1px solid var(--accent); border-radius: 8px; background: var(--bg); color: var(--text); box-shadow: 0 24px 100px #0008; overflow: auto; }
.hop-dialog::backdrop { background: #001820d9; backdrop-filter: blur(5px); }
.hop-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.hop-eyebrow { color: var(--accent); font-size: .62rem; }
.hop-header h2 { color: var(--heading); font-size: 1.75rem; font-weight: 700; letter-spacing: -.07em; line-height: 1.4; }
.hop-close, .hop-pause { border: 0; background: none; cursor: pointer; font-size: .7rem; min-height: 44px; padding: .4rem .6rem; }
.hop-close:hover, .hop-pause:hover { color: var(--heading); }
.hop-close span { font-size: 1.2rem; margin-left: .5rem; }
.hop-scoreboard { display: flex; align-items: center; gap: 1.7rem; margin: 1rem 0; font-size: .65rem; color: var(--muted); }
.hop-scoreboard strong { color: var(--heading); font-size: .85rem; font-weight: 400; margin-left: .35rem; font-variant-numeric: tabular-nums; }
.hop-hearts { margin-left: auto; color: #db6d86; font-size: 1rem; white-space: nowrap; }
.hop-arena { position: relative; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
#hop-canvas { display: block; width: 100%; aspect-ratio: 900 / 340; touch-action: manipulation; outline: none; }
#hop-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.hop-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--bg) 35%, transparent); }
.hop-card { max-width: 420px; padding: 1.3rem 1.7rem; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; text-align: center; box-shadow: 0 8px 25px #0002; }
.hop-card h3 { color: var(--heading); margin: 0; font-weight: 400; font-size: 1rem; line-height: 1.5; }
.hop-card p { font-size: .71rem; line-height: 1.7; margin: .65rem 0 1rem; }
.hop-start { padding: .6rem 1.25rem; border: 1px solid var(--accent); border-radius: 3px; color: var(--bg); background: var(--accent); cursor: pointer; font-size: .78rem; min-height: 44px; }
.hop-controls { display: flex; align-items: stretch; gap: .75rem; margin-top: 1rem; }
.hop-action { padding: .5rem 1rem; min-height: 48px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); cursor: pointer; font-size: .78rem; text-align: left; }
.hop-action:hover:not(:disabled) { border-color: var(--accent); color: var(--heading); }
.hop-dialog kbd { font: inherit; font-size: .58rem; margin-left: .6rem; color: var(--muted); }
.hop-shout { min-width: 156px; }
.hop-shout[aria-disabled="true"] { color: var(--muted); }
.hop-charge { display: block; height: 3px; margin-top: .3rem; background: var(--line); overflow: hidden; }
.hop-charge > span { display: block; height: 100%; width: 100%; background: var(--accent); }
.hop-pause { margin-left: auto; }
.hop-instructions { margin-top: 1rem; font-size: .67rem; line-height: 1.8; max-width: 80ch; }
.hop-status { font-size: .62rem; color: var(--muted); min-height: 1.8em; margin-top: .5rem; }
.hop-dialog button:disabled { opacity: .55; cursor: default; }
@media (max-width: 560px) {
  .hop-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); padding: .85rem; }
  .hop-header h2 { font-size: 1.5rem; }
  .hop-scoreboard { gap: .8rem; font-size: .58rem; }
  .hop-scoreboard strong { display: block; margin-left: 0; }
  #hop-canvas { aspect-ratio: 510 / 340; }
  .hop-card { padding: 1rem; }
  .hop-card h3 { font-size: .88rem; }
  .hop-card p { font-size: .64rem; }
  .hop-controls { gap: .45rem; }
  .hop-action { padding: .5rem .7rem; font-size: .7rem; }
  .hop-dialog kbd { display: none; }
  .hop-shout { min-width: 112px; }
  .hop-pause { padding: .4rem .3rem; font-size: .64rem; }
}
@media print { .hop-dialog { display: none; } }

.hop-header-actions { display: flex; align-items: center; gap: .5rem; }
.hop-sound { padding: .3rem .5rem; min-height: 44px; border: 0; background: transparent; color: var(--muted); font-size: .62rem; cursor: pointer; }
.hop-sound[aria-pressed="true"] { color: var(--accent); }
.hop-runline { display: flex; justify-content: space-between; gap: 1rem; color: var(--accent); font-size: .62rem; margin: .6rem 0 -.5rem; }
.hop-runline strong { font-weight: 400; font-variant-numeric: tabular-nums; }
.hop-close span { margin: 0; }
.lab-page { max-width: 860px; }
.lab-intro { padding: 4.8rem 0 2.4rem; max-width: 66ch; }
.lab-kicker { display: block; color: var(--accent); font-size: .65rem; }
.lab-intro h1 { margin: .6rem 0 1rem; }
.lab-intro > p:last-child { font-size: .85rem; line-height: 1.9; }
.lab-feature { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 1.7rem; padding: 2rem; border: 1px solid var(--line); background: var(--surface); border-radius: 5px; }
.lab-feature h2, .lab-card h2 { color: var(--heading); font-size: 1.25rem; letter-spacing: -.045em; margin: .5rem 0 .8rem; }
.lab-feature h2 { font-size: 2rem; font-weight: 700; }
.lab-feature p, .lab-card p { color: var(--text); font-size: .78rem; line-height: 1.9; }
.lab-feature:hover, .lab-card:hover { text-decoration: none; border-color: var(--accent); }
.lab-cta { display: inline-block; margin-top: 1.15rem; font-size: .73rem; color: var(--accent); }
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.lab-card { padding: 1.6rem; border: 1px solid var(--line); border-radius: 5px; }
.lab-card h2 { font-size: 1rem; line-height: 1.5; }
.lab-soon { padding: 2.8rem 0 .5rem; max-width: 55ch; }
.lab-soon > span { color: var(--accent); letter-spacing: .5em; }
.lab-soon h2 { color: var(--heading); font-size: .85rem; margin: .35rem 0 .5rem; }
.lab-soon p { font-size: .75rem; color: var(--muted); }
@media (max-width: 560px) {
  .lab-intro { padding-top: 3.2rem; }
  .lab-feature { padding: 1.3rem; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .lab-feature .lab-kicker { max-width: 16ch; }
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .hop-header-actions { gap: .1rem; }
  .hop-sound { font-size: .58rem; padding: .3rem; }
}