:root{--bg: #0b0f14;--fg: #e8eef2;--muted: #94a3b8;--accent: #22d3ee}[data-theme=light]{--bg: #f8fafc;--fg: #0b1220;--muted: #334155;--accent: #2563eb}[data-theme=sepia]{--bg: #f4ecd8;--fg: #2b1f0f;--muted: #6b4f2c;--accent: #b45309}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji"}.toolbar{position:sticky;top:0;z-index:10;display:flex;gap:12px;padding:10px 12px;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent),var(--bg);align-items:center;border-bottom:1px solid rgba(255,255,255,.06)}.toolbar .left-controls,.toolbar .middle-controls,.toolbar .right-controls{display:flex;align-items:center;gap:10px}.toolbar input[type=range]{vertical-align:middle}.toolbar button,.toolbar select,.toolbar input[type=url],.file-input{background:#ffffff0f;color:var(--fg);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:6px 10px}.toolbar button:hover{border-color:var(--accent)}.file-input input[type=file]{display:none}.layout{height:calc(100% - 56px)}.sidebar .row{display:flex;gap:8px;align-items:center}.sidebar .songs{display:grid;gap:8px}.mapping .row{display:flex;gap:8px;justify-content:space-between;align-items:center}.modal.hidden{display:none}.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:50}.panel{width:min(720px,92vw);background:var(--bg);color:var(--fg);border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 12px 40px #0006}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}.panel-body{padding:16px;display:grid;gap:12px}.panel .secondary{background:#ffffff1a}.learn-status{display:flex;align-items:center;gap:10px}.hint{color:var(--muted);font-size:12px}.stage{position:relative;height:100%}.scroll-viewport{position:absolute;inset:0;overflow:hidden;display:flex;justify-content:center}.content{width:min(1200px,90%);padding:20vh 20px 40vh;will-change:transform}.content:after{content:"";display:block;height:80vh}.content p{margin:0 0 1.2em;line-height:1.25;text-align:center}.overlay.hidden{display:none}.overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center}.overlay-card{background:#14181ce6;color:var(--fg);padding:24px 28px;border:1px solid rgba(255,255,255,.1);border-radius:12px;display:grid;gap:10px;text-align:center}.overlay .spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}.overlay .msg{font-size:16px}.overlay .sub{font-size:12px;color:var(--muted)}@keyframes spin{to{transform:rotate(360deg)}}.lighting-section{border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:16px;margin-bottom:16px}.lighting-section h4{margin:0 0 12px;color:var(--accent);font-size:14px;font-weight:600}.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}.preset-btn{background:#ffffff14;color:var(--fg);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:8px 12px;cursor:pointer;transition:all .2s ease}.preset-btn:hover{background:#ffffff1f;border-color:var(--accent)}.preset-btn:active{background:var(--accent);color:var(--bg)}.channel-controls .row{display:flex;align-items:center;gap:12px;margin-bottom:8px}.channel-controls input[type=range]{flex:1;min-width:120px}.channel-controls span{min-width:30px;text-align:right;font-family:monospace;font-size:12px}.lighting-status{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#ffffff0a;border-radius:6px;border:1px solid rgba(255,255,255,.08)}.lighting-status span{font-family:monospace;font-size:12px}.lighting-section.hidden{display:none}