:root{color-scheme:dark;font:14px system-ui,sans-serif;background:#07151d;color:#e9f3f1}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;padding:clamp(12px,2vw,28px)}main{max-width:1380px;margin:auto}h1{font-size:clamp(1.5rem,3vw,2.4rem);margin:.3em 0}.eyebrow{color:#83d8df;letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}.note{max-width:88ch;line-height:1.5;color:#b8cbd0}.note a{color:#9de5ea}.controls{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:18px 0}.controls label{display:grid;gap:5px;color:#c3dadd}.controls select,.controls button,#tiles button{min-height:44px;padding:8px 12px;background:#102d36;border:1px solid #527c82;color:#e9f3f1}.controls button{min-width:44px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px}.layout>div{min-width:0}.stage{position:relative;border:1px solid #527c82;background:#102b32;overflow:hidden}.stage canvas{display:block;width:100%;aspect-ratio:5/3;touch-action:none;cursor:grab}.stage canvas.dragging{cursor:grabbing}.stage #labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.stage #labels span{position:absolute;transform:translate(-50%,-50%);font:700 12px system-ui,sans-serif;color:white;text-shadow:0 1px 4px #06151b,0 0 5px #06151b}.stage #labels span.selected{color:#fff0a8}#fallback{padding:18px}.layout aside{border:1px solid #527c82;background:#0c2630;padding:18px;align-self:start}.layout aside h2{margin:0 0 8px}.layout aside dl{display:grid;grid-template-columns:1fr auto;gap:6px}.layout aside dt{color:#b8cbd0}.layout aside dd{margin:0;text-align:right}.legend{font-size:.8rem;color:#b2cbd0}#tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:12px}#tiles button{min-width:0;padding:4px;font-size:.75rem}#tiles button[aria-pressed=true],#tiles button:focus-visible,.controls button:focus-visible,.controls select:focus-visible{outline:2px solid #fff1aa;outline-offset:2px;background:#285a61}#status{min-height:1.4em;color:#f7d18b}@media(max-width:850px){.layout{grid-template-columns:1fr}}@media(max-width:420px){#tiles{gap:2px}#tiles button{font-size:.64rem;padding:2px}}