:root{color-scheme:dark;--gold:#ffc45d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#382c27,#14151b 70%);color:#fff0d5;font:16px/1.5 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:24px}a{color:var(--gold)}header{text-align:center}header>a{float:left}h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1;margin:10px 0}h1 em{color:var(--gold);font-style:normal}.eyebrow{font-size:.75rem;letter-spacing:.2em;color:#d5a862}button{font:inherit;font-weight:700;border:1px solid #826845;border-radius:12px;background:#312d2a;color:#fff0d5;padding:9px 15px;cursor:pointer}button:hover{background:#51432f}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #fff;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.console{background:#202029;border:2px solid #836544;border-radius:22px;overflow:hidden;box-shadow:0 18px 60px #0008}.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px}.bar strong{margin-right:auto}.stage{position:relative;background:#25212a;max-width:min(100%,calc((100dvh - 250px)*1.7778));min-width:300px;margin:auto}canvas{display:block;width:100%;aspect-ratio:16/9;touch-action:manipulation}.overlay{position:absolute;inset:0;background:#11131ae8;display:flex;align-items:center;justify-content:center;padding:14px;overflow:auto}.overlay[hidden], [hidden]{display:none!important}.panel{max-width:650px;text-align:center}.panel h2{font-size:clamp(1.1rem,3vw,2rem);margin:5px}.panel p{margin:8px 0}#level-list{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:12px 0}#level-list button{max-width:180px;font-size:.9rem}#share-url{width:100%;margin-top:10px;padding:10px}.controls{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:12px}.controls label{display:flex;gap:8px;align-items:center}.controls input{width:125px;accent-color:var(--gold)}output{min-width:36px}#paw{background:var(--gold);color:#251b12}#hint{min-height:24px;text-align:center;margin:5px 12px;color:var(--gold)}.keys{text-align:center;font-size:.82rem;color:#c8bdac;margin:8px}footer{text-align:center;color:#bfb7a8;font-size:.85rem;padding:18px}footer label{display:inline-block;margin:0 12px}input[type=checkbox]{accent-color:var(--gold)}@media(max-width:650px){main{padding:10px}header>a{float:none}header>p:last-child{font-size:.85rem}.bar{gap:5px}.bar strong{width:100%;text-align:center}.bar button{padding:7px 9px;font-size:.8rem}.stage{max-width:100%;min-width:0}.controls{gap:10px}.controls label{font-size:.8rem}.controls input{width:95px}.overlay{position:absolute;padding:8px}.panel p{font-size:.8rem}#level-list button{padding:6px;font-size:.7rem}.keys{font-size:.7rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
