:root{ --bg:#0b0f17; --panel:#131a24; --text:#e6edf3; --muted:#93a1b3; --accent:#22d3ee; --ok:#3fb950; --danger:#ff6b6b; --stroke:#1f2937; --glow:0 0 0 transparent; }
html[data-theme="neon"]{ --bg:#05060a; --panel:#070a14; --text:#d9e7ff; --muted:#7aa2ff; --accent:#7c4dff; --ok:#00ffa2; --danger:#ff5f9e; --stroke:#23263a; --glow:0 0 24px #7c4dff66, 0 0 48px #7c4dff33; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",Helvetica,Arial}

/* Header */
.sheet-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15));backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke);padding:10px 12px;z-index:5;display:flex;gap:12px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--stroke);border-radius:999px;overflow:hidden}
.seg button{padding:8px 14px;background:transparent;color:var(--muted);border:0;cursor:pointer}
.seg button.active{background:var(--panel);color:var(--text);box-shadow:var(--glow)}
.switch{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--stroke);border-radius:999px;padding:6px 10px;cursor:pointer}
.switch .dot{width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:var(--glow)}
.fab{margin-left:auto;display:inline-flex;gap:8px}
.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--stroke);background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:var(--glow);transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease}
.iconbtn:hover{transform:translateY(-1px) scale(1.06); box-shadow:0 10px 30px rgba(0,0,0,.35), var(--glow); border-color:#334155; background:linear-gradient(180deg,#111827,#0f172a)}
.iconbtn:active{transform:translateY(0) scale(.98)}
.seg button{transition:background .2s ease,color .2s ease}
.switch{transition:background .2s ease,border-color .2s ease}
.switch:hover{border-color:#334155}
.pill{background:#0f1624;border:1px solid var(--stroke);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}
.timeline-inline{flex:1;display:flex;align-items:center;gap:10px;min-width:220px;max-width:480px;margin:0 10px;}
.timeline-label{font-size:12px;color:var(--muted);white-space:nowrap}
.timeline-range{flex:1;appearance:none;height:6px;border-radius:999px;background:#0f1624;outline:none;border:1px solid var(--stroke)}
.timeline-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:1px solid #0ea5b7;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.timeline-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:1px solid #0ea5b7;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.timeline-time{font-size:12px;color:var(--muted);white-space:nowrap}

/* Learn mode UI toggles */
body.learn #mode-toggle{display:none}
body.learn #gear, body.learn #render{display:none}
body.learn #learnBtn{background:var(--panel); color:var(--text)}
body.learn #score-wrap{display:none !important}

/* Learn HUD */
.learn-hud{position:absolute; left:16px; top:16px; right:16px; height:48px; display:none; gap:12px; align-items:center; pointer-events:none; z-index:4}
.learn-hud[aria-hidden="true"]{display:none}
.learn .learn-hud[aria-hidden="false"]{display:flex}
.learn-hud::before{content:'LEARN MODE'; font-weight:800; letter-spacing:.08em; color:var(--muted); background:#0f1624; border:1px solid var(--stroke); padding:8px 12px; border-radius:10px; box-shadow:var(--glow)}

/* Main & Stage */
html,body{height:100%}
.sheet-main{max-width:none;margin:0;padding:12px;height:calc(100vh - 64px);width:100vw;display:grid}
.sheet-stage{position:relative;height:100%;min-height:0;border:1px solid var(--stroke);border-radius:16px;background:radial-gradient(1200px 600px at 10% -20%, #0d1426, transparent),radial-gradient(900px 400px at 100% 10%, #0b1a2a33, transparent);overflow:hidden}
#score-wrap{position:absolute;inset:0;overflow:auto;padding:16px;display:none}
#score-wrap.show{display:block}
#score svg{width:100%;height:auto}
#score .vf-stavenote,
#score .vf-note,
#score .vf-notehead,
#score .vf-rest,
#score .vf-clef,
#score .vf-keysignature,
#score .vf-timesig,
#score .vf-beam,
#score .vf-barline,
#score .vf-voice{fill:#fff;stroke:#fff}
#score .vf-stave path{stroke:#fff !important}
#score svg path,
#score svg polygon,
#score svg polyline,
#score svg circle,
#score svg ellipse,
#score svg line,
#score svg rect{stroke:#fff !important}
#score svg path,
#score svg polygon,
#score svg polyline,
#score svg circle,
#score svg ellipse{fill:#fff !important}
#score svg rect{fill:transparent !important}
#score svg text{fill:#fff !important;stroke:none !important;color:#fff !important}
#score .score-barline-active path,
#score .score-barline-active line{stroke:var(--accent)!important;filter:drop-shadow(0 0 14px rgba(34,211,238,.6))}

@keyframes scoreNotePulse{
  0%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(34,211,238,0))}
  50%{transform:translateY(-0.6px);filter:drop-shadow(0 0 16px var(--accent))}
  100%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(34,211,238,0))}
}
#score .score-note-active{animation:scoreNotePulse .9s ease-in-out infinite}
#score .score-note-active path,
#score .score-note-active polygon,
#score .score-note-active polyline,
#score .score-note-active circle,
#score .score-note-active ellipse{fill:var(--accent)!important;stroke:var(--accent)!important}

.score-progress-overlay{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .25s ease}
.score-progress-overlay.active{opacity:1}
.score-progress-band{position:absolute;top:12px;bottom:12px;width:150px;border-radius:120px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.22) 25%,rgba(34,211,238,.32) 50%,rgba(34,211,238,.22) 75%,transparent);filter:blur(.6px);opacity:.22;transition:transform .12s ease}
.score-progress-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 14px var(--accent),0 0 28px rgba(34,211,238,.48);transition:transform .08s ease}
html[data-theme="neon"] .score-progress-band{background:linear-gradient(90deg,transparent,rgba(124,77,255,.24) 25%,rgba(124,77,255,.38) 50%,rgba(124,77,255,.24) 75%,transparent);opacity:.28}
html[data-theme="neon"] .score-progress-cursor{box-shadow:0 0 18px var(--accent),0 0 36px rgba(124,77,255,.55)}

