:root{--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Georgia", "Cambria", serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--transition-fast: .12s ease}@media (prefers-reduced-motion: reduce){:root{--transition-fast: 0ms}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}[data-theme=classic-ivory]{--bg-page: #faf5ed;--bg-surface: #fffdf9;--bg-elevated: #f3e9d8;--wood-frame: #462816;--wood-trim: #6e4124;--text-primary: #231810;--text-secondary: #5c4738;--accent-primary: #b8732a;--accent-strong: #8f5314;--border-subtle: #decbb1;--key-white: #fffdf8;--key-white-active: #fce3b4;--key-black: #241c18;--key-black-active: #9c5b1c;--key-target-glow: #d97706}[data-theme=peacock]{--bg-page: #0d2b30;--bg-surface: #133940;--bg-elevated: #1b4b54;--wood-frame: #081e22;--wood-trim: #19646b;--text-primary: #f4fbf9;--text-secondary: #b5dad6;--accent-primary: #10b981;--accent-strong: #059669;--border-subtle: #27636d;--key-white: #f7fdfa;--key-white-active: #a7f3d0;--key-black: #0f2429;--key-black-active: #059669;--key-target-glow: #34d399}[data-theme=midnight-riyaaz]{--bg-page: #0f1424;--bg-surface: #182038;--bg-elevated: #222d4d;--wood-frame: #090c17;--wood-trim: #374675;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--accent-primary: #f59e0b;--accent-strong: #d97706;--border-subtle: #2e3b5e;--key-white: #eef2f6;--key-white-active: #fde68a;--key-black: #131826;--key-black-active: #d97706;--key-target-glow: #fbbf24}[data-theme=sunset-mehfil]{--bg-page: #fff4ed;--bg-surface: #ffffff;--bg-elevated: #fde4d4;--wood-frame: #4c1d3d;--wood-trim: #782b59;--text-primary: #311328;--text-secondary: #6e3b5c;--accent-primary: #e0533c;--accent-strong: #c23822;--border-subtle: #f3c4ad;--key-white: #fffdfb;--key-white-active: #fed7aa;--key-black: #36152b;--key-black-active: #e0533c;--key-target-glow: #ea580c}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;max-width:100vw;overflow-x:hidden;background-color:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}button,select,input{font:inherit}.app-shell{min-height:100dvh;display:flex;flex-direction:column;max-width:1280px;margin:0 auto;padding:.75rem 1rem 1.5rem;gap:.75rem}.top-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.6rem .9rem}.brand-group{display:flex;align-items:center;gap:.6rem}.brand-logo{width:34px;height:34px;border-radius:8px;background:var(--wood-frame);border:2px solid var(--accent-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.brand-title{margin:0;font-size:1.12rem;font-family:var(--font-display)}.brand-tagline{margin:0;font-size:.75rem;color:var(--text-secondary)}.header-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.mode-tabs{display:flex;gap:.35rem;background:var(--bg-elevated);padding:.25rem;border-radius:var(--radius-sm)}.mode-tab{border:none;background:transparent;color:var(--text-secondary);padding:.42rem .85rem;border-radius:6px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}.mode-tab.active{background:var(--accent-primary);color:#fff}.mobile-tune-toggle{display:none}.controls-drawer{display:block}.controls-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.65rem;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.75rem 1rem}.control-group{display:flex;flex-direction:column;gap:.25rem}.control-label{font-size:.74rem;font-weight:600;color:var(--text-secondary);display:flex;justify-content:space-between}.control-input,.btn-secondary,.btn-primary{padding:.42rem .62rem;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-primary);font-size:.84rem}.btn-primary{background:var(--accent-primary);color:#fff;border-color:var(--accent-strong);font-weight:600;cursor:pointer}.btn-secondary{cursor:pointer;font-weight:500}.harmonium-cabinet,.keyboard-bed,.white-key,.black-key{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none}.white-key>span,.black-key>span{pointer-events:none;-webkit-user-select:none;user-select:none}.harmonium-cabinet{background:linear-gradient(180deg,var(--wood-frame),var(--wood-trim));border-radius:var(--radius-lg);padding:.8rem;box-shadow:0 10px 25px #0000003d;color:#fdf8f0;overflow:hidden}.cabinet-status-strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.45rem;margin-bottom:.55rem;padding:.38rem .7rem;background:#00000047;border-radius:var(--radius-sm)}.live-swara-pill{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.92rem}.engine-status-pill{font-size:.76rem;opacity:.9}.mobile-keyboard-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.5rem}.mobile-layout-toggle,.saptak-jump-group{display:flex;gap:.3rem;background:#00000047;padding:.2rem;border-radius:var(--radius-sm)}.mobile-pill-btn{border:1px solid rgba(255,255,255,.16);background:transparent;color:#f8fafc;font-size:.74rem;font-weight:600;padding:.26rem .55rem;border-radius:6px;cursor:pointer}.mobile-pill-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.stacked-manuals-container{display:flex;flex-direction:column;gap:.5rem}.keyboard-deck-wrapper{width:100%}.deck-saptak-caption{font-size:.71rem;font-weight:600;letter-spacing:.02em;color:#ffffffd6;margin-bottom:.2rem;padding-left:.2rem}.keyboard-scroll-viewport{width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:.35rem;-webkit-overflow-scrolling:touch}.keyboard-bed{position:relative;display:flex;width:100%;user-select:none;-webkit-user-select:none;touch-action:none}.keyboard-bed-single{height:235px;min-width:760px}.keyboard-bed-stacked{height:156px;min-width:100%;border-top:3px solid rgba(0,0,0,.35);border-radius:0 0 8px 8px}.white-key{flex:1;min-width:0;height:100%;background:var(--key-white);border:1px solid #8c7b6b;border-radius:0 0 8px 8px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 2px .5rem;cursor:pointer;position:relative;z-index:1;color:#1f1610;box-shadow:inset 0 -5px #0000001f;transition:transform var(--transition-fast),background-color var(--transition-fast)}.white-key.active{background:var(--key-white-active);transform:translateY(2px);box-shadow:inset 0 -2px #0003}.white-key.target-hint,.black-key.target-hint{outline:3px solid var(--key-target-glow);outline-offset:-3px}.black-key{position:absolute;top:0;height:60%;background:var(--key-black);border:1px solid #000;border-radius:0 0 6px 6px;z-index:2;color:#f8fafc;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 1px .38rem;cursor:pointer;box-shadow:0 4px 6px #00000059}.black-key.active{background:var(--key-black-active);transform:translateY(2px)}.key-swara-label{font-weight:700;font-size:.82rem;line-height:1.1}.key-western-label{font-size:.64rem;opacity:.78;line-height:1.1}.key-shortcut-badge{font-size:.6rem;padding:1px 4px;border-radius:4px;background:#00000024;margin-bottom:.18rem}.panel-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:.9rem}.note-table{width:100%;border-collapse:collapse;font-size:.85rem}.note-table th,.note-table td{padding:.42rem;border-bottom:1px solid var(--border-subtle);text-align:left}.mobile-bottom-nav{display:none}@media (max-width: 830px){.app-shell{padding:.45rem .5rem 4.5rem;gap:.5rem}.desktop-only-nav,.desktop-only-btn{display:none}.mobile-tune-toggle{display:inline-flex;align-items:center;font-weight:600}.mobile-tune-toggle.active{background:var(--accent-primary);color:#fff}.controls-drawer{display:none}.controls-drawer.open{display:block}.top-header{padding:.45rem .65rem}.brand-title{font-size:1rem}.brand-tagline{font-size:.68rem}.theme-select-compact{max-width:128px;padding:.35rem .45rem;font-size:.78rem}.controls-bar{grid-template-columns:repeat(2,minmax(0,1fr));padding:.55rem .65rem;gap:.45rem}.harmonium-cabinet{padding:.55rem .45rem}.live-swara-pill{font-size:.82rem}.engine-status-pill{display:none}.key-swara-label{font-size:.75rem}.key-western-label{font-size:.58rem}.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--bg-surface);border-top:1px solid var(--border-subtle);display:grid;grid-template-columns:repeat(3,1fr);z-index:50;box-shadow:0 -4px 14px #0000001f}.mobile-nav-item{border:none;background:transparent;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;gap:2px;cursor:pointer}.mobile-nav-item.active{color:var(--accent-primary);background:var(--bg-elevated)}}@media (max-width: 420px){.keyboard-bed-stacked{height:142px}}