/* SPDX-License-Identifier: GPL-3.0-only. School presentation; no upstream brand assets. */
.typing-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:10px 0 24px}.typing-heading h1{margin-bottom:8px}.typing-heading h1>span{color:var(--accent)}.typing-heading .game-intro{margin:0}.typing-shell{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--white);box-shadow:0 16px 45px #102d4810}.typing-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--soft)}.typing-top>div:first-child{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.typing-top strong{font-size:.8rem;letter-spacing:.1em}.typing-dot{height:9px;width:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px var(--accent-soft)}.typing-tag{font-size:.58rem;padding:5px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);letter-spacing:.07em}.typing-tools{display:flex;gap:8px;flex-shrink:0}.typing-tools button{font-size:.75rem;padding:8px 11px;min-height:38px}.typing-tools button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.typing-layout{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr)}.typing-side{padding:26px;border-right:1px solid var(--line);background:linear-gradient(170deg,var(--white),var(--soft))}.typing-side>.eyebrow{font-size:.64rem}.typing-side>label{display:block;font-size:.8rem;font-weight:700;margin:18px 0 8px}.typing-side select{display:block;width:100%;max-width:100%;min-height:44px;background:var(--field-bg);color:var(--ink);border:1px solid var(--field-border);border-radius:10px;padding:10px;font:inherit;font-size:.8rem}.typing-duration{border:0;margin:20px 0;padding:0;display:flex;gap:7px;flex-wrap:wrap}.typing-duration legend{font-size:.8rem;font-weight:700;margin-bottom:10px}.typing-duration label{position:relative;display:flex;flex:1;cursor:pointer}.typing-duration input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}.typing-duration span{display:block;text-align:center;padding:10px 6px;width:100%;border:1px solid var(--field-border);border-radius:9px;color:var(--muted);font-size:.82rem;font-weight:700}.typing-duration input:checked+span{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.typing-duration input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}.typing-side>button{display:block;width:100%;margin-top:10px;min-height:43px;font-size:.8rem}.typing-prepare span{float:right}.typing-account-note{font-size:.73rem;color:var(--muted);line-height:1.55;margin:12px 0 20px}.typing-record{padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.typing-record>span{font-size:.6rem;letter-spacing:.12em;color:var(--muted)}.typing-record strong{display:block;font:700 2rem ui-monospace,SFMono-Regular,monospace;color:var(--accent);margin:4px 0}.typing-record small{font-size:.7rem;line-height:1.5;color:var(--muted);display:block}.typing-mini-keyboard{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:24px 0 18px;transform:perspective(500px) rotateX(18deg) rotate(-4deg)}.typing-mini-keyboard span{border:1px solid var(--field-border);border-radius:5px;box-shadow:0 3px var(--line);text-align:center;padding:8px 1px;color:var(--accent);font:10px ui-monospace,monospace;background:var(--white)}.typing-mini-keyboard i{height:18px;grid-column:2/6;border:1px solid var(--field-border);border-radius:5px;background:var(--accent-soft)}.typing-note{font-size:.75rem;color:var(--muted);line-height:1.6}.typing-main{padding:28px 32px;min-width:0}.typing-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:22px}.typing-stats>div{min-width:0;padding:15px 18px;background:var(--soft);border:1px solid var(--line);border-radius:13px}.typing-stats span{display:block;font-size:.58rem;letter-spacing:.1em;color:var(--muted);font-weight:700}.typing-stats strong{display:block;font:700 clamp(1.6rem,2.7vw,2.7rem) ui-monospace,SFMono-Regular,monospace;letter-spacing:-.06em;margin-top:7px;color:var(--ink)}.typing-stats>div:first-child strong{color:var(--accent)}.typing-stats small{font:600 .65rem system-ui,sans-serif;color:var(--muted);margin-left:4px;letter-spacing:0}.typing-progress{height:4px;background:var(--soft);border-radius:5px;overflow:hidden;margin:0 0 24px}.typing-progress i{display:block;height:100%;background:var(--accent);width:100%;transition:width .2s linear}.typing-board{position:relative;border-radius:17px;padding:26px;background:radial-gradient(ellipse at 85% 0,#243c53,#111d2e 70%);color:#d8e9f5;border:1px solid #38536c;overflow:hidden}.typing-board-label{font:10px ui-monospace,monospace;letter-spacing:.14em;color:#9fc6db;margin:0 0 25px}.typing-words{font:clamp(1.2rem,1.8vw,1.8rem)/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.01em;max-height:calc(1em * 1.85 * 3);overflow:hidden;overflow-wrap:anywhere;color:#9ab0c5;min-height:calc(1em * 1.85 * 3);margin:0 0 22px;white-space:pre-wrap;user-select:none}.typing-words>span{position:relative;display:inline}.typing-words .is-correct{color:#effaff}.typing-words .is-error{color:#ffb0bf;background:#74273d44;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}.typing-words .is-current::before{content:"";display:block;position:absolute;width:2px;height:1.2em;left:-2px;top:0;background:#8feaff;border-radius:2px;box-shadow:0 0 10px #70dbff88}.typing-prompt{padding:18px 0 8px}.typing-prompt[hidden]{display:none}.typing-prompt strong{font-size:1.2rem;color:#f2faff}.typing-prompt p{color:#a5bfd2;font-size:.85rem;line-height:1.6;margin:8px 0}.typing-input-wrap{margin-top:22px}.typing-input-wrap label{display:block;font-size:.72rem;color:#bfd6e7;margin-bottom:7px}.typing-input-wrap textarea{width:100%;display:block;background:#0d1828;color:#f0faff;border:1px solid #5b7894;border-radius:10px;padding:13px;min-height:78px;resize:vertical;font:16px/1.5 ui-monospace,monospace;caret-color:#92e5ff;color-scheme:dark;scrollbar-color:#4d718d #0d1828}.typing-input-wrap textarea:focus-visible{outline:3px solid #8cdef4;outline-offset:3px}.typing-input-wrap textarea::placeholder{color:#9cb3c8;opacity:1}.typing-input-wrap textarea:disabled{opacity:.7}.typing-instructions{color:#a5bfd2;font-size:.7rem;line-height:1.55;margin:12px 0 0}.typing-session-actions{display:flex;align-items:center;gap:14px;margin:17px 0}.typing-session-actions button{font-size:.77rem;min-height:38px}.typing-mode{font-size:.73rem;color:var(--muted)}#typing-status{font-size:.82rem;line-height:1.55;color:var(--muted);min-height:2em;margin:14px 0 0}.typing-result{border:1px solid var(--line);border-radius:15px;padding:22px;margin-top:22px;background:var(--accent-soft)}.typing-result[hidden]{display:none}.typing-result h2{font-size:1.5rem;margin:7px 0 18px}.typing-result-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.typing-result-metrics>div{padding:13px;background:var(--white);border:1px solid var(--line);border-radius:10px}.typing-result-metrics strong{display:block;color:var(--accent);font:700 1.6rem ui-monospace,monospace}.typing-result-metrics span{font-size:.7rem;color:var(--muted)}.typing-result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.typing-chart{margin:20px 0 0}.typing-chart svg{display:block;width:100%;max-height:200px;overflow:visible}.typing-chart .chart-grid{stroke:var(--field-border);opacity:.4}.typing-chart .chart-area{fill:var(--accent);opacity:.12}.typing-chart .chart-line{stroke:var(--accent);stroke-width:3;fill:none;stroke-linejoin:round}.typing-chart text{fill:var(--muted);font:11px system-ui,sans-serif}.typing-chart .chart-trend{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 5;fill:none}.typing-chart figcaption{font-size:.73rem;line-height:1.5;color:var(--muted)}.typing-history{margin:26px 0;padding:22px 26px;background:var(--white);border:1px solid var(--line);border-radius:16px}.typing-history h2{font-size:1.2rem;margin:0 0 14px}.typing-history table{width:100%;border-collapse:collapse;font-size:.8rem}.typing-history th,.typing-history td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}.typing-history p{font-size:.85rem;color:var(--muted)}.typing-help{margin:24px 0}.typing-help summary{cursor:pointer;font-weight:650}.typing-help p{line-height:1.65;max-width:110ch}.typing-credits{font-size:.75rem;color:var(--muted);line-height:1.7;max-width:120ch}.typing-focused .typing-side{display:none}.typing-focused .typing-layout{grid-template-columns:minmax(0,1fr)}.typing-focused .typing-main{max-width:1250px;width:100%;margin:auto}.typing-focused .typing-words{font-size:clamp(1.4rem,2.1vw,2.2rem)}.typing-shell button:disabled{cursor:wait;opacity:.65}
@media(min-width:1600px){.games-main:has(.typing-shell){max-width:1700px}.typing-main{padding:32px 42px}.typing-layout{grid-template-columns:300px minmax(0,1fr)}.typing-board{padding:32px}.typing-words{font-size:2rem}}
@media(max-width:1100px){.typing-layout{grid-template-columns:240px minmax(0,1fr)}.typing-side{padding:22px 18px}.typing-main{padding:22px}.typing-stats{gap:7px}.typing-stats>div{padding:12px 9px}.typing-stats span{font-size:.52rem}.typing-tag{display:none}.typing-board{padding:22px}}
@media(max-width:760px){.typing-heading{display:block}.typing-heading>a{display:inline-block;margin-top:16px}.typing-top{padding:15px;align-items:flex-start;gap:12px;flex-wrap:wrap}.typing-top strong{font-size:.7rem}.typing-top>div:first-child{min-height:30px}.typing-tools{margin-left:auto}.typing-layout{display:flex;flex-direction:column}.typing-side{border-right:0;border-bottom:1px solid var(--line);padding:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}.typing-side>.eyebrow,.typing-side>label,.typing-side>select,.typing-account-note{grid-column:1/-1;margin:0}.typing-side>.eyebrow{margin-bottom:2px}.typing-side>label{font-size:.75rem}.typing-duration{grid-column:1/-1;margin:3px 0 0}.typing-duration legend{font-size:.75rem}.typing-side>button{margin:0;font-size:.75rem;padding:10px}.typing-record,.typing-mini-keyboard,.typing-side>.typing-note{display:none}.typing-main{padding:18px 13px}.typing-stats{gap:6px;margin-bottom:15px}.typing-stats>div{padding:11px 7px}.typing-stats strong{font-size:1.45rem}.typing-stats small{display:block;margin:4px 0 0;font-size:.58rem;min-height:.8em}.typing-stats span{font-size:.49rem;letter-spacing:.03em}.typing-board{padding:18px 14px;border-radius:13px}.typing-board-label{font-size:8px;letter-spacing:.08em;line-height:1.5;margin-bottom:17px}.typing-words{font-size:1.3rem;line-height:1.8}.typing-result{padding:16px}.typing-result-metrics{gap:6px}.typing-result-metrics>div{padding:10px 7px}.typing-result-metrics strong{font-size:1.15rem}.typing-result h2{font-size:1.3rem}.typing-top .secondary-button{font-size:.68rem;padding:7px;min-height:36px}.typing-history{padding:18px 12px;overflow:auto}.typing-history th,.typing-history td{padding:8px 6px}.typing-focused .typing-side{display:none}}
@media(prefers-reduced-motion:reduce){.typing-shell *{transition:none!important;scroll-behavior:auto!important}.typing-mini-keyboard{transform:none}}

