:root{--bg:#0d1014;--bg-raised:#151a21;--bg-sunken:#0a0d10;--line:#242c37;--text:#e8edf3;--text-dim:#94a3b4;--text-faint:#64748b;--accent:#7ee0c7;--accent-dim:#2f6b5d;--warm:#f0b46a;--hot:#f0796a;--radius:12px;--black-key-width:2.86%;--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-text-size-adjust:100%;overscroll-behavior:none;margin:0;font:15px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.app{max-width:720px;min-height:100%;padding-bottom:var(--safe-bottom);flex-direction:column;margin:0 auto;display:flex}.topbar{padding:max(10px, env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--line);align-items:center;gap:10px;display:flex}.brand{letter-spacing:.01em;align-items:center;gap:8px;font-weight:600;display:flex}.brand-mark{color:var(--accent);font-size:18px}.topbar-pitch{color:var(--text-dim);font-variant-numeric:tabular-nums;text-align:right;margin-left:auto;font-size:12px}.icon-button{border:1px solid var(--line);background:var(--bg-raised);width:38px;height:38px;color:var(--text-dim);cursor:pointer;border-radius:10px;place-items:center;font-size:15px;display:grid}.icon-button svg{fill:currentColor;width:19px;height:19px}.icon-button:active{background:var(--line)}.modes{grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 14px;display:grid}.mode-tab{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-raised);color:var(--text-dim);cursor:pointer;font:inherit;text-align:center;flex-direction:column;gap:2px;padding:9px 6px;display:flex}.mode-tab-name{font-size:14px;font-weight:600}.mode-tab-hint{color:var(--text-faint);font-size:10.5px}.mode-tab.is-active{border-color:var(--accent-dim);background:color-mix(in srgb, var(--accent) 12%, var(--bg-raised));color:var(--text)}.mode-tab.is-active .mode-tab-hint{color:var(--accent)}.notices:not(:empty){gap:6px;padding:0 14px 4px;display:grid}.notice{border-radius:10px;margin:0;padding:9px 11px;font-size:12.5px;line-height:1.4}.notice-warn{background:color-mix(in srgb, var(--hot) 16%, var(--bg-raised));border:1px solid color-mix(in srgb, var(--hot) 35%, transparent);color:#ffd9d2}.notice-info{background:color-mix(in srgb, var(--warm) 12%, var(--bg-raised));border:1px solid color-mix(in srgb, var(--warm) 28%, transparent);color:#ffe6c8}.panels{flex:1;padding:4px 14px 20px}.panel{display:none}.panel.is-active{display:block}.readout{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-sunken);text-align:center;padding:16px 12px}.readout-note{letter-spacing:-.01em;font-variant-numeric:tabular-nums;font-size:46px;font-weight:300;line-height:1.05}.readout-cents{font-variant-numeric:tabular-nums;margin-top:2px;font-size:30px;font-weight:600}.readout-cents.is-good{color:var(--accent)}.readout-cents.is-near{color:var(--warm)}.readout-cents.is-off{color:var(--hot)}.readout-beat{font-variant-numeric:tabular-nums;color:var(--accent);font-size:54px;font-weight:300;line-height:1.05}.readout-hz{color:var(--text-dim);font-variant-numeric:tabular-nums;margin-top:4px;font-size:13px}.readout-sub{color:var(--text-faint);min-height:1.2em;margin-top:5px;font-size:12px}.primary-button,.ghost-button,.toggle-button,.step-button,.chip{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--bg-raised);color:var(--text);border-radius:10px}.primary-button{background:var(--accent);border-color:var(--accent);color:#08120f;padding:12px 20px;font-weight:600}.ghost-button{color:var(--text-dim);padding:9px 14px}.ghost-button.small{padding:6px 11px;font-size:12.5px}.ghost-button:disabled{opacity:.35;cursor:default}.toggle-button{color:var(--text-dim);align-items:center;gap:8px;padding:9px 14px;display:inline-flex}.toggle-dot{background:var(--text-faint);border-radius:50%;width:9px;height:9px;transition:background .12s}.toggle-button[aria-pressed=true]{border-color:var(--accent-dim);background:color-mix(in srgb, var(--accent) 14%, var(--bg-raised));color:var(--text)}.toggle-button[aria-pressed=true] .toggle-dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}.play-controls,.tune-controls,.beats-controls{flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0;display:flex}.slider-inline{flex:1;align-items:center;gap:9px;min-width:150px;display:flex}.slider-label{color:var(--text-faint);font-size:12px}input[type=range]{accent-color:var(--accent);flex:1;min-width:80px}.keyboard-bar{justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.keyboard-range{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:12.5px}.keyboard-scroll{-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-sunken);padding:6px;overflow:auto hidden}.keyboard{min-width:714px;height:190px;position:relative}.keys-white{height:100%;display:flex}.keys-black{pointer-events:none;position:absolute;inset:0}.key{font:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border:none;padding:0}.key-white{background:linear-gradient(#e9eef4,#c9d2dc);border-radius:0 0 7px 7px;flex:1;justify-content:center;align-items:flex-end;min-width:34px;padding-bottom:7px;display:flex}.key-white[data-is-c=true]{background:linear-gradient(#f4f8fc,#d3dce6)}.key-white.is-sounding{background:linear-gradient(180deg, var(--accent), #4bb99e)}.key-black{width:var(--black-key-width);pointer-events:auto;background:linear-gradient(#2b323c,#12161c);border-radius:0 0 5px 5px;min-width:20px;height:62%;position:absolute;top:0;box-shadow:0 2px 5px #0000008c}.key-black.is-sounding{background:linear-gradient(180deg, #3f9a86, var(--accent-dim))}.key-tag{color:#5b6878;pointer-events:none;font-size:10px;font-weight:600}.key-white.is-sounding .key-tag{color:#0b1a16}.footnote{color:var(--text-faint);margin:14px 0 0;font-size:12px;line-height:1.5}.mic-gate{border:1px dashed var(--line);border-radius:var(--radius);text-align:center;padding:26px 18px}.mic-gate-text{color:var(--text-dim);margin:0 0 16px;font-size:13.5px;line-height:1.5}.meter{margin-top:14px}.meter-scale{height:16px;position:relative}.tick{background:var(--line);width:1px;height:7px;position:absolute;top:6px;transform:translate(-50%)}.tick-zero{background:var(--accent-dim);width:2px;height:11px;top:2px}.tick[data-label]:after{content:attr(data-label);color:var(--text-faint);font-size:9.5px;position:absolute;top:-8px;left:50%;transform:translate(-50%)}.meter-track{background:var(--bg-sunken);border:1px solid var(--line);border-radius:8px;height:34px;position:relative;overflow:hidden}.meter-zone{background:color-mix(in srgb, var(--accent) 16%, transparent);width:4%;position:absolute;top:0;bottom:0;left:48%}.meter-centre{background:var(--accent-dim);width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.meter-needle{background:var(--text-faint);border-radius:2px;width:4px;transition:left 90ms linear,background .15s;position:absolute;top:3px;bottom:3px;left:50%;transform:translate(-50%)}.meter-needle.is-live{background:var(--hot);box-shadow:0 0 10px color-mix(in srgb, var(--hot) 60%, transparent)}.meter-needle.is-close{background:var(--accent);box-shadow:0 0 10px var(--accent)}.meter-ends{color:var(--text-faint);justify-content:space-between;gap:8px;margin-top:6px;font-size:11.5px;display:flex}#meter-state{color:var(--text-dim);font-weight:600}.strobe{background:var(--bg-sunken);border:1px solid var(--line);border-radius:10px;width:100%;height:96px;margin-top:16px;display:block}.strobe-hint{color:var(--text-faint);text-align:center;margin:6px 0 0;font-size:11.5px}.level-readout{flex:1;align-items:center;gap:8px;min-width:160px;display:flex}.level-label,.level-value{color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:11.5px}.level-track{background:var(--bg-sunken);border:1px solid var(--line);border-radius:3px;flex:1;height:6px;overflow:hidden}.level-fill{background:var(--accent);width:0;height:100%;transition:width .1s linear}.level-fill.is-hot{background:var(--hot)}.beat-pulse{place-items:center;height:54px;margin-top:12px;display:grid}.beat-pulse span{background:var(--line);border-radius:50%;width:20px;height:20px}.beat-pulse.is-beating span{background:var(--accent);animation:beat var(--beat-period,1s) linear infinite}@keyframes beat{0%{opacity:.35;transform:scale(.6)}50%{opacity:1;transform:scale(1.5)}to{opacity:.35;transform:scale(.6)}}@media (prefers-reduced-motion:reduce){.beat-pulse.is-beating span{animation:none}}.beats-pair{color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:11.5px}.field-row{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}.field{flex-direction:column;gap:5px;display:flex}.field-label{color:var(--text-faint);font-size:11.5px}select,input[type=number]{border:1px solid var(--line);background:var(--bg-raised);width:100%;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;border-radius:10px;padding:10px 11px}.scrim{z-index:10;background:#0009;position:fixed;inset:0}.drawer{z-index:11;background:var(--bg);border-left:1px solid var(--line);flex-direction:column;width:min(430px,100%);display:flex;position:fixed;inset:0 0 0 auto}.drawer[hidden]{display:none}.drawer-head{padding:max(12px, env(safe-area-inset-top)) 16px 12px;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;display:flex}.drawer-head h2{margin:0;font-size:17px}.drawer-body{padding:4px 16px calc(28px + var(--safe-bottom));-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.group{border-bottom:1px solid var(--line);padding:18px 0}.group:last-child{border-bottom:none}.group h3{text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);margin:0 0 10px;font-size:12px}.group-note{color:var(--text-faint);margin:9px 0 0;font-size:12px;line-height:1.5}.pitch-row{align-items:center;gap:10px;display:flex}.step-button{width:44px;height:44px;color:var(--text-dim);flex:none;font-size:21px}.pitch-value{flex:1;align-items:baseline;gap:6px;display:flex}.pitch-value input{text-align:center;font-size:20px;font-weight:600}.pitch-unit{color:var(--text-faint);font-size:13px}.chips{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.chip{color:var(--text-dim);padding:6px 10px;font-size:11.5px}.chip.is-active{border-color:var(--accent-dim);background:color-mix(in srgb, var(--accent) 14%, var(--bg-raised));color:var(--text)}.temperament-map{grid-template-columns:repeat(12,1fr);gap:2px;height:92px;margin-top:12px;display:grid}.map-cell{background:var(--bg-sunken);border-radius:4px;position:relative;overflow:hidden}.map-bar{min-height:1px;position:absolute;left:22%;right:22%}.map-bar.is-sharp{background:var(--warm)}.map-bar.is-flat{background:var(--accent)}.map-label{text-align:center;color:var(--text-dim);font-size:8.5px;position:absolute;bottom:2px;left:0;right:0}.map-value{text-align:center;color:var(--text-faint);font-variant-numeric:tabular-nums;font-size:7.5px;position:absolute;top:2px;left:0;right:0}.switch-row{align-items:center;gap:10px;font-size:13.5px;display:flex}.switch-row input{width:19px;height:19px;accent-color:var(--accent)}.temp-fields{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;display:grid}.temp-fields.is-disabled{opacity:.4;pointer-events:none}.unit-input{align-items:center;gap:6px;display:flex}.unit-input span{color:var(--text-faint);font-size:12.5px}@media (min-width:560px){.keyboard{height:220px}.readout-note{font-size:56px}}