.blog-preview{padding:40px 0;border-top:2px solid var(--line)}
.blog-preview>h2{font:500 clamp(26px,3vw,38px)/1.3 var(--mono);margin-bottom:16px;text-shadow:2px 2px 0 #dcefff}
.blog-preview>p,.blog-entry p{font:15px/1.8 var(--mono);max-width:68ch;margin-bottom:12px}
.blog-language,.blog-entry time{font-size:13px;color:var(--muted)}
.blog-entry{display:grid;grid-template-columns:minmax(160px,30%) minmax(0,1fr);align-items:start;gap:24px;padding:24px 0;border-bottom:2px solid var(--line);max-width:900px}
.blog-thumbnail{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border:2px solid var(--ink)}
.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.blog-tags a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid var(--ink);background:var(--surface);font:13px/1.5 var(--mono);text-decoration:none}
.blog-tags a:hover{background:var(--accent)}
.blog-main:has(.blog-article-layout){max-width:1160px}
.blog-cover{margin:0 0 40px;max-width:760px}
.blog-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--ink)}
.blog-article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(190px,1fr);gap:40px;align-items:start}
.blog-article-layout>article{grid-column:1;grid-row:1;min-width:0}
.blog-outline{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-height) + 24px);border-left:2px solid var(--line);padding-left:20px;font:13px/1.7 var(--mono);max-height:calc(100dvh - var(--header-height) - 100px);overflow:auto}
.blog-outline summary{font-weight:500;cursor:pointer;min-height:44px;align-content:center}
.blog-outline ol{list-style:none;padding:0;margin:8px 0 16px}
.blog-outline a{display:flex;align-items:center;min-height:44px;text-underline-offset:4px;padding-block:8px}
.blog-outline .outline-h3{padding-left:16px}
.blog-outline a:hover{background:var(--accent)}
.blog-prose :is(h2,h3){scroll-margin-top:12px}
.blog-share{margin-top:40px;padding-top:24px;border-top:2px solid var(--line);font:14px/1.7 var(--mono)}
.blog-share h2{font:500 22px/1.4 var(--mono);margin-bottom:16px}
.blog-share-actions{display:flex;flex-wrap:wrap;gap:12px}
.blog-share-actions :is(button,a){display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:2px solid var(--ink);background:var(--surface);color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}
.blog-share-actions [hidden]{display:none}
.blog-share-actions :is(button,a):hover{background:var(--accent)}
.blog-share-actions button:disabled{cursor:wait;opacity:.7}
.share-status{min-height:24px;margin-top:12px}
.share-link-label{display:block;margin:8px 0}
.blog-share input{display:block;width:100%;min-height:44px;padding:10px;border:1px solid var(--ink);background:var(--surface);color:var(--ink);font:13px/1.6 var(--mono)}
.blog-adjacent{display:flex;flex-wrap:wrap;gap:24px;margin-top:32px;padding-top:24px;border-top:2px solid var(--line);font:15px/1.7 var(--mono)}
.blog-adjacent a{flex:1 1 220px;min-height:44px;text-underline-offset:5px}.blog-adjacent small{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}.blog-adjacent a[rel=next]{text-align:right}
.blog-footer .blog-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:10;margin:0;padding:8px 12px;background:var(--surface);border:2px solid var(--ink);font:13px/1.6 var(--mono);box-shadow:2px 2px 0 var(--ink)}
.blog-page :is(a,button,input,summary):focus-visible,.blog-tags a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
@media(max-width:900px){.blog-article-layout{grid-template-columns:1fr;gap:24px}.blog-outline{grid-column:1;grid-row:1;position:static;max-height:none;border-left:0;border-block:2px solid var(--line);padding:12px 0}.blog-article-layout>article{grid-row:2}.blog-outline .outline-top{display:none}.blog-cover{margin-bottom:24px}}
@media(max-width:540px){.blog-entry{grid-template-columns:1fr;gap:16px}.blog-thumbnail{max-width:100%}.blog-adjacent a[rel=next]{text-align:left}.blog-footer{padding-bottom:100px}}
.blog-entry h2,.blog-entry h3{font:500 clamp(22px,2.4vw,30px)/1.4 var(--mono);margin:12px 0}
.blog-entry h2 a,.blog-entry h3 a{text-decoration-thickness:2px;text-underline-offset:6px}
.blog-entry h2 a:hover,.blog-entry h3 a:hover{background:var(--accent)}
.blog-all{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-weight:500;text-underline-offset:5px}
.blog-main{max-width:808px;margin-inline:auto;padding:56px 24px 64px;overflow-wrap:anywhere}
.blog-heading{margin-bottom:40px}
.blog-heading h1{font:500 clamp(36px,5vw,56px)/1.2 var(--mono);margin:16px 0 24px;text-shadow:3px 3px 0 #dcefff}
.blog-heading>p:not(.blog-meta){font:17px/1.8 var(--mono);max-width:65ch}
.blog-meta{font:13px/1.7 var(--mono);color:var(--muted)}
.blog-back{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:5px;margin-bottom:20px}
.blog-prose{font:17px/1.9 var(--mono)}
.blog-prose p,.blog-prose ul,.blog-prose ol,.blog-prose blockquote,.blog-prose pre,.blog-prose table{margin:0 0 24px}
.blog-prose h2{font:500 26px/1.4 var(--mono);margin:44px 0 20px}
.blog-prose h3{font:500 21px/1.5 var(--mono);margin:32px 0 16px}
.blog-prose li{margin-bottom:12px}.blog-prose ul,.blog-prose ol{padding-left:1.5em}
.blog-prose a{text-decoration-thickness:2px;text-underline-offset:4px}
.blog-prose a:hover{background:var(--accent)}
.blog-prose img{display:block;max-width:100%;height:auto;border:2px solid var(--ink)}
.blog-prose pre{overflow-x:auto;padding:20px;background:var(--surface);border:2px solid var(--line);font:14px/1.7 var(--mono);white-space:pre}
.blog-prose code{font-family:var(--mono);background:var(--surface);padding:2px 4px}.blog-prose pre code{padding:0}
.blog-prose blockquote{border-left:4px solid var(--ink);padding:4px 0 4px 24px}
.blog-prose blockquote p:last-child{margin-bottom:0}
.blog-prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px}
.blog-prose th,.blog-prose td{padding:12px;border:1px solid var(--line);text-align:left}
.blog-footer{max-width:808px;margin:0 auto;padding:32px 24px 56px;border-top:2px solid var(--line);font:14px/1.8 var(--mono)}
.blog-footer p{margin-bottom:16px}.blog-footer a{display:inline-flex;align-items:center;min-height:44px;margin-right:24px;text-underline-offset:5px}
.blog-skip{position:fixed;top:-100px;left:16px;z-index:20;padding:12px;background:var(--accent);color:var(--ink)}.blog-skip:focus{top:12px}
@media(max-width:760px){.blog-main{padding:32px 6% 48px}.blog-prose{font-size:16px;line-height:1.85}.blog-heading>p:not(.blog-meta){font-size:16px}.blog-footer{padding-inline:6%}.blog-entry{padding-block:20px}}

