/* Project page: Swiss editorial layout. Switzer (fonts.css) and IBM Plex Mono (OFL, ../fonts/OFL-IBMPlexMono.txt). */
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#ffffff; --ink:#0b0b0b; --muted:#5e5e5e; --hair:#d6d6d2; --wash:#f1f1ee; --code:#f4f4f1;
  --bar:#9a9a96; --accent:#d80032; --cool:#5c618e; --punct:#6b6b67;
  --sans:'Switzer Variable','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --side:240px; --gap:24px;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#0e0e0e; --ink:#f2f2ee; --muted:#a8a8a2; --hair:#353532; --wash:#1d1d1b; --code:#171716;
  --bar:#5d5d59; --accent:#ff4d6d; --cool:#a3a8d4; --punct:#9a9a94;
}

*{box-sizing:border-box}
html{scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,dl,dd,pre{margin:0}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
:root[data-pdfs=later] .pdf-link{display:none!important}
img{max-width:100%}
.sr-only,.skip-link:not(:focus){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link:focus{position:fixed;z-index:9;top:12px;left:12px;background:var(--paper);padding:12px 16px;border:2px solid var(--ink)}

/* Grid: one column at most 1,280 px wide; .side/.main pairs (figure captions) wrap on narrow screens. */
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.row{display:flex;flex-wrap:wrap;gap:16px var(--gap)}
.side{flex:0 1 var(--side);min-width:0}
.main{flex:1 1 560px;min-width:0}
.label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.muted{color:var(--muted)}
.note{font-size:13px;line-height:1.45;color:var(--muted)}
.mono{font-family:var(--mono)}
.tnum{font-feature-settings:'tnum'}

/* Header */
.site-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:22px 0}
.brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;text-decoration:none}
.brand b{font-weight:620;font-size:17px;letter-spacing:-.01em}
.site-header nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;font-size:14px}
.site-header nav a{text-decoration:none;padding:10px 0}
.site-header nav .pdf{border:1px solid var(--ink);padding:10px 14px;font-weight:600}
.site-header nav .pdf:hover{background:var(--wash);color:var(--ink)}
.site-header nav .gh{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);padding:10px 14px;font-weight:600}
.site-header nav .gh:hover{background:var(--wash);color:var(--ink)}
.theme-button{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);background:transparent;font-size:18px;line-height:1}
.theme-button:hover{background:var(--wash)}

/* Hero: title and bit counts beside the growing token grid (site.js), whose payload bars sit under it */
.hero{padding-top:clamp(20px,2.5vw,32px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:40px 64px}
.hero-text{display:flex;flex-direction:column;min-width:0}
.hero h1{font-size:clamp(34px,3.6vw,46px);line-height:1.02;font-weight:600;letter-spacing:-.03em}
.authors{margin-top:18px;font-size:13px;line-height:1.5;letter-spacing:-.01em}
@media (min-width:1000px){.authors{white-space:nowrap}}
.authors a{text-decoration:none}
.authors a:hover{text-decoration:underline}
.affil{margin-top:2px;font-size:13px;color:var(--muted)}
.hero-links{display:flex;gap:20px;margin-top:14px;font-size:14px;font-weight:600}
.bits-label{margin-top:44px;font-size:15px;color:var(--muted)}
.bits-name{margin-top:18px;font-size:15px;font-weight:600}
.bits-name.tok{margin-top:22px;color:var(--accent)}
.bits{margin-top:4px;font-size:clamp(56px,6.3vw,92px);line-height:.95;font-weight:560;letter-spacing:-.05em;font-feature-settings:'tnum'}
.bits small{margin-left:10px;font-size:24px;font-weight:600;letter-spacing:0}
.bits.tok{color:var(--accent)}
.figures{margin-top:auto;padding-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.figure-num{border-top:2px solid var(--ink);padding-top:12px}
.figure-num .n{font-size:48px;line-height:1;font-weight:560;letter-spacing:-.045em;font-feature-settings:'tnum'}
.figure-num .n small{font-size:16px;margin-left:6px;letter-spacing:0;font-weight:560}
.figure-num .n small.x{font-size:20px}
.figure-num .n.accent{color:var(--accent)}
.figure-num h3{margin-top:10px;font-weight:400;font-size:14px;line-height:1.4;color:var(--muted)}
.hero-fig{margin:0;min-width:0}
.grid-box{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1}
.token-grid{display:grid;gap:2px;line-height:1}
.token-grid span{display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:var(--ink);background:color-mix(in srgb,var(--ink) calc(var(--a,0) * 93%),var(--wash))}
.token-grid span.dark{color:var(--paper)}
.token-grid span.mark{outline:2px solid var(--accent);outline-offset:-2px}
.grid-title{margin-top:14px;font-size:22px;line-height:1.25;font-weight:560;letter-spacing:-.014em}
.grid-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:10px}
.grid-meta p{font-family:var(--mono);font-size:14px}
.grid-meta b{color:var(--accent);font-weight:600}
.grid-play{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);font-feature-settings:'tnum'}
.grid-play button{min-width:72px;height:44px;border:1px solid var(--ink);background:transparent;font-size:13px;font-weight:600}
.grid-play button:hover{background:var(--wash)}
.rate-band{margin-top:28px;border-top:2px solid var(--ink);padding-top:8px}
.band-slider{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.band-slider span{min-width:3ch;text-align:right;font-family:var(--mono);font-weight:600;color:var(--ink)}
.band-slider input{flex:1;min-width:0;min-height:44px;margin:0;accent-color:var(--ink)}
.band-row{margin-top:16px}
.band-row.tok{margin-top:18px}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.band-name{font-weight:620;font-size:16px}
.band-name small{margin-left:8px;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted)}
.band-val{font-family:var(--mono);font-size:21px;font-weight:600;white-space:nowrap}
.band-row.tok .band-val{color:var(--accent)}
.band-track{position:relative;display:block;height:40px;margin-top:8px;background:var(--wash)}
.link-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--accent)}
.link-mark span{position:absolute;top:calc(100% + 4px);left:0;white-space:nowrap;font-size:12px;font-weight:600;color:var(--accent)}
.rate-band .note{margin-top:32px}