.score-placeholder{padding:2.5rem 1.5rem;text-align:center;color:var(--muted);font-size:14px;letter-spacing:.02em}
#roll{position:absolute;inset:0;display:none;}
#roll.show{display:block}
#viz{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}

/* Drawer */
.sheet-drawer{position:fixed;right:16px;top:70px;width:360px;max-width:90vw;max-height:calc(100vh - 90px);overflow-y:auto;background:var(--panel);border:1px solid var(--stroke);border-radius:16px;box-shadow:0 20px 80px #0009;transform:translateY(-8px) scale(.98);opacity:0;pointer-events:none;transition:all .2s ease;z-index:6}
.sheet-drawer.show{opacity:1;transform:none;pointer-events:auto}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px}
.row + .row{border-top:1px solid var(--stroke)}
.label{font-size:13px;color:var(--muted);width:120px}
.input, select{padding:8px 10px;background:#0f131a;border:1px solid var(--stroke);border-radius:10px;color:var(--text)}
.track{display:flex;gap:6px;align-items:center;background:#0f1624;border:1px solid var(--stroke);border-radius:999px;padding:6px 12px;cursor:pointer;transition:background .2s ease,border-color .2s ease, box-shadow .2s ease}
.track input{display:none}
.track span{color:var(--muted);font-weight:600}
.track.on{background:linear-gradient(180deg,#0f1624,#0b1220);border-color:#334155;box-shadow:var(--glow)}
.track.on span{color:var(--text)}
.track.ss-on{border-color:#16a34a; box-shadow:0 0 0 1px rgba(34,197,94,0.35), var(--glow);}
.track.ss-on span{color:#dcfce7;}
.track.dissolve-on{border-color:#22d3ee; box-shadow:0 0 0 1px rgba(34,211,238,0.35), var(--glow);}
.track.dissolve-on span{color:#e0f7ff;}
.btn{appearance:none;border:1px solid var(--stroke);background:#101624;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;transition:transform .12s ease, background .2s ease, border-color .2s ease}
.btn:hover{transform:translateY(-1px); border-color:#334155}
.btn.primary{background:#1b4b7a;border-color:#2b6cb0}
.btn.ok{background:#1e4426;border-color:#2f6f3b}
.btn.danger{background:#4b1e1e;border-color:#7a2e2e}

/* Modern file inputs */
.file-input{width:100%; padding:10px 12px; background:#0f131a; border:1px solid var(--stroke); border-radius:12px; color:var(--text); cursor:pointer}
.file-input:focus{outline:none; border-color:#334155; box-shadow:0 0 0 3px rgba(51,65,85,.35)}
.file-input::file-selector-button{margin-right:12px; padding:10px 14px; border:1px solid #26354a; border-radius:12px; background:linear-gradient(160deg,#1a2333,#0f1624); color:#e5e7eb; font-weight:800; letter-spacing:-0.01em; cursor:pointer; transition:all .15s ease; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.file-input:hover::file-selector-button{border-color:#30435f; background:linear-gradient(160deg,#1f2c3f,#121a2b); transform:translateY(-1px)}
/* Safari/WebKit fallback */
.file-input::-webkit-file-upload-button{margin-right:12px; padding:10px 14px; border:1px solid #26354a; border-radius:12px; background:linear-gradient(160deg,#1a2333,#0f1624); color:#e5e7eb; font-weight:800; letter-spacing:-0.01em; cursor:pointer; transition:all .15s ease; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.file-input:hover::-webkit-file-upload-button{border-color:#30435f; background:linear-gradient(160deg,#1f2c3f,#121a2b); transform:translateY(-1px)}

.sf2-downloader{margin-top:12px;padding:12px;background:rgba(15,23,42,0.65);border:1px solid rgba(148,163,184,0.2);border-radius:12px;display:flex;flex-direction:column;gap:10px}
.sf2-d-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.sf2-d-title{font-weight:700;color:#e5e7eb;margin-top:4px}
.sf2-d-actions{display:flex;gap:8px;align-items:center}
.sf2-d-status{color:#9ca3af;font-size:13px}
.sf2-d-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.sf2-card{padding:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(148,163,184,0.15);border-radius:10px;display:flex;flex-direction:column;gap:6px}
.sf2-card h4{margin:0;font-size:14px;color:#e5e7eb}
.sf2-meta{color:#9ca3af;font-size:12px}
.sf2-card button{align-self:flex-start}
.sf2-d-footer{font-size:12px;color:#9ca3af}
.sf2-d-footer a{color:#38bdf8}

.dev-modal{position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:20}
.dev-modal-inner{background:var(--panel); border:1px solid var(--stroke); border-radius:14px; padding:16px; width:min(420px,90vw); box-shadow:0 20px 60px rgba(0,0,0,0.45)}
.dev-modal-head{display:flex; justify-content:space-between; align-items:center; gap:8px}
.dev-modal-head h3{margin:0; color:var(--text)}
.dev-modal-body{display:flex; gap:8px; margin-top:10px}
.dev-panel .dev-controls{display:flex; gap:10px; align-items:center}
.dev-colorpicker{align-items:flex-start; flex-wrap:wrap}
.dev-colorpicker canvas{border:1px solid var(--stroke); border-radius:10px; background:#0d121a; cursor:crosshair}
.dev-colorpicker #devHue{width:24px; height:140px}
.dev-colorpicker #devSV{width:180px; height:140px}
.dev-preview{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.dev-preview-swatch{width:48px; height:48px; border-radius:12px; border:1px solid var(--stroke); box-shadow:0 10px 30px rgba(0,0,0,0.35)}