.typing-page{--type-bg:#0b1118;--type-panel:#111c25;--type-border:rgba(125,188,210,.21);background:var(--type-bg);color:#f3f8fa;font-family:var(--font-body)}
.typing-page .site-header{background:rgba(8,19,27,.94)}
.typing-shell{width:min(1360px,100%);margin:auto;padding:clamp(32px,5vw,72px) clamp(20px,6vw,80px) 100px}
.typing-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
.typing-heading h1{font-size:clamp(54px,8vw,116px);letter-spacing:-.07em;line-height:1;margin-bottom:22px}.typing-heading h1 em{color:#69d4e9}
.typing-heading p:not(.eyebrow){color:#acbdca;font-size:18px;line-height:1.6;max-width:630px;margin:0}
.typing-shortcuts-link{display:inline-block;color:#76def0;border-bottom:1px solid currentColor;padding-bottom:7px;margin-top:18px;font-size:15px;font-weight:700}
.typing-record{border-left:1px solid var(--type-border);padding:12px 0 12px 26px;min-width:165px}.typing-record span,.typing-record small{display:block;color:#a9bfcb;font-size:13px}.typing-record strong{display:block;color:#76def0;font-size:clamp(42px,5vw,68px);line-height:1.2;font-variant-numeric:tabular-nums}
.typing-workspace{border:1px solid var(--type-border);border-radius:16px;background:linear-gradient(150deg,#13232d,#0e1922 70%);padding:clamp(20px,3vw,42px);box-shadow:0 28px 80px rgba(0,0,0,.2)}
.typing-settings{display:flex;align-items:end;gap:16px;flex-wrap:wrap}.typing-mode{display:flex;border:0;padding:0;margin:0;gap:8px}.typing-mode legend,.typing-settings label{font-size:13px;font-weight:700;color:#b8cbd4;margin:0}.typing-mode legend{padding:0;margin-bottom:8px}.typing-mode button,.typing-restart{border:1px solid var(--type-border);background:#101e27;color:#d7e8ed;border-radius:8px;padding:12px 16px;font:600 14px var(--font-body);cursor:pointer}.typing-mode button.selected{background:#76def0;color:#07161d;border-color:#76def0}.typing-mode button:hover,.typing-restart:hover{border-color:#76def0}
.typing-settings label{min-width:155px}.typing-settings label[hidden]{display:none}.typing-settings select{display:block;width:100%;margin-top:8px;background:#101e27;border:1px solid var(--type-border);border-radius:8px;color:#eaf5f8;padding:11px 12px;font:500 14px var(--font-body)}.typing-restart{margin-left:auto}
.typing-status{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 24px}.typing-status>span{color:#9eb4c1;font:700 11px var(--font-brand);letter-spacing:.07em;border-top:1px solid var(--type-border);padding-top:14px}.typing-status strong{display:inline-block;color:#f3f8fa;font:600 clamp(28px,3vw,44px) var(--font-body);letter-spacing:-.04em;margin:9px 5px 0 0;font-variant-numeric:tabular-nums}.typing-status small{font:500 13px var(--font-body);letter-spacing:0}
.typing-target{font:500 clamp(18px,2vw,25px)/1.85 'Cascadia Code','SFMono-Regular',Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:250px;overflow:auto;padding:22px;background:#07121a;border:1px solid var(--type-border);border-radius:10px;color:#819ba8;user-select:none}.typing-target .correct{color:#c9f9e6}.typing-target .incorrect{color:#ff8e96;background:rgba(255,79,99,.16);border-radius:2px}.typing-target .next{background:#76def0;color:#061820;border-radius:2px}
.typing-input-label{display:block;font-size:14px;font-weight:700;color:#dcecf1;margin:24px 0 10px}.typing-page #typingInput{display:block;width:100%;resize:vertical;min-height:138px;padding:17px 20px;border:1px solid #54869a;border-radius:10px;outline:none;background:#091720;color:#fff;font:500 18px/1.7 'Cascadia Code','SFMono-Regular',Consolas,monospace;white-space:pre-wrap}.typing-page #typingInput:focus{border-color:#76def0;box-shadow:0 0 0 3px rgba(118,222,240,.13)}.typing-page #typingInput:disabled{opacity:.65}.typing-hint{color:#9eb4c1;font-size:13px;line-height:1.5;margin:12px 0 0}
.typing-result{margin-top:24px;border:1px solid #76def0;background:rgba(118,222,240,.08);border-radius:10px;padding:19px;font-size:17px;font-weight:600;line-height:1.5}.typing-result[hidden]{display:none}
.typing-progress{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:clamp(24px,6vw,90px);padding:90px 0 60px}.typing-progress h2{font-size:clamp(32px,4vw,54px);line-height:1.15;letter-spacing:-.05em}.typing-progress p:not(.eyebrow){color:#aabec8;line-height:1.7}.typing-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.typing-summary>div{border:1px solid var(--type-border);border-radius:10px;padding:20px;background:var(--type-panel)}.typing-summary span{display:block;color:#9eb4c1;font-size:13px;margin-bottom:12px}.typing-summary strong{font-size:clamp(20px,2vw,31px);font-variant-numeric:tabular-nums}.typing-history{color:#adbfca;margin-top:20px}.typing-history h3{font-size:18px;color:#f3f8fa}.typing-history-row{display:grid;grid-template-columns:70px 1fr 125px;gap:15px;align-items:center;margin:11px 0;font-size:13px}.typing-history-row strong{text-align:right;color:#d7e7ed;font-size:13px;font-weight:500}.typing-history-bar{height:8px;border-radius:8px;background:#1c3440;overflow:hidden}.typing-history-bar i{display:block;height:100%;border-radius:8px;background:#76def0}.typing-return{display:inline-block;border-bottom:1px solid #76def0;padding-bottom:8px;color:#76def0;font-weight:600}
@media(max-width:850px){.typing-heading{align-items:start}.typing-progress{grid-template-columns:1fr}.typing-status{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.typing-heading{display:block}.typing-record{margin-top:30px}.typing-settings label{flex:1 1 135px}.typing-restart{margin-left:0;width:100%}.typing-summary{grid-template-columns:1fr 1fr}.typing-history-row{grid-template-columns:55px 1fr 112px;gap:8px;font-size:12px}.typing-history-row strong{font-size:12px}}