*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#06070a;--bg-secondary:#0e101ac7;--bg-tertiary:#161929e6;--glass-border:#ffffff14;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-cyan:#00f2fe;--accent-purple:#9d4edd;--accent-pink:#f36;--accent-green:#10b981;--accent-gold:#fbbf24;--felt-green:#0f8f68;--static-bg:#090b0f;--static-panel:#111318;--static-border:#e2e8f01f;--font-family:"Plus Jakarta Sans", "Inter", system-ui, sans-serif;--font-display:"Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;--font-mono:"SFMono-Regular", "Consolas", monospace;--transition-smooth:all .2s cubic-bezier(.4, 0, .2, 1);--shadow-premium:0 20px 50px #000000bf, inset 0 1px 0 #ffffff14}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);box-sizing:border-box;background-image:linear-gradient(135deg,#0f8f6829 0%,#0000 38%),linear-gradient(315deg,#fbbf241a 0%,#0000 34%),linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:100% 100%,100% 100%,44px 44px,44px 44px;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,.roll-copy h2,.forge-title,.dice-module-title,.control-rack-header{font-family:var(--font-display);letter-spacing:0}#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{border:1px solid var(--glass-border);box-shadow:var(--shadow-premium);background:#0a0e1ca3;border-radius:14px;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;padding:.25rem;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,.mode-btn.active{color:var(--text-primary);background:linear-gradient(135deg,#0f8f6829,#fbbf241a);border-color:#fbbf2447;box-shadow:0 0 14px #fbbf241a}.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:linear-gradient(145deg,#0a1018f0,#0a0c16d6),linear-gradient(135deg,#0f8f6829,#fbbf2414);border:1px solid #fbbf2429;border-radius:18px;box-shadow:0 16px 42px #00000094,inset 0 1px #ffffff14}.roll-stage{grid-template-columns:minmax(0,1fr);gap:.75rem;padding:.85rem;display:grid;position:relative;overflow:hidden}.roll-stage:before{content:"";pointer-events:none;border:1px dashed #fbbf242e;border-radius:14px;position:absolute;inset:8px}.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{background:#fbbf240e;border-color:#fbbf242e;border-radius:10px;justify-content:center;width:36px;height:36px;padding:0}.hero-icon-toolbar .btn-transport:hover{border-color:#fbbf247a;box-shadow:0 0 18px #fbbf2429}.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{background:linear-gradient(135deg,#0f8f681a,#fbbf240e);border:1px solid #fbbf2424;border-radius:16px;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:#04110d!important;background:linear-gradient(135deg, var(--accent-green), var(--accent-gold))!important;border-color:#fbbf24b8!important;box-shadow:0 0 18px #10b98147!important}@media (width<=720px){.scratch-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}.active-pool-dock .active-pool-control{background:#0000002e;border:1px solid #ffffff0f;border-radius:14px;padding:.75rem}.note-palette-dock .note-palette-control{background:linear-gradient(135deg,#00f2fe0e,#0f8f6814);border:1px solid #00f2fe1f;border-radius:14px;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{background:#fbbf240e;border-color:#fbbf242e;justify-content:center;min-height:42px}.melody-action-dock .btn-transport:hover{border-color:#fbbf2480;box-shadow:0 0 16px #fbbf2424}.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:#06110f;background:linear-gradient(135deg, var(--accent-green), var(--accent-gold));border-color:#fbbf2480}.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 #00f2fe40}.btn-primary:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 0 20px #00f2fe8c}.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.is-empty{display:none}.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}.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}.glass-panel:hover{border-color:#ffffff1f}.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 #00f2fe59}.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 #00f2fe59}.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{border-color:var(--accent-cyan);color:var(--text-primary);transform:translateY(-2px);box-shadow:0 4px 10px #00f2fe26}.note-chip.active{border-color:var(--accent-cyan);color:var(--accent-cyan);text-shadow:0 0 8px #00f2fe99;background:linear-gradient(135deg,#00f2fe33,#9d4edd33);box-shadow:0 0 15px #00f2fe59}.active-pool-display{border:1px dashed var(--glass-border);background:#00000059;border-radius:14px;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:46px;max-height:92px;padding:.7rem;display:flex;overflow-y:auto}.pool-badge{color:#7ddfba;font-size:.8rem;font-weight:800;font-family:var(--font-mono);background:#10b9811a;border:1px solid #10b98147;border-radius:8px;padding:.3rem .6rem;box-shadow:0 1px 3px #0000004d}.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 #00f2fe40;box-shadow:0 4px 12px #0006,0 0 8px #00f2fe26}.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 #00f2fea6}.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 #00f2fea6}.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{color:var(--text-secondary);background:linear-gradient(135deg,#00f2fe14,#9d4edd14);border:1px solid #00f2fe29;border-radius:12px;padding:.8rem 1rem;font-size:.88rem;line-height:1.45}.mode-workflow strong{color:var(--accent-cyan)}.phrase-bars-toolbar{background:linear-gradient(135deg,#fbbf2414,#00f2fe0d),#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}.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 #00f2feb3}.percussion-step.active{background:linear-gradient(135deg,#fbbf2461,#00f2fe2e);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:#00f2fe1f;border-color:#00f2fe8c}.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,#00f2fe14,#fbbf240f),#ffffff09;border:1px solid #00f2fe42;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,#00f2fe1c,#9d4edd14),#ffffff06;border:1px solid #00f2fe3d;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,#00f2fe0f),#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:#00f2fe59;transform:translateY(-3px);box-shadow:0 8px 16px #0006,0 0 10px #00f2fe1a}.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:#00f2fe33!important;border:2px dashed #00f2fecc!important;box-shadow:0 0 25px #00f2fe8c,inset 0 0 10px #00f2fe4d!important}@keyframes pulseGlow{0%{transform:scale(1);box-shadow:0 0 15px #00f2fe40}50%{transform:scale(1.02);box-shadow:0 0 30px #00f2feb3}to{transform:scale(1);box-shadow:0 0 15px #00f2fe40}}.timeline-step.downbeat{background:linear-gradient(135deg,#161b2ebf 0%,#0e111ee6 100%);border-left:3px solid #00f2febf}.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}.timeline-step.active-hit .step-indicator{background:var(--accent-pink);border-color:var(--accent-pink);box-shadow:0 0 10px var(--accent-pink), 0 0 4px #fff}.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 #00f2fecc;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:#00f2fe59;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.white:hover{background:linear-gradient(#fcfcfc 0%,#f8fafc 8%,#f1f5f9 94%,#cbd5e1 100%)}.piano-key.white.active{border-bottom-width:1px;transform:translateY(4px);box-shadow:0 0 15px #00f2fea6,inset 0 1px #ffffff80;background:linear-gradient(#dffcff 0%,#a5f3fc 8%,#67e8f9 94%,#0891b2 100%)!important}.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}.piano-key.black:hover{background:linear-gradient(#11131a 0%,#242833 10%,#171a22 90%,#050608 100%)}.piano-key.black.active{border-bottom-width:2px;transform:translateY(5px);box-shadow:0 0 18px #9d4eddbf,inset 1px 1px #ffffff40;background:linear-gradient(#083344 0%,#155e75 10%,#0891b2 90%,#0e7490 100%)!important}.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.white .key-label-simple{color:#47556959}.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 #00f2fe99!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 #00f2feb8!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}.piano-key.black .key-badge.is-root{color:#f59e0b!important;background:#f59e0b26!important}.badge-val{font-size:.72rem;font-weight:800;line-height:1;font-family:var(--font-family)}.piano-key.black .badge-val{font-size:.58rem}.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.in-scale{background:linear-gradient(#f7fff9 0%,#fff 8%,#f0fdf4 80%,#10b9812e 100%);border-bottom:6px solid var(--accent-green)!important}.piano-key.black.in-scale{background:linear-gradient(#07110f 0%,#13231e 10%,#0e1015 80%,#10b9814d 100%);border-bottom:8px solid var(--accent-green)!important}.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:#00f2fe1a;border:1px solid #00f2fe4d;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 #00f2fe66}.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 #00f2fe33, 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%,#00f2fe14 100%);border:1px solid #00f2fe40;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 #00f2fe0d,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:#00f2fe1a;border:1px solid #00f2fe33;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 #00f2fe26;border-color:var(--accent-cyan)!important;color:var(--accent-cyan)!important;background:#00f2fe1f!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 #00f2febf;background:#081a1ceb;border:2px solid #00f2fe7a;box-shadow:inset 0 0 10px #00f2fe26}.pitch-cube:hover .cube-face{background:#0a141ef2;border-color:#00f2fee6;box-shadow:inset 0 0 15px #00f2fe4d,0 0 20px #00f2fe26}.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:#00f2fe14;box-shadow:0 0 10px #00f2fe33}.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 #00f2fe14;color:#fff!important;background:linear-gradient(135deg,#00f2fe2e 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 #00f2fe26!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 #00f2fe26;border-color:var(--accent-cyan)!important;color:var(--accent-cyan)!important;background-color:#00f2fe1f!important;background-image:url("data:image/svg+xml;utf8,<svg fill='%2300f2fe' 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:#00f2fe26;box-shadow:0 0 25px #00f2fef2,inset 0 0 15px #00f2fe66}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(14px);z-index:1000;box-sizing:border-box;background:linear-gradient(#111318fa,#07080cfc),repeating-linear-gradient(90deg,#ffffff09 0 1px,#0000 1px 18px);border-top:1px solid #e2e8f024;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 -18px 42px #000000b8,inset 0 1px #ffffff14,inset 0 3px #fbbf2438}.transport-left{justify-content:center;align-items:center;gap:.32rem;min-width:0;display:flex}.playback-sanctuary{background:linear-gradient(135deg,#10b9812b,#fbbf2414),#030c0ac7;border:1px solid #10b98152;border-radius:10px;flex-wrap:nowrap;padding:.22rem;box-shadow:inset 0 0 0 1px #10b9810f}.bottom-setup-console{background:#ffffff06;border:1px solid #e2e8f014;border-radius:11px;grid-template-columns:minmax(195px,.95fr) minmax(190px,.95fr) minmax(285px,1.2fr) minmax(178px,.76fr);align-items:stretch;gap:.28rem;min-width:0;padding:.12rem;display:grid;overflow:visible}.setup-dock{border:1px solid var(--static-border);background:linear-gradient(#14171cf5,#0c0e12fa);border-radius:9px;align-items:center;gap:.26rem;width:auto;min-width:0;padding:.24rem;display:flex;box-shadow:inset 0 1px #ffffff0a}.setup-harmony-dock{align-items:stretch}body[data-melody-source=scale] .bottom-setup-console{grid-template-columns:minmax(195px,.95fr) minmax(190px,.95fr) minmax(285px,1.2fr) minmax(178px,.76fr)}.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-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:linear-gradient(135deg, var(--accent-green), var(--felt-green))!important;color:#fff!important;border:1px solid #10b981bf!important;padding:.4rem .52rem!important;font-size:.78rem!important;font-weight:800!important;box-shadow:0 4px 18px #10b98157!important}.main-play-btn:hover{transform:translateY(-1px);background:linear-gradient(135deg,#19c994,#0d7656)!important;box-shadow:0 0 22px #10b9819e!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{--dice-size:140px;--dice-half:70px;--dice-border-r:14px;--pitch-color:#00f2fe;--pitch-color-dim:#00f2fe2e;--pitch-glow:#00f2fe47;--pitch-face-bg:linear-gradient(145deg, #081828 0%, #050e18 100%);--pitch-border:#00f2fe38;--rhythm-color:#f7c948;--rhythm-color-dim:#f7c9482e;--rhythm-glow:#f7c94847;--rhythm-face-bg:linear-gradient(145deg, #1a1000 0%, #0d0900 100%);--rhythm-border:#f7c94838}#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:22px;width:100%;padding:28px 12px 18px;display:flex}.dice-row{justify-content:center;align-items:flex-end;gap:44px;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:var(--dice-size);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 22px #00f2febf}.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 22px #f7c948bf}.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:112px;--dice-half:56px}.dice-roller-module{gap:18px;padding:22px 10px 16px}.dice-row{gap:18px}.cube-face{font-size:38px}.face-label{font-size:9px}#btn-roll-both{width:100%;max-width:260px}.roll-both-controls{width:100%}}