:root{color:#10233f;font-synthesis:none;text-rendering:optimizelegibility;--blue-900:#102c57;--blue-700:#195fbd;--blue-600:#2573d9;--blue-100:#dbeafe;--blue-50:#eff6ff;--ink:#10233f;--muted:#6b7c93;--line:#d8e3f0;--surface:#fff;--danger:#c2414c;background:#f3f7fc;font-family:Inter,Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(1440px,100%);min-height:100vh;margin:0 auto;padding:18px clamp(20px,4vw,64px) 12px}.app-header{justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:14px;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand-mark{color:#fff;background:var(--blue-700);border-radius:12px;place-items:center;width:42px;height:42px;font-size:26px;font-weight:600;line-height:1;display:grid}.brand p,.brand h1,.panel-heading p,.panel-heading h2,.summary-copy p,.summary-copy h2,.result-title-group p,.result-title-group h2{margin:0}.brand p{color:var(--blue-700);letter-spacing:.16em;font-size:11px;font-weight:800}.brand h1{letter-spacing:-.04em;margin-top:2px;font-size:23px}.header-actions{align-items:center;gap:14px;display:flex}.header-progress{width:min(320px,34vw)}.header-progress>div:first-child{color:var(--muted);justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:13px;display:flex}.header-progress strong{color:var(--blue-900);font-variant-numeric:tabular-nums}.progress-track{background:#dfe8f3;border-radius:99px;height:7px;overflow:hidden}.progress-track span{border-radius:inherit;background:var(--blue-600);height:100%;transition:width .18s;display:block}.reset-button{color:var(--blue-700);background:#fff;border:1px solid #b9cce2;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700}.reset-button:hover{border-color:var(--blue-600);background:var(--blue-50)}.reset-button:focus-visible{outline-offset:2px;outline:3px solid #2573d933}.practice-board{grid-template-columns:minmax(360px,.9fr) minmax(480px,1.25fr);gap:14px;display:grid}.right-column{grid-template-rows:minmax(320px,1fr) auto;gap:14px;min-width:0;display:grid}.panel{border:1px solid var(--line);background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px #1c487c12}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:18px;min-height:68px;padding:12px 18px;display:flex}.eyebrow{color:var(--blue-700);letter-spacing:.13em;text-transform:uppercase;margin:0 0 4px;font-size:11px;font-weight:800}.panel-heading h2{color:var(--ink);font-size:16px;font-weight:700}.queue-count{color:var(--blue-700);background:var(--blue-50);font-variant-numeric:tabular-nums;border-radius:8px;padding:7px 10px;font-size:13px;font-weight:700}.number-grid{height:480px;position:relative;overflow:hidden}.number-row{background:#fff;border-bottom:1px solid #e5edf6;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;height:48px;padding:0 16px;transition:transform .13s,opacity .13s,background-color .13s;display:grid;position:relative}.number-row:last-child{border-bottom:0}.number-row--current{color:#fff;background:var(--blue-700)}.number-row--empty{color:#b7c3d1;background:#fbfcfe}.number-row strong{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-family:Cascadia Mono,SFMono-Regular,Consolas,monospace;font-size:22px}.row-index{color:#8b9caf;font-variant-numeric:tabular-nums;font-family:Cascadia Mono,Consolas,monospace;font-size:12px}.number-row--current .row-index{color:#bdd9ff}.current-marker{border:1px solid #ffffff61;border-radius:6px;padding:4px 7px;font-size:11px;font-weight:700}.queue-enter-active,.queue-leave-active,.queue-move{transition:transform .13s,opacity .13s}.queue-enter-from{opacity:0;transform:translateY(18px)}.queue-leave-to{opacity:0;transform:translateY(-48px)}.queue-leave-active{z-index:2;width:100%;position:absolute}kbd{width:38px;height:38px;color:var(--blue-700);background:var(--blue-50);border:1px solid #b9cce2;border-bottom-width:3px;border-radius:9px;place-items:center;font-size:22px;font-weight:700;line-height:1;display:grid}.input-panel{flex-direction:column;min-height:320px;display:flex}.input-history{min-height:108px;max-height:150px;color:var(--blue-900);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;flex:1;padding:16px 18px;font-family:Cascadia Mono,SFMono-Regular,Consolas,monospace;font-size:clamp(17px,2vw,22px);line-height:1.8;overflow-y:auto}.history-entry i{color:#95a8bd;margin:0 4px;font-style:normal}.history-entry--wrong{color:var(--danger);text-underline-offset:4px;-webkit-text-decoration:underline #c2414c40;text-decoration:underline #c2414c40;text-decoration-thickness:3px}.history-placeholder{color:#9baabd;font-family:inherit;font-size:14px}.input-shell{border:2px solid var(--blue-600);background:var(--blue-50);border-radius:12px;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:16px;margin:0 18px 16px;padding:9px 12px;transition:border-color .14s,box-shadow .14s;display:grid}.input-shell:focus-within{border-color:var(--blue-700);box-shadow:0 0 0 4px #2573d91f}.input-shell>span{color:var(--blue-700);letter-spacing:.05em;font-size:12px;font-weight:800}.input-shell input{width:100%;min-width:0;color:var(--blue-900);font-variant-numeric:tabular-nums;letter-spacing:.04em;background:0 0;border:0;outline:0;font-family:Cascadia Mono,SFMono-Regular,Consolas,monospace;font-size:clamp(24px,3vw,34px);font-weight:700}.input-shell input::placeholder{color:#b5c4d5}.input-shell small{color:var(--muted);white-space:nowrap;font-size:11px}.input-shell--disabled{background:#f4f6f8;border-color:#bcc9d7}.summary-panel{grid-template-columns:1fr auto;align-items:stretch;min-height:150px;display:grid}.summary-copy{flex-direction:column;justify-content:center;min-width:0;padding:18px 22px;display:flex}.summary-copy h2{color:var(--blue-900);font-variant-numeric:tabular-nums;letter-spacing:-.04em;text-overflow:ellipsis;white-space:nowrap;font-family:Cascadia Mono,SFMono-Regular,Consolas,monospace;font-size:clamp(32px,4vw,50px);overflow:hidden}.summary-copy>p:last-child{color:var(--muted);margin:6px 0 0;font-size:12px}.summary-stats{border-left:1px solid var(--line);grid-template-rows:1fr 1fr;min-width:190px;display:grid}.summary-stats>div{flex-direction:column;justify-content:center;padding:12px 20px;display:flex}.summary-stats>div+div{border-top:1px solid var(--line)}.summary-stats span,.result-metrics span,.score-block>span{color:var(--muted);letter-spacing:.05em;font-size:11px;font-weight:700}.summary-stats strong{color:var(--blue-900);font-variant-numeric:tabular-nums;margin-top:5px;font-size:17px}.result-panel{background:var(--surface);border:1px solid #c9dbee;border-radius:18px;margin-top:0;overflow:hidden;box-shadow:0 12px 32px #1c487c14}.result-overview{grid-template-columns:150px 1fr minmax(310px,auto);align-items:stretch;display:grid}.score-block{color:#fff;background:var(--blue-700);flex-direction:column;justify-content:center;align-items:center;min-height:174px;display:flex}.score-block>span,.score-block small{color:#d9eaff}.score-block strong{font-variant-numeric:tabular-nums;letter-spacing:-.06em;font-size:62px;line-height:1}.score-block small{margin-top:6px;font-size:11px}.result-title-group{flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 28px;display:flex}.result-title-group h2{letter-spacing:-.02em;max-width:520px;font-size:22px}.primary-button{color:#fff;background:var(--blue-700);border:0;border-radius:8px;margin-top:18px;padding:9px 16px;font-weight:700}.primary-button:hover{background:var(--blue-900)}.primary-button:focus-visible{outline-offset:2px;outline:3px solid #2573d94d}.result-metrics{border-left:1px solid var(--line);grid-template-columns:repeat(2,minmax(130px,1fr));display:grid}.result-metrics>div{border-bottom:1px solid var(--line);flex-direction:column;justify-content:center;padding:12px 18px;display:flex}.result-metrics>div:nth-child(odd){border-right:1px solid var(--line)}.result-metrics>div:nth-last-child(-n+1){border-bottom:0}.result-metrics>div:last-child{grid-column:1/-1}.result-metrics strong{color:var(--blue-900);font-variant-numeric:tabular-nums;margin-top:5px;font-size:18px}.error-report{border-top:1px solid var(--line);background:#fbfdff;padding:16px 20px 18px}.error-report__heading{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.error-report h3{margin:0;font-size:15px}.error-report__heading span{color:var(--muted);font-size:12px}.error-report ol{gap:8px;max-height:min(230px,32vh);margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.error-report li,.perfect-message{color:#44556a;background:#fff;border:1px solid #e1e9f2;border-radius:9px;margin:0;padding:11px 13px;font-size:13px}.error-report code{color:var(--danger);font-family:Cascadia Mono,Consolas,monospace;font-size:13px;font-weight:700}.perfect-message{color:var(--blue-700)}.result-enter-active,.result-leave-active{transition:opacity .18s,transform .18s}.result-enter-from,.result-leave-to{opacity:0;transform:translateY(12px)}footer{color:#7e8da0;justify-content:center;align-items:center;gap:10px;padding-top:10px;font-size:11px;display:flex}.footer-separator{background:#9dadbd;border-radius:50%;width:3px;height:3px}@media (width<=920px){.practice-board{grid-template-columns:1fr}.right-column{grid-template-rows:auto auto}.result-overview{grid-template-columns:130px 1fr}.result-metrics{border-top:1px solid var(--line);border-left:0;grid-column:1/-1}}@media (width<=600px){.app-shell{padding:18px 12px}.app-header{flex-direction:column;align-items:flex-start}.header-actions{width:100%}.header-progress{flex:1;width:auto}.practice-board{grid-template-columns:minmax(0,1fr)}.input-shell{grid-template-columns:1fr;gap:5px}.input-shell small{white-space:normal}.summary-panel{grid-template-columns:1fr}.summary-stats{border-top:1px solid var(--line);border-left:0;grid-template-rows:auto;grid-template-columns:1fr 1fr;min-width:0}.summary-stats>div+div{border-top:0;border-left:1px solid var(--line)}.result-overview{grid-template-columns:1fr}.score-block{min-height:140px}.result-metrics{grid-column:auto;grid-template-columns:1fr 1fr}footer{flex-direction:column;align-items:flex-start}.footer-separator{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}