*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0c0a0e;--surface-1:#18151d;--surface-2:#211d28;--surface-3:#2b2633;--bg-secondary:var(--surface-1);--bg-tertiary:var(--surface-2);--border:#fff8f01a;--border-strong:#fff8f033;--glass-border:var(--border);--text-primary:#f6f2ec;--text-secondary:#b7acbb;--text-muted:#897e8d;--accent:#f5a623;--accent-soft:#f5a62326;--accent-cyan:var(--accent);--accent-purple:#b294ff;--accent-pink:#fb7185;--accent-green:#43d39c;--accent-gold:#edb84e;--accent-gold-soft:#edb84e29;--felt-green:#0c5c46;--static-bg:var(--bg-primary);--static-panel:var(--surface-1);--static-border:var(--border);--font-family:"Plus Jakarta Sans", "Inter", system-ui, sans-serif;--font-display:"Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;--font-serif:"Fraunces", "Georgia", "Times New Roman", serif;--font-mono:"SFMono-Regular", "Consolas", monospace;--transition-smooth:all .18s cubic-bezier(.4, 0, .2, 1);--radius-sm:10px;--radius:14px;--radius-lg:18px;--shadow-sm:0 1px 3px #0006;--shadow-card:0 8px 26px #00000085, inset 0 1px 0 #ffffff0b;--shadow-premium:var(--shadow-card)}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);box-sizing:border-box;background-image:radial-gradient(135% 95% at 18% -12%,#edb84e14 0%,#0000 50%),radial-gradient(120% 80% at 88% -8%,#f5a6230d 0%,#0000 48%);background-repeat:no-repeat;background-attachment:fixed;flex-direction:column;min-height:100vh;padding-bottom:108px;display:flex;overflow-x:hidden}html,body{width:100%;max-width:100%;overflow-x:hidden}button,select,input{font-family:var(--font-family);touch-action:manipulation}h1,h2,h3,.logo-title,.panel-title,.forge-title,.dice-module-title,.control-rack-header{font-family:var(--font-display);letter-spacing:0}.brand-wordmark strong,.roll-copy h2,.forge-title{font-family:var(--font-serif);font-optical-sizing:auto;letter-spacing:-.015em}.roll-copy h2{font-weight:600}#app{box-sizing:border-box;flex-direction:column;flex-grow:1;gap:.95rem;width:100%;max-width:min(1350px,100%);margin:0 auto;padding:1rem 1.2rem 1.35rem;display:flex}.mode-strip{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem;padding:.3rem;display:grid}.mode-btn{min-height:34px;color:var(--text-secondary);font-family:var(--font-family);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:1px solid #0000;border-radius:10px;font-size:.88rem;font-weight:800}.mode-btn:hover{color:var(--text-primary);background:#ffffff0a}.mode-btn.active{color:var(--text-primary);background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--accent);border-color:#25d2e652}.roll-command-center{grid-template-columns:minmax(0,1.38fr) minmax(280px,.82fr);align-items:stretch;gap:.75rem;display:grid}.roll-stage,.melody-forge,.top-chord-panel{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.roll-stage{background:radial-gradient(140% 120% at 0% 0%, #f5a62312, transparent 46%), var(--surface-1);border-color:#f5a62329;grid-template-columns:minmax(0,1fr);gap:.75rem;padding:.85rem;display:grid;position:relative;overflow:hidden}.roll-stage:before{content:none}.roll-copy{z-index:1;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.75rem;padding:.15rem .15rem 0;display:grid;position:relative}.roll-copy-text{gap:.35rem;min-width:0;display:grid}.roll-kicker{color:var(--accent-gold);letter-spacing:0;text-transform:uppercase;font-size:.68rem;font-weight:900}.roll-copy h2{letter-spacing:0;max-width:720px;font-size:clamp(1.7rem,3.6vw,3.25rem);line-height:.98}.roll-copy p{max-width:620px;color:var(--text-secondary);font-size:.86rem;line-height:1.35}.hero-icon-toolbar{flex-wrap:wrap;justify-content:flex-end;gap:.35rem;margin-top:.15rem;display:flex}.hero-icon-toolbar .btn-transport{border-radius:var(--radius-sm);border-color:var(--border);background:var(--surface-2);width:36px;height:36px;color:var(--text-secondary);justify-content:center;padding:0}.hero-icon-toolbar .btn-transport:hover{color:var(--text-primary);background:var(--accent-soft);border-color:#25d2e666}.dice-dock{z-index:1;min-width:0;position:relative}.melody-forge{flex-direction:column;gap:.55rem;padding:.78rem;display:flex}.forge-header{flex-direction:column;gap:.15rem;display:flex}.forge-title{color:var(--text-primary);font-size:.96rem;font-weight:900}.forge-caption{color:var(--text-secondary);font-size:.76rem}.forge-control .input-group{gap:.35rem}.scratch-melody-dock,.active-pool-dock,.note-palette-dock{min-width:0}.scratch-melody-control{border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);padding:.8rem}.capture-mode-row{color:var(--text-muted);grid-template-columns:minmax(88px,auto) minmax(0,1fr);align-items:center;gap:.5rem;margin-top:.55rem;font-size:.72rem;display:grid}.capture-mode-row select{width:100%;min-width:0}.scratch-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;display:grid}.scratch-actions .btn-playback-mini{justify-content:center;min-height:38px}.scratch-actions .active-capture{color:#03171b!important;background:var(--accent)!important;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important}@media (width<=720px){.scratch-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}.active-pool-dock .active-pool-control{border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);padding:.75rem}.note-palette-dock .note-palette-control{border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border);padding:.7rem .75rem}.note-palette-dock .subsection-title{margin-bottom:.45rem}.note-palette-dock .chips-container{max-height:92px;padding-right:.15rem;overflow-y:auto}.melody-action-dock{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;display:grid}.melody-action-dock:empty{display:none}.melody-action-dock .btn-transport{border-color:var(--border);background:var(--surface-2);min-height:42px;color:var(--text-secondary);justify-content:center}.melody-action-dock .btn-transport:hover{color:var(--text-primary);background:var(--accent-soft);border-color:#25d2e666}.source-tabs{background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;padding:.2rem;display:grid}.source-tab{min-height:34px;color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:1px solid #0000;border-radius:8px;font-size:.72rem;font-weight:800}.source-tab.active{color:#03171b;background:var(--accent);border-color:var(--accent)}.top-chord-dock{min-width:0}.top-chord-panel{padding:1.15rem;min-height:auto!important}@media (width<=600px){body{padding-bottom:0}}@media (width>=601px) and (width<=1100px){body{padding-bottom:245px}}header{background:var(--bg-secondary);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-premium);border-radius:16px;justify-content:space-between;align-items:center;padding:.55rem .85rem;animation:.6s cubic-bezier(.16,1,.3,1) slideDown;display:flex}.logo-container{align-items:center;gap:.75rem;display:flex}.nsm-logo,.app-brand-logo{object-fit:contain;width:auto;height:46px}.app-brand-logo{max-width:min(380px,56vw)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}header h1.logo-title{letter-spacing:0;background:linear-gradient(135deg, var(--text-primary) 30%, var(--accent-cyan) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:1.45rem;font-weight:800;line-height:1.2}.audio-status{align-items:center;gap:.65rem;font-size:.86rem;display:flex}.status-indicator{background-color:var(--accent-pink);width:10px;height:10px;box-shadow:0 0 12px var(--accent-pink);transition:var(--transition-smooth);border-radius:50%}.status-indicator.ready{background-color:var(--accent-green);box-shadow:0 0 12px var(--accent-green)}.btn-primary{background:linear-gradient(135deg, var(--accent-cyan), #00b4d8);color:#06070a;cursor:pointer;transition:var(--transition-smooth);border:none;border-radius:12px;align-items:center;gap:.5rem;padding:.65rem 1.3rem;font-weight:700;display:flex;box-shadow:0 4px 15px #f5a62340}.btn-primary:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 0 20px #f5a6238c}.btn-primary:active{transform:translateY(0)scale(1)}.main-layout{flex-direction:column;gap:1.5rem;display:flex}.control-rack{background:var(--bg-secondary);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-premium);border-radius:24px;flex-direction:column;padding:1.25rem 1.4rem;transition:border-color .3s;display:flex}.control-rack:hover{border-color:#ffffff1f}.control-rack-header{letter-spacing:0;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;font-size:1.2rem;font-weight:800;display:flex}.control-rack-header .rack-header-title{align-items:center;gap:.5rem;display:flex}.control-rack:not(.collapsed) .toggle-arrow{transform:rotate(180deg)}.control-rack-content{border-top:1px solid #ffffff0f;flex-direction:column;gap:1.5rem;margin-top:1.25rem;padding-top:1.25rem;display:flex}.control-rack-content .glass-panel{box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:0 0!important;border:none!important;min-height:auto!important;padding:0!important}.control-rack-content .panel-title{border-bottom-color:#ffffff0a;margin-bottom:.5rem;padding-bottom:.4rem;font-size:1.1rem}.control-rack-content .playground-grid{flex-direction:column;gap:1.5rem;display:flex}.workbench{flex-direction:column;gap:1.5rem;min-width:0;display:flex}@media (width>=1024px){.main-layout{grid-template-columns:360px 1fr;align-items:start;display:grid}.main-layout:has(>.control-rack.is-empty){grid-template-columns:1fr}.control-rack{max-height:calc(100vh - 210px);position:sticky;top:1.5rem;overflow-y:auto}}.glass-panel{background:var(--bg-secondary);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-premium);border-radius:24px;flex-direction:column;gap:1rem;min-height:420px;padding:1.25rem 1.4rem;transition:border-color .3s;display:flex}.panel-title{letter-spacing:0;color:var(--text-primary);border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding-bottom:.6rem;font-size:1.25rem;font-weight:800;display:flex}.subsection-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:0;margin-bottom:.45rem;font-size:.8rem;font-weight:800}.controls-row{align-items:center;gap:1rem;display:flex}.input-group{flex-direction:column;gap:.5rem;display:flex}.input-group label{color:var(--text-secondary);letter-spacing:0;font-size:.85rem;font-weight:700}.custom-select{width:100%;display:flex;position:relative}.custom-select select{appearance:none;background:var(--bg-tertiary);border:1px solid var(--glass-border);width:100%;color:var(--text-primary);font-family:var(--font-family);cursor:pointer;transition:var(--transition-smooth);border-radius:12px;outline:none;padding:.75rem 2.4rem .75rem 1rem;font-size:.95rem;font-weight:600}.custom-select select:focus{border-color:var(--accent-cyan);background:#1a1e30f2;box-shadow:0 0 15px #f5a62359}.custom-select:after{content:"";border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);pointer-events:none;width:6px;height:6px;transition:var(--transition-smooth);position:absolute;top:50%;right:14px;transform:translateY(-60%)rotate(45deg)}.custom-select:hover:after{border-color:var(--text-primary)}input[type=text]{background:var(--bg-tertiary);border:1px solid var(--glass-border);color:var(--text-primary);font-family:var(--font-family);transition:var(--transition-smooth);border-radius:12px;outline:none;padding:.75rem 1rem;font-size:.95rem;font-weight:600}input[type=text]:focus{border-color:var(--accent-cyan);box-shadow:0 0 15px #f5a62359}.input-hint{color:var(--text-secondary);font-size:.75rem;line-height:1.4}.chips-container{flex-wrap:wrap;gap:.55rem;display:flex}.note-chip{background:var(--bg-tertiary);border:1px solid var(--glass-border);color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);-webkit-user-select:none;user-select:none;border-radius:99px;padding:.5rem .9rem;font-size:.9rem;font-weight:800;box-shadow:0 2px 5px #0003}.note-chip:hover{color:var(--text-primary);box-shadow:var(--shadow-sm);border-color:#25d2e680;transform:translateY(-1px)}.note-chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:none}.active-pool-display{border-radius:var(--radius);border:1px solid var(--border);background:#00000038;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:46px;max-height:92px;padding:.7rem;display:flex;overflow-y:auto}.pool-badge{background:var(--accent-soft);color:#8fe9f3;font-size:.8rem;font-weight:800;font-family:var(--font-mono);border:1px solid #25d2e647;border-radius:8px;padding:.3rem .6rem}.meter-controls-row{gap:1.25rem;display:flex}@media (width<=480px){.meter-controls-row{flex-direction:column}}.meter-tabs,.division-tabs{background:var(--bg-tertiary);border:1px solid var(--glass-border);border-radius:14px;gap:.4rem;padding:.35rem;display:flex;box-shadow:inset 0 2px 6px #0000004d}.meter-tab,.division-tab{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:10px;flex:1;padding:.6rem .8rem;font-size:.85rem;font-weight:800}.meter-tab:hover,.division-tab:hover{color:var(--text-primary);background:#ffffff08}.meter-tab.active,.division-tab.active{color:var(--accent-cyan);background:linear-gradient(135deg,#ffffff14,#ffffff05);border:1px solid #f5a62340;box-shadow:0 4px 12px #0006,0 0 8px #f5a62326}.action-grid{grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:.55rem;display:grid}.action-btn{justify-content:center;border-radius:12px!important;padding:.75rem .5rem!important;font-size:.85rem!important}.playback-controls{background:var(--bg-tertiary);border:1px solid var(--glass-border);border-radius:16px;padding:1.25rem;box-shadow:inset 0 1px 1px #ffffff0d}.playback-buttons{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.btn-playback{color:var(--text-primary);border:1px solid var(--glass-border);cursor:pointer;transition:var(--transition-smooth);background:#ffffff0d;border-radius:12px;align-items:center;gap:.5rem;padding:.65rem 1.2rem;font-size:.9rem;font-weight:700;display:flex;box-shadow:0 2px 8px #0000004d}.btn-playback:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-1px)}.btn-playback:active{transform:translateY(0)}.btn-playback.playing{border-color:var(--accent-pink);color:var(--accent-pink);text-shadow:0 0 8px #ff336680;background:#ff33661f;box-shadow:0 0 15px #ff336659}.bpm-slider-container{color:var(--text-secondary);flex:0 240px;align-items:center;gap:.65rem;min-width:190px;font-size:.9rem;display:flex}.bpm-slider-container input[type=range]{appearance:none;cursor:pointer;background:#ffffff14;border-radius:99px;outline:none;flex-grow:1;height:6px;transition:background .3s}.bpm-slider-container input[type=range]::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));cursor:pointer;border:2px solid #fff;border-radius:50%;width:20px;height:20px;transition:transform .1s;box-shadow:0 0 15px #f5a623a6}.bpm-slider-container input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.bpm-slider-container input[type=range]::-moz-range-thumb{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));cursor:pointer;border:2px solid #fff;border-radius:50%;width:20px;height:20px;transition:transform .1s;box-shadow:0 0 15px #f5a623a6}.bpm-slider-container input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.notation-panel{background:var(--bg-secondary);border:1px solid var(--glass-border);box-shadow:var(--shadow-premium);border-radius:24px;flex-direction:column;gap:1.25rem;min-width:0;padding:1.75rem;animation:.6s cubic-bezier(.16,1,.3,1) fadeInUp;display:flex;overflow:hidden}.notation-container-box{background:linear-gradient(135deg,#fff 0%,#f6f8fa 100%);border:1px solid #ffffff14;border-radius:16px;justify-content:flex-start;align-items:center;min-height:150px;padding:1rem 1.15rem;display:flex;position:relative;overflow-x:auto;box-shadow:0 15px 35px #00000080,inset 0 1px 3px #fff3}.notation-container-box svg{filter:drop-shadow(0 2px 4px #0000001a);flex:none;max-width:none;height:auto;margin:0}.timeline-panel{background:var(--bg-secondary);border:1px solid var(--glass-border);box-shadow:var(--shadow-premium);border-radius:24px;flex-direction:column;gap:1rem;min-width:0;padding:1.75rem;animation:.65s cubic-bezier(.16,1,.3,1) fadeInUp;display:flex}.timeline-instruction{color:var(--text-secondary);border-left:3px solid var(--accent-cyan);background:#ffffff05;border-radius:10px;padding:.75rem 1rem;font-size:.85rem;line-height:1.5}.mode-workflow strong{color:var(--accent-cyan)}.phrase-bars-toolbar{background:linear-gradient(135deg,#fbbf2414,#f5a6230d),#ffffff06;border:1px solid #fbbf2433;border-radius:12px;justify-content:space-between;align-items:center;gap:.65rem;padding:.72rem .85rem;display:flex}.phrase-bars-main,.phrase-bars-actions{flex-wrap:wrap;align-items:center;gap:.45rem;display:inline-flex}.phrase-bars-label{color:var(--text-secondary);text-transform:uppercase;font-size:.76rem;font-weight:900}#phrase-bars-readout{min-width:52px;color:var(--accent-gold);text-align:center;font-size:.92rem}.phrase-bar-btn{width:34px;height:34px;color:var(--text-primary);cursor:pointer;transition:var(--transition-smooth);background:#fbbf241a;border:1px solid #fbbf245c;border-radius:9px;font-size:1.08rem;font-weight:900}.phrase-bar-btn:hover:not(:disabled){border-color:var(--accent-gold);background:#fbbf242e;transform:translateY(-1px)}.phrase-bar-btn:disabled{opacity:.38;cursor:not-allowed}.pl-lens-toggle{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:#edb84e14;border:1px solid #edb84e52;border-radius:999px;align-items:center;gap:.4rem;padding:.32rem .72rem;font-size:.72rem;font-weight:800;display:inline-flex}.pl-lens-toggle:hover{border-color:var(--accent-gold);color:var(--text-primary);background:#edb84e29}.pl-lens-dot{background:conic-gradient(from 210deg,#d79a2e,#d56a48,#8d97aa,#d79a2e);border-radius:50%;width:10px;height:10px;box-shadow:inset 0 0 0 2px #ffffff14}.pl-lens-toggle.active{border-color:var(--accent-gold);color:var(--text-primary);background:linear-gradient(135deg,#edb84e47,#f5a62329);box-shadow:0 0 14px #edb84e38}.pl-readout{background:linear-gradient(135deg,#edb84e12,#ffffff05);border:1px solid #edb84e33;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;margin-top:.6rem;padding:.55rem .8rem;display:flex}.pl-readout[hidden]{display:none}.pl-legend{color:var(--text-secondary);flex-wrap:wrap;gap:.35rem .85rem;font-size:.71rem;font-weight:700;display:inline-flex}.pl-legend span{align-items:center;gap:.35rem;display:inline-flex}.pl-swatch{border-radius:3px;width:11px;height:11px;display:inline-block}.pl-swatch.landing{background:#d79a2e}.pl-swatch.landing-weak{background:#d56a48}.pl-swatch.passing{background:#8d97aa}.pl-score{align-items:baseline;gap:.5rem;display:inline-flex}.pl-score strong{font-family:var(--font-display,inherit);color:var(--accent-gold);font-size:1.15rem}.pl-score span{color:var(--text-secondary);max-width:26ch;font-size:.71rem}.motif-tools{background:linear-gradient(135deg,#f5a6230f,#ffffff05);border:1px solid #f5a62329;border-radius:12px;margin-top:.55rem;padding:.6rem .7rem}.motif-tools-label{text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin-bottom:.45rem;font-size:.7rem;font-weight:900;display:block}.motif-tools-row{flex-wrap:wrap;gap:.4rem;display:flex}.motif-btn{min-width:92px;color:var(--text-primary);cursor:pointer;transition:var(--transition-smooth);background:#ffffff0a;border:1px solid #ffffff1f;border-radius:9px;flex:auto;justify-content:center;align-items:center;gap:.38rem;padding:.5rem .6rem;font-size:.74rem;font-weight:800;display:inline-flex}.motif-btn:hover{background:#f5a62321;border-color:#f5a6238c;transform:translateY(-1px)}.motif-btn:active{transform:translateY(0)}.motif-icon{color:var(--accent-gold);font-size:.98rem;line-height:1}.timeline-container.pl-lens-on .timeline-step.active-hit.pl-landing{background:linear-gradient(135deg,#edb84e52 0%,#f5a6232e 100%);border-color:#edb84ebf;box-shadow:0 6px 15px #edb84e47,inset 0 1px 1px #ffffff26}.timeline-container.pl-lens-on .timeline-step.active-hit.pl-landing .step-indicator{background:#edb84e;border-color:#edb84e;box-shadow:0 0 10px #edb84e,0 0 4px #fff}.timeline-container.pl-lens-on .timeline-step.active-hit.pl-landing-weak{background:linear-gradient(135deg,#d56a484d 0%,#c05a3c29 100%);border-color:#d56a48b3;box-shadow:0 6px 15px #d56a4842,inset 0 1px 1px #ffffff1f}.timeline-container.pl-lens-on .timeline-step.active-hit.pl-landing-weak .step-indicator{background:#d56a48;border-color:#d56a48;box-shadow:0 0 10px #d56a48,0 0 4px #fff}.timeline-container.pl-lens-on .timeline-step.active-hit.pl-passing{background:linear-gradient(135deg,#8d97aa38 0%,#5a62731f 100%);border-color:#8d97aa80;box-shadow:0 4px 10px #0000004d,inset 0 1px 1px #ffffff0f}.timeline-container.pl-lens-on .timeline-step.active-hit.pl-passing .step-indicator{background:#8d97aa;border-color:#8d97aa;box-shadow:0 0 8px #8d97aa99}.timeline-scroll-container{border:1px solid var(--glass-border);background:#0006;border-radius:16px;width:100%;padding:1.75rem 1.25rem;overflow-x:auto;box-shadow:inset 0 3px 15px #0006}.timeline-container{gap:8px;width:100%;min-width:100%;height:95px;display:flex;position:relative}.percussion-grid{gap:.35rem;min-width:900px;margin-top:.8rem;display:grid}.percussion-grid[hidden]{display:none}.percussion-row{grid-template-columns:54px minmax(0,1fr);align-items:center;gap:.45rem;display:grid}.percussion-row-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:0;font-size:.68rem;font-weight:900}.percussion-steps{gap:8px;display:grid}.percussion-step{height:28px;color:var(--accent-gold);cursor:pointer;background:#ffffff09;border:1px solid #ffffff14;border-radius:7px;font-size:1rem;font-weight:900}.percussion-step.downbeat{border-left:3px solid #f5a623b3}.percussion-step.active{background:linear-gradient(135deg,#fbbf2461,#f5a6232e);border-color:#fbbf24b8;box-shadow:0 0 14px #fbbf242e}.bar-stepper{grid-template-columns:32px minmax(84px,1fr) 32px;align-items:center;gap:.35rem;display:grid}.mini-icon-btn,.micro-action-btn{color:var(--text-primary);cursor:pointer;background:#ffffff0e;border:1px solid #ffffff24}.mini-icon-btn{border-radius:7px;width:32px;height:32px;font-size:1rem;font-weight:900}.mini-icon-btn:hover,.micro-action-btn:hover{background:#f5a6231f;border-color:#f5a6238c}.bar-action-row{grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.45rem;display:grid}.micro-action-btn{border-radius:7px;min-height:28px;font-size:.68rem;font-weight:850}.swing-control{min-width:168px}.toggle-row{color:var(--text-primary);align-items:center;gap:.45rem;font-weight:850;display:flex}.swing-control input[type=range]{width:100%;margin-top:.35rem}#swing-percent-value{color:var(--accent-cyan);margin-top:.15rem;font-size:.76rem;font-weight:850;display:inline-block}.practice-lab{background:linear-gradient(135deg,#f5a62314,#fbbf240f),#ffffff09;border:1px solid #f5a62342;border-radius:12px;gap:.8rem;padding:.9rem;display:grid}.practice-lab[hidden]{display:none}.practice-lab-main,.practice-actions,.practice-score-row{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.practice-lab-main{justify-content:space-between}.practice-eyebrow{color:var(--accent-gold);text-transform:uppercase;letter-spacing:0;font-size:.68rem;font-weight:900;display:block}.practice-drill-tabs{background:#00000038;border:1px solid #ffffff14;border-radius:9px;padding:.18rem;display:inline-flex}.practice-drill-btn{min-height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:0 .75rem;font-weight:850}.practice-set-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem;display:grid}.practice-set-strip[hidden]{display:none}.practice-challenge-chip{min-height:54px;color:var(--text-primary);text-align:left;cursor:pointer;background:linear-gradient(135deg,#f5a6231c,#9d4edd14),#ffffff06;border:1px solid #f5a6233d;border-radius:8px;gap:.15rem;padding:.45rem;display:grid}.practice-challenge-chip strong{color:var(--accent-gold);font-size:.82rem}.practice-challenge-chip span{color:var(--text-secondary);font-size:.68rem;line-height:1.25}.teach-lab{background:linear-gradient(135deg,#fbbf241a,#f5a6230f),#ffffff09;border-color:#fbbf244d}.teach-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;display:grid}.teach-card{background:#02061757;border:1px solid #ffffff1a;border-radius:10px;min-height:118px;padding:.8rem}.teach-card-label{color:var(--accent-gold);text-transform:uppercase;letter-spacing:0;margin-bottom:.45rem;font-size:.68rem;font-weight:900;display:block}.teach-analysis-list,.teach-flow-list{color:var(--text-secondary);margin:0;padding-left:1.1rem;font-size:.78rem;line-height:1.45}.teach-analysis-list li+li,.teach-flow-list li+li{margin-top:.28rem}.practice-silent-toggle,.transport-pad-toggle{min-height:34px;color:var(--text-primary);white-space:nowrap;background:#fbbf2414;border:1px solid #fbbf2447;border-radius:8px;align-items:center;gap:.35rem;padding:.28rem .55rem;font-size:.72rem;font-weight:850;display:inline-flex}.transport-pad-toggle{background:#10b9811c;border-color:#10b98152}.practice-drill-btn.active{color:#020617;background:var(--accent-cyan)}.midi-input-label{color:var(--text-secondary);align-items:center;gap:.4rem;font-size:.78rem;font-weight:850;display:inline-flex}.score-meter{background:#ffffff14;border:1px solid #ffffff1a;border-radius:999px;width:min(260px,100%);height:10px;overflow:hidden}.score-meter span{background:linear-gradient(90deg, var(--accent-pink), var(--accent-gold), var(--accent-cyan));width:0%;height:100%;transition:width .25s;display:block}#practice-score-detail{color:var(--text-secondary);font-size:.78rem}.timeline-playhead{background:var(--accent-cyan);width:4px;box-shadow:0 0 15px var(--accent-cyan), 0 0 3px #fff;pointer-events:none;z-index:10;border-radius:99px;position:absolute;top:0;bottom:0;left:0}.timeline-step{cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#16192999 0%,#0e101acc 100%);border:1px solid #ffffff0a;border-radius:12px;flex-direction:column;flex:1;justify-content:space-between;align-items:center;min-width:48px;height:100%;padding:.75rem .5rem;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 8px #0000004d,inset 0 1px 1px #ffffff08}.timeline-step:hover{background:linear-gradient(135deg,#20243ab3 0%,#141624e6 100%);border-color:#f5a62359;transform:translateY(-3px);box-shadow:0 8px 16px #0006,0 0 10px #f5a6231a}.timeline-step.inactive{color:var(--text-secondary);background:linear-gradient(135deg,#0e101a66 0%,#08090f99 100%)}.timeline-step.active-hit{background:linear-gradient(135deg,#9d4edd47 0%,#ff33662e 100%);border:1px solid #9d4edd99;box-shadow:0 6px 15px #9d4edd4d,inset 0 1px 1px #ffffff26}.timeline-step.active-hit:hover{background:linear-gradient(135deg,#9d4edd61 0%,#ff336647 100%);border-color:#9d4eddcc;box-shadow:0 8px 22px #9d4edd73,0 0 12px #f363}.timeline-step.selected-for-move{animation:1.5s infinite pulseGlow;background:#f5a62333!important;border:2px dashed #f5a623cc!important;box-shadow:0 0 25px #f5a6238c,inset 0 0 10px #f5a6234d!important}@keyframes pulseGlow{0%{transform:scale(1);box-shadow:0 0 15px #f5a62340}50%{transform:scale(1.02);box-shadow:0 0 30px #f5a623b3}to{transform:scale(1);box-shadow:0 0 15px #f5a62340}}.timeline-step.downbeat{background:linear-gradient(135deg,#161b2ebf 0%,#0e111ee6 100%);border-left:3px solid #f5a623bf}.timeline-step.active-hit.downbeat{border-left:3px solid var(--accent-purple)}.timeline-container.compact-phrase{gap:4px}.timeline-container.compact-phrase .timeline-step{border-radius:9px;min-width:0;padding:.55rem .18rem}.timeline-container.compact-phrase .step-label{font-size:.64rem}.timeline-container.compact-phrase .step-note-name{font-size:.75rem}.step-indicator{width:9px;height:9px;transition:var(--transition-smooth);background:#ffffff14;border:1px solid #ffffff26;border-radius:50%;margin:4px 0}.step-label{font-size:.7rem;font-weight:800;font-family:var(--font-mono);color:var(--text-secondary)}.timeline-step.active-hit .step-label{color:#fff;text-shadow:0 1px 2px #00000080}.step-note-name{color:#fff;text-shadow:0 0 12px #f5a623cc;font-size:1.05rem;font-weight:800;font-family:var(--font-display);letter-spacing:0}.piano-panel{border:1px solid var(--glass-border);box-shadow:var(--shadow-premium);background:linear-gradient(145deg,#0b141bf0,#0d0f19db),linear-gradient(135deg,#10b9811f,#fbbf2414);border-radius:24px;flex-direction:column;gap:1.25rem;min-width:0;padding:1.75rem;animation:.7s cubic-bezier(.16,1,.3,1) fadeInUp;display:flex}.priority-piano-panel{border-color:#10b9813d;box-shadow:0 22px 54px #000000ad,inset 0 1px #ffffff14,0 0 0 1px #fbbf240d}.piano-legend{color:var(--text-secondary);flex-wrap:wrap;gap:.55rem 1rem;font-size:.78rem;font-weight:800;display:flex}.piano-legend span{align-items:center;gap:.35rem;display:inline-flex}.legend-dot{border-radius:999px;width:11px;height:11px;display:inline-block;box-shadow:0 0 10px}.legend-dot.root{background:var(--accent-gold);color:var(--accent-gold)}.legend-dot.scale{background:var(--accent-green);color:var(--accent-green)}.legend-dot.chord{color:#f59e0b;background:#f59e0b}.legend-dot.live{background:var(--accent-cyan);color:var(--accent-cyan)}.piano-container{border:1px solid var(--glass-border);-webkit-user-select:none;user-select:none;-webkit-overflow-scrolling:touch;background:linear-gradient(#07080c,#111322);border-radius:20px;justify-content:flex-start;height:205px;padding:18px 12px 12px;display:flex;position:relative;overflow-x:auto;box-shadow:inset 0 4px 15px #000000f2,0 15px 35px #0000008c}.piano-container::-webkit-scrollbar{height:6px}.piano-container::-webkit-scrollbar-track{background:#ffffff05;border-radius:3px;margin:0 12px}.piano-container::-webkit-scrollbar-thumb{background:#f5a62359;border-radius:3px}.piano-container::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}.piano-key{cursor:pointer;transition:transform 50ms,background-color .1s;position:relative}.piano-key.white{z-index:1;background:linear-gradient(#fffaf0 0%,#fffdf7 8%,#f8fafc 94%,#e2e8f0 100%);border:1px solid #0003;border-bottom:6px solid #cbd5e1;border-radius:0 0 8px 8px;width:46px;height:100%;box-shadow:0 4px 8px #00000040,inset 0 2px #ffffffe6}.piano-key.black{z-index:2;background:linear-gradient(#090a0f 0%,#1a1c24 10%,#0e1015 90%,#010203 100%);border:1px solid #0000008c;border-bottom:8px solid #000;border-radius:0 0 5px 5px;width:28px;height:62%;margin-left:-14px;margin-right:-14px;box-shadow:-3px 4px 8px #0000008c,inset 1px 1px #ffffff1f}.key-badge{pointer-events:none;box-sizing:border-box;background:#ffffff0d;border:1px solid #0000001a;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:auto;min-width:32px;height:32px;padding:0 6px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #00000014}.key-label-simple{pointer-events:none;font-size:.72rem;font-weight:600;font-family:var(--font-family);text-transform:uppercase;transition:all .2s;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.piano-key.black .key-label-simple{color:#ffffff40;font-size:.58rem;bottom:10px}.piano-key.white .key-badge{color:#475569;background:#f8fafcf2;border-color:#e2e8f0e6}.piano-key.white.in-scale .key-badge{color:#047857;background:#10b9811f;border-color:#10b9816b;box-shadow:0 0 8px #10b9812e}.piano-key.white.in-scale.active .key-badge,.piano-key.white.active .key-badge{background:var(--accent-cyan)!important;border-color:var(--accent-cyan)!important;color:#040814!important;box-shadow:0 0 12px #f5a62399!important}.piano-key.black .key-badge{color:#94a3b8;background:#0f172ad9;border-color:#ffffff14;border-radius:11px;width:auto;min-width:22px;height:22px;padding:0 4px;bottom:10px}.piano-key.black.in-scale .key-badge{color:#34d399;background:#10b98124;border-color:#10b98175;box-shadow:0 0 6px #10b9813d}.piano-key.black.in-scale.active .key-badge,.piano-key.black.active .key-badge{background:var(--accent-cyan)!important;border-color:var(--accent-cyan)!important;color:#fff!important;box-shadow:0 0 14px #f5a623b8!important}.key-badge.is-root{font-weight:900;color:#92400e!important;background:#fbbf242e!important;border:1.5px solid #f59e0b!important;box-shadow:0 0 10px #f59e0b59!important}.badge-val{font-size:.72rem;font-weight:800;line-height:1;font-family:var(--font-family)}.badge-note-sub{opacity:.8;text-transform:uppercase;margin-top:1px;font-size:.45rem;font-weight:600;line-height:1}.piano-key.black .badge-note-sub{display:none}.piano-key.white.root-key{border-bottom-color:var(--accent-gold)!important;background:linear-gradient(#fffbeb 0%,#fff 10%,#fef3c7 86%,#fbbf246b 100%)!important}.piano-key.black.root-key{border-bottom-color:var(--accent-gold)!important;background:linear-gradient(#201407 0%,#2f220c 10%,#11100b 80%,#fbbf2473 100%)!important}@keyframes slideDown{0%{opacity:0;transform:translateY(-25px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}.step-shift-controls{opacity:0;pointer-events:none;transition:var(--transition-smooth);grid-template-rows:repeat(2,18px);grid-template-columns:repeat(3,22px);justify-content:center;gap:3px;margin-top:4px;display:grid}.timeline-step.active-hit:hover .step-shift-controls{opacity:1;pointer-events:auto}.btn-shift{color:#fff;cursor:pointer;width:22px;height:18px;transition:var(--transition-smooth);background:#ffffff1f;border:1px solid #ffffff2e;border-radius:4px;justify-content:center;align-items:center;padding:0;font-size:.6rem;display:flex}.btn-shift:hover{background:var(--accent-cyan);border-color:var(--accent-cyan);color:#06070a;box-shadow:0 0 8px var(--accent-cyan)}.timeline-step.selected-step{border-color:#ffffff57!important;box-shadow:inset 0 0 0 1px #ffffff2e,0 8px 22px #00000038!important}.vf-stavenote.selected-step path{fill:#000!important;stroke:#000!important}.vf-stavenote.selected-step text{fill:#000!important}.btn-share{color:var(--accent-cyan);cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.8rem;font-weight:600;font-family:var(--font-family);background:#f5a6231a;border:1px solid #f5a6234d;border-radius:99px;align-items:center;gap:.4rem;min-height:36px;padding:.4rem .85rem;transition:all .3s;display:inline-flex}.btn-share:hover{background:var(--accent-cyan);color:#06070a;transform:translateY(-1px);box-shadow:0 0 15px #f5a62366}.btn-share svg{transition:transform .3s}.btn-share:hover svg{transform:translateY(-1px)}.reference-panel{margin-top:1.5rem;transition:all .3s cubic-bezier(.16,1,.3,1)}.reference-panel.collapsed{border-color:#ffffff0d}.toggle-arrow{margin-left:auto}.reference-panel:not(.collapsed) .toggle-arrow{transform:rotate(180deg)}.reference-content{border-top:1px solid var(--glass-border);padding-top:1.25rem}.ref-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.ref-col h3{font-family:var(--font-family);color:var(--accent-cyan);align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:1.1rem;display:flex}.ref-col ul{margin:0;padding-left:1.25rem}.ref-col li{color:var(--text-secondary);margin-bottom:.5rem;font-size:.9rem;line-height:1.5}.ref-col p{color:var(--text-secondary);margin-bottom:.75rem;font-size:.9rem;line-height:1.5}kbd{font-size:.8rem;font-family:var(--font-mono);color:var(--accent-pink);background:#ffffff1a;border:1px solid #fff3;border-radius:4px;padding:.1rem .4rem}.toast{border:1px solid var(--accent-cyan);color:#fff;box-shadow:0 10px 30px #f5a62333, var(--shadow-premium);opacity:0;pointer-events:none;z-index:9999;background:#0f172af2;border-radius:99px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:600;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;position:fixed;bottom:2rem;left:50%;transform:translate(-50%,50px)}.toast.show{opacity:1;transform:translate(-50%)}.selected-note-controls{background:linear-gradient(135deg,#a855f714 0%,#f5a62314 100%);border:1px solid #f5a62340;border-radius:16px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;padding:1rem 1.5rem;animation:.3s cubic-bezier(.16,1,.3,1) slideDown;display:flex;box-shadow:0 8px 32px #f5a6230d,inset 0 1px 1px #ffffff0d}.selected-label{font-family:var(--font-family);color:var(--text-primary);align-items:center;gap:.5rem;font-size:.95rem;display:flex}.selected-label strong{color:var(--accent-cyan);background:#f5a6231a;border:1px solid #f5a62333;border-radius:6px;padding:.2rem .5rem}.selected-label strong#sel-step-pitch{color:var(--accent-pink);background:#ef444414;border-color:#ef444426}.control-buttons{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.sel-btn{cursor:pointer;font-weight:600;transition:all .2s;border:1px solid var(--glass-border)!important;color:var(--text-primary)!important;background:#ffffff0a!important;border-radius:8px!important;padding:.5rem .75rem!important;font-size:.78rem!important}.sel-btn:hover{box-shadow:0 0 10px #f5a62326;border-color:var(--accent-cyan)!important;color:var(--accent-cyan)!important;background:#f5a6231f!important}#btn-sel-delete{color:#f87171!important;background:#ef44441a!important;border:1px solid #ef444440!important}#btn-sel-delete:hover{box-shadow:0 0 15px #ef444466;color:#fff!important;background:#ef4444!important;border-color:#ef4444!important}.dice-roller-module{background:linear-gradient(#0d181be0,#0a0c16b8),repeating-linear-gradient(45deg,#ffffff09 0 1px,#0000 1px 14px);border:1px solid #fbbf2424;border-radius:20px;margin-bottom:0;padding:1rem;box-shadow:inset 0 1px 2px #ffffff09,0 14px 32px #00000052}.dice-roller-header{text-align:center;margin-bottom:.8rem}.dice-module-title{font-family:var(--font-family);color:var(--accent-gold);letter-spacing:0;text-transform:uppercase;font-size:1rem;font-weight:800}.dice-module-hint{color:var(--text-secondary);margin-top:.25rem;font-size:.76rem}.dice-playground{flex-wrap:wrap;justify-content:center;align-items:center;gap:.85rem;margin-bottom:.8rem;display:flex}.dice-wrapper{background:#0000002e;border:1px solid #ffffff0e;border-radius:16px;flex-direction:column;flex:1;align-items:center;gap:.75rem;min-width:145px;padding:.75rem .55rem;display:flex}.dice-label{font-family:var(--font-family);color:var(--text-secondary);font-size:.85rem;font-weight:600}.scene{perspective:400px;justify-content:center;align-items:center;width:104px;height:104px;display:flex;position:relative}.cube{width:72px;height:72px;transform-style:preserve-3d;cursor:pointer;outline:none;position:relative}.cube:focus-visible .cube-face{box-shadow:0 0 0 3px #fff,0 0 15px}.cube-face{width:72px;height:72px;font-family:var(--font-family);backface-visibility:hidden;-webkit-user-select:none;user-select:none;border-radius:14px;justify-content:center;align-items:center;font-size:1.9rem;font-weight:800;transition:border-color .3s,background .3s;display:flex;position:absolute}.pitch-cube .cube-face{color:var(--accent-cyan);text-shadow:0 0 12px #f5a623bf;background:#081a1ceb;border:2px solid #f5a6237a;box-shadow:inset 0 0 10px #f5a62326}.pitch-cube:hover .cube-face{background:#0a141ef2;border-color:#f5a623e6;box-shadow:inset 0 0 15px #f5a6234d,0 0 20px #f5a62326}.rhythm-cube .cube-face{color:var(--accent-gold);text-shadow:0 0 12px #fbbf24b8;background:#201407eb;border:2px solid #fbbf2480;box-shadow:inset 0 0 10px #fbbf2426}.rhythm-cube:hover .cube-face{background:#201407fa;border-color:#fbbf24eb;box-shadow:inset 0 0 15px #fbbf2447,0 0 20px #fbbf2426}.face-1{transform:rotateY(0)translateZ(36px)}.face-2{transform:rotateY(90deg)translateZ(36px)}.face-3{transform:rotateY(180deg)translateZ(36px)}.face-4{transform:rotateY(-90deg)translateZ(36px)}.face-5{transform:rotateX(90deg)translateZ(36px)}.face-6{transform:rotateX(-90deg)translateZ(36px)}.dice-action-btn{font-family:var(--font-family);color:var(--text-primary);cursor:pointer;transition:var(--transition-smooth);background:#ffffff0b;border:1px solid #ffffff17;border-radius:10px;padding:.52rem .85rem;font-size:.82rem;font-weight:700}.dice-action-btn:hover{color:#fff;transform:translateY(-1px)}.cyan-glow:hover{border-color:var(--accent-cyan);background:#f5a62314;box-shadow:0 0 10px #f5a62333}.purple-glow:hover{border-color:var(--accent-gold);background:#fbbf2414;box-shadow:0 0 10px #fbbf2438}.dice-roller-controls{justify-content:center;margin-top:.5rem;display:flex}.roll-both-btn{font-family:var(--font-family);border-radius:14px;box-shadow:0 4px 18px #fbbf241f,0 0 10px #f5a62314;color:#fff!important;background:linear-gradient(135deg,#f5a6232e 0%,#fbbf2433 100%)!important;border:1px solid #fbbf2475!important;padding:.85rem 2.2rem!important;font-size:1rem!important;font-weight:800!important}.roll-both-btn:hover{transform:translateY(-2px)scale(1.02);border-color:#fbbf24cc!important;box-shadow:0 6px 24px #fbbf2440,0 0 15px #f5a62326!important}.dice-shaker{display:inline-block}.roll-both-btn:hover .dice-shaker{animation:.5s infinite alternate shake}@keyframes shake{0%{transform:rotate(0)scale(1)}50%{transform:rotate(15deg)scale(1.1)}to{transform:rotate(-15deg)scale(1.1)}}.impact-ripple{pointer-events:none;opacity:0;z-index:0;border-radius:50%;width:90px;height:90px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.1)}#scene-pitch .impact-ripple{border:2.5px solid var(--accent-cyan);box-shadow:0 0 15px var(--accent-cyan), inset 0 0 10px var(--accent-cyan)}#scene-rhythm .impact-ripple{border:2.5px solid var(--accent-gold);box-shadow:0 0 15px var(--accent-gold), inset 0 0 10px var(--accent-gold)}@keyframes ripple-expand{0%{opacity:.95;transform:translate(-50%,-50%)scale(.15)}to{opacity:0;transform:translate(-50%,-50%)scale(1.7)}}.impact-ripple.active{animation:.6s cubic-bezier(.1,.8,.3,1) forwards ripple-expand}.cube-hover-shake{animation:.35s ease-in-out infinite alternate wobble}@keyframes wobble{0%{transform:translateY(0)rotateX(4deg)rotateY(-4deg)}to{transform:translateY(-3px)rotateX(-4deg)rotateY(4deg)}}.dice-buttons-row{justify-content:center;align-items:center;gap:.35rem;display:flex}.custom-select-mini{display:inline-block;position:relative}.sel-btn-select{font-family:var(--font-family);cursor:pointer;appearance:none;outline:none;font-weight:600;transition:all .2s;border:1px solid var(--glass-border)!important;color:var(--text-primary)!important;background:#0a0f1ef2 url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") right 4px center/16px no-repeat!important;border-radius:8px!important;padding:.5rem 1.6rem .5rem .75rem!important;font-size:.78rem!important}.sel-btn-select:hover{box-shadow:0 0 10px #f5a62326;border-color:var(--accent-cyan)!important;color:var(--accent-cyan)!important;background-color:#f5a6231f!important;background-image:url("data:image/svg+xml;utf8,<svg fill='%23f5a623' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")!important}.sel-btn-select:focus-visible{border-color:var(--accent-cyan)!important}.instant-flash-cyan{animation:.45s ease-out instant-glow-cyan}.instant-flash-purple{animation:.45s ease-out instant-glow-purple}@keyframes instant-glow-cyan{0%{border-color:var(--accent-cyan);background:#f5a62326;box-shadow:0 0 25px #f5a623f2,inset 0 0 15px #f5a62366}to{box-shadow:none;border-color:var(--glass-border);background:#0006}}@keyframes instant-glow-purple{0%{border-color:var(--accent-purple);background:#9d4edd26;box-shadow:0 0 25px #9d4eddf2,inset 0 0 15px #9d4edd66}to{box-shadow:none;border-color:var(--glass-border);background:#0006}}.chord-tabs{background:#00000038;border:1px solid #fbbf241c;border-radius:12px;gap:.35rem;margin-bottom:.5rem;padding:.25rem;display:flex}.chord-tab{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);text-align:center;background:0 0;border:none;border-radius:8px;flex:1;min-height:36px;padding:.45rem .6rem;font-size:.75rem;font-weight:700}#btn-chord-triads,#btn-chord-7ths{border-radius:8px!important;min-height:34px!important;padding:.35rem .65rem!important}.chord-tab:hover{color:var(--text-primary);background:#ffffff05}.chord-tab.active{color:var(--accent-gold);background:linear-gradient(135deg,#fbbf2421,#0f8f6817);border:1px solid #fbbf2447;box-shadow:0 4px 10px #0000004d,0 0 8px #fbbf241a}.chord-tab-content{flex-direction:column;flex-grow:1;gap:.75rem;display:none}.chord-tab-content.active{display:flex}.chord-cards-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;max-height:178px;padding-right:.25rem;display:grid;overflow-y:auto}.chord-cards-grid::-webkit-scrollbar{width:4px}.chord-cards-grid::-webkit-scrollbar-track{background:#ffffff05;border-radius:2px}.chord-cards-grid::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.chord-card{text-align:left;cursor:pointer;box-sizing:border-box;background:linear-gradient(145deg,#ffffff09,#ffffff03);border:1px solid #ffffff12;border-radius:12px;flex-direction:column;justify-content:space-between;min-height:68px;padding:.5rem .6rem;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.chord-card:hover{background:#ffffff0b;border-color:#fbbf2442;transform:translateY(-1px)}.chord-card.active-slot-match{background:#fbbf240e;border-color:#fbbf247a}.chord-card-degree{text-transform:uppercase;color:var(--text-secondary);font-size:.6rem;font-weight:500}.chord-card-name{color:var(--text-primary);margin:.1rem 0;font-size:.85rem;font-weight:700}.chord-card-notes{color:var(--text-secondary);font-size:.6rem;font-family:var(--font-mono)}.chord-card-action{opacity:0;border:1px solid var(--accent-gold);color:var(--accent-gold);background:#fbbf241f;border-radius:4px;padding:.15rem .35rem;font-size:.6rem;font-weight:700;transition:all .2s;position:absolute;top:50%;right:6px;transform:translateY(-50%)scale(.85)}.chord-card:hover .chord-card-action{opacity:1;transform:translateY(-50%)scale(1)}.progression-slot.active{box-shadow:0 0 10px #fbbf2438,inset 0 0 4px #fbbf241a;border-color:var(--accent-gold)!important;background:#fbbf241c!important}.progression-slot:hover{background:#ffffff0a;border-color:#ffffff26}.progression-slot.active:hover{border-color:var(--accent-gold)!important;background:#fbbf2426!important}.piano-key.white.highlight-chord{background:linear-gradient(#fffbeb 0%,#fef3c7 8%,#fde68a 80%,#f59e0b40 100%)!important;border-bottom:6px solid #f59e0b!important}.piano-key.white.highlight-chord .key-badge{color:#d97706!important;background:#f59e0b1a!important;border-color:#f59e0b80!important;box-shadow:0 0 8px #f59e0b4d!important}.piano-key.black.highlight-chord{background:linear-gradient(#1c1917 0%,#292524 10%,#1c1917 80%,#f59e0b73 100%)!important;border-bottom:8px solid #f59e0b!important}.piano-key.black.highlight-chord .key-badge{color:#f59e0b!important;background:#f59e0b26!important;border-color:#f59e0b99!important;box-shadow:0 0 8px #f59e0b66!important}.chord-progression-builder{border-top:1px solid #ffffff0f;flex-direction:column;gap:.5rem;margin-top:auto;padding-top:.75rem;display:flex}.progression-slots-row{gap:.4rem;display:flex}.progression-slot{color:var(--text-primary);cursor:pointer;background:#ffffff04;border:1px solid #ffffff14;border-radius:8px;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:48px;padding:.35rem .2rem;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.progression-slot.empty{background:#ffffff01;border-color:#ffffff0a}.slot-label{text-transform:uppercase;letter-spacing:0;color:var(--text-secondary);margin-bottom:.1rem;font-size:.55rem}.slot-value{font-size:.7rem;font-weight:700}.btn-playback-mini{border-radius:6px;height:auto;padding:.35rem .5rem;font-size:.72rem}.sticky-transport-bar{-webkit-backdrop-filter:blur(18px)saturate(1.1);border-top:1px solid var(--border-strong);z-index:1000;box-sizing:border-box;background:#0d0f14eb;grid-template-columns:minmax(360px,430px) minmax(0,1fr);align-items:stretch;gap:.4rem;padding:.25rem .45rem;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -12px 34px #00000080}.transport-left{justify-content:center;align-items:center;gap:.32rem;min-width:0;display:flex}.playback-sanctuary{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);flex-wrap:nowrap;padding:.22rem}.bottom-setup-console{background:#ffffff06;border:1px solid #e2e8f014;border-radius:11px;grid-template-columns:minmax(232px,1.05fr) minmax(196px,.9fr) minmax(270px,1.15fr) minmax(184px,.78fr);align-items:stretch;gap:.28rem;min-width:0;padding:.12rem;display:grid;overflow:visible}.setup-dock{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;align-items:center;gap:.26rem;width:auto;min-width:0;padding:.24rem;display:flex}.setup-harmony-dock{align-items:stretch}body[data-melody-source=scale] .bottom-setup-console{grid-template-columns:minmax(232px,1.05fr) minmax(196px,.9fr) minmax(270px,1.15fr) minmax(184px,.78fr)}.setup-rhythm-dock{overflow:hidden}.setup-rhythm-dock .meter-controls-row{flex-wrap:wrap;row-gap:.25rem;min-width:0;overflow:hidden}.setup-rhythm-dock .input-group{min-width:0;flex:96px!important}.setup-rhythm-dock .compact-music-control{flex:0 84px!important}.setup-rhythm-dock .swing-control{flex:118px!important}.setup-rhythm-dock .bar-action-row{display:none}.setup-rhythm-dock .bar-stepper{grid-template-columns:24px minmax(54px,1fr) 24px;gap:.18rem}.setup-rhythm-dock .mini-icon-btn{width:24px;height:30px}.setup-rhythm-dock .meter-tabs,.setup-rhythm-dock .division-tabs{gap:.12rem}.setup-rhythm-dock .meter-tab,.setup-rhythm-dock .division-tab{min-width:0;padding-left:.18rem;padding-right:.18rem;font-size:.56rem}.setup-harmony-panel{width:100%;max-height:none;overflow:visible;min-height:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:0 0!important;border-radius:10px!important;padding:.25rem!important}.setup-harmony-panel .panel-title{display:none!important}.setup-harmony-panel .chord-tabs{display:none}.setup-harmony-panel #panel-custom-chord,.setup-harmony-panel #panel-diatonic-chords,.setup-harmony-panel .progression-actions,.setup-harmony-panel .chord-progression-builder>div:first-child{display:none!important}.setup-harmony-panel .chord-progression-builder>div:has(#btn-chord-melody-pool){display:none!important}.setup-harmony-panel .chord-tabs,.setup-harmony-panel .progression-actions,.setup-harmony-panel .accompaniment-actions{gap:.3rem}.setup-harmony-panel .chord-card{border-radius:8px;min-height:30px;padding:.2rem .28rem}.setup-harmony-panel .chord-cards-grid{grid-template-columns:repeat(7,minmax(36px,1fr));gap:.22rem;max-height:none}.setup-harmony-panel .chord-card-name{margin:0;font-size:.68rem}.setup-harmony-panel .chord-card-degree{font-size:.48rem}.setup-harmony-panel .chord-card-notes,.setup-harmony-panel .chord-card-action{display:none}.setup-harmony-panel .chord-progression-builder{gap:.18rem;padding-top:0}.setup-harmony-panel .progression-slot{min-height:29px;padding:.14rem .1rem}.accompaniment-section{border-top:1px solid #ffffff0f;flex-direction:column;gap:.5rem;padding-top:.22rem;display:flex}.setup-harmony-panel .accompaniment-section{gap:.18rem}.setup-harmony-panel .accompaniment-header{display:none}.accompaniment-header,.accompaniment-actions{justify-content:space-between;align-items:center;gap:.35rem;display:flex}.accompaniment-toggle{color:var(--text-secondary);align-items:center;gap:.35rem;font-size:.74rem;font-weight:800;display:inline-flex}.accompaniment-toggle input{width:auto}.setup-dock .controls-row,.setup-dock .meter-controls-row{align-items:flex-end;gap:.26rem;width:100%}.setup-scale-dock .setup-scale-controls{flex-wrap:wrap;align-items:flex-start;row-gap:.32rem}.setup-scale-dock .melody-source-control{flex:100%!important}.setup-scale-dock .source-tabs{grid-template-columns:1fr 1fr}.setup-scale-dock .source-tab{white-space:nowrap;min-height:28px;font-size:.66rem}.setup-scale-dock .input-group:not(.melody-source-control){min-width:0;flex:calc(50% - .16rem)!important}.setup-scale-dock .input-group:not(.melody-source-control) select{text-overflow:ellipsis;width:100%}.setup-dock .input-group{gap:.18rem}.setup-dock .input-group label,.setup-dock .subsection-title,.sound-selector span,.tempo-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:0;font-size:.6rem;font-weight:900;line-height:1}.setup-dock .custom-select select,.setup-dock .sel-btn-select{min-height:26px;border-radius:7px!important;padding-top:.2rem!important;padding-bottom:.2rem!important;font-size:.64rem!important}.setup-dock .meter-tabs,.setup-dock .division-tabs{border-radius:10px;padding:.2rem}.setup-dock .meter-tab,.setup-dock .division-tab{white-space:nowrap;min-height:27px;padding:.22rem .28rem;font-size:.62rem}.setup-playback-dock{flex-wrap:wrap;justify-content:flex-end}.transport-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.35rem;max-width:none;display:flex}.sound-selector{color:var(--text-secondary);align-items:center;gap:.35rem;min-width:0;font-size:.78rem;font-weight:800;display:inline-flex}.sound-selector select{min-width:112px}.main-play-btn{white-space:nowrap;background:var(--accent-green)!important;color:#032018!important;box-shadow:var(--shadow-sm)!important;border:1px solid #0000!important;padding:.4rem .52rem!important;font-size:.78rem!important;font-weight:800!important}.main-play-btn:hover{transform:translateY(-1px);background:#3fe0ac!important}.main-play-btn.playing{background:var(--accent-pink)!important;color:#2a0710!important}.metronome-btn{background:#ffffff08!important;border-color:#ffffff26!important;padding:.45rem .65rem!important;font-size:.72rem!important}.setup-playback-dock .bpm-slider-container{width:100%}.setup-playback-dock .tempo-label{display:none}.midi-detect-btn.midi-ready{color:var(--accent-green)!important;background:#10b9811f!important;border-color:#10b981b3!important}.midi-detect-btn.midi-error{color:#fca5a5!important;border-color:#f871718c!important}.midi-transport-status{text-overflow:ellipsis;white-space:nowrap;min-width:62px;max-width:140px;color:var(--text-secondary);flex:96px;font-size:.62rem;font-weight:800;overflow:hidden}.btn-transport{color:var(--text-primary);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;align-items:center;gap:.4rem;padding:.5rem .7rem;font-size:.75rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.btn-transport:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-1px)}.btn-transport.delete-btn{color:#f87171;background:#ef44440d;border-color:#ef44444d}.btn-transport.delete-btn:hover{background:#ef444426;border-color:#ef44448c}.tempo-label{color:var(--text-secondary);font-size:.85rem;font-weight:500}@media (width<=600px){#app{gap:1rem;padding:1rem .75rem}header{text-align:center;flex-direction:column;align-items:center;gap:1rem;padding:1rem 1.25rem}.logo-container{flex-direction:column;gap:.5rem}.nsm-logo{height:38px}.app-brand-logo{max-width:260px;height:42px}.audio-status{flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%;font-size:.85rem}.btn-share{min-height:44px}.mode-strip{z-index:80;position:sticky;top:.5rem}.sticky-transport-bar{border:1px solid #e2e8f01f;border-radius:18px;grid-template-columns:1fr;align-items:stretch;gap:.4rem;max-height:none;margin-top:1rem;padding:.5rem;position:static;overflow:visible}.transport-left{flex-wrap:nowrap;justify-content:stretch;gap:.5rem;width:100%}.practice-set-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.teach-grid{grid-template-columns:1fr}.phrase-bars-toolbar{flex-direction:column;align-items:stretch}.phrase-bars-main,.phrase-bars-actions{justify-content:space-between;width:100%}.playback-sanctuary{padding:.45rem}.main-play-btn{width:100%;min-width:0}.bottom-setup-console{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.35rem;padding:.15rem;display:grid;overflow:visible}body[data-melody-source=scale] .bottom-setup-console{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-dock{align-items:stretch;width:auto;min-height:70px;padding:.35rem}.setup-harmony-dock,.setup-playback-dock{grid-column:1/-1}.setup-dock .controls-row,.setup-dock .meter-controls-row{flex-direction:row;align-items:flex-end}.setup-dock .input-group{min-width:0}.transport-actions{display:none}.main-play-btn,.metronome-btn{justify-content:center;min-height:44px}.main-play-btn span,.metronome-btn span{white-space:nowrap}.sound-selector,.bpm-slider-container{flex:100%;width:100%}.sound-selector{justify-content:space-between}.sound-selector select{flex:1;min-width:0}.bpm-slider-container{min-width:0}.btn-transport{justify-content:center;min-width:42px;min-height:44px;padding:.55rem .65rem}.setup-harmony-panel .chord-cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.setup-harmony-panel .progression-actions,.setup-harmony-panel .accompaniment-actions{flex-wrap:wrap}.setup-harmony-panel .accompaniment-actions .btn-playback-mini{flex:130px;min-width:0}}@media (width<=900px){.roll-command-center,.roll-stage{grid-template-columns:1fr}.roll-copy{grid-template-columns:1fr;align-items:start}.hero-icon-toolbar{justify-content:flex-start}.roll-copy h2{font-size:1.85rem;line-height:1.02}.melody-action-dock{grid-template-columns:repeat(2,minmax(0,1fr))}.main-layout{flex-direction:column;display:flex}.control-rack{max-height:none;position:static;overflow:visible}.selected-note-controls,.control-buttons{align-items:stretch}.control-buttons .sel-btn,.control-buttons .custom-select-mini{flex:145px}.step-shift-controls{display:none}}@media (width<=600px){.notation-panel .panel-title{flex-direction:column;align-items:flex-start;gap:.2rem}.notation-panel .panel-title span:last-child{line-height:1.35}}@media (width>=901px) and (width<=1220px){.sticky-transport-bar{grid-template-columns:minmax(330px,390px) minmax(0,1fr)}.bottom-setup-console{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=900px){body{padding-bottom:0}.sticky-transport-bar{border:1px solid #e2e8f01f;border-radius:16px;grid-template-columns:1fr;gap:.38rem;margin-top:1rem;padding:.45rem;position:static;overflow:hidden}.transport-left{justify-content:stretch;width:100%}.playback-sanctuary{flex-wrap:wrap}.main-play-btn{flex:86px}.bottom-setup-console,body[data-melody-source=scale] .bottom-setup-console{grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden}.setup-dock{align-items:stretch;min-width:0}.setup-harmony-dock,.setup-playback-dock{grid-column:1/-1}}@media (width<=430px){.logo-title{font-size:1.08rem!important}.nsm-logo{max-width:220px}.timeline-scroll-container,.notation-container-box{padding-left:.75rem;padding-right:.75rem}.bottom-setup-console,body[data-melody-source=scale] .bottom-setup-console{grid-template-columns:1fr}.piano-container{justify-content:flex-start;overflow-x:auto}}:root{--hairline:#fff8f014;--hairline-strong:#fff8f026;--paper:#fbf7ee}#app{gap:1.15rem;padding:1.15rem 1.3rem 1.5rem}.glass-panel:hover{border-color:var(--hairline-strong)}.roll-stage:before{opacity:.55}.roll-copy-text{max-width:100%}.roll-kicker{color:var(--text-muted);letter-spacing:.22em}.roll-copy h2{color:var(--text-secondary);margin-bottom:.3rem;font-size:clamp(1.1rem,.95rem + .6vw,1.4rem);font-weight:600}.notation-container-box{background:var(--paper);border-radius:var(--radius-lg);border:1px solid #00000029;justify-content:center;min-height:196px;padding:1.4rem 1.25rem;box-shadow:inset 0 1px #ffffffb3,0 20px 44px -26px #000000f2}.panel-title{letter-spacing:-.01em;margin-bottom:.7rem;font-size:.95rem}.panel-title span:nth-child(2){opacity:.85}.sticky-transport-bar{gap:1.1rem;padding:.6rem 1.1rem}.bottom-setup-console{gap:1.15rem}.setup-dock{gap:.6rem}.sticky-transport-bar::-webkit-scrollbar{height:6px}.bottom-setup-console::-webkit-scrollbar{height:6px}.sticky-transport-bar::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:999px}.bottom-setup-console::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:999px}.subsection-title,.active-pool-label,.scale-chips-label,.forge-section-title,.dice-module-title{letter-spacing:.12em!important;color:var(--text-muted)!important;font-size:.7rem!important;font-weight:600!important}.roll-kicker{letter-spacing:.2em;font-size:.66rem;font-weight:700}.dice-module-hint,.forge-caption,.input-hint,.timeline-instruction{color:var(--text-muted);font-size:.78rem}.timeline-instruction{background:0 0;padding:.3rem 0}body{background-image:linear-gradient(#fffaf004 1px,#0000 1px),radial-gradient(130% 90% at 16% -12%,#edb84e1a 0%,#0000 48%),radial-gradient(120% 85% at 90% -6%,#f5a6230f 0%,#0000 46%),radial-gradient(150% 120% at 50% 120%,#b294ff0d 0%,#0000 55%);background-size:100% 46px,auto,auto,auto;background-attachment:fixed,fixed,fixed,fixed}#app{gap:.82rem;max-width:min(1500px,100%)}header,.mode-strip{max-width:100%}.roll-stage{gap:.78rem;padding:.95rem;overflow:visible}.roll-copy{align-items:center}.roll-copy h2{max-width:620px;color:var(--text-primary);margin-bottom:0;font-size:clamp(1.4rem,1rem + 1.35vw,2.15rem);font-weight:700;line-height:1.04}.roll-copy p{max-width:48ch;color:var(--text-secondary)}.score-dock{min-width:0}.roll-stage .hero-score-panel{min-height:auto;box-shadow:none;background:0 0;border:0;gap:.55rem;padding:0;animation:none;overflow:visible}.roll-stage .hero-score-panel .panel-title{border:0;justify-content:space-between;align-items:baseline;margin:0 .15rem;padding:0;display:flex}.roll-stage .hero-score-panel .panel-title:after{content:"Live notation";color:var(--text-muted);font-family:var(--font-family);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:700}.roll-stage .notation-container-box{background:linear-gradient(180deg, #ffffffe0, #ffffff2e), var(--paper);border-radius:18px;justify-content:center;min-height:clamp(188px,19vw,260px);padding:clamp(1rem,1.5vw,1.55rem)}.roll-stage .notation-container-box svg{max-height:100%}.notation-container-box.fit-single-bar{overflow-x:hidden}.roll-stage .notation-container-box:not(.fit-single-bar){justify-content:flex-start}.notation-container-box.fit-single-bar svg{width:100%!important;max-width:100%!important}.roll-stage .top-dice-module{background:linear-gradient(135deg,#f5a62309,#e7bc5409),#070a0f61;border:1px solid #e7bc5424;border-radius:18px;gap:.7rem;padding:.85rem .8rem .75rem}.roll-stage .dice-roller-header{max-width:620px}.roll-stage .dice-row{gap:clamp(1.4rem,6vw,4rem)}.roll-stage #roll-history{max-width:520px}.roll-stage #roll-history-inner:has(.history-empty){justify-content:center}.piano-panel.priority-piano-panel{min-height:auto;padding:1.2rem}.timeline-panel{padding:1.2rem}.phrase-bars-toolbar{border-radius:var(--radius)}.sticky-transport-bar{border-left:1px solid #e2e8f014;border-right:1px solid #e2e8f014}@media (width>=1280px){.roll-stage{grid-template-columns:minmax(0,1fr) minmax(290px,.42fr);align-items:start}.roll-copy,.score-dock{grid-column:1}.dice-dock{grid-area:1/2/span 2;align-self:stretch;display:flex}.dice-dock .top-dice-module{justify-content:center}.roll-stage .dice-row{flex-direction:column;align-items:center;gap:1.2rem}}@media (width<=900px){#app{padding-inline:1rem}.roll-stage{overflow:hidden}.roll-copy h2{font-size:1.5rem}.roll-stage .notation-container-box{justify-content:flex-start;min-height:168px}}@media (width<=520px){#app{gap:.75rem;padding:.9rem 1rem 1.1rem}header{gap:.85rem}.roll-copy{gap:.65rem}.hero-icon-toolbar .btn-transport{width:40px;height:40px}.roll-stage .hero-score-panel .panel-title:after{content:"Live"}.roll-stage .notation-container-box{min-height:150px;padding:.8rem}.melody-forge{gap:.65rem}}.roll-stage{grid-template-columns:minmax(0,1fr)}.roll-copy,.score-dock,.dice-dock{grid-area:auto}.dice-dock{display:block}.roll-stage .dice-row{flex-direction:row;align-items:flex-end}@media (width<=900px){.roll-command-center,.roll-stage{grid-template-columns:minmax(0,1fr)}}:root{--studio-bg:#07090d;--studio-shell:#0d1219;--studio-panel:#10161e;--studio-panel-2:#121923;--studio-line:#ffffff17;--studio-line-strong:#ffffff29;--studio-cyan:#f5a623;--studio-gold:#d4a647;--score-paper:#fbf3e6}body{background:radial-gradient(900px 520px at 42% -14%, #f5a62314, transparent 62%), linear-gradient(180deg, #050609 0%, var(--studio-bg) 48%, #050609 100%);padding-bottom:138px}#app{gap:.52rem;max-width:min(1920px,100%);padding:.72rem .82rem .9rem}header{background:linear-gradient(180deg, #ffffff09, #ffffff03), var(--studio-shell);border:1px solid var(--studio-line);border-radius:12px;grid-template-columns:minmax(0,620px) minmax(360px,430px) minmax(440px,1fr);align-items:center;gap:1.05rem;min-height:86px;padding:.7rem 1.1rem;display:grid;box-shadow:0 22px 55px -42px #000000f5,inset 0 1px #ffffff0a}.app-brand-logo,.app-brand-mark{max-width:min(430px,35vw);height:58px}.app-brand-mark{object-fit:contain;filter:drop-shadow(0 0 16px #edb84e38);width:58px}.brand-wordmark{align-items:baseline;gap:.86rem;min-width:0;display:flex}.brand-wordmark strong{font-family:var(--font-display);letter-spacing:.03em;text-transform:uppercase;color:var(--text-primary);white-space:nowrap;font-size:clamp(1.55rem,1.15rem + .82vw,2.02rem);font-weight:900;line-height:1}.brand-wordmark span{color:#f4f7fb85;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-size:.68rem;font-weight:800}.brand-wordmark u{text-underline-offset:4px;text-decoration-color:#f4f7fb47}header .mode-strip{width:min(410px,100%);box-shadow:none;background:0 0;border:0;border-radius:0;grid-template-columns:repeat(3,1fr);justify-self:center;padding:0;display:grid}header .mode-btn{color:#f4f7fb80;min-height:56px;font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;background:0 0;border:0;border-radius:0;font-size:.86rem;position:relative}header .mode-btn.active{color:var(--text-primary);box-shadow:none;background:0 0}header .mode-btn.active:after{content:"";background:var(--studio-cyan);border-radius:999px;height:4px;position:absolute;bottom:4px;left:18%;right:18%;box-shadow:0 0 16px #f5a623a6}.top-actions-dock{justify-self:end;min-width:0}.top-actions-dock:empty{display:none}.top-actions-dock .hero-icon-toolbar{flex-wrap:nowrap;justify-content:flex-end;align-items:stretch;gap:0;margin:0;display:flex}.top-actions-dock .btn-transport{color:#f4f7fb8f;background:0 0;border:0;border-left:1px solid #ffffff12;border-radius:0;flex-direction:column;gap:.32rem;width:auto;min-width:74px;height:62px;padding:.35rem .7rem;font-size:.72rem;font-weight:700;display:inline-flex}.top-actions-dock .btn-transport:hover{color:var(--text-primary);background:#ffffff09}.top-actions-dock .btn-transport svg{stroke-width:1.7px;opacity:.9;width:24px;height:24px}.top-actions-dock .btn-transport:after{line-height:1}.top-actions-dock #btn-undo:after{content:"Undo"}.top-actions-dock #btn-redo:after{content:"Redo"}.top-actions-dock #btn-export-midi:after{content:"Export MIDI"}.top-actions-dock #btn-export-svg:after{content:"Share Score"}.top-actions-dock #btn-clear:after{content:"Reset"}.top-actions-dock #btn-export-midi{order:3}.top-actions-dock #btn-export-svg{order:4}.top-actions-dock #btn-octave-up:after{content:"Oct +"}.top-actions-dock #btn-octave-down:after{content:"Oct −"}.top-actions-dock #btn-export-audio:after{content:"WAV"}.top-actions-dock #btn-share:after{content:"Share"}.top-actions-dock #btn-octave-up{order:1}.top-actions-dock #btn-octave-down{order:2}.top-actions-dock #btn-export-audio{order:3}.top-actions-dock #btn-share{order:6}.top-actions-dock #btn-clear{order:7}header .audio-status{color:var(--text-secondary);white-space:nowrap;background:#ffffff08;border:1px solid #ffffff17;border-radius:999px;align-items:center;gap:.4rem;max-width:210px;padding:.3rem .65rem;font-size:.68rem;display:inline-flex;overflow:hidden}header .audio-status #status-text{text-overflow:ellipsis;overflow:hidden}.roll-command-center{grid-template-columns:minmax(0,1fr) minmax(350px,430px);align-items:start;gap:.52rem}.roll-stage,.melody-forge{background:linear-gradient(180deg, #ffffff07, #ffffff03), var(--studio-panel);border-color:var(--studio-line);border-radius:13px;box-shadow:0 24px 70px -58px #000,inset 0 1px #ffffff0a}.roll-stage{grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);grid-template-areas:"copy dice""score score""sequencer sequencer";align-self:start;align-items:center;gap:.9rem 1.3rem;padding:1.25rem 1.05rem 1rem;display:grid;overflow:hidden}.roll-copy{grid-area:copy;align-self:center;padding:0 0 0 1rem;display:block}.roll-copy-text{gap:.55rem}.roll-kicker{display:none}.roll-copy h2{max-width:300px;color:var(--text-primary);font-size:clamp(1.6rem,1.2rem + 1.05vw,2.25rem);font-weight:800;line-height:1.05}.dice-dock{grid-area:dice;min-width:0}.score-dock{grid-area:score;min-width:0}.sequencer-dock{grid-area:sequencer;min-width:0}.roll-stage .hero-score-panel{gap:0}.roll-stage .hero-score-panel .panel-title{border:0;justify-content:flex-end;margin:0 .15rem .45rem;padding:0;display:flex}.roll-stage .hero-score-panel .panel-title>span:first-child,.roll-stage .hero-score-panel .panel-title:after{display:none}.roll-stage .notation-container-box{background:linear-gradient(180deg, #ffffffad, #ffffff05), radial-gradient(80% 90% at 50% 0%, #ffffff57, transparent 58%), var(--score-paper);color:#111821;border:1px solid #10161e3d;border-radius:13px;min-height:clamp(285px,22vw,370px);padding:4.25rem 1.8rem 1.55rem;position:relative;box-shadow:0 22px 58px -38px #000000f2,inset 0 1px #ffffffc7}.roll-stage .notation-container-box:before,.roll-stage .notation-container-box:after{z-index:2;color:#111821c7;font-family:var(--font-family);letter-spacing:0;pointer-events:none;font-size:clamp(.75rem,.56rem + .34vw,.95rem);font-weight:800;position:absolute;top:2.15rem}.roll-stage .notation-container-box:before{content:attr(data-score-meta-left) "     " attr(data-score-meta-tempo);left:clamp(1.8rem,3.6vw,4.2rem)}.roll-stage .notation-container-box:after{content:attr(data-score-meta-right);right:clamp(1.8rem,3.2vw,4rem)}.roll-stage .notation-container-box svg{filter:none}.roll-stage .notation-container-box.fit-single-bar{justify-content:center}.roll-stage .notation-container-box:not(.fit-single-bar){justify-content:flex-start;overflow-x:auto}.roll-stage .hero-sequencer-panel{box-shadow:none;background:0 0;border:0;border-top:1px solid #ffffff12;border-radius:0;gap:.72rem;padding:.1rem 0 0;animation:none}.roll-stage .hero-sequencer-panel>.panel-title,.roll-stage .hero-sequencer-panel>.timeline-instruction,.roll-stage .hero-sequencer-panel>.mode-workflow{display:none}.roll-stage .phrase-bars-toolbar{background:#ffffff05;border-color:#ffffff13;border-radius:9px;order:-1;padding:.45rem .65rem}.roll-stage .phrase-bars-label{text-transform:none;letter-spacing:0;color:#f4f7fb7a;font-size:.78rem}.roll-stage .timeline-scroll-container{background:#04070bb8;border-color:#ffffff13;border-radius:10px;padding:1rem .9rem;box-shadow:inset 0 1px #ffffff06}.roll-stage .timeline-container{gap:5px;height:116px}.roll-stage .timeline-step{background:#10151df0;border-color:#ffffff0e;border-radius:7px;min-width:44px}.roll-stage .timeline-step.active-hit{color:var(--text-primary);background:linear-gradient(#f5a62347,#f5a62329);border-color:#f5a62357;box-shadow:inset 0 1px #ffffff14,0 0 18px #f5a62314}.roll-stage .timeline-step.inactive{background:linear-gradient(#6d4d1873,#4d340f6b);border-color:#d4a64733}.roll-stage .timeline-step.downbeat{border-left-color:#ffffffb3}.melody-forge{gap:1.25rem;min-height:100%;padding:1.55rem 1.45rem;overflow:hidden}.forge-title{color:var(--studio-cyan);font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;font-size:1.04rem}.forge-scale-dock{order:1}.note-palette-dock{order:2}.forge-note-tools{order:3}.active-pool-dock{order:4}.scratch-melody-dock{order:5}#melody-preset-dock{order:6}#lesson-pack-dock{order:7}#melody-action-dock{order:8}.forge-scale-dock .setup-scale-controls{grid-template-columns:minmax(0,1fr);gap:1.08rem;margin:0;display:grid}.forge-scale-dock .setup-scale-controls>.input-group{width:100%;min-width:0;flex:none!important}.forge-scale-dock label,.forge-scale-dock .subsection-title{color:#f4f7fb94!important;letter-spacing:0!important;text-transform:none!important;margin-bottom:.42rem!important;font-size:.82rem!important;font-weight:800!important}.forge-scale-dock .source-tabs{background:#ffffff09;border-color:#ffffff12;border-radius:8px;padding:.2rem}.forge-scale-dock .source-tab{border-radius:6px;min-height:42px;font-size:.8rem}.forge-scale-dock .source-tab.active{color:var(--studio-cyan);background:#f5a6231a;border-color:#f5a62347;box-shadow:inset 0 0 0 1px #f5a62314}.forge-scale-dock .custom-select select,.forge-scale-dock select,.scratch-melody-dock input,.scratch-melody-dock select{min-height:44px;background-color:#05080cb8!important;border-color:#ffffff14!important;border-radius:7px!important}.note-palette-dock .note-palette-control,.active-pool-dock .active-pool-control,.scratch-melody-control,.forge-control .input-group{background:0 0;border:0;padding:0}.note-palette-dock .chips-container{grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;max-height:none;display:grid}.note-palette-dock .note-chip{text-align:center;color:#f4f7fbc7;background:#090e14d1;border-color:#f5a6232e;border-radius:7px;min-height:42px;padding:.45rem .35rem}.note-palette-dock .note-chip.active{color:#dffcff;background:#f5a62338;border-color:#f5a62385;box-shadow:0 0 18px #f5a62324}.forge-note-tools{gap:.62rem;display:grid}.forge-note-tool-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.58rem;display:grid}.forge-tool-btn{color:#f4f7fb9e;cursor:pointer;min-height:74px;transition:var(--transition-smooth);background:#090e14ad;border:1px solid #ffffff13;border-radius:7px;place-items:center;gap:.28rem;padding:.6rem .35rem;display:grid}.forge-tool-btn span{color:#f4f7fba3;font-size:1.35rem}.forge-tool-btn strong{font-size:.67rem;font-weight:800}.forge-tool-btn:hover{color:var(--text-primary);background:#f5a62313;border-color:#f5a62357}.top-chord-dock:empty,.setup-scale-dock:empty{display:none}.main-layout{display:block}.control-rack.is-empty{display:none}.workbench{margin-top:.52rem}.workbench .piano-panel,.workbench .reference-panel{max-width:min(1480px,100%);margin-inline:auto}.sticky-transport-bar{border:1px solid var(--studio-line);background:linear-gradient(#ffffff0a,#ffffff04),#0c1118f5;border-radius:14px;grid-template-columns:minmax(390px,.72fr) minmax(0,1.45fr);gap:0;padding:0;bottom:.72rem;left:.82rem;right:.82rem;overflow:hidden;box-shadow:0 -20px 60px -42px #000,inset 0 1px #ffffff0a}.playback-sanctuary{background:0 0;border:0;border-right:1px solid #ffffff14;border-radius:0;gap:.55rem;min-height:106px;padding:.8rem 1rem}.main-play-btn{width:82px;min-width:82px;height:82px;color:var(--studio-cyan);background:#d4a6470f;border:2px solid #d4a647c7;border-radius:999px;flex:0 0 82px;box-shadow:0 0 28px #d4a6471f}.main-play-btn span{display:none}.main-play-btn svg{fill:currentColor;width:30px;height:30px}.bottom-setup-console,body[data-melody-source=scale] .bottom-setup-console{background:0 0;border:0;border-radius:0;grid-template-columns:minmax(300px,1.1fr) minmax(390px,1.4fr) minmax(260px,.9fr);gap:0;padding:0;overflow:hidden}.setup-dock{background:0 0;border:0;border-left:1px solid #ffffff14;border-radius:0;min-height:106px;padding:.72rem 1rem}.setup-rhythm-dock .setup-rhythm-controls{width:100%}.setup-playback-dock{justify-content:center}.btn-playback,.micro-action-btn,.phrase-bar-btn{border-radius:7px}@media (width<=1280px){header{grid-template-columns:minmax(220px,auto) minmax(280px,1fr) auto}.top-actions-dock{grid-column:1/-1;justify-self:stretch}.top-actions-dock .hero-icon-toolbar{justify-content:center}.roll-command-center{grid-template-columns:minmax(0,1fr)}.melody-forge{min-height:0}}@media (width<=1100px){body{padding-bottom:0}#app{padding:.65rem}header{grid-template-columns:minmax(0,1fr);gap:.65rem}header .mode-strip{justify-self:stretch;width:100%}.roll-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy""dice""score""sequencer";padding:.9rem}.roll-copy{padding:.1rem}.roll-copy h2{max-width:none}.roll-stage .notation-container-box{min-height:210px;padding:3.6rem .9rem 1rem}.roll-stage .notation-container-box:before,.roll-stage .notation-container-box:after{top:1.45rem}.sticky-transport-bar{grid-template-columns:minmax(0,1fr);margin-top:.52rem;position:static;bottom:auto;left:auto;right:auto}.playback-sanctuary,.setup-dock{border-top:1px solid #ffffff14;border-left:0;border-right:0;min-height:auto}.bottom-setup-console,body[data-melody-source=scale] .bottom-setup-console{grid-template-columns:minmax(0,1fr)}}@media (width<=560px){header{gap:.52rem;min-height:0;padding:.62rem;overflow:hidden}.logo-container{text-align:left;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:.55rem;width:100%;min-width:0;display:grid}.app-brand-mark{width:42px;max-width:42px;height:42px}.brand-wordmark{align-items:start;gap:.18rem;min-width:0;display:grid}.brand-wordmark strong{white-space:normal;font-size:clamp(1.02rem,6.2vw,1.34rem);line-height:1.02}.brand-wordmark span{letter-spacing:.05em;white-space:normal;max-width:100%;font-size:.52rem;line-height:1.25}header .mode-strip{width:100%;min-width:0}header .mode-btn{letter-spacing:.08em;min-height:42px;font-size:.66rem}.app-brand-logo{max-width:260px;height:auto}.top-actions-dock{width:100%;overflow:hidden}.top-actions-dock .hero-icon-toolbar{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;display:grid;overflow:visible}.top-actions-dock .btn-transport{width:100%;min-width:0;height:52px;padding:.25rem .16rem;font-size:.56rem}.top-actions-dock .btn-transport svg{width:19px;height:19px}.top-actions-dock #btn-export-midi:after{content:"MIDI"}.top-actions-dock #btn-export-svg:after{content:"Score"}.forge-note-tool-grid,.note-palette-dock .chips-container{grid-template-columns:repeat(2,minmax(0,1fr))}.roll-stage .timeline-container{height:98px}}:root{--bg-primary:#100c09;--surface-1:#1b1611;--surface-2:#241d17;--surface-3:#2f261e;--bg-secondary:var(--surface-1);--bg-tertiary:var(--surface-2);--studio-bg:#100c09;--studio-shell:#18120d;--studio-panel:#1b1611;--studio-panel-2:#221b15;--studio-line:#ffeed61a;--studio-line-strong:#ffeed630;--studio-cyan:#f5a623;--studio-gold:#edb84e;--score-paper:#fbf4e6;--hairline:#ffeed617;--hairline-strong:#ffeed62b;--border:#ffeed61a;--border-strong:#ffeed633;--text-primary:#f8f1e6;--text-secondary:#c6b6a3;--text-muted:#9a8b78;--accent:#f5a623;--accent-soft:#f5a62326;--accent-cyan:#f5a623;--accent-gold:#f0c065;--paper:#fbf4e6;--grad-ember:linear-gradient(118deg, #fff1d6 0%, #f7b03a 38%, #ee7d24 72%, #d2531a 100%)}body{background-blend-mode:overlay, normal, normal, normal;background-color:#100c09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"),radial-gradient(1200px 640px at 50% -16%,#f7b03a21,#0000 60%),radial-gradient(900px 760px at 102% 108%,#b294ff0f,#0000 56%),linear-gradient(#15100b 0%,#100c09 52%,#0b0807 100%);background-size:180px 180px,auto,auto,auto;background-attachment:fixed,fixed,fixed,fixed;padding-bottom:138px}.roll-copy h2{background:var(--grad-ember);-webkit-text-fill-color:transparent;color:#0000;text-shadow:0 18px 50px #ee7d2429;-webkit-background-clip:text;background-clip:text;font-family:var(--font-serif)!important;letter-spacing:-.028em!important;margin-bottom:.55rem!important;font-size:clamp(2.1rem,1.2rem + 2.9vw,3.6rem)!important;font-weight:600!important;line-height:.92!important}.roll-copy p{color:var(--text-secondary);max-width:42ch;font-size:.92rem}.roll-kicker{text-transform:uppercase;align-items:center;gap:.55rem;font-weight:700;display:inline-flex;color:var(--accent-gold)!important;letter-spacing:.26em!important;font-size:.64rem!important}.roll-kicker:before{content:"";background:var(--grad-ember);border-radius:2px;width:26px;height:2px}.brand-wordmark strong{color:#f7ecdb;font-family:var(--font-display)!important}.app-brand-mark{filter:drop-shadow(0 0 18px #f5a62347)}.forge-title,.panel-title>span:first-child{letter-spacing:-.01em;font-family:var(--font-serif)!important}.forge-title{color:var(--accent)}.roll-stage,.melody-forge,.glass-panel,.notation-panel,.timeline-panel,.piano-panel{background:linear-gradient(180deg, #fff4e407, #fff4e400 42%), var(--surface-1)!important;border:1px solid var(--hairline)!important;box-shadow:inset 0 1px #fff0de0d,0 22px 48px -30px #000000eb!important}.notation-container-box{background:linear-gradient(#fdf8ee 0%,#f6efdf 100%)!important;border:1px solid #78501e2e!important;box-shadow:inset 0 2px #fffc,inset 0 0 0 1px #f7b03a0f,0 26px 52px -28px #000000f2!important}.mode-btn.active:after{border-radius:3px;background:var(--grad-ember)!important;height:3px!important}.mode-btn.active{color:var(--text-primary)!important}.main-play-btn{background:var(--grad-ember)!important;color:#1a1208!important;border:0!important;box-shadow:0 10px 30px -8px #ee7d248c,inset 0 1px #ffffff59!important}.main-play-btn svg{fill:#1a1208!important}.main-play-btn.playing{background:linear-gradient(118deg,#ff8f8f,#f4524f)!important;box-shadow:0 10px 30px -8px #f4524f8c!important}.note-chip.active{background:var(--accent-soft)!important;color:#ffe6bd!important;border-color:#f5a62373!important}@media (width>=1101px) and (width<=1450px){.sticky-transport-bar{grid-template-columns:minmax(330px,.7fr) minmax(0,1.45fr)}.bottom-setup-console,body[data-melody-source=scale] .bottom-setup-console{grid-template-columns:minmax(225px,1.05fr) minmax(295px,1.35fr) minmax(195px,.9fr)}}@media (width<=1100px){body{padding-bottom:0}header .audio-status{display:none}}@media (width<=600px){input[type=text],select,.sel-btn-select{font-size:16px!important}.meter-tab,.division-tab{min-height:40px;font-size:.74rem}.mini-icon-btn{min-width:36px;min-height:40px}.btn-playback-mini{min-height:40px}.vibe-chip{min-height:38px}.progression-slot{min-height:40px}}@supports (padding:env(safe-area-inset-top)){#app{padding-top:env(safe-area-inset-top)}@media (width>=1101px){.sticky-transport-bar{bottom:calc(.72rem + env(safe-area-inset-bottom))}}}.roll-copy{align-self:end;padding:0 0 .6rem .85rem}.roll-copy h2{max-width:none;text-shadow:none;margin-bottom:.4rem!important;font-size:1.42rem!important;line-height:1!important}.roll-copy p{color:#f4f7fb7a;max-width:26ch;font-size:.78rem;line-height:1.5}.roll-stage{grid-template-columns:minmax(160px,.2fr) minmax(0,1fr);gap:.55rem 1.1rem;padding:.9rem .95rem .85rem}.panel-title{padding-bottom:.45rem;font-size:.92rem}.subsection-title{letter-spacing:.08em;opacity:.85;margin-bottom:.35rem;font-size:.66rem}.top-actions-dock .btn-transport{gap:.24rem;min-width:64px;height:50px;font-size:.64rem}.top-actions-dock .btn-transport svg{width:19px;height:19px}.mode-workflow{color:var(--text-muted);background:0 0;border:1px dashed #ffffff17;border-radius:9px;padding:.4rem .7rem;font-size:.72rem;line-height:1.4}.timeline-instruction{color:var(--text-muted);background:0 0;border:0;padding:.25rem .1rem;font-size:.7rem}.forge-caption{display:none}.forge-header{margin-bottom:.55rem}.melody-forge{gap:.7rem;padding:.9rem .95rem}.melody-forge select,.sel-btn-select{min-height:36px;font-size:.82rem}.forge-note-tool-grid button{min-height:52px;padding:.45rem .4rem;font-size:.68rem}.note-chip{padding:.5rem .35rem;font-size:.82rem}.playback-sanctuary{min-height:92px;padding:.65rem .9rem}.roll-stage .cube-face{font-size:42px}.dice-ground{filter:blur(6px)}.piano-container{background:linear-gradient(#43241c 0%,#2f1712 10px,#1c0d0a 21px,#8e2733 22px,#641b25 27px,#0b080c 28px,#0e0b10 100%);border:1px solid #ffffff0f;border-radius:14px;height:198px;padding:30px 14px 14px;box-shadow:inset 0 8px 20px #000c,inset 0 1px #ffbe8c24,0 18px 40px -26px #000000f2}.piano-key.white{background:linear-gradient(#e6dfcc 0%,#f5f0e2 6%,#fbf8ef 42%,#f2ebda 88%,#d8ccb0 100%);border:1px solid #281e108c;border-top:0;border-bottom:5px solid #c2b493;border-radius:0 0 5px 5px;width:44px;box-shadow:inset 0 -12px 16px -14px #46321499,inset 0 2px #ffffffd9,2px 4px 8px -4px #00000080}.piano-key.white:hover{background:linear-gradient(#eee7d5 0%,#faf5e9 6%,#fffdf6 42%,#f7f1e2 88%,#ded2b7 100%)}.piano-key.white.active{border-bottom-width:2px;transform:translateY(3px);box-shadow:0 0 16px #f5a62380,inset 0 1px #ffffff8c;background:linear-gradient(#ffe7b2 0%,#ffd98a 55%,#eda63a 100%)!important}.piano-key.black{background:linear-gradient(#3d3d46 0%,#17171c 15%,#232329 60%,#060608 100%);border:1px solid #000;border-bottom:7px solid #030304;border-radius:0 0 4px 4px;width:27px;box-shadow:-2px 5px 8px #0000008c,inset 0 2px 1px #ffffff2b,inset -2px 0 3px -2px #ffffff12}.piano-key.black:hover{background:linear-gradient(#4a4a55 0%,#202027 15%,#2c2c34 60%,#0a0a0d 100%)}.piano-key.black.active{border-bottom-width:3px;transform:translateY(4px);box-shadow:0 0 16px #f5a62399,inset 0 1px #ffffff4d;background:linear-gradient(#7c5417 0%,#bb8023 55%,#8f6017 100%)!important}.piano-key.white.in-scale{background:linear-gradient(#e6dfcc 0%,#f5f0e2 6%,#fbf8ef 42%,#f2ebda 88%,#d8ccb0 100%);border-bottom:5px solid #c2b493!important}.piano-key.black.in-scale{background:linear-gradient(#3d3d46 0%,#17171c 15%,#232329 60%,#060608 100%);border-bottom:7px solid #030304!important}.piano-key.white.root-key{border-bottom:5px solid var(--accent-gold)!important}.piano-key.black.root-key{border-bottom:7px solid var(--accent-gold)!important}.key-badge{border-radius:0;gap:3px;width:auto;min-width:0;height:auto;padding:0;bottom:13px;box-shadow:none!important;background:0 0!important;border:0!important}.key-badge:after{content:"";box-sizing:border-box;background:0 0;border:1.5px solid #0000;border-radius:50%;width:6px;height:6px;margin-top:2px}.piano-key.white .key-badge{color:#6d6452}.piano-key.white.in-scale .key-badge{color:#423a2b}.piano-key.white.in-scale .key-badge:after{background:#90866a;border-color:#0000}.key-badge.is-root{font-weight:900;color:#7c5000!important;box-shadow:none!important;background:0 0!important}.key-badge.is-root:after{border-color:#8c5a0073;width:8px;height:8px;background:var(--accent-gold)!important}.piano-key.black .key-badge.is-root{color:var(--accent-gold)!important;background:0 0!important}.piano-key.black .key-badge{color:#ffffff6b;bottom:11px}.piano-key.black.in-scale .key-badge{color:#ead8b2}.piano-key.black.in-scale .key-badge:after{background:#ead8b2d9}.piano-key.white.highlight-chord .key-badge,.piano-key.black.highlight-chord .key-badge{box-shadow:none!important;background:0 0!important}.piano-key.white.highlight-chord .key-badge{color:#9a6a10!important}.piano-key.black.highlight-chord .key-badge{color:#f5c46a!important}.piano-key.highlight-chord .key-badge:after{box-shadow:0 0 6px #f5a62380;background:0 0!important;border-color:#f5a623!important}.piano-key.white.active .key-badge,.piano-key.white.in-scale.active .key-badge{color:#4a2c00!important;box-shadow:none!important;background:0 0!important}.piano-key.black.active .key-badge,.piano-key.black.in-scale.active .key-badge{color:#ffedc9!important;box-shadow:none!important;background:0 0!important}.badge-val{font-size:.7rem}.piano-key.black .badge-val{font-size:.56rem}.badge-note-sub{opacity:.65;font-size:.48rem}.piano-key.white .key-label-simple{color:#60543c4d}.piano-key.black .key-label-simple{color:#fff3}.legend-dot.root{background:var(--accent-gold);box-shadow:0 0 6px #edb84e80}.legend-dot.scale{box-shadow:none;background:#90866a}.legend-dot.chord{box-shadow:none;background:0 0;border:1.5px solid #f5a623}.legend-dot.live{background:#ffd98a;box-shadow:0 0 6px #ffd98a99}.roll-stage .dice-wrapper{background:0 0;border:0;border-radius:0;min-width:0;padding:0}.timeline-step.active-hit .step-indicator{background:var(--accent-gold);border-color:var(--accent-gold);box-shadow:0 0 8px #edb84ea6}@media (width<=1100px){.roll-kicker{display:none!important}.roll-copy{padding:0 .2rem}.roll-copy h2{font-size:1.25rem!important}.roll-copy p{max-width:none;font-size:.78rem}.roll-stage{grid-template-columns:minmax(0,1fr)}.dice-roller-module,.top-dice-module{width:100%}.dice-module-hint{text-align:center;width:100%;max-width:none}#vibe-filter-strip{flex-wrap:wrap;justify-content:center;gap:.4rem;width:100%;flex-direction:row!important;display:flex!important}#vibe-filter-strip .vibe-chip{flex:none}}.workbench .piano-panel,.workbench .reference-panel{width:100%}.sticky-transport-bar{background:linear-gradient(#fff4e40a,#fff4e400 42%),#0f0b09f7;border:1px solid #ffcd9621;border-radius:16px;box-shadow:0 -18px 50px -30px #000,inset 0 1px #fff0de12}.playback-sanctuary{border-right:1px solid #ffffff12;align-items:center;gap:.55rem;padding:.75rem 1rem .75rem 1.05rem;display:flex}.btn-playback-mini{border-radius:9px;min-height:38px;font-size:.73rem}.midi-transport-status{color:var(--text-muted);max-width:72px;font-size:.62rem;line-height:1.25}.bottom-setup-console{padding:.5rem .4rem}.bottom-setup-console>.setup-scale-dock{display:none}.bottom-setup-console>.setup-dock{padding:.3rem 1.05rem}.bottom-setup-console>.setup-rhythm-dock,.bottom-setup-console>.setup-playback-dock{border-left:1px solid #fff1}#btn-roll-accompaniment,#btn-harmonize-melody{min-height:38px;padding:.4rem .55rem;font-size:.7rem;line-height:1.2}#tempo-value{color:var(--accent-gold);font-size:1.02rem;font-weight:900}.piano-key.white{flex:44px;min-width:34px;max-width:66px}@media (width>=1451px){.sticky-transport-bar{grid-template-columns:minmax(360px,.34fr) minmax(0,1fr)}}:root{--dice-size:108px;--dice-half:54px;--dice-border-r:14px;--pitch-color:#3ce0cb;--pitch-color-dim:#3ce0cb2e;--pitch-glow:#3ce0cb42;--pitch-face-bg:linear-gradient(152deg, #13282c 0%, #0a1619 62%, #081215 100%);--pitch-border:#3ce0cb42;--rhythm-color:#edb84e;--rhythm-color-dim:#edb84e2e;--rhythm-glow:#edb84e42;--rhythm-face-bg:linear-gradient(152deg, #2a1f0c 0%, #181004 62%, #120c03 100%);--rhythm-border:#edb84e42}#vibe-filter-strip{flex-wrap:wrap;justify-content:center;gap:7px;padding:0 8px 8px;display:flex}.vibe-chip{color:#ffffff7a;font-size:11.5px;font-weight:700;font-family:var(--font-family);letter-spacing:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff08;border:1.5px solid #ffffff21;border-radius:999px;align-items:center;gap:5px;padding:5px 13px;transition:background .16s,border-color .16s,color .16s,transform .12s,box-shadow .16s;display:inline-flex}.vibe-chip:hover{color:#ffffffe0;background:#ffffff12;border-color:#ffffff52;transform:translateY(-1px)}.vibe-chip.active{border-color:var(--pitch-color);background:var(--pitch-color-dim);color:var(--pitch-color);box-shadow:0 0 14px var(--pitch-glow)}.dice-context-strip{flex-wrap:wrap;justify-content:center;gap:8px;padding:0 8px 18px;display:flex}.dice-context-strip span{color:#ffffffc7;background:#f7c9480e;border:1px solid #f7c94838;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;line-height:1}.dice-roller-module{flex-direction:column;align-items:center;gap:14px;width:100%;padding:14px 12px 12px;display:flex}.dice-row{justify-content:center;align-items:flex-end;gap:36px;display:flex}.dice-wrapper{flex-direction:column;align-items:center;gap:14px;display:flex;position:relative}.dice-type-label{letter-spacing:0;text-transform:uppercase;opacity:.36;margin-bottom:-8px;font-size:10px;font-weight:700}.scene{perspective:720px;width:var(--dice-size);height:calc(var(--dice-size) * 1.62);justify-content:center;align-items:flex-end;display:flex;position:relative}.dice-ground{filter:blur(4px);transform-origin:bottom;will-change:transform, opacity;pointer-events:none;background:radial-gradient(at 50% 100%,#0000008c 0%,#0000 72%);border-radius:50%;width:84%;height:22px;position:absolute;bottom:-14px;left:50%;transform:translate(-50%)scaleY(.35)}.cube{width:var(--dice-size);height:var(--dice-size);transform-style:preserve-3d;cursor:pointer;will-change:transform;outline:none;position:relative;transform:rotateX(8deg)rotateY(-14deg)}.cube-face{width:var(--dice-size);height:var(--dice-size);border:1.5px solid var(--dice-face-border,#ffffff14);border-radius:var(--dice-border-r);backface-visibility:hidden;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:7px;font-size:46px;line-height:1;display:flex;position:absolute;overflow:hidden}.cube-face:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#ffffff17 0%,#0000 52%);position:absolute;inset:0}.face-symbol{line-height:1;display:block}.face-label{letter-spacing:0;text-transform:uppercase;opacity:.72;font-size:10.5px;font-weight:700;line-height:1}.pitch-cube .cube-face{background:var(--pitch-face-bg);color:var(--pitch-color);border-color:var(--pitch-border);text-shadow:0 0 16px #3ce0cb73}.pitch-cube:focus-visible,.pitch-cube:hover{filter:drop-shadow(0 0 18px var(--pitch-glow))}.pitch-cube .cube-face.face-active{border-color:#00f2febf;box-shadow:inset 0 0 34px #00f2fe24}.rhythm-cube .cube-face{background:var(--rhythm-face-bg);color:var(--rhythm-color);border-color:var(--rhythm-border);text-shadow:0 0 16px #edb84e73}.rhythm-cube:focus-visible,.rhythm-cube:hover{filter:drop-shadow(0 0 18px var(--rhythm-glow))}.rhythm-cube .cube-face.face-active{border-color:#f7c948bf;box-shadow:inset 0 0 34px #f7c94824}.cube-face.face-1{transform:translateZ(var(--dice-half))}.cube-face.face-2{transform:rotateY(90deg) translateZ(var(--dice-half))}.cube-face.face-3{transform:rotateY(180deg) translateZ(var(--dice-half))}.cube-face.face-4{transform:rotateY(-90deg) translateZ(var(--dice-half))}.cube-face.face-5{transform:rotateX(-90deg) translateZ(var(--dice-half))}.cube-face.face-6{transform:rotateX(90deg) translateZ(var(--dice-half))}.impact-ripple{width:var(--dice-size);height:var(--dice-size);opacity:0;pointer-events:none;z-index:20;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}#ripple-pitch{border:2px solid var(--pitch-color);box-shadow:0 0 14px var(--pitch-color)}#ripple-rhythm{border:2px solid var(--rhythm-color);box-shadow:0 0 14px var(--rhythm-color)}.dice-btn-group{gap:8px;display:flex}#btn-roll-pitch,#btn-roll-rhythm{font-size:13px;font-weight:700;font-family:var(--font-family);letter-spacing:0;cursor:pointer;border:1.5px solid;border-radius:9px;padding:9px 18px;transition:background .15s,transform .12s,box-shadow .15s}#btn-roll-pitch{background:var(--pitch-color-dim);color:var(--pitch-color);border-color:#00f2fe59}#btn-roll-pitch:hover{box-shadow:0 5px 18px var(--pitch-glow);background:#00f2fe47;transform:translateY(-2px)}#btn-roll-rhythm{background:var(--rhythm-color-dim);color:var(--rhythm-color);border-color:#f7c94859}#btn-roll-rhythm:hover{box-shadow:0 5px 18px var(--rhythm-glow);background:#f7c94847;transform:translateY(-2px)}#btn-roll-pitch:active,#btn-roll-rhythm:active{transform:scale(.95)}#btn-instant-pitch,#btn-instant-rhythm{font-size:12px;font-weight:600;font-family:var(--font-family);cursor:pointer;color:#ffffff7a;background:#ffffff0d;border:1.5px solid #ffffff1a;border-radius:9px;padding:9px 13px;transition:all .14s}#btn-instant-pitch:hover,#btn-instant-rhythm:hover{color:#ffffffd1;background:#ffffff1a;transform:translateY(-1px)}.roll-both-controls{flex-direction:column;align-items:center;gap:10px;display:flex}#btn-roll-both{color:#ffffffe6;font-size:14px;font-weight:700;font-family:var(--font-family);letter-spacing:0;cursor:pointer;background:linear-gradient(135deg,#00f2fe17,#f7c94817);border:1.5px solid #ffffff2e;border-radius:11px;padding:12px 36px;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s}#btn-roll-both:hover{background:linear-gradient(135deg,#00f2fe2e,#f7c9482e);border-color:#ffffff5c;transform:translateY(-2px);box-shadow:0 8px 28px #00000059}#btn-roll-both:active{transform:scale(.97)}.retain-count-toggle{color:#ffffffad;cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff0b;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:8px;min-height:30px;padding:4px 10px 4px 5px;font-size:11px;font-weight:750;display:inline-flex}.retain-count-toggle input{opacity:0;pointer-events:none;position:absolute}.toggle-track{background:#ffffff1f;border:1px solid #ffffff1a;border-radius:999px;width:36px;height:20px;transition:background .16s,border-color .16s,box-shadow .16s;position:relative}.toggle-thumb{background:#ffffffb8;border-radius:50%;width:14px;height:14px;transition:transform .16s,background .16s;position:absolute;top:50%;left:3px;transform:translateY(-50%)}.retain-count-toggle input:checked+.toggle-track{background:linear-gradient(135deg,#00f2fe73,#f7c94875);border-color:#00f2fe59;box-shadow:0 0 16px #00f2fe24}.retain-count-toggle input:checked+.toggle-track .toggle-thumb{background:#06110f;transform:translate(16px,-50%)}.retain-count-toggle:focus-within{outline-offset:2px;outline:2px solid #00f2fe80}.toggle-copy{white-space:nowrap}.shake-hint{opacity:.38;letter-spacing:0;text-align:center;padding:2px 0 6px;font-size:11px;display:none}@media (hover:none) and (pointer:coarse){.shake-hint{display:block}}.shake-hint.permission-needed{opacity:.55;cursor:pointer;text-underline-offset:3px;text-decoration:underline;display:block}#roll-history{width:100%;max-width:360px}.history-label{letter-spacing:0;text-transform:uppercase;opacity:.28;margin-bottom:7px;padding-left:2px;font-size:9.5px;font-weight:700}.roll-history-scroll{scrollbar-width:none;-ms-overflow-style:none;width:100%;overflow-x:auto}.roll-history-scroll::-webkit-scrollbar{display:none}#roll-history-inner{gap:7px;min-width:max-content;padding:2px 2px 6px;display:flex}.history-chip{cursor:pointer;white-space:nowrap;color:#ffffff8c;-webkit-tap-highlight-color:transparent;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:5px;padding:5px 10px;font-size:14px;line-height:1;transition:background .14s,border-color .14s,color .14s;display:inline-flex}.history-chip:hover{color:#ffffffe0;background:#ffffff17;border-color:#ffffff3d}.history-chip.chip-flash{background:#ffffff2e;border-color:#ffffff80}.history-chip .chip-pitch{color:var(--pitch-color)}.history-chip .chip-rhythm{color:var(--rhythm-color)}.history-chip .chip-divider{opacity:.25;font-size:10px}.history-chip .chip-time{opacity:.3;margin-left:2px;font-size:10px}.history-empty{opacity:.25;letter-spacing:0;padding:4px 2px;font-size:11px}#roll-result-card{opacity:0;pointer-events:none;background:linear-gradient(135deg,#00f2fe0a,#f7c9480a);border:1px solid #ffffff1a;border-radius:13px;width:100%;max-width:320px;padding:15px 18px;transition:opacity .32s,transform .32s;display:none;transform:translateY(10px)scale(.98)}#roll-result-card.visible{opacity:1;pointer-events:auto;display:block;transform:translateY(0)scale(1)}.result-card-eyebrow{letter-spacing:0;text-transform:uppercase;opacity:.3;margin-bottom:9px;font-size:9.5px;font-weight:700}.result-card-combo{flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;display:flex}.result-pill{border-radius:8px;align-items:center;gap:7px;padding:6px 13px;font-size:13px;font-weight:700;display:inline-flex}.result-pill.pitch{background:var(--pitch-color-dim);color:var(--pitch-color);border:1px solid #00f2fe52}.result-pill.rhythm{background:var(--rhythm-color-dim);color:var(--rhythm-color);border:1px solid #f7c94852}.result-plus{opacity:.28;font-size:16px;line-height:1}.result-suggestion{opacity:.62;font-size:12.5px;line-height:1.55}@media (width<=520px){:root{--dice-size:94px;--dice-half:47px}.dice-roller-module{gap:14px;padding:16px 8px 14px}.dice-row{gap:16px}.cube-face{font-size:38px}.face-label{font-size:9px}#btn-roll-both{width:100%;max-width:260px}.roll-both-controls{width:100%}}@media (width>=1180px){.roll-stage .top-dice-module{--dice-size:84px;--dice-half:42px;grid-template-columns:minmax(180px,.72fr) minmax(260px,1fr) minmax(150px,.52fr);grid-template-areas:"head dice both""vibes dice both""context dice both";align-items:center;gap:8px 18px;min-height:0;display:grid}.roll-stage .dice-roller-header{text-align:left;grid-area:head;width:100%}.roll-stage .dice-module-hint{margin-top:.25rem;line-height:1.35}.roll-stage #vibe-filter-strip{grid-area:vibes;justify-content:flex-start;padding:0}.roll-stage .dice-context-strip{grid-area:context;justify-content:flex-start;padding:0}.roll-stage .dice-row{grid-area:dice;gap:28px}.roll-stage .dice-wrapper{gap:10px}.roll-stage .dice-btn-group{gap:6px}.roll-stage #btn-roll-pitch,.roll-stage #btn-roll-rhythm{padding:7px 13px;font-size:12px}.roll-stage #btn-instant-pitch,.roll-stage #btn-instant-rhythm{padding:7px 10px;font-size:11px}.roll-stage .roll-both-controls{grid-area:both;align-self:center}.roll-stage #btn-roll-both{width:100%;padding:11px 18px}.roll-stage #roll-history{display:none}.roll-stage .top-dice-module{--dice-size:104px;--dice-half:52px;min-height:calc(var(--dice-size) + 140px);height:auto;box-shadow:none;background:0 0;border:0;border-radius:0;grid-template-columns:minmax(360px,1fr) minmax(180px,.4fr);grid-template-areas:"dice both";justify-content:stretch;align-items:center;column-gap:clamp(1rem,3vw,3rem);padding:.65rem 1.25rem .55rem 0;display:grid}.roll-stage .dice-roller-header,.roll-stage #vibe-filter-strip,.roll-stage .dice-context-strip,.roll-stage #roll-result-card,.roll-stage #roll-history,.roll-stage .shake-hint{display:none!important}.roll-stage .dice-row{flex-direction:row;grid-area:dice;justify-content:center;align-items:end;gap:clamp(2.25rem,5vw,5.2rem);display:flex}.roll-stage .dice-wrapper{min-height:calc(var(--dice-size) + 136px);gap:.56rem}.roll-stage .scene{width:calc(var(--dice-size) + 34px);height:calc(var(--dice-size) + 64px)}.roll-stage .dice-ground{bottom:7px}.roll-stage .cube-face{font-size:47px}.roll-stage .face-label{font-size:10px}.roll-stage .dice-type-label{color:var(--pitch-color);font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;order:2;font-size:.84rem;font-weight:800}.roll-stage #dice-rhythm-wrapper .dice-type-label{color:var(--rhythm-color)}.roll-stage .dice-btn-group{left:50%;top:calc(var(--dice-size) + 96px);order:3;grid-template-columns:minmax(74px,1fr) 42px;gap:.5rem;width:100%;max-width:154px;display:grid;position:absolute;transform:translate(-50%)}.roll-stage #btn-roll-pitch,.roll-stage #btn-roll-rhythm{letter-spacing:.08em;text-transform:uppercase;border-radius:7px;min-height:42px;padding:.55rem .7rem;font-size:.76rem}.roll-stage #btn-instant-pitch,.roll-stage #btn-instant-rhythm{border-radius:7px;width:42px;min-height:42px;padding:0;font-size:0}.roll-stage #btn-instant-pitch:before,.roll-stage #btn-instant-rhythm:before{content:"⚡";font-size:18px;line-height:1}.roll-stage .roll-both-controls{border-left:1px solid #ffffff14;grid-area:both;align-self:center;gap:.8rem;padding-left:clamp(1rem,2vw,2rem);display:grid}.roll-stage .roll-both-controls:before{content:"Roll";color:#f4f7fbc7;font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;font-weight:900}.roll-stage #btn-roll-both{color:#f4f7fbdb;width:100%;min-height:46px;box-shadow:none;background:0 0;border-color:#ffffff94;border-radius:7px}.roll-stage .retain-count-toggle{justify-content:start}}@media (width<=1179px){.roll-stage .top-dice-module{--dice-size:108px;--dice-half:54px}}