body[data-site-tab="type"] { --ink:#17191c; --panel:#1e2125; --line:#3b3f45; --muted:#afb2ba; --cyan:#dfb978; }
.type-view { width:min(920px,100%); margin:0 auto; padding:36px 24px 70px; }
.type-heading,.type-meta,.type-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.type-heading { border-bottom:1px solid var(--line); padding-bottom:16px; }
.type-heading h2 { font:700 42px/1 var(--heading-type); margin:0; }
.type-heading button { font-size:12px; padding:8px 12px; }
.type-meta { margin:32px 0 24px; font-variant-numeric:tabular-nums; color:var(--muted); }
.type-meta strong { color:var(--cyan); font-size:20px; }
.type-meta strong img { width:22px; height:22px; vertical-align:-4px; margin-right:6px; }
.type-work { position:relative; padding:24px 0; border-bottom:1px solid var(--line); }
.type-window { height:144px; overflow:hidden; position:relative; cursor:text; }
.type-lines { font:400 24px/48px ui-monospace,Consolas,monospace; color:#8b909a; position:relative; transition:transform 120ms ease-out; overflow-wrap:anywhere; }
.type-word { display:inline-block; white-space:pre; }
.type-char { position:relative; }
.type-char.done { color:#f2f0ea; }
.type-char.current::before { content:''; position:absolute; width:2px; height:1.2em; top:0; left:-2px; background:var(--cyan); }
.type-char.wrong { color:#ff8296; text-decoration:underline; text-decoration-thickness:2px; }
.type-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; resize:none; cursor:text; font-size:24px; }
.type-reference { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.type-work:focus-within { outline:1px solid var(--cyan); outline-offset:12px; }
.type-footer { margin-top:24px; flex-wrap:wrap; }
.type-footer p { margin:0; color:var(--muted); }
.type-notice { min-height:1.5em; margin:20px 0 0; }
.type-progress { width:100%; height:2px; background:var(--line); margin-top:26px; }
.type-progress span { display:block; height:100%; width:0; background:var(--cyan); }
.type-reward { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; color:#fff4c5; font:900 clamp(40px,8vw,76px) var(--heading-type); text-shadow:0 3px 0 #503700,0 0 30px #e9bf72; }
.type-reward.animate { animation:type-payout 1.6s ease-out both; }
@keyframes type-payout { 0% { opacity:0; transform:translateY(20px) scale(.9); } 15%,65% { opacity:1; } 100% { opacity:0; transform:translateY(-50px); } }
.type-help { max-width:650px; color:var(--muted); margin-top:32px; font-size:14px; }
@media(max-width:600px) { .type-view { padding:24px 16px 48px; } .type-lines { font-size:19px; line-height:38px; } .type-window { height:114px; } .type-meta { margin-top:24px; } }
@media(prefers-reduced-motion:reduce) { .type-lines { transition:none; } .type-reward.animate { animation:none; } }

.type-timer { color:var(--cyan); font:700 28px/1 var(--heading-type); font-variant-numeric:tabular-nums; min-width:4ch; text-align:center; }
.type-timer.urgent { color:#ff8296; }
.type-timer.last-seconds { animation:type-deadline 1s ease-in-out infinite; }
@keyframes type-deadline { 50% { opacity:.65; } }
@media(max-width:600px) { .type-meta { gap:8px; } .type-meta strong { font-size:17px; } .type-timer { font-size:24px; } }
@media(prefers-reduced-motion:reduce) { .type-timer.last-seconds { animation:none; } }

/* Reference glyphs are server-rendered PNG cells, never plaintext DOM nodes. */
.type-word { vertical-align:top; }
.type-char { display:inline-block; width:20px; height:38px; vertical-align:top; background-repeat:no-repeat; opacity:.63; }
.type-char.done { opacity:1; }
.type-char.current { box-shadow:inset 2px 0 #dfb978; }
.type-char.current::before { display:none; }
.type-char.wrong { background-color:#682331; opacity:1; }
.type-lines { line-height:38px; }
@media(max-width:600px) { .type-lines { zoom:.85; } }

.type-char.pending { opacity:.9; box-shadow:inset 0 -2px #dfb978; }