:root{--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-deep:#070a12;--bg-surface:#0e1424;--bg-card:#0f172ab8;--bg-card-hover:#16213ed9;--border-subtle:#ffffff14;--border-glow:#10b98166;--emerald:#10b981;--emerald-light:#34d399;--emerald-glow:#10b98159;--cyan:#06b6d4;--cyan-glow:#06b6d459;--violet:#8b5cf6;--violet-glow:#8b5cf659;--amber:#f59e0b;--rose:#f43f5e;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-full:9999px;--shadow-glow:0 0 35px #10b9812e;--shadow-card:0 12px 32px -4px #00000073}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background-color:var(--bg-deep);width:100%;min-height:100%;color:var(--text-main);font-family:var(--font-sans);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;line-height:1.5;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 20% 30%,#10b98112 0%,#0000 45%),radial-gradient(circle at 80% 70%,#06b6d40f 0%,#0000 45%),radial-gradient(circle,#8b5cf60d 0%,#0000 55%);width:140%;height:140%;position:fixed;top:-20%;left:-20%}#root{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}button,.step-orb,.note-chip,.btn-icon{touch-action:manipulation}.app-container{flex-direction:column;gap:1.25rem;width:100%;max-width:940px;margin:0 auto;padding:1rem 1.25rem 3rem;display:flex}.app-header{background:var(--bg-card);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.brand-section{align-items:center;gap:.75rem;display:flex}.brand-logo-icon{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--emerald) 0%, var(--cyan) 100%);color:#fff;width:42px;height:42px;box-shadow:0 4px 15px var(--emerald-glow);flex-shrink:0;justify-content:center;align-items:center;display:flex}.brand-title{letter-spacing:-.02em;background:linear-gradient(120deg, #fff 30%, var(--emerald-light) 90%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.35rem;font-weight:800}.hacktober-tag{text-transform:uppercase;letter-spacing:.08em;border-radius:var(--radius-full);color:var(--emerald-light);background:#10b9811f;border:1px solid #10b9814d;padding:2px 8px;font-size:.68rem;font-weight:600}.header-actions{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.btn-icon{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);width:38px;height:38px;color:var(--text-muted);cursor:pointer;background:#ffffff0a;justify-content:center;align-items:center;transition:all .2s;display:flex}.btn-icon:hover{color:var(--text-main);background:#ffffff17;border-color:#ffffff2e;transform:translateY(-1px)}.btn-icon.active{color:var(--emerald-light);background:#10b98126;border-color:#10b98166}.btn-primary{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--emerald) 0%, #059669 100%);color:#fff;cursor:pointer;box-shadow:0 4px 14px var(--emerald-glow);border:none;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.9rem;font-weight:600;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10b98173}.btn-primary:active{transform:translateY(0)}.btn-secondary{border-radius:var(--radius-md);color:var(--text-main);border:1px solid var(--border-subtle);cursor:pointer;background:#ffffff0f;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-secondary:hover{background:#ffffff1f;border-color:#fff3}.conductor-card{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.25rem;position:relative;overflow:hidden}.conductor-card:before{content:"";background:linear-gradient(90deg, var(--emerald), var(--cyan), var(--violet));height:3px;position:absolute;top:0;left:0;right:0}.conductor-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.conductor-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full);color:#c4b5fd;background:#8b5cf626;border:1px solid #8b5cf659;align-items:center;gap:.4rem;padding:3px 10px;font-size:.75rem;font-weight:700;display:inline-flex}.conductor-badge.live{color:var(--emerald-light);background:#10b98126;border-color:#10b98166}.pulse-dot{background-color:var(--emerald);width:7px;height:7px;box-shadow:0 0 8px var(--emerald);border-radius:50%;animation:1.5s infinite blinkDot}@keyframes blinkDot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}.conductor-mood-title{color:#fff;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;display:flex}.conductor-quote{color:var(--text-muted);margin-bottom:.9rem;font-size:.92rem;font-style:italic;line-height:1.45}.scale-chips-row{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.scale-label{color:var(--text-dim);text-transform:uppercase;margin-right:.25rem;font-size:.75rem;font-weight:600}.note-chip{font-family:var(--font-mono);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);color:var(--text-main);background:#ffffff0d;padding:3px 9px;font-size:.8rem;font-weight:600;transition:all .2s}.note-chip.active{border-color:var(--emerald);color:#fff;box-shadow:0 0 10px var(--emerald-glow);background:#10b98140;transform:translateY(-2px)}.soundstage-card{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);flex-direction:column;justify-content:center;align-items:center;padding:2.25rem 1.5rem;display:flex;position:relative;overflow:hidden}.orb-wrapper{justify-content:center;align-items:center;width:250px;height:250px;margin-bottom:1.5rem;display:flex;position:relative}.pulse-ring{pointer-events:none;border:1px solid #10b98140;border-radius:50%;width:100%;height:100%;transition:all .4s cubic-bezier(.16,1,.3,1);position:absolute}.pulse-ring.ring-1{transform:scale(1)}.pulse-ring.ring-2{border-color:#06b6d42e;transform:scale(1.22)}.pulse-ring.ring-3{border-color:#8b5cf61f;transform:scale(1.44)}.orb-wrapper.stepping .pulse-ring.ring-1{animation:.45s ease-out ringPop1}.orb-wrapper.stepping .pulse-ring.ring-2{animation:.5s ease-out ringPop2}.orb-wrapper.stepping .pulse-ring.ring-3{animation:.6s ease-out ringPop3}@keyframes ringPop1{0%{border-color:var(--emerald-light);box-shadow:0 0 25px var(--emerald-glow);transform:scale(1)}to{border-color:#10b9811a;transform:scale(1.15)}}@keyframes ringPop2{0%{border-color:var(--cyan);box-shadow:0 0 25px var(--cyan-glow);transform:scale(1.2)}to{border-color:#06b6d40d;transform:scale(1.35)}}@keyframes ringPop3{0%{border-color:var(--violet);transform:scale(1.4)}to{border-color:#8b5cf605;transform:scale(1.58)}}.step-orb{cursor:pointer;z-index:2;background:radial-gradient(circle at 35% 35%,#1f2d4d 0%,#0c1220 85%);border:2px solid #10b98166;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:180px;height:180px;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;position:relative;box-shadow:0 10px 30px #0009,inset 0 0 25px #10b98126}.step-orb:hover{border-color:var(--emerald-light);box-shadow:0 12px 35px #000000b3, 0 0 30px var(--emerald-glow);transform:scale(1.03)}.step-orb:active,.step-orb.active-pulse{box-shadow:0 0 40px var(--emerald-glow);border-color:#fff;transform:scale(.95)}.step-number{font-family:var(--font-mono);color:#fff;letter-spacing:-.04em;text-shadow:0 2px 10px #00000080;font-size:2.85rem;font-weight:800;line-height:1}.step-label{text-transform:uppercase;letter-spacing:.12em;color:var(--emerald-light);margin-top:4px;font-size:.75rem;font-weight:700}.step-last-note{font-family:var(--font-mono);color:var(--cyan);border-radius:var(--radius-full);background:#06b6d426;margin-top:6px;padding:2px 8px;font-size:.8rem;font-weight:600}.telemetry-grid{grid-template-columns:repeat(4,1fr);gap:.9rem;width:100%;display:grid}.metric-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff08;flex-direction:column;gap:.35rem;padding:.9rem;display:flex}.metric-header{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);align-items:center;gap:.4rem;font-size:.74rem;font-weight:600;display:flex}.metric-value{font-family:var(--font-mono);color:#fff;letter-spacing:-.02em;font-size:1.45rem;font-weight:700}.metric-sub{color:var(--text-muted);font-size:.74rem}.cadence-gauge-bar{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:6px;margin-top:4px;overflow:hidden}.cadence-gauge-fill{border-radius:var(--radius-full);background:linear-gradient(90deg, var(--cyan), var(--emerald), var(--amber));height:100%;transition:width .3s}.controls-card{background:var(--bg-card);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);flex-direction:column;gap:1rem;padding:1.1rem 1.25rem;display:flex}.controls-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.simulator-controls{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.tempo-slider-group{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.82rem;display:flex}.tempo-slider{accent-color:var(--emerald);cursor:pointer}.presets-row{border-top:1px solid var(--border-subtle);flex-wrap:wrap;align-items:center;gap:.5rem;padding-top:.4rem;display:flex}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background:#000000c7;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-lg);background:#0f172a;border:1px solid #ffffff1f;width:100%;max-width:520px;animation:.25s cubic-bezier(.16,1,.3,1) modalIn;overflow:hidden;box-shadow:0 20px 45px #000000b3}@keyframes modalIn{0%{opacity:0;transform:scale(.94)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;display:flex}.modal-title{color:#fff;font-size:1.2rem;font-weight:700}.modal-body{flex-direction:column;gap:1.2rem;max-height:75vh;padding:1.5rem;display:flex;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-subtle);justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.5rem;display:flex}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-label{color:var(--text-muted);font-size:.82rem;font-weight:600}.form-input,.form-select{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:#fff;font-family:var(--font-sans);background:#ffffff0d;outline:none;padding:.65rem .85rem;font-size:.9rem;transition:all .2s}.form-input:focus,.form-select:focus{border-color:var(--emerald);box-shadow:0 0 0 2px var(--emerald-glow)}.form-help{color:var(--text-dim);font-size:.75rem;line-height:1.4}.replay-progress-bar{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:8px;margin:.5rem 0;overflow:hidden}.replay-progress-fill{background:linear-gradient(90deg, var(--emerald), var(--cyan), var(--violet));border-radius:var(--radius-full);height:100%;transition:width .1s linear}.pocket-mode{z-index:999;-webkit-user-select:none;user-select:none;background:#000;flex-direction:column;justify-content:space-between;padding:2rem 1.5rem;display:flex;position:fixed;inset:0}.pocket-mode-header{color:#334155;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600;display:flex}.pocket-tap-surface{cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.pocket-step-count{font-family:var(--font-mono);color:#10b981;font-size:4.5rem;font-weight:800;line-height:1}.pocket-subtext{color:#475569;text-transform:uppercase;letter-spacing:.1em;margin-top:.5rem;font-size:.95rem}.pocket-mode-footer{justify-content:center;align-items:center;display:flex}@media screen and (width<=768px){.app-container{gap:1rem;padding:.75rem 1rem 2.5rem}.soundstage-card{padding:1.75rem 1rem}.orb-wrapper{width:220px;height:220px;margin-bottom:1.25rem}.step-orb{width:160px;height:160px}.step-number{font-size:2.5rem}.telemetry-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.controls-row{flex-direction:column;align-items:stretch;gap:.75rem}.simulator-controls{justify-content:stretch;width:100%}.simulator-controls .btn-primary,.simulator-controls .btn-secondary{flex:1;justify-content:center}}@media screen and (width<=520px){:root{--radius-lg:16px;--radius-md:12px}.app-container{gap:.85rem;padding:.5rem .65rem 2.5rem}.app-header{padding:.6rem .75rem}.brand-logo-icon{width:36px;height:36px}.brand-title{font-size:1.15rem}.hacktober-tag{display:none}.btn-icon{width:36px;height:36px}.conductor-card{padding:1rem}.conductor-header{flex-direction:column;align-items:flex-start;gap:.4rem}.conductor-mood-title{font-size:1.05rem}.conductor-quote{margin-bottom:.75rem;font-size:.82rem;line-height:1.4}.scale-chips-row{gap:.3rem}.note-chip{padding:2px 7px;font-size:.74rem}.soundstage-card{padding:1.5rem .75rem}.orb-wrapper{width:185px;height:185px;margin-bottom:1.1rem}.step-orb{width:135px;height:135px}.step-number{font-size:2.15rem}.step-label{font-size:.68rem}.step-last-note{padding:1px 6px;font-size:.72rem}.pulse-ring.ring-2{transform:scale(1.18)}.pulse-ring.ring-3{transform:scale(1.36)}.telemetry-grid{grid-template-columns:repeat(2,1fr);gap:.55rem}.metric-card{gap:.2rem;padding:.65rem .75rem}.metric-header{font-size:.68rem}.metric-value{font-size:1.2rem}.metric-sub{font-size:.68rem}.controls-card{gap:.75rem;padding:.9rem}.simulator-controls{flex-direction:column;gap:.5rem;width:100%}.simulator-controls .btn-primary,.simulator-controls .btn-secondary{justify-content:center;width:100%;padding:.65rem 1rem;font-size:.88rem}.tempo-slider-group{justify-content:space-between;width:100%}.tempo-slider{flex:1;margin:0 .5rem}.presets-row{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;align-items:center;gap:.4rem;width:100%;padding-bottom:6px;display:flex;overflow-x:auto}.presets-row::-webkit-scrollbar{display:none}.presets-row .note-chip{white-space:nowrap;flex-shrink:0}.modal-content{border-radius:var(--radius-md);max-width:95%}.modal-header{padding:1rem 1.15rem}.modal-body{gap:.9rem;max-height:80vh;padding:1.15rem}.modal-footer{flex-direction:column-reverse;padding:.85rem 1.15rem}.modal-footer .btn-primary,.modal-footer .btn-secondary{justify-content:center;width:100%}.pocket-mode{padding:1.5rem 1rem;padding-top:max(1.5rem, env(safe-area-inset-top));padding-bottom:max(1.5rem, env(safe-area-inset-bottom))}.pocket-step-count{font-size:3.8rem}}@media screen and (width<=360px){.brand-title{font-size:1.05rem}.orb-wrapper{width:160px;height:160px}.step-orb{width:120px;height:120px}.step-number{font-size:1.85rem}.telemetry-grid{grid-template-columns:1fr 1fr;gap:.4rem}}