/* ── Dance score ──────────────────────────────────────────────────────────────
   One routine's layers share a single time axis. The stage is the story: it comes
   up with the dance and is handed back at the end, so the score has to show the
   hand-back, not just the dance. */
.dance-score{--dance-gutter:98px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);margin:32px 0 36px;background:var(--paper);font:14px/1.6 var(--mono);font-variant-numeric:tabular-nums}
.dance-main{min-width:0;padding:24px}
.dance-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dance-head h3{font:500 clamp(18px,1.9vw,25px)/1.35 var(--mono);text-wrap:balance}
.dance-controls{display:flex;gap:6px;flex-shrink:0}
.dance-controls button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 12px var(--mono);cursor:pointer;transition:transform 120ms ease-out,background 160ms ease-out}
.dance-controls button[aria-pressed=true]{background:var(--accent);border-color:var(--ink)}
.dance-hint{margin:8px 0 20px;font-size:12px;color:var(--muted)}
.dance-stage{position:relative;padding:6px 0;border-block:1px solid var(--line)}
.dance-lanes{display:grid;gap:2px}
.dance-lane{display:grid;grid-template-columns:calc(var(--dance-gutter) - 10px) minmax(0,1fr);align-items:center;gap:10px;height:26px}
.dance-lane-label{font:500 10px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dance-track{position:relative;height:100%;min-width:0}
.dance-tick{position:absolute;top:50%;left:calc(var(--at) * 1%);width:2px;height:9px;margin-left:-1px;background:var(--line);transform:translateY(-50%);transition:background 80ms linear,height 80ms linear}
.dance-tick[data-alt]{height:15px}
.dance-tick[data-lit]{background:var(--ink)}
.dance-block{position:absolute;top:50%;left:calc(var(--from) * 1%);width:calc((var(--to) - var(--from)) * 1%);height:13px;border:1px solid var(--line);background:var(--surface);transform:translateY(-50%);transition:background 80ms linear,border-color 80ms linear}
.dance-block[data-lit]{background:var(--accent);border-color:var(--ink)}
.dance-block-label{position:absolute;top:50%;left:calc(var(--at) * 1%);margin-left:5px;transform:translateY(-50%);font:500 10px/1 var(--mono);color:var(--muted);white-space:nowrap}
.dance-cover{position:absolute;left:var(--dance-gutter);right:0;top:0;bottom:0;pointer-events:none}
.dance-playhead{position:absolute;top:0;bottom:0;left:calc(var(--at) * 1%);width:2px;margin-left:-1px;background:var(--ink);opacity:0}
.dance-score[data-armed] .dance-playhead{opacity:1}
.dance-axis{display:grid;grid-template-columns:var(--dance-gutter) minmax(0,1fr);gap:10px;margin-top:6px;font-size:10px;color:var(--muted)}
.dance-axis span:last-child{text-align:right}
.dance-scrub-label{display:block;margin-top:14px;font-size:11px;color:var(--muted)}
.dance-scrub{display:block;width:100%;min-height:44px;margin:0;accent-color:var(--ink);cursor:pointer}
.dance-note{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;line-height:1.7;color:var(--muted)}
.dance-readout{min-width:0;border-left:1px solid var(--line);padding:24px;background:var(--surface)}
.dance-eyebrow{font-size:11px;color:var(--muted);margin-bottom:8px}
.dance-clock{font:500 clamp(26px,3.2vw,38px)/1.1 var(--mono);font-variant-numeric:tabular-nums}
.dance-clock small{font-size:13px;color:var(--muted);margin-left:4px}
.dance-facts{display:grid;grid-template-columns:1fr auto;gap:10px 14px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px}
.dance-facts dt{min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dance-facts dd{text-align:right;font-variant-numeric:tabular-nums}
.dance-state{display:inline-block;padding:1px 6px;border:1px solid var(--line);background:var(--paper);font:500 11px/1.5 var(--mono);white-space:nowrap}
.dance-state[data-on]{border-color:var(--ink);background:var(--accent)}
@media(hover:hover) and (pointer:fine){.dance-controls button:hover{background:var(--surface-hover);transform:translateY(-2px)}}
@media(max-width:900px){.dance-score{grid-template-columns:minmax(0,1fr)}.dance-readout{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.dance-score{--dance-gutter:66px;box-shadow:4px 4px 0 var(--shadow)}.dance-main,.dance-readout{padding:18px 14px}.dance-lane{height:24px}.dance-block-label{display:none}}
@media(prefers-reduced-motion:reduce){.dance-controls button,.dance-tick,.dance-block{transition:none}}
.blog-cover figcaption{margin-top:8px;font:13px/1.7 var(--mono);color:var(--muted)}

/* ── Pipeline figure ───────────────────────────────────────────────────────────
   Six hops a spoken sentence takes, from the reader's microphone to the avatar.
   The readout swaps so each hop is read at the reader's pace instead of being a
   wall of caption. Hops only LOOK clickable once the script has run, so a reader
   without JS gets a labelled diagram plus a plain list of all six. */
.pipeline{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow);margin:32px 0 36px;background:var(--paper);font:14px/1.6 var(--mono)}
.pipeline-main{min-width:0;padding:24px}
.pipeline-title{font:500 clamp(18px,1.9vw,25px)/1.35 var(--mono);text-wrap:balance}
.pipeline-hint{margin:8px 0 20px;font-size:12px;color:var(--muted)}
.pipeline-chain{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pipeline-chain li{display:flex;align-items:center}
.pipeline-chain li:not(:last-child)::after{content:"→";margin-left:10px;color:var(--muted)}
.pipeline-hop{display:grid;gap:2px;align-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:500 13px/1.35 var(--mono);text-align:left}
.pipeline-hop-where{font:400 11px/1.4 var(--mono);color:var(--muted)}
[data-pipeline-ready] .pipeline-hop{cursor:pointer;transition:transform 120ms ease-out,background 160ms ease-out,border-color 160ms ease-out}
[data-pipeline-ready] .pipeline-hop[aria-pressed=true]{background:var(--accent);border-color:var(--ink);transform:translateY(-2px)}
.pipeline-note{margin:20px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:11px;line-height:1.7;color:var(--muted)}
.pipeline kbd{padding:1px 5px;border:1px solid var(--line);background:var(--surface);font:500 11px/1.5 var(--mono)}
.pipeline-readout{min-width:0;border-left:1px solid var(--line);padding:24px;background:var(--surface)}
.pipeline-eyebrow{display:none;margin:0 0 12px;font-size:11px;color:var(--muted)}
[data-pipeline-ready] .pipeline-eyebrow{display:block}
.pipeline-detail{display:grid;gap:10px;padding:16px 0 0;border-top:1px solid var(--line)}
.pipeline-detail:first-of-type{padding-top:0;border-top:0}
.pipeline-detail h4{font:500 15px/1.4 var(--mono)}
.pipeline-detail p{margin:0;font-size:12.5px;line-height:1.75;color:var(--muted)}
[data-pipeline-ready] .pipeline-detail{display:none}
[data-pipeline-ready] .pipeline-detail[data-hop-active]{display:grid}
.pipeline-facts{display:grid;gap:2px;margin:6px 0 0;font-size:12px}
.pipeline-facts dt{color:var(--muted)}
.pipeline-facts dd{margin:0 0 8px}
@media(hover:hover) and (pointer:fine){[data-pipeline-ready] .pipeline-hop:hover{background:var(--surface-hover)}}
@media(max-width:900px){.pipeline{grid-template-columns:minmax(0,1fr)}.pipeline-readout{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.pipeline{box-shadow:4px 4px 0 var(--shadow)}.pipeline-main,.pipeline-readout{padding:18px 14px}}
@media(prefers-reduced-motion:reduce){[data-pipeline-ready] .pipeline-hop{transition:none}}