:root{--bg-dark:#07090e;--bg-surface:#0f141f;--bg-card:#151b28;--bg-card-hover:#1c2436;--bg-deck:rgba(18,24,36,0.85);--bg-deck-sub:rgba(9,13,20,0.92);--teal-primary:#0d9488;--teal-bright:#14b8a6;--teal-dark:#0f766e;--teal-glow:rgba(20,184,166,0.3);--brass:#d4af37;--brass-bright:#fbbf24;--brass-glow:rgba(251,191,36,0.25);--wood-warm:#8b4513;--wood-dark:#24140b;--text-main:#f8fafc;--text-muted:#94a3b8;--text-sub:#64748b;--border:rgba(255,255,255,0.07);--border-brass:rgba(212,175,55,0.22);--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-main:0 12px 36px rgba(0,0,0,0.7);--shadow-deck:0 2px 8px rgba(0,0,0,0.3);--shadow-card:0 3px 10px rgba(0,0,0,0.35)}body.theme-delhi{--bg-surface:#150f0a;--bg-card:#1f150e;--bg-deck:rgba(26,17,12,0.88);--border-brass:rgba(212,175,55,0.28);--brass-bright:#f59e0b}body.theme-kolkata{--bg-surface:#13090c;--bg-card:#1d0d12;--bg-deck:rgba(24,11,16,0.88);--border-brass:rgba(244,63,94,0.28);--brass-bright:#fb7185}body.theme-kirtan{--bg-surface:#141108;--bg-card:#1d190c;--bg-deck:rgba(25,21,11,0.88);--border-brass:rgba(251,191,36,0.32);--brass-bright:#fde047}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}[hidden]{display:none !important}body{background-color:var(--bg-dark);background-image:radial-gradient(ellipse at 50% 0%,rgba(20,184,166,0.06) 0%,transparent 60%),radial-gradient(circle at 10% 20%,rgba(212,175,55,0.04) 0%,transparent 40%);background-attachment:fixed;color:var(--text-main);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.4;min-height:100vh}.page-wrapper{display:flex;justify-content:center;align-items:flex-start;width:100%;padding:12px 8px 40px}.center-content{width:100%;max-width:680px;background-color:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border-brass);box-shadow:var(--shadow-main);overflow:hidden;backdrop-filter:blur(12px)}.top-tab-bar{display:flex;background:#090d14;border-bottom:1.5px solid rgba(13,148,136,0.4);padding:4px;gap:4px}.top-tab-btn{flex:1;padding:7px 8px;background:transparent;color:#94a3b8;border:none;font-size:12px;font-weight:700;cursor:pointer;text-align:center;border-radius:var(--radius-sm);transition:all 0.15s ease;display:flex;align-items:center;justify-content:center;gap:5px}.top-tab-btn:hover{color:#f1f5f9;background-color:rgba(255,255,255,0.04)}.top-tab-btn.active{color:#ffffff;background:linear-gradient(135deg,rgba(13,148,136,0.4) 0%,rgba(15,118,110,0.25) 100%);box-shadow:inset 0 0 0 1px rgba(20,184,166,0.5)}.w3-teal{background:linear-gradient(90deg,#0d766e 0%,#0f5852 100%);padding:6px 12px;display:flex;align-items:center;justify-content:space-between}.w3-teal h3{font-size:13px;font-weight:800;letter-spacing:0.5px;color:#f0fdfa;margin:0}.jali-cabinet{position:relative;width:100%;min-height:72px;background:linear-gradient(180deg,rgba(26,14,10,0.92),rgba(16,9,7,0.96)),url('images/wood/madeira4.webp') repeat center center;background-blend-mode:multiply;border-bottom:3px solid #2e1810;box-shadow:inset 0 8px 20px rgba(0,0,0,0.8),0 4px 15px rgba(0,0,0,0.5);background-size:240px;border-bottom:2px solid #140b05;box-shadow:inset 0 4px 14px rgba(0,0,0,0.7);display:flex;align-items:center;padding:8px 14px;overflow:hidden}.jali-grill-overlay{position:absolute;inset:0;background-repeat:repeat;background-position:center;background-size:120px;opacity:0.4;mix-blend-mode:overlay;pointer-events:none}.jali-cabinet-content{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;width:100%;background:rgba(10,14,22,0.86);backdrop-filter:blur(6px);border:1px solid var(--border-brass);border-radius:var(--radius-sm);padding:6px 12px}.jali-brand{display:flex;flex-direction:column}.jali-title{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--brass-bright);text-transform:uppercase}.jali-sub{font-size:10px;color:#94a3b8;font-weight:600}.bellows-air-indicator{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,0.4);padding:3px 8px;border-radius:12px;border:1px solid rgba(251,191,36,0.2)}.air-meter-bar{width:60px;height:6px;background:#090d14;border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,0.12)}.air-meter-fill{width:0%;height:100%;background:linear-gradient(90deg,#10b981,#f59e0b,#ef4444);transition:width 0.1s ease-out}.jali-lid-shutter{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,14,7,0.97) 0%,rgba(38,18,9,0.98) 100%);border:1.5px solid rgba(251,191,36,0.3);border-radius:6px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:scaleY(0);transform-origin:top;transition:opacity 0.3s ease,transform 0.3s ease;backdrop-filter:blur(3px);cursor:pointer}.jali-lid-shutter.closed{opacity:1;pointer-events:auto;transform:scaleY(1)}.jali-lid-shutter-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,0.7);border:1px solid var(--brass);color:var(--brass-bright);font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:14px}.tab-content{display:none;animation:fadeIn 0.15s ease-in-out}.tab-content.active{display:block}@keyframes fadeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.tab-panel-body{padding:10px 12px 18px}.w3-card{background-color:var(--bg-card) !important;border:1px solid var(--border);border-radius:var(--radius-md) !important;box-shadow:var(--shadow-card) !important;margin:0 0 6px 0 !important;padding:8px 12px !important;transition:border-color 0.15s ease}.w3-card:hover{border-color:rgba(255,255,255,0.12)}.w3-card:last-child{margin-bottom:0 !important}.w3-blue-gray{background:transparent !important;color:#e2e8f0 !important;padding:0 0 4px 0 !important;border-bottom:1px solid rgba(255,255,255,0.06) !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:0.5px;text-transform:uppercase;margin:0 0 6px 0 !important;display:flex;align-items:center;justify-content:space-between}.row.w3-blue-gray{border-bottom:none !important;margin:0 !important;padding:0 !important}.w3-center{text-align:center !important}.instrument-deck,.coupler-deck,.thaat-deck,.bellows-deck,.key-label-deck,.recorder-deck,.metronome-panel,.demos-deck,.drone-knobs-deck{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 10px;background:var(--bg-deck);border-radius:var(--radius-sm);margin:0 0 6px 0;border:1px solid var(--border);gap:6px;box-shadow:var(--shadow-deck);flex-wrap:wrap;backdrop-filter:blur(6px)}.deck-title{font-size:11px;font-weight:800;color:var(--brass-bright);text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;gap:5px;white-space:nowrap}.inst-segmented-btns,.label-segmented-btns{display:flex;gap:3px;background:var(--bg-deck-sub);padding:2px;border-radius:6px;border:1px solid var(--border);flex-wrap:wrap}.inst-opt-btn,.label-opt-btn,.coupler-opt-btn{padding:4px 9px;font-size:11px;font-weight:700;color:var(--text-muted);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all 0.12s ease;display:inline-flex;align-items:center;gap:4px}.inst-opt-btn:hover,.label-opt-btn:hover,.coupler-opt-btn:hover{color:var(--text-main)}.inst-opt-btn.active,.label-opt-btn.active{background:var(--teal-primary);color:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.4)}.coupler-opt-btn.active{background:#0284c7;color:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.4)}.drone-knobs-deck{justify-content:center;gap:14px;padding:8px 10px}.drone-knob-wrapper{display:flex;flex-direction:column;align-items:center;gap:4px}.drone-knob-btn{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fef08a 0%,#ca8a04 45%,#713f12 90%,#451a03 100%);border:1.5px solid #fef08a;box-shadow:0 3px 8px rgba(0,0,0,0.5),inset 0 1px 3px rgba(255,255,255,0.5);cursor:pointer;transition:all 0.18s ease;display:flex;align-items:center;justify-content:center;color:#451a03;font-weight:900;font-size:10px;user-select:none;position:relative}.drone-knob-btn.pulled{transform:translateY(-4px) scale(1.06);background:radial-gradient(circle at 35% 30%,#a7f3d0 0%,#10b981 45%,#065f46 90%,#022c22 100%);border-color:#6ee7b7;box-shadow:0 6px 14px rgba(16,185,129,0.4);color:#ffffff}.drone-label{font-size:9.5px;font-weight:700;color:var(--text-muted);letter-spacing:0.4px;text-transform:uppercase}.drone-knob-wrapper.active .drone-label{color:#a7f3d0}.thaat-select{background:#111722;border:1px solid rgba(255,255,255,0.1);color:#f1f5f9;font-size:11px;font-weight:700;padding:5px 9px;border-radius:6px;cursor:pointer;outline:none}.pump-btn{background:linear-gradient(135deg,#d97706,#b45309);border:1px solid #f59e0b;color:white;font-size:11px;font-weight:800;padding:5px 11px;border-radius:6px;cursor:pointer}.rec-btn{display:inline-flex;align-items:center;gap:5px;background:#dc2626;border:1px solid #ef4444;color:white;font-size:11px;font-weight:800;padding:5px 12px;border-radius:6px;cursor:pointer}.rec-timer{font-family:monospace;font-size:12px;font-weight:800;color:#f87171;background:#090e18;padding:3px 8px;border-radius:4px;border:1px solid #334155}.metronome-led-bar{display:flex;gap:5px;align-items:center}.metronome-led{width:10px;height:10px;border-radius:50%;background:#253046;border:1px solid #3b4964}.metronome-led.active{background:#10b981;box-shadow:0 0 8px #10b981}.metronome-led.accent{background:#f59e0b;box-shadow:0 0 8px #f59e0b}.demo-chip{padding:5px 11px;border-radius:14px;font-size:11px;font-weight:700;background:rgba(30,41,59,0.85);border:1px solid rgba(255,255,255,0.1);color:#e2e8f0;cursor:pointer;transition:all 0.15s ease}.demo-chip:hover{background:#334155;color:white}.demo-chip.playing{background:#059669;border-color:#34d399;color:white;box-shadow:0 0 10px rgba(16,185,129,0.5)}.keyboard-scroll-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:4px 0 10px 0;border-radius:10px;padding:6px 8px 10px;background:linear-gradient(180deg,#181014 0%,#0d080b 100%);border:2px solid #321c26;box-shadow:inset 0 4px 16px rgba(0,0,0,0.9),0 8px 24px rgba(0,0,0,0.6)}.keyboard-scroll-wrapper::-webkit-scrollbar{height:6px}.keyboard-scroll-wrapper::-webkit-scrollbar-track{background:#0f0a06}.keyboard-scroll-wrapper::-webkit-scrollbar-thumb{background:#4a2d18;border-radius:3px}#keyboard{display:block;width:100%;max-width:100%;height:auto;touch-action:none;user-select:none;background:#090a0f;padding:4px 4px 6px;border-radius:8px;box-shadow:inset 0 3px 10px rgba(0,0,0,0.85);border:1px solid rgba(212,175,55,0.2)}#keyboard text{pointer-events:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.key{cursor:pointer;transition:fill 0.06s ease}.key.white{fill:#fafaf9;stroke:#334155;stroke-width:0.6}.key.black{fill:#181b22;stroke:#0a0d14;stroke-width:0.8}.key.white:hover{fill:#fef9c3}.key.black:hover{fill:#272c38}.key.white.active{fill:#fef08a !important;stroke:#eab308 !important;filter:drop-shadow(0 0 8px rgba(234,179,8,0.85))}.key.black.active{fill:#ca8a04 !important;stroke:#fef08a !important;filter:drop-shadow(0 0 10px rgba(254,240,138,0.95))}.key.is-root-key{stroke:#f59e0b !important;stroke-width:1.5px}.key.active-coupler{fill:#7dd3fc !important;stroke:#bae6fd !important;stroke-width:1.8px;filter:drop-shadow(0 0 8px rgba(56,189,248,0.75))}.key.thaat-dimmed{opacity:0.26 !important;filter:grayscale(85%) brightness(0.55) !important}.thaat-dot{pointer-events:none;fill:#fbbf24;filter:drop-shadow(0 0 4px rgba(251,191,36,0.85))}.stepper{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;padding:4px 0 2px !important}.stepper button,.stepper .w3-btn{width:54px !important;height:34px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;background-color:#1e293b !important;color:#f1f5f9 !important;font-size:18px !important;font-weight:800 !important;border-radius:6px !important;border:1px solid #334155 !important;cursor:pointer !important;transition:all 0.12s ease !important}.stepper button:hover,.stepper .w3-btn:hover{background-color:var(--teal-primary) !important;color:#ffffff !important}.stepper h4{flex:1 !important;text-align:center !important;margin:0 !important;font-size:19px !important;font-weight:800 !important;color:var(--brass-bright) !important;font-family:monospace !important}.slidecontainer{width:100%;padding:3px 0}.slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:#1e293b;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fef08a 0%,#d4af37 60%,#854d0e 100%);cursor:pointer;border:1.2px solid #fef08a}.slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fef08a 0%,#d4af37 60%,#854d0e 100%);cursor:pointer;border:1.2px solid #fef08a}.param{padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.04)}.param:last-of-type{border-bottom:none}.param .lbl{display:flex !important;align-items:center !important;justify-content:space-between !important;font-size:11.5px !important;color:var(--text-muted) !important;font-weight:600 !important;margin-bottom:3px !important}.param .lbl span:first-child{color:#cbd5e1 !important}.param .lbl span:last-child{color:var(--brass-bright) !important;font-family:monospace !important;font-size:11.5px !important;font-weight:700 !important;background:rgba(0,0,0,0.4) !important;padding:1px 7px !important;border-radius:4px !important;border:1px solid rgba(251,191,36,0.2) !important}.btn-row{display:flex !important;gap:8px !important;flex-wrap:wrap !important;padding:6px 0 2px !important}#toneReset{background:#1e293b !important;color:#f1f5f9 !important;border:1px solid #334155 !important;border-radius:6px !important;padding:7px 12px !important;font-size:11.5px !important;font-weight:700 !important;cursor:pointer !important}.switch{position:relative !important;display:inline-block !important;width:38px !important;height:20px !important;vertical-align:middle !important}.switch input{opacity:0 !important;width:0 !important;height:0 !important}.toggle,.fancycheckbox{position:absolute !important;cursor:pointer !important;inset:0 !important;background-color:#242c3b !important;transition:0.2s ease !important;border-radius:20px !important;border:1px solid rgba(255,255,255,0.08) !important}.toggle:before,.fancycheckbox:before{position:absolute !important;content:"" !important;height:14px !important;width:14px !important;left:2px !important;bottom:2px !important;background-color:white !important;transition:0.2s ease !important;border-radius:50% !important;box-shadow:0 1px 4px rgba(0,0,0,0.4) !important}input:checked + .toggle,input:checked + .fancycheckbox{background:var(--teal-primary) !important;border-color:var(--teal-bright) !important}input:checked + .toggle:before,input:checked + .fancycheckbox:before{transform:translateX(18px) !important}table{table-layout:fixed !important;width:100% !important;border-collapse:separate !important;border-spacing:4px !important;margin-top:6px !important}th,td{text-align:center !important;border:none !important}th{background-color:#0d3834 !important;color:#5eead4 !important;font-size:11px !important;font-weight:700 !important;text-transform:uppercase !important;padding:7px 3px !important;border-radius:4px !important}td{padding:0 !important}.container{display:block !important;cursor:pointer !important;margin:2px 0 !important}.container input{display:none !important}.container .checkmark{display:block !important;background-color:#1e283b !important;color:#cbd5e1 !important;font-weight:700 !important;font-size:13px !important;padding:8px 3px !important;border-radius:6px !important;border:1px solid rgba(255,255,255,0.05) !important;transition:all 0.12s ease !important}.container:hover .checkmark{background-color:#334155 !important;color:white !important}.container input:checked ~ .checkmark{background:linear-gradient(180deg,#0d9488 0%,#0f766e 100%) !important;color:#ffffff !important;font-weight:800 !important}#PlayStop{width:100% !important;padding:10px !important;font-size:14px !important;font-weight:800 !important;border-radius:6px !important;cursor:pointer !important}.w3-small{font-size:11px !important}.w3-select{width:100% !important;padding:7px 10px !important;background:#0f131a !important;border:1px solid var(--border) !important;border-radius:6px !important;color:var(--text-main) !important;font-size:12px !important;outline:none !important;margin:6px 0 !important}textarea.sampler{font-family:monospace !important;font-size:11px !important;width:100% !important;background:#0f131a !important;color:#a5f3fc !important;border:1px solid var(--border) !important;border-radius:6px !important;padding:8px 10px !important;margin-bottom:8px !important}.help{font-size:11px !important;color:var(--text-muted) !important}@media (max-width:640px){.page-wrapper{padding:4px 4px 30px}.center-content{border-radius:8px}.tab-panel-body{padding:8px 8px 14px}}