:root{--bg: #070a0d;--panel: #0f141a;--panel-raised: #161d25;--line: #232c36;--text: #dbe4ee;--text-dim: #8494a4;--accent: #3fb9d6;--accent-strong: #8be5f7;--good: #59d98a;--perfect: #ffd34d;--bad: #ff5b5b;--radius: 6px;--key-size: 4rem;--topbar-height: 4.4rem;--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden;touch-action:manipulation;-webkit-text-size-adjust:100%}@media(hover:none)and (pointer:coarse){input,select,textarea{font-size:16px!important}}#app{position:relative;display:block;height:100vh;width:100vw}.screen{display:none;height:100%;width:100%}.screen[data-active=true]{display:flex;flex-direction:column}button{font:inherit;cursor:pointer;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel-raised);color:var(--text);padding:.5rem .9rem;transition:border-color .12s ease,background .12s ease}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent-strong);color:#04161c;font-weight:700;letter-spacing:.02em}button.chip{padding:.35rem .7rem;font-size:.85rem;font-family:var(--mono)}button.chip[data-selected=true]{background:var(--accent);border-color:var(--accent-strong);color:#04161c;font-weight:700}.button-row{display:flex;gap:.4rem;flex-wrap:wrap}#screen-start{align-items:center;justify-content:center}.start-card{text-align:center;max-width:34rem;padding:2rem}#screen-start .start-card>button{margin:0 .3rem}#screen-calibrate{align-items:center;justify-content:center}.calibrate-card{max-width:32rem}.calibrate-lede{color:var(--text-dim);line-height:1.5;margin:.6rem 0 1.6rem}.calibrate-phase{font-size:1.3rem;font-weight:700;margin:0;min-height:1.6em}.calibrate-progress{font-family:var(--mono);color:var(--text-dim);letter-spacing:.3em;margin:.3rem 0 1.4rem;min-height:1.4em}.calibrate-figures{display:flex;justify-content:center;gap:2.4rem;margin:0 0 .6rem}.calibrate-figures div{text-align:center}.calibrate-figures dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}.calibrate-figures dd{margin:.2rem 0 0;font-family:var(--mono);font-size:1.5rem;font-weight:700}.calibrate-figures dd[data-state=good]{color:var(--good)}.calibrate-figures dd[data-state=warn]{color:var(--perfect)}.calibrate-actions{justify-content:center;margin-top:1.4rem}.title{font-size:clamp(2.6rem,8vw,4.6rem);margin:0;letter-spacing:-.03em;font-weight:800;background:linear-gradient(180deg,var(--accent-strong),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{margin:.2rem 0 1.6rem;color:var(--text-dim);font-style:italic}.hint{color:var(--text-dim);font-size:.85rem;margin-top:.9rem}.high-scores{margin-top:2rem;text-align:left;border-top:1px solid var(--line);padding-top:1rem}.high-scores h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);margin:0 0 .5rem}.high-scores ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.9rem}.high-scores li{display:flex;justify-content:space-between;padding:.15rem 0;color:var(--text-dim)}.high-scores li b{color:var(--text);font-weight:600}.play-screen[data-active=true]{display:grid;grid-template-rows:var(--topbar-height) minmax(0,58fr) minmax(0,42fr);position:relative;gap:.5rem;padding:.6rem}.topbar{display:grid;grid-template-columns:minmax(9rem,1fr) auto minmax(9rem,1fr);align-items:center;gap:.8rem;font-family:var(--mono);overflow:hidden}.bar-left{display:flex;gap:.9rem;align-items:baseline;min-width:0}.bar-right{text-align:right;min-width:0;overflow:hidden;white-space:nowrap}.bar-title{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--text-dim)}.bar-key{color:var(--accent-strong);font-size:var(--key-size);font-weight:800;letter-spacing:-.03em;line-height:1}.bar-hint{margin:0;text-align:center;color:var(--text-dim);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage{min-height:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}#screen-game[data-overlay=true]{grid-template-rows:var(--topbar-height) minmax(0,1fr)}#screen-game[data-overlay=true] .stage,#screen-game[data-overlay=true] .timeline-pane{grid-row:2;grid-column:1}#screen-game[data-overlay=true] .timeline-pane{background:transparent;border-color:transparent;pointer-events:none}.timeline-pane{position:relative;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.timeline-pane canvas,.stage canvas{display:block;width:100%;height:100%}#screen-pregame[data-overlay=true]{grid-template-rows:var(--topbar-height) minmax(0,1fr)}#screen-pregame[data-overlay=true] .timeline-pane,#screen-pregame[data-overlay=true] .setup-overlay{grid-row:2;grid-column:1}.setup-overlay{position:relative;z-index:1;display:grid;grid-template-rows:1fr var(--timeline-band, 50%) 1fr;gap:.5rem;padding:.5rem;min-height:0}#screen-pregame[data-overlay=true] .timeline-pane,.setup-band-spacer{pointer-events:none}.setup-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.5rem;min-height:0}.setup-row-top{align-content:start}.setup-row-bottom{align-content:end;grid-template-columns:1fr auto;align-items:end}.setup-row-bottom .primary{min-width:10rem;align-self:center}.setup-overlay .control-block{background:#0f141aeb;min-height:0;overflow:hidden}.control-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .8rem}.control-block h3{margin:0 0 .45rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim)}.readout{font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin:0 0 .35rem}.note{margin:.45rem 0 0;font-size:.74rem;color:var(--text-dim);line-height:1.4}.meter{height:6px;background:#0a0e12;border:1px solid var(--line);border-radius:3px;overflow:hidden}.meter span{display:block;height:100%;width:0;background:var(--good);transition:width 60ms linear}#pregame-input-state[data-state=error]{color:var(--bad)}#pregame-input-state[data-state=listening]{color:var(--good)}#pregame-input-state[data-state=test],#pregame-input-state[data-state=synth]{color:var(--perfect)}.fingering-row{display:flex;flex-wrap:wrap;gap:.4rem}.fingering-option{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.35rem .45rem .3rem;font-family:var(--mono);font-size:.7rem;line-height:1.2;color:var(--text-dim)}.fingering-option[data-selected=true]{background:var(--accent);border-color:var(--accent-strong);color:#04161c;font-weight:700}.fingering-option .fret-diagram{display:block;margin-bottom:.15rem}.fingering-option .fingering-frets{opacity:.75}.hud-stars{color:var(--perfect);font-weight:700}.hud-score{font-size:1.3rem;font-weight:700}.history{display:flex;gap:3px;list-style:none;margin:0;padding:0}.history-slot{width:1.55rem;height:1.55rem;border:1px solid var(--line);border-radius:3px;background:#0b0f14;display:grid;place-items:center;color:var(--perfect);overflow:hidden}.slot-trophy{display:block;width:1.15rem;height:1.15rem;line-height:0}.history-slot[data-state=current]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.history-slot[data-state=done]{background:var(--panel-raised)}.history-slot[data-state=failed]{border-color:var(--bad);color:var(--bad)}.energy-overlay{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}.input-warning{position:absolute;bottom:.5rem;left:50%;transform:translate(-50%);background:#ff5b5b24;border:1px solid var(--bad);color:var(--bad);padding:.4rem .8rem;border-radius:var(--radius);font-family:var(--mono);font-size:.8rem}#screen-results{align-items:center;justify-content:center}.results-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 2rem;max-width:40rem;text-align:center}.results-card h2{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--text-dim)}.rank{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin:.3rem 0 .2rem;color:var(--perfect)}.results-reason{color:var(--text-dim);font-size:.86rem;margin:0 0 1.2rem}.results-figures{display:flex;justify-content:center;gap:2.2rem;margin:0 0 1.2rem}.results-figures div{text-align:center}.results-figures dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}.results-figures dd{margin:.2rem 0 0;font-family:var(--mono);font-size:1.4rem;font-weight:700}.results-history{justify-content:center;margin-bottom:1.4rem}.results-card .button-row{justify-content:center}#dev-panel{position:fixed;top:.5rem;right:.5rem;width:21rem;max-height:70vh;overflow-y:auto;background:#080b0ff5;border:1px solid var(--accent);border-radius:var(--radius);padding:.6rem .7rem;font-family:var(--mono);font-size:.74rem;z-index:50}#dev-panel[hidden]{display:none}#dev-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;color:var(--accent);letter-spacing:.2em;text-transform:uppercase}#dev-panel header button{padding:0 .4rem;line-height:1;background:none;border:none;color:var(--text-dim)}#dev-readouts{display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;margin:0 0 .6rem}#dev-readouts dt{color:var(--text-dim)}#dev-readouts dd{margin:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dev-controls{display:flex;flex-direction:column;gap:.4rem;border-top:1px solid var(--line);padding-top:.5rem}.dev-controls label{display:flex;justify-content:space-between;align-items:center;gap:.5rem;color:var(--text-dim)}.dev-controls select,.dev-controls input{font:inherit;background:var(--panel-raised);color:var(--text);border:1px solid var(--line);border-radius:3px;padding:.15rem .3rem;max-width:11rem}.mg-table-wrap{overflow-x:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.4rem 0;margin-bottom:.4rem}.mg-table{border-collapse:collapse;font-family:var(--mono);font-size:.72rem;white-space:nowrap}.mg-table th{font-weight:400;color:var(--text-dim);text-align:left;padding:.05rem .3rem}.mg-family-row th{color:var(--text);font-weight:600;text-align:left;padding-top:.35rem}.mg-family-row:first-child th{padding-top:.05rem}.mg-table tbody th[scope=row]{padding-left:.9rem}.mg-table thead th{text-align:center;padding:.05rem .15rem}.mg-table thead th button{background:none;border:1px solid transparent;border-radius:3px;color:var(--text-dim);font:inherit;padding:.05rem .25rem;cursor:pointer}.mg-table thead th button[data-selected=true]{background:var(--accent);border-color:var(--accent-strong);color:#04161c;font-weight:700}.mg-table thead th button[data-current=true]{box-shadow:0 0 0 1px var(--accent-strong) inset;color:var(--accent-strong)}.mg-table thead th button[data-current=true][data-selected=true]{box-shadow:0 0 0 1px var(--text) inset}.mg-table td{text-align:center;padding:.05rem .15rem}.mg-cell{background:none;border:none;color:var(--accent-strong);font:inherit;line-height:1;padding:.05rem .2rem;cursor:pointer}.mg-cell[data-disabled=true]{color:var(--text-dim);opacity:.35}.mg-cell[data-current=true]{background:var(--good);color:#04161c;border-radius:3px;font-weight:700}.mg-cell[data-pulsing=true]{animation:mg-pulse .9s ease-in-out infinite}@keyframes mg-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.3)}}@media(max-width:900px){.bar-hint{display:none}}.preview-exit{position:absolute;top:calc(var(--topbar-height) + .6rem);left:.8rem;z-index:5;font-size:.85rem;font-family:var(--mono);background:#0f141ae6}#screen-editor[data-active=true]{display:grid;grid-template-rows:var(--topbar-height) minmax(0,1fr) auto}.editor-topbar{border-bottom:1px solid var(--line);padding:0 .8rem}.editor-stage{display:grid;grid-template-columns:7.5rem minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;padding:.6rem .8rem;gap:.6rem}#editor-canvas{width:100%;height:100%;display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);user-select:none;touch-action:none}.palette{display:flex;flex-direction:column;gap:.3rem;align-content:start}.palette-chip{display:grid;grid-template-columns:3.2rem 1fr;align-items:center;gap:.4rem;padding:.3rem .4rem;font-size:.72rem;font-family:var(--mono);text-align:left;cursor:grab}.palette-chip[data-selected=true]{border-color:var(--accent-strong);background:var(--panel-raised)}.palette-bar{display:block;height:.7rem;border-radius:2px}.palette-bar[data-duration=whole]{width:100%;background:#bdeef9}.palette-bar[data-duration=half]{width:62%;background:#8be5f7}.palette-bar[data-duration=quarter]{width:40%;background:#5cc9e2}.palette-bar[data-duration=eighth]{width:26%;background:#3fb9d6}.palette-bar[data-duration=eighthTriplet]{width:20%;background:#7f9f5e}.palette-bar[data-duration=sixteenth]{width:14%;background:#2b8ba4}.level-row{display:flex;gap:.4rem;flex-wrap:nowrap;align-items:stretch}.level-slot{display:flex;flex-direction:column;gap:.15rem;transition:transform .12s ease}.level-slot[data-dragging=true]{transition:none;position:relative;z-index:2}.level-handle{padding:.05rem .2rem;font-size:.65rem;line-height:1;letter-spacing:.08em;text-align:center;color:var(--text-dim);background:transparent;border-color:transparent;cursor:grab;touch-action:none;user-select:none}.level-handle:hover{color:var(--text);border-color:var(--line)}.level-slot[data-dragging=true] .level-handle{color:var(--accent-strong);border-color:var(--accent-strong);cursor:grabbing}.editor-controls{display:flex;flex-direction:column;gap:.5rem;padding:.6rem .8rem .8rem;border-top:1px solid var(--line);background:var(--panel)}.editor-row{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-end}.editor-field{display:flex;flex-direction:column;gap:.25rem}.editor-field>span:first-child{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.editor-field-wide{flex:1 1 18rem}.editor-scenario-row,.editor-tempo{display:flex;align-items:center;gap:.35rem}.editor-tempo b{font-family:var(--mono);min-width:2.4rem;text-align:center}.editor-tempo em{color:var(--text-dim);font-style:normal;font-size:.8rem}#editor-family,#editor-scenario,#editor-accuracy{font:inherit;font-size:.9rem;background:var(--panel-raised);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:.35rem .5rem}#editor-scenario{flex:1 1 auto;min-width:8rem}#editor-levels button[data-authored=false]{opacity:.45;border-style:dashed}.editor-premise textarea{font:inherit;font-size:.85rem;line-height:1.4;color:var(--text);background:var(--panel-raised);border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .6rem;resize:vertical;width:100%}.editor-problems{margin:0;padding:.4rem .6rem .4rem 1.6rem;border:1px solid var(--bad);border-radius:var(--radius);background:#ff5b5b14;color:var(--text);font-size:.82rem;max-height:6rem;overflow-y:auto}.editor-problems[data-blocking=false]{border-color:var(--line);background:var(--panel-raised)}#editor-status{color:var(--accent-strong);font-family:var(--mono);font-size:.8rem}