/* Shared chrome for the playbook example pieces. Two faces, self-hosted from the exhibit: Hanken Grotesk and Conso.
   Served from the mission-control root, so the fonts resolve at ../../exhibit/fonts/. */
@font-face{font-family:"Hanken Grotesk";src:url("../../exhibit/fonts/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:"Hanken Grotesk";src:url("../../exhibit/fonts/hanken-grotesk-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:block}
@font-face{font-family:"Conso";src:url("../../exhibit/fonts/conso-regular.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Conso";src:url("../../exhibit/fonts/conso-medium.woff2") format("woff2");font-weight:500 700;font-display:block}
:root{--ground:#0f0f0e;--ink:#eee9df;--muted:#a8a296;--line:#3a3833;--hot:#e0177e;--mod:clamp(44px,11.1vw,160px);color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-synthesis:none;font-kerning:normal;font-optical-sizing:auto;overflow-x:hidden}
p{text-wrap:pretty;font-size:17px;line-height:1.55;max-width:62ch}
h1,h2{text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(40px,8.4vw,128px);line-height:.9;letter-spacing:-.045em}
h2{font-weight:700;font-size:clamp(22px,2.6vw,36px);line-height:1.08;letter-spacing:-.02em}
.mono{font-family:"Conso",ui-monospace,monospace;font-size:13px;line-height:1.4;letter-spacing:.01em}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--hot);outline-offset:2px}
.stage{position:relative;width:100%;height:100svh;min-height:520px;overflow:hidden;contain:strict}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .over{position:absolute;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.credit{color:var(--muted);font-size:13px;line-height:1.5;padding:14px 16px 22px;max-width:none;letter-spacing:.04em}
.credit a{color:var(--muted)}
.back{position:absolute;z-index:3;top:14px;left:16px;color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.back:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}