:root{--bg: #0f0f1a;--panel: #171726;--line: #2a2a40;--ink: #ecebf3;--mute: #9a99ad;--gold: #c5a059;--gold-soft: rgba(197,160,89,.16);--paper: #f7f4ec;--own: rgba(197,160,89,.13);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.45 Montserrat,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer}h1,h2{font-family:Playfair Display,Georgia,serif;font-weight:500;margin:0}h1{font-size:20px}h1 em{color:var(--gold)}h1 select{font:inherit;font-style:italic;color:var(--gold);background:transparent;border:0;border-bottom:1px dashed var(--gold);padding:0 2px;cursor:pointer}h1 select option{color:#111;font-style:normal}h2{font-size:15px;color:var(--gold);margin:18px 0 8px;letter-spacing:.02em}.top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line);background:#12121f}.brand{display:flex;gap:12px;align-items:center}.mark{width:36px;height:36px;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-family:Playfair Display,serif;border-radius:50%}.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}.own{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.own .lbl{font-size:12px;color:var(--mute);margin-right:4px}.own button,.presets button,.seg button,.ghost{background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 14px}.own button.on,.presets button:hover,.seg button.on{border-color:var(--gold);background:var(--gold-soft);color:#fff}#app{height:100%;display:flex;flex-direction:column}#app>.top,#app>.demo-bar{flex:none}main{display:grid;grid-template-columns:minmax(0,1fr) 380px;flex:1 1 auto;min-height:0}.score-wrap{display:flex;flex-direction:column;min-height:0}.score-wrap>.score{flex:1 1 auto;min-height:0}.score-wrap{min-width:0;padding:16px}.score{height:100%;overflow-y:auto;background:var(--paper);border-radius:10px;color:#111;padding:8px 0}.score svg{display:block;width:100%;height:auto}.score .loading{padding:40px;color:#555}.score g.measure{cursor:pointer}.score g.measure.current>g.staff.own{fill:#000}.score g.staff.own{fill:#1b1b2e}.score g.staff:not(.own){fill:#8a8a94}.score g.staff:not(.own) .lyric{fill:#9a9aa4}.score g.note.playing,.score g.note.playing *{fill:#b5862f!important;stroke:#b5862f!important}.panel{border-left:1px solid var(--line);background:var(--panel);padding:16px 18px 28px;overflow-y:auto}.transport{display:flex;gap:10px;align-items:center}.play{width:54px;height:54px;border-radius:50%;border:0;background:var(--gold);color:#1a1a2e;font-size:20px;flex:none}.pos{flex:1}#bar{font-family:Playfair Display,serif;font-size:20px}#time{color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--gold)}#seek{margin:12px 0 6px}.tempo{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin:4px 0 10px;font-size:13px;color:var(--mute)}.tempo span{margin-right:4px}.tempo button{background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-size:12px}.tempo button.on{border-color:var(--gold);background:var(--gold-soft);color:#fff}.loop{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--mute)}.loop .ghost{padding:4px 12px}.presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}.presets button{border-radius:8px;padding:8px}.hint{color:var(--mute);font-size:12px;min-height:2.6em;margin:6px 0 0}.row{display:grid;grid-template-columns:70px 1fr;grid-template-rows:auto auto;gap:4px 8px;align-items:center;padding:8px 10px;border-radius:8px;margin-bottom:4px}.row .name{font-weight:600;font-size:13px}.row input{grid-column:2}.row.is-own{background:var(--own);outline:1px solid rgba(197,160,89,.35)}.row.is-own .name:after{content:" ★";color:var(--gold)}.seg{display:flex;gap:3px;flex-wrap:nowrap}.seg button{padding:3px 8px;font-size:11.5px;white-space:nowrap}.follow{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mute);margin-top:14px}.note{font-size:11px;color:var(--mute);margin-top:16px}.overlay{position:fixed;inset:0;background:#0a0a12eb;display:grid;place-items:center;z-index:10;padding:16px}.ov-box{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;text-align:center}.ov-title{font-family:Playfair Display,serif;font-size:26px;color:var(--gold);margin-bottom:10px}.bar{height:4px;background:var(--line);border-radius:2px;margin:16px 0 20px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}#start{background:var(--gold);color:#1a1a2e;border:0;border-radius:999px;padding:12px 26px;font-weight:600}#start:disabled{opacity:.4;cursor:default}@media(max-width:900px){#app{height:auto;display:block}main{display:flex;flex-direction:column;height:auto}.score-wrap>.score{flex:none}.score-wrap{padding:10px}.score{height:58vh}.panel{border-left:0;border-top:1px solid var(--line)}.top{padding:10px 16px}h1{font-size:17px}}.gate{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px 16px}.gate-card{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:14px;padding:32px 28px;display:flex;flex-direction:column;gap:10px}.gate-card .mark{margin-bottom:6px}.gate-card h1{font-size:28px;color:var(--ink)}.gate-card p{margin:0;color:var(--mute)}.gate-work{color:var(--gold)!important;font-family:Playfair Display,Georgia,serif;font-style:italic;font-size:17px}.gate-card label{margin-top:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.gate-card input{font:500 20px/1.2 Menlo,Consolas,monospace;letter-spacing:2px;text-align:center;color:var(--ink);background:#10101c;border:1px solid var(--line);border-radius:10px;padding:12px;width:100%}.gate-card input:focus{outline:none;border-color:var(--gold)}.gate-error{color:#f0b3a8!important;font-size:14px}.gate-go{margin-top:6px;border:0;border-radius:999px;background:var(--gold);color:#1a1a2e;font-weight:600;padding:13px 18px}.gate-go:disabled{opacity:.6;cursor:default}.gate-help{font-size:13px;margin-top:6px!important}.gate-help a{color:var(--gold)}.kicker .by{color:var(--gold);letter-spacing:.08em}.gate-top{display:flex;justify-content:space-between;align-items:center}.lang{display:inline-flex;gap:2px;margin-left:8px;vertical-align:middle}.lang button{border:1px solid var(--line);background:transparent;color:var(--mute);font-size:11px;letter-spacing:.08em;padding:2px 7px;border-radius:999px}.lang button.on{border-color:var(--gold);color:var(--gold)}.demo-bar{background:var(--gold-soft);border-bottom:1px solid var(--gold);color:var(--ink);padding:8px 20px;font-size:13px;text-align:center}.demo-bar a{color:var(--gold);font-weight:600;margin-left:8px}.works{display:flex;flex-direction:column;gap:8px;margin-top:8px}.work{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;background:#10101c}.work:hover,.work:focus-visible{border-color:var(--gold)}.work strong{font-family:Playfair Display,Georgia,serif;font-weight:500;font-size:17px}.work span{color:var(--mute);font-size:13px}.gate-link{margin-top:10px;background:none;border:0;color:var(--gold);text-decoration:underline;padding:4px 0;align-self:flex-start;font-size:14px}.kicker a.home{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(197,160,89,.5)}