.demo{display:flex;flex-direction:column;align-items:center}.demo__screen{position:relative;width:100%;max-width:60rem;border:1px solid var(--rule);background:#05060c;padding:10px;line-height:0}.demo__overlay{position:absolute;inset:10px;display:grid;place-content:center;background:rgb(5 4 12/.5);line-height:normal}.demo__overlay[hidden]{display:none}.demo__screen:fullscreen .demo__overlay{inset:0}.demo__overlay button{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgb(5 4 12/.72);border:1px solid var(--rule);padding:.95rem 1.7rem;cursor:pointer;transition:border-color 140ms ease,color 140ms ease}.demo__overlay button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.demo__overlay button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.demo__overlay button:disabled{opacity:.65;cursor:default}.demo canvas{display:block;width:100%;height:auto}.demo__screen:fullscreen{display:grid;place-content:center;width:100%;max-width:none;padding:0;border:0;background:#05040c}.demo__screen:fullscreen canvas{width:100vw;height:56.25vw;max-width:177.78vh;max-height:100vh}.demo__bar{width:100%;max-width:60rem;border:1px solid var(--rule);border-top:0;background:#0b0c14;padding:.7rem .9rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.demo__bar button{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:0 0;border:1px solid var(--rule);padding:.5rem .9rem;cursor:pointer;transition:border-color 140ms ease,color 140ms ease}.demo__bar button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.demo__bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.demo__bar button:disabled{opacity:.4;cursor:default}.demo__now,.demo__pos,.demo__status{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}.demo__status{color:var(--accent)}.demo__pos{font-variant-numeric:tabular-nums;color:var(--ink-faint);margin-left:auto}.demo-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:clamp(1.5rem,3vw,2.5rem);margin-top:clamp(2rem,5vw,3rem);padding-bottom:var(--band)}.demo-notes h2{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 .85rem;font-weight:700}.demo-credits{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;align-items:baseline}.demo-credits dt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}.demo-credits dd{margin:0;font-size:.9rem;color:var(--ink-soft)}.demo-credits a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}@media(prefers-reduced-motion:reduce){.demo__bar button,.demo__overlay button{transition:none}}