/* Sections: heading and one-line intro on a single row */
.section{margin-top:clamp(56px,6vw,96px);border-top:6px solid var(--ink);padding-top:16px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 40px}
.sec-num{margin-right:14px;font-size:15px;font-weight:650;letter-spacing:0;color:var(--accent);font-feature-settings:'tnum';vertical-align:.5em}
.section h2{font-size:clamp(28px,3vw,40px);line-height:1;font-weight:600;letter-spacing:-.032em}
.intro{max-width:26em;font-size:16px;line-height:1.45;color:var(--muted)}
.fig-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:13px}

/* Slides (site.js): on a desktop each chapter fills the screen, page scrolling is off and the slide buttons or paging keys move one slide;
   phones scroll normally. A slide's content fades in once it is reached; the error bars grow then. */
@media (min-width:900px) and (min-height:640px){
  html{scroll-padding-top:0;overflow:hidden}
  /* the header stays on every slide; slides fill the window below it (site.js lands them there) */
  .site-header{position:sticky;top:0;z-index:4;background:var(--paper)}
  .hero.slide{min-height:calc(100svh - 88px);display:flex;flex-direction:column;justify-content:center;padding-bottom:40px}
  .hero.slide .hero-grid{width:100%}
  .section.slide{min-height:calc(100svh - 88px);margin-top:0;padding-bottom:40px}
  /* heading at the top, the chapter's content centred in the space below it */
  .section.slide{display:flex;flex-direction:column}
  .section.slide > .sec-head{margin-bottom:auto}
  .section.slide::after{content:'';margin-top:auto}
  /* the last slide ends with the footer */
  #paper.slide{padding-bottom:0}
  #paper.slide::after{content:none}
  #paper .site-footer{margin-top:auto}
  .grid-box{aspect-ratio:auto;height:max(420px,min(580px,calc(100svh - 600px)))}
  .section.slide .figure-block{margin-top:20px}
  .section.slide .patch-figure{margin-top:20px}
  .section.slide .results-grid{margin-top:32px}
  .slide .umap-canvas{height:min(500px,46svh)}
  .slide .hand-svg{max-height:min(400px,30svh)}
}
/* Short laptop screens: a slide still fits in one view. */
@media (min-width:900px) and (min-height:640px) and (max-height:940px){
  .section.slide{padding-bottom:20px}
  .bits-label{margin-top:24px}
  .bits{font-size:min(92px,8.4svh)}
  .bits-name{margin-top:12px}
  .bits-name.tok{margin-top:14px}
  .figures{padding-top:24px;gap:18px 24px}
  .figure-num .n{font-size:38px}
  .figure-num h3{margin-top:6px;font-size:13px}
  .hand-layout{padding-top:12px}
  .hand-trace{margin-top:14px}
  .patch-layout{padding-top:12px}
  .patch-band,.patch-cell{height:24px}
  .patch-cell b{top:9px}
  .hero h1{font-size:40px}
  .grid-title{font-size:18px}
  .grid-meta{margin-top:6px}
  .rate-band{margin-top:16px}
  .band-slider input{min-height:36px}
  .band-row,.band-row.tok{margin-top:10px}
  .band-track{height:26px}
  .rate-band .note{margin-top:22px}
  .slide .hand-key{display:none}
  .section.slide .figure-block{margin-top:10px}
  .slide .hand-svg{max-height:min(400px,23svh)}
  .slide .patch-grid{max-width:calc(100svh - 450px)}
  .slide .patch-readout .patch-status{min-height:0}
  .slide .patch-members{margin-top:10px}
  .slide .patch-widget .umap-transport{margin-top:12px}
  .slide .hand-widget .umap-transport{margin-top:8px}
  .slide .hand-aside .hand-overline{margin-top:8px}
  .slide .hand-error{margin-top:6px;font-size:30px}
  .slide .hand-arm{margin-top:2px}
  .slide .hand-aside .note{margin-top:8px}
  .section.slide .fig-links{margin-top:8px}
  .slide .hand-aside .hand-overline{margin-top:16px}
  .slide .umap-canvas{height:min(500px,42svh)}
}
.slides-js .slide > *{transition:opacity .35s ease-out}
.slides-js .slide:not(.in) > *{opacity:0}
.bar-row .fill{transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.slides-js #factors:not(.in) .bar-row .fill{transform:scaleX(0)}
.bars .bar-row:nth-child(3) .fill{transition-delay:.12s}
.bars .bar-row:nth-child(4) .fill{transition-delay:.24s}
.bars .bar-row:nth-child(5) .fill{transition-delay:.36s}
.bars .bar-row:nth-child(6) .fill{transition-delay:.48s}
.bars .bar-row:nth-child(7) .fill{transition-delay:.6s}
@media (prefers-reduced-motion:reduce){.slides-js .slide > *,.bar-row .fill{transition:none}}
.slide-nav{position:fixed;z-index:5;right:clamp(12px,2vw,24px);bottom:14px;display:flex;align-items:center;gap:6px;padding:4px;background:var(--paper);border:1px solid var(--hair)}
.slide-nav button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);background:transparent;color:var(--ink)}
.slide-nav button:hover:not(:disabled){background:var(--wash)}
.slide-nav button:disabled{opacity:.3;cursor:default}
.slide-nav span{min-width:7ch;text-align:center;font-family:var(--mono);font-size:12px;font-feature-settings:'tnum'}
/* Deck (site.js, below the desktop slide size): one slide per screen under a one-row header, its content
   (.fit) scaled down to fit; the slide buttons and swipes replace the section links and page scrolling. */
