/* Source: /css/fonts-v17.10.265.css *//* Self-hosted Google Fonts, SIL OFL. See /fonts/v17.10.265/. *//* cyrillic-ext */@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}/* cyrillic */@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}/* greek-ext */@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');unicode-range:U+1F00-1FFF}/* greek */@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}/* vietnamese */@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}/* latin-ext */@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}/* latin */@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}/* cyrillic-ext */@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:optional;src:url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD2OwG_TA.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}/* cyrillic */@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:optional;src:url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD_OwG_TA.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}/* greek */@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:optional;src:url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD4OwG_TA.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}/* vietnamese */@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:optional;src:url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD0OwG_TA.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}/* latin-ext */@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:optional;src:url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD1OwG_TA.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}/* latin */@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:optional;src:url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD7OwE.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}/* devanagari */@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF4,U+1CF7-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B0A}/* latin-ext */@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}/* latin */@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}/* devanagari */@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF4,U+1CF7-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B0A}/* latin-ext */@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}/* latin */@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}/* devanagari */@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF4,U+1CF7-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B0A}/* latin-ext */@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}/* latin */@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:optional;src:url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}/* Source: /css/reset.css *//* ==========================================================
   TypingTutor.Online
   reset.css
   Modern CSS Reset
   Version: 1.0
========================================================== *//* Box Sizing */*,*::before,*::after{box-sizing:border-box}/* Remove Default Margin */*{margin:0}/* Improve Text Rendering */html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}/* Base Body */body{min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/* Images */img,picture,svg,canvas,video{display:block;max-width:100%}/* Forms */input,button,textarea,select{font:inherit;color:inherit}/* Buttons */button{cursor:pointer;background:none;border:none}/* Links */a{color:inherit;text-decoration:none}/* Lists */ul,ol{list-style:none}/* Tables */table{border-collapse:collapse;border-spacing:0}/* Text Overflow */p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}/* Textarea */textarea{resize:vertical}/* Hidden */[hidden]{display:none !important}/* Disabled */button:disabled,input:disabled{cursor:not-allowed}/* Focus */:focus{outline:none}:focus-visible{outline:3px solid #2563EB;outline-offset:3px}/* Selection */::selection{background:rgba(37,99,235,.18)}/* Scrollbar (Chromium) */::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#94A3B8}/* Source: /css/variables.css *//* ==========================================================
   TypingTutor.Online
   Theme Variables
   File: css/variables.css
   Version: 4.0
========================================================== */:root{color-scheme:light;/* Brand */--primary:#2563eb;--primary-hover:#1d4ed8;--primary-light:#dbeafe;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#06b6d4;/* Surfaces */--background:#f8fafc;--surface:#ffffff;--surface-alt:#f1f5f9;--surface-soft:#f8fafc;--surface-elevated:#ffffff;/* Borders and text */--border:#cbd5e1;--border-soft:#e5eaf1;--text:#0f172a;--text-light:#475569;--text-muted:#94a3b8;/* Keyboard */--key-bg:#ffffff;--key-border:#cbd5e1;--key-text:#111827;--key-current:#14b8a6;--key-next:#8b5cf6;--key-pressed:#2563eb;--key-correct:#22c55e;--key-wrong:#ef4444;--key-disabled:#cbd5e1;/* Fingers */--finger-thumb:#60a5fa;--finger-left-index:#4ade80;--finger-left-middle:#facc15;--finger-left-ring:#fb923c;--finger-left-little:#ec4899;--finger-right-index:#4ade80;--finger-right-middle:#facc15;--finger-right-ring:#fb923c;--finger-right-little:#ec4899;/* Typography */--font-heading:"Poppins",sans-serif;--font-body:"Inter",sans-serif;--font-mono:"JetBrains Mono",monospace;--font-xs:.75rem;--font-sm:.875rem;--font-md:1rem;--font-lg:1.125rem;--font-xl:1.5rem;--font-2xl:2rem;--font-3xl:3rem;--weight-light:300;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;/* Spacing */--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;/* Radius */--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:22px;--radius-round:999px;/* Shadows */--shadow-xs:0 1px 2px rgba(15, 23, 42, .05);--shadow-sm:0 2px 6px rgba(15, 23, 42, .08);--shadow-md:0 8px 25px rgba(15, 23, 42, .08);--shadow-lg:0 12px 35px rgba(15, 23, 42, .12);--shadow-xl:0 18px 50px rgba(15, 23, 42, .18);--shadow-key:0 3px 8px rgba(15, 23, 42, .10);--shadow-key-pressed:inset 0 3px 8px rgba(15, 23, 42, .22);/* Transitions */--transition-fast:120ms;--transition-normal:180ms;--transition-medium:250ms;--transition-slow:400ms;--ease:cubic-bezier(.2, .8, .2, 1);/* Component sizes */--hand-scale:1;--finger-press-distance:6px;--finger-glow-size:18px;--finger-animation-speed:180ms;--key-width:60px;--key-height:60px;--key-gap:6px;--header-height:72px;--lesson-height:120px;--hands-height:260px;--keyboard-height:320px;--footer-height:60px;/* Layers */--z-dropdown:100;--z-sticky:200;--z-overlay:300;--z-modal:400;--z-toast:500;/* Breakpoints (documentation values) */--mobile:576px;--tablet:768px;--laptop:1024px;--desktop:1280px;--wide:1600px}/* Explicit dark mode */html[data-theme="dark"]{color-scheme:dark;--primary:#4f8cff;--primary-hover:#75a5ff;--primary-light:#172a4d;--background:#0b1120;--surface:#111827;--surface-alt:#182235;--surface-soft:#151f31;--surface-elevated:#1a2538;--border:#334155;--border-soft:#263449;--text:#f1f5f9;--text-light:#cbd5e1;--text-muted:#94a3b8;--key-bg:#172033;--key-border:#3a4960;--key-text:#f8fafc;--key-disabled:#475569;--shadow-xs:0 1px 2px rgba(0, 0, 0, .18);--shadow-sm:0 2px 8px rgba(0, 0, 0, .24);--shadow-md:0 10px 28px rgba(0, 0, 0, .28);--shadow-lg:0 16px 38px rgba(0, 0, 0, .34);--shadow-xl:0 22px 55px rgba(0, 0, 0, .42)}/* System mode follows the operating system. */@media (prefers-color-scheme: dark){html[data-theme="system"]{color-scheme:dark;--primary:#4f8cff;--primary-hover:#75a5ff;--primary-light:#172a4d;--background:#0b1120;--surface:#111827;--surface-alt:#182235;--surface-soft:#151f31;--surface-elevated:#1a2538;--border:#334155;--border-soft:#263449;--text:#f1f5f9;--text-light:#cbd5e1;--text-muted:#94a3b8;--key-bg:#172033;--key-border:#3a4960;--key-text:#f8fafc;--key-disabled:#475569;--shadow-xs:0 1px 2px rgba(0, 0, 0, .18);--shadow-sm:0 2px 8px rgba(0, 0, 0, .24);--shadow-md:0 10px 28px rgba(0, 0, 0, .28);--shadow-lg:0 16px 38px rgba(0, 0, 0, .34);--shadow-xl:0 22px 55px rgba(0, 0, 0, .42)}}/* Source: /css/typography.css *//* ==========================================================
   TypingTutor.Online
   typography.css
   Version: 1.0
========================================================== *//* ==========================================================
   BODY
========================================================== */body{font-family:var(--font-body);font-size:var(--font-md);font-weight:var(--weight-normal);color:var(--text);background:var(--background);line-height:1.6}/* ==========================================================
   HEADINGS
========================================================== */h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-bold);line-height:1.2;color:var(--text)}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}/* ==========================================================
   HEADER
========================================================== */.logo h1{font-size:1.8rem;letter-spacing:-0.5px}.tagline{display:block;margin-top:4px;color:var(--text-light);font-size:.9rem}/* ==========================================================
   LESSON
========================================================== */#lessonTitle{font-size:1.15rem;font-weight:600;color:var(--primary);margin-bottom:10px}#lessonText{font-family:var(--font-mono);font-size:2.25rem;font-weight:600;line-height:1.8;text-align:center;letter-spacing:1px}/* ==========================================================
   STATISTICS
