:root{--bg: var(--tg-theme-bg-color, #1a1a1a);--fg: var(--tg-theme-text-color, #f2f2f2);--muted: var(--tg-theme-hint-color, #8a8a8a);--accent: var(--tg-theme-button-color, #ef4444);--accent-fg: var(--tg-theme-button-text-color, #ffffff);--section-bg: var(--tg-theme-secondary-bg-color, #232323);--link: var(--tg-theme-link-color, #6ab7ff);--safe-top: env(safe-area-inset-top);--safe-bottom: env(safe-area-inset-bottom)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overscroll-behavior:none}#app{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--safe-top) + .5rem) .6rem calc(var(--safe-bottom) + .5rem);gap:.45rem}header{text-align:center}header h1{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:.08em}.status{background:var(--section-bg);padding:.4rem .7rem;border-radius:.55rem;font-size:.78rem;text-align:center;font-variant-numeric:tabular-nums}.topbar{display:flex;flex-direction:column;gap:.3rem}.topbar-row{display:flex;align-items:center;gap:.8rem;background:var(--section-bg);padding:.35rem .55rem;border-radius:.55rem;font-size:.75rem}.topbar-group{display:inline-flex;align-items:center;gap:.3rem}.topbar-right{margin-left:auto}.topbar-toggle{background:transparent;border:1px solid var(--muted);color:var(--fg);border-radius:.4rem;padding:.25rem .55rem;font-size:.7rem;cursor:pointer;font-weight:500;letter-spacing:.01em;white-space:nowrap}.topbar-toggle.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.topbar-toggle:active{transform:scale(.95)}.topbar-toggle-icon{padding:.2rem .35rem;display:inline-flex;align-items:center;justify-content:center}.topbar-toggle-icon-slot{display:inline-flex;width:1rem;height:1rem;align-items:center;justify-content:center}.topbar-toggle-icon-slot svg{width:100%;height:100%}.topbar-value{font-variant-numeric:tabular-nums;font-weight:600;font-size:.85rem;min-width:3.2rem;text-align:left}.topbar-value-small{font-size:.78rem;min-width:2.4rem;text-align:center}.topbar-label{color:var(--muted);font-size:.7rem;letter-spacing:.02em}.topbar-mini-btn{background:transparent;border:1px solid var(--muted);color:var(--fg);border-radius:.35rem;height:1.5rem;min-width:1.5rem;padding:0 .4rem;font-size:.7rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-weight:500}.topbar-mini-btn:active{transform:scale(.92)}.topbar-mini-btn.tapping{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.tracks{flex:1;min-height:4rem;position:relative}.tracks-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}.tracks-empty{margin:0;padding:1rem .5rem;text-align:center;color:var(--muted);font-size:.85rem;font-style:italic}.timeline-area{position:relative;overflow:hidden;padding:0}.timeline-ruler{position:relative;height:22px;background:#7f7f7f0f;border-top:1px solid rgba(127,127,127,.18);border-bottom:1px solid rgba(127,127,127,.18);user-select:none;margin-bottom:4px}.ruler-tick{position:absolute;top:0;bottom:0;padding:0 0 2px 3px;font-size:9px;color:var(--muted);border-left:1px solid rgba(127,127,127,.3);display:flex;align-items:flex-end;pointer-events:none;line-height:1}.ruler-tick.labeled{border-left-color:#7f7f7f8c}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#d73a49;pointer-events:none;z-index:5;transform:translate(0);will-change:transform}.transport-bar{display:flex;align-items:center;gap:8px;padding:4px 6px;border-top:1px solid rgba(127,127,127,.15);border-bottom:1px solid rgba(127,127,127,.15);background:var(--section-bg)}.transport-btn-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--fg);border:1px solid rgba(127,127,127,.3);border-radius:4px;cursor:pointer;padding:0}.transport-btn-icon:active{transform:scale(.95)}.transport-btn-icon[disabled]{opacity:.35;cursor:not-allowed}.transport-btn-icon.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.transport-btn-icon.record-btn.recording,.transport-btn-icon.record-btn.counting-in{background:#d73a49;color:#fff;border-color:#d73a49}.transport-time{margin-left:auto;font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted)}.track-lane{position:relative;padding:0;font-size:.8rem;background:var(--section-bg);border-radius:.35rem;overflow:hidden}.track-lane.muted{opacity:.55}.track-lane.recording{box-shadow:inset 0 0 0 1px #d73a49}.track-lane.recording .lane-waveform{background:#d73a490f}.lane-header{display:flex;align-items:center;gap:.4rem;padding:.3rem .5rem .2rem}.lane-name{flex:1;font-weight:500;font-size:.76rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lane-duration{color:var(--muted);font-size:.65rem;font-variant-numeric:tabular-nums;min-width:2rem;text-align:right}.lane-btns{display:flex;gap:.2rem;align-items:center}.lane-btn{background:transparent;border:1px solid rgba(127,127,127,.3);color:var(--fg);border-radius:3px;width:24px;height:24px;font-size:.7rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.lane-btn:active{transform:scale(.94)}.lane-btn.danger{border-color:#ef444480;color:#ef4444}.lane-waveform{position:relative;height:32px;background:#7f7f7f0d;overflow:hidden}.lane-canvas{position:absolute;top:0;height:100%;display:block}.lane-mixer{display:none}body[data-mixer=true] .lane-mixer{display:flex;align-items:center;gap:.4rem;padding:.2rem .5rem;height:32px;background:#7f7f7f0d}body[data-mixer=true] .lane-waveform{display:none}.lane-mixer-gain{flex:1;accent-color:var(--accent);height:1.2rem;margin:0}.lane-mixer-pan{flex:0 0 80px;accent-color:var(--accent);height:1.2rem;margin:0}.lane-mixer-mute{flex:0 0 1.6rem;width:1.6rem;height:1.6rem;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--muted);color:var(--fg);border-radius:.3rem;cursor:pointer;padding:0}.lane-mixer-mute:active{transform:scale(.92)}.lane-mixer-mute.muted{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.controls{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.5rem 0}.transport{display:flex;gap:.6rem;justify-content:center;width:100%}.transport-btn{flex:1;max-width:11rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--section-bg);color:var(--fg);border:1px solid var(--muted);border-radius:999px;padding:.55rem 1rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:background .12s ease,color .12s ease,transform .12s ease,opacity .12s ease}.transport-btn:active{transform:scale(.97)}.transport-btn[disabled]{opacity:.35;cursor:not-allowed}.transport-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.transport-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}.transport-icon .icon{display:block}.record-btn:not(.active) .transport-icon{color:var(--accent)}.record-btn.counting-in{animation:pulse .4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.hint{margin:0;color:var(--muted);font-size:.75rem;text-align:center}.hint-quiet{font-size:.65rem;opacity:.65}.hint-headphones{display:none}body[data-ios=true][data-recording=true] .hint-headphones{display:block}.topbar-ios-only{display:none}body[data-ios=true] .topbar-ios-only{display:inline-flex}footer{display:flex;flex-direction:column;align-items:stretch;gap:.5rem}.send-btn{background:var(--accent);color:var(--accent-fg);border:none;padding:.7rem 1rem;border-radius:.55rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .12s ease,transform .12s ease}.send-btn:active{transform:scale(.98)}.send-btn[disabled]{opacity:.4;cursor:not-allowed}.micro{margin:0;text-align:center;color:var(--muted);font-size:.65rem;font-family:ui-monospace,SF Mono,Menlo,monospace}.track-settings-btn{margin-left:.1rem}.track-settings-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--section-bg);border-left:1px solid var(--muted);padding:.6rem .75rem 1rem;display:flex;flex-direction:column;gap:.55rem;font-size:.78rem;transform:translate(100%);transition:transform .15s ease-out;z-index:50;overflow-y:auto}.track-settings-panel.open{transform:translate(0)}.track-settings-header{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.track-settings-title{font-weight:600;font-size:.75rem;color:var(--fg);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-settings-close{background:transparent;border:1px solid var(--muted);color:var(--fg);border-radius:.3rem;width:1.4rem;height:1.4rem;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.track-settings-close:active{transform:scale(.92)}.track-settings-row{display:flex;align-items:center;gap:.4rem}.track-settings-label{flex:0 0 2.4rem;color:var(--muted);font-size:.7rem;letter-spacing:.02em}.track-settings-slider{flex:1;min-width:0;accent-color:var(--accent);height:1.2rem;background:transparent}.track-settings-value{flex:0 0 2.6rem;text-align:center;font-variant-numeric:tabular-nums;font-size:.7rem;color:var(--fg)}.track-settings-reset{background:transparent;border:none;color:var(--link);font-size:.68rem;cursor:pointer;padding:.1rem .25rem}.track-settings-reset:active{opacity:.6}.track-offset-controls{flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem}.load-error{position:fixed;top:0;left:0;right:0;z-index:1000;padding:.6rem .8rem;background:#b91c1c;color:#fff;font-size:.8rem;text-align:center}