#app{min-height:100vh}.has-sidebar{gap:var(--space-3);max-width:1200px;padding:var(--space-2) var(--space-2) 60px;margin:0 auto;display:flex}#app-main{flex:1;min-width:0;max-width:900px;margin:0 auto}#sidebar-ad{width:160px;margin-top:var(--space-5);flex-shrink:0;display:none}@media (width>=1100px){#sidebar-ad{justify-content:center;align-items:flex-start;display:flex}}.ad-container{justify-content:center;align-items:center;min-height:1px;display:flex}#ad-slot-results{margin-top:var(--space-2);margin-bottom:var(--space-2);width:100%;max-width:520px}#mode-bar{justify-content:center;align-items:center;gap:var(--space-1);margin-top:var(--space-5);margin-bottom:var(--space-5);flex-wrap:wrap;display:flex}.mode-group{flex-wrap:wrap;gap:2px;display:flex}.mode-group.right{flex-shrink:0;align-items:center}#sub-options,#language-filter{flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;display:flex}.mode-btn{border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-sans);color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px 12px;font-weight:500;transition:color .1s}.mode-btn:hover{color:var(--text-primary)}.mode-btn.active{color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--caret-accent)}.mode-btn:focus-visible{outline:2px solid var(--caret-accent);outline-offset:2px}.opt-btn,.lang-btn{border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-mono);color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px 10px;font-weight:500;transition:color .1s}.opt-btn:hover,.lang-btn:hover,.opt-btn.active,.lang-btn.active{color:var(--text-primary)}#code-filters{margin-bottom:var(--space-4);padding:var(--space-1) var(--space-2);background:var(--bg-surface);border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:6px;width:100%;display:flex}#code-filters .filter-group{flex-wrap:wrap;align-items:center;gap:6px;width:100%;display:flex}#code-filters .filter-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;opacity:.6;flex-shrink:0;margin-right:2px;font-size:11px;font-weight:600}#code-filters #language-filter{flex-wrap:wrap;align-items:center;gap:2px;display:flex}#lang-search{border-radius:var(--radius-sm);min-width:140px;max-width:260px;font-size:13px;font-family:var(--font-mono);color:var(--text-primary);background:var(--bg-canvas);border:1px solid var(--text-muted);outline:none;flex:1;padding:4px 10px;transition:border-color .15s}#lang-search:focus{border-color:var(--caret-accent)}#lang-search::placeholder{color:var(--text-muted);opacity:.6}.filter-sep{background:var(--text-muted);opacity:.3;flex-shrink:0;width:1px;height:20px}#test-area{flex-direction:column;flex:1;justify-content:center;min-height:0;display:flex}#text-display{font-family:var(--font-mono);color:var(--text-primary);overflow-wrap:break-word;user-select:none;width:100%;height:4.8em;padding:0;font-size:27px;font-weight:500;line-height:1.6;position:relative;overflow:hidden}#text-scroll{will-change:transform;white-space:pre-wrap;transition:transform .15s;position:relative}@media (prefers-reduced-motion:reduce){#text-scroll{transition:none}}#text-display .char{transition:color 50ms}#text-display .char.untouched{color:var(--text-primary);opacity:.6}#text-display .char.correct{color:var(--diff-correct);opacity:1}#text-display .char.incorrect{color:var(--diff-error);opacity:1;text-decoration:line-through 2px}#text-display .char.current{color:var(--bg-surface);background:var(--caret-accent);animation:1s step-end infinite blink-caret}@keyframes blink-caret{50%{color:var(--caret-accent);background:0 0}}#text-display::-webkit-scrollbar{width:4px}#text-display::-webkit-scrollbar-track{background:0 0}#text-display::-webkit-scrollbar-thumb{background:var(--text-muted);opacity:.3;border-radius:2px}#restart-hint{color:var(--text-muted);text-align:center;margin-top:var(--space-2);opacity:.7;font-size:12px}#results-area{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:0;animation:.2s ease-out results-fade;display:flex}@keyframes results-fade{0%{opacity:0}to{opacity:1}}#results-content{text-align:center;width:100%;max-width:520px}.result-wpm-group{margin-bottom:var(--space-2);justify-content:center;align-items:baseline;gap:16px;display:flex}.result-wpm-net{font-family:var(--font-mono);color:var(--text-primary);font-size:64px;font-weight:700;line-height:1}.result-wpm-raw{font-family:var(--font-mono);color:var(--text-muted);font-size:24px;font-weight:500;line-height:1}.result-secondary{margin-bottom:var(--space-3);justify-content:center;gap:24px;display:flex}.result-secondary-item{flex-direction:column;align-items:center;display:flex}.result-secondary-value{font-family:var(--font-mono);color:var(--text-primary);font-size:20px;font-weight:600}.result-secondary-label{color:var(--text-muted);text-transform:lowercase;margin-top:2px;font-size:12px;font-weight:500}.result-chart-wrapper{margin:var(--space-3) 0;border-radius:var(--radius-sm);padding:0}#wpm-chart{width:100%;display:block}.share-card{background:var(--bg-canvas);border:1px solid var(--text-muted);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3) var(--space-3);margin-bottom:var(--space-3);position:relative}.share-card-dots{margin-bottom:var(--space-2);gap:6px;display:flex}.share-card-dot{background:var(--text-muted);opacity:.4;border-radius:50%;width:10px;height:10px}.share-card-content{font-family:var(--font-mono);color:var(--text-primary);font-size:14px;line-height:1.8}.share-card-content .label{color:var(--text-muted)}.result-actions{gap:var(--space-1);margin-top:var(--space-2);justify-content:center;display:flex}.action-btn{border-radius:var(--radius-sm);font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-surface);cursor:pointer;border:1px solid #0000;align-items:center;gap:6px;padding:6px 16px;font-size:14px;font-weight:500;transition:background .1s;display:inline-flex}.action-btn:hover{background:#ffffff14}.action-btn:focus-visible{outline:2px solid var(--caret-accent);outline-offset:2px}.action-btn.secondary{color:var(--text-muted);background:0 0}.action-btn.secondary:hover{color:var(--text-primary);background:var(--bg-surface)}.shortcut{color:var(--text-muted);opacity:.6;font-size:11px}#custom-panel{justify-content:center;align-items:center;gap:var(--space-2);flex-direction:column;flex:1;display:flex}#custom-textarea{width:100%;max-width:600px;padding:var(--space-2);background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--text-muted);border-radius:var(--radius-sm);font-family:var(--font-mono);resize:vertical;min-height:100px;font-size:16px}#custom-textarea:focus{border-color:var(--caret-accent);outline:none}#custom-textarea:focus-visible{outline:2px solid var(--caret-accent);outline-offset:2px}#custom-confirm{padding:8px 24px}#status-bar{background:var(--bg-surface);height:32px;padding:0 var(--space-2);font-family:var(--font-mono);letter-spacing:.02em;color:var(--text-muted);z-index:50;align-items:center;font-size:13px;font-weight:500;display:flex;position:fixed;bottom:0;left:0;right:0}#status-bar .status-left{align-items:center;gap:12px;display:flex}#status-bar .status-left>span{align-items:center;gap:4px;display:flex}#status-bar .status-center{flex:1;justify-content:center;align-items:center;gap:12px;display:flex}#status-bar .status-right{align-items:center;gap:16px;display:flex}#status-bar .status-right>span{align-items:center;gap:4px;display:flex}#status-wpm{color:var(--caret-accent)}@media (width<=600px){#text-display{font-size:26px}#code-filters{font-size:13px}#mode-bar{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}#mode-bar::-webkit-scrollbar{display:none}.mode-group.right{margin-left:0}.mode-btn{white-space:nowrap;align-items:center;min-height:44px;display:flex}.opt-btn,.lang-btn{align-items:center;min-height:44px;display:flex}#status-bar .status-right{gap:8px}.result-wpm-net{font-size:48px}}