:root{--bg-dark:#1a1918;--bg-light:#f7f6f2;--controls-dark:#201f1d;--controls-light:#f9f8f5;--highlight-fill:#01696f40;--highlight-edge:#4f98a3;--accent:#4f98a3;--font-ui:system-ui, -apple-system, sans-serif;--btn-min-size:44px;--highlight-transition:.2s ease-out}@media (prefers-color-scheme:dark){:root{--bg:var(--bg-dark);--controls-surface:var(--controls-dark);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}@media (prefers-color-scheme:light){:root{--bg:var(--bg-light);--controls-surface:var(--controls-light);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}:root{--bg:var(--bg-dark);--controls-surface:var(--controls-dark)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--accent);font-family:var(--font-ui);overflow:hidden}#app{height:100%;padding-top:env(safe-area-inset-top);flex-direction:column;display:flex}.score-container{touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch;background:var(--bg);flex:auto;position:relative;overflow:auto scroll}.score-highlight{pointer-events:none;background:var(--highlight-fill);border-top:2px solid var(--highlight-edge);border-bottom:2px solid var(--highlight-edge);transition:top var(--highlight-transition), height var(--highlight-transition);z-index:10;position:absolute;left:0;right:0}.controls-bar{padding:8px 16px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:var(--controls-surface);border-top:1px solid #ffffff14;flex:none;align-items:center;gap:8px;display:flex}.btn{min-width:var(--btn-min-size);min-height:var(--btn-min-size);font-family:var(--font-ui);cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:0 16px;font-size:16px;font-weight:600;transition:opacity .15s}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-stop{background:#c0392b}.btn-record{background:#8e44ad}.btn-record.recording{background:#c0392b}.status-text{color:#fff9;font-size:14px}.rms-meter{background:#ffffff1a;border-radius:4px;flex:auto;min-width:40px;max-width:120px;height:8px;overflow:hidden}.rms-bar{background:var(--accent);border-radius:4px;width:0%;height:100%;transition:width .12s ease-out}.loading-overlay{background:var(--bg);z-index:100;color:var(--accent);justify-content:center;align-items:center;font-size:18px;display:flex;position:fixed;inset:0}