:root{--ink:#162f2a;--muted:#586f68;--blue:#16634d;--line:#dce7e1;--green:#14694d;--mint:#eaf5ef;--cream:#fbfcf8;--purple:#6553bb;--shadow:0 8px 32px #183f2e06}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 system-ui,"Nirmala UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;font-weight:650}button:disabled{cursor:default;opacity:.55}a{color:var(--green);text-decoration:none}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #7667c5;outline-offset:4px}button{transition:background .18s,box-shadow .18s,transform .18s}button:not(:disabled):hover{box-shadow:0 4px 16px #123d2112}button:not(:disabled):active{transform:translateY(1px)}.icon{width:22px;height:22px;flex-shrink:0;vertical-align:middle}.skip-link{position:absolute;top:-80px;left:20px;z-index:10;background:var(--ink);color:white;padding:12px 20px;border-radius:10px}.skip-link:focus{top:10px}.site-header{max-width:1240px;margin:auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.8px;line-height:1.2}.brand-mark{width:48px;height:48px;background:var(--green);color:white;display:grid;place-items:center;border-radius:15px;box-shadow:0 5px 0 #d5e7db}.brand-mark .icon{width:29px;height:29px}.brand-accent{color:var(--green)}.brand small{display:block;color:var(--muted);font-size:10px;font-weight:500;letter-spacing:0;margin-top:6px}.home-link{font-size:13px;background:white;padding:9px 16px;border:1px solid var(--line);border-radius:25px;color:var(--muted)}main{max-width:1240px;margin:auto;padding:0 32px}h1,h2,h3,p{overflow-wrap:anywhere}h2{font-size:24px;line-height:1.5;margin:6px 0 12px}p{color:var(--muted)}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:750;color:var(--green);letter-spacing:.5px}.status-dot{width:7px;height:7px;border-radius:50%;background:#48a67e;box-shadow:0 0 0 4px #48a67e12}.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:62px;padding:46px 0 55px}.hero-copy h1{font-size:clamp(32px,3.6vw,48px);line-height:1.4;letter-spacing:-1px;margin:15px 0 20px}.hero-copy h1 em{font-style:normal;color:var(--green)}.hero-copy>p{font-size:16px;line-height:1.9;margin:0 0 24px}.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.primary,.secondary,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;border-radius:12px;padding:12px 19px;border:1px solid transparent;font-size:14px}.primary{background:var(--green);color:white;box-shadow:0 3px 0 #0d4c36}.primary:not(:disabled):hover{background:#0d553e}.secondary{background:white;color:var(--ink);border-color:var(--line)}.text-button{background:transparent;color:var(--green);padding:6px 10px;white-space:nowrap}.hero-benefits{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:11px;color:var(--muted)}.hero-benefits span{display:flex;align-items:center;gap:5px}.hero-benefits .icon{width:15px;height:15px;color:var(--green)}.hero-card{position:relative;background:#173b31;color:#fff;border:8px solid #dfebe1;border-radius:28px;padding:18px 20px 26px;box-shadow:0 24px 50px #173b3117;transform:rotate(-2deg);margin:6px 8px 20px 0}.hero-card-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#bcd4c5}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;background:#bed5c35e;border-radius:50%}.window-dots i:first-child{background:#e3bb7b}.demo-text{text-align:center;font:27px/1.4 ui-monospace,monospace;letter-spacing:5px;padding:31px 0 28px;color:#dff4df}.demo-text>span{color:#84c6a1}.demo-caret{display:inline-block;background:#ebca81;width:3px;height:30px;margin-left:1px;vertical-align:middle}.keyboard-art{background:#0b271f;border-radius:13px;padding:15px 10px;border:1px solid #c4dfcb14}.key-row{display:flex;justify-content:center;gap:5px;margin:0 0 6px}.key,.space-key{display:grid;place-items:center;background:#2c4f43;border:1px solid #6d9a8029;border-bottom:3px solid #051d15;border-radius:6px;min-width:0;height:30px;width:30px;font:10px/1 ui-monospace,monospace;color:#bdd9c7}.key.home-key{background:#adcbb5;color:#143b26;border-bottom-color:#60876b}.space-key{width:160px;font-size:10px;height:25px}.hero-card-bottom{display:flex;justify-content:center;gap:24px;font-size:11px;color:#c0d6c5;margin-top:17px}.hero-card-bottom .icon{width:15px;height:15px;margin-right:4px}.floating-note{display:flex;gap:10px;align-items:center;position:absolute;bottom:-24px;right:-12px;padding:12px 19px;background:#fff5de;color:#75562b;border:1px solid #eedfbd;border-radius:13px;transform:rotate(2deg);box-shadow:0 8px 18px #173b3110}.floating-note strong{font-size:12px;display:block}.floating-note small{font-size:10px}.floating-note>.icon{width:26px;height:26px;color:#aa8749}.getting-started{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;padding:21px 24px;background:#edf4ee;border:1px solid #e0e9dd;border-radius:18px;margin-bottom:44px}.getting-started article{display:flex;gap:13px;align-items:center}.step-number{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:white;color:var(--green);font-weight:800;border:1px solid #d9e7da}.getting-started strong{font-size:14px}.getting-started p{font-size:11px;margin:3px 0 0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:19px}.section-heading h2{margin-bottom:0;font-size:27px}.section-caption{font-size:12px;color:var(--muted)}.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.tabs button{position:relative;display:flex;gap:11px;align-items:center;text-align:start;min-width:0;min-height:92px;background:white;border:1px solid var(--line);border-radius:15px;padding:15px;color:var(--muted)}.tabs button>.icon{width:25px;height:25px}.tabs strong{display:block;font-size:14px;color:var(--ink)}.tabs small{display:block;font-weight:400;font-size:10px;margin-top:4px}.tabs .active{background:#e6f1e8;border:2px solid #397b5d;padding:14px;color:var(--green);box-shadow:0 3px 0 #dbeadd}.recommended{position:absolute;top:-8px;right:12px;background:#e9ddbe;color:#765627;border:2px solid var(--cream);border-radius:20px;padding:1px 8px;font-size:9px;font-weight:700}.mode-guide{display:flex;align-items:center;gap:11px;background:#f0eef8;padding:12px 16px;border:1px solid #e9e4f2;border-radius:12px;margin-bottom:18px}.guide-icon{color:var(--purple);display:flex}.mode-guide p{margin:0;color:#5e527e;font-size:12px}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px;margin-bottom:18px;box-shadow:var(--shadow);min-width:0}.controls{display:flex;gap:20px;align-items:start;padding:21px 24px}.field{min-width:0;flex:1}label{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:700;margin-bottom:9px}label .icon{width:15px;height:15px;color:var(--muted)}input,select,textarea{font-size:14px;width:100%;min-width:0;border:1px solid #cddbd2;border-radius:10px;padding:11px 13px;min-height:46px;background:#fbfcfa;color:var(--ink)}select{padding-right:28px}input:focus,select:focus,textarea:focus{outline:3px solid #5b957226;border-color:#408163;background:#fff}.field>small,.start-action>small{display:block;font-size:10px;color:var(--muted);margin-top:7px}.start-action{min-width:195px;padding-top:28px}.start-action .primary{width:100%}.start-action>small{text-align:center}.workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}.workspace.is-learning{grid-template-columns:310px minmax(0,1fr);gap:22px}.typing-column{min-width:0}.course .test-head{align-items:center}.course h2{font-size:19px}.course-percent{font:700 28px/1.2 system-ui;color:var(--green)}.course label{font-size:11px}.course progress{width:100%;height:9px;display:block;accent-color:var(--green);border:0;border-radius:8px;overflow:hidden;background:var(--mint)}progress::-webkit-progress-bar{background:var(--mint);border-radius:8px}progress::-webkit-progress-value{background:var(--green);border-radius:8px}progress::-moz-progress-bar{background:var(--green)}.course-intro{font-size:11px;margin:12px 0 16px}.course-options{margin-bottom:17px}.course-options select{font-size:12px}.course-detail{background:#eef5ef;border:1px solid #dce9df;border-radius:13px;padding:16px}.lesson-tag{font-size:10px;color:var(--green);font-weight:750}.course-detail h3{font-size:16px;margin:7px 0}.course-detail p{font-size:12px;line-height:1.8;margin:10px 0}.course-detail>strong{display:block;font-size:11px;color:var(--green);line-height:1.9}.course-detail button{width:100%;font-size:12px;margin-top:8px}.course-note{font-size:10px!important;color:var(--muted);display:block;line-height:1.8}summary{cursor:pointer;list-style-position:inside;color:var(--ink);font-size:12px;font-weight:650;padding:15px 0;min-height:44px}summary>span{float:right;color:var(--muted)}.course details{border-bottom:1px solid var(--line)}.course-levels{display:grid;gap:8px;padding-bottom:14px}.level-card{text-align:start;background:#fbfcfa;border:1px solid var(--line);border-radius:10px;padding:11px;color:var(--ink)}.level-card strong,.level-card span{display:block}.level-card strong{font-size:12px}.level-card span{font-size:10px;color:var(--muted);margin-top:5px}.level-card.selected{border:2px solid var(--green);background:var(--mint)}.level-card.completed{background:#edf7f1}.level-card:disabled{opacity:.6;background:#f4f5f3}.course-records p,#course-history{font-size:11px;color:var(--muted)}#course-history{padding-inline-start:18px}#course-feedback:not(:empty){border-top:1px solid #cdddce;padding-top:10px;color:var(--green);font-weight:650}.test-head{display:flex;justify-content:space-between;align-items:start;gap:15px}.test-head h2{font-size:21px;margin-bottom:0}.badge{display:inline-flex;align-items:center;white-space:nowrap;background:#edf4ee;color:var(--green);font-size:10px;font-weight:650;padding:5px 11px;border-radius:25px;border:1px solid #dce9dd}.badge.running{background:#eeeaf9;color:#6650a1;border-color:#dbd2ef}.badge.finished{background:#e6f5e9}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:23px 0}.metrics>div{border:1px solid #e3eae3;border-radius:12px;background:#f8faf7;padding:12px 7px;text-align:center;min-width:0}.metrics .metric-time{background:#fff7e8;border-color:#eddfbf}.metrics span{font-size:10px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:4px}.metrics .icon{width:13px;height:13px}.metrics strong{display:block;color:var(--green);font:700 29px/1.5 system-ui;letter-spacing:-.6px;font-variant-numeric:tabular-nums;margin:4px 0}.metric-time strong{color:#9b7135}.metrics small{font-size:9px;color:var(--muted);display:block}.passage-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.passage-heading>strong,.typing-label{font-size:12px;display:flex;align-items:center;gap:7px}.mini-step{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:6px;background:#edf2ec;color:var(--green);font-size:11px}.color-key{display:flex;gap:10px;font-size:10px;color:var(--muted)}.color-key span{display:flex;align-items:center;gap:4px}.color-key i{width:6px;height:6px;border-radius:50%}.correct-dot{background:#398358}.error-dot{background:#ce5263}.passage{height:167px;overflow:auto;font-size:21px;line-height:2.05;letter-spacing:.2px;padding:17px 19px;background:#f5f8f3;border:1px solid #e2e9dd;border-radius:12px;margin-bottom:21px;white-space:pre-wrap;overflow-wrap:anywhere;user-select:none}.passage .ok{color:#226b3e;background:#dceede}.passage .bad{color:#a3213e;background:#fce0e6;text-decoration:underline;text-decoration-color:#d7687d}.passage .cursor{border-bottom:3px solid var(--green)}.typing-label small{font-weight:400;font-size:10px;margin-inline-start:auto;color:var(--muted)}#typing{resize:vertical;font-size:19px;line-height:1.9;min-height:148px;background:white}#typing:disabled{background:#fafbf8;border-style:dashed}#typing::placeholder{font-size:14px;color:#76847a}.test-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:10px;color:var(--muted);font-size:10px}.test-foot>span{max-width:70%}.test-foot button{font-size:11px;min-height:40px}.result{margin-top:20px;border:1px solid #c8e4d1;border-radius:12px;background:#eaf6ed;padding:19px;line-height:1.9;font-size:14px;font-weight:700;overflow-wrap:anywhere}.result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.result-actions button{font-size:12px}#notice:not(:empty){padding:13px 16px;background:#fff5df;border:1px solid #eddfbb;color:#78552a;border-radius:12px;margin-bottom:18px;font-size:12px;overflow-wrap:anywhere}.inline{display:flex;gap:10px;margin:10px 0}.inline input{flex:1}.inline button{white-space:nowrap}.challenge p{font-size:13px}.challenge h2{font-size:22px}.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.podium article{text-align:center;background:#f3f5fb;border:1px solid #e0e5f0;border-radius:14px;padding:18px 10px;overflow-wrap:anywhere}.podium article:first-child{background:#fff8e6;border-color:#eddfb7}.podium b{font-size:32px}.podium strong,.podium span{display:block}.podium strong{font-size:14px}.podium span{font-size:11px;color:var(--muted);margin:5px 0}.table-wrap{overflow:auto;width:100%;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;text-align:start;font-size:13px}th,td{padding:12px 14px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}th{font-size:11px;background:#f4f8f3;white-space:nowrap}td:nth-child(2){max-width:240px}tr:last-child td{border-bottom:0}.empty-state{text-align:center;padding:32px 12px;color:var(--muted)}.empty-state>.icon{width:36px;height:36px;color:#b39b6b;display:block;margin:0 auto 12px}.empty-state strong{font-size:14px}.empty-state p{font-size:12px;margin-bottom:0}.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 35px}.tips article{padding:20px;border:1px solid var(--line);background:#fff;border-radius:15px}.tip-icon{display:grid;place-items:center;background:#edf5ee;width:36px;height:36px;border-radius:10px;color:var(--green)}.tips article:nth-child(2) .tip-icon{background:#f1eef9;color:var(--purple)}.tips article:nth-child(3) .tip-icon{background:#fff3df;color:#967335}.tips h3{font-size:15px;margin:12px 0 6px}.tips p{font-size:12px;margin:0}footer{border-top:1px solid var(--line);padding:23px 0 35px}footer>div{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:var(--muted)}.footer-brand{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:750;color:var(--ink)}footer details{margin-top:14px}footer summary{font-size:11px;color:var(--muted)}footer p{font-size:11px;max-width:900px;line-height:1.9;margin-top:0}body [hidden]{display:none!important}
@media(max-width:1050px){.hero{gap:32px}.hero-copy h1{font-size:38px}.workspace.is-learning{grid-template-columns:270px minmax(0,1fr);gap:16px}.panel{padding:18px}.tabs{gap:8px}.tabs button{padding:13px;gap:7px}.tabs .active{padding:12px}.tabs strong{font-size:12px}.tabs small{font-size:9px}.tabs button>.icon{width:20px;height:20px}.metrics strong{font-size:26px}.metrics small{font-size:8px}.metrics span{font-size:9px}.controls{gap:14px}.start-action{min-width:165px}}
@media(max-width:850px){.site-header{padding:20px 22px}main{padding:0 22px}.hero{gap:20px;padding:30px 0 46px}.hero-copy h1{font-size:32px}.hero-copy>p{font-size:14px}.hero-card{padding:15px 10px 20px;border-width:5px}.key{width:22px;height:25px}.key-row{gap:3px}.hero-card-bottom{gap:12px;font-size:9px}.demo-text{font-size:20px;letter-spacing:3px}.hero-benefits{gap:12px;font-size:10px}.getting-started{padding:18px 16px;gap:15px}.getting-started strong{font-size:12px}.step-number{width:30px;height:30px}.getting-started article{gap:9px}.workspace.is-learning{grid-template-columns:1fr;gap:0}.course .course-options{max-width:400px}.course h2{font-size:21px}.course-levels{grid-template-columns:repeat(2,minmax(0,1fr))}.controls{flex-wrap:wrap}.controls .field{flex:1 1 180px}.start-action{flex:1 1 180px}.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs strong{font-size:14px}.tabs small{font-size:10px}.tabs button{min-height:80px;padding:15px}.tabs .active{padding:14px}.metrics strong{font-size:32px}.metrics span{font-size:11px}.metrics small{font-size:10px}}
@media(max-width:600px){.site-header{padding:16px}.brand{font-size:22px;gap:9px}.brand-mark{width:42px;height:42px;border-radius:12px}.brand small{font-size:9px}.home-link{font-size:10px;padding:7px 11px}main{padding:0 15px}.hero{grid-template-columns:1fr;padding:22px 0 30px;gap:26px}.hero-copy h1{font-size:34px;letter-spacing:-.7px;margin-bottom:14px}.hero-copy>p{font-size:14px}.hero-actions .primary{flex:1;min-width:185px}.hero-actions .secondary{flex:1;min-width:170px}.hero-benefits{font-size:10px;gap:13px}.hero-card{max-width:370px;width:100%;margin:0 auto 18px;transform:none;padding:13px 18px 20px}.demo-text{padding:20px 0 18px;font-size:23px}.keyboard-art{padding:10px}.key{width:25px}.hero-card-top{font-size:10px}.hero-card-bottom{font-size:10px}.floating-note{right:5px;bottom:-18px;transform:none;padding:9px 13px}.getting-started{grid-template-columns:1fr;gap:13px;margin-bottom:28px;padding:16px}.getting-started strong{font-size:13px}.getting-started p{font-size:11px}.getting-started article{gap:12px}.section-heading h2{font-size:25px}.section-caption{display:none}.tabs{gap:10px}.tabs button{padding:12px;gap:8px;min-height:84px}.tabs .active{padding:11px}.tabs strong{font-size:12px}.tabs small{font-size:9px}.tabs button>.icon{width:20px;height:20px}.recommended{font-size:8px;right:7px}.mode-guide{padding:11px 12px}.mode-guide p{font-size:11px}.panel{padding:16px;border-radius:15px}.controls{gap:15px}.controls .field{flex:1 1 125px}.start-action{flex:1 1 100%;padding-top:0}.start-action>small{margin-top:9px}.start-action .primary{min-height:48px}.test-head{gap:10px}.test-head h2{font-size:18px}.test-head .eyebrow{font-size:10px}.badge{font-size:9px;padding:4px 8px}.metrics{gap:6px;margin:18px 0}.metrics>div{padding:9px 3px}.metrics strong{font-size:25px}.metrics span{font-size:9px;gap:3px}.metrics span .icon{display:none}.metrics small{font-size:8px}.passage{height:151px;font-size:20px;padding:12px;line-height:2}.passage-heading>strong,.typing-label{font-size:11px}.color-key{gap:8px;font-size:9px}.typing-label small{font-size:9px}.test-foot{flex-wrap:wrap;gap:3px}.test-foot>span{max-width:100%;font-size:10px}.test-foot .text-button{margin-left:auto}.course-levels{grid-template-columns:1fr}.course-percent{font-size:25px}.course h2{font-size:18px}.inline{flex-wrap:wrap}.inline input{flex-basis:100%}.inline button{width:100%}.podium{gap:6px}.podium article{padding:13px 5px}.podium b{font-size:25px}.podium span{font-size:9px}.podium strong{font-size:12px}table{font-size:11px}th,td{padding:10px 9px}th{font-size:9px}.tips{grid-template-columns:1fr;gap:12px}.tips article{padding:17px}.tips h3{font-size:14px}.tips p{font-size:12px}.result-actions{flex-direction:column}.result-actions button{width:100%}footer>div{flex-wrap:wrap;gap:12px}footer>div>span{width:100%;order:3;font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}
/* Keep Bengali instructions readable, especially on smaller screens. */
.mode-guide p{font-size:13px}.controls label,.passage-heading>strong,.typing-label{font-size:13px}.course-intro,.course-detail p,.course-detail>strong,.course label,.course-records p,#course-history{font-size:12px}.course-note{font-size:11px!important}.field>small,.start-action>small{font-size:11px}.tabs small{font-size:11px}.level-card span{font-size:11px}
@media(max-width:600px){.tabs strong{font-size:13px}.tabs small{font-size:10px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics>div{padding:10px 8px}.metrics strong{font-size:29px}.metrics span{font-size:11px}.metrics small{font-size:10px}.metrics span .icon{display:inline;width:13px;height:13px}.test-foot>span{font-size:11px}.typing-label small,.color-key{font-size:10px}.course-intro,.course-detail p{font-size:13px}.mode-guide p{font-size:12px}}
/* During a test, reference text and input share a stationary viewport. */
.test-status{display:flex;align-items:center;gap:10px;flex-shrink:0}
#focus-timer{display:none;font-size:15px;font-weight:750;color:var(--green);font-variant-numeric:tabular-nums}
html{scrollbar-gutter:stable}
body.typing-focus{overflow:hidden;overscroll-behavior:none}
body.typing-focus::before{content:"";position:fixed;inset:0;background:#eaf1eb;z-index:999}
.typing-focus #test-panel{position:fixed;z-index:1000;top:calc(var(--typing-view-top,0px) + 8px);left:50%;transform:translateX(-50%);width:min(960px,calc(100% - 24px));height:calc(var(--typing-view-height,100dvh) - 16px);margin:0;padding:clamp(10px,2vh,22px);display:flex;flex-direction:column;gap:10px;overflow:hidden;box-shadow:0 15px 60px #163d2a18;overscroll-behavior:none}
.typing-focus .test-head{flex:none;align-items:center;gap:12px}
.typing-focus .test-head h2{font-size:clamp(14px,2vw,22px);margin:0}
.typing-focus #mode-label{font-size:11px}
.typing-focus #focus-exit{font-size:12px;min-height:44px;padding:8px 12px;white-space:nowrap}
.typing-focus .metrics{flex:none;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;gap:8px}
.typing-focus .metrics>div{padding:6px 8px}
.typing-focus .metrics strong{font-size:26px;line-height:1.3;margin:2px 0}
.typing-focus .metrics small{display:none}
.typing-focus .passage-heading,.typing-focus .typing-label{flex:none;margin:0}
.typing-focus #passage{flex:1.2 1 100px;min-height:44px;max-height:45%;height:auto;overflow:hidden;scroll-behavior:auto;overflow-anchor:none;margin:0;padding:10px 14px;font-size:clamp(18px,2.6vh,26px);line-height:1.7;letter-spacing:normal}
.typing-focus #typing{flex:1 1 90px;min-height:48px;max-height:35%;height:auto;margin:0;padding:10px 14px;font-size:clamp(17px,2.4vh,24px);line-height:1.6;resize:none;overflow:auto;overscroll-behavior:contain;scroll-behavior:auto;overflow-anchor:none;scrollbar-width:none}
.typing-focus #typing::-webkit-scrollbar{display:none}
.typing-focus .test-foot{display:none}
@media(max-width:600px){.typing-focus #test-panel{width:calc(100% - 12px);border-radius:13px;padding:10px;gap:6px}.typing-focus #mode-label,.typing-focus .badge{display:none}.typing-focus .test-status{gap:0}.typing-focus .metrics{gap:5px}.typing-focus .metrics>div{padding:4px 3px}.typing-focus .metrics strong{font-size:21px}.typing-focus .metrics span{font-size:9px;white-space:nowrap}.typing-focus .metrics .icon{display:none}.typing-focus #passage,.typing-focus #typing{padding:8px 10px}.typing-focus .typing-label,.typing-focus .passage-heading>strong{font-size:11px}.typing-focus .typing-label small{display:none}}
.typing-compact #test-panel{padding:9px;gap:6px}.typing-compact #mode-label,.typing-compact .metrics span{display:none}.typing-compact .test-head h2{font-size:15px}.typing-compact .metrics strong{font-size:20px;margin:0}.typing-compact .metrics>div{padding:3px 6px}.typing-compact .passage-heading,.typing-compact .typing-label{font-size:10px}.typing-compact #passage,.typing-compact #typing{font-size:18px;padding:6px 10px}
.typing-tiny #test-panel{gap:5px;padding:7px}.typing-tiny .test-head>div:first-child,.typing-tiny .badge,.typing-tiny .metrics,.typing-tiny .passage-heading,.typing-tiny .typing-label{display:none}.typing-tiny .test-status{width:100%;justify-content:space-between}.typing-tiny #focus-timer{display:inline}.typing-tiny #passage{min-height:36px;max-height:none}.typing-tiny #typing{min-height:42px;max-height:none}
.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}
.board-meta{display:flex;flex-wrap:wrap;gap:8px;margin:17px 0}.board-meta span:not(:empty){font-size:11px;padding:5px 10px;background:#eef5ef;border:1px solid var(--line);border-radius:20px;color:var(--green)}.board-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.board-stats article{background:#f5f8f3;border:1px solid var(--line);border-radius:13px;padding:15px}.board-stats article:first-child{background:#e8f4eb;border-color:#cde3d3}.board-stats span,.board-stats small{display:block;font-size:11px;color:var(--muted)}.board-stats strong{display:block;font-size:30px;line-height:1.4;margin:5px 0;color:var(--green);font-variant-numeric:tabular-nums}.board-stats article:nth-child(2){background:#f3f0fa}.my-standing{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#fff8e7;border:1px solid #e8dfbe;border-radius:12px;padding:16px}.my-standing span,.my-standing strong{display:block}.my-standing span{font-size:11px;color:#7d704e}.my-standing strong{font-size:14px;margin-top:5px}.my-standing button{font-size:12px}.ranking-note{font-size:11px;line-height:1.9;margin:16px 0}.ranking-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0 12px}.ranking-heading h3{font-size:15px;margin:0}.ranking-heading span{font-size:11px;color:var(--muted)}.rank-pill{display:inline-flex;justify-content:center;min-width:38px;padding:5px 9px;background:#f2f5f1;border-radius:9px;font-weight:700;font-size:12px;white-space:nowrap}.rank-1{background:#fff2ca;color:#876124}.rank-2{background:#eaf0f8;color:#4b6080}.rank-3{background:#faeadd;color:#935c35}.rank-person strong,.rank-person small{display:block}.rank-person strong{font-size:13px}.rank-person small{font-size:10px;color:var(--muted);margin-top:3px}.you-label{display:inline-block;background:#d7ecdd;color:var(--green);font-size:9px;padding:1px 7px;border-radius:20px;margin-top:4px}.rank-speed{font-weight:750;color:var(--green);white-space:nowrap}.accuracy-bar{display:block;width:65px;height:4px;border-radius:5px;background:linear-gradient(to right,#509767 var(--accuracy),#e6ede6 var(--accuracy));margin-top:6px}.my-result{background:#edf7f0}.rank-time{font-size:11px;color:var(--muted)}.my-podium{box-shadow:0 0 0 2px #6f9d7a inset}.board-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}.board-pagination button{font-size:12px}.board-pagination>span,.board-updated{font-size:11px;color:var(--muted)}.board-updated{text-align:end;margin:14px 0 0}
@media(max-width:700px){.board-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.board-stats article{padding:12px}.board-stats strong{font-size:27px}.board-stats span{font-size:10px}.my-standing{flex-wrap:wrap}.my-standing button{width:100%}.ranking-heading{flex-wrap:wrap}.leaderboard .rank-time{display:none}.rank-person strong{font-size:12px}.rank-pill{padding:4px 6px;font-size:10px}.rank-speed{font-size:11px}.accuracy-bar{width:48px}.board-pagination{gap:6px}.board-pagination button{padding:8px 10px;font-size:10px}.board-pagination>span{font-size:10px}}
.games>p,.games>small{font-size:13px}.game-options{display:flex;gap:20px;max-width:650px;margin:20px 0}.game-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.game-cards article{border:1px solid var(--line);background:#edf6ef;border-radius:18px;padding:22px;display:flex;flex-direction:column}.game-cards article:nth-child(2){background:#fff6e4}.game-cards article:nth-child(3){background:#f1eefb}.game-cards article>span{font-size:42px}.game-cards h3{font-size:21px;margin:10px 0}.game-cards p{font-size:13px;flex:1}.game-cards button{font-size:12px}.game-play{background:white;border:1px solid var(--line);border-radius:18px;padding:20px;margin:22px 0}.game-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.game-head h3{margin:0;font-size:21px}.game-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.game-metrics>div{background:#f1f6ef;border-radius:10px;padding:8px;text-align:center}.game-metrics span{display:block;font-size:10px;color:var(--muted)}.game-metrics strong{font-size:24px;color:var(--green)}.game-lives{font-size:14px;color:#a33557}.game-stage{position:relative;height:190px;background:linear-gradient(#e8f1fb,#e9f8ed);border:1px solid #d1e2d9;border-radius:15px;overflow:hidden;display:grid;place-items:center}.game-stage strong{font-size:32px;background:white;padding:10px 20px;border-radius:25px;border:2px solid #b6d3c0;max-width:95%;overflow-wrap:anywhere;text-align:center}.game-stage.rain strong{position:absolute;top:var(--fall-progress,0%);left:50%;transform:translateX(-50%);font-size:26px;white-space:nowrap;max-width:95%}.game-stage.combo{background:#eeeafa}.game-track{position:relative;background:#d8e6da;border-bottom:4px dashed #879f8e;height:48px;border-radius:10px;display:flex;justify-content:space-between;padding:3px 10px}.game-track>span{font-size:28px}#game-car{position:absolute;left:calc(8px + var(--race-progress,0%))}.game-track>span:last-child{margin-left:auto}#game-input{font-size:23px;text-align:center}#game-feedback{font-size:12px;margin:0;min-height:20px;color:var(--green)}.game-result{padding:20px;border:1px solid #d1e5d6;background:#edf8ef;border-radius:15px;margin:20px 0}.game-result h3{margin-top:0}.game-result p{font-size:14px}#game-storage{font-size:11px}.game-focus{overflow:hidden;overscroll-behavior:none}.game-focus::before{content:"";position:fixed;inset:0;z-index:1001;background:#e9f1ec}.game-focus #game-play{position:fixed;z-index:1002;top:calc(var(--game-view-top,0px) + 8px);left:50%;transform:translateX(-50%);height:calc(var(--game-view-height,100dvh) - 16px);width:min(900px,calc(100% - 20px));margin:0;display:flex;flex-direction:column;gap:9px;overflow:hidden}.game-focus #game-instruction{font-size:12px;margin:0}.game-focus #game-stage{flex:1;min-height:55px}.game-focus #game-input{flex:none;min-height:44px}.game-focus label{margin:0;font-size:12px}.game-compact #game-play{padding:9px;gap:5px}.game-compact #game-instruction,.game-compact #game-track,.game-compact .game-metrics span,.game-compact label,.game-compact #game-lives{display:none}.game-compact .game-metrics>div{padding:2px}.game-compact .game-metrics strong{font-size:18px}.game-compact .game-head h3{font-size:15px}.game-compact .game-head button{padding:6px 9px;font-size:11px}.game-compact #game-stage{min-height:35px}.game-compact #game-word{font-size:19px;padding:4px 12px}.game-compact #game-input{min-height:38px;font-size:18px;padding:6px}.game-compact #game-feedback{font-size:10px;min-height:14px}@media(min-width:851px){.tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.tabs button{gap:7px;padding:12px}.tabs .active{padding:11px}.tabs strong{font-size:12px}.tabs button>.icon{width:20px;height:20px}}@media(max-width:700px){.game-cards{grid-template-columns:1fr}.game-options{flex-wrap:wrap}.game-options .field{flex-basis:100%}.game-head h3{font-size:17px}.game-focus #game-play{padding:12px}.game-stage strong{font-size:24px}}

/* Keep shared navigation outside the stationary test/game view. */
body.typing-focus .dc-nav,body.game-focus .dc-nav{display:none!important}