:root{--bg:#0d1117;--panel:#161b22;--panel2:#1c2333;--border:#2a3140;--text:#e6edf3;--muted:#8b949e;--green:#3fb950;--amber:#d29922;--red:#f85149;--blue:#4493f8}*{box-sizing:border-box}body *{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;max-height:999999px}html,body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{background:var(--panel);border-bottom:1px solid var(--border);justify-content:space-between;align-items:baseline;padding:12px 16px;display:flex}.brand{letter-spacing:.06em;font-size:1.05rem;font-weight:700}.brand em{color:var(--amber);font-style:normal}.tagline{color:var(--muted);font-size:.8rem}.main{flex:1;width:100%;max-width:780px;margin:0 auto;padding:16px}.footer{text-align:center;color:var(--muted);padding:10px 0 14px;font-size:12px}.page-title{margin:4px 0 2px;font-size:1.3rem}.page-sub{color:var(--muted);margin:0 0 14px;font-size:.9rem}.muted{color:var(--muted)}.center{text-align:center}.error-text{color:var(--red);font-size:.9rem}.ok-text{color:var(--green);font-size:.95rem}.btn{appearance:none;border:1px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;border-radius:8px;padding:10px 16px;font-size:.95rem}.btn:disabled{opacity:.45;cursor:default}.btn.ghost{color:var(--blue);background:0 0}.wide{width:100%}.row.gap{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.screen-head{align-items:center;gap:12px;display:flex}.screen-head h1{margin:8px 0;font-size:1.15rem}.cards{flex-direction:column;gap:10px;margin-bottom:14px;display:flex}.card{text-align:left;background:var(--panel);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:10px;flex-direction:column;gap:4px;padding:14px;font-size:.95rem;display:flex}.card:hover,.card:focus-visible{border-color:var(--blue)}.card-title{font-size:1rem;font-weight:700}.card-desc{color:var(--muted);font-size:.85rem}.card-meta{color:var(--amber);font-size:.85rem}.hud{color:var(--muted);flex-wrap:wrap;gap:14px;margin:10px 0 4px;font-size:.88rem;display:flex}.status{min-height:1.5em;color:var(--blue);margin:6px 0 10px;font-weight:600}.piano-scroll{-webkit-overflow-scrolling:touch;padding-top:14px;padding-bottom:8px;overflow-x:auto}.piano{filter:drop-shadow(0 7px 12px #00000059);border-radius:0 0 8px 8px;height:190px;display:flex;position:relative}.piano:before{content:"";z-index:3;background:linear-gradient(#2a2d33,#14171c);border-radius:6px 6px 0 0;height:11px;position:absolute;top:-14px;left:0;right:0}.piano:after{content:"";z-index:3;background:#a32e2e;height:3px;position:absolute;top:-4px;left:0;right:0}.key{appearance:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:none;padding:0}.piano[data-phase=playing] .key,.piano:not([data-phase=idle]) .key.deco{pointer-events:none;cursor:default}.key.white:active:not(.deco),.key.black:active:not(.deco){transform:translateY(2px)}.key-label{text-align:center;letter-spacing:.02em;pointer-events:none;font-size:11px;font-weight:600;line-height:1;position:absolute;bottom:6px;left:0;right:0}.key.white .key-label{color:#8b909a}.key.black .key-label{color:#9aa0aa;font-size:9px;bottom:4px}.piano[data-phase=playing],.piano[data-phase=playing] *{transition:none!important;animation:none!important}.key.white{background:linear-gradient(#fff,#f7f6f2 72%,#e8e6df);border:1px solid #9aa0a8;border-radius:0 0 7px 7px;flex:1;margin-right:-1px;position:relative;box-shadow:inset 0 -5px 7px #00000012,inset 2px 0 3px #ffffffb3}.key.white:last-child{margin-right:0}.key.black{z-index:2;background:linear-gradient(#4a4e55 0%,#1a1d22 45%,#000 100%);border:1px solid #000;border-radius:0 0 5px 5px;height:60%;position:absolute;top:0;box-shadow:inset 0 -6px 8px #ffffff17,inset 0 3px 4px #ffffff29,0 3px 5px #00000073}.key.hit{box-shadow:inset 0 -8px 14px #00000059;background:var(--green)!important}.key.miss{box-shadow:inset 0 -8px 14px #00000059;background:var(--red)!important}.key.target{box-shadow:inset 0 0 0 4px var(--green)}.key.black.target{box-shadow:inset 0 0 0 3px var(--green)}.result-panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;margin:12px 0;padding:4px 14px}.result-row{border-bottom:1px solid var(--border);justify-content:space-between;gap:12px;padding:9px 0;display:flex}.result-row:last-child{border-bottom:none}.submit-form{flex-direction:column;gap:8px;margin-bottom:14px;display:flex}.submit-form label{color:var(--muted);font-size:.9rem}.submit-form input{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px 12px;font-size:1rem}.filters{align-items:center;gap:10px;margin:10px 0;display:flex}.filters select{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;font-size:.95rem}.lb-table{border-collapse:collapse;width:100%;font-size:.92rem}.lb-table th,.lb-table td{text-align:left;border-bottom:1px solid var(--border);padding:8px 6px}.lb-table th{color:var(--muted);font-size:.8rem;font-weight:600}.lb-table tr.me td{background:#4493f824}.pager{justify-content:center;align-items:center}