.page{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.intro{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:48px 0 36px}
@media (min-width:1000px){.intro{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:end;padding:80px 0 52px}}
h1{font-weight:900;font-size:var(--t-7);line-height:.95;letter-spacing:-.045em;margin:0 0 22px}
.dek{font-size:var(--t-4);line-height:1.38;max-width:30ch;margin:0 0 18px;letter-spacing:-.01em}
.facts{color:var(--graphite);font-size:var(--t-1);max-width:54ch;margin:0}
.result{margin:0;background:var(--frame);border-radius:10px;overflow:hidden}
.result video{display:block;width:100%;aspect-ratio:8/3;background:#000}
.result figcaption{padding:10px 14px;color:#C9C5BD;font-size:var(--t-0);line-height:1.55}
.result figcaption b,.result a{color:#fff}

.replay{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:1000px){.replay{grid-template-columns:290px minmax(0,1fr);gap:40px}}
.rail{display:none}
@media (min-width:1000px){.rail{display:block;position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow:auto;padding:2px 6px 2px 2px}}
.rail h2{font-size:var(--t-3);font-weight:900;letter-spacing:-.02em;margin:0 0 4px}
.rail p{color:var(--graphite);font-size:var(--t-0);margin:0 0 14px}
.rail ol,dialog ol{list-style:none;margin:0;padding:0}
.rail ol{border-left:1px solid var(--rule)}
.rail li a,dialog li a{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:8px;text-decoration:none;font-size:var(--t-1);line-height:1.35}
.rail li a{padding:7px 0 7px 14px;color:var(--graphite);margin-left:-1px;border-left:3px solid transparent}
.rail li a:hover{color:var(--ink)}
.rail .w{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rail a[aria-current="true"]{color:var(--ink);border-left-color:var(--signal);font-weight:700}
.rail a[aria-current="true"] .w{-webkit-line-clamp:5}
.rail .t,dialog .t{font-variant-numeric:tabular-nums;font-weight:500}
.nextday{margin:10px 0 4px 14px;font-size:var(--t-0);color:var(--graphite)}
.where{color:var(--term-dim);font-variant-numeric:tabular-nums}
@media (min-width:1000px){.term-bar .narrow,.where{display:none!important}}

.after{max-width:760px;margin:72px auto 0}
.after h2{font-size:var(--t-5);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin:0 0 16px}
.after ul{padding-left:1.1em;margin:0 0 40px}
.after li{margin:0 0 8px}
.callout{border-left:4px solid var(--signal);background:var(--paper-raised);border-radius:0 8px 8px 0;padding:20px 24px;margin:0 0 40px}
.callout h2{font-size:var(--t-4)}
.callout p{font-size:var(--t-1)}
.callout p:last-child{margin-bottom:0}
details.reproduce{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0}
details.reproduce summary{font-weight:900;font-size:var(--t-3);cursor:pointer}
details.reproduce[open] summary{margin-bottom:16px}
.reproduce h3{font-weight:900;font-size:var(--t-2);margin:28px 0 8px}
.reproduce p{font-size:var(--t-1)}
.note{color:var(--graphite);font-size:var(--t-1)}
.snippet{margin:14px 0 16px;min-width:0}
.snippet-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 12px;background:var(--term-raised);color:var(--term-dim);border-radius:8px 8px 0 0;font-size:var(--t-0)}
.copy{font:700 var(--t-0)/1 var(--font-sans);color:var(--term-fg);background:#2A2724;border:1px solid #3A3632;border-radius:6px;padding:8px 12px;min-height:36px;cursor:pointer}
pre{margin:0;padding:14px 16px;background:var(--term);color:var(--term-fg);border-radius:0 0 8px 8px;white-space:pre-wrap;overflow-wrap:anywhere;font:400 .8rem/1.75 var(--font-mono)}
.reproduce>pre{border-radius:8px}
pre code{font:inherit}
.copy-feedback{display:block;font-size:var(--t-0);color:var(--graphite);min-height:1.5em;margin-top:4px}
.provenance{margin-top:40px;font-size:var(--t-1);color:var(--graphite)}
.provenance h2{font-size:var(--t-3);color:var(--ink)}

dialog{border:0;border-radius:12px;padding:0;max-width:min(560px,calc(100vw - 32px));width:100%;background:var(--paper-raised);color:var(--ink)}
dialog::backdrop{background:rgba(21,20,19,.6)}
dialog .dh{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule)}
dialog ol{padding:6px 0;max-height:70vh;overflow:auto}
dialog li a{padding:10px 16px}
dialog li.nextday{margin:10px 16px 4px}
dialog button{font:700 var(--t-1) var(--font-sans);background:none;border:1px solid var(--rule);border-radius:6px;padding:8px 12px;min-height:40px;color:var(--ink);cursor:pointer}