*{box-sizing:border-box;margin:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d0f13;--panel:#171b23;--panel-2:#1f2430;--border:#2c3240;--text:#e8eaf0;--muted:#8b93a5;--accent:#0c8cff;--accent-final:#ff7800;--wrong:#f56;--right:#3ecf6f}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif}button,input{font-family:inherit;font-size:.95rem}.app{grid-template-columns:260px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;gap:22px;padding:22px 16px;display:flex}.brand h1{letter-spacing:.04em;font-size:1.3rem}.brand p{color:var(--muted);margin-top:4px;font-size:.8rem}.sidebar nav{flex-direction:column;gap:6px;display:flex}.sidebar h2{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:6px;font-size:.7rem}.nav-item{text-align:left;color:var(--text);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;flex-direction:column;gap:2px;padding:10px 12px;display:flex}.nav-item:hover{background:var(--panel-2)}.nav-item.sel{background:var(--panel-2);border-color:var(--accent)}.nav-name{font-weight:600}.nav-count{color:var(--muted);font-size:.75rem}.bridge-box{flex-direction:column;gap:10px;margin-top:auto;display:flex}.badge{border:1px solid var(--border);color:var(--muted);text-align:center;border-radius:999px;padding:6px 10px;font-size:.72rem}.badge.on{color:var(--right);border-color:color-mix(in srgb, var(--right) 40%, transparent)}.badge.warn{color:var(--accent-final);border-color:color-mix(in srgb, var(--accent-final) 40%, transparent)}.mode-switch{gap:6px;display:flex}.mode-switch button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:8px;flex:1;padding:7px}.mode-switch button.sel{border-color:var(--accent);color:var(--accent)}.content{flex-direction:column;gap:20px;width:100%;max-width:1180px;padding:28px 26px 40px;display:flex}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:12px;padding:20px;display:flex}.progress-row{justify-content:space-between;display:flex}.progress-bar{background:var(--panel-2);border-radius:999px;height:4px;overflow:hidden}.progress-bar div{background:var(--accent);height:100%;transition:width .3s}.question{font-size:1.4rem;line-height:1.35}.hint,.muted{color:var(--muted);font-size:.85rem}.fb-wrong{color:var(--wrong)}.fb-right{color:var(--right)}.fb-revealed{color:var(--accent-final)}.actions{gap:8px;display:flex}.actions button,.search-bar button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:9px 14px}.actions button:hover,.search-bar button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.results h2{font-size:1.25rem}.results h3{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:6px;font-size:.75rem}.score-hero{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.score-points{color:var(--accent);font-size:3rem;font-weight:700;line-height:1}.score-points span{color:var(--muted);font-size:1.1rem;font-weight:400}.review{flex-direction:column;gap:8px;padding:0;list-style:none;display:flex}.review li{background:var(--panel-2);border-radius:8px;grid-template-columns:160px minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:10px 12px;display:grid}.tag-failed,.tag-retry{text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}.tag-failed{color:var(--wrong)}.tag-retry{color:var(--accent-final)}.review-keys{color:var(--muted);white-space:nowrap;font-family:ui-monospace,Cascadia Mono,monospace;font-size:.85rem}.search-bar{gap:8px;display:flex}.search-bar input{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;flex:1;padding:9px 12px}.result{flex-direction:column;gap:8px;display:flex}.alternatives{flex-direction:column;gap:6px;display:flex}.alternatives button{text-align:left;background:var(--panel-2);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 12px;display:flex}.alternatives button:hover{border-color:var(--accent)}.key-box{border-top:1px solid var(--border);flex-direction:column;gap:10px;padding-top:12px;display:flex}.key-form{flex-direction:column;gap:8px;display:flex}button.link{color:var(--accent);text-align:left;cursor:pointer;background:0 0;border:none;padding:0;font-size:.85rem}button.link:hover{text-decoration:underline}.result-keys{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.chord{align-items:center;gap:6px;display:inline-flex}.then{color:var(--muted);margin-right:4px;font-size:.8rem}kbd{background:var(--panel-2);border:1px solid var(--border);border-bottom-width:3px;border-radius:6px;padding:4px 10px;font-family:inherit}.keyboard{background:var(--panel);border:1px solid var(--border);-webkit-user-select:none;user-select:none;border-radius:14px;flex-direction:column;gap:6px;padding:14px;display:flex}.kb-row{gap:6px;display:flex}.kb-key{background:var(--panel-2);border:1px solid var(--border);min-height:42px;color:var(--muted);white-space:nowrap;border-radius:6px;justify-content:center;align-items:center;padding:0 2px;font-family:inherit;font-size:.7rem;transition:background .15s,color .15s,box-shadow .15s;display:flex;overflow:hidden}.keyboard.clickable .kb-key{cursor:pointer}.keyboard.clickable .kb-key:hover{border-color:var(--accent);color:var(--text)}.kb-gap{min-height:42px}.kb-key.kb-selected{border-color:var(--text);color:var(--text);background:#39415a}.kb-key.kb-active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb, var(--accent) 60%, transparent)}.kb-key.kb-final{background:var(--accent-final);color:#fff;border-color:var(--accent-final);box-shadow:0 0 12px color-mix(in srgb, var(--accent-final) 60%, transparent)}@media (width<=900px){.app{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border)}.kb-key,.kb-gap{min-height:32px}.kb-key{font-size:.55rem}.review li{grid-template-columns:1fr;gap:4px}}