/* Source: style.css */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/assets/fonts/DM-Sans-Variable.woff2') format('woff2'),url('/assets/fonts/DM-Sans-Variable.ttf') format('truetype')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/DM-Mono-Regular.woff2') format('woff2'),url('/assets/fonts/DM-Mono-Regular.ttf') format('truetype')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/DM-Mono-Medium.woff2') format('woff2'),url('/assets/fonts/DM-Mono-Medium.ttf') format('truetype')}
:root{color-scheme:dark;--bg:#101513;--panel:#181e1b;--panel2:#1d2420;--border:#303a33;--text:#ecf1ed;--muted:#a1ada5;--dim:#7b8a80;--accent:#b5f6cf;--accent-ink:#142d20;--wrong:#ff929c;--mono:'DM Mono',ui-monospace,monospace;--sans:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--sans)}body.light,:root.light{color-scheme:light;--bg:#f5f8f5;--panel:#fff;--panel2:#edf2ee;--border:#d4dfd7;--text:#17291e;--muted:#566a5d;--dim:#65756a;--accent:#236a42;--accent-ink:#fff;--wrong:#b72441}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit;border:0;background:none}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{max-width:1440px;margin:auto;padding:28px 5%;display:flex;align-items:center;gap:50px;border-bottom:1px solid var(--border)}.brand{font-size:26px;font-weight:700;letter-spacing:-1.2px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.brand-dot{color:var(--accent);margin-left:-9px}.brandmark{background:var(--accent);color:var(--accent-ink);border-radius:9px;font:600 27px var(--mono);width:38px;height:38px;padding-left:8px;letter-spacing:-6px}.brandmark span{font-size:23px}nav{display:flex;align-items:center;gap:31px}nav a{font-size:14px;font-weight:500;color:var(--muted);padding:8px 0;position:relative}nav a.active{color:var(--accent)}nav a.active:after{content:'';position:absolute;bottom:-30px;left:0;right:0;height:2px;background:var(--accent)}nav a:hover,footer a:hover{color:var(--accent)}nav span{margin-left:3px;font-size:12px}.header-right{margin-left:auto;display:flex;align-items:center;gap:22px}.local-badge{font-size:12px;color:var(--muted)}.icon-button{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;font-size:22px}main{max-width:1216px;margin:0 auto;padding:55px 40px 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}.eyebrow{font-size:12px;font-weight:650;letter-spacing:2px;color:var(--accent);margin:0 0 12px}h1{font-size:clamp(36px,4vw,51px);line-height:1.15;letter-spacing:-1.8px;font-weight:500;margin:0 0 17px}h1 em{font-family:Georgia,serif;color:var(--accent);font-weight:400}h2{font-size:25px;font-weight:500;letter-spacing:-.8px;line-height:1.3;margin:0}h3{font-weight:500;font-size:21px;letter-spacing:-.5px;margin:12px 0 8px}.subline{color:var(--muted);font-size:15px;margin:0}.daily-link{display:flex;align-items:center;gap:13px;text-align:left;font-size:12px;letter-spacing:1.5px;color:var(--muted)}.daily-link strong{display:block;font-size:13px;color:var(--text);font-weight:500;letter-spacing:0;margin-top:5px}.daily-link strong span{margin-left:18px;color:var(--accent)}.calendar-icon{font-size:26px;color:var(--accent);width:43px;height:43px;border:1px solid var(--border);border-radius:12px;text-align:center}.test-shell{background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden}.test-toolbar{display:flex;justify-content:space-between;padding:16px 25px;border-bottom:1px solid var(--border);align-items:center;gap:14px}.mode-buttons,.duration-buttons{display:flex;align-items:center;gap:5px}.mode-buttons button,.duration-buttons button{font-size:14px;color:var(--muted);padding:8px 12px;border-radius:7px;white-space:nowrap}.mode-buttons button span{margin-right:7px}.mode-buttons button.selected{background:var(--accent);color:var(--accent-ink)}.duration-buttons button.selected{color:var(--accent);background:var(--panel2)}.duration-buttons button:hover,.mode-buttons button:not(.selected):hover{background:var(--panel2);color:var(--text)}.secondary-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px 31px;font-size:12px;color:var(--muted)}.secondary-toolbar>label{font-size:0}.secondary-toolbar select{font-size:12px;background:transparent;color:var(--muted);border:0;cursor:pointer;max-width:190px}.secondary-toolbar select option{background:var(--panel)}.toggles{display:flex;gap:21px}.toggles label{cursor:pointer;display:flex;align-items:center;gap:7px}.toggles input{accent-color:var(--accent);width:13px;height:13px}.test-topline{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1.5px;color:var(--dim);padding:15px 36px 0}.test-topline span:last-child{font-size:12px;letter-spacing:0}.stats-live{display:flex;gap:35px;padding:19px 36px 8px}.stats-live>div{display:flex;align-items:baseline;gap:8px}.stats-live strong{font:400 29px var(--mono);color:var(--text)}.stats-live>div:first-child strong{color:var(--accent)}.stats-live span{font-size:12px;color:var(--dim)}.typing-wrap{position:relative;margin:18px 36px 28px;height:139px;overflow:hidden;cursor:text}.words{font:400 27px/1.75 var(--mono);letter-spacing:.3px;color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere;position:relative;transition:transform .12s ease}.words .char.correct{color:var(--text)}.words .char.incorrect{color:var(--wrong);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}.words .char.current{border-left:2px solid var(--accent);margin-left:-2px}.words .word{display:inline}.typing-wrap textarea{position:absolute;inset:0;opacity:0;width:100%;height:100%;resize:none;cursor:text;z-index:2;font-size:20px;caret-color:transparent}.typing-wrap:focus-within{outline:none}.typing-wrap:has(#typing-input:focus-visible){outline:2px solid var(--accent);outline-offset:4px;border-radius:9px}#focus-prompt{position:absolute;inset:auto 0 5px;pointer-events:none;background:var(--panel);width:max-content;max-width:100%;margin:auto;padding:7px 13px;border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:12px;z-index:3}#focus-prompt span{margin-right:7px;color:var(--accent)}.typing-wrap:focus-within #focus-prompt{display:none}.typing-wrap:not(:focus-within) .words{opacity:.5}.time-track{height:2px;background:var(--border);margin:0 36px}.time-track div{height:100%;background:var(--accent);width:0;transition:width .2s linear}.test-bottom{display:flex;align-items:center;justify-content:space-between;padding:17px 36px;color:var(--muted);font-size:12px}#restart{color:var(--muted);display:flex;gap:7px;align-items:center;font-size:21px}#restart span{font-size:12px}.below-test{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:17px;gap:16px}.below-test button{font-size:12px;color:var(--muted)}kbd{font:12px var(--mono);border:1px solid var(--border);padding:2px 5px;border-radius:4px;background:var(--panel)}.privacy-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:6px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.practice-heading{margin:49px 0 23px}.muted{font-size:13px;color:var(--muted)}.practice-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.practice-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:25px 25px 20px;text-align:left;transition:transform .15s,border-color .15s;display:block}.practice-card:hover{transform:translateY(-3px);border-color:var(--dim)}.card-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;font-size:22px;margin-bottom:23px}.mint{background:#263c30;color:#b5f6cf}.peach{background:#3b3025;color:#edc6a3}.lilac{background:#332e40;color:#c8b8eb}.card-tag{font-size:12px;letter-spacing:1.2px;color:var(--dim)}.practice-card h3{font-size:20px;margin-top:9px}.practice-card p{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:23px}.card-link{font-size:12px;display:flex;align-items:center;justify-content:space-between;color:var(--text);border-top:1px solid var(--border);padding-top:16px}.card-link b{font-weight:400;color:var(--muted);font-size:17px}.practice-note{margin:47px 0 40px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:30px 0;gap:25px}.practice-note>span{font-size:12px;letter-spacing:1.5px;color:var(--dim)}.practice-note p{font-size:22px;color:var(--muted);line-height:1.4;margin:0}.practice-note strong{color:var(--text);font-weight:400}.practice-note a{font-size:12px;color:var(--accent)}footer{max-width:1320px;padding:25px 40px 36px;margin:auto;display:flex;align-items:center;gap:30px;color:var(--dim);font-size:12px}footer .brand{font-size:21px;color:var(--text)}footer>div{display:flex;gap:22px;margin-left:auto}footer>span:last-child{margin-left:12px}.primary-button,.small-button{border-radius:8px;padding:10px 17px;font-size:14px;background:var(--accent);color:var(--accent-ink);font-weight:500}.small-button{background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:9px 13px}.primary-button:hover,.small-button:hover{filter:brightness(1.12)}.result-panel{margin-top:22px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:30px 0}.result-stat strong{display:block;font:42px var(--mono);color:var(--accent)}.result-stat span{font-size:13px;color:var(--muted)}.result-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:35px}.result-grid p{color:var(--muted);font-size:14px}.result-grid svg{width:100%;height:auto;overflow:visible}.result-actions{display:flex;gap:8px;flex-wrap:wrap}details{font-size:13px;color:var(--muted);margin-top:24px}summary{cursor:pointer;color:var(--text)}#custom-panel{margin:10px 30px;padding:20px;border-radius:10px;background:var(--panel2)}#custom-panel label{display:block;font-size:14px}#custom-panel label span{color:var(--muted)}#custom-text{width:100%;min-height:100px;margin:12px 0;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:12px}#keyboard{margin:25px auto;max-width:660px;text-align:center}.key-row{display:flex;justify-content:center;gap:6px;margin:6px 0}.key{background:var(--panel);border:1px solid var(--border);border-bottom-width:3px;border-radius:6px;min-width:40px;padding:7px;color:var(--muted);font:14px var(--mono)}.key.next{background:var(--accent);color:var(--accent-ink)}.key.space{width:240px}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:35px 0}.lesson-card{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:25px}.lesson-card .number{font:30px var(--mono);color:var(--accent)}.lesson-card p{font-size:14px;color:var(--muted)}.lesson-card code{display:block;margin:20px 0;font:17px var(--mono);color:var(--accent)}.lesson-card button{width:100%}.reading-card{padding:30px;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin:30px 0}.reading-card p{color:var(--muted);max-width:800px}.empty-state{text-align:center;border:1px dashed var(--border);border-radius:16px;padding:60px 25px;margin:35px 0}.empty-state p{color:var(--muted)}.empty-state .primary-button{display:inline-block;margin-top:15px}.history-table{width:100%;border-collapse:collapse;font-size:14px;margin:30px 0}.history-table th{text-align:left;font-size:12px;color:var(--muted);font-weight:500}.history-table td,.history-table th{padding:15px 12px;border-bottom:1px solid var(--border)}.table-scroll{overflow-x:auto}.history-table td:nth-child(3){color:var(--accent);font-family:var(--mono)}.history-chart{background:var(--panel);padding:25px;border:1px solid var(--border);border-radius:12px}.history-chart svg{width:100%;height:180px}.progress-summary{padding:24px 0}.delete-data{color:var(--wrong);font-size:13px;margin:20px 0}.streak-box{background:var(--panel);border:1px solid var(--border);padding:15px 20px;border-radius:10px;color:var(--muted);font-size:14px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;background:var(--accent);color:var(--accent-ink);padding:12px 23px;border-radius:10px;z-index:20;box-shadow:0 5px 30px #0005;font-size:14px}.skip{position:absolute;top:-80px;left:20px;z-index:20;background:var(--accent);color:var(--accent-ink);padding:10px}.skip:focus{top:10px}[hidden]{display:none!important}.article-layout{max-width:850px;padding-top:55px;padding-bottom:60px}.article-layout h1{margin-top:18px}.article-layout h2{margin:35px 0 16px}.article-layout p,.article-layout li{color:var(--muted)}.article-layout a:not(.primary-button){color:var(--accent);text-decoration:underline;text-underline-offset:4px}.article-layout .eyebrow{color:var(--accent)}.article-layout li{margin:12px 0}.article-layout .reading-card a{text-decoration:none}.article-layout table{width:100%;font-size:14px;border-collapse:collapse}.article-layout td,.article-layout th{padding:13px;border:1px solid var(--border);text-align:left;vertical-align:top}.article-layout th{color:var(--accent)}.article-layout td{color:var(--muted)}.article-layout .notice{border-left:3px solid var(--accent);padding:10px 20px;background:var(--panel)}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}.guide-grid a{display:block;border:1px solid var(--border);padding:23px;border-radius:12px;background:var(--panel)}.guide-grid p{font-size:14px}.guide-grid h2{font-size:23px;margin:10px 0}.article-layout .back{font-size:13px}
@media(min-width:1400px){main{padding-top:65px}.typing-wrap{height:145px}.practice-card{padding:28px}}@media(max-width:1000px){header{gap:25px;padding:23px 30px}nav{gap:20px}.local-badge{display:none}.daily-link{display:none}.mode-buttons button{padding:8px}.test-toolbar{padding:15px}.duration-buttons button{padding:8px}.practice-card{padding:20px}.practice-card h3{font-size:18px}footer>span:nth-child(2){display:none}}@media(max-width:700px){header{padding:20px;flex-wrap:wrap;gap:18px}.brand{font-size:23px}.header-right{order:0}nav{order:2;width:100%;justify-content:space-between;gap:10px}nav a.active:after{bottom:-10px}main{padding:35px 20px 0}.intro{margin-bottom:25px}h1{font-size:38px}.subline{font-size:14px}.eyebrow{font-size:12px;letter-spacing:1.4px}.test-toolbar{flex-direction:column;align-items:stretch;gap:11px}.mode-buttons{justify-content:space-between;overflow-x:auto}.mode-buttons button{font-size:12px;padding:7px 8px}.mode-buttons button span{display:none}.duration-buttons{justify-content:center}.secondary-toolbar{padding:14px 17px;flex-wrap:wrap;gap:10px}.toggles{gap:15px;font-size:12px}.test-topline{padding:12px 20px 0;font-size:12px;letter-spacing:.8px}.test-topline span:last-child{font-size:12px}.stats-live{padding:15px 20px 0;gap:20px}.stats-live strong{font-size:24px}.stats-live span{font-size:12px}.typing-wrap{margin:18px 20px 23px;height:135px}.words{font-size:22px;line-height:1.9}.time-track{margin:0 20px}.test-bottom{padding:15px 20px;font-size:12px}#restart span{display:none}#focus-prompt{font-size:12px;padding:7px}.below-test{flex-wrap:wrap;justify-content:center;font-size:12px}.below-test>span:first-child{display:none}.practice-heading{margin:35px 0 20px}.practice-heading h2{font-size:22px}.practice-heading .muted{display:none}.practice-cards,.lesson-grid{grid-template-columns:1fr}.practice-card{position:relative;padding:23px}.card-icon{margin-bottom:17px}.practice-card h3{font-size:22px}.practice-card p{max-width:90%}.practice-note{align-items:flex-start;flex-direction:column;gap:18px}.practice-note p{font-size:24px}footer{flex-wrap:wrap;padding:25px 20px;gap:20px}footer>div{margin:0;width:100%;order:3;justify-content:space-between}footer>span:last-child{margin-left:auto}.result-panel{padding:20px}.result-panel h2{font-size:21px}.section-heading{align-items:flex-start}.result-stats{grid-template-columns:1fr 1fr;gap:20px}.result-stat strong{font-size:35px}.result-grid{grid-template-columns:1fr}.key-row{gap:3px}.key{min-width:24px;font-size:12px;padding:6px 3px}.guide-grid{grid-template-columns:1fr}.article-layout{padding-top:35px}.article-layout h1{font-size:36px}.table-scroll{font-size:12px}.history-table td,.history-table th{padding:12px 8px}.primary-button{white-space:nowrap}.stats-live>div{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.subline,.practice-card p,.lesson-card p{font-size:16px}.secondary-toolbar select,.toggles,.card-link,.test-bottom,.below-test button,#restart span{font-size:14px}.eyebrow,.card-tag{font-size:12px}.typing-wrap:not(:focus-within) .words{opacity:.85}.daily-link{font-size:12px}.stats-live span{font-size:12px}@media(max-width:700px){.test-bottom{gap:15px}.secondary-toolbar{gap:12px}.stats-live{gap:15px}.stats-live span{font-size:12px}.stats-live>div{flex-direction:column;gap:0}.typing-wrap{height:132px}.below-test{font-size:12px}.mode-buttons button{font-size:14px}.subline{font-size:16px}.practice-note>span{font-size:12px}}
/* Typespry studio: a compact, viewport-first practice surface. */
.studio{--typing-size:27px;min-height:100dvh;display:flex;flex-direction:column}.studio header{width:100%;max-width:1440px;padding:20px 4%;gap:36px;min-height:86px}.studio nav{gap:24px}.studio nav a,.studio nav button{font-size:14px;white-space:nowrap;color:var(--muted);padding:8px 0}.studio nav a.active,.studio nav button:hover{color:var(--accent)}.studio nav a.active:after{bottom:-25px}.studio main{width:100%;max-width:1280px;padding:24px 40px 0;flex:1;min-height:0}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 22px}.workspace-heading .eyebrow{font-size:12px;letter-spacing:2px;display:block;margin-bottom:4px;color:var(--dim)}.workspace-heading h1{font-size:24px;letter-spacing:-.7px;margin:0;font-weight:500}.workspace-heading h1 span{color:var(--accent)}.workspace-heading .small-button{background:transparent;color:var(--muted)}.studio .test-shell{border-radius:16px;box-shadow:0 16px 60px #0000000d}.studio .test-toolbar{padding:13px 22px}.studio .secondary-toolbar{padding:13px 30px}.studio .test-topline{padding-top:8px}.studio .stats-live{padding-top:18px;padding-bottom:8px;gap:40px}.studio .stats-live strong{font-size:32px}.studio .typing-wrap{height:clamp(128px,22vh,205px);margin-top:22px;margin-bottom:26px}.studio .words{font-size:var(--typing-size);line-height:1.8;transition:transform 95ms linear;will-change:transform}.studio .word{display:inline-block}.studio .char.current{border:0;margin:0}.studio .char.incorrect{background:color-mix(in srgb,var(--wrong) 9%,transparent);border-radius:2px}.studio .test-bottom{padding-top:14px;padding-bottom:14px}.studio .below-test{margin-top:18px}.studio footer{width:100%;max-width:1280px;margin:0 auto;padding:24px 40px;gap:22px}.studio footer .brand{font-size:18px}.studio footer a{font-size:12px}.studio footer>span{font-size:12px}.studio.practice-active footer{margin-top:auto}.studio .view:not(#practice-view){padding:14px 0 40px}.studio .view:not(#practice-view) h1{font-size:40px}
#caret{position:absolute;top:0;left:0;width:2px;background:var(--accent);border-radius:2px;z-index:1;pointer-events:none;transition:transform 95ms linear;will-change:transform;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 20%,transparent)}.typing-wrap:not(:focus-within) #caret{opacity:.45}body[data-caret="block"] #caret{width:var(--glyph-width,16px);opacity:.25}body[data-caret="underline"] #caret{width:var(--glyph-width,16px);background:transparent;border-bottom:3px solid var(--accent)}.instant-caret #caret,.instant-caret .words{transition:none}.focus-mode .stats-live>div:not(:first-child){visibility:hidden}
dialog{color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:28px;width:min(880px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 30px 130px #0008}dialog::backdrop{background:#050b09b8;backdrop-filter:blur(7px)}dialog[open]{animation:dialog-in .18s ease-out}dialog.result-panel{position:fixed;margin:auto;width:min(1000px,calc(100vw - 32px))}.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dialog-top .icon-button{width:30px;height:30px;font-size:21px}.result-panel .section-heading{margin-bottom:12px}.result-panel h2{font-size:29px;letter-spacing:-.9px}.result-panel .result-stats{margin:22px 0;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:20px 24px}.result-panel .result-stat strong{font-size:42px}.result-panel .result-stat span{font-size:13px}.detail-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 5px 20px}.detail-metrics .result-stat strong{font-size:20px;color:var(--text)}.detail-metrics .result-stat span{font-size:12px}.goal-summary{grid-column:1/-1;display:flex;gap:20px;align-items:center;font-size:13px;color:var(--muted);margin-top:6px}.goal-summary progress{flex:1;height:5px;accent-color:var(--accent);border:0;border-radius:6px;overflow:hidden}.goal-summary progress::-webkit-progress-bar{background:var(--border)}.goal-summary progress::-webkit-progress-value{background:var(--accent)}.result-panel .result-grid{gap:28px;padding-top:20px;border-top:1px solid var(--border);grid-template-columns:1.15fr 1fr}.result-panel .result-grid h3{margin-top:0;font-size:20px}.result-panel .result-grid .eyebrow{font-size:12px}.result-panel details{margin-top:20px;font-size:13px}.word-chips{display:flex;gap:7px;flex-wrap:wrap}.word-chips span{background:var(--bg);border:1px solid var(--border);padding:3px 9px;border-radius:5px;color:var(--wrong);font:13px var(--mono)}.clean-run{color:var(--accent);font-size:14px;margin-bottom:0}.drill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.drill-card{text-align:left;border:1px solid var(--border);background:var(--bg);border-radius:10px;padding:17px 20px}.drill-card:hover{border-color:var(--accent);background:var(--panel2)}.drill-card strong{display:block;font-size:16px;font-weight:500;margin-bottom:4px}.drill-card span{display:block;font-size:13px;color:var(--muted)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0}.settings-grid label{font-size:14px;color:var(--muted)}.settings-grid select{display:block;width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:10px;margin-top:8px;font-size:16px}.setting-check{grid-column:1/-1;display:flex;align-items:center;gap:10px}.setting-check input{accent-color:var(--accent);width:18px;height:18px}#keyboard-dialog{max-width:700px}#keyboard{margin-bottom:0}#keyboard .key{min-width:38px}#custom-panel{padding:12px 16px;margin:8px 30px}#custom-text{min-height:54px;height:65px;max-height:120px;margin:7px 0}.studio #toast{z-index:100}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media(min-width:1000px) and (min-height:650px){.studio.practice-active{height:100dvh}.studio.practice-active main{overflow:hidden}.studio.practice-active #practice-view{height:100%;display:flex;flex-direction:column}.studio.practice-active .test-shell{flex-shrink:0}.studio.practice-active footer{flex-shrink:0}}
@media(min-width:1000px) and (max-height:800px){.studio header{padding-top:15px;padding-bottom:15px;min-height:70px}.studio nav a.active:after{bottom:-21px}.studio main{padding-top:18px}.workspace-heading{margin-bottom:15px}.studio .typing-wrap{height:130px;margin-top:14px;margin-bottom:18px}.studio .stats-live{padding-top:10px}.studio footer{padding-top:16px;padding-bottom:16px}.studio .below-test{margin-top:12px}.studio .test-toolbar{padding-top:10px;padding-bottom:10px}.studio .secondary-toolbar{padding-top:9px;padding-bottom:9px}}
@media(max-width:1050px){.studio header{gap:24px;padding-left:24px;padding-right:24px}.studio nav{gap:17px}.studio .brand{font-size:23px}.studio main{padding-left:24px;padding-right:24px}.studio footer{padding-left:24px;padding-right:24px}.studio footer>span:nth-child(2){display:none}}
@media(max-width:850px){.studio header{flex-wrap:wrap;gap:12px;padding:15px 20px}.studio nav{order:3;overflow-x:auto;width:100%;gap:24px;padding-bottom:5px}.studio nav a.active:after{bottom:-4px}.studio .header-right{margin-left:auto}.studio main{padding:20px 16px 0}.workspace-heading h1{font-size:21px}.workspace-heading .small-button span{display:none}.studio .test-toolbar{flex-wrap:wrap;gap:7px;padding:12px 15px}.studio .mode-buttons{flex-wrap:wrap}.studio .duration-buttons{margin-left:auto}.studio .typing-wrap{margin:18px 22px;height:155px}.studio .stats-live,.studio .test-topline{padding-left:22px;padding-right:22px}.studio .secondary-toolbar{padding:12px 20px;gap:10px;flex-wrap:wrap}.studio .words{font-size:min(var(--typing-size),27px)}.studio .below-test{flex-wrap:wrap;gap:12px}.studio .below-test>span:nth-of-type(2){display:none}.studio .test-bottom{padding:14px 22px}.studio .test-bottom>span{max-width:75%;font-size:12px}.studio footer{flex-wrap:wrap;padding:24px 18px;gap:14px}.studio footer>div{gap:14px}.studio footer>span:last-child{display:none}.studio .lesson-grid{grid-template-columns:repeat(2,1fr)}.result-panel .result-grid{grid-template-columns:1fr}.result-panel .result-grid svg{max-height:160px}dialog{padding:22px}.result-panel .result-stat strong{font-size:32px}.detail-metrics .result-stat strong{font-size:18px}.result-panel .result-stats{padding:16px;gap:12px}.result-panel h2{font-size:24px}.detail-metrics{grid-template-columns:repeat(2,1fr)}#keyboard .key{min-width:24px;padding:6px 4px}.studio .view:not(#practice-view) h1{font-size:32px}}
@media(max-width:480px){.studio .mode-buttons button{padding:7px 8px}.studio .mode-buttons button span{display:none}.studio .toggles{gap:10px;font-size:12px}.studio .secondary-toolbar select{max-width:170px;font-size:13px}.studio .stats-live{gap:26px}.studio .stats-live strong{font-size:27px}.studio .typing-wrap{height:140px}.studio .test-topline{font-size:10px}.studio #test-state{display:none}.workspace-heading .eyebrow{font-size:10px}.workspace-heading h1{font-size:19px}.studio .lesson-grid,.drill-grid{grid-template-columns:1fr}.settings-grid{gap:16px}.result-panel .result-stats{grid-template-columns:1fr 1fr}.result-panel .section-heading{align-items:flex-start}.result-panel .section-heading .primary-button{padding:9px 12px}.goal-summary{display:block}.goal-summary progress{display:block;width:100%;margin-top:9px}.studio .duration-buttons button{padding:5px 10px}.studio .brandmark{height:32px;width:32px;font-size:24px}.studio .brandmark span{font-size:20px}dialog{padding:18px}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}#caret,.studio .words{transition:none}}
dialog#custom-panel{position:fixed;margin:auto;padding:28px;width:min(720px,calc(100vw - 32px));background:var(--panel)}dialog#custom-panel label{margin-top:20px}dialog#custom-panel textarea{height:200px;max-height:40dvh}#edit-custom{color:var(--accent);font-size:13px;letter-spacing:0;margin-left:auto;margin-right:20px}
@media(min-width:1000px) and (min-height:650px){.studio.practice-active main{overflow:visible}}
@media(min-width:1000px) and (max-height:800px){.studio header{min-height:64px;padding-top:12px;padding-bottom:12px}.studio nav a.active:after{bottom:-18px}.studio main{padding-top:14px}.workspace-heading{margin-bottom:12px}.workspace-heading .eyebrow{line-height:16px;margin-bottom:3px}.workspace-heading h1{font-size:22px}.studio .test-toolbar{padding-top:7px;padding-bottom:7px}.studio .secondary-toolbar{padding-top:6px;padding-bottom:6px}.studio .test-topline{padding-top:4px}.studio .stats-live{padding-top:4px;padding-bottom:2px}.studio .stats-live strong{font-size:29px}.studio .typing-wrap{height:120px;margin-top:12px;margin-bottom:12px}.studio .test-bottom{padding-top:8px;padding-bottom:8px}.studio .below-test{margin-top:10px}.studio footer{padding-top:12px;padding-bottom:12px}}

/* Section-specific typing workspaces reuse the established studio styling. */
.session-navigation{display:flex;align-items:center;gap:18px;margin:0 0 16px;font-size:14px}.session-navigation [id="session-location"]{margin-right:auto}.session-navigation>a:hover{color:var(--accent)}.daily-options{margin-top:24px;margin-bottom:24px}.daily-options .small-button{display:inline-flex}.studio .view #typing-workspace h1{font-size:clamp(21px,2.3vw,30px);letter-spacing:-.8px}#daily-chart{display:block;width:100%;max-height:220px}#daily-catalog .history-chart{margin-top:20px}.studio nav{gap:20px}.studio nav a{white-space:nowrap}
@media(max-width:850px){.session-navigation{gap:12px;flex-wrap:wrap}.session-navigation #session-location{width:100%;order:4}.studio nav{gap:20px}.studio .view #typing-workspace h1{font-size:21px}}

.test-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}.test-actions #sound-toggle{font-size:14px;white-space:nowrap;color:var(--muted)}.test-actions #sound-toggle:hover{color:var(--accent)}.test-actions #sound-toggle[aria-pressed="true"]{color:var(--accent)}@media(max-width:600px){.test-bottom{flex-wrap:wrap}.test-actions{margin-left:auto;gap:16px}}


/* Professional progress + accessibility refinements. */
.lesson-card.completed{border-color:color-mix(in srgb,var(--accent) 34%,var(--border))}.lesson-status{display:inline-flex;align-items:center;gap:6px;margin:2px 0 0;font-size:12px;color:var(--muted)}.lesson-status.done{color:var(--accent)}.lesson-status::before{content:'·';font-weight:700}.progress-insights{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 24px}.insight-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px}.insight-card h3{font-size:18px;margin:0 0 6px}.insight-card p{margin:0;color:var(--muted);font-size:13px}.key-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.key-chip{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:7px 10px}.key-chip strong{font:500 18px var(--mono);color:var(--accent);text-transform:uppercase}.key-chip span{font-size:11px;color:var(--muted)}.history-empty{padding:24px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);font-size:13px}.studio nav::-webkit-scrollbar{display:none}
@media(max-width:850px){.studio nav{scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}.studio nav>a,.studio nav>button{scroll-snap-align:center}.progress-insights{grid-template-columns:1fr}}

/* Prevent incidental selection on interactive typing controls; articles and result text remain selectable. */
.studio header,.studio .workspace-heading,.studio .session-navigation,.studio .test-shell,.studio .below-test{-webkit-user-select:none;user-select:none}.studio #typing-input{-webkit-user-select:none;user-select:none}.studio #custom-text{-webkit-user-select:text;user-select:text}#result-title:focus{outline:none}.studio nav button.active{color:var(--accent)}

/* Refined primary navigation — visual-only enhancement. */
.studio header nav{
  gap:3px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent);
}
.studio header nav>a,.studio header nav>button{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 13px;
  border-radius:8px;
  position:relative;
  line-height:1.2;
  font-weight:550;
  transition:color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.studio header nav>a:hover,.studio header nav>button:hover{
  color:var(--text);
  background:color-mix(in srgb,var(--text) 5%,transparent);
}
.studio header nav>a.active,.studio header nav>button.active{
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,var(--border));
}
.studio header nav>a.active:after,.studio header nav>button.active:after{
  content:'';
  position:absolute;
  left:50%;
  right:auto;
  bottom:4px;
  width:16px;
  height:2px;
  border-radius:999px;
  background:var(--accent);
  transform:translateX(-50%);
}
.studio header nav>a:focus-visible,.studio header nav>button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
@media(max-width:850px){
  .studio header nav{
    gap:3px;
    padding:4px;
    border-radius:11px;
  }
  .studio header nav>a,.studio header nav>button{
    flex:0 0 auto;
    min-height:36px;
    padding:8px 12px;
  }
  .studio header nav>a.active:after,.studio header nav>button.active:after{
    bottom:4px;
  }
}
@media(max-width:480px){
  .studio header nav>a,.studio header nav>button{
    font-size:12px;
    padding:8px 7px;
  }
}
/* Progress dashboard v2 — intentionally scoped to #progress-view / progress-data-dialog. */
#progress-view{--progress-gap:16px}#progress-view>.subline{max-width:760px}.progress-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--progress-gap);margin:30px 0 18px}.progress-metrics article,.progress-card{background:var(--panel);border:1px solid var(--border);border-radius:14px}.progress-metrics article{padding:20px;min-height:148px}.progress-metrics article>span{display:block;color:var(--muted);font-size:12px;letter-spacing:.3px;margin-bottom:12px}.progress-metrics article>strong{display:block;font:500 34px/1 var(--mono);letter-spacing:-1.5px;color:var(--text)}.progress-metrics article>strong small{font:500 12px var(--sans);color:var(--muted);letter-spacing:0}.progress-metrics article>p{margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.progress-main-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:var(--progress-gap);margin-bottom:var(--progress-gap)}.progress-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--progress-gap);margin-bottom:var(--progress-gap)}.progress-card{padding:22px}.progress-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.progress-card-head h3{font-size:19px;margin:2px 0 0}.progress-card-head>span{font:500 13px var(--mono);color:var(--muted);white-space:nowrap}.progress-kicker{margin:0;color:var(--accent);font-size:10px;font-weight:650;letter-spacing:1.6px}.progress-trend svg{display:block;width:100%;height:190px;overflow:visible}.progress-card select{background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:12px;padding:7px 9px}.progress-caption{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.activity-week-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:7px}.activity-week-labels span{text-align:center;color:var(--dim);font:10px var(--mono)}.activity-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.activity-day{aspect-ratio:1;border-radius:5px;background:color-mix(in srgb,var(--border) 68%,transparent);border:1px solid transparent}.activity-day.level-1{background:color-mix(in srgb,var(--accent) 25%,var(--panel2))}.activity-day.level-2{background:color-mix(in srgb,var(--accent) 43%,var(--panel2))}.activity-day.level-3{background:color-mix(in srgb,var(--accent) 64%,var(--panel2))}.activity-day.level-4{background:color-mix(in srgb,var(--accent) 82%,var(--panel2))}.activity-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--bg) inset}.activity-summary{display:flex;justify-content:space-between;gap:15px;padding-top:17px;margin-top:17px;border-top:1px solid var(--border);color:var(--muted);font-size:11px}.activity-summary strong{color:var(--text);font:500 15px var(--mono);margin-right:4px}.weak-key-list{display:grid;gap:13px}.weak-key-row{display:grid;grid-template-columns:54px 1fr;gap:13px;align-items:center}.weak-key-row kbd{display:grid;place-items:center;height:36px;padding:0 7px;border:1px solid var(--border);border-bottom-width:3px;background:var(--bg);border-radius:7px;color:var(--accent);font:500 13px var(--mono);text-transform:uppercase}.weak-key-row>div>span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.weak-key-row>div>span strong{color:var(--text);font-weight:600}.weak-key-meter,.lesson-progress-bar{height:5px;background:var(--bg);border-radius:10px;overflow:hidden}.weak-key-meter i,.lesson-progress-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}.progress-card-empty{min-height:145px;display:flex;align-items:center;color:var(--muted);font-size:13px;line-height:1.6}.lesson-progress-bar{margin:-3px 0 16px;height:6px}.progress-lesson-list{display:grid}.progress-lesson-list a{display:grid;grid-template-columns:33px 1fr 20px;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--border)}.progress-lesson-list a:first-child{border-top:0}.progress-lesson-list a:hover strong{color:var(--accent)}.lesson-progress-index{font:11px var(--mono);color:var(--dim)}.progress-lesson-list strong{display:block;font-size:12px;font-weight:550;line-height:1.25}.progress-lesson-list small{display:block;margin-top:3px;color:var(--muted);font-size:10px}.progress-lesson-list b{color:var(--dim);font-weight:500}.progress-lesson-list b.done{color:var(--accent)}.text-button{padding:0;color:var(--muted);font-size:12px}.text-button:hover{color:var(--accent)}.progress-history{margin-bottom:16px}.progress-history .table-scroll{margin:0 -4px}.progress-history-table{margin:0}.progress-history-table th{padding-top:9px}.progress-history-table td:nth-child(2){max-width:260px;color:var(--muted)}.progress-history-table td:nth-child(3){font-weight:500}.progress-local-note{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;padding:6px 2px 24px}.progress-local-note .text-button{margin-left:auto;white-space:nowrap}.progress-storage-status{margin:24px 0 16px;border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:17px 18px}.progress-storage-status>div{display:flex;justify-content:space-between;gap:18px;align-items:center}.progress-storage-label{font-size:13px;color:var(--muted)}#progress-storage-state{font:500 12px var(--mono);color:var(--accent);text-align:right}.progress-storage-status p,.progress-data-help{margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.progress-data-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.progress-data-actions .small-button{width:100%}.progress-danger{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.progress-danger strong,.progress-danger span{display:block}.progress-danger strong{font-size:13px}.progress-danger span{margin-top:3px;color:var(--muted);font-size:10px}.progress-danger .delete-data{margin:0;white-space:nowrap}
@media(max-width:900px){.progress-metrics{grid-template-columns:1fr 1fr}.progress-main-grid,.progress-detail-grid{grid-template-columns:1fr}.progress-activity{max-width:none}}
@media(max-width:560px){#progress-view{--progress-gap:12px}.progress-metrics{gap:10px;margin-top:24px}.progress-metrics article{padding:16px;min-height:132px}.progress-metrics article>strong{font-size:27px}.progress-card{padding:17px}.progress-card-head{margin-bottom:15px}.progress-trend svg{height:165px}.activity-grid,.activity-week-labels{gap:5px}.progress-data-actions{grid-template-columns:1fr}.progress-danger{align-items:flex-start;flex-direction:column}.progress-local-note{align-items:flex-start;flex-wrap:wrap}.progress-local-note .text-button{margin-left:19px}.progress-history-table td:nth-child(2){max-width:180px}}


/* Mobile resilience refinements: preserve the desktop design while preventing tight-screen overflow. */
@media(max-width:480px){
.studio{overflow-x:clip}
.studio header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.studio header .header-right{gap:8px;min-width:0}
.studio header .icon-button{width:34px;height:34px;flex:0 0 34px}
.studio header nav{min-width:0}
.studio main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.studio .secondary-toolbar>label{flex:1 1 150px;min-width:0}
.studio .secondary-toolbar select{width:100%;max-width:100%;font-size:16px}
.studio .toggles{flex:1 1 auto;justify-content:space-between;min-width:0}
.studio .test-bottom>span{max-width:none;flex:1 1 180px}
.studio .test-actions{margin-left:auto}
.result-panel .result-grid>*{min-width:0}
.progress-card,.progress-metrics article,.lesson-card{min-width:0}
}
@media(max-width:380px){
.studio .brand{font-size:20px}
.studio .brandmark{width:30px;height:30px;font-size:22px;padding-left:6px}
.studio .brandmark span{font-size:18px}
.studio .stats-live{gap:16px;justify-content:space-between}
.studio .stats-live>div{min-width:0}
.studio .stats-live strong{font-size:24px}
.studio .typing-wrap{margin-left:16px;margin-right:16px}
.studio .stats-live,.studio .test-topline,.studio .test-bottom{padding-left:16px;padding-right:16px}
.studio .time-track{margin-left:16px;margin-right:16px}
}

/* Mobile optimization v2 — responsive-only refinements. Desktop layout and application behavior are unchanged. */
@media(max-width:850px){
  .studio{min-width:0;overflow-x:clip}
  .studio header{
    padding-top:max(14px,env(safe-area-inset-top));
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  .studio header>.brand,.studio header>.header-right,.studio header>nav,.studio main,.studio .view,.studio .test-shell{min-width:0}
  .studio header nav{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    scroll-padding-inline:6px;
  }
  .studio main{
    width:100%;
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  .studio footer{
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
  .studio .test-toolbar,.studio .secondary-toolbar,.studio .stats-live,.studio .test-topline,.studio .test-bottom,.studio .typing-wrap{min-width:0}
  .studio .mode-buttons,.studio .duration-buttons,.studio .toggles{min-width:0}
  .studio .mode-buttons button,.studio .duration-buttons button{min-height:38px}
  .studio .secondary-toolbar select{min-height:38px}
  .studio .toggles label{min-height:38px}
  .studio .test-actions button,.studio .below-test button,.session-navigation .small-button{min-height:38px}
  .practice-card,.lesson-card,.drill-card,.progress-card,.progress-metrics article{min-width:0}
  .table-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  dialog,dialog.result-panel,dialog#custom-panel{
    max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }
}

@media(max-width:600px){
  .studio header{row-gap:10px}
  .studio header nav{gap:2px;padding:4px;width:100%}
  .studio header nav>a,.studio header nav>button{min-height:40px}
  .studio main{padding-top:16px}
  .workspace-heading{margin-bottom:14px}
  .workspace-heading h1{line-height:1.22}
  .studio .test-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:8px;
    padding:10px 12px;
  }
  .studio .mode-buttons{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
  }
  .studio .mode-buttons button{
    width:100%;
    min-width:0;
    padding:8px 4px;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .studio .duration-buttons{
    width:100%;
    margin-left:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
  }
  .studio .duration-buttons button{width:100%;min-width:0;padding:7px 6px}
  .studio .secondary-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    padding:10px 14px;
    gap:7px;
  }
  .studio .secondary-toolbar>label{width:100%;min-width:0}
  .studio .secondary-toolbar select{
    width:100%;
    max-width:100%;
    padding:6px 2px;
    font-size:16px;
  }
  .studio .toggles{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 12px;
  }
  .studio .toggles label{gap:8px;min-width:0}
  .studio .toggles input{width:18px;height:18px;flex:0 0 18px}
  .studio .test-topline{padding-top:10px}
  .studio .stats-live{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    justify-content:stretch;
    padding-top:10px;
    padding-bottom:4px;
  }
  .studio .stats-live>div{min-width:0;flex-direction:column;align-items:flex-start;gap:0}
  .studio .stats-live strong{font-size:clamp(23px,7vw,27px);line-height:1.15}
  .studio .typing-wrap{
    height:clamp(132px,22svh,150px);
    margin-top:14px;
    margin-bottom:18px;
  }
  .studio .words{font-size:min(var(--typing-size),clamp(22px,6.7vw,26px));line-height:1.82}
  .studio #focus-prompt{
    max-width:calc(100% - 8px);
    white-space:normal;
    text-align:center;
    line-height:1.35;
    padding:7px 10px;
  }
  .studio .test-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center}
  .studio .test-bottom>span{max-width:none;min-width:0}
  .studio .test-actions{margin-left:0;gap:10px;justify-self:end}
  .studio .below-test{align-items:center;row-gap:8px}
  .session-navigation{row-gap:8px}
  .section-heading{min-width:0}
  .settings-grid{grid-template-columns:1fr;gap:14px;margin:22px 0}
  .setting-check{grid-column:1}
  .settings-grid select{min-height:44px}
  .result-panel .section-heading{flex-wrap:wrap;gap:12px}
  .result-panel .result-stats{margin:16px 0;padding:14px;gap:10px}
  .result-panel .result-stat strong{font-size:30px}
  .detail-metrics{gap:10px;padding-bottom:16px}
  .result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .result-actions .small-button{width:100%;min-width:0;white-space:normal}
  .progress-card-head{flex-wrap:wrap;row-gap:10px}
  .progress-card-head>span{white-space:normal}
  .progress-card select{min-height:40px;font-size:16px}
  .progress-storage-status>div{align-items:flex-start;flex-direction:column;gap:6px}
  #progress-storage-state{text-align:left}
  #keyboard .key-row{gap:2px;width:100%}
  #keyboard .key{flex:1 1 0;min-width:0;padding:6px 1px;font-size:10px}
}

@media(max-width:480px){
  .studio header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .studio main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .studio header .header-right{gap:7px}
  .studio header nav>a,.studio header nav>button{font-size:12px;padding:8px 7px}
  .studio .test-shell{border-radius:14px}
  .studio .stats-live,.studio .test-topline,.studio .test-bottom{padding-left:16px;padding-right:16px}
  .studio .typing-wrap,.studio .time-track{margin-left:16px;margin-right:16px}
  .studio .secondary-toolbar{padding-left:16px;padding-right:16px}
  .studio .practice-card,.studio .lesson-card{padding-left:18px;padding-right:18px}
  dialog,dialog.result-panel,dialog#custom-panel{width:calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));padding:16px}
  .dialog-top{align-items:flex-start;gap:12px}
  .result-panel h2{font-size:22px;line-height:1.2}
  .result-panel .section-heading .primary-button{min-height:40px}
  .progress-metrics article{padding:15px;min-height:126px}
  .progress-card{padding:16px}
  .progress-metrics article>strong{font-size:26px}
  .progress-history .table-scroll{margin-left:-2px;margin-right:-2px}
}

@media(max-width:380px){
  .studio .brand{font-size:19px}
  .studio header nav>a,.studio header nav>button{font-size:11.5px;padding-left:5px;padding-right:5px}
  .studio .mode-buttons button{font-size:11.5px;padding-left:2px;padding-right:2px}
  .studio .duration-buttons button{font-size:12px}
  .studio .stats-live{gap:6px}
  .studio .stats-live strong{font-size:23px}
  .studio .typing-wrap{height:136px}
  .studio .words{font-size:min(var(--typing-size),22px)}
  .result-actions{grid-template-columns:1fr}
  .activity-grid,.activity-week-labels{gap:4px}
  .progress-metrics{gap:8px}
  .progress-metrics article{padding:13px;min-height:120px}
}

@media(max-width:850px) and (hover:none) and (pointer:coarse){
  .studio header .icon-button{width:42px;height:42px;flex:0 0 42px}
  .studio header nav>a,.studio header nav>button{min-height:42px}
  .studio .mode-buttons button,.studio .duration-buttons button,.studio .secondary-toolbar select,.studio .toggles label,.studio .test-actions button,.studio .below-test button,.session-navigation .small-button,.result-actions button,.dialog-top .icon-button{min-height:42px}
  .practice-card,.lesson-card,.drill-card{touch-action:manipulation}
}

/* Mobile optimization v2 — supporting article / guide pages. */
@media(max-width:700px){
  body:not(.studio){overflow-x:clip}
  body:not(.studio) header{
    padding-top:max(16px,env(safe-area-inset-top));
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
  }
  body:not(.studio) header nav{min-width:0}
  body:not(.studio) header nav a{display:inline-flex;align-items:center;min-height:40px}
  body:not(.studio) main.article-layout{
    width:100%;
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
  }
  body:not(.studio) footer{
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }
  body:not(.studio) .article-layout>*{min-width:0}
  body:not(.studio) .guide-grid>*{min-width:0}
}
@media(max-width:380px){
  body:not(.studio) header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  body:not(.studio) main.article-layout{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  body:not(.studio) header nav{gap:7px}
  body:not(.studio) header nav a{font-size:12px}
}
@media(max-width:700px) and (hover:none) and (pointer:coarse){
  body:not(.studio) header nav a{min-height:42px}
}

/* Desktop typer toolbar alignment: modes use the full primary row; test length sits centered below. */
.studio .test-toolbar[hidden],.studio .secondary-toolbar[hidden]{display:none!important}
.studio .test-toolbar{display:block}
.studio .mode-buttons{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  gap:5px;
}
.studio .mode-buttons button{
  width:100%;
  min-width:0;
  text-align:center;
}
.studio .secondary-toolbar{
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto minmax(210px,1fr);
  align-items:center;
  gap:18px;
}
.studio .secondary-toolbar>label{
  width:min(100%,190px);
  min-width:0;
  justify-self:start;
}
.studio .secondary-toolbar .duration-buttons{
  justify-self:center;
  margin:0;
}
.studio .secondary-toolbar .toggles{
  justify-self:end;
}
@media(max-width:700px){
  .studio .secondary-toolbar{
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:7px;
  }
  .studio .secondary-toolbar>label{
    width:100%;
    justify-self:stretch;
  }
  .studio .secondary-toolbar .duration-buttons{
    width:100%;
    justify-self:stretch;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
  }
  .studio .secondary-toolbar .toggles{
    width:100%;
    justify-self:stretch;
  }
}

/* V5: optional tools inherit the existing visual system. */
#pace-caret{position:absolute;left:0;top:0;width:2px;background:var(--accent);opacity:.4;pointer-events:none;z-index:2;border-top:3px solid var(--text)}
#pace-caret[hidden],#caps-warning[hidden]{display:none!important}
#caps-warning{font-size:11px;color:var(--accent);white-space:nowrap}
#duration-form{display:grid;gap:14px}#custom-seconds{width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
.daily-goal-card{padding:18px;margin:16px 0;border:1px solid var(--border);border-radius:12px}.daily-goal-card>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.daily-goal-card progress{width:100%;height:7px;margin-top:14px;accent-color:var(--accent)}.daily-goal-card p{margin:8px 0 0;font-size:12px}
.practice-milestones{margin:16px 0}.practice-milestones .word-chips{margin-top:14px}.practice-milestones .earned{color:var(--accent)}.practice-milestones .pending{color:var(--muted)}
.attempt-review{max-height:220px;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap;font-family:'DM Mono',monospace;font-size:15px;line-height:1.9;padding:14px;border:1px solid var(--border);border-radius:8px;margin:12px 0}.review-correct{color:var(--text)}.review-wrong{color:var(--error,#ed7979);background:rgba(220,70,70,.15)}.review-corrected{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.review-untyped{color:var(--muted);opacity:.55}
@media(max-width:600px){.duration-buttons{flex-wrap:wrap}.daily-goal-card{padding:14px}#caps-warning{font-size:10px}}
@media(max-width:700px){.studio .secondary-toolbar .duration-buttons:has(#custom-duration){grid-template-columns:repeat(5,minmax(0,1fr))}}
.review-wrong{color:var(--wrong)}


/* V6 adaptive analytics — additive only; core typing workspace remains unchanged. */
.technique-details{margin-top:18px;border-top:1px solid var(--border);padding-top:16px}.technique-details>summary{font-weight:500}.technique-details>.muted{margin:8px 0 13px}.technique-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.technique-grid>div{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:12px}.technique-grid strong{display:block;font:500 18px var(--mono);color:var(--accent);overflow-wrap:anywhere}.technique-grid span{display:block;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.4}.pattern-list{display:grid;gap:10px}.pattern-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border)}.pattern-row:first-child{border-top:0}.pattern-row kbd{min-width:54px;text-align:center;color:var(--accent);text-transform:none}.pattern-row span{color:var(--muted);font-size:11px}.pattern-row strong{color:var(--text);font-weight:600}.typing-dna{display:grid;gap:7px;max-width:520px;margin:4px auto 0}.typing-dna-row{display:flex;justify-content:center;gap:6px}.typing-dna-row:nth-child(2){padding-inline:18px}.typing-dna-row:nth-child(3){padding-inline:38px}.dna-key{flex:1;max-width:42px;min-width:26px;height:36px;display:grid;place-items:center;padding:0;background:color-mix(in srgb,var(--wrong) var(--risk),var(--bg));border-bottom-width:3px;color:var(--text);font-size:11px}.dna-key.unmeasured{opacity:.48;background:var(--bg)}
@media(max-width:850px){.technique-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.technique-grid{grid-template-columns:1fr}.typing-dna-row{gap:4px}.dna-key{min-width:22px;height:32px;font-size:10px}.typing-dna-row:nth-child(2){padding-inline:10px}.typing-dna-row:nth-child(3){padding-inline:22px}}

.test-actions #keyboard-open{font-size:14px;white-space:nowrap;color:var(--muted)}.test-actions #keyboard-open:hover{color:var(--accent)}#keyboard-dialog #keyboard-guide-tip{margin:16px 0 4px}#keyboard-dialog .key.next{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}


/*
 * Typespry V7 — visual refinement only.
 * Existing markup, selectors, controls, typing geometry and JavaScript are retained.
 * Local fonts and CSS surfaces keep the interface independent of external assets.
 */
:root {
  --bg: #0e1511;
  --panel: #17211b;
  --panel2: #202d24;
  --border: #36483c;
  --text: #edf5ef;
  --muted: #afbeb3;
  --dim: #98ab9e;
  --accent: #baf2cc;
  --accent-ink: #163523;
  --wrong: #ff9da8;
  --surface-raised: #1b271f;
  --surface-hover: #26362b;
  --accent-soft: #263c2e;
  --border-soft: #2c3c31;
  --control-border: #617569;
  --card-shadow: 0 10px 30px #00000016, inset 0 1px 0 #ffffff05;
  --workspace-shadow: 0 24px 64px #00000025, 0 2px 8px #00000012, inset 0 1px 0 #ffffff08;
  --dialog-shadow: 0 32px 100px #00000060, inset 0 1px 0 #ffffff0a;
  --ease-ui: cubic-bezier(.2, .7, .2, 1);
}
body.light, :root.light {
  --bg: #f2f5ef;
  --panel: #fffefb;
  --panel2: #eaf0e7;
  --border: #cdd8cb;
  --text: #243529;
  --muted: #526755;
  --dim: #617464;
  --accent: #28613c;
  --accent-ink: #ffffff;
  --wrong: #b72643;
  --surface-raised: #f6f8f2;
  --surface-hover: #e4ece0;
  --accent-soft: #e0eedf;
  --border-soft: #e0e7dc;
  --control-border: #7c927e;
  --card-shadow: 0 8px 24px #203b2510, inset 0 1px 0 #ffffff;
  --workspace-shadow: 0 22px 60px #29422e13, 0 2px 6px #29422e08, inset 0 1px 0 #ffffff;
  --dialog-shadow: 0 32px 100px #18302230, inset 0 1px 0 #ffffff;
}
body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--accent) 5%, transparent), transparent 68%);
  background-size: 100% 700px;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--accent-ink); }
header {
  background: color-mix(in srgb, var(--bg) 96%, var(--panel));
  border-bottom-color: var(--border-soft);
}
.studio header { min-height: 84px; padding-block: 16px; gap: 32px; }
.brand { font-weight: 750; letter-spacing: -1.1px; }
.brandmark {
  border-radius: 11px;
  box-shadow: inset 0 1px 0 #ffffff26, 0 4px 12px #00000012;
}
.studio header nav {
  padding: 4px;
  gap: 4px;
  border-radius: 14px;
  border-color: var(--border-soft);
  background: var(--panel);
  box-shadow: inset 0 1px 0 #ffffff04;
}
.studio header nav > a, .studio header nav > button {
  border-radius: 10px;
  font-weight: 550;
  padding-inline: 14px;
  transition: background-color .16s var(--ease-ui), color .16s var(--ease-ui), box-shadow .16s var(--ease-ui);
}
.studio header nav > a:hover, .studio header nav > button:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.studio header nav > a.active, .studio header nav > button.active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border-soft));
}
.studio .header-right { gap: 10px; }
.icon-button {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--panel);
  border-color: var(--border);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color .16s var(--ease-ui), color .16s var(--ease-ui), border-color .16s var(--ease-ui);
}
.icon-button:hover { color: var(--accent); border-color: var(--control-border); background: var(--surface-hover); }
.studio main { padding-top: 26px; }
h1, h2, h3 { color: var(--text); }
h1 { font-weight: 550; letter-spacing: -1.6px; }
h2 { font-weight: 550; letter-spacing: -.7px; }
h3 { font-weight: 550; }
.eyebrow, .progress-kicker { font-weight: 650; letter-spacing: 1.7px; }
.studio .view:not(#practice-view) h1 { letter-spacing: -1.3px; font-weight: 550; }
.subline { line-height: 1.7; }
.studio .test-shell {
  border-radius: 22px;
  border-color: var(--border);
  background: linear-gradient(160deg, var(--surface-raised), var(--panel) 42%);
  box-shadow: var(--workspace-shadow);
}
.studio .test-toolbar { padding: 12px 20px; border-bottom-color: var(--border-soft); }
.studio .mode-buttons { gap: 6px; }
.studio .mode-buttons button {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: .05px;
  transition: background-color .16s var(--ease-ui), color .16s var(--ease-ui), box-shadow .16s var(--ease-ui);
}
.studio .mode-buttons button.selected {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 #ffffff24, 0 3px 10px #00000010;
}
.studio .mode-buttons button:not(.selected):hover { background: var(--surface-hover); color: var(--text); }
.studio .secondary-toolbar { padding-block: 12px; gap: 14px; }
.studio .secondary-toolbar > label { width: min(100%, 200px); }
.studio .secondary-toolbar select {
  font-size: 12px;
  color: var(--muted);
  min-height: 34px;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--control-border);
  background: var(--panel);
  border-radius: 9px;
  padding: 6px 8px;
}
.studio .duration-buttons {
  gap: 3px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 11px;
}
.studio .duration-buttons button {
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 7px;
  font: 400 12px var(--mono);
  transition: background-color .16s var(--ease-ui), color .16s var(--ease-ui), box-shadow .16s var(--ease-ui);
}
.studio .duration-buttons button.selected {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--border-soft));
}
.studio .duration-buttons button:not(.selected):hover { background: var(--surface-hover); color: var(--text); }
.studio .toggles { gap: 14px; }
.studio .toggles label { color: var(--muted); font-size: 12px; min-height: 32px; }
.studio .toggles input { width: 15px; height: 15px; }
.studio .test-topline { color: var(--muted); letter-spacing: 1.2px; }
.studio .test-topline #test-state { color: var(--dim); }
.studio .stats-live { gap: 42px; }
.studio .stats-live strong { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.9px; }
.studio .stats-live span { color: var(--dim); font-size: 11px; }
.studio .words { color: var(--dim); }
.studio .words .char.correct { color: var(--text); }
.studio .words .char.incorrect { color: var(--wrong); }
.studio .typing-wrap:not(:focus-within) .words { opacity: .74; }
.studio #focus-prompt {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--control-border);
  border-radius: 10px;
  box-shadow: 0 5px 20px #00000014;
  padding: 8px 14px;
}
.studio .time-track { height: 3px; border-radius: 4px; background: var(--border-soft); }
.studio .time-track > div { border-radius: inherit; }
.studio .test-bottom { border-top: 1px solid var(--border-soft); padding-block: 12px; }
.studio .test-bottom > span { color: var(--dim); font-size: 11px; }
.studio .test-actions { gap: 10px; }
.studio .test-actions button {
  min-height: 32px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 9px;
  padding: 5px 10px;
  transition: background-color .16s var(--ease-ui), border-color .16s var(--ease-ui), color .16s var(--ease-ui);
}
.studio .test-actions #keyboard-open, .studio .test-actions #sound-toggle { font-size: 12px; }
.studio .test-actions #restart { font-size: 19px; }
.studio .test-actions #restart span { font-size: 12px; }
.studio .test-actions button:hover { background: var(--surface-hover); border-color: var(--control-border); color: var(--accent); }
.studio .test-actions #sound-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--control-border); }
.studio .below-test { color: var(--dim); }
kbd { border-color: var(--border); background: var(--surface-raised); border-radius: 5px; color: var(--muted); }
.primary-button {
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 80%, var(--accent-ink));
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 3px 9px #00000012, inset 0 1px 0 #ffffff16;
  transition: background-color .16s var(--ease-ui), box-shadow .16s var(--ease-ui);
}
.small-button {
  font-weight: 550;
  background: var(--panel2);
  border-color: var(--border);
  border-radius: 10px;
  color: var(--text);
  transition: background-color .16s var(--ease-ui), border-color .16s var(--ease-ui), color .16s var(--ease-ui);
}
.primary-button:hover { filter: none; background: color-mix(in srgb, var(--accent) 90%, var(--text)); box-shadow: 0 4px 12px #0000001c; }
.small-button:hover { filter: none; background: var(--surface-hover); border-color: var(--control-border); }
.primary-button:active, .small-button:active { box-shadow: inset 0 1px 3px #00000016; }
button:disabled { box-shadow: none; }
.practice-card, .lesson-card, .reading-card, .history-chart, .insight-card, .progress-card, .progress-metrics article, .guide-grid a {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 17px;
  box-shadow: var(--card-shadow);
}
.practice-card, .lesson-card, .guide-grid a { transition: border-color .18s var(--ease-ui), box-shadow .18s var(--ease-ui), transform .18s var(--ease-ui); }
.practice-card h3 { font-weight: 600; letter-spacing: -.4px; }
.practice-card p, .lesson-card p { line-height: 1.75; }
.card-icon { border-radius: 12px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.mint { color: var(--accent); background: var(--accent-soft); }
.peach { color: #efd0a5; background: #3b3226; }
.lilac { color: #d5c4f3; background: #363044; }
body.light .peach { color: #825327; background: #f6e8d4; }
body.light .lilac { color: #654591; background: #efe7f9; }
.card-tag { font-size: 11px; letter-spacing: 1.2px; color: var(--muted); }
.card-link { border-top-color: var(--border-soft); color: var(--text); font-weight: 550; }
.card-link b { color: var(--accent); }
.lesson-card .number { font-size: 28px; }
.lesson-card { display: flex; flex-direction: column; }
.lesson-card p:not(.lesson-status) { flex: 1; }
.daily-options .small-button { align-self: flex-start; }
.lesson-card code { padding: 10px 12px; border-radius: 9px; background: var(--accent-soft); font-size: 16px; }
.lesson-card.completed { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.reading-card { line-height: 1.8; }
.streak-box { border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.empty-state { border-color: var(--control-border); border-radius: 18px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.session-navigation .small-button { background: var(--panel); }
.studio footer { border-top: 1px solid var(--border-soft); color: var(--dim); }
.studio footer .brand { font-weight: 650; letter-spacing: -.6px; }
footer a { transition: color .16s var(--ease-ui); }
dialog, dialog.result-panel, dialog#custom-panel {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 22px;
  box-shadow: var(--dialog-shadow);
}
dialog::backdrop { background: #07100bcc; backdrop-filter: blur(6px); }
body.light dialog::backdrop { background: #24382b63; }
.dialog-top .icon-button, dialog .section-heading .icon-button { width: 34px; height: 34px; border-radius: 10px; }
dialog h2 { font-weight: 600; letter-spacing: -.8px; }
.result-panel .result-stats { background: var(--bg); border-color: var(--border-soft); border-radius: 15px; }
.result-panel .result-stat strong { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -1.2px; }
.result-panel .result-stat span { color: var(--muted); }
.detail-metrics .result-stat strong { letter-spacing: -.3px; }
.result-panel .result-grid { border-top-color: var(--border-soft); }
.result-panel .result-grid h3 { font-weight: 550; }
.result-panel details { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.result-panel summary { min-height: 28px; font-weight: 550; }
.result-panel .attempt-review { border-color: var(--border); background: var(--bg); border-radius: 11px; }
.word-chips span, .key-chip { border-radius: 8px; background: var(--surface-raised); }
.technique-grid > div { background: var(--bg); border-color: var(--border-soft); border-radius: 12px; }
.technique-grid strong { font-size: 20px; }
.technique-grid span { font-size: 11px; }
.drill-card {
  background: var(--bg);
  border-radius: 13px;
  border-color: var(--border);
  padding: 18px 20px;
  transition: border-color .18s var(--ease-ui), background-color .18s var(--ease-ui);
}
.drill-card strong { font-weight: 600; }
.drill-card span { line-height: 1.65; }
.drill-card:hover { background: var(--accent-soft); border-color: var(--control-border); }
.settings-grid label { font-weight: 500; }
.settings-grid select, #custom-text, #custom-seconds, .progress-card select {
  background: var(--bg);
  border-color: var(--control-border);
  border-radius: 10px;
  transition: border-color .16s var(--ease-ui), box-shadow .16s var(--ease-ui);
}
.settings-grid select:hover, #custom-text:hover, #custom-seconds:hover { border-color: var(--accent); }
.setting-check input { accent-color: var(--accent); }
.settings-grid + .muted { line-height: 1.7; }
.key { border-radius: 7px; background: var(--surface-raised); border-color: var(--border); box-shadow: inset 0 1px 0 #ffffff06; }
.key.next { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.weak-key-row kbd { border-color: var(--border); border-radius: 8px; background: var(--bg); }
.dna-key { box-shadow: inset 0 1px 0 #ffffff06; }
.progress-metrics article { border-radius: 16px; }
.progress-metrics article > span { font-size: 12px; font-weight: 500; }
.progress-metrics article > strong { letter-spacing: -1.3px; }
.progress-metrics article:first-child > strong { color: var(--accent); }
.progress-card-head h3 { font-weight: 550; }
.progress-caption, .progress-local-note { line-height: 1.65; }
.progress-lesson-list a { border-top-color: var(--border-soft); }
.activity-day { border-radius: 7px; }
.activity-summary, .progress-danger { border-top-color: var(--border-soft); }
.daily-goal-card { background: var(--surface-raised); border-radius: 14px; border-color: var(--border); }
.daily-goal-card strong { font-weight: 600; }
.daily-goal-card progress, .goal-summary progress { border-radius: 6px; overflow: hidden; }
.daily-goal-card progress::-webkit-progress-bar { background: var(--border-soft); border-radius: 6px; }
.daily-goal-card progress::-webkit-progress-value { background: var(--accent); border-radius: 6px; }
.history-table th { color: var(--muted); font-weight: 550; font-size: 11px; letter-spacing: .3px; }
.history-table td, .history-table th { border-bottom-color: var(--border-soft); }
.history-table tbody tr:hover { background: var(--surface-raised); }
.progress-storage-status { background: var(--bg); border-color: var(--border); border-radius: 13px; }
.practice-milestones .earned { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.practice-milestones .pending { background: var(--bg); color: var(--muted); }
.text-button, .delete-data { min-height: 28px; }
#toast { border: 1px solid color-mix(in srgb, var(--accent) 75%, var(--accent-ink)); border-radius: 12px; box-shadow: 0 10px 35px #00000030; font-weight: 500; }
.article-layout { line-height: 1.85; }
.article-layout h1 { font-weight: 550; }
.article-layout h2 { font-weight: 550; }
.article-layout .notice { border-radius: 0 12px 12px 0; background: var(--accent-soft); }
.article-layout table { border-radius: 10px; }
.guide-grid h2 { font-weight: 550; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .practice-card:hover, .lesson-card:hover, .guide-grid a:hover {
    transform: translateY(-2px);
    border-color: var(--control-border);
    box-shadow: 0 14px 34px #00000018, inset 0 1px 0 #ffffff08;
  }
}
/* Compact desktop dimensions keep the complete practice view visible. */
@media (min-width: 1000px) and (max-height: 800px) {
  .studio header { min-height: 64px; padding-block: 12px; }
  .studio main { padding-top: 14px; }
  .studio .test-toolbar { padding-block: 8px; }
  .studio .secondary-toolbar { padding-block: 7px; }
  .studio .test-bottom { padding-block: 9px; }
}
@media (max-width: 1050px) {
  .studio header { gap: 20px; }
  .studio header nav > a, .studio header nav > button { padding-inline: 11px; }
  .studio .secondary-toolbar { gap: 10px; }
  .studio .toggles { gap: 10px; }
}
@media (max-width: 850px) {
  .studio header { min-height: 0; padding-block: 15px; gap: 12px; }
  .studio header nav { border-radius: 13px; gap: 4px; }
  .studio header nav > a, .studio header nav > button { flex: 1 0 auto; }
  .studio main { padding-top: 20px; }
  .studio .test-shell { border-radius: 19px; }
  .studio .test-toolbar { padding: 10px 13px; }
  .studio .stats-live { gap: 30px; }
  .studio .test-bottom { padding-block: 12px; }
  .studio .test-actions { gap: 7px; }
  .studio .test-actions button { padding-inline: 8px; }
  .studio footer { margin-top: 20px; }
}
@media (max-width: 700px) {
  .studio .secondary-toolbar > label { width: 100%; }
  .studio .secondary-toolbar select { font-size: 16px; min-height: 40px; padding-inline: 10px; }
  .studio .duration-buttons { gap: 3px; padding: 3px; }
  .studio .duration-buttons button { min-height: 36px; padding: 6px 4px; }
  .studio .toggles label { min-height: 36px; }
  .studio .toggles input { width: 18px; height: 18px; }
}
@media (max-width: 600px) {
  .studio header { row-gap: 12px; }
  .studio header nav { gap: 2px; padding: 4px; }
  .studio header nav > a, .studio header nav > button { min-height: 40px; padding: 8px 7px; }
  .studio main { padding-top: 18px; }
  .studio .test-toolbar { padding: 9px; }
  .studio .mode-buttons { gap: 3px; }
  .studio .mode-buttons button { padding: 8px 3px; min-height: 38px; font-size: 12px; border-radius: 9px; }
  .studio .secondary-toolbar { padding-block: 10px; gap: 8px; }
  .studio .toggles { gap: 8px 12px; }
  .studio .stats-live { gap: 8px; }
  .studio .stats-live strong { letter-spacing: -.6px; }
  .studio .test-bottom { gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .studio .test-bottom > span { font-size: 11px; }
  .studio .test-actions { justify-self: stretch; justify-content: flex-end; gap: 7px; }
  .studio .test-actions button { min-height: 38px; padding-inline: 10px; }
  .studio .test-actions #restart { margin-left: auto; }
  .studio .below-test { margin-top: 13px; font-size: 11px; }
  .studio footer { row-gap: 12px; padding-top: 18px; }
  .practice-card, .lesson-card, .reading-card, .progress-card, .progress-metrics article { border-radius: 14px; }
  dialog, dialog.result-panel, dialog#custom-panel { border-radius: 18px; }
  .result-panel .result-stats { border-radius: 12px; }
  .dialog-top .icon-button, dialog .section-heading .icon-button { width: 38px; height: 38px; }
  .technique-grid strong { font-size: 18px; }
}
@media (max-width: 380px) {
  .studio header nav > a, .studio header nav > button { font-size: 11.5px; padding-inline: 5px; }
  .studio .mode-buttons button { font-size: 11.5px; padding-inline: 2px; }
  .studio .duration-buttons button { font-size: 11px; }
  .studio .test-actions { gap: 5px; }
  .studio .test-actions button { padding-inline: 8px; }
  .studio .test-actions #keyboard-open, .studio .test-actions #sound-toggle { font-size: 11px; }
}
@media (hover: none) and (pointer: coarse) {
  .studio header .icon-button { width: 42px; height: 42px; flex-basis: 42px; }
  .studio header nav > a, .studio header nav > button, .studio .mode-buttons button,
  .studio .duration-buttons button, .studio .secondary-toolbar select,
  .studio .toggles label, .studio .test-actions button, .dialog-top .icon-button,
  dialog .section-heading .icon-button, .primary-button, .small-button { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio header nav > a, .studio header nav > button, .icon-button,
  .studio .mode-buttons button, .studio .duration-buttons button, .studio .test-actions button,
  .primary-button, .small-button, .practice-card, .lesson-card, .guide-grid a,
  .drill-card, .settings-grid select, #custom-text, #custom-seconds, .progress-card select,
  footer a { transition: none; }
  .practice-card:hover, .lesson-card:hover, .guide-grid a:hover { transform: none; }
}

/* Source: experience.css */
/* V8 additions keep the existing palette, test geometry and content modes. */
.studio-intro {display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 2px 19px}
.studio-intro h1 {font-size:clamp(21px,2.1vw,28px);font-weight:500;letter-spacing:-.8px;margin:0;line-height:1.25}
.studio-intro h1 span {color:var(--accent)}
.studio-intro p {font-size:12px;color:var(--muted);margin:5px 0 0}
.today-summary {display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted);flex-shrink:0}
.today-goal {display:flex;align-items:center;gap:9px;min-height:38px;padding:7px 13px;border:1px solid var(--border);border-radius:30px;background:var(--panel);font-size:12px;color:var(--muted)}
.today-goal:hover,.today-goal.goal-complete {color:var(--accent);border-color:var(--control-border)}
.goal-dot {width:7px;height:7px;background:var(--accent);border-radius:50%;flex-shrink:0}
.practice-shortcuts {display:flex;align-items:center;gap:8px;margin:15px 0 0;flex-wrap:wrap;font-size:12px}
.practice-shortcuts a,.practice-shortcuts button {min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border:1px solid transparent;border-radius:9px;color:var(--muted);font-size:12px}
.practice-shortcuts a:hover,.practice-shortcuts button:hover {color:var(--text);background:var(--panel);border-color:var(--border)}
.practice-shortcuts #quick-start-open {border-color:var(--border);background:var(--panel);color:var(--accent)}
.practice-shortcuts #copy-practice-link {margin-left:auto}
.practice-shortcuts button:disabled {opacity:.5;cursor:not-allowed}
.shortcut-icon {font:16px var(--mono);line-height:1}
.studio .typing-wrap {border-radius:8px}
.studio .typing-wrap:has(#typing-input:focus-visible) {outline:1px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:5px}
.studio #typing-input:focus-visible {outline:none}
.studio #caret,.studio .words {transition:transform 75ms ease-out}
.studio.instant-caret #caret,.studio.instant-caret .words {transition:none}
.studio .stats-live strong {min-width:1.6ch}
.studio .time-track > div {transition:width .1s linear}
.studio-intro,.practice-shortcuts,.studio .test-toolbar,.studio .secondary-toolbar {transition:opacity .18s ease}
.is-typing .studio-intro,.is-typing .practice-shortcuts {opacity:.65}
.is-typing .studio-intro:focus-within,.is-typing .studio-intro:hover,.is-typing .practice-shortcuts:focus-within,.is-typing .practice-shortcuts:hover {opacity:1}
.quick-start-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}
.quick-start-card {text-align:left;border:1px solid var(--border);border-radius:14px;padding:18px;background:var(--bg);color:var(--text);display:flex;flex-direction:column;gap:8px;transition:background-color .15s,border-color .15s}
.quick-start-card:hover {background:var(--accent-soft);border-color:var(--control-border)}
.quick-start-card strong {font-size:16px;font-weight:550}
.quick-start-card span {color:var(--muted);font-size:13px}
.quick-start-card .preset-meta {font:11px var(--mono);color:var(--accent)}
.quick-start-note {display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;font-size:13px;color:var(--muted);padding-top:14px;border-top:1px solid var(--border)}
.quick-start-note a {color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.help-steps {padding-left:23px;margin:20px 0;color:var(--muted)}
.help-steps li {padding:6px 0}
.help-steps strong {color:var(--text);font-weight:550}
.help-shortcuts {display:grid;grid-template-columns:auto 1fr;gap:12px 25px;padding:18px;border:1px solid var(--border);border-radius:12px;font-size:13px}
.help-shortcuts dt,.help-shortcuts dd {margin:0}
.help-shortcuts dd {color:var(--muted)}
.daily-summary-bar {display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--border);background:var(--panel);border-radius:12px;padding:12px 16px;margin-top:22px;font-size:13px}
.daily-summary-bar #daily-completed {color:var(--muted);margin-right:auto}
.daily-status {display:block;margin:14px 0 0;font-size:12px;color:var(--muted)}
.daily-status.has-result {color:var(--accent)}
.result-sharing {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 6px;padding:16px 0;border-top:1px solid var(--border)}
.result-sharing p {font-size:12px;color:var(--muted);margin:0;flex:1;min-width:160px}
#next-lesson {margin:14px 0 0}
#share-copy-text {display:block;width:100%;min-height:128px;resize:vertical;background:var(--bg);border:1px solid var(--control-border);border-radius:10px;padding:12px;color:var(--text);font-size:14px;margin:15px 0;user-select:text}
.guide-cta {display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:22px;border:1px solid var(--border);border-radius:14px;background:var(--panel);margin:28px 0}
.guide-cta p {flex:1;min-width:200px;margin:0}
.guide-meta {font-size:12px;color:var(--muted);margin:15px 0 22px}
.article-layout .guide-table {width:100%;border-collapse:collapse;font-size:14px;margin:24px 0}
.guide-table th,.guide-table td {padding:13px 10px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.guide-table th {color:var(--accent);font-weight:500}
.article-layout details {border-top:1px solid var(--border);padding:14px 0}
.article-layout summary {cursor:pointer;font-weight:500}
.article-layout details p {color:var(--muted);font-size:15px}
@media(min-width:1000px) and (max-height:800px) {
  .studio-intro {margin-bottom:12px}
  .studio-intro h1 {font-size:22px}
  .studio-intro p {display:none}
  .practice-shortcuts {margin-top:8px}
  .studio .below-test {margin-top:10px}
}
@media(max-width:850px) {
  .studio-intro {margin-bottom:15px;gap:12px}
  #today-streak {display:none}
  .today-goal {font-size:11px;padding:7px 10px}
  .practice-shortcuts {gap:4px}
  .practice-shortcuts a,.practice-shortcuts button {padding-inline:9px}
}
@media(max-width:600px) {
  .studio-intro {align-items:center;margin-bottom:13px}
  .studio-intro h1 {font-size:19px;letter-spacing:-.5px}
  .studio-intro p {display:none}
  .today-goal {padding:7px 8px;font-size:10px;min-height:34px;gap:6px}
  .studio .test-topline {padding-top:4px}
  .studio .stats-live {padding-top:12px}
  .studio .typing-wrap {margin-top:16px;margin-bottom:18px}
  .practice-shortcuts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:12px}
  .practice-shortcuts a,.practice-shortcuts button {font-size:11px;padding:6px 4px;min-height:40px}
  .practice-shortcuts #copy-practice-link {margin-left:0;grid-column:2}
  .practice-shortcuts #help-open {grid-column:3}
  .practice-shortcuts #guide-shortcut {grid-column:3}
  .practice-shortcuts #copy-practice-link {grid-column:1 / 3}
  .quick-start-grid {gap:9px}
  .quick-start-card {padding:14px 12px}
  .quick-start-card strong {font-size:14px}
  .quick-start-card span {font-size:12px}
  .daily-summary-bar {gap:6px 12px;padding:12px}
  .daily-summary-bar #share-daily {width:100%;margin-top:8px}
  .result-sharing {gap:10px}
  .result-sharing .small-button {width:100%}
  .result-sharing p {text-align:center}
  .guide-cta {padding:18px}
  .guide-table th,.guide-table td {padding:10px 6px;font-size:12px}
  .studio .below-test {margin-top:12px}
}
@media(max-width:360px) {
  .studio-intro h1 {font-size:17px}
  .today-goal {font-size:9px;padding-inline:6px}
  .goal-dot {width:5px;height:5px}
}
@media(prefers-reduced-motion:reduce) {
  .studio #caret,.studio .words,.studio .time-track > div,.studio-intro,.practice-shortcuts,.studio .test-toolbar,.studio .secondary-toolbar,.quick-start-card {transition:none}
}

/* V9 layout: keep the existing engine and progress bindings intact while
   removing the two requested rows and freeing space below the typer. */
.studio #studio-intro,
.studio #practice-shortcuts {
  display:none;
}

/* V10: distribute the sections across the full space between the brand and
   account controls. Keep the existing mobile navigation on its own row. */
@media(min-width:851px) {
  .studio header > nav {
    flex:1 1 auto;
    min-width:0;
    margin-left:0;
  }
  .studio header > nav > a,
  .studio header > nav > button {
    flex:1 1 0;
    min-width:max-content;
  }
  .studio header > .header-right {
    margin-left:0;
  }
}

/* Reclaim a little more desktop space below the test through spacing only.
   Text size, typing viewport height and every control remain unchanged. The
   existing compact-height and mobile rules keep their original dimensions. */
@media(min-width:851px) and (min-height:801px) {
  .studio.practice-active main {padding-top:18px}
  .studio .test-toolbar {padding-block:10px}
  .studio .secondary-toolbar {padding-block:10px}
  .studio .test-topline {padding-top:6px}
  .studio .stats-live {padding-top:10px;padding-bottom:6px}
  .studio .typing-wrap {margin-top:16px;margin-bottom:18px}
  .studio .test-bottom {padding-block:10px}
  .studio .below-test {margin-top:14px}
}