========================================================== */.stat{text-align:center}.stat .label{display:block;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-light)}.stat span:last-child{display:block;margin-top:6px;font-size:2rem;font-weight:700}/* ==========================================================
   BUTTON
========================================================== */button{font-family:var(--font-body);font-size:.95rem;font-weight:600}/* ==========================================================
   CODE
========================================================== */code,pre{font-family:var(--font-mono)}/* ==========================================================
   LINKS
========================================================== */a{transition:color var(--transition-fast)}/* Keep the generic link hover intentionally low-specificity.
   Component links styled as buttons (games, tests, lessons, kids, etc.)
   must retain their own foreground color while hovered. */:where(a:hover){color:var(--primary)}/* ==========================================================
   FOOTER
========================================================== */#footer{font-size:.9rem;color:var(--text-light)}/* ==========================================================
   RESPONSIVE
========================================================== */@media (max-width:1024px){#lessonText{font-size:2rem}}@media (max-width:768px){.logo h1{font-size:1.5rem}#lessonText{font-size:1.6rem}.stat span:last-child{font-size:1.5rem}}@media (max-width:576px){#lessonText{font-size:1.3rem;line-height:1.7}}/* Source: /css/app.css *//* ==========================================================
   TypingTutor.Online
   Responsive Header & Footer v5.5
   File: css/app.css
========================================================== */body{background:var(--background);color:var(--text);overflow-x:hidden}/* Logo */.logo{display:flex;align-items:center;color:inherit;text-decoration:none}.logo-text{display:grid;gap:2px;min-width:0}.logo-text strong{overflow:hidden;color:var(--text);font-family:var(--font-heading);font-size:clamp(20px, 1.7vw, 30px);font-weight:800;line-height:1.05;white-space:nowrap;text-overflow:ellipsis}.logo-text small{overflow:hidden;color:var(--text-light);font-size:clamp(10px, .82vw, 13px);line-height:1.2;white-space:nowrap;text-overflow:ellipsis}.site-logo-picture{display:block;min-width:0}.site-logo-image{display:block;width:min(280px, 100%);height:auto;max-height:58px;object-fit:contain;object-position:left center}/* Theme button */#themeButton{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:108px;min-height:44px;padding:9px 14px;color:#ffffff;background:var(--primary);border-radius:var(--radius-md);white-space:nowrap;transition:background var(--transition-fast),transform var(--transition-fast)}#themeButton:hover{background:var(--primary-hover);transform:translateY(-1px)}#themeButton:active{transform:translateY(1px)}/* Footer */.footer-brand{color:var(--text-light);font-size:12px;font-weight:600}.footer-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 16px}.footer-links a{color:var(--text-light);font-size:12px;font-weight:600;text-decoration:none;transition:color var(--transition-fast),background-color var(--transition-fast)}.footer-links a:hover,.footer-links a:focus-visible{color:var(--primary);outline:none}/* Theme menu retained */.theme-button-arrow{font-size:10px;opacity:.8}.theme-menu{position:fixed;z-index:10050;width:250px;padding:8px;background:var(--surface-elevated);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-xl)}.theme-menu.hidden{display:none}.theme-option{display:grid;grid-template-columns:36px 1fr 22px;gap:10px;align-items:center;width:100%;padding:10px;color:var(--text);text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer}.theme-option:hover,.theme-option:focus-visible{background:var(--surface-alt);border-color:var(--border);outline:none}.theme-option-icon{display:grid;place-items:center;width:34px;height:34px;background:var(--surface-alt);border-radius:9px;font-size:18px}.theme-option-copy{display:grid;gap:2px}.theme-option-copy strong{color:var(--text);font-size:13px}.theme-option-copy small{color:var(--text-light);font-size:10px}.theme-option-check{color:var(--primary);font-weight:900;opacity:0}.theme-option-selected{background:var(--primary-light);border-color:var(--border)}.theme-option-selected .theme-option-check{opacity:1}.hidden{display:none !important}@media (max-width: 1180px){.logo-text strong{font-size:22px}.logo-text small{font-size:10px}}@media (max-width: 900px){.site-logo-image{width:min(220px, 100%);max-height:46px}.footer-links{justify-content:flex-start}}@media (max-width: 560px){.logo-text strong{font-size:18px}.logo-text small{display:none}.site-logo-image{width:min(170px, 100%);max-height:36px}#themeButton{min-width:90px;min-height:40px;padding-inline:11px}.footer-links{gap:8px 14px}}/* Source: /css/scalable-navigation-v17.4.4.css *//* ==========================================================
   TypingTutor.Online
   Scalable Site Navigation v17.4.4
========================================================== *//* ---------- Main tutor header ---------- */.mode-navigation{overflow:visible}.mode-more,.test-nav-more{position:relative;flex:0 0 auto}.mode-more > summary,.test-nav-more > summary{list-style:none;cursor:pointer;user-select:none}.mode-more > summary::-webkit-details-marker,.test-nav-more > summary::-webkit-details-marker{display:none}.mode-more-chevron{margin-left:1px;font-size:.8em;transition:transform .18s ease}.mode-more[open] .mode-more-chevron{transform:rotate(180deg)}.mode-more-menu,.test-nav-more-menu{position:absolute;z-index:1000;top:calc(100% + 10px);right:0;min-width:205px;padding:8px;border:1px solid var(--border, #dbe4f0);border-radius:14px;background:var(--surface, #ffffff);box-shadow:0 18px 45px rgba(15, 23, 42, .18)}.mode-more-menu .mode-button{width:100%;justify-content:flex-start;min-height:42px;padding:10px 12px;border-radius:9px}.mode-more-active > .mode-more-button,.mode-more[open] > .mode-more-button{color:var(--primary, #1769ff);background:var(--surface-alt, #eef4ff)}.mode-more-menu .mode-button-active{color:#ffffff;background:linear-gradient(135deg, var(--primary), var(--primary-hover))}/* ---------- Standalone test headers ---------- */.test-nav-more > summary{min-height:43px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;color:var(--text, #0f172a);font-weight:750;white-space:nowrap}.test-nav-more > summary:hover,.test-nav-more[open] > summary{color:#ffffff;background:var(--primary, #2563eb)}.test-nav-more-menu{display:grid;gap:4px}.test-nav-more-menu a{width:100%;min-height:42px;padding:10px 12px;display:flex;align-items:center;justify-content:flex-start;border-radius:9px;color:var(--text, #0f172a);background:transparent;text-decoration:none;font-weight:750;white-space:nowrap}.test-nav-more-menu a:hover{color:#ffffff;background:var(--primary, #2563eb)}html[data-theme="dark"] .mode-more-menu,html[data-theme="dark"] .test-nav-more-menu{background:#101b2e;border-color:#40516a;box-shadow:0 18px 48px rgba(0, 0, 0, .42)}@media (prefers-color-scheme: dark){html[data-theme="system"] .mode-more-menu,html[data-theme="system"] .test-nav-more-menu{background:#101b2e;border-color:#40516a;box-shadow:0 18px 48px rgba(0, 0, 0, .42)}}/* The menu can open outside the horizontal navigation row on desktop. */@media (min-width: 901px){#modeSwitcher,.mode-switcher-inner,.mode-navigation,.test-header-inner,.test-nav{overflow:visible}}/* Mobile keeps the compact horizontal row; dropdown opens below More. */@media (max-width: 900px){.mode-navigation,.test-nav{overflow-x:auto;overflow-y:visible;scrollbar-width:none}.mode-navigation::-webkit-scrollbar,.test-nav::-webkit-scrollbar{display:none}.mode-more-menu,.test-nav-more-menu{position:fixed;top:auto;right:12px;left:12px;margin-top:8px;min-width:0}}@media (max-width: 560px){.mode-more > summary.mode-button{min-width:68px;min-height:42px;padding:7px 8px;flex-direction:column;gap:3px;font-size:9px}.mode-more-chevron{display:none}}/* Source: /css/unified-site-header-v17.4.6.css *//* ==========================================================
   TypingTutor.Online
   Unified Main + Tests Header v17.4.6
========================================================== *//* Both the tutor and standalone test pages now use the same shell. */#header,.test-site-header{box-sizing:border-box;position:relative;z-index:100;width:100%;min-height:78px;padding-top:max(9px, env(safe-area-inset-top));padding-bottom:9px;background:var(--surface, #ffffff);border-bottom:1px solid var(--border, #dbe4f0);box-shadow:var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .08))}#header .header-inner,.test-header-inner{box-sizing:border-box;width:min(1480px, calc(100% - 34px));min-height:58px;margin-inline:auto;padding:0;display:grid;grid-template-columns:minmax(235px, 300px) minmax(0, 1fr) auto;gap:clamp(12px, 2vw, 28px);align-items:center}/* Identical logo footprint on every page. */#header .logo,.test-logo{min-width:0;display:flex;align-items:center;justify-self:start;color:inherit;text-decoration:none}#header .site-logo-picture,.test-logo-stack{position:relative;display:block;width:min(280px, 100%);min-width:0}#header .site-logo-image,.test-logo img{display:block;width:min(280px, 100%);height:auto;max-height:58px;object-fit:contain;object-position:left center}/* Identical navigation positioning. */#header .primary-mode-navigation,.test-nav{min-width:0;width:100%;margin:0;display:flex;align-items:center;justify-content:center;gap:clamp(4px, 1.1vw, 18px);overflow:visible}#header #modeSwitcher,#header .mode-switcher-inner,#header .mode-navigation{min-width:0;width:auto}#header .mode-navigation{gap:clamp(4px, 1.1vw, 18px)}/* Shared button geometry and typography. */#header .lesson-home-nav-button,#header .mode-navigation > .mode-button,#header .mode-more > summary.mode-button,.test-nav > a,.test-nav-more > summary{box-sizing:border-box;min-width:0;min-height:46px;margin:0;padding:10px clamp(12px, 1.15vw, 17px);display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;color:var(--text, #172235);background:transparent;border:1px solid transparent;border-radius:11px;font:inherit;font-size:clamp(12px, .92vw, 15px);font-weight:750;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}#header .mode-button-icon,#header .lesson-home-nav-icon,.test-nav .mode-button-icon,.test-nav-more-menu .mode-button-icon{display:inline-flex;flex:0 0 20px;width:20px;min-width:20px;height:20px;align-items:center;justify-content:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:18px;font-weight:400;line-height:20px;text-align:center;transform:translateY(-1px)}#header .mode-button-text,#header .lesson-home-nav-label,.test-nav .mode-button-text{display:inline-flex;align-items:center;line-height:1}#header #themeButton > span:first-child,.test-header-inner > #themeButton > span:first-child{display:inline-flex;flex:0 0 20px;width:20px;height:20px;align-items:center;justify-content:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:18px;font-weight:400;line-height:20px}#header .lesson-home-nav-button:hover,#header .mode-navigation > .mode-button:hover,#header .mode-more > summary.mode-button:hover,.test-nav > a:hover,.test-nav-more > summary:hover,.test-nav-more[open] > summary{color:var(--primary, #1769ff);background:var(--surface-alt, #f2f7ff);border-color:#dbe8fa}/* Active button has the same appearance regardless of the current page. */#header .lesson-home-nav-button-active,#header .mode-navigation > .mode-button-active,.test-nav > a[aria-current="page"]{color:#ffffff !important;background:linear-gradient(135deg, #246df0, #285ee5) !important;border-color:rgba(31, 92, 222, .55) !important;box-shadow:0 10px 23px rgba(47, 103, 246, .24) !important}#header .lesson-home-nav-button-active:hover,#header .mode-navigation > .mode-button-active:hover,.test-nav > a[aria-current="page"]:hover{color:#ffffff !important;background:linear-gradient(135deg, #2165df, #2457d5) !important;border-color:rgba(31, 92, 222, .64) !important}/* Theme control occupies the same final grid column. */#header .header-tools,.test-header-inner > #themeButton{justify-self:end}#header #themeButton,.test-header-inner > #themeButton{box-sizing:border-box;min-width:108px;min-height:46px;margin:0;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#ffffff;background:var(--primary, #1769ff);border:0;border-radius:11px;font:inherit;font-size:clamp(12px, .92vw, 15px);font-weight:750;line-height:1;white-space:nowrap;cursor:pointer}#header #themeButton:hover,.test-header-inner > #themeButton:hover{color:#ffffff;background:var(--primary-hover, #0f5ae0)}/* Dropdown alignment is identical in both templates. */#header .mode-more,.test-nav-more{position:relative;flex:0 0 auto}#header .mode-more-menu,.test-nav-more-menu{top:calc(100% + 10px);right:0}html[data-theme="dark"] #header,html[data-theme="dark"] .test-site-header{background:#101b2e;border-color:#40516a}html[data-theme="dark"] #header .lesson-home-nav-button,html[data-theme="dark"] #header .mode-navigation > .mode-button,html[data-theme="dark"] #header .mode-more > summary.mode-button,html[data-theme="dark"] .test-nav > a,html[data-theme="dark"] .test-nav-more > summary{color:#dce7f7}html[data-theme="dark"] #header .lesson-home-nav-button:hover,html[data-theme="dark"] #header .mode-navigation > .mode-button:hover,html[data-theme="dark"] #header .mode-more > summary.mode-button:hover,html[data-theme="dark"] .test-nav > a:hover,html[data-theme="dark"] .test-nav-more > summary:hover,html[data-theme="dark"] .test-nav-more[open] > summary{color:#ffffff;background:#17263c;border-color:#304662}@media (prefers-color-scheme: dark){html[data-theme="system"] #header,html[data-theme="system"] .test-site-header{background:#101b2e;border-color:#40516a}html[data-theme="system"] #header .lesson-home-nav-button,html[data-theme="system"] #header .mode-navigation > .mode-button,html[data-theme="system"] #header .mode-more > summary.mode-button,html[data-theme="system"] .test-nav > a,html[data-theme="system"] .test-nav-more > summary{color:#dce7f7}}@media (max-width: 1180px){#header .header-inner,.test-header-inner{grid-template-columns:minmax(190px, 225px) minmax(0, 1fr) auto;gap:10px}#header .site-logo-picture,#header .site-logo-image,.test-logo-stack,.test-logo img{width:min(225px, 100%)}#header .primary-mode-navigation,#header .mode-navigation,.test-nav{gap:3px}#header .lesson-home-nav-button,#header .mode-navigation > .mode-button,#header .mode-more > summary.mode-button,.test-nav > a,.test-nav-more > summary{min-height:42px;padding-inline:10px;font-size:12px}#header #themeButton,.test-header-inner > #themeButton{min-height:42px;font-size:12px}}@media (max-width: 900px){#header,.test-site-header{min-height:0;padding-top:max(7px, env(safe-area-inset-top));padding-bottom:7px}#header .header-inner,.test-header-inner{width:min(100% - 22px, 1480px);min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:8px 12px}#header .primary-mode-navigation,.test-nav{grid-column:1/-1;grid-row:2;width:100%;justify-content:flex-start;overflow-x:auto;overflow-y:visible;padding:2px 0 3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}#header .primary-mode-navigation::-webkit-scrollbar,.test-nav::-webkit-scrollbar{display:none}#header .header-tools,.test-header-inner > #themeButton{grid-column:2;grid-row:1}.test-logo{grid-column:1;grid-row:1}}@media (max-width: 560px){#header .header-inner,.test-header-inner{width:min(100% - 14px, 1480px)}#header .site-logo-picture,#header .site-logo-image,.test-logo-stack,.test-logo img{width:min(190px, 100%)}#header .lesson-home-nav-button,#header .mode-navigation > .mode-button,#header .mode-more > summary.mode-button,.test-nav > a,.test-nav-more > summary{min-width:68px;min-height:42px;padding:7px 8px;flex-direction:column;gap:3px;font-size:9px}#header .mode-more-chevron,.test-nav-more > summary .mode-more-chevron{display:none}#header #themeButton,.test-header-inner > #themeButton{min-width:88px;min-height:42px;padding-inline:10px;font-size:11px}#header .mode-button-icon,#header .lesson-home-nav-icon,.test-nav .mode-button-icon,.test-nav-more-menu .mode-button-icon{flex-basis:19px;width:19px;min-width:19px;height:19px;font-size:17px;line-height:19px}}@media (prefers-reduced-motion: reduce){#header .lesson-home-nav-button,#header .mode-navigation > .mode-button,#header .mode-more > summary.mode-button,.test-nav > a,.test-nav-more > summary{transition:none}}/* ==========================================================
   SHARED SECTION FOOTER v17.5.2
========================================================== */.test-footer,.certificate-footer,.blog-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;width:min(1480px, calc(100% - 32px));margin:28px auto 0;padding:24px 0 30px;color:var(--muted, #64748b);font-size:13px}.shared-footer-links{display:flex;flex-wrap:wrap;gap:9px 17px}.shared-footer-links a{color:inherit;text-decoration:none}.shared-footer-links a:hover,.shared-footer-links a:focus-visible{color:var(--primary, #1769ff)}@media (max-width: 760px){.test-footer,.certificate-footer,.blog-footer{align-items:flex-start;flex-direction:column}}/* Source: /css/site-section-header-v17.5.3.css *//* ==========================================================
   TypingTutor.Online
   Shared Section Header Polish v17.5.3
========================================================== */.test-logo-stack{position:relative;display:block;width:min(280px, 100%);min-width:0;aspect-ratio:280/58}.test-logo-stack .test-logo-light,.test-logo-stack .test-logo-dark{display:block;width:100%;height:100%;max-height:58px;object-fit:contain;object-position:left center;transition:opacity .16s ease}.test-logo-stack .test-logo-dark{position:absolute;inset:0;opacity:0;pointer-events:none}html[data-theme="light"] .test-logo-light,html[data-theme="system"] .test-logo-light{opacity:1}html[data-theme="light"] .test-logo-dark{opacity:0}html[data-theme="dark"] .test-logo-light{opacity:0}html[data-theme="dark"] .test-logo-dark{opacity:1}@media (prefers-color-scheme: dark){html[data-theme="system"] .test-logo-light{opacity:0}html[data-theme="system"] .test-logo-dark{opacity:1}}@media (prefers-color-scheme: light){html[data-theme="system"] .test-logo-light{opacity:1}html[data-theme="system"] .test-logo-dark{opacity:0}}/* The homepage Theme manager creates this exact three-part button. */.test-header-inner > #themeButton .theme-button-arrow{display:inline-flex;align-items:center;justify-content:center;margin-left:1px;font-size:.75em;line-height:1}@media (max-width: 560px){.test-logo-stack{width:min(190px, 100%)}}@media (prefers-reduced-motion: reduce){.test-logo-stack .test-logo-light,.test-logo-stack .test-logo-dark{transition:none}}/* Source: /blogs/blogs.css */:root{--blog-primary:#1769ff;--blog-primary-dark:#0d4fd7;--blog-text:#122039;--blog-muted:#5d6f89;--blog-surface:#ffffff;--blog-soft:#f2f6fc;--blog-border:#dce5f1;--blog-shadow:0 16px 42px rgba(20, 42, 76, .08)}html[data-theme="dark"]{--blog-text:#f2f6ff;--blog-muted:#a9b7ca;--blog-surface:#111c2e;--blog-soft:#17243a;--blog-border:#2b3b53;--blog-shadow:0 18px 50px rgba(0, 0, 0, .27)}@media (prefers-color-scheme: dark){html[data-theme="system"]{--blog-text:#f2f6ff;--blog-muted:#a9b7ca;--blog-surface:#111c2e;--blog-soft:#17243a;--blog-border:#2b3b53;--blog-shadow:0 18px 50px rgba(0, 0, 0, .27)}}body{color:var(--blog-text);background:var(--background, #f5f7fb)}.blog-shell{width:min(1240px, calc(100% - 32px));margin:0 auto;padding:26px 0 54px}.blog-breadcrumbs{margin:0 0 16px;color:var(--blog-muted);font-size:13px}.blog-breadcrumbs a{color:var(--blog-primary);text-decoration:none}.blog-hero,.blog-card,.blog-article,.blog-directory,.blog-newsletter{background:var(--blog-surface);border:1px solid var(--blog-border);border-radius:22px;box-shadow:var(--blog-shadow)}.blog-hero{display:grid;grid-template-columns:minmax(0, 1.5fr) minmax(280px, .7fr);gap:30px;align-items:center;padding:clamp(30px, 5vw, 62px)}.blog-eyebrow{display:inline-block;margin-bottom:10px;color:var(--blog-primary);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.blog-hero h1,.blog-article h1{margin:0 0 14px;font-family:Poppins,Inter,sans-serif;font-size:clamp(34px, 5vw, 58px);line-height:1.08}.blog-hero p,.blog-lead{margin:0;color:var(--blog-muted);font-size:18px;line-height:1.75}.blog-hero-actions,.blog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.blog-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;color:#fff;background:var(--blog-primary);border-radius:11px;font-weight:800;text-decoration:none}.blog-button.secondary{color:var(--blog-text);background:var(--blog-soft);border:1px solid var(--blog-border)}.blog-hero-panel{display:grid;gap:12px}.blog-hero-panel div{padding:18px;background:var(--blog-soft);border:1px solid var(--blog-border);border-radius:14px}.blog-hero-panel span{display:block;color:var(--blog-muted);font-size:12px;font-weight:700;text-transform:uppercase}.blog-hero-panel strong{display:block;margin-top:3px;font-size:21px}.blog-section-heading{margin:38px 0 16px}.blog-section-heading h2{margin:0 0 5px;font-size:clamp(27px, 3.5vw, 38px)}.blog-section-heading p{margin:0;color:var(--blog-muted)}.blog-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}.blog-card{position:relative;display:flex;flex-direction:column;padding:24px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.blog-card-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;background:var(--blog-soft);border:1px solid var(--blog-border);border-radius:13px;font-size:24px}.blog-card h2,.blog-card h3{margin:0 0 9px;font-size:21px;line-height:1.3}.blog-card p{flex:1;margin:0 0 18px;color:var(--blog-muted)}.blog-card a{color:var(--blog-primary);font-weight:800;text-decoration:none}/* v17.10.99 — make the complete blog card use its existing article link. */.blog-card > a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}.blog-card:hover{border-color:var(--blog-primary);box-shadow:0 20px 48px rgba(20, 42, 76, .14);transform:translateY(-3px)}.blog-card:hover > a{text-decoration:underline}.blog-card:focus-within{border-color:var(--blog-primary);outline:3px solid rgba(23, 105, 255, .28);outline-offset:3px}.blog-card > a:focus-visible{outline:none}.blog-card:active{transform:translateY(-1px)}@media (prefers-reduced-motion: reduce){.blog-card{transition:none}.blog-card:hover,.blog-card:active{transform:none}}.blog-article{max-width:980px;margin:0 auto;padding:clamp(26px, 5vw, 58px)}.blog-article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 22px;color:var(--blog-muted);font-size:13px}.blog-article h2{margin:38px 0 10px;font-size:29px;line-height:1.25}.blog-article h3{margin:27px 0 8px;font-size:21px}.blog-article p,.blog-article li{color:var(--blog-muted);font-size:16px;line-height:1.82}.blog-article ul,.blog-article ol{padding-left:23px}.blog-article a{color:var(--blog-primary)}.blog-callout{margin:26px 0;padding:20px 22px;background:var(--blog-soft);border:1px solid var(--blog-border);border-left:5px solid var(--blog-primary);border-radius:14px}.blog-callout strong{display:block;margin-bottom:5px}.blog-callout p{margin:0}.blog-faq{margin-top:34px}.blog-faq details{padding:16px 0;border-top:1px solid var(--blog-border)}.blog-faq summary{cursor:pointer;font-weight:800}.blog-directory{max-width:980px;margin:20px auto 0;padding:24px}.blog-directory h2{margin:0 0 14px}.blog-directory-links{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}.blog-directory-links a{padding:13px 15px;color:var(--blog-text);background:var(--blog-soft);border:1px solid var(--blog-border);border-radius:11px;font-weight:700;text-decoration:none}.blog-directory-links a:hover{color:var(--blog-primary)}@media (max-width: 980px){.blog-hero{grid-template-columns:1fr}.blog-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (max-width: 680px){.blog-shell{width:min(100% - 20px, 1240px);padding-top:18px}.blog-grid,.blog-directory-links{grid-template-columns:1fr}.blog-hero,.blog-article{border-radius:17px}.blog-article h1{font-size:34px}}/* v17.8.51: source references for ergonomics / hand-comfort guides */.blog-sources{margin-top:34px;padding:20px 22px;background:var(--blog-soft);border:1px solid var(--blog-border);border-radius:14px}.blog-sources h2{margin-top:0;font-size:23px}.blog-sources p{margin:0 0 10px}.blog-sources ul{margin:0;padding-left:20px}.blog-sources li{margin:4px 0}/* ==========================================================
   v17.8.53 — Blog CTA button contrast / theme fix
   The general .blog-article a rule is more specific than .blog-button,
   so primary CTA text could inherit the blue link color on a blue button.
   Keep CTA labels explicit in every interaction and theme state.
   ========================================================== */.blog-button:link,.blog-button:visited,.blog-article a.blog-button,.blog-hero a.blog-button{color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;opacity:1}.blog-button:hover,.blog-button:focus-visible,.blog-button:active,.blog-article a.blog-button:hover,.blog-article a.blog-button:focus-visible,.blog-article a.blog-button:active{color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;background:var(--blog-primary-dark)}.blog-button:focus-visible{outline:3px solid rgba(23, 105, 255, .28);outline-offset:3px}.blog-button.secondary:link,.blog-button.secondary:visited,.blog-article a.blog-button.secondary,.blog-hero a.blog-button.secondary{color:var(--blog-text) !important;-webkit-text-fill-color:var(--blog-text) !important;background:var(--blog-soft);border:1px solid var(--blog-border)}.blog-button.secondary:hover,.blog-button.secondary:focus-visible,.blog-button.secondary:active,.blog-article a.blog-button.secondary:hover,.blog-article a.blog-button.secondary:focus-visible,.blog-article a.blog-button.secondary:active{color:var(--blog-primary) !important;-webkit-text-fill-color:var(--blog-primary) !important;background:var(--blog-soft)}/* v17.10.22 — research tables and compact benchmark cards */.blog-data-table-wrap{overflow-x:auto;margin:22px 0 28px;border:1px solid var(--blog-border);border-radius:16px;background:var(--blog-card)}.blog-data-table{width:100%;border-collapse:collapse;min-width:720px}.blog-data-table th,.blog-data-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--blog-border);font-size:15px;line-height:1.55}.blog-data-table th{background:var(--blog-soft);color:var(--blog-text);font-weight:800}.blog-data-table td{color:var(--blog-muted)}.blog-data-table tr:last-child td{border-bottom:0}.blog-data-table strong{color:var(--blog-text)}.blog-source-list{margin:16px 0 0;padding-left:22px}.blog-source-list li{margin:8px 0}.blog-source-note{margin:26px 0;padding:18px 20px;border:1px solid var(--blog-border);border-radius:14px;background:var(--blog-soft)}.blog-source-note p{margin:0}/* Source: /css/universal-footer-v17.10.21.css *//* TypingTutor.Online global footer v17.10.21 */.universal-site-footer{display:block;box-sizing:border-box;width:100%;margin-top:48px;padding:36px clamp(18px,4vw,56px) 24px;color:var(--text-light,#64748b);background:linear-gradient(180deg,#fbfdff 0%,#f6f9fd 100%);border-top:1px solid var(--border,#d9e2ef);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.universal-footer-inner{box-sizing:border-box;width:min(1500px,100%);margin:0 auto}.universal-footer-main{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,2.15fr);gap:clamp(32px,5vw,72px);align-items:start}.universal-footer-brand{display:grid;gap:9px;max-width:340px;text-align:left}.universal-footer-home{width:max-content;color:var(--text,#0f172a) !important;font-size:18px;font-weight:850;line-height:1.25;text-decoration:none;letter-spacing:-.01em}.universal-footer-home:hover,.universal-footer-home:focus-visible{color:var(--primary,#1769ff) !important}.universal-footer-brand span{color:var(--text-light,#64748b);font-size:13px;font-weight:550;line-height:1.6}.universal-footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px clamp(22px,4vw,54px)}.universal-footer-group{min-width:0}.universal-footer-group>strong{display:block;margin:0 0 10px;color:var(--text,#0f172a);font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.universal-footer-group-links{display:grid;gap:8px}.universal-footer-group-links a{width:max-content;max-width:100%;color:var(--text-light,#64748b);font-size:13px;font-weight:700;line-height:1.45;text-decoration:none;transition:color .16s ease,transform .16s ease}.universal-footer-group-links a:hover,.universal-footer-group-links a:focus-visible{color:var(--primary,#1769ff);text-decoration:underline;text-underline-offset:3px}.universal-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--border,#d9e2ef) 82%,transparent);color:var(--text-light,#64748b);font-size:11px;font-weight:600;line-height:1.5}html[data-theme="dark"] .universal-site-footer{color:#94a3b8;background:#0f172a;border-top-color:#334155}html[data-theme="dark"] .universal-footer-home,html[data-theme="dark"] .universal-footer-group>strong{color:#f8fafc!important}html[data-theme="dark"] .universal-footer-brand span,html[data-theme="dark"] .universal-footer-group-links a,html[data-theme="dark"] .universal-footer-bottom{color:#a8b5c7}html[data-theme="dark"] .universal-footer-bottom{border-top-color:#334155}html[data-theme="dark"] .universal-footer-home:hover,html[data-theme="dark"] .universal-footer-home:focus-visible,html[data-theme="dark"] .universal-footer-group-links a:hover,html[data-theme="dark"] .universal-footer-group-links a:focus-visible{color:#60a5fa!important}@media(prefers-color-scheme:dark){html[data-theme="system"] .universal-site-footer{color:#94a3b8;background:#0f172a;border-top-color:#334155}html[data-theme="system"] .universal-footer-home,html[data-theme="system"] .universal-footer-group>strong{color:#f8fafc!important}html[data-theme="system"] .universal-footer-brand span,html[data-theme="system"] .universal-footer-group-links a,html[data-theme="system"] .universal-footer-bottom{color:#a8b5c7}html[data-theme="system"] .universal-footer-bottom{border-top-color:#334155}html[data-theme="system"] .universal-footer-home:hover,html[data-theme="system"] .universal-footer-home:focus-visible,html[data-theme="system"] .universal-footer-group-links a:hover,html[data-theme="system"] .universal-footer-group-links a:focus-visible{color:#60a5fa!important}}@media(max-width:900px){.universal-site-footer{padding-top:30px}.universal-footer-main{grid-template-columns:1fr;gap:26px}.universal-footer-brand{max-width:620px}.universal-footer-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:620px){.universal-site-footer{margin-top:32px;padding:28px 18px 20px}.universal-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.universal-footer-group:last-child{grid-column:1/-1}.universal-footer-group:last-child .universal-footer-group-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.universal-footer-group-links a{width:auto;padding:2px 0}.universal-footer-bottom{align-items:flex-start;flex-direction:column;gap:5px;margin-top:24px}}@media(max-width:390px){.universal-footer-nav{grid-template-columns:1fr}.universal-footer-group:last-child{grid-column:auto}.universal-footer-group:last-child .universal-footer-group-links{grid-template-columns:1fr}}@media print{.universal-site-footer{display:none!important}}/* Source: /css/universal-site-header-v17.7.2.css *//* ==========================================================
   TypingTutor.Online — Universal Site Header v17.7.2
   One complete header for tutor, tests, games, kids, blog,
   certificates, information pages, sitemap, and 404.
========================================================== */#header,.test-site-header{box-sizing:border-box !important;position:relative;z-index:1000;width:100%;min-height:80px;padding:max(9px, env(safe-area-inset-top)) 0 9px;background:var(--surface, #ffffff);border-bottom:1px solid var(--border, #dbe4f0);box-shadow:0 2px 10px rgba(15, 23, 42, .06)}#header .header-inner,.test-header-inner{box-sizing:border-box;width:min(1660px, calc(100% - 34px));min-height:60px;margin-inline:auto;padding:0;display:grid;grid-template-columns:minmax(235px, 300px) minmax(0, 1fr) auto;gap:clamp(10px, 1.4vw, 24px);align-items:center}#header .logo,.test-logo{min-width:0;display:flex;align-items:center;justify-self:start;color:inherit;text-decoration:none}#header .site-logo-picture,.test-logo-stack{position:relative;display:grid;width:min(280px, 100%);min-width:0}#header .site-logo-picture,#header .site-logo-picture-light,#header .site-logo-picture-dark,.test-logo-stack > img{grid-area:1/1}#header .site-logo-image,.test-logo img{display:block;width:min(280px, 100%);height:auto;max-height:60px;object-fit:contain;object-position:left center}#header .site-logo-picture-dark,.test-logo-dark{display:none !important}html[data-theme="dark"] #header .site-logo-picture-light,html[data-theme="dark"] .test-logo-light{display:none !important}html[data-theme="dark"] #header .site-logo-picture-dark,html[data-theme="dark"] .test-logo-dark{display:block !important}#header .primary-mode-navigation,.test-nav{min-width:0;width:100%;margin:0;display:flex;align-items:center;justify-content:center;gap:clamp(2px, .72vw, 12px);overflow:visible}#header #modeSwitcher,#header .mode-switcher-inner,#header .mode-navigation{min-width:0;width:auto}#header .mode-navigation{display:flex;align-items:center;gap:clamp(2px, .72vw, 12px)}#header .mode-switcher-heading{display:none !important}#header .lesson-home-nav-button,#header .mode-navigation > .mode-button,#header .mode-more > summary.mode-button,.test-nav > a,.test-nav-more > summary{box-sizing:border-box;min-width:0;min-height:48px;margin:0;padding:10px clamp(9px, .78vw, 15px);display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;color:var(--text, #172235);background:transparent;border:1px solid transparent;border-radius:12px;font:inherit;font-size:clamp(12px, .84vw, 15px);font-weight:750;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}#header .mode-button-icon,#header .lesson-home-nav-icon,.test-nav .mode-button-icon,.test-nav-more-menu .mode-button-icon{display:inline-flex;flex:0 0 22px;width:22px;min-width:22px;height:22px;align-items:center;justify-content:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:19px;font-weight:400;line-height:22px;text-align:center}#header .mode-button-text,#header .lesson-home-nav-label,.test-nav .mode-button-text{display:inline-flex;align-items:center;line-height:1}#header .lesson-home-nav-button:hover,#header .mode-navigation > .mode-button:hover,#header .mode-more > summary.mode-button:hover,.test-nav > a:hover,.test-nav-more > summary:hover,.test-nav-more[open] > summary{color:var(--primary, #1769ff);background:var(--surface-alt, #f2f7ff);border-color:#dbe8fa}#header .lesson-home-nav-button-active,#header .mode-navigation > .mode-button-active,#header .mode-more.mode-more-active > summary,.test-nav > a[aria-current="page"],.test-nav > a.mode-button-active,.test-nav-more.mode-more-active > summary{color:#ffffff !important;background:linear-gradient(135deg, #246df0, #285ee5) !important;border-color:rgba(31, 92, 222, .58) !important;box-shadow:0 10px 24px rgba(47, 103, 246, .24) !important}#header .header-tools,.test-header-inner > #themeButton{justify-self:end}#header #themeButton,.test-header-inner > #themeButton{box-sizing:border-box;min-width:116px;min-height:48px;margin:0;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#ffffff;background:linear-gradient(135deg, #246df0, #285ee5);border:0;border-radius:12px;font:inherit;font-size:clamp(12px, .84vw, 15px);font-weight:750;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 8px 20px rgba(47, 103, 246, .20)}#header #themeButton > span:first-child,.test-header-inner > #themeButton > span:first-child{display:inline-flex;flex:0 0 22px;width:22px;height:22px;align-items:center;justify-content:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:19px;line-height:22px}.theme-button-arrow,.mode-more-chevron{font-size:10px;opacity:.8}#header .mode-more,.test-nav-more{position:relative;flex:0 0 auto}#header .mode-more > summary,.test-nav-more > summary{list-style:none}#header .mode-more > summary::-webkit-details-marker,.test-nav-more > summary::-webkit-details-marker{display:none}#header .mode-more-menu,.test-nav-more-menu{box-sizing:border-box;position:absolute;z-index:1200;top:calc(100% + 10px);right:0;width:244px;padding:8px;display:none;gap:4px;background:var(--surface-elevated, #ffffff);border:1px solid var(--border, #dbe4f0);border-radius:14px;box-shadow:0 18px 42px rgba(15, 23, 42, .18)}#header .mode-more[open] .mode-more-menu,.test-nav-more[open] .test-nav-more-menu{display:grid}#header .mode-more-menu .mode-button,.test-nav-more-menu a,.test-nav-more-menu button{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;display:flex;align-items:center;justify-content:flex-start;gap:10px;color:var(--text, #172235);background:transparent;border:1px solid transparent;border-radius:10px;font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}#header .mode-more-menu .mode-button:hover,.test-nav-more-menu a:hover,.test-nav-more-menu button:hover,.test-nav-more-menu a[aria-current="page"]{color:var(--primary, #1769ff);background:var(--surface-alt, #f2f7ff);border-color:var(--border, #dbe4f0)}/* Theme chooser: included here so simple information pages match the app. */.theme-menu{position:fixed;z-index:10050;width:250px;padding:8px;background:var(--surface-elevated, #ffffff);border:1px solid var(--border, #dbe4f0);border-radius:14px;box-shadow:0 18px 45px rgba(15, 23, 42, .22)}.theme-menu.hidden{display:none !important}.theme-option{display:grid;grid-template-columns:36px 1fr 22px;gap:10px;align-items:center;width:100%;padding:10px;color:var(--text, #172235);text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;cursor:pointer}.theme-option:hover,.theme-option:focus-visible{background:var(--surface-alt, #f2f7ff);border-color:var(--border, #dbe4f0);outline:none}.theme-option-icon{display:grid;place-items:center;width:34px;height:34px;background:var(--surface-alt, #f2f7ff);border-radius:9px;font-size:18px}.theme-option-copy{display:grid;gap:2px}.theme-option-copy strong{color:var(--text, #172235);font-size:13px}.theme-option-copy small{color:var(--text-light, #718096);font-size:10px}.theme-option-check{color:var(--primary, #1769ff);font-weight:900;opacity:0}.theme-option-selected{background:var(--primary-light, #edf4ff);border-color:var(--border, #dbe4f0)}.theme-option-selected .theme-option-check{opacity:1}html[data-theme="dark"] #header,html[data-theme="dark"] .test-site-header{background:#101b2e;border-color:#40516a}html[data-theme="dark"] #header .lesson-home-nav-button,html[data-theme="dark"] #header .mode-navigation > .mode-button,html[data-theme="dark"] #header .mode-more > summary.mode-button,html[data-theme="dark"] .test-nav > a,html[data-theme="dark"] .test-nav-more > summary,html[data-theme="dark"] #header .mode-more-menu .mode-button,html[data-theme="dark"] .test-nav-more-menu a,html[data-theme="dark"] .test-nav-more-menu button{color:#dce7f7}html[data-theme="dark"] #header .mode-more-menu,html[data-theme="dark"] .test-nav-more-menu,html[data-theme="dark"] .theme-menu{background:#101b2e;border-color:#40516a}html[data-theme="dark"] .theme-option,html[data-theme="dark"] .theme-option-copy strong{color:#e7eef9}html[data-theme="dark"] .theme-option-copy small{color:#9aabc2}html[data-theme="dark"] .theme-option-icon,html[data-theme="dark"] .theme-option:hover,html[data-theme="dark"] .theme-option:focus-visible,html[data-theme="dark"] #header .mode-more-menu .mode-button:hover,html[data-theme="dark"] .test-nav-more-menu a:hover,html[data-theme="dark"] .test-nav-more-menu button:hover{background:#17263c;border-color:#304662}@media (prefers-color-scheme: dark){html[data-theme="system"] #header,html[data-theme="system"] .test-site-header{background:#101b2e;border-color:#40516a}html[data-theme="system"] #header .site-logo-picture-light,html[data-theme="system"] .test-logo-light{display:none !important}html[data-theme="system"] #header .site-logo-picture-dark,html[data-theme="system"] .test-logo-dark{display:block !important}html[data-theme="system"] #header .lesson-home-nav-button,html[data-theme="system"] #header .mode-navigation > .mode-button,html[data-theme="system"] #header .mode-more > summary.mode-button,html[data-theme="system"] .test-nav > a,html[data-theme="system"] .test-nav-more > summary,html[data-theme="system"] #header .mode-more-menu .mode-button,html[data-theme="system"] .test-nav-more-menu a,html[data-theme="system"] .test-nav-more-menu button{color:#dce7f7}html[data-theme="system"] #header .mode-more-menu,html[data-theme="system"] .test-nav-more-menu,html[data-theme="system"] .theme-menu{background:#101b2e;border-color:#40516a}}@media (max-width: 1360px){#header .header-inner,.test-header-inner{grid-template-columns:minmax(205px, 235px) minmax(0, 1fr) auto;gap:8px}#header .site-logo-picture,#header .site-logo-image,.test-logo-stack,.test-logo img{width:min(235px, 100%)}#header .lesson-home-nav-button,#header .mode-navigation > .mode-button,#header .mode-more > summary.mode-button,.test-nav > a,.test-nav-more > summary{min-height:44px;padding-inline:8px;gap:6px;font-size:12px}#header #themeButton,.test-header-inner > #themeButton{min-width:104px;min-height:44px;padding-inline:11px;font-size:12px}}@media (max-width: 1040px){#header,.test-site-header{min-height:0;padding-top:max(7px, env(safe-area-inset-top));padding-bottom:7px}#header .header-inner,.test-header-inner{width:min(100% - 22px, 1660px);min-height:0;grid-template-columns:minmax(0, 1fr) auto;gap:8px 12px}#header .primary-mode-navigation,.test-nav{grid-column:1/-1;grid-row:2;width:100%;justify-content:flex-start;overflow-x:auto;overflow-y:visible;padding:2px 0 3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}#header .primary-mode-navigation::-webkit-scrollbar,.test-nav::-webkit-scrollbar{display:none}#header .header-tools,.test-header-inner > #themeButton{grid-column:2;grid-row:1}.test-logo{grid-column:1;grid-row:1}}@media (max-width: 590px){#header .header-inner,.test-header-inner{width:min(100% - 14px, 1660px)}#header .site-logo-picture,#header .site-logo-image,.test-logo-stack,.test-logo img{width:min(190px, 100%)}#header .lesson-home-nav-button,#header .mode-navigation > .mode-button,#header .mode-more > summary.mode-button,.test-nav > a,.test-nav-more > summary{min-width:68px;min-height:44px;padding:7px 8px;flex-direction:column;gap:3px;font-size:9px}#header .mode-more-chevron,.test-nav-more .mode-more-chevron{display:none}#header #themeButton,.test-header-inner > #themeButton{min-width:48px;min-height:42px;padding:8px 10px}#header #themeButton > span:nth-child(2),#header #themeButton > span:last-child,.test-header-inner > #themeButton > span:nth-child(2),.test-header-inner > #themeButton > span:last-child{display:none}}/* ==========================================================
   v17.10.182 — Reliable mobile More menu
   Explicit JS toggling + fixed viewport panel prevents the menu from
   opening outside the horizontally scrolling navigation in Chrome mobile.
========================================================== */@media (max-width: 1040px),(pointer: coarse){#header .mode-more-menu,.test-nav-more-menu{position:fixed !important;z-index:10050 !important;top:var(--site-more-top, 118px) !important;right:12px !important;bottom:auto !important;left:12px !important;width:auto !important;max-width:none !important;max-height:min(var(--site-more-max-height, 70vh), 480px) !important;margin:0 !important;overflow-x:hidden !important;overflow-y:auto !important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:16px;box-shadow:0 20px 52px rgba(15, 23, 42, .24)}#header .mode-more[open] > summary.mode-button,.test-nav-more[open] > summary{color:var(--primary, #1769ff);background:var(--surface-alt, #f2f7ff);border-color:var(--border, #dbe4f0)}}/* v17.10.327: readable hover, open and keyboard-focus states in both dark modes. */html[data-theme="dark"] #header .lesson-home-nav-button:is(:hover,:focus-visible),html[data-theme="dark"] #header .mode-navigation > .mode-button:is(:hover,:focus-visible),html[data-theme="dark"] #header .mode-more > summary.mode-button:is(:hover,:focus-visible),html[data-theme="dark"] #header .mode-more[open] > summary.mode-button,html[data-theme="dark"] .test-nav > a:is(:hover,:focus-visible),html[data-theme="dark"] .test-nav-more > summary:is(:hover,:focus-visible),html[data-theme="dark"] .test-nav-more[open] > summary,html[data-theme="dark"] #header .mode-more-menu .mode-button:is(:hover,:focus-visible),html[data-theme="dark"] .test-nav-more-menu a:is(:hover,:focus-visible),html[data-theme="dark"] .test-nav-more-menu button:is(:hover,:focus-visible){color:#e7eef9;background:#213a5f;border-color:#526d91;text-decoration:none}@media (prefers-color-scheme: dark){html[data-theme="system"] #header .lesson-home-nav-button:is(:hover,:focus-visible),html[data-theme="system"] #header .mode-navigation > .mode-button:is(:hover,:focus-visible),html[data-theme="system"] #header .mode-more > summary.mode-button:is(:hover,:focus-visible),html[data-theme="system"] #header .mode-more[open] > summary.mode-button,html[data-theme="system"] .test-nav > a:is(:hover,:focus-visible),html[data-theme="system"] .test-nav-more > summary:is(:hover,:focus-visible),html[data-theme="system"] .test-nav-more[open] > summary,html[data-theme="system"] #header .mode-more-menu .mode-button:is(:hover,:focus-visible),html[data-theme="system"] .test-nav-more-menu a:is(:hover,:focus-visible),html[data-theme="system"] .test-nav-more-menu button:is(:hover,:focus-visible){color:#e7eef9;background:#213a5f;border-color:#526d91;text-decoration:none}}/* Source: /css/universal-logo-visibility-v17.7.6.css *//* ==========================================================
   TypingTutor.Online — Universal Logo Visibility v17.7.6

   Nested sections use two theme-aware logo images inside
   .test-logo-stack. Older section styles mixed absolute
   positioning, display switching and opacity switching, which
   could collapse the logo container or hide both images.

   This final stylesheet creates one stable overlapping grid,
   reserves the correct header space and switches only opacity.
========================================================== */.test-logo{box-sizing:border-box !important;width:min(280px, 100%) !important;min-width:190px !important;min-height:58px !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;overflow:visible !important}.test-logo-stack{box-sizing:border-box !important;position:relative !important;display:grid !important;grid-template-columns:minmax(0, 1fr) !important;grid-template-rows:minmax(0, 1fr) !important;width:280px !important;max-width:100% !important;min-width:190px !important;min-height:58px !important;aspect-ratio:280/58 !important;overflow:visible !important;isolation:isolate}.test-logo-stack > .test-logo-light,.test-logo-stack > .test-logo-dark{box-sizing:border-box !important;grid-area:1/1 !important;position:static !important;inset:auto !important;z-index:1;display:block !important;width:100% !important;max-width:280px !important;height:100% !important;min-height:0 !important;max-height:58px !important;margin:0 !important;object-fit:contain !important;object-position:left center !important;pointer-events:none !important;transition:opacity .16s ease,visibility .16s ease !important}/* Reliable default, including pages before ThemeManager runs. */.test-logo-stack > .test-logo-light{opacity:1 !important;visibility:visible !important}.test-logo-stack > .test-logo-dark{opacity:0 !important;visibility:hidden !important}html[data-theme="light"] .test-logo-stack > .test-logo-light,html[data-resolved-theme="light"] .test-logo-stack > .test-logo-light{opacity:1 !important;visibility:visible !important}html[data-theme="light"] .test-logo-stack > .test-logo-dark,html[data-resolved-theme="light"] .test-logo-stack > .test-logo-dark{opacity:0 !important;visibility:hidden !important}html[data-theme="dark"] .test-logo-stack > .test-logo-light,html[data-resolved-theme="dark"] .test-logo-stack > .test-logo-light{opacity:0 !important;visibility:hidden !important}html[data-theme="dark"] .test-logo-stack > .test-logo-dark,html[data-resolved-theme="dark"] .test-logo-stack > .test-logo-dark{opacity:1 !important;visibility:visible !important}@media (prefers-color-scheme: dark){html[data-theme="system"] .test-logo-stack > .test-logo-light{opacity:0 !important;visibility:hidden !important}html[data-theme="system"] .test-logo-stack > .test-logo-dark{opacity:1 !important;visibility:visible !important}}@media (prefers-color-scheme: light){html[data-theme="system"] .test-logo-stack > .test-logo-light{opacity:1 !important;visibility:visible !important}html[data-theme="system"] .test-logo-stack > .test-logo-dark{opacity:0 !important;visibility:hidden !important}}@media (max-width: 760px){.test-logo{width:min(220px, 100%) !important;min-width:165px !important;min-height:46px !important}.test-logo-stack{width:220px !important;min-width:165px !important;min-height:46px !important}.test-logo-stack > .test-logo-light,.test-logo-stack > .test-logo-dark{max-width:220px !important;max-height:46px !important}}@media (max-width: 440px){.test-logo{width:178px !important;min-width:150px !important;min-height:37px !important}.test-logo-stack{width:178px !important;min-width:150px !important;min-height:37px !important}.test-logo-stack > .test-logo-light,.test-logo-stack > .test-logo-dark{max-width:178px !important;max-height:37px !important}}@media (prefers-reduced-motion: reduce){.test-logo-stack > .test-logo-light,.test-logo-stack > .test-logo-dark{transition:none !important}}/* Source: /css/universal-selection-v17.7.8.css *//* ==========================================================
   TypingTutor.Online — high-contrast text selection v17.7.8
   ========================================================== *//*
 * Use one strong, predictable selection treatment everywhere.
 * White text on saturated blue remains readable on both light and dark
 * surfaces and avoids the pale-selection/white-text conflict seen on blogs.
 */*::selection{color:#ffffff !important;background:#075fe4 !important;text-shadow:none !important;-webkit-text-fill-color:#ffffff !important}*::-moz-selection{color:#ffffff !important;background:#075fe4 !important;text-shadow:none !important}input::selection,textarea::selection,[contenteditable="true"]::selection{color:#ffffff !important;background:#075fe4 !important;-webkit-text-fill-color:#ffffff !important}input::-moz-selection,textarea::-moz-selection,[contenteditable="true"]::-moz-selection{color:#ffffff !important;background:#075fe4 !important}/* Extra contrast for explicit dark mode and System mode on dark devices. */html[data-theme="dark"] *::selection{color:#ffffff !important;background:#0057d9 !important;-webkit-text-fill-color:#ffffff !important}html[data-theme="dark"] *::-moz-selection{color:#ffffff !important;background:#0057d9 !important}@media (prefers-color-scheme: dark){html[data-theme="system"] *::selection{color:#ffffff !important;background:#0057d9 !important;-webkit-text-fill-color:#ffffff !important}html[data-theme="system"] *::-moz-selection{color:#ffffff !important;background:#0057d9 !important}}/* Source: /css/global-workspace-v17.8.2.css *//* ==========================================================
   TypingTutor.Online — Global Wide Workspace v17.8.2
   A consistent outer width across the tutor and every public
   section. Reading columns remain intentionally narrower.
========================================================== */:root{--tto-workspace-max:1500px;--tto-workspace-gutter:clamp(14px, 1.7vw, 32px);--max-width:var(--tto-workspace-max)}/* Main tutor, mode dashboards and progress bars */.site-shell,#courseModePanel,.feature-placeholder,#statisticsDashboard,.statistics-course-progress,.daily-practice-summary,.settings-dashboard,.achievements-dashboard,.more-typing-resources-inner,.typing-learning-content-inner{box-sizing:border-box;width:min(
        var(--tto-workspace-max),
        calc(100% - (2 * var(--tto-workspace-gutter)))
    );max-width:var(--tto-workspace-max);margin-inline:auto}/* Standalone site sections */.test-page-shell,.games-shell,.kids-shell,.blog-shell,.certificate-shell,.share-shell,.lessons-page-shell,.page-shell{box-sizing:border-box;width:min(
        var(--tto-workspace-max),
        calc(100% - (2 * var(--tto-workspace-gutter)))
    );max-width:var(--tto-workspace-max);margin-inline:auto}/* Footer follows the same visual edges as the page content. */.universal-footer-inner,.site-footer-inner{width:min(var(--tto-workspace-max), 100%);max-width:var(--tto-workspace-max)}/* Align horizontal section navigation with the wider workspace. */.games-subnav,.kids-subnav{padding-inline:max(
        var(--tto-workspace-gutter),
        calc((100vw - var(--tto-workspace-max)) / 2)
    )}/* Keep long-form reading comfortable even inside a wide shell. */.blog-article,.blog-article-body,.page-prose,.content-prose,.certificate-faq > p,.certificate-faq details,.typing-learning-heading{max-width:980px}/* Wide desktop dashboards benefit from balanced multi-column cards. */@media (min-width: 1280px){.statistics-summary-grid-complete{grid-template-columns:repeat(6, minmax(0, 1fr))}.statistics-ranking-grid,.statistics-trend-grid{gap:18px}.games-grid,.kids-path-grid,.kids-feature-grid,.kids-test-grid,.kids-game-grid,.kids-badge-grid{gap:20px}}/* Maintain generous but safe gutters on tablets and phones. */@media (max-width: 900px){:root{--tto-workspace-gutter:11px}}@media (max-width: 560px){:root{--tto-workspace-gutter:7px}}@media print{.certificate-shell,.kids-shell,.page-shell{width:100% !important;max-width:none !important}}/* Source: /css/seo-visuals-v17.8.48.css *//* TypingTutor.Online v17.8.48 — responsive SEO / learning visuals */.content-visual{margin:28px 0 34px}.content-visual img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--border, #dbe4f0);border-radius:20px;background:var(--surface-alt, #f8fafc);box-shadow:0 14px 34px rgba(15, 23, 42, .08)}.content-visual figcaption{margin:10px 4px 0;color:var(--text-light, #64748b);font-size:.86rem;line-height:1.55}.content-visual--compact{max-width:1120px;margin-left:auto;margin-right:auto}.content-visual--hero{margin-top:24px}.visual-note{margin:20px 0 30px;padding:16px 18px;border:1px solid rgba(23,105,255,.18);border-radius:16px;background:var(--primary-light, #eaf1ff);color:var(--text-light, #475569);line-height:1.65}.visual-note strong{color:var(--text, #0f172a)}html[data-theme="dark"] .content-visual img{border-color:var(--border, #334155);box-shadow:0 14px 34px rgba(0,0,0,.28)}@media (max-width: 700px){.content-visual{margin:20px 0 26px}.content-visual img{border-radius:14px}.content-visual figcaption{font-size:.8rem}}/* Shared account action. Reserve space before JavaScript runs. */#header .header-tools,.test-header-inner > .site-header-actions{display:flex !important;align-items:center;justify-content:flex-end;gap:8px;justify-self:end;min-width:0}#header .site-account-link,.test-site-header .site-account-link{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;min-width:118px;padding:10px 12px;border:1px solid var(--border,#c9d8ed);border-radius:12px;background:var(--surface-alt,#f2f7ff);color:var(--text,#172235);font:750 13px/1 system-ui,sans-serif;text-decoration:none;white-space:nowrap;flex-shrink:0}.site-account-link svg{flex-shrink:0}#header .site-account-link:hover,.test-site-header .site-account-link:hover{border-color:#246df0;background:#e7f0ff;color:#1747a6;text-decoration:none}.site-account-link:focus-visible{outline:3px solid #246df0;outline-offset:3px}.test-header-inner > .site-header-actions > #themeButton{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:116px;min-height:48px;padding:10px 15px;margin:0;border:0;border-radius:12px;background:linear-gradient(135deg,#246df0,#285ee5);color:white;font:750 13px/1 system-ui,sans-serif;cursor:pointer;white-space:nowrap}html[data-theme="dark"] .site-account-link{background:#182a43;color:#e7eef9;border-color:#526783}html[data-theme="dark"] .site-account-link:hover{background:#213a5f;color:white}@media (max-width:1200px){#header .header-inner,.test-header-inner{grid-template-columns:minmax(0,1fr) auto !important}#header .primary-mode-navigation,.test-nav{grid-column:1/-1;grid-row:2}#header .header-tools,.test-header-inner > .site-header-actions{grid-column:2;grid-row:1}}@media (max-width:590px){#header .site-account-link,.test-site-header .site-account-link{min-width:44px;width:44px;min-height:44px;padding:10px}.site-account-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#header .header-tools,.test-header-inner > .site-header-actions{gap:6px}#header #themeButton,.test-header-inner > .site-header-actions > #themeButton{min-width:44px;width:44px;min-height:44px;padding:8px !important}.test-header-inner > .site-header-actions > #themeButton > span:not(:first-child){display:none}}/* v17.10.317 — green account action after server-confirmed sign-in. */#header .site-account-link[data-signed-in="true"],.test-site-header .site-account-link[data-signed-in="true"]{background:#15803d;color:#fff;border-color:#15803d}#header .site-account-link[data-signed-in="true"]:hover,.test-site-header .site-account-link[data-signed-in="true"]:hover{background:#166534;color:#fff;border-color:#166534}html[data-theme="dark"] #header .site-account-link[data-signed-in="true"],html[data-theme="dark"] .test-site-header .site-account-link[data-signed-in="true"]{background:#166534;color:#fff;border-color:#22c55e}html[data-theme="dark"] #header .site-account-link[data-signed-in="true"]:hover,html[data-theme="dark"] .test-site-header .site-account-link[data-signed-in="true"]:hover{background:#14532d;color:#fff}