.deck{overflow:hidden;overscroll-behavior:none}
.deck body{overscroll-behavior:none}
.deck .site-header{position:sticky;top:0;z-index:4;flex-wrap:nowrap;padding:8px 0;background:var(--paper)}
.deck .site-header nav{flex-wrap:nowrap;gap:8px}
.deck .site-header nav a:not(.gh){display:none}
.deck .site-header nav .gh{gap:0;padding:0;width:40px;height:40px;justify-content:center;font-size:0}
.deck .theme-button{width:40px;height:40px}
.deck .slide{box-sizing:border-box;height:calc(100svh - var(--head,56px));margin:0;padding:10px 0 68px;overflow:hidden}
.deck .fit{transform-origin:top left}
/* figures sized by the width would grow as a slide is laid out wider; cap them so only text gains */
.deck .grid-box{aspect-ratio:auto;height:260px}
.deck .hand-svg{max-height:200px}
.deck .patch-grid{max-width:240px}
.deck .umap-canvas{height:300px}
.deck .slide-nav{right:50%;transform:translateX(50%);bottom:12px}

/* Animated figures (flow.css, umap.css, shared with the standalone pages) re-coloured for this page.
   Their variables come from site.css there; here they map to the Swiss palette. */
:root{--line:#d6d6d2;--blue:var(--ink);--green:var(--accent);--surface:var(--paper);--hover:var(--wash);--focus:var(--accent)}
:root[data-theme=dark]{--line:#353532}
.flow-widget{--flow-green-soft:#fbe5ea;--flow-quiet:#c6c6c2;--flow-grid:#e8e8e4}
:root[data-theme=dark] .flow-widget{--flow-green-soft:#3a141c;--flow-quiet:#4a4a46;--flow-grid:#262624}
.figure-block{margin-top:28px}
@media (min-width:1001px){.umap-canvas{height:500px}}
.method-switch{border:1px solid var(--ink);gap:0}
.method-switch button{min-height:44px;margin:0;padding:0 18px;border:0;color:var(--ink);font-weight:600}
.method-switch button + button{border-left:1px solid var(--ink)}
.method-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.method-switch button[aria-pressed=false]:hover{color:var(--accent)}
.pipeline{counter-reset:flow-step;border-top:1px solid var(--ink);padding-top:14px}
.flow-panel-heading h3{font-weight:600;letter-spacing:-.01em}
.flow-panel-heading h3::before{counter-increment:flow-step;content:counter(flow-step);margin-right:8px;color:var(--accent);font-size:13px;font-weight:650;vertical-align:2px}
.flow-panel[data-active=true] .flow-panel-heading h3{color:var(--accent)}
.flow-steps button[aria-pressed=true],.history-controls button[aria-pressed=true]{color:var(--accent);font-weight:600}
.history-controls button[aria-pressed=true]{border-color:var(--accent)}
.flow-play,.umap-play{border-color:var(--ink)}
.flow-transport,.umap-transport,.umap-toolbar{border-color:var(--ink)}
.token-badge strong,.umap-phase{font-weight:560}
.umap-phase{letter-spacing:-.04em}

/* Bars of the result table */
.track{display:block;flex:1 1 auto;position:relative;height:14px;background:var(--wash)}
.fill{display:block;height:100%;background:var(--ink)}
.fill.accent{background:var(--accent)}
.fill.dim{background:var(--bar)}
.bars{min-width:0}
.bars-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.bar-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--gap);padding:14px 0;border-bottom:1px solid var(--hair)}
.bar-row:last-of-type{border-bottom:2px solid var(--ink)}
.bar-row .what{flex:1 1 300px;min-width:0}
.bar-row .what b{display:block;font-weight:620;font-size:16px}
.bar-row .what span{display:block;font-size:13px;color:var(--muted)}
.bar-row .how{flex:3 1 360px;min-width:0;display:flex;align-items:center;gap:16px}
.bar-row .val{flex:0 0 64px;text-align:right;font-family:var(--mono);font-size:15px;font-weight:600;white-space:nowrap}
.bar-row .val.wide{flex-basis:120px}
.bar-row .val.accent{color:var(--accent)}

/* 02 Results: error bars beside the emg2pose numbers */
.results-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr);gap:32px 48px;margin-top:44px}
.results-grid .bar-row .what{flex-basis:220px}
.results-grid .bar-row .how{flex-basis:240px}
.bench-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.bench-row b{font-weight:620}
.bench-row .val{font-family:var(--mono);font-size:15px;font-weight:600}
.bench .note{margin-top:10px}
.fig-dark{display:none!important}
:root[data-theme=dark] .fig-light{display:none!important}
:root[data-theme=dark] .fig-dark{display:block!important}

