.app{--bg:#fff;--ink:#111;--mute:#5c5c5a;--line:#e4e3df;--field:#f4f3f0;--acc:#ff5b26;--acc-text:#c23f0f;--acc-ink:#160700;--acc-tint:#ff5b2629;--scrim:#00000047;--pad:40px;--ctl:64px;--gutter:84px;--key-size:12px;--lane-size:clamp(15px, 3vw, 22px);--chart-top:40px;background:var(--bg);color:var(--ink);font-family:var(--font-sans), system-ui, sans-serif;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}@media (prefers-color-scheme:dark){.app{--bg:#000;--ink:#f2f1ed;--mute:#9b9b97;--line:#26262a;--field:#151517;--acc:#ff6b3a;--acc-text:#ff8a5f;--acc-tint:#ff6b3a3d;--scrim:#0009}}@media (max-width:600px){.app{--pad:16px;--ctl:56px;--gutter:40px;--key-size:9px;--lane-size:13px;--chart-top:24px}}@media (min-width:1280px) and (hover:hover){.app{--pad:48px}}.app button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:0;padding:0}.app-head{padding:calc(14px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) 0 calc(var(--pad) + env(safe-area-inset-left));flex:none;justify-content:space-between;align-items:baseline;gap:16px;display:flex}.app-title{letter-spacing:-.01em;margin:0;font-size:18px;font-weight:700}.app-meta{color:var(--mute);white-space:nowrap;font-size:15px}@media (max-width:600px){.app-title{font-size:16px}}.app-brand{align-items:center;gap:10px;display:flex}.app-mark{width:auto;height:36px;display:block}@media (max-width:600px){.app-brand{gap:8px}.app-mark{height:30px}}.app-chart{scrollbar-gutter:stable;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0;padding:var(--chart-top) calc(var(--pad) + env(safe-area-inset-right)) 16px calc(var(--pad) + env(safe-area-inset-left));flex:1;position:relative;overflow-y:auto}.app-fade{height:56px;margin:calc(-1 * var(--chart-top)) 0 calc(var(--chart-top) - 56px);background:linear-gradient(var(--bg) 40%, transparent);pointer-events:none;z-index:3;position:sticky;top:-40px}.app-working-bar{background:var(--acc);border-radius:2px;width:120px;height:2px}.app-working-text{color:var(--mute);padding-top:8px;font-size:15px}.invite{flex-direction:column;gap:28px;max-width:640px;padding-top:8px;transition:opacity .2s;display:flex}.invite h2{letter-spacing:-.02em;margin:0 0 10px;font-size:44px;font-weight:700;line-height:1.1}.invite p{color:var(--mute);text-wrap:pretty;margin:0;font-size:20px;line-height:1.4}.examples{flex-direction:column;gap:10px;display:flex}.example{text-align:left;text-wrap:pretty;border-radius:12px;min-height:44px;line-height:1.4;border:1px solid var(--line)!important;background:var(--field)!important;padding:14px 18px!important;font-size:18px!important}@media (max-width:600px){.invite{gap:22px}.invite h2{font-size:30px}.invite p{font-size:17px}.example{font-size:16px!important}}.score{position:relative}.score-row{gap:8px;display:flex}.score-gutter{width:var(--gutter);flex:none;position:relative}.score-col{flex:1;min-width:0;position:relative}.score-svg>svg{width:100%;height:auto;color:var(--ink);display:block}.key-label{font-size:var(--key-size);color:var(--mute);white-space:nowrap;font-weight:700;line-height:1;position:absolute;right:12px;transform:translateY(-50%)}.key-tick{background:var(--mute);width:8px;height:1.5px;position:absolute;right:0;transform:translateY(-50%)}.lane-label{font-size:var(--key-size);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:700;position:absolute;right:12px}.lane-letter{font-size:var(--lane-size);font-weight:700;line-height:1.15;position:absolute;transform:translate(-50%)}.lane-letter.is-sounding{color:var(--acc-text)}.cursor-beat{background:var(--acc-tint);pointer-events:none;border-radius:6px;position:absolute;top:0}.cursor-note{background:var(--acc);pointer-events:none;border-radius:2px;width:4px;margin-left:-2px;position:absolute}.one-line{padding:12px calc(var(--pad) + env(safe-area-inset-right)) 12px calc(var(--pad) + env(safe-area-inset-left));border-top:1px solid var(--line);flex-wrap:wrap;flex:none;align-items:center;gap:10px 16px;display:flex}.one-line-text{text-wrap:pretty;flex:240px;align-items:center;gap:10px;min-width:0;font-size:18px;line-height:1.35;display:flex}.one-line-dot{background:var(--acc);border-radius:50%;flex:none;width:8px;height:8px}.one-line-dot.ink{background:var(--ink)}.one-line-lead{color:var(--acc-text);font-weight:700}.one-line-actions{flex-wrap:wrap;gap:8px;display:flex}.reply{white-space:nowrap;border-radius:22px;height:44px;padding:0 18px!important;font-size:16px!important;font-weight:700!important}.reply.primary{background:var(--acc)!important;color:var(--acc-ink)!important}.reply.secondary{border:1.5px solid var(--acc)!important;color:var(--acc-text)!important}@media (max-width:600px){.one-line-text{font-size:16px}}.dock{padding:16px calc(var(--pad) + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));flex-direction:column;flex:none;gap:8px;display:flex}.dock.bordered{border-top:1px solid var(--line)}.heard{color:var(--mute);text-wrap:pretty;padding:0 4px;font-size:15px;line-height:1.35}.heard b{color:var(--ink)}.dock-row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.describe{flex:100%;order:0;align-items:center;gap:12px;min-width:0;display:flex}.describe-field{min-width:0;min-height:var(--ctl);border-radius:calc(var(--ctl) / 2);background:var(--field);border:1.5px solid var(--line);flex:1;align-items:center;gap:12px;padding:10px 22px;display:flex}.describe-field:focus-within{border:2px solid var(--acc)}.describe-field textarea{min-width:0;color:var(--ink);font:inherit;resize:none;background:0 0;border:0;outline:none;flex:1;max-height:2.7em;padding:0;font-size:18px;line-height:1.35}.describe-field textarea::placeholder{color:var(--mute)}.mic{width:var(--ctl);height:var(--ctl);flex:none;justify-content:center;align-items:center;display:flex;background:var(--acc)!important;color:var(--acc-ink)!important;border-radius:50%!important}.play-btn{width:var(--ctl);height:var(--ctl);flex:none;order:1;justify-content:center;align-items:center;display:flex;background:var(--ink)!important;color:var(--bg)!important;border-radius:50%!important}.play-btn:disabled{opacity:.35}.play-btn .stop-square{background:currentColor;border-radius:3px;width:18px;height:18px}.bpm-box{width:100px;height:var(--ctl);flex-direction:column;flex:none;order:1;justify-content:center;align-items:center;gap:1px;display:flex;border:1.5px solid #0000!important;border-radius:14px!important}.bpm-box.typing{border:2px solid var(--acc)!important;background:var(--field)!important}.bpm-label{letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap;font-size:11px;font-weight:700}.bpm-value{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:34px;font-weight:700;line-height:1}.bpm-box input{width:72px;color:var(--ink);font:inherit;text-align:center;font-variant-numeric:tabular-nums;caret-color:var(--acc);background:0 0;border:0;outline:none;padding:0;font-size:34px;font-weight:700;line-height:1}@media (max-width:600px){.bpm-box{width:76px}.bpm-value,.bpm-box input{font-size:28px}.describe-field textarea{font-size:16px}}.tempo-slider{min-width:96px;height:var(--ctl);appearance:none;--fill:50%;background:0 0;flex:96px;order:1;margin:0}.tempo-slider::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--ink) var(--fill), var(--line) var(--fill));border-radius:2px;height:4px}.tempo-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--field);border:2px solid var(--ink);border-radius:50%;width:28px;height:28px;margin-top:-12px;transition:transform .1s,box-shadow .1s}.tempo-slider:active::-webkit-slider-thumb{transform:scale(1.2857);box-shadow:0 0 0 8px #80808038}.tempo-slider::-moz-range-track{background:var(--line);border-radius:2px;height:4px}.tempo-slider::-moz-range-progress{background:var(--ink);border-radius:2px;height:4px}.tempo-slider::-moz-range-thumb{background:var(--field);border:2px solid var(--ink);border-radius:50%;width:24px;height:24px}.export-btn{height:var(--ctl);flex:none;order:1;border-radius:calc(var(--ctl) / 2)!important;border:1.5px solid var(--ink)!important;padding:0 24px!important;font-size:17px!important;font-weight:700!important}.export-btn:disabled{opacity:.35}@media (max-width:600px){.export-btn{padding:0 16px!important}}@media (max-width:390px){.tempo-slider{flex-basis:64px;min-width:64px}}@media (min-width:1000px) and (orientation:landscape){.describe{flex:1 1 0;order:2}.tempo-slider{flex:0 0 200px}.export-btn{order:3}}.sheet-scrim{background:var(--scrim);z-index:20;flex-direction:column;justify-content:flex-end;align-items:center;display:flex;position:absolute;inset:0}.sheet{width:100%;max-width:560px;margin-bottom:calc(32px + env(safe-area-inset-bottom));background:var(--bg);border-radius:28px;flex-direction:column;gap:10px;padding:10px 20px 20px;display:flex}@media (max-width:600px){.sheet{max-width:none;padding-bottom:calc(20px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;margin-bottom:0}}.sheet-grabber{background:var(--line);border-radius:3px;width:40px;height:5px;margin:0 auto 6px}.sheet-head{justify-content:space-between;align-items:baseline;padding:0 4px 4px;display:flex}.sheet-head h3{letter-spacing:-.02em;margin:0;font-size:22px;font-weight:800}.sheet-head span{color:var(--mute);font-size:15px}.sheet-row{text-align:left;border-radius:18px;justify-content:space-between;align-items:center;gap:16px;min-height:76px;background:var(--field)!important;padding:12px 20px!important;display:flex!important}.sheet-row b{font-size:20px;display:block}.sheet-row small{color:var(--mute);margin-top:3px;font-size:15px;display:block}.sheet-row .share{color:var(--acc-text);font-size:15px;font-weight:700}.sheet-row:disabled .share{opacity:.35}.sheet-cancel{height:52px;font-size:17px!important;font-weight:700!important}@media (orientation:landscape) and (max-height:500px){.app{--pad:16px;--ctl:48px;--gutter:40px;--key-size:9px;--lane-size:13px;--chart-top:8px}.app-head{padding-top:calc(6px + env(safe-area-inset-top))}.app-title{font-size:15px}.app-meta{font-size:13px}.app-mark{height:26px}.app-chart{padding-bottom:8px}.invite{gap:14px;padding-top:0}.invite h2{margin-bottom:4px;font-size:26px}.invite p{font-size:16px}.examples{gap:8px}.example{padding:10px 14px!important;font-size:15px!important}.one-line{padding-top:6px;padding-bottom:6px}.one-line-text{flex-basis:200px;font-size:15px}.dock{padding-top:6px;padding-bottom:max(6px, env(safe-area-inset-bottom));gap:4px}.heard{font-size:13px}.dock-row{flex-wrap:nowrap;gap:8px}.describe{flex:1 1 0;order:2;gap:8px}.describe-field{padding:4px 16px}.describe-field textarea{font-size:16px}.bpm-box{width:72px}.bpm-label{font-size:10px}.bpm-value,.bpm-box input{font-size:24px}.bpm-box input{width:56px}.tempo-slider{flex:0 140px;min-width:72px}.export-btn{order:3;padding:0 16px!important;font-size:16px!important}.sheet{margin-bottom:max(8px, env(safe-area-inset-bottom));gap:8px;padding-bottom:12px}.sheet-row{min-height:56px;padding:8px 18px!important}.sheet-cancel{height:44px}}