*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#02040d;--bg-surface:#080c16;--bg-raised:#12161e;--bg-hover:#1b1f28;--accent:#ee8b49;--accent-dim:#915935;--accent-glow:#ee8b492e;--text:#ebe7df;--text-muted:#747a87;--text-dim:#444850;--red:#eb4c53;--red-glow:#eb4c5338;--green:#67bf6c;--yellow:#ebbe42;--border:#1b1f28;--border-dim:#10141b;--staff-line:#2f333b;--note-head:#ebe7df;--safe-bottom:env(safe-area-inset-bottom,0px)}@supports (color:lab(0% 0 0)){:root{--bg:lab(1.14302% .337139 -3.58197);--bg-surface:lab(3.28083% .232644 -5.63452);--bg-raised:lab(7.12959% .0344589 -6.54472);--bg-hover:lab(11.7409% -.0488237 -6.63255);--accent:lab(67.8824% 34.8945 51.1593);--accent-dim:lab(43.8461% 21.3124 30.7077);--accent-glow:lab(67.8824% 34.8945 51.1593/.18);--text:lab(91.9276% .353277 4.5821);--text-muted:lab(51.1845% -.306189 -7.47519);--text-dim:lab(30.3276% -.215858 -5.59978);--red:lab(56.2209% 62.1617 32.3241);--red-glow:lab(56.2209% 62.1617 32.3241/.22);--green:lab(70.4559% -40.6362 33.3194);--yellow:lab(79.4244% 7.93883 65.2758);--border:lab(11.7409% -.0488237 -6.63255);--border-dim:lab(6.12545% -.0183359 -5.22885);--staff-line:lab(21.0451% -.172615 -5.58007);--note-head:lab(91.9276% .353277 4.5821)}}body,html{background:var(--bg);height:100%;color:var(--text);font-family:DM Sans,sans-serif;overflow:hidden}[tabindex],a,button,input,select{touch-action:manipulation}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.metronome-strip{background:var(--bg-surface);border-bottom:1px solid var(--border-dim);gap:8px;padding:6px 12px;animation:.2s slideDown}.met-play-btn,.metronome-strip{flex-shrink:0;align-items:center;display:flex}.met-play-btn{border:1px solid var(--accent-dim);background:var(--accent-glow);cursor:pointer;width:36px;height:36px;color:var(--accent);border-radius:50%;justify-content:center;transition:all .15s}.met-play-btn:active{transform:scale(.92)}.met-bpm-control{flex-shrink:0;gap:4px}.met-bpm-btn,.met-bpm-control{align-items:center;display:flex}.met-bpm-btn{border:1px solid var(--border);background:var(--bg-raised);cursor:pointer;width:32px;height:32px;color:var(--text-muted);border-radius:8px;justify-content:center;transition:all .12s}.met-bpm-btn:active,.met-bpm-btn:hover{color:var(--text);border-color:var(--accent-dim)}.met-bpm-value{flex-direction:column;align-items:center;gap:0;min-width:36px;display:flex}.met-bpm-num{color:var(--text);font-family:JetBrains Mono,monospace;font-size:14px}.met-bpm-label,.met-bpm-num{font-weight:600;line-height:1}.met-bpm-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-size:8px}.met-divider{background:var(--border-dim);flex-shrink:0;width:1px;height:28px}.met-beats{flex:1;overflow-x:auto}.met-beat,.met-beats{align-items:center;gap:2px;display:flex}.met-beat{border-radius:6px;flex-direction:column;flex:1;min-width:16px;padding:3px 0;transition:background 80ms;position:relative}.met-dot{background:var(--border);border-radius:50%;width:8px;height:8px;transition:all 80ms}.met-beat.sam .met-dot{background:var(--accent-dim);width:12px;height:12px}.met-beat.section-start .met-dot{background:var(--text-dim);width:10px;height:10px}.met-num{color:var(--text-dim);font-family:JetBrains Mono,monospace;font-size:8px;line-height:1}.met-beat.sam .met-num{color:var(--accent-dim);font-weight:700}.met-section-sep{background:var(--text-dim);opacity:.3;width:1px;position:absolute;top:3px;bottom:3px;left:-2px}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes panelIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.composer-warning{background:var(--yellow);color:var(--bg);z-index:30;border-radius:10px;align-items:center;gap:6px;padding:10px 18px;font-size:12px;font-weight:600;animation:.15s panelIn;display:flex;position:fixed;bottom:140px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0000004d;box-shadow:0 4px 16px lab(0% 0 0/.3)}.composer-bar{padding-top:8px;padding-left:12px;padding-right:12px;padding-bottom:calc(8px + var(--safe-bottom));background:var(--bg-surface);border-top:1px solid var(--border-dim);flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:8px;display:flex}.composer-bar-btn{border:1px solid var(--border);background:var(--bg-raised);cursor:pointer;color:var(--text-muted);border-radius:8px;align-items:center;gap:6px;min-height:40px;padding:8px 14px;font-family:DM Sans,sans-serif;font-size:12px;font-weight:500;transition:all .15s;display:flex}.composer-bar-btn:active,.composer-bar-btn:hover{color:var(--text);border-color:var(--accent-dim)}.composer-bar-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}.composer-bar-btn.primary:active,.composer-bar-btn.primary:hover{filter:brightness(1.1)}.composer-bar-btn svg{width:14px;height:14px}.grain{pointer-events:none;z-index:100;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");display:none;position:fixed;inset:0}@media print{.composer-add-btn,.composer-bar,.composer-remove-btn,.composer-row-actions,.config-strip,.control-bar,.grain,.header,.metronome-strip,.mobile-nav,.onboarding-banner,.shruti-calibration,.swara-palette,.toast,.tweaks-overlay,.waveform-strip{display:none!important}body,html{height:auto;overflow:visible}}@media (min-width:481px){.metronome-strip{padding:6px 16px}.composer-bar{padding-top:10px;padding-left:16px;padding-right:16px;padding-bottom:calc(10px + var(--safe-bottom))}}@media (min-width:769px){.met-bpm-num{font-size:16px}.metronome-strip{gap:10px;padding:6px 20px}.composer-bar{padding:10px 20px}.grain{display:block}}@media (hover:none) and (pointer:coarse){.composer-add-btn:active,.composer-bar-btn:active,.config-chip:active,.export-btn:active,.icon-btn:active,.mode-tab:active,.ne-btn:active,.ne-swara-btn:active,.palette-btn:active,.semitone-btn:active,.sing-btn:active,.tweak-opt:active,.upload-btn:active{transform:scale(.95)}}@media (max-width:768px){.composer-bar,.control-bar,.swara-palette{padding-bottom:calc(68px + var(--safe-bottom))}.composer-warning{bottom:calc(140px + var(--safe-bottom))}}