@layer reset,tokens,base,components;@layer reset{*,*:before,*:after{box-sizing:border-box}body{margin:0}}@layer tokens{:root{color-scheme:dark;--color-page: #0b0d14;--color-panel: #151a28;--color-text: #e8ecf6;--color-muted: #8a93ab;--color-accent: #4aa3ff;--color-danger: #ff5d6c;--radius: 10px;--space: 12px}}@layer base{body{min-block-size:100dvh;display:grid;place-items:center;padding:var(--space);background:var(--color-page);color:var(--color-text);font:16px/1.4 system-ui,sans-serif}[hidden]{display:none!important}}@layer components{.panel{inline-size:min(100%,26rem);display:grid;gap:var(--space);padding:calc(var(--space) * 2);background:var(--color-panel);border-radius:var(--radius)}h1,h2{margin:0;text-wrap:balance}label{display:grid;gap:4px;color:var(--color-muted)}input{padding:.6em .8em;border:1px solid color-mix(in oklch,var(--color-muted) 50%,transparent);border-radius:8px;background:var(--color-page);color:inherit;font:inherit}.row{display:flex;gap:var(--space)}.row>input{flex:1;min-inline-size:0;text-transform:uppercase}button{padding:.6em 1em;border:0;border-radius:8px;background:var(--color-accent);color:#04101f;font:inherit;font-weight:600;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}.error{margin:0;color:var(--color-danger)}.hint{margin:0;color:var(--color-muted);font-size:.85rem}.code{margin:0;font:700 2.5rem/1 ui-monospace,monospace;letter-spacing:.2em;text-align:center}#stage{position:relative;inline-size:min(100%,calc((100dvh - 24px) * 16 / 9))}#board{inline-size:100%;block-size:auto;aspect-ratio:16 / 9;background:#05060a;border-radius:var(--radius)}#overlay{position:absolute;inset:0;display:grid;place-content:center;gap:var(--space);padding:var(--space);text-align:center;background:color-mix(in oklch,var(--color-page) 78%,transparent);border-radius:var(--radius)}#overlay-title{margin:0;font-size:clamp(1.5rem,5vw,3rem);font-weight:800}#overlay-detail{margin:0;color:var(--color-muted)}#overlay .row{justify-content:center}#banner{position:absolute;inset-block-start:8px;inset-inline:0;margin-inline:auto;inline-size:fit-content;max-inline-size:90%;padding:.4em 1em;margin-block:0;background:var(--color-danger);color:#1a0408;border-radius:999px;font-weight:600}}