@font-face{font-family:XSS Wanted Sans;src:url(/fonts/xss-typing/WantedSansVariable.woff2)format("woff2");font-style:normal;font-weight:100 900;font-display:swap}@font-face{font-family:XSS Jua;src:url(/fonts/xss-typing/Jua-Regular.ttf)format("truetype");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:XSS D2Coding;src:url(/fonts/xss-typing/D2Coding-Regular.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}:is(html:has(.typing-page),body:has(.typing-page)){overflow-x:clip}.roadmap-shell .typing-page{max-width:1200px;padding:var(--space-2xl)var(--space-lg);font-family:var(--font-body);overflow-x:clip}.typing-page h1,.typing-page h2{font-family:var(--font-display);overflow-wrap:anywhere;min-width:0;font-style:normal}.typing-header{gap:var(--space-lg);margin-bottom:var(--space-xl);flex-direction:column;display:flex}.typing-eyebrow{color:var(--color-peach-ink);background:var(--color-peach);border-radius:var(--radius-control);padding:var(--space-sm)var(--space-md);font-size:var(--text-sm);margin:0 0 var(--space-md);display:inline-block}.typing-header h1{letter-spacing:-.02em;color:var(--color-ink);margin:0;font-size:clamp(2.5rem,5vw,3.5rem);font-weight:400;line-height:1.2}.typing-header h1 span{white-space:nowrap}.typing-lead{color:var(--color-muted);line-height:1.7;font-size:var(--text-base);margin:var(--space-sm)0 0}.typing-personal{gap:var(--space-xs);font-size:var(--text-sm);color:var(--color-muted);flex-direction:column;display:flex}.typing-personal strong{color:var(--color-ink);font-size:var(--text-lg)}.typing-header-actions{align-items:center;gap:var(--space-lg);flex-wrap:wrap;display:flex}.typing-ranking-open{gap:var(--space-sm)}.typing-ranking-open svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.typing-layout{gap:var(--space-xl);grid-template-columns:minmax(0,1fr);align-items:start;display:grid}.typing-workbench{background:var(--color-paper);min-width:0;color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-card);padding:var(--space-md);box-shadow:var(--shadow-soft)}.typing-modes{gap:var(--space-sm);border-bottom:1px solid var(--color-rule);padding-bottom:var(--space-md);display:flex}.typing-modes button{font:inherit;min-height:48px;padding:var(--space-sm)var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-control);color:var(--color-muted);background:var(--color-paper);cursor:pointer;white-space:nowrap;flex:1;font-weight:700}.typing-modes button[aria-pressed=true]{color:var(--color-accent-dark);background:var(--color-highlight);border-color:var(--color-accent)}.typing-mode-description{padding-block:var(--space-md);font-size:var(--text-sm);line-height:1.7}.typing-mode-description p{margin:0 0 var(--space-md);color:var(--color-muted)}.typing-mode-description label{margin-bottom:var(--space-xs);display:block}.typing-mode-description select{font:inherit;width:100%;min-height:44px;padding:var(--space-sm);background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-control)}.typing-challenge-info{gap:var(--space-md);color:var(--color-accent-dark);flex-wrap:wrap;align-items:center;min-height:44px;display:flex}.typing-stats{padding:var(--space-md);gap:var(--space-sm);border-radius:var(--radius-control);background:var(--color-highlight);color:var(--color-ink);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.typing-stats dt{font-size:var(--text-sm);color:var(--color-muted)}.typing-stats dd{font-family:var(--font-code);margin:var(--space-sm)0 0;overflow-wrap:anywhere;font-size:clamp(1.2rem,3vw,1.8rem)}.typing-stats small{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-muted);margin-inline-start:var(--space-xs)}.typing-target-heading{justify-content:space-between;gap:var(--space-sm);font-size:var(--text-sm);margin-top:var(--space-lg);flex-wrap:wrap;display:flex}.typing-target-heading [role=status]{color:var(--color-accent-dark)}.typing-target{font-family:var(--font-code);font-size:var(--text-base);white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;padding:var(--space-md);margin:var(--space-sm)0;border-radius:var(--radius-control);background:var(--color-highlight);color:var(--color-muted);min-height:100px;line-height:2}.typing-target code{font-family:inherit}.typing-char--correct{color:var(--color-accent-dark)}.typing-char--wrong{color:var(--color-danger-text);background:var(--color-danger-bg);-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.typing-char--cursor{box-shadow:-2px 0 0 var(--color-accent)}.typing-progress{align-items:center;gap:var(--space-md);font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-lg);display:flex}.typing-progress span{flex-shrink:0}.typing-progress progress{width:100%;min-width:0;height:6px;accent-color:var(--color-accent)}.typing-input-label{font-size:var(--text-sm);margin-bottom:var(--space-sm);display:block}.typing-input{resize:vertical;width:100%;min-height:124px;font:var(--text-base)/1.8 var(--font-code);border:1px solid var(--color-rule);border-radius:var(--radius-control);padding:var(--space-md);background:var(--color-paper);color:var(--color-ink)}.typing-input::placeholder{color:var(--color-muted)}.typing-input[readonly]{background:var(--color-highlight)}.typing-input[aria-invalid=true]{border-color:var(--color-danger)}.typing-helper{color:var(--color-muted);font-size:var(--text-sm);margin:var(--space-sm)0;min-height:1.7em;line-height:1.7}.typing-error{color:var(--color-danger-text);font-size:var(--text-sm);line-height:1.7}.typing-actions{gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap;display:flex}.typing-button{min-height:44px;padding:var(--space-sm)var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-control);font:inherit;font-size:var(--text-base);color:var(--color-ink);background:var(--color-paper);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast)var(--ease-ui);justify-content:center;align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.typing-button--primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent)}.typing-text-button{font:inherit;font-size:var(--text-sm);min-height:44px;padding:var(--space-sm);color:var(--color-accent-dark);cursor:pointer;white-space:nowrap;background:0 0;border:0;text-decoration:underline}.typing-page button:disabled,.typing-page [aria-disabled=true],.typing-page select:disabled{opacity:.55;cursor:not-allowed}.typing-page :is(button,a,textarea,select):focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.typing-page button:active:not(:disabled){transform:translateY(1px)}.typing-result{margin-top:var(--space-lg);padding:var(--space-md);background:var(--color-success-bg);color:var(--color-success-text);border-radius:var(--radius-control);font-size:var(--text-base);line-height:1.7}.typing-result p{margin:var(--space-xs)0 0}.typing-sidebar{gap:var(--space-xl);flex-direction:column;min-width:0;display:flex}.typing-section-heading{justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.typing-page h2{margin:0;font-size:1.5rem;font-weight:400}.typing-ranking{padding-block:var(--space-md);border-top:2px solid var(--color-ink)}.typing-rank-list{margin:var(--space-md)0 0;padding:0;list-style:none}.typing-rank-list li{gap:var(--space-sm);padding:var(--space-md)var(--space-sm);border-bottom:1px solid var(--color-rule);font-size:var(--text-base);grid-template-columns:28px minmax(0,1fr) auto;align-items:center;display:grid}.typing-rank-number{font-family:var(--font-code);color:var(--color-muted)}.typing-rank-name{overflow-wrap:anywhere}.typing-rank-list li small{font-size:var(--text-sm);color:var(--color-muted);margin-inline-start:var(--space-xs);display:inline-block}.typing-rank--me{background:var(--color-highlight);color:var(--color-accent-dark)}.typing-rank-list li.typing-rank--podium{isolation:isolate;border:1px solid color-mix(in srgb,var(--medal-color)40%,var(--color-rule));border-radius:var(--radius-control);min-height:88px;margin-bottom:var(--space-sm);padding:var(--space-md);background:linear-gradient(110deg,color-mix(in srgb,var(--medal-color)14%,var(--color-paper)),var(--color-paper)75%);grid-template-columns:52px minmax(0,1fr) auto;position:relative}.typing-rank--1{--medal-color:#dca52d;--medal-ink:#75500b;--medal-light:#fff3bc}.typing-rank--2{--medal-color:#95abc1;--medal-ink:#38546d;--medal-light:#edf3fa}.typing-rank--3{--medal-color:#c68d64;--medal-ink:#784627;--medal-light:#ffe0c9}.typing-rank-list li.typing-rank--1{box-shadow:0 4px 18px -10px #dca52d80}.typing-rank-list li.typing-rank--1:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,#0000 30%,#ffffff50 45%,#0000 60%) 0 0/250% 100%;animation:6s ease-in-out infinite typing-gold-shine;position:absolute;inset:0}.typing-rank-medal{width:48px;height:56px;color:var(--medal-ink);background:linear-gradient(145deg,var(--medal-light),var(--medal-color));border:1px solid var(--medal-color);box-shadow:inset 0 1px 0 #ffffffb0,0 3px 8px -4px var(--medal-color);border-radius:16px 16px 22px 22px;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:1rem;font-weight:800;display:flex}.typing-rank-medal svg{fill:currentColor;width:25px;height:20px}.typing-rank--podium .typing-rank-name{gap:var(--space-xs);flex-direction:column;min-width:0;display:flex}.typing-rank-place{color:var(--color-muted);font-size:.6875rem;font-weight:600}.typing-rank--1 .typing-rank-place{color:var(--color-ink)}.typing-rank--podium strong{font-size:var(--text-lg);text-align:right}.typing-rank--podium strong small{margin:2px 0 0;font-weight:400;display:block}.typing-rank-list li.typing-rank--me{outline:2px solid var(--color-accent);outline-offset:-2px}.typing-ranking-dialog{width:min(1120px,100% - 32px);max-width:none;max-height:calc(100dvh - 40px);padding:var(--space-lg);overscroll-behavior:contain;border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);margin:auto;position:fixed;overflow-y:auto;box-shadow:0 24px 80px #101c3b40}.typing-ranking-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#14203880}.typing-ranking-dialog-heading{justify-content:space-between;align-items:start;gap:var(--space-md);padding-bottom:var(--space-lg);display:flex}.typing-ranking-eyebrow{font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-sm)}.typing-page .typing-ranking-dialog h2{font-size:2rem}.typing-all-rankings{gap:var(--space-lg);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.typing-ranking-board{min-width:0;padding:var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-card)}.typing-ranking-board h3{font-size:var(--text-lg);margin:0}.typing-ranking-unit{font-size:var(--text-sm);color:var(--color-muted)}.typing-ranking-dialog-footer{justify-content:space-between;align-items:center;gap:var(--space-sm);padding-top:var(--space-md);flex-wrap:wrap;display:flex}@keyframes typing-gold-shine{0%,25%{background-position:120% 0}65%,to{background-position:-100% 0}}@media (max-width:50rem){.typing-all-rankings{grid-template-columns:minmax(0,1fr)}}@media (max-width:40rem){.typing-header-actions{justify-content:space-between;gap:var(--space-md)}.typing-ranking-dialog{padding:var(--space-md)}.typing-ranking-dialog-heading{flex-wrap:wrap}.typing-ranking-board{padding:var(--space-sm)}.typing-ranking-dialog .typing-rank--podium{padding:var(--space-sm);gap:var(--space-sm);grid-template-columns:44px minmax(0,1fr) auto}.typing-ranking-dialog .typing-rank-medal{width:40px;height:50px}}@media (prefers-reduced-motion:reduce){.typing-rank-list li.typing-rank--1:before{animation:none}}.typing-empty{padding-block:var(--space-xl);font-size:var(--text-base);color:var(--color-muted)}.typing-empty p{margin:var(--space-xs)0}.typing-rules{padding:var(--space-lg);border-radius:var(--radius-card);background:var(--color-peach);color:var(--color-peach-ink)}.typing-rules ul{margin:var(--space-md)0;font-size:var(--text-sm);color:var(--color-peach-ink);padding-inline-start:var(--space-md);line-height:1.9}.typing-rules .typing-helper{color:var(--color-peach-ink)}.typing-header-title{align-items:center;gap:var(--space-md);display:flex}.typing-mascot{width:64px;height:64px;color:var(--color-accent-dark);flex-shrink:0}.typing-mascot-shell{fill:var(--color-highlight);stroke:var(--color-accent);stroke-width:2px}.typing-mascot-cheek{fill:var(--color-cheek)}.typing-mascot-eye{fill:var(--color-ink)}.typing-rules li{margin-block:var(--space-sm)}.typing-footer{gap:var(--space-sm);margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid var(--color-rule);font-size:var(--text-sm);color:var(--color-muted);flex-direction:column;display:flex}@media (min-width:40rem){.typing-header{flex-direction:row;justify-content:space-between;align-items:end}.typing-workbench{padding:var(--space-lg)}.typing-footer{flex-direction:row;justify-content:space-between}}@media (hover:hover){.typing-modes button:hover:not(:disabled),.typing-button:hover:not(:disabled){background:var(--color-highlight);color:var(--color-ink)}.typing-input:hover{background:var(--surface-tinted)}}@media (prefers-reduced-motion:reduce){.typing-page *{transition:none}}.roadmap-shell .typing-game-page{width:100%;max-width:1400px;padding:var(--space-xl)clamp(20px,5vw,72px);min-height:calc(100dvh - 80px);margin-inline:auto}.typing-game-page .typing-header{margin-bottom:var(--space-lg)}.typing-game-page .typing-header h1{font-size:clamp(2rem,3vw,2.75rem)}.typing-game-page .typing-eyebrow{margin-bottom:var(--space-sm)}.typing-game-page .typing-mascot{width:44px;height:44px}.typing-game-page .typing-workbench{padding:var(--space-lg);box-shadow:none}.typing-toolbar{justify-content:space-between;align-items:center;gap:var(--space-md);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-rule);flex-wrap:wrap;display:flex}.typing-categories{align-items:center;gap:var(--space-lg);margin-bottom:var(--space-lg);flex-wrap:wrap;display:flex}.typing-categories button{font:700 var(--text-lg)var(--font-body);padding:var(--space-sm)0;color:var(--color-muted);cursor:pointer;background:0 0;border:0;border-bottom:3px solid #0000;min-height:44px}.typing-categories button[aria-pressed=true]{color:var(--color-accent-dark);border-bottom-color:var(--color-accent)}.typing-categories>span{font-size:var(--text-sm);color:var(--color-muted)}.typing-game-page .typing-modes{border:0;flex-shrink:0;align-items:center;padding:0}.typing-game-page .typing-modes button{padding-inline:var(--space-lg);flex:none}.typing-problem-picker{align-items:center;gap:var(--space-sm);flex-wrap:wrap;min-width:0;display:flex}.typing-problem-picker label{font-size:var(--text-sm);color:var(--color-muted)}.typing-problem-picker select{border:1px solid var(--color-rule);border-radius:var(--radius-control);max-width:100%;min-height:44px;padding:var(--space-sm);color:var(--color-ink);background:var(--color-paper);font:var(--text-sm)var(--font-body)}.typing-toolbar .typing-challenge-info{font-size:var(--text-sm);color:var(--color-muted);margin:0}.typing-live-bar{justify-content:space-between;align-items:center;gap:var(--space-md);padding-block:var(--space-lg);display:flex}.typing-game-page .typing-stats{background:0 0;border-radius:0;flex:1;max-width:560px;padding:0}.typing-game-page .typing-stats dd{font-family:var(--font-body);color:var(--color-accent-dark);font-weight:700}.typing-live-status{color:var(--color-muted);font-size:var(--text-sm);white-space:nowrap}.typing-stage{border-radius:var(--radius-control);border:1px solid var(--color-rule);background:var(--color-paper);width:100%;color:var(--color-ink);position:relative}.typing-stage--focused{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent)15%,transparent)}.typing-text-viewport{border-radius:inherit;scrollbar-width:thin;overscroll-behavior:contain;height:clamp(220px,36dvh,320px);overflow:hidden auto}.typing-code,.typing-capture{font:var(--text-code-game)/1.9 var(--font-code);letter-spacing:0;font-kerning:none;font-variant-ligatures:none;padding:var(--space-lg)}.typing-code{white-space:normal;overflow-wrap:anywhere;word-break:break-all;min-height:100%;color:var(--color-untyped);-webkit-user-select:none;user-select:none;margin:0}.typing-code code{font:inherit}.typing-char{vertical-align:baseline;white-space:pre;display:inline-block;position:relative}.typing-char--space:after{content:"·";text-align:center;opacity:.5;position:absolute;inset:0}.typing-game-page--korean .typing-code,.typing-game-page--korean .typing-capture{font-family:var(--font-body)}.typing-code .typing-char--correct{color:var(--color-accent-dark)}.typing-code .typing-char--wrong{color:var(--color-danger-text);background:var(--color-danger-bg);-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.typing-code .typing-char--draft{color:var(--color-ink);background:var(--color-highlight);-webkit-text-decoration:underline solid var(--color-accent);text-decoration:underline solid var(--color-accent);text-underline-offset:.2em;text-decoration-thickness:2px}.typing-char--end{min-width:1ch}.typing-code .typing-char--cursor{box-shadow:none}.typing-stage--focused .typing-char--cursor:before{content:"";background:var(--color-accent);width:2px;animation:1s step-end infinite typing-caret;position:absolute;inset-block:.25em;inset-inline-start:-1px}.typing-capture{border-radius:inherit;resize:none;opacity:0;pointer-events:none;color:#0000;-webkit-text-fill-color:transparent;caret-color:#0000;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;background:0 0;border:0;width:100%;height:100%;min-height:0;margin:0;position:absolute;inset:0;overflow:hidden}.typing-stage--composing .typing-char--cursor:before{animation:none}.typing-game-page .typing-progress{margin:var(--space-md)0 0}.typing-game-page .typing-progress span{font-family:var(--font-body)}.typing-game-controls{justify-content:space-between;align-items:center;gap:var(--space-md);margin-top:var(--space-md);flex-wrap:wrap;display:flex}.typing-game-controls .typing-actions{align-items:center;margin:0}.typing-countdown{justify-content:center;align-items:center;gap:var(--space-md);border-radius:inherit;background:var(--color-overlay);color:var(--color-ink);text-align:center;padding:var(--space-md);flex-direction:column;display:flex;position:absolute;inset:0}.typing-countdown strong{font-family:var(--font-display);color:var(--color-accent-dark);font-size:5rem;font-weight:400;line-height:1}.typing-countdown span{font-size:var(--text-sm)}.typing-stage-start{border-radius:inherit;background:color-mix(in srgb,var(--color-paper)65%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:var(--space-lg);place-items:center;display:grid;position:absolute;inset:0}.typing-stage-start .typing-button{max-width:100%;min-height:52px;padding-inline:var(--space-xl);box-shadow:var(--shadow-soft)}.typing-focus-prompt{inset-inline:var(--space-lg);bottom:var(--space-md);min-height:44px;padding:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-control);font:var(--text-sm)var(--font-body);background:var(--color-overlay);color:var(--color-ink);cursor:pointer;white-space:nowrap;position:absolute}.typing-finish{padding:var(--space-2xl)0;text-align:center}.typing-finish-label{font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-sm)}.typing-game-page .typing-finish h2{font-size:clamp(2rem,4vw,3rem)}.typing-finish-speed{justify-content:center;align-items:baseline;gap:var(--space-sm);color:var(--color-accent-dark);margin-block:var(--space-lg);display:flex}.typing-finish-speed strong{font-size:clamp(3.5rem,8vw,6rem);font-family:var(--font-body);font-weight:800;line-height:1}.typing-finish-details{margin:var(--space-lg)0;justify-content:center;gap:clamp(16px,4vw,64px);display:flex}.typing-finish-details dt{color:var(--color-muted);font-size:var(--text-sm)}.typing-finish-details dd{margin:var(--space-sm)0 0;font-size:var(--text-lg);color:var(--color-ink)}.typing-finish .typing-actions{margin-top:var(--space-lg);justify-content:center;align-items:center}.typing-ranking--results{margin-top:var(--space-xl);padding:var(--space-lg);background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-card)}.typing-game-page .typing-rules{margin-top:var(--space-lg);padding:var(--space-md)var(--space-lg)}.typing-game-page .typing-rules summary{cursor:pointer;font-size:var(--text-sm);align-items:center;gap:var(--space-sm);min-height:44px;display:flex}.typing-game-page .typing-rules summary:before{content:"+";font-size:var(--text-lg)}.typing-game-page .typing-rules[open] summary:before{content:"−"}.typing-game-page .typing-footer{margin-top:var(--space-lg)}@keyframes typing-caret{50%{opacity:0}}@media (max-width:40rem){.typing-game-page .typing-workbench{padding:var(--space-md)}.typing-game-page .typing-header h1{font-size:clamp(1.5rem,5vw,2rem)}.typing-categories{gap:var(--space-md)}.typing-categories>span{width:100%}.typing-game-page .typing-personal{align-items:center;gap:var(--space-sm);flex-direction:row}.typing-game-page .typing-personal strong{font-size:var(--text-sm)}.typing-problem-picker,.typing-problem-picker select{width:100%}.typing-live-bar{align-items:stretch;gap:var(--space-sm);flex-direction:column}.typing-live-status{text-align:right}.typing-code,.typing-capture{padding:var(--space-md)}.typing-game-controls>.typing-helper{display:none}.typing-focus-prompt{inset-inline:var(--space-sm);font-size:.75rem}.typing-finish-details dd{font-size:var(--text-base)}}@media (prefers-reduced-motion:reduce){.typing-stage--focused .typing-char--cursor:before{animation:none}}