/* 02 Results: decoded hand (hand.js); toolbar and transport come from umap.css */
.hand-widget .umap-legend{padding:0}
.hand-layout{display:flex;flex-wrap:wrap;gap:32px 40px;padding-top:24px}
.hand-panels{flex:999 1 560px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.hand-panel{--hand:var(--accent)}
.hand-panel.continuous{--hand:var(--cool)}
.hand-panel figcaption{display:flex;align-items:center;gap:10px}
.hand-panel figcaption i{display:block;width:22px;height:8px;background:var(--hand);opacity:.5}
.hand-svg{display:block;width:100%;height:auto;max-height:400px;margin-top:12px}
.hand-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hand-svg .hand-decoded{stroke:var(--hand);stroke-opacity:.5;stroke-width:12px}
.hand-svg .hand-measured{stroke:var(--ink);stroke-width:1.75px}
.hand-svg .hand-joints{stroke:var(--ink);stroke-width:5px}
.hand-aside{flex:1 1 220px;min-width:0;align-self:start;border-top:2px solid var(--ink);padding-top:12px}
.hand-move{margin-top:2px;font-size:22px;line-height:1.2;font-weight:560;letter-spacing:-.02em}
.hand-aside .hand-overline{margin-top:28px}
.hand-error{margin-top:12px;font-size:34px;line-height:1;font-weight:560;letter-spacing:-.03em;font-feature-settings:'tnum'}
.hand-error small{font-size:.45em;margin-left:4px}
.hand-error.tokens{color:var(--accent)}
.hand-error.continuous{color:var(--cool)}
.hand-arm{margin-top:6px;font-size:14px}
.hand-aside .note{margin-top:14px}
.hand-key{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px 10px;align-items:center;margin-top:28px;font-size:12px;color:var(--muted)}
.hand-key i{display:block;height:8px;opacity:.5}
.hand-key .measured{height:2px;background:var(--ink);opacity:1}
.hand-key .tokens{background:var(--accent)}
.hand-key .continuous{background:var(--cool)}
.hand-aside .hand-status:empty{display:none}
.hand-trace{margin-top:28px;border-top:1px solid var(--line);padding-top:14px}
.hand-trace-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;font-size:13px;color:var(--muted)}
.hand-trace-key{display:flex;flex-wrap:wrap;gap:4px 18px}
.hand-trace-key span{display:flex;align-items:center;gap:6px}
.hand-trace-key i{display:block;width:18px;border-top:2px solid var(--ink)}
.hand-trace-key .tokens{border-top:1.5px solid var(--accent)}
.hand-trace-key .continuous{border-top:1.5px dashed var(--cool)}
/* Same columns as .umap-transport, so the playhead lines up with the time slider. */
.hand-plot{display:grid;grid-template-columns:40px minmax(0,1fr) 52px;gap:18px;margin-top:10px}
.hand-ticks{position:relative;height:150px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.hand-ticks span{position:absolute;right:0;transform:translateY(-50%);line-height:1}
.hand-plot svg{display:block;width:100%;height:150px;overflow:visible}
.hand-plot path{fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hand-grid{stroke:var(--line);stroke-width:1px}
.trace-measured{stroke:var(--ink);stroke-width:2px}
.trace-tokens{stroke:var(--accent);stroke-width:1.5px}
.trace-continuous{stroke:var(--cool);stroke-width:1.5px;stroke-dasharray:5 3}
.hand-playhead{stroke:var(--ink);stroke-width:1px}
.hand-widget .umap-transport{margin-top:16px}

/* SPAR patch (patch.js): centre grey, neighbours red, auxiliary blue, as in the paper's Fig. 3 */
.patch-figure{margin-top:48px}
.patch-figure figcaption{font-size:14px;line-height:1.5}
.patch-figure figcaption .label{display:block;margin-bottom:10px}
.patch-figure figcaption .note{display:block;margin-top:10px}
.patch-widget{--centre:color-mix(in srgb,var(--ink) 18%,var(--paper));--kept:color-mix(in srgb,var(--accent) 22%,var(--paper));--aux:color-mix(in srgb,var(--cool) 18%,var(--paper))}
.patch-layout{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px;padding-top:24px}
.patch-grid{display:block;flex:1 1 320px;min-width:0;height:auto}
.patch-sites{fill:var(--paper);stroke:var(--bar);stroke-width:1.2}
.patch-ghosts{fill:var(--paper);stroke:var(--bar);stroke-width:1.5;stroke-dasharray:4 3}
.patch-aux{fill:none;stroke:var(--cool);stroke-width:3;stroke-linecap:round}
.patch-sub{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:6 4}
.patch-edges{fill:none;stroke:var(--accent);stroke-width:3}
.patch-heads{fill:var(--accent)}
.patch-member circle{stroke-width:2}
.patch-member.centre circle{fill:var(--centre);stroke:var(--ink)}
.patch-member.kept circle{fill:var(--kept);stroke:var(--accent)}
.patch-member.aux circle{fill:var(--aux);stroke:var(--cool)}
.patch-grid text{font-size:13px;font-style:italic;fill:var(--ink)}
.patch-grid .ghost-label{fill:var(--bar)}
.patch-readout{flex:1 1 320px;min-width:0}
.patch-centre{margin-top:2px;font-size:34px;line-height:1;font-weight:560;letter-spacing:-.03em;font-feature-settings:'tnum'}
.patch-readout .note{margin-top:6px}
.patch-members{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-family:var(--mono);font-size:14px}
.patch-members span{display:flex;align-items:center;gap:6px}
.patch-members b{font-weight:400}
.patch-members i:not(.patch-dot){font-family:var(--sans)}
.patch-dot{display:block;flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid}
.patch-dot.centre{background:var(--centre);border-color:var(--ink)}
.patch-dot.kept{background:var(--kept);border-color:var(--accent)}
.patch-dot.aux{background:var(--aux);border-color:var(--cool)}
.patch-readout .patch-status{margin-top:10px;min-height:40px}
.patch-table{margin-top:14px;border-top:2px solid var(--ink);padding-top:8px;display:grid;grid-template-columns:76px repeat(3,minmax(0,1fr));gap:3px 6px;font-feature-settings:'tnum'}
.patch-head{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:4px 6px;font-size:12px;color:var(--muted)}
.patch-head.band{justify-content:flex-start;padding-left:0}
.patch-band{display:flex;align-items:center;height:28px;font-size:12px;color:var(--muted)}
.patch-cell{position:relative;display:flex;align-items:center;justify-content:flex-end;height:28px;padding:0 6px;border:1px solid transparent;font-family:var(--mono);font-size:13px}
.patch-cell::before{content:'';position:absolute;left:25%;top:7px;bottom:7px;width:1px;background:var(--line)}
.patch-cell.zero::before{display:none}
.patch-cell b{position:absolute;top:11px;height:6px;background:var(--accent);opacity:.35}
.patch-cell.centre b{background:var(--muted)}
.patch-cell span{position:relative}
.patch-cell.zero{border:1px dashed var(--bar);color:var(--muted);font-family:var(--sans);font-size:12px}
.patch-token{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:16px;border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--muted)}
.patch-token b{font-size:24px;line-height:1;font-weight:560;letter-spacing:-.02em;color:var(--accent);font-feature-settings:'tnum'}
.patch-widget .umap-transport{margin-top:24px}

/* 04 Paper: resources beside the citation; footer */
.paper-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px 48px;margin-top:28px}
.resources a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px var(--gap);padding:13px 0;border-top:1px solid var(--ink);text-decoration:none}
.resources a:first-child,:root[data-pdfs=later] .resources a:nth-child(3){border-top-width:2px}
.resources a:last-child{border-bottom:2px solid var(--ink)}
.resources b{font-size:18px;font-weight:620;letter-spacing:-.015em}
.resources span{font-size:14px;color:var(--muted)}
.resources a:hover b{color:var(--accent)}
.cite-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cite-head button{min-height:44px;padding:0 16px;border:1px solid var(--ink);background:transparent;font-size:13px;font-weight:600}
.cite-head button:hover{background:var(--wash)}
.bib{margin-top:12px;padding:18px 20px;background:var(--code);border-top:2px solid var(--ink);overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.6;white-space:pre}
.bib code{font-family:inherit}
.bib .t{color:var(--accent);font-weight:600}
.bib .k{font-weight:600}
.bib .f{color:var(--cool)}
.bib .p{color:var(--punct)}
.bib .y{color:var(--accent)}
.site-footer{margin-top:clamp(56px,6vw,96px);border-top:6px solid var(--ink);padding:18px 0 48px;display:flex;flex-wrap:wrap;gap:16px var(--gap);font-size:13px;line-height:1.5;color:var(--muted)}
.site-footer b{flex:0 1 var(--side);color:var(--ink);font-weight:650;font-size:15px}
.site-footer div{flex:1 1 260px;min-width:0}

@media (max-width:640px){
  .bar-row .val{font-size:14px}
  .site-header nav{gap:2px 16px}
  .bar-row .val{flex-basis:56px}
  .bar-row .val.wide{flex-basis:104px}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .bits small{font-size:18px}
  .figures{gap:24px 16px}
  .grid-play{flex-wrap:wrap}
  .figure-num .n{font-size:38px}
  .band-val{font-size:17px}
  .results-grid{grid-template-columns:minmax(0,1fr)}
  .hand-plot{grid-template-columns:36px minmax(0,1fr);gap:11px}
  .hand-panels{gap:12px}
  .hand-error{font-size:28px}
  .patch-table{grid-template-columns:60px repeat(3,minmax(0,1fr));gap:3px 4px}
  .patch-cell{padding:0 4px;font-size:12px}
}
@media print{
  .slide-nav,.site-header nav,.flow-transport,.umap-transport,.cite-head button,.theme-button{display:none}
  .section{break-inside:avoid-page}
}
/* The project page shows no collapsed panels; the standalone figures keep them. */
.flow-more,.flow-inspector,.example-details,.umap-details,.component-details{display:none}