:root{--bg: #101216;--panel: #191c22;--panel2: #20242c;--border: #2c313b;--text: #e8e6e1;--muted: #9aa0ab;--gold: #f0b24a;--gold-dim: #8a6a2f;--good: #58d68d;--warn: #e6c35a}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font-family:Spline Sans,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}input,textarea,[contenteditable]{user-select:text;-webkit-user-select:text}a{color:var(--gold)}button{font:inherit;cursor:pointer}.top{display:flex;align-items:baseline;gap:1rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--border)}.top .logo{width:32px;height:32px;align-self:center;margin-right:-.35rem}.top .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}.wordmark{font-family:Fraunces,serif;font-size:1.45rem;font-weight:900;letter-spacing:.02em}.wm-lick{color:var(--gold)}.tagline{font-family:Fraunces,serif;color:var(--muted);font-size:.9rem;font-style:italic}.pill{margin-left:auto;font-size:.8rem;padding:.25rem .7rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);white-space:nowrap;align-self:center}.pill.on{color:var(--good);border-color:#2e5c3a}.cta{align-self:center;background:var(--gold);color:#1a1405;border:none;border-radius:8px;padding:.45rem .9rem;font-weight:700}.cta:hover{filter:brightness(1.08)}.platform-note{display:flex;align-items:center;gap:1rem;background:#2b2413;border-bottom:1px solid var(--gold-dim);color:var(--warn);padding:.55rem 1.2rem;font-size:.88rem}.platform-note[hidden]{display:none}.platform-note button{margin-left:auto;background:none;border:none;color:var(--warn);font-size:.95rem;padding:.1rem .3rem;opacity:.8}.platform-note button:hover{opacity:1}.grid{display:grid;grid-template-columns:minmax(320px,5fr) minmax(320px,6fr);gap:1rem;padding:1rem 1.2rem;max-width:1180px;width:100%;margin:0 auto}@media(max-width:820px){.grid{grid-template-columns:1fr}}.col{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.8rem;min-width:0}.col-head{display:flex;align-items:baseline;gap:.8rem}.col-head h2{margin:0;font-family:Fraunces,serif;font-size:1.12rem;font-weight:600}.state-text{margin-left:auto;font-size:.8rem;color:var(--muted)}.head-btn{margin-left:auto;background:var(--panel2);border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:.25rem .6rem;font-size:.78rem;white-space:nowrap}.head-btn:hover{color:var(--text);border-color:var(--gold-dim)}.head-btn.active{color:var(--gold);border-color:var(--gold)}.state-text+.head-btn{margin-left:0}.lick-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}.lick-list li{border:1px solid var(--border);background:var(--panel2);border-radius:8px;padding:.35rem .6rem;font-size:.85rem;cursor:pointer;display:flex;gap:.45rem;align-items:baseline}.lick-list li:hover{border-color:var(--gold-dim)}.lick-list li.active{border-color:var(--gold);color:var(--gold)}.lick-list .tag{font-size:.68rem;color:var(--muted)}.lick-list .del{border:none;background:none;color:var(--muted);padding:0;font-size:.8rem}.lick-list .del:hover{color:#e66}.lick-list li.mine{border-style:dashed}.notation-wrap{position:relative}.notation{background:var(--panel2);border:1px solid var(--border);border-radius:10px;min-height:110px;overflow:hidden}.play-btn{position:absolute;top:8px;left:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#101216d9;color:var(--text);font-size:.85rem;line-height:1;display:flex;align-items:center;justify-content:center}.play-btn:hover{border-color:var(--gold-dim);background:#101216f2}.play-btn.playing{background:var(--gold);color:#1a1405}.notation svg{fill:#c6c9ce}.notation svg .abcjs-note,.notation svg .abcjs-rest{cursor:pointer}.gate-grid{display:grid;grid-template-columns:max-content max-content 4.6em max-content;align-items:center;gap:.35rem .6rem;font-size:.85rem;color:var(--muted)}.gate-label{color:var(--text);font-weight:600;padding-right:.4rem}.gate-desc{text-align:right}.gate-grid input{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.2rem .35rem;font:inherit;text-align:right}.src-panel textarea{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;font-family:Spline Sans Mono,ui-monospace,monospace;font-size:.85rem;padding:.5rem;resize:vertical}.src-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.4rem}.src-row button{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.3rem .7rem;font-size:.85rem}.src-row #srcSave{background:var(--gold);border-color:var(--gold);color:#1a1405;font-weight:700}.save-msg{font-size:.8rem;color:var(--muted)}.stats-wrap{overflow-x:auto}.stats-wrap table{border-collapse:collapse;width:100%;font-size:.82rem;font-variant-numeric:tabular-nums}.stats-wrap th,.stats-wrap td{border:1px solid var(--border);padding:.3rem .55rem;text-align:right;white-space:nowrap}.stats-wrap th{color:var(--muted);font-weight:600;background:var(--panel2)}.stats-wrap td:first-child,.stats-wrap th:first-child{text-align:left;font-weight:700}.stats-empty{font-size:.82rem;color:var(--muted)}.pips{display:flex;flex-wrap:wrap;gap:6px;min-height:14px}.pips .pip{width:12px;height:12px;border-radius:50%;background:#30343d;transition:background .08s}.pips .pip.lit{background:var(--gold)}.pips.flash .pip{background:var(--good)}.wheel-wrap{display:flex;justify-content:center}.wheel-wrap svg{width:min(340px,78vw);height:auto}.wheel-wedge{fill:var(--panel2);stroke:var(--bg);stroke-width:.012;cursor:default;transition:fill .15s}.wheel-wedge.done{fill:var(--gold)}.wheel-wedge.part{fill:#f0b24a47}.wheel-wedge.home{stroke:#f0b24a4d;stroke-width:.012}.wheel-label{font-size:.11px;fill:var(--muted);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-weight:600}.wheel-wedge.done+.wheel-label{fill:#1a1405}.wheel-center{fill:var(--text);text-anchor:middle;font-family:Fraunces,serif;font-style:italic;font-weight:900;font-size:.22px}.wheel-center-sub{fill:var(--muted);text-anchor:middle;font-size:.085px}.wheel-wrap.complete .wheel-wedge.done{filter:drop-shadow(0 0 .04px var(--gold))}.banner{border-radius:10px;padding:.6rem .8rem;font-weight:600;font-size:.95rem;line-height:1.35;min-height:calc(2.4825rem + 2px);box-sizing:border-box;border:1px solid transparent;opacity:0;transition:opacity .15s}.banner.show{opacity:1}.banner.good{background:#14301e;border:1px solid #2e5c3a;color:var(--good)}.banner.warn{background:#322a12;border:1px solid #6b5518;color:var(--warn)}.key-chips{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.78rem;font-family:Spline Sans Mono,ui-monospace,monospace}.key-chips[hidden]{display:none}.key-chips .kc{border:1px solid var(--gold-dim);color:var(--gold);border-radius:999px;padding:.15rem .55rem}.session{max-width:1180px;width:100%;margin:0 auto;padding:0 1.2rem .6rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}.session-stats{display:flex;gap:1.4rem;font-size:.88rem;color:var(--muted)}.session-stats b{color:var(--text);font-size:1.05rem}.session-actions{margin-left:auto;display:flex;align-items:center;gap:.9rem}.session-actions button{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.35rem .7rem;font-size:.85rem}.cliff{font-size:.78rem;color:var(--muted)}.piano-row{max-width:1180px;width:100%;margin:0 auto;padding:0 1.2rem .8rem}.piano-note{font-size:.8rem;color:var(--muted);margin-bottom:.4rem}.piano-note .dim{opacity:.7}.vkeys{position:relative;display:flex;height:110px;border-radius:8px;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.vk-w{flex:1;background:#f2efe8;border:1px solid #b9b4a8;border-radius:0 0 5px 5px}.vk-w.down{background:var(--gold)}.vk-b{position:absolute;top:0;width:4.2%;height:62%;background:#23252a;border:1px solid #000;border-radius:0 0 4px 4px;z-index:2}.vk-b.down{background:var(--gold-dim)}.foot{margin-top:auto;display:flex;align-items:center;gap:1rem;padding:.6rem 1.2rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}.vol{display:flex;align-items:center;gap:.4rem}.vol input{width:90px;accent-color:var(--gold)}.linky{background:none;border:none;color:var(--muted);text-decoration:underline;padding:0;font-size:.78rem}.credits{margin-left:auto}.app-modal{background:var(--panel);color:var(--text);border:1px solid var(--gold-dim);border-radius:14px;padding:1.4rem 1.6rem;max-width:30rem;position:relative}.app-modal::backdrop{background:#0009}.share-modal{background:var(--panel);color:var(--text);border:1px solid var(--gold-dim);border-radius:14px;padding:1.3rem 1.4rem 1.4rem;max-width:min(92vw,34rem);position:relative}.share-modal::backdrop{background:#000000b8}.share-h{font-family:Fraunces,serif;font-weight:600;font-size:1.15rem;margin:0 0 .8rem}.share-img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--border);background:var(--bg);aspect-ratio:1200 / 630}.share-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}.share-actions button,.share-actions .share-btn{font:inherit;font-weight:600;border-radius:9px;padding:.5rem .95rem;cursor:pointer;border:1px solid var(--border);background:var(--panel2);color:var(--text);text-decoration:none;display:inline-flex;align-items:center}.share-actions button:hover,.share-actions .share-btn:hover{border-color:var(--gold-dim)}.share-actions .share-primary{background:var(--gold);border-color:var(--gold);color:#1a1405}.share-msg{font-size:.82rem;color:#58d68d;min-height:1.1em;margin:.6rem 0 0}.modal-for{font-size:.9rem;color:var(--muted);font-weight:400}.modal-points{padding-left:1.1rem;line-height:1.55;font-size:.92rem}.modal-points b{color:var(--gold)}.modal-price{font-weight:700}.modal-form{display:flex;gap:.5rem}.modal-form input{flex:1;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.4rem .6rem}.modal-form button{background:var(--gold);border:none;border-radius:8px;color:#1a1405;font-weight:700;padding:.4rem .8rem}.notify-msg{font-size:.82rem;color:var(--good);min-height:1em;margin:.4rem 0 0}.modal-close{position:absolute;top:.6rem;right:.7rem;background:none;border:none;color:var(--muted);font-size:1rem}.src-tabs{display:flex;width:max-content;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:.5rem}.src-tabs button{background:var(--panel2);border:none;color:var(--muted);padding:.3rem .85rem;font-size:.82rem}.src-tabs button.active{background:var(--gold);color:#1a1405;font-weight:700}.src-gui{display:flex;flex-direction:column;gap:.6rem;max-height:24rem;overflow-y:auto;padding-right:2px}.sg-row{border:1px solid var(--border);border-radius:8px;padding:.5rem;background:var(--panel2);display:flex;flex-direction:column;gap:.4rem}.sg-head{display:flex;gap:.5rem;align-items:flex-end}.sg-field{display:flex;flex-direction:column;gap:.15rem;font-size:.68rem;color:var(--muted)}.sg-field input{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.25rem .4rem;font:inherit;font-size:.85rem;width:100%;min-width:0}.sg-title{flex:2;min-width:0}.sg-genre{flex:1;min-width:0}.sg-meter{flex:0 0 4em}.sg-key{flex:0 0 4.5em}.sg-q{flex:0 0 5em}.sg-del{background:none;border:none;color:var(--muted);font-size:.95rem;padding:.2rem .3rem}.sg-del:hover{color:#e66}.sg-body{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-family:Spline Sans Mono,ui-monospace,monospace;font-size:.85rem;padding:.35rem .45rem;resize:vertical}.sg-add{align-self:flex-start;background:var(--panel2);border:1px dashed var(--gold-dim);color:var(--gold);border-radius:8px;padding:.35rem .8rem}.rep-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;font-family:Spline Sans Mono,ui-monospace,monospace;color:var(--muted);max-height:16rem;overflow-y:auto}.rep-log li{border-bottom:1px solid var(--border);padding-bottom:.2rem}.rep-log li.good{color:var(--good)}.rep-log li.warn{color:var(--warn)}.rep-log li.log-lick{color:var(--text);font-family:system-ui,sans-serif;font-weight:600;border-bottom:1px solid var(--gold-dim)}.rep-log .log-t{color:var(--muted);font-size:.7rem;float:right}.mtag{font-size:70%}sup.acc{font-size:68%;vertical-align:super;line-height:0}.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}