.typing-reference{margin:10px 0 0;font-size:.75rem;color:#c4dced}.typing-reference summary{cursor:pointer;padding:8px 0}.typing-reference p{font:14px/1.65 ui-monospace,monospace;color:#e5f4ff;max-height:180px;overflow:auto;white-space:normal;user-select:text;padding:12px;background:#0d1828;border:1px solid #53708b;border-radius:8px}.typing-reference p:focus-visible{outline:3px solid #8cdef4;outline-offset:3px}
/* Options bar (extras · mode · amount): same cards, borders, accent and type as the rest of the page. */
.typing-modes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 18px}
.typing-modes-group{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:5px;background:var(--soft);border:1px solid var(--line);border-radius:13px;min-height:48px}
.typing-modes button,.typing-modes label>span{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid transparent;background:none;color:var(--muted);font-family:inherit;font-size:.8rem;font-weight:700;line-height:1.2;border-radius:9px;cursor:pointer;min-height:36px;transition:color .15s,background .15s,border-color .15s;white-space:nowrap}
.typing-modes button:hover:not(:disabled),.typing-modes label:hover>span{color:var(--ink)}
.typing-modes svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.typing-modes label{position:relative;display:flex}
.typing-modes input[type=radio]{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.typing-modes input:checked+span,.typing-modes button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.typing-modes input:focus-visible+span,.typing-modes button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.typing-modes button:disabled,.typing-modes input:disabled+span{opacity:.45;cursor:not-allowed}
.typing-modes input:disabled{cursor:not-allowed}
.typing-amount{display:flex;align-items:center;gap:4px}.typing-amount[hidden],.typing-custom-input[hidden]{display:none}
.typing-amount-note{margin:0;padding:0 10px;color:var(--muted);font-size:.8rem;font-weight:600}
.typing-amount-note kbd{font:inherit;font-size:.75rem;color:var(--ink);background:var(--field-bg);border:1px solid var(--field-border);border-radius:5px;padding:1px 5px}
.typing-custom-input{width:4.6em;margin:0 4px;background:var(--field-bg);border:1px solid var(--field-border);color:var(--ink);border-radius:9px;padding:7px 8px;font-family:inherit;font-size:.8rem;font-weight:700}
.typing-custom-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.typing-custom-box{margin:18px 0 4px;display:grid;gap:6px}.typing-custom-box[hidden]{display:none}
.typing-custom-box label{font-size:.8rem;font-weight:700}
.typing-custom-box textarea{width:100%;resize:vertical;border:1px solid var(--field-border);border-radius:10px;padding:10px;background:var(--field-bg,var(--soft));color:var(--ink);font:inherit;font-size:.85rem}
.typing-custom-box small{color:var(--muted);font-size:.72rem}
@media(max-width:760px){.typing-modes{gap:6px}.typing-modes-group{width:100%;justify-content:center;padding:4px}.typing-modes button,.typing-modes label>span{padding:7px 8px;font-size:.76rem}}