/* Progressive enhancement: the complete illustrated essay exists without script. */
.scroll-story{margin:42px auto;max-width:1120px;position:relative}
.build-case{max-width:1120px}
.build-case-intro{max-width:690px;margin-left:auto;margin-right:auto}
.story-stage{display:none}
.story-figure{margin:28px 0;border:1px solid var(--rule);background:#fff;color:var(--ink)}
.story-console{margin:18px 20px 0;padding:10px;border:1px solid #c978ac;border-radius:12px;background:#ed9dcb;box-shadow:0 3px 0 #b76b9b}
.story-console-top{display:flex;justify-content:space-between;gap:12px;padding:0 4px 9px;color:#502d45;font:600 .62rem/1.4 var(--sans);letter-spacing:.09em}
.story-console svg{background:#0d0c10;border:1px solid #613a53;border-radius:3px}
.story-figure-title{padding:20px 24px 0;font:600 1.2rem/1.3 var(--serif)}
.story-figure svg{display:block;width:100%;height:auto;max-height:45vh}
.story-figure figcaption{padding:12px 24px 20px;font:400 .72rem/1.5 var(--sans);color:var(--muted)}
.scroll-story .build-steps{max-width:none;margin:0;padding:0;border:0}
.scroll-story .build-step{display:block;border:0;padding:35px 0}
.scroll-story .build-step>span{display:block;margin-bottom:16px;font:500 .7rem var(--sans);color:var(--red)}
.scroll-story h3{font:500 clamp(1.6rem,2.7vw,2.2rem)/1.18 var(--serif);margin:0 0 22px}
.scroll-story p{font:400 1.1rem/1.7 var(--serif);color:var(--ink)}
.scroll-story .source-id{font:400 .65rem var(--sans)}
.score-step{padding:35px 0}
.score-step>.label{margin-bottom:16px}
.harness-detail{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:24px 0}
.harness-detail summary{padding:14px 0;font:500 .8rem/1.5 var(--sans);cursor:pointer}
.harness-detail p{font-size:.95rem}
.story-enhanced{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.story-enhanced .story-stage{display:block;position:sticky;top:90px;min-width:0;border:1px solid var(--rule);background:#fff}
.story-enhanced .story-stage .story-figure{margin:0;border:0}
.story-progress{height:3px;background:#c978ac;width:0}
.story-position{border-top:1px solid var(--rule);padding:12px 24px;font:500 .65rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.story-enhanced [data-story-step]{min-height:74vh;padding:12vh 0 16vh;scroll-margin-top:120px}
.story-enhanced [data-story-step]>.story-figure{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.story-enhanced [data-story-step]:last-child{min-height:65vh;padding-bottom:8vh}
.story-enhanced .build-step>div{min-width:0}
.story-enhanced .build-step p{font-size:1.1rem;line-height:1.7}
.score-working,.reference-details,.extra-experiments{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:24px auto}
.score-working{max-width:900px}
.score-working>summary,.reference-details>summary,.extra-experiments>summary{cursor:pointer;padding:22px 0;font:500 1rem/1.4 var(--sans)}
.extra-experiments>summary span{display:block;margin:8px 0 0 20px;font-size:.75rem;color:var(--muted)}
.extra-experiments[open]>summary{margin-bottom:38px}
.reference-details .benchmark-guide{border:0}
.origin-story{margin-top:50px}
@media(max-width:760px){
 .story-enhanced{display:block;margin:24px 0}
 .story-enhanced .story-stage{top:56px;z-index:4;background:#fff}
 .story-stage .story-console{margin:9px 12px 0;padding:6px;border-radius:8px}
 .story-stage .story-console-top{padding-bottom:5px;font-size:.5rem}
 .story-stage .story-figure-title{font:600 .9rem/1.3 var(--serif);padding:10px 14px 0}
 .story-stage .story-figure svg{height:24vh;max-height:195px;min-height:125px}
 .story-stage .story-figure figcaption{padding:4px 14px 8px;font-size:.6rem}
 .story-position{padding:7px 14px;font-size:.55rem}
 .story-enhanced [data-story-step]{min-height:64vh;padding:8vh 10px 12vh;scroll-margin-top:48vh}
 .story-enhanced .build-step p,.scroll-story p{font-size:1.05rem;line-height:1.65}
 .story-enhanced [data-story-step]:last-child{min-height:75vh}
 .scroll-story h3{font-size:1.75rem}
}
@media(prefers-reduced-motion:reduce){.scroll-story *{scroll-behavior:auto;transition:none}}
@media print{
 .story-enhanced{display:block}.story-enhanced .story-stage{display:none}
 .story-enhanced [data-story-step]{min-height:0;padding:20px 0}
 .story-enhanced [data-story-step]>.story-figure{position:static;width:auto;height:auto;margin:20px 0;overflow:visible;clip-path:none;white-space:normal;break-inside:avoid}
}

/* The release table and index grow out of the arcade into an editorial chart. */
.paper-console{background:#efe5eb;border-color:#c8a8bc;box-shadow:0 3px 0 #c8a8bc}
.paper-console svg{background:#fff;border-color:#d3c4cc}
.paper-console .story-console-top{color:#725567}
.release-story .story-figure-title{min-height:64px}
.story-next-links{display:flex;flex-wrap:wrap;gap:12px 20px}
.story-next-links a{font:500 .78rem/1.5 var(--sans);color:var(--red);text-decoration:underline;text-underline-offset:4px}
.image-reference{max-width:900px}
.image-reference>p{max-width:720px;font:400 .95rem/1.65 var(--serif);margin:20px auto}
.image-reference>img{display:block;width:100%;max-width:720px;height:auto;margin:24px auto}
.guide-search{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:18px 22px;font:500 .75rem/1.4 var(--sans)}
.guide-search input{width:min(100%,340px);padding:11px 14px;border:1px solid var(--rule);border-radius:0;background:#fff;color:var(--ink);font:400 .85rem var(--sans)}
@media(max-width:760px){
 .release-story .story-figure-title{min-height:0}
 .release-story .story-stage>.story-stage-content .story-figure svg{height:26vh;max-height:220px}
 .release-story .story-figure figcaption{min-height:32px}
 .guide-search{display:block}.guide-search input{display:block;margin-top:10px;width:100%}
}

.rail .nav-full,.rail .nav-short{font-weight:inherit}
.rail .nav-short{display:none}
@media(max-width:760px){
 .rail .nav-full{display:none}.rail .nav-short{display:inline}
 .story-enhanced .story-stage::before{content:"";position:absolute;left:-16px;right:-16px;top:-22px;height:21px;background:#fff;pointer-events:none}
}