:root{--canvas:#121211;--panel:#1b1a18;--raised:#24231f;--border:#383630;--text:#edeae3;--muted:#9c9891;--paper:#f4f1e9;--ink:#161513;--staff:#6b665d;--accent:#4fa79b;--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,.55fr) minmax(440px,1.8fr) auto minmax(260px,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);text-transform:uppercase;letter-spacing:.08em;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:132px}.connect-panel input.port{width:70px}.offline-toggle{color:var(--muted);align-items:center;gap:6px;font-size:.85rem;display:flex}.status-text{color:var(--muted);font-size:.82rem}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(--accent)}button:disabled{opacity:.48;cursor:default}.how-to-button,.audition-toggle.selected,.key-signatures button.selected,.palette-button.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 32%, var(--raised))}.top-progress{color:var(--muted);grid-template-columns:auto minmax(110px,1fr) auto;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(--accent);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;justify-content:space-between;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(--accent);border-bottom-color:var(--accent);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(--accent);padding:0}.track-volume span{text-align:right}.master-volume{border-top:1px solid var(--border);gap:7px;padding-top:10px;display:grid}.master-volume strong{color:var(--text);font-size:.82rem}.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{min-width:42px}.tempo,.notes-correct{color:var(--muted);white-space:nowrap}.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:clamp(.42rem,.72vw,.62rem);position:absolute;bottom:4px;left:50%;transform:translate(-50%)rotate(-90deg)}.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}.game-layout{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}body{min-width:0}}