:root{color-scheme:dark;--bg:#111512;--surface:#1b211d;--surface2:#222923;--surface3:#2b332d;--border:#353e36;--border-soft:#2a322c;--ink:#eff2e8;--muted:#919e91;--subtle:#647365;--accent:#d8f09b;--accent-dark:#101a0c;--error:#ed857a;--correct:#f0f4e7;--shadow:0 30px 85px rgba(0,0,0,.19);--page-max:1320px;--test-font-size:35px;--type-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif}
body[data-theme="light"]{color-scheme:light;--bg:#f6f7f0;--surface:#fff;--surface2:#f0f3ea;--surface3:#e8ede2;--border:#d6ded2;--border-soft:#e7ede5;--ink:#1d2a1e;--muted:#617463;--subtle:#8c9c8e;--accent:#44733b;--accent-dark:#fff;--error:#be493e;--correct:#203321;--shadow:0 30px 80px rgba(46,72,51,.065)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);overflow-x:hidden;transition:background .22s,color .22s}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.typing-area:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button,select{touch-action:manipulation}a{color:inherit;text-decoration:none}[hidden]{display:none!important}svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}::selection{background:var(--accent);color:var(--accent-dark)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ambient{position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.3}.ambient-one{background:#4a603e;width:350px;height:350px;top:-250px;left:40%}.ambient-two{background:#2e4931;width:320px;height:320px;right:-250px;top:340px;opacity:.21}body[data-theme="light"] .ambient{opacity:.07}
.app-shell{max-width:var(--page-max);margin:auto;padding:0 40px}.site-header{display:flex;align-items:center;justify-content:space-between;height:110px;border-bottom:1px solid var(--border-soft)}.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}.brand-mark{position:relative;display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:9px;background:var(--accent);color:var(--accent-dark);font-size:22px;font-weight:850;letter-spacing:-2px;line-height:1}.brand-mark>span:first-child{transform:translate(-1px,-1px)}.brand-dot{width:5px;height:5px;border-radius:50%;position:absolute;bottom:6px;right:5px;background:var(--accent-dark)}.brand-name{font-size:24px;font-weight:790;letter-spacing:-1.4px}.brand-period{color:var(--accent)}.brand-divider{width:1px;height:24px;background:var(--border);margin:0 7px 0 2px}.brand-product{font-size:12px;letter-spacing:.3px;font-weight:650;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:24px}.header-link{display:inline-flex;align-items:center;gap:9px;background:none;border:0;color:var(--muted);font-size:13px;font-weight:600;padding:10px 0}.header-link:hover,.icon-button:hover{color:var(--ink)}.header-link svg{width:17px;height:17px}.icon-button{width:38px;height:38px;display:grid;place-items:center;background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:10px}
.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:67px 0 67px}.intro-copy{max-width:720px}.eyebrow{display:flex;align-items:center;gap:11px;font-size:10px;color:var(--accent);letter-spacing:2px;font-weight:730;margin:0 0 26px}.eyebrow-line{width:25px;height:1px;background:var(--accent)}.eyebrow-index{margin-left:7px;opacity:.45}.intro h1{font-size:clamp(45px,5vw,75px);font-weight:620;letter-spacing:-3.8px;line-height:1.06;margin:0}.intro h1 span{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;color:var(--accent);letter-spacing:-3.5px}.intro-description{font-size:15px;color:var(--muted);line-height:1.85;max-width:545px;margin:24px 0 0}.intro-badge{width:162px;height:162px;flex:0 0 162px;position:relative;display:flex;align-items:center;justify-content:center;margin-right:20px;color:var(--muted);transform:rotate(11deg)}.badge-rings span{position:absolute;border:1px solid var(--border);border-radius:50%;inset:0}.badge-rings span:nth-child(2){inset:12px;border-style:dashed}.badge-rings span:nth-child(3){inset:24px}.intro-badge>span{position:relative;text-align:center;font-size:10px;font-weight:700;line-height:1.75;letter-spacing:1.5px;transform:rotate(-11deg)}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}.work-main{min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-heading h2{font-size:13px;font-weight:650;letter-spacing:.1px;margin:0}.small-pill{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:1.25px}.live-dot{height:7px;width:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent)}
.typing-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.modes-row{display:flex;align-items:center;justify-content:space-between;padding:20px 25px;gap:14px;border-bottom:1px solid var(--border-soft)}.modes-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.mode-button{border:1px solid transparent;background:transparent;color:var(--muted);padding:10px 14px;border-radius:8px;font-size:12px;font-weight:650;transition:background .18s,color .18s}.mode-button:hover{color:var(--ink)}.mode-button.active{background:var(--surface3);color:var(--accent);border-color:var(--border)}.language-select{appearance:none;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:7px;padding:10px 28px 10px 12px;font-size:11px;font-weight:700;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%238b9b8c' stroke-width='2'/%3E%3C/svg%3E");background-position:right 7px center;background-size:16px;background-repeat:no-repeat}.config-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 27px;min-height:75px}.config-options{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.limit-option{min-width:37px;border:0;background:none;color:var(--muted);font-size:12px;font-weight:670;padding:7px;border-bottom:1px solid transparent}.limit-option:hover,.limit-option.active{color:var(--accent)}.limit-option.active{border-bottom-color:var(--accent)}.config-toggles{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.mini-toggle{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);cursor:pointer;white-space:nowrap}.mini-toggle input{position:absolute;opacity:0}.toggle-indicator{width:13px;height:13px;border:1px solid var(--subtle);border-radius:3px;display:grid;place-items:center}.mini-toggle input:checked+.toggle-indicator{background:var(--accent);border-color:var(--accent)}.mini-toggle input:checked+.toggle-indicator:after{content:'✓';font-size:10px;font-weight:bold;color:var(--accent-dark)}.mini-toggle input:focus-visible+.toggle-indicator{outline:2px solid var(--accent);outline-offset:3px}.mini-toggle:has(input:checked){color:var(--ink)}
.live-stats{display:flex;align-items:center;gap:23px;padding:15px 27px 21px}.live-stat{min-width:0;flex:1;display:flex;flex-direction:column;gap:9px}.live-stat.stat-time{flex:1.1}.stat-label{color:var(--subtle);font-size:9px;font-weight:750;letter-spacing:1.3px}.live-stat strong{font-size:27px;letter-spacing:-.8px;font-weight:640;line-height:1}.stat-time strong{color:var(--accent)}.stat-unit{font-weight:500;font-size:12px;color:var(--muted);margin-left:4px;letter-spacing:0}.stats-separator{height:31px;width:1px;background:var(--border-soft)}
.typing-area{position:relative;outline:none!important;margin:0 25px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;min-height:300px;transition:border-color .15s,box-shadow .15s}.typing-area:focus-within,.typing-area.is-focused{border-color:color-mix(in srgb,var(--accent) 54%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)}.test-topline{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 10px;gap:12px;font-size:9px;font-weight:780;letter-spacing:1.25px;color:var(--subtle)}.test-topline>span:first-child{color:var(--accent)}.test-online-dot{display:inline-block;width:5px;height:5px;background:var(--accent);border-radius:50%;vertical-align:2px;margin-right:7px}.words-viewport{position:relative;height:188px;overflow:hidden;margin:16px 22px 0}.words-viewport::after{content:"";pointer-events:none;position:sticky;display:block;bottom:0;height:20px;margin-top:-20px;background:linear-gradient(transparent,var(--surface2))}.words-layer{position:relative;font-family:var(--type-font);font-size:var(--test-font-size);line-height:1.88;letter-spacing:-.035em;font-weight:550;white-space:normal;word-wrap:normal;transform:translate3d(0,0,0);transition:transform 230ms cubic-bezier(.22,.8,.24,1);will-change:transform}.word{display:inline-block;white-space:nowrap;vertical-align:baseline}.char{display:inline-block;position:relative;color:var(--subtle);white-space:pre;transition:color 85ms ease}.char.correct{color:var(--correct)}.char.incorrect{color:var(--error);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.smooth-caret{position:absolute;z-index:2;top:0;left:0;width:2px;height:24px;background:var(--accent);border-radius:2px;pointer-events:none;transform:translate3d(0,0,0);transition:width 150ms ease,height 150ms ease,opacity 140ms ease;will-change:transform;animation:cursorblink 1.1s step-end infinite}.typing-area[data-caret="block"] .smooth-caret{width:var(--glyph-width,17px);opacity:.35;border-radius:3px}.typing-area[data-caret="underline"] .smooth-caret{width:var(--glyph-width,17px);height:3px!important;border-radius:2px}.typing-area:not(.is-focused):not(.is-started) .smooth-caret{opacity:.7}.typing-area.is-started .smooth-caret{animation:none}.words-layer.motion-instant,.words-layer.motion-instant .smooth-caret{transition:none!important}@keyframes cursorblink{50%{opacity:0}}.typing-input{position:absolute;top:0;left:0;opacity:0;width:1px;height:1px;border:0;padding:0;resize:none;pointer-events:none;z-index:-1}.typing-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 22px 20px;color:var(--subtle);font-size:10px}.shortcut{flex-shrink:0}kbd{font:inherit;border:1px solid var(--border);border-radius:4px;padding:3px 5px;color:var(--muted);font-size:9px}.test-actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:25px}.primary-action,.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:8px;padding:12px 17px;font-size:11px;font-weight:750;line-height:1.2;min-height:40px}.primary-action{background:var(--accent);color:var(--accent-dark);border:1px solid var(--accent)}.primary-action:hover{filter:brightness(.94)}.secondary-action{background:transparent;color:var(--muted);border:1px solid var(--border)}.secondary-action:hover{color:var(--ink);border-color:var(--muted)}.primary-action svg,.secondary-action svg{height:15px;width:15px}.action-note{font-size:10px;margin-left:auto;color:var(--subtle)}.bottom-footnote{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:23px 0;color:var(--subtle);font-size:10px;line-height:1.6}.bottom-footnote>span:last-child{white-space:nowrap;font-weight:760;font-size:9px;letter-spacing:.7px}.tiny-star{color:var(--accent);font-size:14px;margin-right:4px}.footer-version{color:var(--muted)}
.sidebar{display:flex;flex-direction:column;gap:18px;padding-top:31px}.aside-card{padding:26px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.aside-eyebrow{font-size:9px;letter-spacing:1.25px;color:var(--muted);font-weight:800}.aside-eyebrow span{color:var(--accent);margin-right:4px}.personal-icon{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface2);width:62px;height:62px;border-radius:15px;margin:25px 0 19px;color:var(--accent)}.personal-icon svg{height:37px;width:37px}.aside-card h3{font-size:20px;line-height:1.3;letter-spacing:-.5px;font-weight:650;margin:0 0 12px}.aside-card p{font-size:12px;line-height:1.85;color:var(--muted);margin:0}.personal-figures{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:24px;padding:20px 0}.personal-figures>div{display:flex;flex-direction:column;gap:6px}.personal-figures>div+div{border-left:1px solid var(--border);padding-left:20px}.personal-figures strong{font-size:25px;font-weight:600;letter-spacing:-1px}.personal-figures span{font-size:9px;color:var(--subtle);font-weight:740;letter-spacing:.8px}.aside-cta{display:flex;justify-content:space-between;width:100%;border:0;background:none;color:var(--accent);font-size:11px;font-weight:700;padding:21px 0 0;text-align:left}.aside-cta:hover{text-decoration:underline;text-underline-offset:3px}.aside-cta span{font-size:16px}.setup-card{background:transparent}.setup-header{display:flex;gap:12px;margin:23px 0 20px;align-items:center}.setup-header h3{font-size:13px;letter-spacing:-.2px;margin:0 0 4px}.setup-header p{font-size:10px}.setup-symbol{font-size:23px;color:var(--accent);font-family:serif}.setup-card>label{display:block;font-size:9px;font-weight:750;letter-spacing:1px;color:var(--subtle);margin:16px 0 7px}.setup-card input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:11px 12px;color:var(--ink);font-size:12px;outline:none}.setup-card input::placeholder{color:var(--subtle)}.setup-card input:focus{border-color:var(--accent)}.setup-card .setup-caption{font-size:10px;line-height:1.7;margin-top:15px}.page-footer{display:flex;justify-content:space-between;gap:20px;padding:49px 0 38px;border-top:1px solid var(--border-soft);margin-top:48px;color:var(--subtle);font-size:11px}.page-footer a{font-size:10px;letter-spacing:.9px;color:var(--muted);font-weight:760}.page-footer a:hover{color:var(--accent)}
.result-view{padding:32px 28px 27px}.results-heading{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}.result-eyebrow,.dialog-kicker{font-size:9px;letter-spacing:1.6px;font-weight:750;color:var(--accent)}.results-heading h3{font-size:25px;letter-spacing:-.9px;font-weight:620;margin:12px 0 7px}.results-heading p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.best-pill{white-space:nowrap;font-size:9px;font-weight:800;color:var(--accent-dark);background:var(--accent);border-radius:6px;padding:9px 10px}.results-metrics{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:12px;margin:32px 0 34px}.result-metric{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);background:var(--surface2);border-radius:11px;padding:20px 16px}.result-metric>span{font-size:9px;letter-spacing:1px;font-weight:730;color:var(--subtle)}.result-metric strong{font-size:29px;letter-spacing:-1.4px;font-weight:630}.result-metric.featured{background:var(--accent);color:var(--accent-dark);border-color:var(--accent)}.result-metric.featured span{color:var(--accent-dark);opacity:.7}.result-metric.featured strong{font-size:44px;line-height:1}.result-metric.featured small{font-size:11px;font-weight:800}.chart-header{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:var(--muted);letter-spacing:1.1px;font-weight:760;margin-bottom:15px}.chart-box{height:220px;padding:4px 0;background:var(--surface2);border-radius:10px;border:1px solid var(--border);overflow:hidden}.chart-box svg{display:block;width:100%;height:100%;overflow:visible;stroke:initial;stroke-width:initial}.chart-grid{stroke:var(--border);stroke-width:1;stroke-dasharray:3 5}.chart-line{stroke:var(--accent);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}.chart-area{fill:var(--accent);opacity:.08}.chart-label{font-family:inherit;font-size:10px;fill:var(--muted)}.chart-dot{fill:var(--accent)}.result-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:24px}.result-footer>span{color:var(--muted);font-size:11px}.result-footer>div{display:flex;gap:10px}
.modal{border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--ink);padding:0;width:min(550px,calc(100vw - 32px));max-height:min(85vh,900px);box-shadow:0 50px 100px rgba(0,0,0,.3)}.modal::backdrop{background:rgba(6,10,7,.75);backdrop-filter:blur(6px)}.dialog-head{display:flex;align-items:start;justify-content:space-between;gap:15px;padding:29px 30px 24px;border-bottom:1px solid var(--border)}.dialog-head h2{font-weight:600;letter-spacing:-1.1px;font-size:28px;margin:8px 0 0}.dialog-close{border:1px solid var(--border);border-radius:7px;background:var(--surface2);color:var(--muted);font-size:25px;width:35px;height:35px;line-height:1}.dialog-close:hover{color:var(--ink)}.dialog-body{padding:0 30px 26px;max-height:calc(85vh - 180px);overflow:auto}.setting-section{padding:24px 0;border-bottom:1px solid var(--border-soft)}.setting-section:last-child{border:0}.setting-section h3{font-size:13px;font-weight:750;margin:0 0 6px}.setting-section p{font-size:11px;color:var(--muted);margin:0 0 16px}.selection-row{display:flex;gap:8px;flex-wrap:wrap}.selection-row button{border:1px solid var(--border);background:var(--surface2);padding:10px 16px;border-radius:7px;color:var(--muted);font-size:12px;min-width:85px}.selection-row button.active{background:var(--accent);border-color:var(--accent);color:var(--accent-dark);font-weight:750}.slider-label{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-size:11px;color:var(--muted)}.slider-label output{color:var(--accent);font-weight:750}#fontSize{width:100%;margin-top:12px;accent-color:var(--accent)}.checkbox-setting label{display:flex;gap:12px;align-items:center;color:var(--ink);font-size:12px}.checkbox-setting input{accent-color:var(--accent);width:16px;height:16px}.dialog-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--border);padding:17px 30px}.dialog-bottom>span{font-size:10px;color:var(--muted)}.history-modal{width:min(670px,calc(100vw - 32px))}.history-body{padding-top:26px}.history-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.history-kpis>div{padding:18px 15px;background:var(--surface2);border-radius:9px;border:1px solid var(--border);display:flex;flex-direction:column;gap:12px}.history-kpis span{font-size:9px;font-weight:750;letter-spacing:.7px;color:var(--subtle)}.history-kpis strong{font-size:27px;font-weight:650}.history-subhead{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:26px}.history-subhead h3{font-size:14px;margin:0}.history-subhead>div{display:flex;gap:15px}.text-action{background:none;border:0;color:var(--accent);padding:0;font-size:10px;font-weight:700;text-decoration:underline;text-underline-offset:3px}.text-action:disabled{opacity:.45;cursor:not-allowed}.history-list{margin-top:13px}.history-item{display:grid;grid-template-columns:65px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border-soft)}.history-item strong{font-size:23px;font-weight:600;color:var(--accent);letter-spacing:-1px}.history-item strong span{font-size:9px;letter-spacing:0;color:var(--muted);font-weight:600}.history-item .history-desc{display:flex;flex-direction:column;gap:5px;min-width:0}.history-desc b{font-size:12px;font-weight:670}.history-desc small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-accuracy{font-size:11px;color:var(--muted)}.history-empty{font-size:12px;color:var(--muted);text-align:center;line-height:1.8;padding:34px 15px;border:1px dashed var(--border);border-radius:10px}.danger-zone{display:flex;justify-content:space-between;gap:14px;align-items:center;padding-top:22px}.danger-zone span{font-size:10px;color:var(--subtle)}.danger-action{color:var(--error)}.custom-description{font-size:12px;line-height:1.8;color:var(--muted);margin:25px 0}.custom-label{font-size:9px;letter-spacing:1.1px;font-weight:750;color:var(--subtle)}.custom-textarea{display:block;width:100%;margin-top:10px;padding:14px;resize:vertical;min-height:160px;background:var(--surface2);color:var(--ink);border:1px solid var(--border);border-radius:10px;font-size:13px;line-height:1.7;outline:none}.custom-textarea:focus{border-color:var(--accent)}.form-error{color:var(--error);font-size:11px;min-height:14px}.toast{position:fixed;bottom:27px;left:50%;transform:translate(-50%,20px);color:var(--accent-dark);background:var(--accent);box-shadow:0 12px 40px rgba(0,0,0,.25);padding:13px 20px;font-weight:730;font-size:12px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:99;text-align:center}.toast.visible{transform:translate(-50%,0);opacity:1}
@media(max-width:1100px){.app-shell{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 260px;gap:18px}.aside-card{padding:20px}.typing-area{margin:0 19px}.modes-row{padding:17px 18px}.config-row{padding:17px 19px}.live-stats{padding:16px 19px 21px;gap:15px}.test-actions{padding:20px}.action-note{display:none}.config-toggles{gap:9px}}
@media(max-width:850px){.intro{padding:48px 0}.intro-badge{display:none}.workspace{grid-template-columns:1fr}.sidebar{padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:15px}.bottom-footnote{padding:17px 0 28px}.personal-card .personal-icon{margin:15px 0}.setup-card{background:var(--surface)}.page-footer{margin-top:28px}}
@media(max-width:560px){.app-shell{padding:0 16px}.site-header{height:75px}.brand-mark{width:31px;height:31px}.brand-name{font-size:21px}.brand-divider{margin:0 1px}.brand-product{font-size:10px}.header-actions{gap:9px}.header-link{padding:6px}.header-link span{display:none}.header-link svg{height:19px;width:19px}.icon-button{width:34px;height:34px}.intro{padding:45px 0 38px}.intro h1{font-size:50px;letter-spacing:-2.7px}.intro h1 span{letter-spacing:-2.7px}.intro-description{font-size:13px;line-height:1.75;margin-top:20px}.eyebrow{font-size:8px;margin-bottom:20px;letter-spacing:1.4px}.section-heading h2{font-size:12px}.small-pill{font-size:8px}.typing-card{border-radius:12px}.modes-row{align-items:flex-start;flex-direction:column;padding:15px;gap:12px}.mode-button{font-size:11px;padding:9px}.settings-compact{align-self:flex-end}.config-row{flex-direction:column;align-items:flex-start;padding:13px 17px;gap:12px}.config-toggles{gap:15px}.live-stats{gap:7px;padding:18px 14px}.stat-label{font-size:8px;letter-spacing:.7px}.live-stat strong{font-size:22px}.stat-unit{font-size:9px;margin-left:2px}.stats-separator{height:28px}.typing-area{margin:0 12px;min-height:280px}.words-viewport{height:171px;margin:12px 14px 0}.test-topline{padding:15px 14px 9px;font-size:8px}.typing-hint{padding:11px 14px 17px;font-size:9px}.shortcut{display:none}.test-actions{padding:16px 12px;gap:8px}.primary-action,.secondary-action{padding:11px 12px;font-size:10px}.result-view{padding:20px 15px}.results-heading h3{font-size:21px}.results-metrics{grid-template-columns:repeat(2,1fr);gap:8px;margin:25px 0}.result-metric{padding:13px}.result-metric strong{font-size:26px}.result-metric.featured strong{font-size:35px}.chart-box{height:175px}.result-footer{align-items:stretch;flex-direction:column}.result-footer>div{align-self:flex-end}.sidebar{grid-template-columns:1fr}.aside-card{padding:23px}.personal-card .personal-icon{margin:18px 0}.bottom-footnote{flex-wrap:wrap}.bottom-footnote>span:last-child{margin-left:auto}.page-footer{display:block;line-height:1.8}.page-footer a{display:block;margin-top:12px}.dialog-head{padding:23px 19px 20px}.dialog-body{padding:0 19px 19px}.dialog-bottom{padding:16px 19px}.dialog-head h2{font-size:24px}.history-kpis{gap:5px}.history-kpis>div{padding:12px 8px}.history-kpis span{font-size:8px}.history-kpis strong{font-size:21px}.history-subhead{align-items:start;flex-direction:column}.history-subhead>div{align-self:flex-end}.history-item{grid-template-columns:56px minmax(0,1fr) 40px;gap:9px}.history-item strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* PressKey / v0.3 — editorial layout and distraction-free focus mode.
   On the Ghost site, these variables inherit the selected Okiro/Ghost fonts and
   accent color. The standalone file uses system-font and neutral-color fallbacks.
   This stylesheet remains isolated from Ghost and does not modify the theme. */
:root {
  --page-max: 1180px;
  --bg: #f8f8f5;
  --surface: #ffffff;
  --surface2: #f3f3f0;
  --surface3: #ebede9;
  --border: #deded9;
  --border-soft: #eaeae6;
  --ink: #191b19;
  --muted: #676c67;
  --subtle: #91968e;
  --accent: var(--gh-accent-color, #272f29);
  --accent-dark: #ffffff;
  --correct: #202723;
  --error: #b4493b;
  --shadow: none;
  font-family: var(--gh-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
}
body[data-theme="dark"] {
  --bg: #161816;
  --surface: #1a1d1a;
  --surface2: #232623;
  --surface3: #2c302c;
  --border: #3d403a;
  --border-soft: #30342f;
  --ink: #eeeee9;
  --muted: #a1a49b;
  --subtle: #74786e;
  --accent: var(--gh-accent-color, #e7ece5);
  --accent-dark: #161816;
  --correct: #eeeee9;
  --error: #ed9387;
}
body[data-theme="light"] { --accent: var(--gh-accent-color, #272f29); --accent-dark:#ffffff; }
body { background: var(--bg); }
.site-header { height: 85px; border-bottom-color: var(--border-soft); }
.brand-mark { border-radius: 50%; }
.brand-name { font-family:var(--gh-font-heading,inherit); }
.intro { padding: 73px 0 62px; }
.intro-copy { max-width:850px; }
.eyebrow { color:var(--muted); font-weight:600; letter-spacing:1.1px; margin-bottom:19px; }
.intro h1 { font-family:var(--gh-font-heading,inherit); font-size:clamp(42px,4.6vw,63px); font-weight:650; letter-spacing:-2.7px; line-height:1.1; }
.intro h1 .title-dot { color:var(--accent); font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit; }
.intro-description { margin-top:18px; max-width:630px; font-size:15px; line-height:1.65; }
.workspace { display:block; width:100%; margin:0 auto; max-width:1060px; }
.work-main { width:100%; }
.section-heading { margin:0 0 16px; }
.section-heading h2 { font-family:var(--gh-font-heading,inherit); font-size:14px; }
.typing-card { overflow:visible; background:transparent; border:0; border-radius:0; box-shadow:none; }
.modes-row { border:1px solid var(--border-soft); background:var(--surface); padding:13px 19px; border-radius:12px 12px 0 0; }
.config-row { border:1px solid var(--border-soft); border-top:0; background:var(--surface); padding:12px 23px; min-height:59px; border-radius:0 0 12px 12px; }
.mode-button.active { border-color:transparent; background:var(--surface3); color:var(--ink); }
.limit-option.active,.limit-option:hover { color:var(--ink); border-bottom-color:var(--ink); }
.live-stats { max-width:830px; margin:0 auto; padding:45px 0 30px; }
.typing-area { margin:0; background:transparent; border:0; border-radius:0; box-shadow:none; min-height:260px; }
.typing-area:focus-within,.typing-area.is-focused {border-color:transparent;box-shadow:none;}
.test-topline { padding:15px 0 10px; font-size:10px; }
.test-topline>span:first-child {color:var(--muted);}
.test-online-dot { background:var(--muted); }
.words-viewport { height:200px; margin:20px 0 0; }
.words-viewport::after { background:linear-gradient(transparent,var(--bg)); }
.words-layer { font-weight:510; line-height:1.82; letter-spacing:-.022em; }
.typing-hint { padding:18px 0; }
.test-actions { border-top:1px solid var(--border-soft); padding:19px 0; }
.sidebar { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:53px; }
.aside-card { padding:26px 30px; box-shadow:none; }
.personal-card .personal-icon { margin:20px 0 10px; }
.bottom-footnote { padding:14px 0 0; }
.page-footer { margin-top:55px; }
.result-view { padding:40px 0 10px; }
.results-heading h3 { font-family:var(--gh-font-heading,inherit); }
/* PressKey 0.5: the typing stage has identical geometry before and during typing.
   Only its surrounding chrome changes visibility. */
.site-header,.intro,.section-heading,.modes-row,.config-row,.live-stats,
.test-topline .test-caption,.test-topline #textProgress,.typing-hint,
.test-actions,.bottom-footnote,.sidebar,.page-footer {
  transition:opacity 220ms ease,visibility 220ms ease;
}
body.is-typing:not(.focus-ui-visible) :is(
  .site-header,.intro,.section-heading,.modes-row,.config-row,.live-stats,
  .test-topline .test-caption,.test-topline #textProgress,.typing-hint,
  .test-actions,.bottom-footnote,.sidebar,.page-footer) {
  opacity:0;visibility:hidden;pointer-events:none;
}
body.is-typing .toast {visibility:hidden!important;}
@media (prefers-reduced-motion:reduce) {
  .site-header,.intro,.section-heading,.modes-row,.config-row,.live-stats,
  .test-topline .test-caption,.test-topline #textProgress,.typing-hint,
  .test-actions,.bottom-footnote,.sidebar,.page-footer {transition:none;}
}

/* v0.4: UI palette chooser, Okiro-like overlay, discreet countdown in focus. */
body { font-family:var(--gh-font-body,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif); }
.site-header,.mode-button,.result-view,.dialog-head h2,h1,h2,h3 { font-family:var(--gh-font-heading,var(--gh-font-body,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)); }
.site-header { background:var(--bg); }
.typing-area { isolation:isolate; }
.typing-card { isolation:isolate; }
.words-viewport { overflow:hidden; }
.words-layer { -webkit-font-smoothing:antialiased; }
.theme-picker-link { display:flex;justify-content:space-between;align-items:center;width:100%;border:1px solid var(--border);background:var(--surface2);color:var(--ink);border-radius:11px;padding:14px 17px;text-align:left;transition:border-color .2s; }
.theme-picker-link:hover { border-color:var(--muted); }
.theme-picker-link>span:first-child { display:flex;flex-direction:column;gap:4px; }
.theme-picker-link strong { font-size:14px;font-weight:650; }
.theme-picker-link small { color:var(--muted);font-size:11px; }
.theme-picker-link>span:last-child { font-size:21px;color:var(--muted); }
.theme-modal { max-width:850px;width:min(94vw,850px);max-height:min(89dvh,940px); }
.theme-dialog-body { padding-top:10px; }
.appearance-heading { display:flex;gap:15px;align-items:center;justify-content:space-between;padding:0 0 23px;border-bottom:1px solid var(--border-soft); }
.appearance-heading h3,.theme-grid-heading h3 { margin:0;font-size:14px;font-weight:670; }
.appearance-heading p { margin:6px 0 0;color:var(--muted);font-size:11px; }
.appearance-heading .selection-row { flex-shrink:0; }
.theme-grid-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:26px 0 15px; }
.theme-grid-heading>span { color:var(--subtle);font-size:9px;letter-spacing:1.15px;font-weight:730; }
.palette-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px; }
.palette-tile { display:block;position:relative;border:1px solid var(--border);border-radius:12px;text-align:left;overflow:hidden;background:var(--surface);padding:0;color:var(--ink);transition:border-color .18s,transform .18s; }
.palette-tile:hover { border-color:var(--accent);transform:translateY(-1px); }
.palette-tile.active { border:2px solid var(--accent); }
.palette-tile.active::after { content:'✓';display:grid;place-items:center;position:absolute;right:13px;bottom:16px;background:var(--accent);color:var(--accent-dark);width:19px;height:19px;border-radius:100%;font-size:12px;font-weight:800; }
.palette-preview { display:block;background:var(--tile-bg);color:var(--tile-text);height:97px;padding:16px 20px; }
.palette-rainbow,.palette-swatches { display:flex;width:125px;height:5px;gap:2px; }
.palette-rainbow i,.palette-swatches i { display:block;flex:1;border-radius:1px; }
.palette-demo { font:500 20px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.8px;display:block;margin-top:17px;white-space:nowrap; }
.palette-demo b { color:var(--tile-accent);font-weight:600; }
.palette-demo::first-letter { color:var(--tile-text); }
.palette-caption { display:flex;flex-direction:column;gap:3px;min-height:67px;padding:13px 17px; }
.palette-caption strong { font-size:12px;line-height:1.3; }
.palette-caption small { font-size:10px;color:var(--muted); }
.theme-note { color:var(--muted);font-size:11px;line-height:1.7;margin:20px 0 4px; }
body[data-palette="six-colors"] .brand-period { color:#e59f4e; }
.theme-modal::backdrop,.modal::backdrop { background:rgba(5,8,11,.66);backdrop-filter:blur(3px); }
@media (max-width:600px) {
  .theme-modal { width:calc(100vw - 22px);max-height:91dvh; }
  .theme-dialog-body { padding-top:8px; }
  .appearance-heading { flex-direction:column;align-items:flex-start; }
  .appearance-heading .selection-row { width:100%;flex-wrap:wrap; }
  .palette-grid { gap:9px; }
  .palette-preview { height:85px;padding:12px; }
  .palette-rainbow,.palette-swatches { width:85px; }
  .palette-demo { font-size:15px;letter-spacing:-.5px;margin-top:16px; }
  .palette-caption { padding:12px;min-height:67px; }
  .palette-caption strong { font-size:11px; }
  .palette-caption small { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { .palette-tile { transition:none; } }

/* v0.5 — Stable canvas: controls live around the immutable typing stage. */
.app-shell { max-width:1220px; }
.site-header { height:74px; }
.intro { padding:30px 0 25px; }
.eyebrow {margin-bottom:8px;font-size:9px;}
.intro h1 {font-size:clamp(30px,3.2vw,40px);letter-spacing:-1.4px;line-height:1.14;}
.intro-description {margin-top:7px;font-size:12px;line-height:1.6;max-width:660px;}
.workspace { max-width:1080px; }
.section-heading {margin-bottom:12px;}
.modes-row { padding:10px 17px; }
.config-row { padding:10px 19px; min-height:53px; }
.live-stats {padding:22px 0 19px;max-width:940px;}
.live-stat {gap:6px;}
.live-stat strong {font-size:24px;}
.typing-area {min-height:300px;}
.test-topline {position:relative;min-height:72px;padding:0 0 10px;align-items:flex-end;}
.words-viewport {height:198px;margin:0;}
.words-layer {line-height:1.82;}
.typing-hint {padding:9px 0 18px;}
.test-actions {border-top:1px solid var(--border-soft);padding:14px 0;}
.bottom-footnote {padding:9px 0;}
.sidebar {margin-top:32px;}
.page-footer {margin-top:34px;}
/* A timer is a high contrast, stable overlay within the reserved topline.
   Color is deliberately separate from typed, pending and caret colors. */
.focus-timer {
  position:absolute;top:7px;left:0;z-index:3;
  display:none;min-width:68px;height:48px;padding:0 13px;
  justify-content:center;align-items:center;
  pointer-events:none;user-select:none;border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-variant-numeric:tabular-nums;font-size:32px;line-height:1;
  font-weight:800;letter-spacing:-.06em;
  background:var(--timer-bg);color:var(--timer-fg);
  box-shadow:0 4px 22px rgba(0,0,0,.17);
}
body.is-typing[data-test-mode="time"] .focus-timer {display:flex;}
body.is-typing .test-caption {visibility:hidden;opacity:0;}
.focus-timer.is-urgent {background:var(--timer-urgent-bg);color:var(--timer-urgent-fg);}
/* The stage itself never receives focus-specific dimensions or positioning. */
body.is-typing .work-main,body.is-typing .typing-card,
body.is-typing .typing-area,body.is-typing .words-viewport,
body.is-typing .words-layer {position:relative;inset:auto;transform:none;max-width:initial;}
/* Keep the word layer's own transform controlled by JS for smooth scrolling. */
body.is-typing .words-layer {transform:translate3d(0,0,0);}
/* CSS does not override JS inline transforms. The last rule provides a safe default. */
@media (max-width:850px) {
  .intro {padding:24px 0 21px;}
  .live-stats {padding:18px 0 15px;}
}
@media (max-width:600px) {
  .site-header {height:66px;}
  .intro {padding:19px 0 19px;}
  .intro h1 {font-size:30px;letter-spacing:-.9px;}
  .intro-description {font-size:11px;line-height:1.55;}
  .section-heading {margin-bottom:10px;}
  .modes-row {padding:10px;}
  .config-row {padding:8px 10px;min-height:46px;}
  .live-stats {padding:19px 0 12px;gap:10px;}
  .live-stat strong {font-size:21px;}
  .typing-area {min-height:245px;}
  .test-topline {min-height:64px;padding:0 0 10px;}
  .focus-timer {height:43px;min-width:64px;font-size:28px;top:5px;}
  .words-viewport {height:166px;margin:0;}
  .typing-hint {padding:10px 0 14px;}
  .test-actions {padding:14px 0;}
  .sidebar {margin-top:27px;}
}


/* v0.6 — signature themes, genuine key audio settings and richer analytics */
/* Pending text is less bright than completed text for every theme. */
.words-layer .char:not(.correct):not(.incorrect) { color:var(--pending,var(--subtle)); }
.words-layer .char.correct { color:var(--correct); }
.smooth-caret { background:var(--caret-color,var(--accent)); }
/* Six Colors has an unmistakable six-colour typing treatment, not just a swatch. */
body[data-palette="six-colors"] .words-layer .word .char.correct { color:var(--word-color); }
body[data-palette="six-colors"] .smooth-caret {background:linear-gradient(180deg,#71bc7b 0%,#e4bf4f 25%,#ec8848 50%,#9d79ba 75%,#709ad2 100%);width:3px;}
body[data-palette="six-colors"] .test-topline::after {content:"";position:absolute;top:0;left:0;width:130px;height:4px;border-radius:4px;background:linear-gradient(90deg,#63a46b,#e4bf4f,#e78c4c,#d96555,#9d79ba,#709ad2);}
body[data-palette="six-colors"] .focus-timer {border-bottom:4px solid transparent;border-image:linear-gradient(90deg,#63a46b,#e4bf4f,#e78c4c,#d96555,#9d79ba,#709ad2) 1;}
body[data-palette="six-colors"] .result-metric.featured {background:linear-gradient(112deg,#56885a 0%,#b78428 24%,#bb5d3e 49%,#8859a1 75%,#4069a0 100%);color:#fff;border-color:transparent;}
body[data-palette="six-colors"] .result-metric.featured span {color:#fff;}
body[data-palette="six-colors"] .result-metric.featured strong {color:#fff;}
body[data-palette="six-colors"] .brand-period {color:#e6aa53;}
body[data-palette="midnight"] {--shadow:none;}
body[data-palette="midnight"][data-theme="dark"] .words-layer .char.correct {color:#ecf4ff;}
body[data-palette="midnight"][data-theme="dark"] .words-layer .char:not(.correct):not(.incorrect) {color:#536686;}
body[data-palette="midnight"][data-theme="dark"] .test-topline {color:#7dbad6;}
body[data-palette="midnight"][data-theme="dark"] .focus-timer {background:#83d5f5;color:#091323;}
body[data-palette="terminal"] .words-layer {letter-spacing:-.005em;}
body[data-palette="amber"] .words-layer {letter-spacing:-.015em;}
body[data-palette="macintosh"] .smooth-caret {border-radius:0;}
body[data-palette="commodore"] .mode-button.active {border-radius:1px;}
body[data-palette="paper"] .words-layer {font-weight:470;}
/* The default muted original green ambient halos would distort several themes. */
.ambient {display:none;}
.sound-setting-row {display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.preview-sound {border:1px solid var(--border);border-radius:8px;background:var(--surface3);color:var(--ink);font-size:11px;font-weight:700;padding:10px 14px;}
.preview-sound:hover:not(:disabled) {border-color:var(--accent);}
.preview-sound:disabled {opacity:.4;cursor:not-allowed;}
.sound-note {display:block;margin:10px 0 0;color:var(--muted);font-size:10px;}
.chart-legend {display:flex;align-items:center;gap:21px;flex-wrap:wrap;margin:-2px 0 14px;font-size:10px;color:var(--muted);}
.chart-legend>span {display:inline-flex;align-items:center;gap:7px;}
.chart-legend i {display:inline-block;width:24px;height:0;border-top:3px solid var(--accent);border-radius:10px;}
.chart-legend .legend-raw {border-top-color:var(--raw-line);border-top-style:dashed;}
.chart-legend .legend-errors {width:10px;height:10px;border:0;border-radius:2px;background:var(--error);}
.chart-box {height:294px;position:relative;padding:13px 12px;background:var(--surface);border-radius:15px;border:1px solid var(--border-soft);overflow:hidden;outline:none;}
.chart-box:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
.chart-box svg {overflow:hidden;}
.chart-grid {stroke:var(--border-soft);stroke-width:1;stroke-dasharray:4 5;}
.chart-average {stroke:var(--accent);stroke-width:1;stroke-dasharray:3 7;opacity:.46;}
.chart-average-label {font-size:11px;fill:var(--accent);font-weight:730;}
.chart-speed-area {fill:url(#presskeySpeedArea);}
.chart-speed-line {fill:none;stroke:var(--accent);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;}
.chart-raw-line {fill:none;stroke:var(--raw-line);stroke-width:2;stroke-dasharray:7 7;stroke-linejoin:round;opacity:.93;}
.chart-error-tick {stroke:var(--error);stroke-width:5;stroke-linecap:round;}
.chart-selection-line {stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4;opacity:.85;}
.chart-selection-speed {stroke:var(--surface);stroke-width:2.2;fill:var(--accent);}
.chart-selection-raw {stroke:var(--surface);stroke-width:2;fill:var(--raw-line);}
.chart-tooltip {position:absolute;top:20px;transform:translateX(10px);pointer-events:none;min-width:149px;display:flex;flex-direction:column;gap:5px;padding:13px 15px;background:var(--ink);color:var(--bg);border-radius:10px;box-shadow:0 8px 32px #0002;font-size:11px;z-index:5;}
.chart-tooltip[hidden] {display:none!important;}
.chart-tooltip.flip {transform:translateX(calc(-100% - 10px));}
.chart-tooltip strong {font-size:12px;margin-bottom:2px;}
.chart-insights {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 0;}
.chart-insight {min-width:0;background:var(--surface2);border:1px solid var(--border-soft);border-radius:12px;padding:16px 17px;display:flex;flex-direction:column;gap:5px;}
.chart-insight>span {font-size:9px;color:var(--muted);letter-spacing:1px;font-weight:750;}
.chart-insight strong {font-size:23px;font-weight:670;letter-spacing:-.7px;color:var(--ink);}
.chart-insight small {color:var(--muted);font-size:10px;}
body[data-palette="six-colors"] .chart-speed-line {stroke:#e6b64c;}
body[data-palette="six-colors"] .chart-raw-line {stroke:#85bced;}
body[data-palette="six-colors"] .chart-error-tick {stroke:#e87d72;}
@media(max-width:600px) {
  .chart-box {height:244px;padding:8px 4px;}
  .chart-legend {gap:12px;font-size:9px;}
  .chart-insights {gap:7px;}
  .chart-insight {padding:12px 9px;}
  .chart-insight strong {font-size:17px;}
  .chart-insight small {font-size:9px;}
  .chart-tooltip {min-width:126px;padding:9px 10px;font-size:10px;}
  .sound-setting-row {align-items:flex-start;}
}



/* PressKey 1.0 — compact result actions in the upper-right corner. */
.results-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.results-heading-side{display:flex;align-items:flex-end;gap:10px;flex-direction:column;min-width:280px;}
.results-click-anywhere{display:inline-flex;align-items:center;gap:8px;color:var(--subtle);font-size:11px;font-weight:600;padding:8px 11px;border:1px dashed var(--border);border-radius:999px;background:color-mix(in srgb,var(--surface2) 76%, transparent 24%);text-align:center;}
.results-click-anywhere::before{content:'↵';font-weight:800;color:var(--accent);font-size:12px;}
.results-top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.mini-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--border);font-family:var(--gh-font-heading,inherit);font-size:12px;font-weight:750;cursor:pointer;transition:filter .16s ease,transform .16s ease,box-shadow .16s ease;background:var(--surface2);color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.04);}
.mini-action svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.mini-action:hover{filter:brightness(.97);transform:translateY(-1px);}
.mini-action:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.mini-new{background:var(--accent);border-color:var(--accent);color:var(--accent-dark);}
.mini-repeat{background:var(--surface2);color:var(--ink);}
@media(max-width:760px){.results-heading-side{align-items:flex-start;width:100%;min-width:0}.results-top-actions{justify-content:flex-start}.results-click-anywhere{width:100%;justify-content:center;}.mini-action{min-height:40px;}}
@media(prefers-reduced-motion:reduce){.mini-action{transition:none;}}

body[data-palette="sprint-blue"] .aside-card, body[data-palette="sprint-blue"] .modal {box-shadow:0 18px 45px rgba(3,10,27,.22);}
body[data-palette="sprint-blue"] .words-layer .char:not(.correct):not(.incorrect){color:rgba(255,255,255,.46);}
body[data-palette="sprint-blue"] .words-layer .char.correct{color:#ffffff;font-weight:550;}
body[data-palette="sprint-blue"] .words-layer .char.incorrect{background:rgba(239,78,93,.18);border-radius:6px;text-decoration:none;padding-inline:1px;}
body[data-palette="sprint-blue"] .result-metric.featured{background:linear-gradient(135deg,#10243d 0%,#16365c 58%,#1b4270 100%);color:#fff;border-color:rgba(255,255,255,.08);}
body[data-palette="sprint-blue"] .result-metric.featured span,body[data-palette="sprint-blue"] .result-metric.featured strong,body[data-palette="sprint-blue"] .result-metric.featured small{color:#fff;}
body[data-palette="sprint-blue"] .chart-speed-line{stroke:#ffffff;}
body[data-palette="sprint-blue"] .chart-area{fill:#ffffff;opacity:.14;}
body[data-palette="sprint-blue"] .chart-raw-line{stroke:rgba(255,255,255,.45);}
body[data-palette="sprint-blue"] .chart-selection-speed{fill:#4ed766;}
body[data-palette="sprint-blue"] .chart-selection-raw{fill:#ffffff;}
body[data-palette="sprint-blue"] .chart-error-tick{stroke:#ef4e5d;}
body[data-palette="sprint-blue"] .chart-tooltip{background:rgba(7,18,34,.96);border-color:rgba(255,255,255,.12);}
@media (max-width: 760px){
  .dock-buttons{grid-template-columns:1fr;}
  .results-heading-side{align-items:flex-start;width:100%;}
  .results-click-anywhere{width:100%;justify-content:center;}
}


/* PressKey 0.9 — results actions live at the top and are easier to spot. */
.result-restart-dock {position:sticky; top:14px; z-index:8; border-radius:18px; padding:16px; margin:0 0 24px; background:color-mix(in srgb,var(--surface2) 92%,var(--bg) 8%);}
.result-restart-dock::after{content:'';position:absolute;inset:auto 14px -1px 14px;height:1px;background:color-mix(in srgb,var(--border) 72%, transparent 28%);}
.dock-heading{font-size:10px;letter-spacing:1px;color:var(--accent);}
.dock-subtitle{font-size:12px;max-width:62ch;}
.dock-buttons{grid-template-columns:1.15fr 1fr;align-items:stretch;}
.dock-button{min-height:54px;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.08);}
.dock-button span{display:block;}
.results-click-anywhere{font-size:12px;font-weight:700;}
@media(max-width:760px){.result-restart-dock{position:relative;top:0}.dock-buttons{grid-template-columns:1fr;}}

/* Sprint Blue — based on the user's reference screenshot: grey pending text,
   white completed words, green time highlight, red urgent state. */
body[data-palette="sprint-blue"] .words-layer .char:not(.correct):not(.incorrect){color:color-mix(in srgb,var(--ink) 34%, transparent 66%);}
body[data-palette="sprint-blue"] .words-layer .char.correct{color:var(--ink);font-weight:560;}
body[data-palette="sprint-blue"] .words-layer .char.incorrect{background:color-mix(in srgb,var(--error) 18%, transparent 82%);border-radius:6px;text-decoration:none;padding-inline:1px;color:var(--ink);}
body[data-palette="sprint-blue"] .focus-timer{background:var(--accent);color:#0d2137;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 24%, transparent 76%);}
body[data-palette="sprint-blue"] .focus-timer.is-urgent{background:var(--error);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--error) 24%, transparent 76%);}
body[data-palette="sprint-blue"] .result-metric.featured{background:linear-gradient(135deg,#10243d 0%,#16365c 58%,#1b4270 100%);color:#fff;border-color:rgba(255,255,255,.08);}
body[data-palette="sprint-blue"] .result-metric.featured span,body[data-palette="sprint-blue"] .result-metric.featured strong,body[data-palette="sprint-blue"] .result-metric.featured small{color:#fff;}
body[data-palette="sprint-blue"] .chart-speed-line{stroke:#ffffff;}
body[data-palette="sprint-blue"] .chart-area{fill:#ffffff;opacity:.14;}
body[data-palette="sprint-blue"] .chart-raw-line{stroke:rgba(255,255,255,.45);}
body[data-palette="sprint-blue"] .chart-selection-speed{fill:#44d264;}
body[data-palette="sprint-blue"] .chart-selection-raw{fill:#ffffff;}
body[data-palette="sprint-blue"] .chart-error-tick{stroke:#ef5b69;}
body[data-palette="sprint-blue"] .chart-tooltip{background:rgba(7,18,34,.96);border-color:rgba(255,255,255,.12);}


/* PressKey 1.1 — cleaner result header and lighter metric cards */
.results-heading{gap:14px;}
.results-heading p{max-width:44ch;}
.results-heading-side{gap:12px;align-items:flex-end;}
.results-top-actions{gap:8px;}
.results-click-anywhere{gap:8px;padding:7px 11px;font-size:11px;font-weight:700;}
.results-click-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%, transparent 84%);color:var(--accent);font-size:11px;font-weight:900;}
.results-click-text{display:inline-block;}
.best-pill{display:inline-flex;align-items:center;gap:9px;padding:9px 12px;border-radius:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 90%, white 10%) 0%, color-mix(in srgb,var(--accent) 72%, var(--surface2) 28%) 100%);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 20%, transparent 80%);}
.best-pill svg{width:18px;height:18px;stroke:var(--accent-dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.best-pill span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;}
.best-pill strong{font-size:10px;letter-spacing:.2px;color:var(--accent-dark);}
.best-pill small{font-size:9px;opacity:.78;color:var(--accent-dark);font-weight:700;}
.results-metrics{grid-template-columns:1.05fr repeat(3,1fr);gap:10px;margin:22px 0 26px;}
.result-metric{gap:8px;border-radius:12px;padding:16px 14px;min-height:104px;justify-content:flex-start;}
.result-metric strong{font-size:25px;letter-spacing:-1.1px;}
.result-metric.featured strong{font-size:38px;}
.result-metric.featured small{font-size:10px;letter-spacing:.5px;}
.result-metric>span{font-size:8.5px;letter-spacing:1.05px;}
.celebration-layer{position:relative;height:0;pointer-events:none;z-index:5;}
.confetti-piece{position:absolute;top:0;width:10px;height:14px;border-radius:2px;opacity:0;animation:confetti-fall 1300ms cubic-bezier(.18,.67,.35,1) forwards;transform-origin:center;}
@keyframes confetti-fall{0%{opacity:0;transform:translateY(0) translateX(0) rotate(0deg) scale(.7);}8%{opacity:1;}100%{opacity:0;transform:translateY(130px) translateX(var(--drift, 0px)) rotate(var(--spin, 220deg)) scale(1);}}
@media(max-width:860px){.results-metrics{grid-template-columns:repeat(2,1fr);} .result-metric.featured{grid-column:span 2;}}
@media(max-width:760px){.results-heading-side{align-items:flex-start;width:100%;} .results-top-actions{justify-content:flex-start;} .results-click-anywhere{align-self:stretch;justify-content:flex-start;} .result-metric{min-height:94px;padding:14px 13px;} .result-metric strong{font-size:23px;} .result-metric.featured strong{font-size:34px;}}

/* Sprint Blue explicit light/dark variants */
body[data-palette="sprint-blue"][data-theme="dark"] .aside-card,
body[data-palette="sprint-blue"][data-theme="dark"] .modal{box-shadow:0 18px 45px rgba(3,10,27,.34);}
body[data-palette="sprint-blue"][data-theme="dark"] .words-layer .char:not(.correct):not(.incorrect){color:rgba(245,247,251,.46);}
body[data-palette="sprint-blue"][data-theme="dark"] .words-layer .char.correct{color:#ffffff;font-weight:560;}
body[data-palette="sprint-blue"][data-theme="dark"] .words-layer .char.incorrect{background:rgba(239,91,105,.2);border-radius:6px;text-decoration:none;padding-inline:1px;color:#fff;}
body[data-palette="sprint-blue"][data-theme="dark"] .focus-timer{background:#44d264;color:#0d2137;box-shadow:0 10px 24px rgba(68,210,100,.22);}
body[data-palette="sprint-blue"][data-theme="dark"] .focus-timer.is-urgent{background:#ef5b69;color:#fff;box-shadow:0 10px 24px rgba(239,91,105,.24);}
body[data-palette="sprint-blue"][data-theme="light"] .aside-card,
body[data-palette="sprint-blue"][data-theme="light"] .modal{box-shadow:0 18px 45px rgba(23,49,77,.10);}
body[data-palette="sprint-blue"][data-theme="light"] .words-layer .char:not(.correct):not(.incorrect){color:rgba(23,49,77,.31);}
body[data-palette="sprint-blue"][data-theme="light"] .words-layer .char.correct{color:#17314d;font-weight:560;}
body[data-palette="sprint-blue"][data-theme="light"] .words-layer .char.incorrect{background:rgba(217,74,88,.14);border-radius:6px;text-decoration:none;padding-inline:1px;color:#17314d;}
body[data-palette="sprint-blue"][data-theme="light"] .focus-timer{background:#35bb5a;color:#ffffff;box-shadow:0 10px 24px rgba(53,187,90,.18);}
body[data-palette="sprint-blue"][data-theme="light"] .focus-timer.is-urgent{background:#d94a58;color:#fff;box-shadow:0 10px 24px rgba(217,74,88,.18);}


/* v1.2: the stage is an unboxed, transparent canvas in every theme. */
body[data-palette="sprint-blue"] .typing-card {
  background:transparent;
  box-shadow:none;
  border:0;
}
/* Prevent Chrome/Safari from anchoring the document to a deleted typing field
   when a completed test swaps the stage for the results. */
html { scroll-behavior:auto; overflow-anchor:none; }
body { overflow-anchor:none; }


/* v1.4 viewport alignment: center via page scroll, not via fixed or absolute
   positioning. Disable browser scroll anchoring on the text viewport only. */
.words-viewport { overflow-anchor: none; }

/* PressKey Typing Lab 1.5 — quiet control rail.
   Keep the original DOM order and the exact same geometry in Focus;
   only remove visual weight from the two surrounding control rows. */
.modes-row,
.config-row {
  border: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--bg) 96%, var(--ink) 4%);
}
.modes-row {
  min-height: 43px;
  padding: 4px 13px 0;
  gap: 12px;
  border-radius: 11px 11px 0 0;
}
.config-row {
  min-height: 37px;
  padding: 0 13px 5px;
  gap: 10px;
  border-radius: 0 0 11px 11px;
}
.modes-group { gap: 1px; }
.mode-button {
  position: relative;
  min-height: 36px;
  padding: 7px 12px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 590;
  line-height: 1.2;
  transition: color .16s ease;
}
.mode-button.active,
body[data-palette="commodore"] .mode-button.active {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  font-weight: 730;
}
.mode-button::after {
  content: '';
  position: absolute;
  height: 2px;
  left: 12px;
  right: 12px;
  bottom: 1px;
  border-radius: 999px;
  background: transparent;
  transition: background-color .16s ease;
}
.mode-button.active::after { background: var(--accent); }
.mode-button:hover:not(.active) { color: var(--ink); }
.mode-button:focus-visible,
.limit-option:focus-visible,
.language-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.settings-compact { flex-shrink: 0; }
.language-select {
  min-height: 33px;
  padding: 7px 25px 7px 9px;
  background-color: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 660;
  transition: background-color .16s ease, color .16s ease;
}
.language-select:hover,
.language-select:focus-visible { background-color: var(--surface2); color: var(--ink); }
.config-options { gap: 2px; }
.limit-option {
  position: relative;
  min-height: 31px;
  min-width: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 610;
  line-height: 1.25;
  transition: color .16s ease;
}
.limit-option.active { color: var(--ink); border: 0; font-weight: 730; }
.limit-option::after {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 0;
  height: 1.5px;
  border-radius: 999px;
  background: transparent;
}
.limit-option.active::after { background: var(--accent); }
.config-toggles { gap: 15px; }
.mini-toggle { font-size: 10px; }
.mini-toggle .toggle-indicator { width: 12px; height: 12px; }
@media (max-width: 600px) {
  .modes-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 8px 0;
    gap: 2px;
  }
  .modes-group { gap: 0; flex: 1 1 auto; }
  .mode-button { min-height: 35px; font-size: 11px; padding: 7px 8px 9px; }
  .mode-button::after { left: 8px; right: 8px; }
  .settings-compact { align-self: center; margin-left: auto; }
  .language-select { min-height: 32px; font-size: 10px; padding: 6px 21px 6px 5px; }
  .config-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 8px 6px;
    gap: 3px 10px;
    min-height: 35px;
  }
  .config-options { gap: 0; }
  .limit-option { min-height: 30px; padding: 6px 8px; font-size: 11px; }
  .limit-option::after { left: 8px; right: 8px; }
  .config-toggles { gap: 12px; }
  .mini-toggle { font-size: 10px; }
}
@media (max-width: 360px) {
  .mode-button { padding-inline: 7px; font-size: 10px; }
  .language-select { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mode-button, .mode-button::after, .limit-option, .language-select { transition: none; }
}


/* PressKey Typing Lab 1.6 — centered primary test controls.
   Symmetric outer tracks keep modes and limits at the geometric center of
   the typing stage. Language, numbers and punctuation remain on the right.
   Use a component-width breakpoint for narrow panes, including sidebars. */
.typing-card { container-type: inline-size; }
.modes-row,
.config-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  column-gap: 12px;
}
.modes-group {
  grid-column: 2;
  justify-self: center;
  justify-content: center;
  flex: none;
  width: max-content;
  max-width: 100%;
  flex-wrap: nowrap;
}
.settings-compact {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  margin-left: 0;
}
.config-options {
  grid-column: 2;
  justify-self: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  flex-wrap: nowrap;
}
.config-toggles {
  grid-column: 3;
  justify-self: end;
  flex-wrap: nowrap;
}
/* When the stage is too narrow for separate right-hand controls, place
   the minor controls on a quiet second line, preserving the main centering. */
@container (max-width: 700px) {
  .modes-row,
  .config-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 0;
    justify-items: stretch;
  }
  .modes-row {padding-top: 5px; padding-bottom: 1px;}
  .config-row {padding-top: 0; padding-bottom: 5px;}
  .modes-group,
  .config-options {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }
  .settings-compact,
  .config-toggles {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    align-self: center;
  }
  .settings-compact {margin: 0;}
  .config-toggles {margin: 0 2px 0 0;}
}
@container (max-width: 370px) {
  .mode-button {font-size: 10px; padding-inline: 7px;}
  .mode-button::after {left: 7px; right: 7px;}
  .config-options {gap: 0;}
  .limit-option {font-size: 10px; padding-inline: 6px;}
}


/* 1.6.1 — Six Colors: errors are marked by a red highlight, not red glyphs.
   No extra padding means the text and smooth caret do not shift. */
body[data-palette="six-colors"][data-theme="dark"] .words-layer .char.incorrect {
  color: #fff4ed;
  background: rgba(225, 70, 82, .42);
  border-radius: 4px;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(255, 113, 118, .85);
}
body[data-palette="six-colors"][data-theme="light"] .words-layer .char.incorrect {
  color: #2c2831;
  background: rgba(209, 53, 70, .26);
  border-radius: 4px;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(189, 31, 57, .8);
}


/* 1.6.4 — comparison rules in Preferences. No changes to smooth caret. */
.typing-rules .rule-option {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  cursor:pointer;
}
.typing-rules .rule-option + .rule-option {border-top:1px solid var(--border-soft);}
.typing-rules .rule-option input {
  flex-shrink:0;
  width:16px;
  height:16px;
  margin:1px 0 0;
  accent-color:var(--accent);
  cursor:pointer;
}
.typing-rules .rule-option span {display:grid;gap:5px;}
.typing-rules .rule-option strong {font-size:12px;font-weight:650;color:var(--ink);}
.typing-rules .rule-option small {font-size:11px;line-height:1.5;color:var(--muted);}


/* 1.6.5 — continuous smooth caret motion. JS handles transform using a
   velocity-preserving, critically damped animation; the display still honors
   prefers-reduced-motion. Line wrapping keeps the existing layer transition. */
.smooth-caret { backface-visibility:hidden; }


/* 1.6.8 — Official PressKey branding. The official transparent PNG assets are
   bundled locally with the app. data-theme is set by the existing palette and
   appearance code; this change does not touch keyboard or Focus logic. */
.header-identity { display:inline-flex; align-items:center; min-width:0; white-space:nowrap; }
.header-identity .brand { display:inline-flex; align-items:center; gap:0; flex:0 0 auto; }
.brand-logo { display:block; width:175px; height:auto; max-width:100%; object-fit:contain; }
.brand-logo-light { display:none; }
body[data-theme="light"] .brand-logo-dark { display:none; }
body[data-theme="light"] .brand-logo-light { display:block; }
.header-identity .brand-divider { flex:0 0 1px; margin:0 15px; }
.header-identity .brand-product { display:inline-block; }
.header-identity .brand:hover .brand-logo { opacity:.86; }
.return-site {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--border-soft); background:transparent; color:var(--muted);
  border-radius:999px; font-size:12px; font-weight:650; line-height:1;
  padding:9px 12px; white-space:nowrap;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.return-site svg { width:16px; height:16px; }
.return-site:hover { color:var(--ink); border-color:var(--border); background:var(--surface2); }
@media (max-width:650px) {
  .brand-logo { width:150px; }
  .header-actions { gap:10px; }
  .return-site { width:34px; height:34px; padding:7px; }
  .return-site span { display:none; }
  .header-identity .brand-divider { margin:0 10px; }
}
@media (max-width:420px) {
  .brand-logo { width:143px; }
  .header-identity .brand-divider, .header-identity .brand-product { display:none; }
  .header-actions { gap:7px; }
  .header-link { padding:6px 2px; }
  .site-header { gap:10px; }
}
@media (max-width:360px) { .brand-logo { width:128px; } }


/* 1.6.9 — Editorial-to-lab bridge: centered co-branded identity and
   a distinct Blog link, inspired by PressKey's navigation but restrained
   for typing. No changes to the typing stage or its geometry. */
.site-header {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:18px;
  align-items:center;
  height:88px;
}
.header-blog-nav {grid-column:1;justify-self:start;min-width:0;}
.blog-link {
  display:inline-flex;align-items:center;gap:9px;
  color:var(--ink);font-size:15px;font-weight:790;letter-spacing:-.025em;
  line-height:1;white-space:nowrap;padding:11px 0;
  transition:color .15s ease;
}
.blog-link svg {width:16px;height:16px;stroke-width:2.1;color:var(--muted);transition:transform .16s ease;}
.blog-link:hover {color:var(--accent);}
.blog-link:hover svg {transform:translateX(-3px);color:var(--accent);}
.header-identity.app-brand {
  grid-column:2;justify-self:center;display:inline-flex;
  align-items:center;justify-content:center;gap:0;
  min-width:0;white-space:nowrap;
  color:var(--ink);border-radius:7px;
}
.app-brand-logo {display:inline-flex;align-items:center;flex:0 0 auto;}
.app-brand .brand-logo {width:171px;max-width:initial;height:auto;}
.app-brand .brand-divider {height:28px;width:1px;flex:0 0 1px;margin:0 13px;background:var(--border);}
.app-wordmark {
  display:inline-block;font-family:ui-rounded,'Arial Rounded MT Bold',var(--gh-font-heading,system-ui,sans-serif);
  font-size:21px;font-weight:850;line-height:1.1;letter-spacing:-1px;color:var(--ink);
  white-space:nowrap;
}
.wordmark-point {color:#f3b526;}
.app-brand:hover .brand-logo {opacity:1;}
.app-brand:hover .app-wordmark {opacity:.77;}
.site-header .header-actions {
  grid-column:3;justify-self:end;gap:21px;
}
.site-header .header-link {font-size:13px;font-weight:740;gap:8px;}
.site-header .header-link svg {width:17px;height:17px;}
.site-header .icon-button {flex:0 0 38px;}
@media (max-width:900px) and (min-width:701px) {
  .site-header {column-gap:10px;}
  .app-brand .brand-logo {width:143px;}
  .app-brand .brand-divider {margin:0 9px;}
  .app-wordmark {font-size:18px;}
  .site-header .header-actions {gap:11px;}
  .site-header .header-link {font-size:12px;}
}
@media (max-width:700px) {
  .site-header {
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:'identity identity' 'blog tools';
    height:auto;min-height:106px;row-gap:7px;column-gap:10px;
    padding:14px 0 12px;
  }
  .site-header .header-blog-nav {grid-area:blog;grid-column:auto;align-self:center;}
  .site-header .header-identity.app-brand {grid-area:identity;grid-column:1 / -1;justify-self:center;}
  .site-header .header-actions {grid-area:tools;grid-column:auto;justify-self:end;gap:12px;}
  .app-brand .brand-logo {width:154px;}
  .app-brand .brand-divider {display:block;margin:0 12px;height:25px;}
  .app-wordmark {font-size:20px;}
  .blog-link {font-size:13px;padding:8px 0;}
  .site-header .header-link {padding:6px 2px;}
  .site-header .header-link span {display:none;}
  .site-header .header-link svg {width:19px;height:19px;}
  .site-header .icon-button {width:34px;height:34px;flex-basis:34px;}
}
@media (max-width:380px) {
  .app-brand .brand-logo {width:137px;}
  .app-brand .brand-divider {margin:0 9px;}
  .app-wordmark {font-size:18px;}
  .site-header .header-actions {gap:8px;}
}
@media (max-width:560px) {
  /* Correct pre-existing two-column sidebar overflow on 320px phones. */
  .sidebar {grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce) {
  .blog-link,.blog-link svg {transition:none;}
}


/* 1.7.0 — PressKey editorial introduction. Distinct from test controls;
   purely presentational, so the typing stage and Focus logic stay intact. */
.intro {
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  min-height:172px;
  margin:22px 0 23px;
  padding:25px 32px 27px;
  background:linear-gradient(116deg,
    color-mix(in srgb,var(--surface) 86%,var(--bg)),
    color-mix(in srgb,var(--surface2) 55%,var(--bg)));
  border:1px solid var(--border-soft);
  border-radius:18px;
  isolation:isolate;
  overflow:hidden;
}
.intro::before {
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,#ffba28 0%,#ffba28 33%,#2acfc4 33%,#2acfc4 67%,#f82176 67%,#f82176 100%);
}
.intro::after {
  content:"";position:absolute;right:-90px;top:-190px;
  height:390px;width:420px;z-index:-1;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 8%,transparent), transparent 68%);
  pointer-events:none;
}
.intro-copy {max-width:810px;min-width:0;}
.intro .eyebrow {
  display:flex;align-items:center;gap:10px;
  font-size:10px;font-weight:780;letter-spacing:1.55px;
  margin:0 0 10px;color:var(--muted);
}
.intro-kicker-mark {display:inline-block;width:18px;height:2px;border-radius:2px;background:#f7b62a;flex:0 0 auto;}
.intro h1 {font-size:clamp(32px,3.4vw,43px);letter-spacing:-1.55px;line-height:1.13;}
.intro h1 .title-dot {color:#f4b92b;}
.intro-description {margin:11px 0 0;max-width:660px;font-size:13px;line-height:1.6;}
.intro-keyboard-art {position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:15px;width:246px;padding:8px 4px 8px 0;transform:rotate(-5deg);}
.keycap-visual {display:flex;align-items:center;gap:7px;}
.keycap {width:48px;height:50px;border:1px solid var(--border);border-bottom-width:3px;border-radius:11px;
  display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--surface) 80%,var(--bg));
  color:var(--muted);font-size:23px;font-weight:680;line-height:1;
  box-shadow:0 7px 13px color-mix(in srgb,var(--ink) 4%,transparent);
}
.keycap-two {color:var(--ink);border-color:color-mix(in srgb,var(--accent) 38%,var(--border));background:color-mix(in srgb,var(--accent) 8%,var(--surface));transform:translateY(7px);}
.keycap-four {width:25px;background:transparent;border-style:dashed;border-width:1px;box-shadow:none;opacity:.75;}
.keycap-caret {width:2px;height:24px;border-radius:2px;background:var(--accent);}
.keycap-brand-stripes {display:flex;gap:5px;padding-right:4px;}
.keycap-brand-stripes i {display:block;width:21px;height:5px;border-radius:5px;}
.keycap-brand-stripes i:nth-child(1){background:#ffba28;}
.keycap-brand-stripes i:nth-child(2){background:#2acfc4;}
.keycap-brand-stripes i:nth-child(3){background:#f82176;}
.section-heading {justify-content:flex-start;flex-wrap:wrap;gap:11px 18px;margin:0 0 13px;padding:0 2px;}
.section-heading h2 {font-size:14px;letter-spacing:-.1px;}
.section-heading .small-pill {
  display:inline-flex;align-items:center;gap:9px;
  font-size:9px;font-weight:750;letter-spacing:.95px;
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
  background:color-mix(in srgb,var(--surface2) 65%,transparent);
  border:1px solid var(--border-soft);
}
.section-heading .live-dot {width:6px;height:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent);}
@media (max-width:850px) {
  .intro {margin:18px 0 18px;padding:23px 25px;min-height:148px;gap:14px;}
  .intro-keyboard-art {width:186px;transform:rotate(-5deg) scale(.82);transform-origin:right center;}
  .intro-description {font-size:12px;}
}
@media (max-width:670px) {
  .intro {grid-template-columns:minmax(0,1fr);padding:22px 23px 23px;min-height:0;margin:16px 0 19px;border-radius:14px;}
  .intro-keyboard-art {display:none;}
  .intro .eyebrow {font-size:8px;letter-spacing:1.25px;gap:8px;margin-bottom:11px;}
  .intro-kicker-mark {width:13px;}
  .intro h1 {font-size:clamp(29px,8vw,35px);letter-spacing:-1.1px;}
  .intro-description {font-size:12px;line-height:1.58;margin-top:11px;}
  .section-heading {gap:9px 12px;}
  .section-heading h2 {font-size:13px;}
  .section-heading .small-pill {font-size:8px;letter-spacing:.75px;padding:5px 8px;}
}
@media (max-width:370px) {
  .intro {padding:20px 19px 21px;}
  .intro-description {font-size:11px;}
}


/* 1.7.1 — Typing Lab is the hero. Retire the introductory card (removed
   from markup) and place the typing controls directly under the header. */
.workspace {
  margin-top: clamp(23px,3.4vw,38px);
}

/* Atmospheric brand visible ONLY during the uninterrupted Focus presentation.
   Fixed to the viewport so the existing caret and the three text rows never
   inherit transforms/offsets from the logo. Grayscale prevents colored dots
   from drawing attention; its opacity is intentionally near-watermark level. */
.focus-brand {
  position:fixed;
  z-index:2;
  top:clamp(22px,8vh,72px);
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:max-content;
  max-width:calc(100vw - 36px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  transform:translateX(-50%);
  filter:grayscale(1);
  transition:opacity 230ms ease,visibility 230ms ease;
}
body.is-typing:not(.focus-ui-visible) .focus-brand {
  visibility:visible;
  opacity:.12;
}
body[data-theme="dark"].is-typing:not(.focus-ui-visible) .focus-brand {opacity:.13;}
.focus-brand-presskey {display:block;flex:none;width:clamp(142px,16vw,196px);}
.focus-brand-presskey img {display:block;width:100%;height:auto;}
.focus-brand-presskey .brand-logo-light {display:none;}
body[data-theme="light"] .focus-brand-presskey .brand-logo-dark {display:none;}
body[data-theme="light"] .focus-brand-presskey .brand-logo-light {display:block;}
.focus-brand-divider {width:1px;height:25px;background:currentColor;flex:none;}
.focus-brand-wordmark {
  color:var(--ink);
  font-family:ui-rounded,'Arial Rounded MT Bold',var(--gh-font-heading,system-ui,sans-serif);
  font-weight:850;
  font-size:clamp(17px,2.2vw,23px);
  letter-spacing:-.045em;
  white-space:nowrap;
}
@media (max-width:700px) {
  .workspace {margin-top:21px;}
  .focus-brand {top:22px;gap:9px;max-width:calc(100vw - 26px);}
  .focus-brand-presskey {width:140px;}
  .focus-brand-divider {height:21px;}
  .focus-brand-wordmark {font-size:17px;}
}
@media (max-width:360px) {
  .focus-brand-presskey {width:121px;}
  .focus-brand-wordmark {font-size:15px;}
  .focus-brand-divider {height:19px;}
}
@media (prefers-reduced-motion:reduce) {
  .focus-brand {transition:none;}
}


/* 1.7.2 — Post-session report. Hide controls only after the session ends.
   Keep all interaction and positioning of the typing stage unchanged. */
body.is-results .section-heading,
body.is-results .modes-row,
body.is-results .config-row { display:none !important; }
body.is-results .workspace {margin-top:clamp(12px,2vw,25px);}
body.is-results .result-view {padding:0 0 10px;}
.result-context {
  display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;
  min-height:35px;margin:0 0 17px;padding:0 0 12px;
  border-bottom:1px solid var(--border-soft);
}
.result-context-status {
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-size:9px;letter-spacing:1.5px;font-weight:800;color:var(--muted);
}
.result-status-dot {width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent);}
.result-context-items {display:flex;flex-wrap:wrap;gap:5px 7px;align-items:center;}
.result-context-chip {
  display:inline-block;white-space:nowrap;padding:5px 9px;
  border-radius:6px;background:color-mix(in srgb,var(--surface2) 66%,transparent);
  color:var(--muted);font-size:10px;font-weight:650;line-height:1.25;
}
.result-context-chip.is-primary {color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,var(--surface2));}
body.is-results .results-heading {align-items:center;gap:14px;margin:0;}
body.is-results .results-heading h3 {font-size:clamp(18px,2.2vw,23px);letter-spacing:-.55px;line-height:1.23;margin:0 0 5px;font-weight:700;}
body.is-results .results-heading p {font-size:11px;line-height:1.4;}
body.is-results .results-heading-side {gap:7px;min-width:225px;}
body.is-results .results-top-actions {gap:7px;}
body.is-results .mini-action {min-height:35px;padding:0 12px;border-radius:9px;}
body.is-results .results-click-anywhere {padding:4px 9px;font-size:10px;border:0;background:transparent;}
body.is-results .results-metrics {margin:17px 0 19px;gap:10px;}
body.is-results .result-metric {padding:14px 15px;min-height:94px;gap:6px;border-radius:10px;}
body.is-results .result-metric strong {font-size:27px;}
body.is-results .result-metric.featured strong {font-size:42px;}
body.is-results .chart-header {margin-bottom:10px;}
body.is-results .chart-legend {margin:0 0 10px;}
body.is-results .chart-box {height:260px;padding:9px 11px;border-radius:12px;}
body.is-results .chart-insights {margin-top:12px;}
body.is-results .chart-insight {padding:13px 15px;}
body.is-results .result-footer {margin-top:17px;}
@media(max-width:760px){
  body.is-results .results-heading {align-items:flex-start;}
  body.is-results .results-heading-side {min-width:0;gap:6px;align-items:flex-start;}
  body.is-results .results-click-anywhere {width:auto;align-self:flex-start;padding-left:0;}
  body.is-results .results-metrics {margin:17px 0 20px;}
  body.is-results .chart-box {height:245px;}
}
@media(max-width:480px){
  body.is-results .workspace {margin-top:17px;}
  .result-context {gap:9px;margin-bottom:14px;}
  .result-context-status {width:100%;}
  body.is-results .results-heading-side {width:100%;}
  body.is-results .results-top-actions {width:100%;}
  body.is-results .results-top-actions .mini-action {flex:1;}
  body.is-results .results-metrics {gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));}
  body.is-results .result-metric.featured {grid-column:auto;}
  body.is-results .result-metric.featured strong {font-size:38px;}
  body.is-results .result-metric strong {font-size:24px;}
  body.is-results .chart-box {height:220px;}
}


/* 1.7.3 — Dense post-test report: two hero metrics, integrated graph, one
   subordinate data strip. Scoped to results to preserve typing layout. */
body.is-results .workspace {margin-top:clamp(12px,2vw,20px);}
body.is-results .typing-card {background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible;}
body.is-results .result-view {padding:0!important;}
body.is-results .result-context {
  gap:9px 15px;min-height:0;padding:0;margin:0 0 20px;border:0;
  display:flex;align-items:center;flex-wrap:wrap;
}
body.is-results .result-context-status {font-size:9px;letter-spacing:1.2px;}
body.is-results .result-context-items {gap:6px 11px;}
body.is-results .result-context-chip {
  border:0;border-radius:0;background:transparent!important;
  padding:0;white-space:nowrap;font-size:10px;letter-spacing:0;
  color:var(--muted);font-weight:550;
}
body.is-results .result-context-chip + .result-context-chip::before {
  content:'·';margin-right:10px;color:var(--subtle);
}
body.is-results .result-context-chip.is-primary {color:var(--ink);font-weight:700;}
body.is-results .best-pill {margin-left:auto;gap:6px;box-shadow:none;padding:6px 9px;border-radius:7px;}
body.is-results .best-pill svg {width:15px;height:15px;}
body.is-results .best-pill strong {font-size:9px;}
body.is-results .best-pill small {font-size:8px;}
body.is-results .results-dashboard {
  display:grid;grid-template-columns:minmax(170px,.235fr) minmax(0,1fr);
  gap:clamp(24px,4.2vw,60px);align-items:start;
}
body.is-results .results-metrics {
  display:flex!important;flex-direction:column;gap:18px!important;
  margin:0!important;min-width:0;align-items:flex-start;
}
body.is-results .result-metric {
  padding:0!important;margin:0;min-height:0!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
  background:transparent!important;color:var(--ink)!important;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px!important;
}
body.is-results .result-metric>span {
  font-size:12px;letter-spacing:.1px;font-weight:620;color:var(--muted)!important;opacity:1!important;
}
body.is-results .result-metric.featured strong {
  font-size:clamp(68px,8vw,104px)!important;line-height:.95;
  letter-spacing:-5px;font-weight:650;color:var(--accent)!important;
  font-variant-numeric:tabular-nums;
}
body.is-results .result-metric.featured small {
  font-size:12px!important;color:var(--accent)!important;font-weight:760;letter-spacing:.7px;
}
body.is-results .result-metric.result-accuracy strong {
  font-size:clamp(42px,5.1vw,64px)!important;line-height:1.02;
  letter-spacing:-2.5px;font-weight:640;color:var(--accent)!important;
  font-variant-numeric:tabular-nums;
}
body.is-results .results-visual {min-width:0;}
body.is-results .chart-header {margin:1px 0 7px;gap:10px;font-size:9px;letter-spacing:1.1px;}
body.is-results .chart-header>span:first-child {color:var(--ink);}
body.is-results .chart-legend {margin:0 0 7px;gap:17px;font-size:10px;}
body.is-results .chart-legend i {width:16px;border-top-width:2px;}
body.is-results .chart-legend .legend-errors {width:7px;height:7px;border:0;}
body.is-results .chart-box {
  height:clamp(220px,25vw,285px)!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  padding:0!important;overflow:hidden;
}
body.is-results .chart-grid {opacity:.48;}
body.is-results .results-detail-strip {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
  border-top:1px solid var(--border-soft);padding:17px 0 0;margin-top:5px;
  align-items:start;
}
body.is-results .result-detail>span,body.is-results .chart-insight>span {
  color:var(--subtle)!important;font-size:9px!important;font-weight:740;letter-spacing:1.05px;
}
body.is-results .result-detail strong,body.is-results .chart-insight strong {
  font-size:clamp(19px,2vw,25px)!important;font-weight:650;letter-spacing:-.6px;
  color:var(--ink)!important;line-height:1.15;
}
body.is-results .chart-insights {
  display:contents!important;
}
body.is-results .chart-insight {
  padding:0!important;min-width:0;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;gap:5px;
}
body.is-results .chart-insight small {font-size:9px;color:var(--subtle);line-height:1.4;}
body.is-results .result-restart-dock {
  position:static!important;z-index:auto;display:flex;
  align-items:center;justify-content:center;gap:17px;flex-wrap:wrap;
  padding:16px 0 0!important;margin:12px 0 0!important;
  min-height:0;border:0;border-top:1px solid var(--border-soft);
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
body.is-results .result-restart-dock::after {display:none!important;}
body.is-results .results-click-anywhere {
  width:auto!important;min-width:0;display:inline-flex;gap:6px;padding:0!important;
  margin:0;background:transparent!important;border:0!important;
  font-size:10px;color:var(--subtle);
}
body.is-results .results-click-anywhere::before {display:none;}
body.is-results .results-click-icon {width:17px;height:17px;}
body.is-results .results-top-actions {gap:8px;align-items:center;justify-content:center;}
body.is-results .mini-action {min-height:35px!important;padding:0 13px!important;white-space:nowrap;}
body.is-results .result-footer {
  margin-top:9px;display:flex;justify-content:center;gap:10px;align-items:center;
  font-size:10px;color:var(--subtle);
}
body.is-results .result-footer>span {font-size:9px;color:var(--subtle);}
body.is-results .result-footer .secondary-action {min-height:26px;border:0;background:transparent;padding:4px 7px;font-size:10px;color:var(--muted);}
body.is-results .bottom-footnote {padding-top:14px;}
@media (max-width:850px) {
  body.is-results .results-dashboard {grid-template-columns:minmax(155px, .27fr) minmax(0,1fr);gap:23px;}
  body.is-results .result-metric.featured strong {font-size:72px!important;letter-spacing:-3px;}
  body.is-results .result-metric.result-accuracy strong {font-size:44px!important;letter-spacing:-2px;}
  body.is-results .results-detail-strip {gap:10px;}
}
@media (max-width:650px) {
  body.is-results .result-context {margin:0 0 16px;gap:7px 10px;}
  body.is-results .result-context-status {width:100%;}
  body.is-results .result-context-items {gap:5px 8px;}
  body.is-results .results-dashboard {display:block;}
  body.is-results .results-metrics {
    flex-direction:row!important;align-items:end;gap:27px!important;margin:0 0 12px!important;
  }
  body.is-results .result-metric.featured strong {font-size:60px!important;letter-spacing:-3px;}
  body.is-results .result-metric.result-accuracy strong {font-size:38px!important;}
  body.is-results .result-metric>span {font-size:10px;}
  body.is-results .chart-header {margin-top:7px;}
  body.is-results .chart-box {height:210px!important;}
  body.is-results .results-detail-strip {grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
  body.is-results .result-detail strong,body.is-results .chart-insight strong {font-size:18px!important;}
  body.is-results .chart-insight small {font-size:8px;}
  body.is-results .result-restart-dock {gap:9px;}
  body.is-results .results-top-actions .mini-action {flex:0 0 auto;}
}
@media (max-width:380px) {
  body.is-results .results-metrics {gap:15px!important;}
  body.is-results .result-metric.featured strong {font-size:53px!important;}
  body.is-results .result-metric.result-accuracy strong {font-size:34px!important;}
  body.is-results .results-detail-strip {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px;}
  body.is-results .result-context-chip + .result-context-chip::before {margin-right:5px;}
}


/* v1.7.5 — Modal dialogs: exactly one scrolling region.
   The <dialog> frame previously scrolled in addition to .dialog-body on
   long content (two adjacent scrollbars in Safari / Chromium).
   Keep the header and actions fixed; only the central content scrolls. */
.modal[open] {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  max-height:min(85dvh, 900px);
}
.theme-modal[open] {max-height:min(89dvh, 940px);}
.modal[open] > .dialog-head,
.modal[open] > .dialog-bottom {flex:0 0 auto;}
.modal[open] > .dialog-body {
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}

/* v1.7.5 — Sprint Blue tooltip: the popover background is always navy.
   var(--bg) is also dark in the dark variant: never use it for text here. */
body[data-palette="sprint-blue"] .chart-tooltip {
  color:#f5f8ff;
  background:rgba(7,18,34,.97);
  border:1px solid rgba(255,255,255,.17);
}
body[data-palette="sprint-blue"] .chart-tooltip strong {color:#ffffff;}



/* Proposta A — ritorno a PressKey come azione dedicata, coerente con il marchio */
.header-blog-nav .blog-link.blog-return {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 13px;border:1px solid var(--border);border-radius:999px;
  background:color-mix(in srgb,var(--surface) 65%,transparent);
  color:var(--ink);font-size:12px;font-weight:600;letter-spacing:0;line-height:1.2;
  box-shadow:0 1px 3px rgb(0 0 0 / 3%);text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.header-blog-nav .blog-return strong {font-weight:800;letter-spacing:-.02em;}
.header-blog-nav .blog-return svg {width:16px;height:16px;color:var(--muted);stroke-width:2.1;}
.header-blog-nav .blog-return .home-dot {width:6px;height:6px;border-radius:50%;background:#32bd58;flex:none;}
.header-blog-nav .blog-return:hover {background:var(--surface2);border-color:color-mix(in srgb,var(--ink) 18%,var(--border));box-shadow:0 3px 12px rgb(0 0 0 / 6%);color:var(--ink);}
.header-blog-nav .blog-return:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
@media(max-width:900px) and (min-width:701px) {
  .header-blog-nav .blog-return {padding:9px 10px;font-size:11px;gap:6px;}
}
@media(max-width:700px) {
  .header-blog-nav .blog-return {font-size:12px;padding:9px 12px;gap:8px;}
}
@media(max-width:380px) {
  .header-blog-nav .blog-return .return-prefix {display:none;}
  .header-blog-nav .blog-return {padding:9px 10px;}
}
@media(prefers-reduced-motion:reduce) {
  .header-blog-nav .blog-return {transition:none;}
}


/* 1.7.6 — Responsive test configuration: one control set, in a small modal
   on tablet/phone; centered toolbar remains unchanged on desktop. */
.test-controls {display:contents;}
.quicktest-trigger {display:none;}
body.is-results .quicktest-trigger, body.is-typing .quicktest-trigger {display:none!important;}
@media(max-width:900px) {
  .quicktest-trigger {
    width:100%; display:flex; align-items:center; gap:13px; text-align:left;
    border:1px solid var(--border-soft); background:var(--surface);
    border-radius:12px; padding:11px 15px; margin-bottom:16px;
    color:var(--ink); min-height:60px;
    transition:background .18s ease,border-color .18s ease;
  }
  .quicktest-trigger:hover {background:var(--surface2);border-color:var(--border);}
  .quicktest-trigger-icon {
    display:grid;place-items:center;flex:none;width:37px;height:37px;
    border:1px solid var(--border);border-radius:9px;
    color:var(--accent);background:var(--surface2);
  }
  .quicktest-trigger-icon svg {width:19px;height:19px;stroke:currentColor;stroke-width:1.7;}
  .quicktest-trigger-copy {display:grid;gap:3px;min-width:0;}
  .quicktest-trigger-copy strong {font-size:13px;font-weight:760;}
  .quicktest-trigger-copy small {font-size:11px;color:var(--muted);font-weight:530;}
  .quicktest-chevron {width:17px;height:17px;flex:none;margin-left:auto;color:var(--muted);}
  .quick-test-modal {width:min(470px,calc(100vw - 28px));max-height:min(88dvh,850px);}
  .quick-test-modal .dialog-body {padding-top:0;padding-bottom:18px;}
  .quicktest-description {font-size:12px;line-height:1.55;color:var(--muted);margin:20px 0 10px;}
  .quick-test-modal .test-controls {display:block;}
  .quick-test-modal .modes-row,
  .quick-test-modal .config-row {
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:18px; min-height:0; padding:20px 0; border:0;border-radius:0;
    border-bottom:1px solid var(--border-soft); background:transparent;
    grid-template-columns:none;grid-template-rows:none;
  }
  .quick-test-modal .config-row {border-bottom:0;}
  .quick-test-modal .modes-group,
  .quick-test-modal .config-options {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    width:100%;max-width:100%;align-items:stretch;justify-self:stretch;justify-content:stretch;
    flex:none;grid-column:auto;grid-row:auto;
  }
  .quick-test-modal .config-options {grid-template-columns:repeat(3,minmax(0,1fr));}
  .quick-test-modal .modes-group::before,
  .quick-test-modal .config-options::before {
    display:block;grid-column:1/-1;content:'MODALITÀ';font-size:10px;font-weight:800;
    letter-spacing:1.2px;color:var(--muted);margin-bottom:5px;
  }
  .quick-test-modal .config-options::before {content:'DURATA O LUNGHEZZA';}
  .quick-test-modal .mode-button,
  .quick-test-modal .limit-option {
    min-width:0;min-height:44px; padding:11px 8px; font-size:12px;
    background:var(--surface2);border:1px solid var(--border);border-radius:9px;
    color:var(--ink);line-height:1.15;text-align:center;
  }
  .quick-test-modal .mode-button::after,
  .quick-test-modal .limit-option::after {display:none;}
  .quick-test-modal .mode-button.active,
  .quick-test-modal .limit-option.active {
    background:var(--accent);border-color:var(--accent);color:var(--accent-dark);
    font-weight:800;
  }
  .quick-test-modal .settings-compact {display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0;align-self:stretch;justify-self:stretch;grid-column:auto;grid-row:auto;}
  .quick-test-modal .settings-compact::before {content:'LINGUA';font-size:10px;letter-spacing:1.2px;color:var(--muted);font-weight:800;}
  .quick-test-modal .language-select {width:100%;font-size:12px;min-height:44px;padding:10px 30px 10px 14px;background-color:var(--surface2);border:1px solid var(--border);border-radius:9px;}
  .quick-test-modal .config-toggles {display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;margin:0;grid-column:auto;grid-row:auto;}
  .quick-test-modal .config-toggles[hidden] {display:none!important;}
  .quick-test-modal .mini-toggle {font-size:12px;color:var(--ink);padding:8px 0;gap:12px;min-height:40px;}
  .quick-test-modal .toggle-indicator {width:19px;height:19px;flex:none;border-radius:5px;}
}
@media(max-width:380px){
  .quick-test-modal .mode-button,.quick-test-modal .limit-option {font-size:12px;padding:11px 6px;}
  .quick-test-modal .modes-row,.quick-test-modal .config-row {padding:16px 0;gap:14px;}
}
@media(prefers-reduced-motion:reduce){.quicktest-trigger {transition:none;}}


/* 1.7.7 — Uninterrupted typing stage, reduced chrome.
   The section heading and descriptive hint remain in the DOM for the
   existing script and accessibility references, but are not displayed.
   The test toolbar now directly follows the main header. */
.section-heading[hidden], #typingHint[hidden] {display:none!important;}
.typing-hint {justify-content:flex-end;}
.bottom-footnote {justify-content:flex-end;}
/* Keep the right-hand progress percentage unchanged; increase only
   the test type at the left of the typing stage. */
.test-topline .test-caption {font-size:13px;line-height:1.3;letter-spacing:1.15px;font-weight:800;}
.test-topline .test-online-dot {width:6px;height:6px;vertical-align:2px;}
@media(max-width:600px){
  .test-topline .test-caption {font-size:12px;letter-spacing:.85px;}
}

/* v1.7.8 — Compact bilingual interface control, always user-operated. */
.site-header .ui-language-toggle {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:31px;padding:0 9px;border:1px solid var(--border);
  background:transparent;color:var(--ink);border-radius:9px;
  font:750 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:.04em;cursor:pointer;transition:background .15s,border-color .15s;
}
.site-header .ui-language-toggle:hover {background:var(--surface2);border-color:var(--muted)}
@media(max-width:820px){.site-header .ui-language-toggle {min-width:32px;height:29px;padding:0 6px;font-size:10px}}

/* CSS-only labels in the mobile test-settings dialog must follow UI locale. */
html[lang="en"] .quick-test-modal .modes-group::before {content:'MODE';}
html[lang="en"] .quick-test-modal .config-options::before {content:'DURATION OR LENGTH';}
html[lang="en"] .quick-test-modal .settings-compact::before {content:'LANGUAGE';}