:root{--ink: #0b0711;--panel: rgba(18, 12, 26, .94);--panel-solid: #150f1e;--edge: rgba(224, 174, 76, .28);--edge-soft: rgba(224, 174, 76, .16);--brass: #e8c069;--brass-deep: #b98a34;--heather: #b07fae;--heather-deep: #7d5a9e;--wet: #6fa87f;--paper: #efe6f7;--muted: #b7a6c9;--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-data: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--shadow: 0 18px 44px rgba(4, 2, 8, .55)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0b0711;color:var(--paper);font-family:var(--font-ui);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}#app{position:fixed;inset:0;overflow:hidden}#stage{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:manipulation}#vignette{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(122% 88% at 50% 26%,#0000 44%,#09050f6b 78%,#06030ab8),linear-gradient(to bottom,#0b061257,#0b061200 26%)}#hud{position:fixed;z-index:3;top:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(to bottom,#09060fe6,#09060f85 68%,#09060f00)}.brand{display:flex;align-items:center;gap:9px;min-width:0}.brand .mark{width:22px;height:22px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 34%,#ffe6ad 0%,var(--brass) 42%,var(--brass-deep) 78%,#6d4c14 100%);box-shadow:0 0 12px #e8c06980}.wordmark{display:flex;flex-direction:column;font-family:var(--font-display);font-size:15px;letter-spacing:.2em;line-height:1.05;color:#f6ecff;text-shadow:0 1px 6px rgba(0,0,0,.7)}.wordmark small{font-family:var(--font-data);font-size:9.5px;letter-spacing:.18em;color:var(--muted)}.meters{display:flex;flex:1 1 100%;align-items:center;gap:10px;order:3}.meter{display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--edge-soft);border-radius:999px;background:var(--panel);box-shadow:0 6px 18px #04020866}.meter .label{font-family:var(--font-data);font-size:9.5px;letter-spacing:.16em;color:var(--muted)}.meter b{font-family:var(--font-data);font-size:13px;font-weight:600;color:#fdf3e0}.meter-composure{flex:1 1 auto;max-width:320px}.bar{position:relative;flex:1 1 auto;min-width:60px;height:7px;border-radius:999px;background:#78609657;overflow:hidden}.bar i{position:absolute;inset:0 auto 0 0;width:100%;border-radius:999px;background:linear-gradient(to right,var(--heather-deep),var(--brass));transition:width .16s linear,background .3s linear}.hud-actions{display:flex;gap:7px;margin-left:auto}.hud-actions button{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--edge-soft);border-radius:11px;background:var(--panel);color:#e6dcf0;cursor:pointer}.hud-actions button svg{width:20px;height:20px}.hud-actions button:hover{border-color:var(--edge);color:#fff6e2}.hud-actions button[aria-pressed=true]{color:#8d7c9e;border-color:#8d7c9e66}.hud-actions button[aria-pressed=true] #mute-wave{display:none}#status{position:fixed;z-index:3;top:calc(max(10px,env(safe-area-inset-top)) + 62px);left:50%;transform:translate(-50%);max-width:min(92vw,560px);margin:0;padding:6px 14px;border:1px solid var(--edge-soft);border-radius:999px;background:#0d0814e6;color:#e3d8ef;font-family:var(--font-display);font-size:13.5px;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.6);box-shadow:0 8px 20px #04020873;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#deck{position:fixed;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 10px max(10px,env(safe-area-inset-bottom));background:linear-gradient(to top,#09060ff0,#09060fa8 58%,#09060f00)}#phrase{display:flex;align-items:center;gap:9px;max-width:100%;padding:5px 8px 5px 12px;border:1px solid var(--edge-soft);border-radius:999px;background:var(--panel);box-shadow:0 8px 20px #0402086b}.phrase-label{font-family:var(--font-data);font-size:9.5px;letter-spacing:.2em;color:var(--muted)}.chips{display:flex;gap:4px;align-items:center;overflow:hidden;max-width:46vw}.chips em{font-family:var(--font-display);font-size:12px;color:#9787ab}.chips span{flex:none;min-width:24px;padding:2px 5px;border-radius:6px;background:#e8c06929;border:1px solid rgba(232,192,105,.34);color:#ffe7b6;font-family:var(--font-data);font-size:11px;text-align:center}.chips span.cadence{background:#b07fae3d;border-color:#b07fae80;color:#f0dcf2}#pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:min(100%,560px)}.pad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;padding:6px 4px 5px;border:1px solid rgba(232,192,105,.3);border-radius:12px;background:linear-gradient(180deg,#6d521c,#4a3614);color:#ffeec4;font-family:var(--font-display);cursor:pointer;overflow:hidden;transition:transform 90ms ease,box-shadow .16s ease,border-color .16s ease}.pad .note{font-size:17px;line-height:1;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.6)}.pad .key{font-family:var(--font-data);font-size:9.5px;color:#ffe9bdb8}.pad:after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--heather);opacity:0;transition:opacity .16s ease}.pad.lead{border-color:#b07faed9}.pad.lead:after{opacity:.8}.pad.armed{border-color:#e8c069bf}.pad:active{transform:translateY(1px) scale(.985)}.pad.lit{border-color:#ffe7b6;background:linear-gradient(180deg,#e8c069,#b98a34);color:#241533;box-shadow:0 0 22px #ffdc8c80,0 0 44px #e8c06947}.pad.lit .key{color:#241533b8}.pad:disabled{opacity:.42;cursor:default}#tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.tool{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 13px;border:1px solid var(--edge-soft);border-radius:999px;background:var(--panel);color:#e8dcf3;font-family:var(--font-display);font-size:13.5px;cursor:pointer}.tool:hover:not(:disabled){border-color:var(--edge);color:#fff4dd}.tool:disabled{opacity:.45;cursor:default}.tool kbd{padding:2px 5px;border:1px solid rgba(224,174,76,.32);border-radius:5px;background:#e8c0691f;font-family:var(--font-data);font-size:10px;color:#ffe7b6}.screen{position:fixed;inset:0;z-index:6;display:grid;place-items:center;padding:16px;background:radial-gradient(120% 90% at 50% 30%,#0a061080,#07040cd1);overflow:auto}.panel{width:min(100%,620px);max-height:calc(100vh - 32px);overflow-y:auto;padding:22px 22px 20px;border:1px solid var(--edge);border-radius:16px;background:var(--panel);box-shadow:var(--shadow);color:#ece2f5}.title-panel{text-align:left}.eyebrow{margin:0 0 6px;font-family:var(--font-data);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}h1{margin:0 0 10px;font-family:var(--font-display);font-size:clamp(34px,8vw,52px);line-height:1;letter-spacing:.02em;color:#fdf1d8;text-shadow:0 2px 20px rgba(255,205,120,.18)}h2{margin:0 0 8px;font-family:var(--font-display);font-size:26px;line-height:1.1;color:#fdf1d8}.lede{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:#d9ccea}.lede b{color:#f6e6c2;font-weight:600}.rules{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:7px}.rules li{padding-left:14px;position:relative;font-size:13.5px;line-height:1.5;color:#c9bbdb}.rules li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--heather)}.rules b{color:#efe2f6;font-weight:600}.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 14px;font-size:13px;line-height:1.45}.keys dt{font-family:var(--font-data);font-size:11px;color:#ffe7b6;white-space:nowrap;padding-top:1px}.keys dd{margin:0;color:#cbbcdd}.tally{margin:0 0 16px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}.tally li{padding:9px 11px;border:1px solid var(--edge-soft);border-radius:10px;background:#e8c06912}.tally span{display:block;font-family:var(--font-data);font-size:9.5px;letter-spacing:.16em;color:var(--muted)}.tally b{display:block;margin-top:3px;font-family:var(--font-display);font-size:20px;color:#fdf1d8}.screen-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}button.primary,button.ghost{min-height:46px;padding:10px 20px;border-radius:12px;font-family:var(--font-display);font-size:15.5px;cursor:pointer}button.primary{border:1px solid #f0d79a;background:linear-gradient(180deg,#ecc871,#b98a34);color:#241533;box-shadow:0 8px 20px #b88a3447}button.ghost{border:1px solid var(--edge-soft);background:#b07fae1a;color:#e6d9f2}button.primary:hover{background:linear-gradient(180deg,#f5d98d,#c8963c)}button.ghost:hover{border-color:var(--edge);color:#fff4dd}button:focus-visible{outline:2px solid #ffe7b6;outline-offset:2px}.foot{margin:14px 0 0;font-family:var(--font-data);font-size:10.5px;letter-spacing:.08em;color:#9b8aae}@media(min-width:760px){#hud{padding:12px 20px;gap:10px 18px}.meters{flex:1 1 auto;order:0;justify-content:flex-end;max-width:460px;margin-left:auto}#status{top:calc(max(12px,env(safe-area-inset-top)) + 60px);font-size:14.5px}#pads{grid-template-columns:repeat(8,minmax(0,1fr));width:min(100%,880px)}.pad{min-height:62px}.chips{max-width:40vw}}@media(prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important}}@media(max-width:759px){#status{top:calc(max(10px,env(safe-area-inset-top)) + 100px)}.screen{padding:12px}.panel{padding:18px 16px 16px;border-radius:14px}h1{font-size:clamp(30px,9vw,40px);margin-bottom:8px}h2{font-size:22px}.lede{font-size:13.5px;line-height:1.5;margin-bottom:10px}.rules{gap:5px;margin-bottom:12px}.rules li{font-size:12.5px;line-height:1.45}button.primary,button.ghost{min-height:44px;font-size:15px;padding:9px 16px}.foot{margin-top:10px;font-size:9.5px}.keys{grid-template-columns:1fr;gap:2px 0}.keys dt{margin-top:7px}}