:root{--canvas:#121211;--panel:#1b1a18;--raised:#24231f;--border:#383630;--text:#edeae3;--muted:#9c9891;--paper:#f4f1e9;--ink:#161513;--staff:#6b665d;--accent:#4fa79b;--progress:#7fb069;--connection:#76b982;--info:#6f90bf;--warning:#c88a2c;--playhead:#be4f42;--wrong:#be4f42;--pitch:#3f7fcf;--correct:#5fd34f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{background:var(--canvas);min-width:960px;color:var(--text);margin:0}.app{grid-template-rows:auto minmax(0,1fr) auto;gap:10px;width:min(100vw,177.778vh);height:min(100vh,56.25vw);min-height:0;margin:0 auto;padding:12px;display:grid;overflow:hidden}.top-bar{background:var(--panel);border:1px solid var(--border);border-radius:8px;grid-template-columns:minmax(150px,.6fr) minmax(220px,1.2fr) auto minmax(320px,1fr);align-items:center;gap:10px;padding:10px;display:grid}.app-title,.sidebar-title{flex-direction:column;gap:2px;min-width:0;display:flex}.sidebar-title span,.piano-title{color:var(--muted);letter-spacing:0;font-size:.78rem}.app-title strong{color:var(--text);font-size:1.25rem}.sidebar-title strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.connect-panel{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.connect-panel input:not([type=checkbox]){width:120px}.connect-panel input.port{width:66px}.connect-panel.collapsed{flex-wrap:nowrap;min-width:0}.offline-toggle{color:var(--muted);align-items:center;gap:6px;font-size:.85rem;display:flex}.status-dot{background:var(--muted);width:9px;height:9px;box-shadow:0 0 0 3px color-mix(in srgb, var(--muted) 18%, transparent);border-radius:50%;flex:none}.status-dot.connected{background:var(--connection);box-shadow:0 0 0 3px color-mix(in srgb, var(--connection) 22%, transparent)}.status-text{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:.82rem;overflow:hidden}input,select,button{background:var(--raised);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 9px;font-size:.88rem}button{cursor:pointer}button:hover:not(:disabled){border-color:var(--info)}button:disabled{opacity:.48;cursor:default}.note-audio-toggle.selected,.audition-toggle.selected,.key-signatures button.selected,.palette-button.selected{border-color:var(--accent);background:color-mix(in srgb, var(--info) 28%, var(--raised))}.top-actions{justify-content:flex-end;align-items:center;gap:6px;display:flex}.how-to-button{width:32px;min-width:32px;padding:6px 0;font-weight:700}.top-progress{color:var(--muted);grid-template-columns:52px minmax(130px,1fr) 158px;align-items:center;gap:8px;min-width:0;font-size:.85rem;display:grid}.progress-bar{background:var(--canvas);border:1px solid var(--border);border-radius:999px;height:12px;overflow:hidden}.progress-bar>div{background:var(--progress);height:100%}.modal-backdrop{z-index:80;background:#121211ad;place-items:center;display:grid;position:fixed;inset:0}.how-to-modal{background:var(--panel);border:1px solid var(--border);border-radius:8px;width:min(620px,90vw);padding:16px;box-shadow:0 18px 40px #0000006b}.modal-title-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.how-to-modal p{color:var(--text);margin:14px 0 0;line-height:1.45}.game-layout{grid-template-columns:minmax(120px,.55fr) minmax(0,5fr);gap:10px;min-height:0;display:grid;overflow:hidden}.song-sidebar,.score-workspace,.piano-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px}.song-sidebar{flex-direction:column;gap:10px;min-width:0;padding:10px;display:flex;overflow:hidden}.title-guess{grid-template-columns:1fr auto;gap:6px;display:grid}.title-guess input{background:var(--canvas);min-width:0}.track-picker{flex-direction:column;flex:1;gap:12px;width:100%;min-height:0;display:flex}.track-instruments{flex-direction:column;gap:8px;display:flex}.track-instrument{border-bottom:1px solid var(--border);padding-bottom:6px}.track-instrument.unlocked{color:var(--text);font-weight:700}.track-instrument.melody{color:var(--info);border-bottom-color:var(--info);font-weight:800}.track-volume{color:var(--muted);grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:6px;font-size:.72rem;display:grid}.track-volume input{width:100%;min-width:0;accent-color:var(--info);padding:0}.track-volume span{text-align:right}.sidebar-spacer{flex:auto;min-height:10px}.master-volume{border-top:1px solid var(--border);gap:7px;padding-top:10px;display:grid}.master-volume-title{justify-content:space-between;align-items:center;gap:8px;display:flex}.master-volume strong{color:var(--text);font-size:.82rem}.master-volume button.selected{border-color:var(--warning);background:color-mix(in srgb, var(--warning) 28%, var(--raised))}.server-feed{border-top:1px solid var(--border);gap:6px;min-height:96px;padding-top:10px;display:grid}.server-feed strong{font-size:.82rem}.server-feed-lines{min-height:0;color:var(--muted);flex-direction:column;gap:3px;font-family:Consolas,Cascadia Mono,monospace;font-size:.72rem;line-height:1.25;display:flex;overflow:hidden}.server-feed-lines span:before{content:"> ";color:var(--connection)}.server-feed-empty{font-family:Segoe UI,system-ui,sans-serif;font-size:.76rem}.track-instrument.locked{color:var(--muted);opacity:.58;font-style:italic}.score-workspace{grid-template-rows:auto minmax(0,1fr);gap:8px;min-width:0;min-height:0;padding:10px;display:grid;overflow:hidden}.score-toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.transport,.palette,.history-buttons,.key-signatures{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.transport-button{justify-content:center;align-items:center;min-width:42px;min-height:33px;line-height:1;display:inline-flex}.tempo,.notes-correct,.notes-correct-count{color:var(--muted);white-space:nowrap}.notes-correct-count{text-align:right}.mix-select select{min-width:118px}.palette-button{flex-direction:column;align-items:center;gap:1px;min-width:42px;padding:4px 6px 3px;display:flex;position:relative}.palette-button .note-icon{display:block}.palette-button .hotkey{color:var(--muted);font-size:.65rem}.palette-button.locked{opacity:.45}.palette-button .lock{font-size:.7rem;position:absolute;top:2px;right:4px}.key-signatures .locked{opacity:.45}.score-audition-frame{height:100%;min-height:0;transition:filter .12s,opacity .12s}.score-audition-frame.auditioning{filter:grayscale();opacity:.55}.score-scroll{z-index:0;background:var(--paper);border:1px solid var(--border);border-radius:8px;height:100%;min-height:0;position:relative;overflow:auto}.score-inner{cursor:default;-webkit-user-select:none;user-select:none;position:relative}.score-svg{z-index:2;position:relative}.score-svg svg{display:block}.bar-highlight{z-index:0;position:absolute;top:0;bottom:0}.bar-highlight.playing{background:color-mix(in srgb, var(--playhead) 16%, transparent)}.entry-cursor{background:var(--accent);width:3px;box-shadow:0 0 6px var(--accent);z-index:3;pointer-events:none;border-radius:2px;transition:left 80ms ease-out,top 80ms ease-out;position:absolute}.entry-cursor.edit-mode{background:var(--warning);box-shadow:0 0 6px var(--warning)}.playhead-line{background:var(--playhead);width:2px;box-shadow:0 0 5px var(--playhead);z-index:2;pointer-events:none;position:absolute}.note-selection{z-index:1;pointer-events:none;background:color-mix(in srgb, var(--accent) 24%, transparent);border:1px solid color-mix(in srgb, var(--accent) 72%, transparent);border-radius:6px;position:absolute}.drag-selection{z-index:4;pointer-events:none;background:color-mix(in srgb, var(--accent) 20%, transparent);border:1px dashed var(--accent);position:absolute}.complete-banner{text-align:center;color:var(--text);background:color-mix(in srgb, var(--accent) 24%, var(--panel));border:1px solid var(--accent);border-radius:8px;padding:8px 12px;font-size:1rem;font-weight:700}.piano-panel{min-height:126px;padding:9px 10px 10px}.piano-toolbar{justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px;display:flex}.piano-keyboard{height:clamp(86px,12vh,126px);position:relative}.white-key-layer{grid-template-columns:repeat(49,minmax(0,1fr));gap:1px;height:100%;display:grid}.black-key-layer{pointer-events:none;position:absolute;inset:0}.piano-key{border-radius:0 0 4px 4px;min-width:0;padding:0;position:relative;overflow:hidden}.piano-key.white{background:var(--paper);height:100%;color:var(--ink);z-index:1;border-color:#d8d3c8}.piano-key.black{background:var(--ink);width:1.34694%;height:62%;color:var(--text);z-index:3;pointer-events:auto;border-color:#050505;position:absolute;top:0;transform:translate(-50%)}.piano-key.locked{color:#d1ccc2;opacity:1;background:#5d5a54;border-color:#4b4842}.piano-key.black.locked{color:#edeae3;background:#383630;border-color:#24231f}.piano-key.unlocked:hover{outline:2px solid var(--accent);outline-offset:-2px}.piano-key span{transform-origin:50%;white-space:nowrap;pointer-events:none;font-size:.72rem;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.flash{background:color-mix(in srgb, var(--playhead) 28%, var(--panel));border:1px solid var(--playhead);color:var(--text);opacity:0;pointer-events:none;z-index:90;border-radius:8px;padding:8px 18px;transition:opacity .15s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.flash.visible{opacity:1}.file-button{display:none}@media (aspect-ratio<=13/9){.app{width:100vw;height:100vh}.top-bar{grid-template-columns:1fr}}@media (width<=760px){.game-layout{grid-template-rows:minmax(96px,.45fr) minmax(320px,1.55fr);grid-template-columns:1fr}.song-sidebar{overflow:auto}body{min-width:0}}