:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#191110;color:#f2eee9;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 32px}
header>div{display:flex;align-items:baseline;gap:18px}h1{margin:0;color:#bed4c7;font-size:16px;letter-spacing:.18em;font-weight:500}.byline,.eyebrow{font-size:10px;letter-spacing:.16em;color:#aca19d}
main{flex:1;min-height:0;display:flex;flex-direction:column}.stage{flex:1;min-height:0;margin:0 16px;display:flex;align-items:center;justify-content:center;overflow:hidden}canvas{display:block;touch-action:none;cursor:crosshair}
.controls{flex:none;padding:18px 16px 12px}.tools{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}button,select{font:inherit;font-size:13px;min-height:44px;padding:10px 16px;border:1px solid #51413b;border-radius:24px;background:#211917;color:#f2eee9;cursor:pointer}button:hover,select:hover{border-color:#bed4c7}button[aria-pressed="true"]{background:#344139;border-color:#bed4c7}button:disabled,select:disabled{opacity:.45;cursor:wait}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #bed4c7;outline-offset:4px}#recall{border-color:#ad6b4c}.quiet{background:transparent;color:#bed4c7;border-color:#51413b}label{font-size:12px;display:flex;align-items:center;gap:10px;padding:0 8px;color:#c3b8b4}input[type=range]{width:88px;height:44px;accent-color:#bed4c7;margin:0}#hint{text-align:center;font-size:12px;line-height:1.5;color:#aca19d;margin:14px 0 0}
footer{flex:none;display:flex;justify-content:space-between;gap:12px;padding:14px 32px 20px;font-size:10px;letter-spacing:.1em;color:#aca19d;line-height:1.5;min-height:48px}#offline-status{letter-spacing:0;text-align:right}.version{color:#aca19d}
dialog{background:#211917;color:#f2eee9;border:1px solid #51413b;border-radius:20px;padding:28px;max-width:520px;width:calc(100% - 24px);max-height:calc(100dvh - 32px);line-height:1.6}dialog::backdrop{background:#100a09cc}dialog form{display:flex;justify-content:flex-end}dialog h2{font-size:29px;font-weight:500;line-height:1.25;letter-spacing:-.025em}dialog h3{font-size:15px;font-weight:600;margin-top:28px}dialog p{font-size:14px;color:#d1c8c3}dialog .eyebrow,dialog .muted{font-size:12px;color:#aca19d}.close{font-size:12px}[hidden]{display:none!important}.no-script{position:fixed;inset:40% 16px auto;background:#211917;border:1px solid #ad6b4c;padding:24px;text-align:center}
@media(max-width:600px){header{padding:16px}header>div{display:block}.byline{display:block;font-size:8px;margin-top:6px}h1{font-size:14px}.tools{gap:6px}button,select{padding:10px 13px;font-size:12px}.controls{padding:10px 12px}footer{padding:12px 16px}.version{display:none}.keyboard-hint{display:none}#hint{font-size:11px}.stage{margin:0 8px}}
@media(max-height:480px){header{padding:8px 16px}.byline{display:none}.controls{padding:4px 12px}#hint{margin:4px 0 0}footer{padding:4px 16px;min-height:24px}button,select{min-height:40px;padding:8px 12px}input[type=range]{height:40px}}