/* 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/layout.css *//* ========================================================== TypingTutor.Online Responsive Site Shell v5.5 File: css/layout.css ========================================================== */#app{width:100%;min-height:100vh;display:grid;grid-template-columns:minmax(0, 1fr);grid-template-rows:auto minmax(0, 1fr) auto}/* Shared width for header, tutor and footer */.site-shell,#courseModePanel,.feature-placeholder{box-sizing:border-box;width:min(1480px, calc(100% - 34px));margin-inline:auto}/* Header */#header{position:relative;z-index:100;width:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm)}.header-inner{display:grid;grid-template-columns:minmax(235px, 300px) minmax(0, 1fr) auto;gap:clamp(12px, 2vw, 28px);align-items:center;min-height:72px;padding-block:8px}.logo,#modeSwitcher,.header-tools{min-width:0}.header-tools{justify-self:end}/* Main */#mainContent{width:100%;min-width:0;padding:10px 0 28px}/* Footer */#footer{width:100%;background:var(--surface);border-top:1px solid var(--border)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding-block:10px}/* Laptop */@media (max-width: 1180px){.header-inner{grid-template-columns:minmax(190px, 225px) minmax(0, 1fr) auto;gap:10px}}/* Tablet / narrow laptop */@media (max-width: 900px){.site-shell,#courseModePanel,.feature-placeholder{width:min(100% - 22px, 1480px)}.header-inner{grid-template-columns:minmax(0, 1fr) auto;gap:8px 12px;min-height:0;padding-block:8px}#modeSwitcher{grid-column:1/-1;grid-row:2}.header-tools{grid-column:2;grid-row:1}.footer-inner{align-items:flex-start;flex-direction:column;gap:8px}}/* Mobile */@media (max-width: 560px){.site-shell,#courseModePanel,.feature-placeholder{width:min(100% - 14px, 1480px)}#mainContent{padding-top:7px;padding-bottom:18px}.footer-inner{min-height:0;padding-block:14px}}/* 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/hands.css *//* ========================================================== TypingTutor.Online Natural Hand Position + Side Mode Fix v17.0.31 ========================================================== *//* Mode visibility */html[data-hand-guidance="overlay"] .hands-guidance-card{display:none !important}/* * Side Hands is a true fourth style. Hide BOTH keyboard-overlay engines: * - #handsKeyboardOverlay: Articulated and Capsule * - #handsClassicOverlay: Classic Curved */html[data-hand-guidance="separate"] #handsKeyboardOverlay,html[data-hand-guidance="separate"] #handsClassicOverlay,html[data-hand-guidance-style="side"] #handsKeyboardOverlay,html[data-hand-guidance-style="side"] #handsClassicOverlay,html[data-show-side-hands="true"] #handsKeyboardOverlay,html[data-show-side-hands="true"] #handsClassicOverlay{display:none !important}html[data-hand-guidance="hidden"] .hands-guidance-card,html[data-hand-guidance="hidden"] #handsKeyboardOverlay,html[data-hand-guidance="hidden"] #handsClassicOverlay,html[data-hand-guidance-style="off"] #handsKeyboardOverlay,html[data-hand-guidance-style="off"] #handsClassicOverlay{display:none !important}/* * Mobile keeps both guidance designs hidden because the full tutor * keyboard is intentionally hidden there. */@media (max-width: 760px){.hands-guidance-card,#handsKeyboardOverlay{display:none !important}}/* ========================================================== SEPARATE HAND PANEL ========================================================== *//* ========================================================== TypingTutor.Online Clean Functional Hands ========================================================== */#handsContainer{width:100%;max-width:1040px;height:330px;margin:18px auto 24px;overflow:hidden;user-select:none;background:#ffffff;border:1px solid #edf1f6;border-radius:28px;box-shadow:0 14px 35px rgba(15, 23, 42, 0.06)}#typingHands{display:block;width:100%;height:100%}/* ========================================================== PALMS AND WRISTS ========================================================== */.hand-palm{fill:#ffd4ae;stroke:#dca56f;stroke-width:3}.hand-wrist{fill:#f6c79d;stroke:#dca56f;stroke-width:3}/* ========================================================== FINGERS ========================================================== */.finger{transition:filter 0.08s ease,opacity 0.08s ease}.finger-segment{fill:#ffd4ae;stroke:#dca56f;stroke-width:2.2;transition:fill 0.08s ease,stroke 0.08s ease}.finger-tip{fill:#f8c89e;stroke:#dca56f;stroke-width:2.2;transition:fill 0.08s ease,stroke 0.08s ease}/* ========================================================== EXPECTED FINGER ========================================================== */.finger.finger-active{filter:drop-shadow(0 5px 6px rgba(37, 99, 235, 0.42))}.finger.finger-active .finger-segment,.finger.finger-active .finger-tip{fill:#8fc4ff;stroke:#2563eb;stroke-width:3}/* ========================================================== CORRECT PRESS ========================================================== */.finger.finger-correct{filter:drop-shadow(0 5px 6px rgba(22, 163, 74, 0.4))}.finger.finger-correct .finger-segment,.finger.finger-correct .finger-tip{fill:#86efac;stroke:#16a34a;stroke-width:3}/* ========================================================== WRONG PRESS ========================================================== */.finger.finger-wrong{filter:drop-shadow(0 5px 6px rgba(239, 68, 68, 0.42))}.finger.finger-wrong .finger-segment,.finger.finger-wrong .finger-tip{fill:#fca5a5;stroke:#ef4444;stroke-width:3}/* ========================================================== PRESS FEEDBACK ========================================================== */.finger.finger-press{animation:fingerPress 0.22s ease}@keyframes fingerPress{0%{opacity:1}45%{opacity:0.55}100%{opacity:1}}/* ========================================================== RESPONSIVE ========================================================== */@media (max-width: 700px){#handsContainer{height:235px;margin-top:12px;border-radius:20px}}/* Override the old mobile rule and mode visibility after its source CSS. */html[data-hand-guidance="overlay"] .hands-guidance-card,html[data-hand-guidance="hidden"] .hands-guidance-card{display:none !important}html[data-hand-guidance="separate"] .hands-guidance-card,html[data-hand-guidance-style="side"] .hands-guidance-card,html[data-show-side-hands="true"] .hands-guidance-card{display:flex !important}@media (max-width: 760px){html[data-hand-guidance] .hands-guidance-card{display:none !important}}/* Dark mode for the original separate panel */html[data-theme="dark"][data-hand-guidance="separate"] #handsContainer{background:#111a2b;border-color:#26364e}html[data-theme="dark"][data-hand-guidance="separate"] .hand-palm,html[data-theme="dark"][data-hand-guidance="separate"] .finger-segment{fill:#d7b08c;stroke:#9a7454}html[data-theme="dark"][data-hand-guidance="separate"] .hand-wrist,html[data-theme="dark"][data-hand-guidance="separate"] .finger-tip{fill:#c99e79;stroke:#9a7454}/* ========================================================== HANDS OVER KEYBOARD — HAND CLEANUP v12.3 ========================================================== */.keyboard-guidance-card{position:relative;overflow:hidden}#handsKeyboardOverlay{position:absolute;z-index:6;/* * The overlay begins at the home-row area. * Function and number rows stay completely unobstructed. */top:48%;right:5%;bottom:-2%;left:5%;pointer-events:none;user-select:none}#handsKeyboardOverlay svg{display:block;width:100%;height:100%;overflow:visible}.hand-structure-line,.finger-line,.finger-glow{fill:none;stroke-linecap:round;stroke-linejoin:round}.hand-structure-line{stroke:rgba(118, 124, 134, .68);stroke-width:5.5}.finger-line{stroke:rgba(118, 124, 134, .76);stroke-width:6;transition:stroke .15s ease,stroke-width .15s ease,filter .15s ease,transform .15s ease}.finger-glow{stroke:transparent;stroke-width:20;opacity:0;transition:stroke .15s ease,opacity .15s ease}.finger.finger-active .finger-line{stroke:#2f6df6;stroke-width:9;filter:drop-shadow( 0 0 4px rgba(47, 109, 246, .30) )}.finger.finger-active .finger-glow{stroke:rgba(47, 109, 246, .13);opacity:1}.finger.finger-correct .finger-line{stroke:#16a34a;stroke-width:9}.finger.finger-correct .finger-glow{stroke:rgba(22, 163, 74, .13);opacity:1}.finger.finger-wrong .finger-line{stroke:#dc2626;stroke-width:9}.finger.finger-wrong .finger-glow{stroke:rgba(220, 38, 38, .13);opacity:1}/* * Animate only the visible finger paths, not the SVG finger group. * The left-hand group already has a permanent translate/scale transform. * Animating the group would overwrite that transform and make the finger * jump away from its correctly aligned position. */.finger.finger-press .finger-line,.finger.finger-press .finger-glow{animation:naturalFingerPress .12s ease;transform-box:fill-box;transform-origin:center bottom}@keyframes naturalFingerPress{0%{transform:translateY(0)}50%{transform:translateY(4px)}100%{transform:translateY(0)}}#keyboardContainer{position:relative;z-index:2}#targetRowGuide{position:relative;z-index:8}html[data-hand-guidance="separate"] .hands-guidance-card{display:block !important}html[data-hand-guidance="overlay"] .hands-guidance-card,html[data-hand-guidance="hidden"] .hands-guidance-card{display:none !important}html[data-hand-guidance="separate"] #handsKeyboardOverlay,html[data-hand-guidance="hidden"] #handsKeyboardOverlay,html[data-show-keyboard="false"] #handsKeyboardOverlay{display:none !important}html[data-hand-guidance="overlay"] #handsKeyboardOverlay{display:block}html[data-theme="dark"] .hand-structure-line,html[data-theme="dark"] .finger-line{stroke:rgba(174, 185, 202, .72)}html[data-theme="dark"] .finger.finger-active .finger-line{stroke:#62a0ff}html[data-theme="dark"] .finger.finger-active .finger-glow{stroke:rgba(98, 160, 255, .16)}@media (prefers-color-scheme: dark){html[data-theme="system"] .hand-structure-line,html[data-theme="system"] .finger-line{stroke:rgba(174, 185, 202, .72)}}@media (max-width: 760px){#handsKeyboardOverlay{display:none !important}}/* ========================================================== NUMBER AND SPECIAL-KEY FINGER REACH v13.4 ========================================================== */.finger-motion{transform-box:fill-box;transform-origin:center bottom;transition:transform .09s cubic-bezier(.2, .8, .2, 1);will-change:transform}/* The press animation stays inside the moving finger wrapper. */.finger.finger-press .finger-motion{filter:brightness(1.02)}/* Extra easing for long reaches to the number row. */.finger-motion{transition-duration:.09s}/* ========================================================== ARTICULATED LEFT INDEX — v13.5 ========================================================== */.articulated-finger .finger-bone{transition:d .09s ease}.articulated-finger .finger-joint,.articulated-finger .finger-tip-node{fill:rgba(255, 255, 255, .92);stroke:rgba(118, 124, 134, .82);stroke-width:3.2;transition:cx .09s ease,cy .09s ease,fill .15s ease,stroke .15s ease}.articulated-finger .finger-tip-node{fill:rgba(255, 255, 255, .98)}.articulated-finger.finger-active .finger-joint,.articulated-finger.finger-active .finger-tip-node{fill:rgba(47, 109, 246, .22);stroke:#2f6df6}.articulated-finger.finger-correct .finger-joint,.articulated-finger.finger-correct .finger-tip-node{fill:rgba(22, 163, 74, .22);stroke:#16a34a}.articulated-finger.finger-wrong .finger-joint,.articulated-finger.finger-wrong .finger-tip-node{fill:rgba(220, 38, 38, .20);stroke:#dc2626}html[data-theme="dark"] .articulated-finger .finger-joint,html[data-theme="dark"] .articulated-finger .finger-tip-node{fill:rgba(17, 26, 43, .96);stroke:rgba(174, 185, 202, .80)}/* ========================================================== ARTICULATED ALPHABET HANDS v13.6 ========================================================== */.articulated-finger .finger-bone,.articulated-finger .articulated-glow,.articulated-finger .finger-joint,.articulated-finger .finger-tip-node{transition:d .09s cubic-bezier(.2, .8, .2, 1),cx .09s cubic-bezier(.2, .8, .2, 1),cy .09s cubic-bezier(.2, .8, .2, 1),stroke .15s ease,fill .15s ease,opacity .15s ease}/* Articulated thumbs */.articulated-finger.left-thumb-finger .finger-joint,.articulated-finger.right-thumb-finger .finger-joint{r:4.3}.articulated-finger.left-thumb-finger .finger-tip-node,.articulated-finger.right-thumb-finger .finger-tip-node{r:6.2}.articulated-finger.left-thumb-finger .finger-bone,.articulated-finger.right-thumb-finger .finger-bone{stroke-width:6.5}/* v14.0: two-joint articulated thumbs */.articulated-thumb .finger-middle,.articulated-thumb .finger-joint:nth-of-type(2){display:none}/* ========================================================== TRANSPARENT SKIN-TONE FINGERS v14.1 ========================================================== */:root{--hand-skin-fill:rgba(232, 190, 145, .34);--hand-skin-fill-active:rgba(232, 190, 145, .44);--hand-skin-fill-correct:rgba(190, 225, 198, .40);--hand-skin-fill-wrong:rgba(244, 193, 193, .38);--hand-rest-stroke:rgba(118, 124, 134, .78);--hand-active-stroke:rgba(47, 109, 246, .94);--hand-correct-stroke:rgba(22, 163, 74, .94);--hand-wrong-stroke:rgba(220, 38, 38, .94)}/* * The articulated finger bones stay readable but no longer create a * heavy solid-blue shape over the active key. The skin-toned joints are * translucent, so key labels remain visible underneath. */.articulated-finger .finger-bone{stroke:var(--hand-rest-stroke);stroke-width:5.5;filter:none}.articulated-finger .finger-joint,.articulated-finger .finger-tip-node{fill:var(--hand-skin-fill);stroke:var(--hand-rest-stroke);stroke-width:2.8}.articulated-finger .finger-tip-node{fill:rgba(232, 190, 145, .42)}/* Active / expected finger */.articulated-finger.finger-active .finger-bone{stroke:var(--hand-active-stroke);stroke-width:7;filter:drop-shadow( 0 0 4px rgba(47, 109, 246, .20) )}.articulated-finger.finger-active .finger-joint,.articulated-finger.finger-active .finger-tip-node{fill:var(--hand-skin-fill-active);stroke:var(--hand-active-stroke)}.articulated-finger.finger-active .articulated-glow{stroke:rgba(47, 109, 246, .11);opacity:.56}/* Correct feedback */.articulated-finger.finger-correct .finger-bone{stroke:var(--hand-correct-stroke);stroke-width:7}.articulated-finger.finger-correct .finger-joint,.articulated-finger.finger-correct .finger-tip-node{fill:var(--hand-skin-fill-correct);stroke:var(--hand-correct-stroke)}.articulated-finger.finger-correct .articulated-glow{stroke:rgba(22, 163, 74, .10);opacity:.68}/* Wrong feedback */.articulated-finger.finger-wrong .finger-bone{stroke:var(--hand-wrong-stroke);stroke-width:7}.articulated-finger.finger-wrong .finger-joint,.articulated-finger.finger-wrong .finger-tip-node{fill:var(--hand-skin-fill-wrong);stroke:var(--hand-wrong-stroke)}.articulated-finger.finger-wrong .articulated-glow{stroke:rgba(220, 38, 38, .10);opacity:.68}/* * Keep the target key label above the key background. This does not place * the label above the finger SVG, but the transparent finger styling means * the character remains clearly readable through the guidance layer. */#keyboardContainer .key,#keyboardContainer [data-code],#keyboardContainer [data-key]{isolation:isolate}/* Dark mode: warmer translucent skin with clear outlines. */html[data-theme="dark"]{--hand-skin-fill:rgba(198, 148, 108, .30);--hand-skin-fill-active:rgba(210, 160, 116, .40);--hand-skin-fill-correct:rgba(117, 179, 132, .34);--hand-skin-fill-wrong:rgba(204, 113, 113, .34);--hand-rest-stroke:rgba(174, 185, 202, .78);--hand-active-stroke:rgba(98, 160, 255, .96)}@media (prefers-color-scheme: dark){html[data-theme="system"]{--hand-skin-fill:rgba(198, 148, 108, .30);--hand-skin-fill-active:rgba(210, 160, 116, .40);--hand-skin-fill-correct:rgba(117, 179, 132, .34);--hand-skin-fill-wrong:rgba(204, 113, 113, .34);--hand-rest-stroke:rgba(174, 185, 202, .78);--hand-active-stroke:rgba(98, 160, 255, .96)}}/* ========================================================== READABLE TRANSPARENT SKIN FINGERS v14.2 ========================================================== */:root{--finger-skin-rest:rgba(224, 180, 142, .20);--finger-skin-active:rgba(224, 180, 142, .34);--finger-skin-correct:rgba(196, 224, 201, .32);--finger-skin-wrong:rgba(239, 197, 197, .30);--finger-outline-rest:rgba(112, 120, 132, .72);--finger-outline-active:rgba(37, 99, 235, .92);--finger-outline-correct:rgba(22, 163, 74, .92);--finger-outline-wrong:rgba(220, 38, 38, .92)}/* * The wide under-stroke becomes the translucent finger body. * The narrow upper stroke becomes the clean finger outline. * This keeps key labels visible through the finger. */.articulated-finger .articulated-glow{stroke:var(--finger-skin-rest);stroke-width:17;opacity:1;filter:none}.articulated-finger .finger-bone{stroke:var(--finger-outline-rest);stroke-width:3.5;filter:none}.articulated-finger .finger-joint,.articulated-finger .finger-tip-node{fill:rgba(224, 180, 142, .28);stroke:var(--finger-outline-rest);stroke-width:2.2}/* Expected finger */.articulated-finger.finger-active .articulated-glow{stroke:var(--finger-skin-active);stroke-width:19;opacity:1;filter:none}.articulated-finger.finger-active .finger-bone{stroke:var(--finger-outline-active);stroke-width:4;filter:drop-shadow(0 0 3px rgba(37, 99, 235, .20))}.articulated-finger.finger-active .finger-joint,.articulated-finger.finger-active .finger-tip-node{fill:rgba(224, 180, 142, .42);stroke:var(--finger-outline-active)}/* Correct feedback */.articulated-finger.finger-correct .articulated-glow{stroke:var(--finger-skin-correct);stroke-width:19;opacity:1}.articulated-finger.finger-correct .finger-bone{stroke:var(--finger-outline-correct);stroke-width:4}.articulated-finger.finger-correct .finger-joint,.articulated-finger.finger-correct .finger-tip-node{fill:var(--finger-skin-correct);stroke:var(--finger-outline-correct)}/* Wrong feedback */.articulated-finger.finger-wrong .articulated-glow{stroke:var(--finger-skin-wrong);stroke-width:19;opacity:1}.articulated-finger.finger-wrong .finger-bone{stroke:var(--finger-outline-wrong);stroke-width:4}.articulated-finger.finger-wrong .finger-joint,.articulated-finger.finger-wrong .finger-tip-node{fill:var(--finger-skin-wrong);stroke:var(--finger-outline-wrong)}/* * Readable target key: use a translucent blue surface instead of a * solid blue block. The character remains dark and clearly visible. */#keyboardContainer .key-next{background:rgba(47, 103, 246, .18) !important;color:#172033 !important;border-color:rgba(47, 103, 246, .78) !important;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .55),0 0 0 4px rgba(47, 103, 246, .10) !important}#keyboardContainer .key-next .key-primary,#keyboardContainer .key-next .key-secondary{color:#172033 !important;position:relative;z-index:2}#keyboardContainer .key-next .home-bump{background:rgba(23, 32, 51, .72) !important}/* Keep feedback colors readable without hiding characters. */#keyboardContainer .key-correct{background:rgba(34, 197, 94, .18) !important;border-color:rgba(22, 163, 74, .78) !important}#keyboardContainer .key-wrong{background:rgba(239, 68, 68, .18) !important;border-color:rgba(220, 38, 38, .78) !important}#keyboardContainer .key-correct .key-primary,#keyboardContainer .key-correct .key-secondary,#keyboardContainer .key-wrong .key-primary,#keyboardContainer .key-wrong .key-secondary{color:#172033 !important}html[data-theme="dark"]{--finger-skin-rest:rgba(197, 145, 106, .18);--finger-skin-active:rgba(205, 153, 111, .32);--finger-skin-correct:rgba(84, 161, 104, .26);--finger-skin-wrong:rgba(184, 89, 89, .26);--finger-outline-rest:rgba(181, 191, 207, .72)}html[data-theme="dark"] #keyboardContainer .key-next{background:rgba(79, 139, 255, .22) !important;color:#f8fafc !important;border-color:rgba(98, 160, 255, .82) !important}html[data-theme="dark"] #keyboardContainer .key-next .key-primary,html[data-theme="dark"] #keyboardContainer .key-next .key-secondary,html[data-theme="dark"] #keyboardContainer .key-correct .key-primary,html[data-theme="dark"] #keyboardContainer .key-correct .key-secondary,html[data-theme="dark"] #keyboardContainer .key-wrong .key-primary,html[data-theme="dark"] #keyboardContainer .key-wrong .key-secondary{color:#f8fafc !important}/* ========================================================== CLEAR KEY FINGERTIPS v14.3 ========================================================== *//* * The skin body is intentionally very light. The final finger segment * stops before the key centre, while a larger hollow fingertip ring * surrounds the target character. This keeps letters such as Z visible. */:root{--finger-skin-rest:rgba(224, 180, 142, .075);--finger-skin-active:rgba(224, 180, 142, .115);--finger-skin-correct:rgba(196, 224, 201, .12);--finger-skin-wrong:rgba(239, 197, 197, .11)}.articulated-finger .articulated-glow{stroke-width:13px;opacity:1}.articulated-finger.finger-active .articulated-glow,.articulated-finger.finger-correct .articulated-glow,.articulated-finger.finger-wrong .articulated-glow{stroke-width:14px}/* Larger hollow fingertip / nail ring leaves the key centre readable. */.articulated-finger .finger-tip-node{fill:rgba(255, 255, 255, .08) !important;stroke-width:2.4px}.articulated-finger.finger-active .finger-tip-node{fill:rgba(224, 180, 142, .07) !important;stroke-width:3px}.articulated-finger.finger-correct .finger-tip-node{fill:rgba(196, 224, 201, .07) !important;stroke-width:3px}.articulated-finger.finger-wrong .finger-tip-node{fill:rgba(239, 197, 197, .07) !important;stroke-width:3px}/* Joint circles stay small and subtle; only the fingertip is enlarged. */.articulated-finger .finger-joint{fill:rgba(224, 180, 142, .16) !important}html[data-theme="dark"]{--finger-skin-rest:rgba(205, 153, 111, .065);--finger-skin-active:rgba(205, 153, 111, .105);--finger-skin-correct:rgba(84, 161, 104, .10);--finger-skin-wrong:rgba(184, 89, 89, .10)}html[data-theme="dark"] .articulated-finger .finger-tip-node{fill:rgba(15, 23, 42, .08) !important}/* ========================================================== FINAL READABLE FINGER MOTION v14.4 ========================================================== *//* * Extra transparency keeps every key character readable. * The larger hollow nail ring surrounds the character instead of * covering it, while the finger body remains lightly visible. */:root{--finger-skin-rest:rgba(224, 180, 142, .040);--finger-skin-active:rgba(224, 180, 142, .070);--finger-skin-correct:rgba(196, 224, 201, .070);--finger-skin-wrong:rgba(239, 197, 197, .065)}.articulated-finger .articulated-glow{stroke-width:11px}.articulated-finger.finger-active .articulated-glow,.articulated-finger.finger-correct .articulated-glow,.articulated-finger.finger-wrong .articulated-glow{stroke-width:12px}/* Larger, clearer and almost transparent fingertip/nail circle. */.articulated-finger .finger-tip-node{fill:rgba(255, 255, 255, .018) !important;stroke-width:2.2px}.articulated-finger.finger-active .finger-tip-node{fill:rgba(224, 180, 142, .025) !important;stroke-width:2.7px}.articulated-finger.finger-correct .finger-tip-node{fill:rgba(196, 224, 201, .025) !important;stroke-width:2.7px}.articulated-finger.finger-wrong .finger-tip-node{fill:rgba(239, 197, 197, .025) !important;stroke-width:2.7px}/* Keep bend joints subtle so they do not compete with keyboard labels. */.articulated-finger .finger-joint{fill:rgba(224, 180, 142, .095) !important}html[data-theme="dark"]{--finger-skin-rest:rgba(205, 153, 111, .035);--finger-skin-active:rgba(205, 153, 111, .060);--finger-skin-correct:rgba(84, 161, 104, .055);--finger-skin-wrong:rgba(184, 89, 89, .055)}html[data-theme="dark"] .articulated-finger .finger-tip-node{fill:rgba(15, 23, 42, .018) !important}/* ========================================================== THREE HAND GUIDANCE MODES v15.0 ========================================================== *//* Shared overlay positioning. */#handsClassicOverlay{position:absolute;z-index:6;top:48%;right:5%;bottom:-2%;left:5%;pointer-events:none;user-select:none}#handsClassicOverlay svg{display:block;width:100%;height:100%;overflow:visible}/* Articulated is the recommended/default engine. */html[data-hand-guidance-style="articulated"] #handsKeyboardOverlay,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{display:block !important}html[data-hand-guidance-style="articulated"] #handsClassicOverlay,html[data-hand-guidance-style="capsule"] #handsClassicOverlay,html[data-hand-guidance-style="side"] #handsClassicOverlay,html[data-hand-guidance-style="off"] #handsClassicOverlay{display:none !important}/* Classic curved mode uses the final pre-articulated hands. */html[data-hand-guidance-style="classic"] #handsClassicOverlay{display:block !important}html[data-hand-guidance-style="classic"] #handsKeyboardOverlay,html[data-hand-guidance-style="side"] #handsKeyboardOverlay,html[data-hand-guidance-style="off"] #handsKeyboardOverlay{display:none !important}/* The old separate hand card is not one of the final three modes. */.hands-guidance-card{display:none !important}/* Capsule / Ribbon: same accurate target engine, premium rounded body. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-glow{stroke:rgba(224, 180, 142, .34) !important;stroke-width:20px !important;opacity:1 !important;filter:drop-shadow(0 2px 2px rgba(84, 62, 44, .12))}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-bone{stroke:rgba(123, 101, 84, .72) !important;stroke-width:2.6px !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-joint{fill:rgba(224, 180, 142, .42) !important;stroke:rgba(123, 101, 84, .62) !important;r:4.5}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-tip-node{fill:rgba(255, 246, 238, .28) !important;stroke:rgba(123, 101, 84, .72) !important;stroke-width:2px !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .articulated-glow{stroke:rgba(224, 180, 142, .42) !important;filter:drop-shadow(0 0 5px rgba(37, 99, 235, .28))}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .finger-bone,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .finger-tip-node{stroke:rgba(37, 99, 235, .92) !important}html[data-theme="dark"][data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-glow{stroke:rgba(194, 143, 104, .30) !important}html[data-theme="dark"][data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-bone{stroke:rgba(210, 183, 160, .72) !important}/* Hide all hand modes when the on-screen keyboard is hidden. */html[data-show-keyboard="false"] #handsKeyboardOverlay,html[data-show-keyboard="false"] #handsClassicOverlay{display:none !important}/* Mobile keeps the tutor keyboard and all hand modes hidden. */@media (max-width: 760px){#handsKeyboardOverlay,#handsClassicOverlay{display:none !important}}/* ========================================================== CAPSULE / RIBBON VISUAL POLISH v15.1 ========================================================== *//* Capsule-only SVG layers remain absent from the other visual modes. */.capsule-ribbon-segment,.capsule-ribbon-base,.capsule-ribbon-nail{display:none}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(238, 225, 209, .18);--capsule-skin-active:rgba(238, 225, 209, .14);--capsule-skin-correct:rgba(214, 235, 220, .22);--capsule-skin-wrong:rgba(241, 214, 214, .22);--capsule-edge:rgba(181, 154, 129, .42);--capsule-edge-active:rgba(37, 99, 235, .38);--capsule-edge-correct:rgba(22, 163, 74, .82);--capsule-edge-wrong:rgba(220, 38, 38, .82);--capsule-highlight:rgba(255, 255, 255, .12);--capsule-nail:rgba(255, 248, 241, .10)}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-segment,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-base,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-nail{display:block}/* Hide the visible skeleton but keep it in the DOM for animation logic. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-glow,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-bone{opacity:0 !important}/* Joint nodes become faint natural crease rings rather than bead joints. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-joint{display:block;fill:transparent !important;stroke:rgba(143, 103, 75, .22) !important;stroke-width:1.05px !important;r:5.0;opacity:.52}/* The old large fingertip ring is replaced by a skin cap + nail. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-tip-node{display:none !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-nail{display:none !important}.capsule-ribbon-segment{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .16s ease,opacity .16s ease,filter .16s ease}/* Tapered overlapping sections create the rounded real-finger silhouette. */.capsule-ribbon-outline.capsule-lower{stroke-width:30px}.capsule-ribbon-outline.capsule-middle{stroke-width:25px}.capsule-ribbon-outline.capsule-upper{stroke-width:19.5px}.capsule-ribbon-body.capsule-lower{stroke-width:25.5px}.capsule-ribbon-body.capsule-middle{stroke-width:20px}.capsule-ribbon-body.capsule-upper{stroke-width:15.5px}.capsule-ribbon-highlight.capsule-lower{stroke-width:6.8px}.capsule-ribbon-highlight.capsule-middle{stroke-width:5.1px}.capsule-ribbon-highlight.capsule-upper{stroke-width:4.2px}.capsule-ribbon-outline{stroke:var(--capsule-edge);filter:drop-shadow(0 1px 1px rgba(73, 50, 34, .06))}.capsule-ribbon-body{stroke:var(--capsule-skin)}.capsule-ribbon-highlight{stroke:var(--capsule-highlight);opacity:.56}.capsule-ribbon-base{fill:var(--capsule-skin);stroke:var(--capsule-edge);stroke-width:1.7px;opacity:.68}.capsule-ribbon-nail{fill:var(--capsule-nail);stroke:rgba(135, 96, 68, .46);stroke-width:1.25px;opacity:.95;pointer-events:none}/* Active finger: skin remains natural; only the edge becomes instructional. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-base,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .finger-tip-node{stroke:var(--capsule-edge-active) !important;filter:drop-shadow(0 0 3px rgba(37, 99, 235, .14))}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-base,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .finger-tip-node{fill:var(--capsule-skin-active) !important;stroke-color:var(--capsule-edge-active)}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body{stroke:var(--capsule-skin-active)}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-nail{stroke:rgba(37, 99, 235, .72)}/* Correct and wrong feedback preserve the realistic skin body. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-correct .capsule-ribbon-outline,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-correct .capsule-ribbon-base,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-correct .finger-tip-node{stroke:var(--capsule-edge-correct) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-correct .capsule-ribbon-body{stroke:var(--capsule-skin-correct)}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-wrong .capsule-ribbon-outline,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-wrong .capsule-ribbon-base,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-wrong .finger-tip-node{stroke:var(--capsule-edge-wrong) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-wrong .capsule-ribbon-body{stroke:var(--capsule-skin-wrong)}/* Press only the rendered capsule layers; permanent hand transforms remain safe. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-press .capsule-ribbon-segment,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-press .capsule-ribbon-base,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-press .finger-tip-node,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-press .capsule-ribbon-nail{animation:capsuleFingerPress .12s ease;transform-box:fill-box;transform-origin:center bottom}@keyframes capsuleFingerPress{0%{transform:translateY(0)}48%{transform:translateY(3px)}100%{transform:translateY(0)}}/* Thumbs are wider and softer than the other fingers. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-outline.capsule-lower{stroke-width:43px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-outline.capsule-upper{stroke-width:36px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-body.capsule-lower{stroke-width:36px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-body.capsule-upper{stroke-width:29px}/* Dark mode keeps warm skin while increasing edge contrast. */html[data-theme="dark"][data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(204, 171, 141, .16);--capsule-skin-active:rgba(214, 183, 153, .14);--capsule-skin-correct:rgba(97, 171, 116, .20);--capsule-skin-wrong:rgba(190, 124, 124, .20);--capsule-edge:rgba(221, 196, 173, .42);--capsule-highlight:rgba(255, 241, 231, .08);--capsule-nail:rgba(255, 238, 224, .06)}html[data-theme="dark"][data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-nail{stroke:rgba(229, 199, 174, .46)}/* ========================================================== BALANCED SPACEBAR THUMBS v15.7 ========================================================== *//* * The thumb roots are intentionally broader than normal finger roots. * This removes the pinched connection while keeping the thumbs visually * independent from the index fingers. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-thumb-base{stroke-width:1.5px;opacity:.72}/* Keep the thumb highlight proportionate to the wider silhouette. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-highlight.capsule-lower{stroke-width:8.4px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-highlight.capsule-upper{stroke-width:6.8px}/* ========================================================== DOWNWARD SPACEBAR THUMBS v15.8 ========================================================== *//* * Larger thumb roots remain mostly below the visible overlay. * This creates a broad wrist-origin silhouette instead of a narrow * connection to the index fingers. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-thumb-base{opacity:.68;stroke-width:1.35px}/* Keep the larger thumbs softer than the instructional fingers. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-outline{filter:drop-shadow(0 1px 1px rgba(73, 50, 34, .045))}/* ========================================================== FINAL THREE MODES HOTFIX v16.1 ========================================================== */#handsClassicOverlay .classic-finger-motion{transform-origin:center bottom;transition:transform .085s cubic-bezier(.22, .61, .36, 1),opacity .08s ease;will-change:transform}html[data-hand-guidance-style="classic"] #handsClassicOverlay .finger-line{stroke:rgba(112, 118, 128, .80);stroke-width:6.2}html[data-hand-guidance-style="classic"] #handsClassicOverlay .finger-glow{stroke-width:22}html[data-hand-guidance-style="classic"] #handsClassicOverlay .finger.finger-active .finger-glow{stroke:rgba(47, 109, 246, .16)}html[data-hand-guidance-style="articulated"] #handsKeyboardOverlay .articulated-glow{filter:drop-shadow(0 1px 2px rgba(37, 99, 235, .07))}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body{opacity:.90}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline{opacity:.78}/* ========================================================== CENTERED KEYBOARD + OPTIONAL SIDE HANDS v17.0.4 ========================================================== */.typing-controls-grid{display:grid !important;width:100%;max-width:1480px;margin-right:auto;margin-left:auto;gap:18px;align-items:stretch}/* No side panel: remove the unused column and center the keyboard. */html:not([data-show-side-hands="true"]) .typing-controls-grid,html[data-show-side-hands="false"] .typing-controls-grid{grid-template-columns:minmax(0, 1120px) !important;justify-content:center !important}html:not([data-show-side-hands="true"]) .keyboard-guidance-card,html[data-show-side-hands="false"] .keyboard-guidance-card{width:100%;max-width:1120px;justify-self:center}/* Side panel enabled on a wide desktop. */html[data-show-side-hands="true"] .typing-controls-grid{grid-template-columns:minmax(0, 1fr) minmax(300px, 350px) !important;justify-content:center !important}html[data-show-side-hands="true"] .keyboard-guidance-card{width:100%;max-width:none;min-width:0}html[data-show-side-hands="true"] .hands-guidance-card{display:flex !important;min-width:0;padding:18px;flex-direction:column;align-items:stretch;justify-content:center;background:#ffffff;border:1px solid #e5ebf3;border-radius:24px;box-shadow:0 14px 35px rgba(15, 23, 42, .06)}html[data-show-side-hands="false"] .hands-guidance-card,html:not([data-show-side-hands="true"]) .hands-guidance-card,html[data-show-keyboard="false"] .hands-guidance-card{display:none !important}html[data-show-side-hands="true"] #handsContainer{width:100%;max-width:none;min-height:340px;height:auto;margin:0;flex:1 1 auto;overflow:hidden;background:transparent;border:0;border-radius:18px;box-shadow:none}html[data-show-side-hands="true"] .hands-guidance-card > p{margin:10px 0 0;color:#334155;font-size:.88rem;font-weight:700;text-align:center}html[data-theme="dark"][data-show-side-hands="true"] .hands-guidance-card{background:#111a2b;border-color:#2a3a53;box-shadow:0 14px 35px rgba(0, 0, 0, .20)}html[data-theme="dark"][data-show-side-hands="true"] .hands-guidance-card > p{color:#cbd5e1}html[data-theme="dark"][data-show-side-hands="true"] #handsContainer{background:transparent;border:0}html[data-theme="dark"][data-show-side-hands="true"] .hand-palm,html[data-theme="dark"][data-show-side-hands="true"] .finger-segment{fill:#d7b08c;stroke:#9a7454}html[data-theme="dark"][data-show-side-hands="true"] .hand-wrist,html[data-theme="dark"][data-show-side-hands="true"] .finger-tip{fill:#c99e79;stroke:#9a7454}/* Never squeeze the calibrated keyboard on narrower screens. */@media (max-width: 1240px){html[data-show-side-hands="true"] .typing-controls-grid{grid-template-columns:minmax(0, 1120px) !important}html[data-show-side-hands="true"] .keyboard-guidance-card,html[data-show-side-hands="true"] .hands-guidance-card{width:100%;max-width:1120px;justify-self:center}html[data-show-side-hands="true"] #handsContainer{min-height:300px}}@media (max-width: 760px){html[data-show-side-hands] .hands-guidance-card{display:none !important}.typing-controls-grid{display:block !important}}/* ========================================================== SIDE HANDS HIGHLIGHT FIX v17.0.5 ========================================================== *//* * These final scoped rules deliberately use higher specificity than the * resting light/dark hand colors. This ensures the separate hand panel * visibly changes for expected, correct and wrong fingers in every theme. */#handsContainer .side-hand-finger.finger-active{opacity:1 !important;filter:drop-shadow( 0 5px 8px rgba(37, 99, 235, .42) ) !important}#handsContainer .side-hand-finger.finger-active .finger-segment,#handsContainer .side-hand-finger.finger-active .finger-tip{fill:rgba(108, 174, 255, .92) !important;stroke:#2563eb !important;stroke-width:3.2px !important}#handsContainer .side-hand-finger.finger-correct{opacity:1 !important;filter:drop-shadow( 0 5px 8px rgba(22, 163, 74, .40) ) !important}#handsContainer .side-hand-finger.finger-correct .finger-segment,#handsContainer .side-hand-finger.finger-correct .finger-tip{fill:rgba(134, 239, 172, .94) !important;stroke:#16a34a !important;stroke-width:3.2px !important}#handsContainer .side-hand-finger.finger-wrong{opacity:1 !important;filter:drop-shadow( 0 5px 8px rgba(239, 68, 68, .42) ) !important}#handsContainer .side-hand-finger.finger-wrong .finger-segment,#handsContainer .side-hand-finger.finger-wrong .finger-tip{fill:rgba(252, 165, 165, .94) !important;stroke:#ef4444 !important;stroke-width:3.2px !important}/* Preserve readable highlights in Dark and System-dark modes. */html[data-theme="dark"] #handsContainer .side-hand-finger.finger-active .finger-segment,html[data-theme="dark"] #handsContainer .side-hand-finger.finger-active .finger-tip{fill:rgba(98, 160, 255, .86) !important;stroke:#8bb8ff !important}@media (prefers-color-scheme: dark){html[data-theme="system"] #handsContainer .side-hand-finger.finger-active .finger-segment,html[data-theme="system"] #handsContainer .side-hand-finger.finger-active .finger-tip{fill:rgba(98, 160, 255, .86) !important;stroke:#8bb8ff !important}}/* ========================================================== CAPSULE FRONT-LAYER FIX v17.0.8 ========================================================== *//* * Capsule fingers must visually sit above keyboard key surfaces. * * The keyboard container previously created its own stacking context. * That made the translucent capsule fingers appear behind the key faces, * especially on the highlighted target key. * * In Capsule mode: * 1. key backgrounds remain below the hand overlay; * 2. the capsule fingers render above the key surfaces and borders; * 3. key characters and home bumps remain above the translucent fingers. */html[data-hand-guidance-style="capsule"] .keyboard-guidance-card{position:relative;isolation:isolate}html[data-hand-guidance-style="capsule"] #keyboardContainer{position:relative;z-index:auto !important}html[data-hand-guidance-style="capsule"] #keyboardContainer .key{position:relative;z-index:auto !important}/* Finger artwork is above the physical key faces. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{z-index:20 !important}/* * Key text remains readable above the translucent hand artwork. * The parent key itself does not create a stacking context, so these * positive-z-index labels can sit above the overlay. */html[data-hand-guidance-style="capsule"] #keyboardContainer .key-primary{position:relative;z-index:24 !important}/* Secondary characters and home-row bumps must preserve their original key placement. */html[data-hand-guidance-style="capsule"] #keyboardContainer .key-secondary{position:absolute;z-index:24 !important}html[data-hand-guidance-style="capsule"] #keyboardContainer .home-bump{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);z-index:24 !important}/* Keep the target-row guide above every keyboard hand mode. */html[data-hand-guidance-style="capsule"] #targetRowGuide{z-index:30 !important}/* * A slightly clearer warm edge gives the transparent capsule fingers a * visible front surface without making the skin body heavy or opaque. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline{opacity:.90 !important;filter:drop-shadow( 0 1px 1px rgba(84, 62, 44, .10) )}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body{opacity:.92 !important}/* * The active finger stays translucent, but its edge is sufficiently visible * over the blue expected-key surface. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-edge-active:rgba(77, 137, 255, .55)}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline{filter:drop-shadow( 0 0 4px rgba(77, 137, 255, .20) ) !important}/* * Keep the expected key lighter in Capsule mode so the moving finger remains * the primary teaching cue while its character stays fully readable. */html[data-hand-guidance-style="capsule"] #keyboardContainer .key-next{background:rgba(47, 103, 246, .14) !important;border-color:rgba(79, 139, 255, .72) !important;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .28),0 0 0 3px rgba(47, 103, 246, .09) !important}html[data-theme="dark"] [data-hand-guidance-style="capsule"] #keyboardContainer .key-next{background:rgba(79, 139, 255, .16) !important;border-color:rgba(112, 169, 255, .74) !important}/* The other two modes retain their existing calibrated stacking. *//* ========================================================== RIGHT-HAND CENTERING + THICKER CAPSULE FINGERS v17.1.10 ========================================================== *//* * Capsule mode only: make both hands slightly fuller so the overlay feels * visually balanced with the classic and articulated modes. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline.capsule-lower{stroke-width:33px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline.capsule-middle{stroke-width:27.5px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline.capsule-upper{stroke-width:21.5px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body.capsule-lower{stroke-width:28px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body.capsule-middle{stroke-width:22.5px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body.capsule-upper{stroke-width:17.2px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-highlight.capsule-lower{stroke-width:7.4px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-highlight.capsule-middle{stroke-width:5.7px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-highlight.capsule-upper{stroke-width:4.7px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-outline.capsule-lower{stroke-width:47px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-outline.capsule-upper{stroke-width:39px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-body.capsule-lower{stroke-width:40px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-body.capsule-upper{stroke-width:32px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-highlight.capsule-lower{stroke-width:9.1px}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-thumb .capsule-ribbon-highlight.capsule-upper{stroke-width:7.3px}/* ========================================================== v17.8.64 — Capsule + Articulated hand polish Refine the two premium hand styles only. ========================================================== */#handsKeyboardOverlay .articulated-finger,#handsKeyboardOverlay .articulated-thumb{filter:drop-shadow(0 1px 1px rgba(15,23,42,.06))}#handsKeyboardOverlay .articulated-finger .finger-bone,#handsKeyboardOverlay .articulated-finger .articulated-glow,#handsKeyboardOverlay .capsule-ribbon-outline,#handsKeyboardOverlay .capsule-ribbon-body{stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}#handsKeyboardOverlay .articulated-finger .finger-bone{stroke-width:6.1;opacity:.94}#handsKeyboardOverlay .articulated-finger .finger-joint{r:5.15px;filter:drop-shadow(0 1px 1px rgba(15,23,42,.05))}#handsKeyboardOverlay .articulated-finger .finger-tip-node{r:6.8px;filter:drop-shadow(0 1px 1px rgba(15,23,42,.06))}#handsKeyboardOverlay .articulated-finger .articulated-glow{opacity:.34}#handsKeyboardOverlay .articulated-finger.finger-active .finger-bone{stroke-width:6.9}#handsKeyboardOverlay .articulated-finger.finger-active .finger-joint,#handsKeyboardOverlay .articulated-finger.finger-active .finger-tip-node{filter:drop-shadow(0 0 4px rgba(47,109,246,.14))}#handsKeyboardOverlay .articulated-finger.finger-correct .finger-joint,#handsKeyboardOverlay .articulated-finger.finger-correct .finger-tip-node{filter:drop-shadow(0 0 4px rgba(22,163,74,.12))}#handsKeyboardOverlay .articulated-finger.finger-wrong .finger-joint,#handsKeyboardOverlay .articulated-finger.finger-wrong .finger-tip-node{filter:drop-shadow(0 0 4px rgba(220,38,38,.12))}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-base{filter:drop-shadow(0 1px 2px rgba(92,65,44,.10))}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(238,223,206,.48) !important;--capsule-skin-active:rgba(238,223,206,.56) !important;--capsule-edge:rgba(165,133,103,.60) !important;--capsule-edge-active:rgba(65,126,245,.74) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body{opacity:.98 !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline{opacity:.98 !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-base{opacity:.96 !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-nail{opacity:.58}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline{filter:drop-shadow(0 0 6px rgba(65,126,245,.18))}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body{filter:brightness(1.03)}html[data-theme="dark"] #handsKeyboardOverlay .articulated-finger,html[data-theme="dark"] #handsKeyboardOverlay .articulated-thumb{filter:drop-shadow(0 1px 2px rgba(2,6,23,.22))}html[data-theme="dark"][data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(203,156,118,.36) !important;--capsule-skin-active:rgba(215,168,127,.42) !important;--capsule-edge:rgba(206,183,160,.60) !important;--capsule-edge-active:rgba(106,161,255,.82) !important}/* Source: /css/keyboard.css */#keyboardContainer{width:100%;max-width:1120px;margin:20px auto 40px;padding:22px;background:#fff;border-radius:26px;box-shadow:0 12px 35px rgba(0, 0, 0, .08)}.keyboard-row{display:flex;gap:8px}.key{position:relative;flex:1;min-width:52px;height:66px;background:#ffffff;border:1px solid #D9E0E8;border-radius:10px;box-shadow:0 1px 2px rgba(0, 0, 0, .06),0 6px 14px rgba(0, 0, 0, .05);display:flex;justify-content:center;align-items:flex-end;padding-bottom:10px;transition:.075s;cursor:default}.key:hover{transform:translateY(-2px)}.key-primary{font-size:18px;font-weight:600;color:#1F2937}.key-secondary{position:absolute;top:8px;left:8px;font-size:11px;color:#7A8796}.home-bump{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:20px;height:3px;border-radius:2px;background:#555}.key-next{background:#2F67F6;color:#fff;border-color:#2F67F6;box-shadow:0 0 0 4px rgba(47, 103, 246, .15)}.key-pressed{transform:translateY(3px)}.key-correct{background:#22C55E;border-color:#22C55E}.key-correct .key-primary,.key-correct .key-secondary{color:#fff}.key-correct .home-bump{background:#fff}.key-wrong{background:#EF4444;border-color:#EF4444}.key-wrong .key-primary,.key-wrong .key-secondary{color:#fff}.key-wrong .home-bump{background:#fff}/* ========================================================== LARGER KEYBOARD TEXT v6.2 ========================================================== *//* * Increase key-label readability without changing key widths * or the responsive keyboard layout. */.key-primary{font-size:clamp(13px, 1.12vw, 18px);font-weight:800;line-height:1}.key-secondary{font-size:clamp(8px, .78vw, 12px);font-weight:700;line-height:1}/* Laptop */@media (max-width: 1100px){.key-primary{font-size:14px}.key-secondary{font-size:9px}}/* Tablet */@media (max-width: 760px){.key-primary{font-size:12px}.key-secondary{font-size:8px}}/* Small mobile */@media (max-width: 460px){.key-primary{font-size:9px}}/* Source: /css/keyboard-types.css *//* ========================================================== TypingTutor.Online Stable ANSI Keyboard Layout v17.0.3 File: css/keyboard-types.css ========================================================== */#keyboardContainer{--keyboard-type-max-width:1120px;--keyboard-type-padding:22px;--keyboard-type-key-height:66px;--keyboard-type-row-gap:8px;max-width:var(--keyboard-type-max-width);padding:var(--keyboard-type-padding)}#keyboardContainer .keyboard-row{gap:var(--keyboard-type-row-gap)}#keyboardContainer .keyboard-row + .keyboard-row{margin-top:var(--keyboard-type-row-gap)}#keyboardContainer .keyboard-key-spacer{min-width:0;pointer-events:none}#keyboardContainer .key{height:var(--keyboard-type-key-height);min-width:0}#keyboardContainer .key-primary{white-space:nowrap}#keyboardContainer[data-keyboard-type="ansi-us"]{--keyboard-type-max-width:1120px}/* Dark mode inherits the existing keyboard palette. */html[data-theme="dark"] #keyboardContainer[data-keyboard-type]{color-scheme:dark}/* Reduced motion */html[data-reduced-motion="true"] #keyboardContainer .key{transition:none !important}@media (max-width: 1100px){#keyboardContainer{--keyboard-type-padding:16px;--keyboard-type-row-gap:6px}}@media (max-width: 760px){/* * The tutor already hides its full on-screen keyboard on mobile. * These values keep the engine safe if that preference is changed. */#keyboardContainer{--keyboard-type-padding:10px;--keyboard-type-row-gap:4px;--keyboard-type-key-height:50px}}/* ========================================================== STABLE US ANSI PRODUCTION LAYOUT v17.0.3 ========================================================== *//* * The production keyboard and all three hand-guidance modes are calibrated * together at this width. The keyboard remains centered and the card does * not reserve unused space for an experimental compact layout. */html[data-keyboard-type="ansi-us"] #keyboardContainer,#keyboardContainer[data-keyboard-type="ansi-us"]{width:100%;max-width:1120px;margin-right:auto;margin-left:auto}html[data-keyboard-type="ansi-us"] .keyboard-guidance-card{--active-keyboard-width:1120px}/* Source: /css/lesson.css *//** * ========================================================== * TypingTutor.Online * Compact Lesson Information Bar v3.4 * File: css/lesson.css * ========================================================== */#courseModePanel{box-sizing:border-box;width:min(1480px, calc(100% - 34px));margin:0 auto}.lesson-information-card,.typing-practice-card,.statistics-panel,.lesson-controls-card,.keyboard-guidance-card,.hands-guidance-card{background:var(--surface, #ffffff);border:1px solid #e7ebf2;box-shadow:0 14px 38px rgba(15, 23, 42, 0.06)}/* ========================================================== COMPACT LESSON INFORMATION BAR ========================================================== */.lesson-information-card{display:grid;grid-template-columns:minmax(250px, 1.15fr) minmax(410px, 1.55fr) minmax(330px, 1.15fr);gap:12px;align-items:center;min-height:92px;margin:12px 0 14px;padding:12px 14px;border-radius:16px}.lesson-identity{display:grid;grid-template-columns:58px minmax(0, 1fr);gap:12px;align-items:center;min-width:0}.lesson-book-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg, #f8faff, #edf3ff);font-size:27px}.lesson-count{display:block;margin-bottom:3px;color:#172033;font-size:12px;font-weight:800}#lessonTitle{margin:0;color:#1260f5;font-family:"Poppins",sans-serif;font-size:clamp(16px, 1.2vw, 20px);line-height:1.2}#lessonDescription{margin:6px 0 0;overflow:hidden;color:#475569;font-size:11px;line-height:1.4;white-space:nowrap;text-overflow:ellipsis}/* ========================================================== COMPACT META CARDS ========================================================== */.lesson-meta-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px}.lesson-meta-card{display:grid;align-content:center;min-height:66px;padding:8px 7px;text-align:center;border:1px solid #e3e8f0;border-radius:10px;background:linear-gradient(180deg, #fafbfe, #f5f7fb)}.lesson-meta-card > span{color:#64748b;font-size:8px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase}.lesson-meta-card strong{margin-top:4px;color:#0f172a;font-size:16px;line-height:1}.lesson-meta-card small{margin-top:5px;overflow:hidden;color:#475569;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.meta-time{display:inline-flex;justify-content:center;gap:4px;align-items:center}.lesson-info-progress-track{overflow:hidden;height:6px;margin-top:8px;border-radius:999px;background:#dfe5ef}#lessonInfoProgressFill{width:0;height:100%;border-radius:inherit;background:#1769ff;transition:width .2s ease}/* ========================================================== COMPACT ADVICE ========================================================== */.lesson-advice-panel{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;min-height:66px;padding:9px 11px;border:1px solid #f3dfb3;border-radius:12px;background:linear-gradient(135deg, #fffdf8, #fff8ea)}.lesson-advice-panel p{display:grid;grid-template-columns:17px auto 1fr;gap:3px;align-items:start;margin:0;overflow:hidden;color:#111827;font-size:9px;line-height:1.35}.lesson-advice-panel p > span:first-child{font-size:12px}.lesson-advice-panel p > span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}/* ========================================================== PRACTICE AREA ========================================================== */.lesson-practice-grid{display:grid;grid-template-columns:minmax(0, 1fr) 176px;gap:14px;align-items:stretch}.typing-practice-card{min-width:0;overflow:hidden;border-radius:20px}.practice-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:56px;padding:10px 18px}.stage-label,.time-left{display:inline-flex;align-items:center;gap:8px;color:#1f2937;font-size:13px}.time-left{justify-self:center;color:#1769ff;font-size:15px;font-weight:600}.quiet-button{justify-self:end;padding:10px 15px;color:#334155;background:#ffffff;border:1px solid #dce3ed;border-radius:11px;font-weight:600;cursor:pointer}.quiet-button:hover{border-color:#1769ff;color:#1769ff}#lessonText{box-sizing:border-box;height:255px;min-height:255px;max-height:255px;overflow-x:hidden;overflow-y:hidden;padding:30px 28px 44px;color:#172033;outline:none;border-top:1px solid #e4e9f1;border-bottom:1px solid #e4e9f1;background:linear-gradient(180deg, rgba(248, 250, 252, .7), transparent 16%, transparent 84%, rgba(248, 250, 252, .7)),#ffffff;font-family:"JetBrains Mono",monospace;font-size:clamp(20px, 2vw, 28px);font-weight:500;line-height:2.1;letter-spacing:.11em;white-space:pre-wrap;overflow-wrap:break-word;scroll-behavior:smooth;scrollbar-width:none}#lessonText::-webkit-scrollbar{display:none}.lesson-character{position:relative;display:inline;border-radius:5px;transition:color .12s ease,background .12s ease,box-shadow .12s ease}.future-character{color:#172033}.typed-character{color:#18a85b}.wrong-character{color:#e11d48;background:rgba(225, 29, 72, .11);box-shadow:inset 0 -3px 0 #e11d48}.current-character{z-index:2;color:#ffffff;background:#1769ff;box-shadow:0 4px 15px rgba(23, 105, 255, .28)}.lesson-paused #lessonText{opacity:.45;filter:blur(1px)}.lesson-paused .typing-practice-card{position:relative}.lesson-paused .typing-practice-card::after{content:attr(data-pause-message);position:absolute;inset:60px 0 54px;z-index:5;display:grid;place-items:center;color:#0f172a;font-size:18px;font-weight:800;pointer-events:none}.practice-footer{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;padding:0 18px 14px}.character-progress-wrap{min-width:0;color:#475569;font-size:12px}.character-progress-track{overflow:hidden;height:3px;margin-bottom:10px;border-radius:999px;background:#e2e8f0}#progressFill{width:0;height:100%;background:#22c55e;transition:width .2s ease}.practice-footer-actions{display:flex;gap:18px;align-items:center;color:#475569;font-size:12px}.error-summary{color:#dc2626}.text-button{padding:4px;color:#334155;background:transparent;border:0;font-weight:700;cursor:pointer}.statistics-panel{display:grid;grid-template-columns:1fr;gap:8px;padding:10px;border-radius:16px}.statistics-panel .stat{display:flex;align-items:center;justify-content:space-between;min-height:49px;padding:8px 10px;border:1px solid #dfe5ee;border-radius:13px;background:#ffffff}.statistics-panel .label{color:#52617a;font-size:9px;font-weight:700;text-transform:uppercase}.statistics-panel .stat > span:last-child{color:#1769ff;font-size:22px;font-weight:800}.statistics-panel .stat:nth-child(2) > span:last-child{color:#16a34a}.statistics-panel .stat:nth-child(3) > span:last-child{color:#dc2626}.typing-controls-grid{display:grid;grid-template-columns:220px minmax(0, 1fr) 315px;gap:14px;align-items:stretch;margin-top:16px}.lesson-controls-card,.keyboard-guidance-card,.hands-guidance-card{border-radius:20px}.lesson-controls-card{display:grid;align-content:start;gap:12px;padding:18px}.control-button{min-height:49px;border-radius:11px;font-size:15px;font-weight:800;cursor:pointer}.pause-button{color:#ffffff;border:0;background:linear-gradient(135deg, #1769ff, #0f5ce5);box-shadow:0 10px 22px rgba(23, 105, 255, .23)}.end-button{color:#ef4444;border:1px solid #ef4444;background:#ffffff}.auto-advance-option{position:relative;display:grid;grid-template-columns:1fr 38px;gap:10px;align-items:center;margin-top:14px;color:#1f2937;font-size:12px;line-height:1.45;cursor:pointer}.auto-advance-option input{position:absolute;opacity:0}.toggle-track{position:relative;width:36px;height:21px;border-radius:999px;background:#cbd5e1;transition:background .18s ease}.toggle-track::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#ffffff;box-shadow:0 2px 6px rgba(15, 23, 42, .2);transition:transform .18s ease}.auto-advance-option input:checked + .toggle-track{background:#1769ff}.auto-advance-option input:checked + .toggle-track::after{transform:translateX(15px)}.keyboard-tip-button{margin-top:10px;min-height:44px;padding:8px 10px;color:#1769ff;border:1px solid #dce3ed;border-radius:11px;background:#ffffff;font-weight:700;cursor:pointer}.keyboard-guidance-card{min-width:0;padding:14px 14px 12px}#keyboardContainer{box-sizing:border-box;width:100%;margin:0;padding:0;overflow:visible;border:0;border-radius:0;box-shadow:none}.home-row-guide{display:flex;justify-content:center;gap:6px;align-items:center;margin-top:10px;color:#1f2937;font-size:12px}.home-row-guide span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:6px;background:#f1f5f9}.home-row-guide .active-home-key,.keyboard-tips-visible .home-row-guide span:nth-of-type(5){color:#ffffff;background:#1769ff}.hands-guidance-card{display:grid;grid-template-rows:1fr auto;min-width:0;padding:10px}#handsContainer{width:100%;height:230px;margin:0;padding:0;overflow:hidden;border:0;border-radius:50%;background:radial-gradient(circle, rgba(241, 245, 249, .72), rgba(248, 250, 252, .35));box-shadow:none}.hands-guidance-card p{margin:2px 0 6px;text-align:center;color:#1f2937;font-size:12px;font-weight:700}.full-text-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(15, 23, 42, .72);backdrop-filter:blur(5px)}.full-text-modal.hidden{display:none}.full-text-card{width:min(800px, 100%);max-height:80vh;overflow:auto;padding:22px;border-radius:18px;background:#ffffff}.full-text-heading{display:flex;align-items:center;justify-content:space-between}.full-text-heading h2{margin:0}#closeFullTextButton{width:40px;height:40px;border:0;border-radius:50%;background:#eef2f7;font-size:25px;cursor:pointer}#fullLessonText{margin:20px 0 0;white-space:pre-wrap;color:#334155;font:16px/1.8 "JetBrains Mono",monospace}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}@media (max-width: 1250px){.lesson-information-card{grid-template-columns:minmax(250px, 1fr) minmax(390px, 1.45fr)}.lesson-advice-panel{grid-column:1/-1;grid-template-columns:repeat(4, 1fr);min-height:0}.typing-controls-grid{grid-template-columns:200px minmax(0, 1fr)}.hands-guidance-card{grid-column:1/-1;width:min(420px, 100%);justify-self:center}}@media (max-width: 900px){#courseModePanel{width:min(100% - 18px, 800px)}.lesson-information-card{grid-template-columns:1fr}.lesson-meta-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}.lesson-advice-panel{grid-template-columns:1fr 1fr}.lesson-practice-grid{grid-template-columns:1fr}.statistics-panel{grid-template-columns:repeat(5, minmax(0, 1fr))}.statistics-panel .stat{display:grid;justify-items:center;min-width:0;padding:9px 5px}.typing-controls-grid{grid-template-columns:1fr}.lesson-controls-card{grid-template-columns:1fr 1fr}.auto-advance-option,.keyboard-tip-button{margin-top:0}}@media (max-width: 650px){.lesson-information-card{padding:11px}.lesson-identity{grid-template-columns:48px 1fr}.lesson-book-icon{width:46px;height:46px;font-size:23px}#lessonDescription{display:none}.lesson-meta-grid{grid-template-columns:repeat(2, 1fr)}.lesson-advice-panel{grid-template-columns:1fr}.practice-toolbar{grid-template-columns:1fr auto}.time-left{justify-self:end}.quiet-button{grid-column:1/-1;width:100%}#lessonText{height:225px;min-height:225px;max-height:225px;padding:25px 16px 38px;font-size:18px;letter-spacing:.06em}.statistics-panel{grid-template-columns:repeat(2, 1fr)}.statistics-panel .stat:last-child{grid-column:1/-1}.lesson-controls-card{grid-template-columns:1fr}.home-row-guide{flex-wrap:wrap}}@media (prefers-reduced-motion: reduce){#lessonText,#progressFill,#lessonInfoProgressFill,.lesson-character{scroll-behavior:auto;transition:none}}/* ========================================================== COMPACT LIVE STATISTICS v3.4 ========================================================== */@media (min-width: 901px){.lesson-practice-grid{grid-template-columns:minmax(0, 1fr) clamp(158px, 11.5vw, 176px)}.statistics-panel{gap:6px;padding:9px;border-radius:16px}.statistics-panel .stat{min-height:47px;padding:7px 9px;border-radius:10px}.statistics-panel .label{font-size:8px;letter-spacing:0.04em}.statistics-panel .stat > span:last-child{font-size:17px}}/* ========================================================== AUTOMATIC INACTIVITY PAUSE v4.3 ========================================================== */.lesson-paused .typing-practice-card::after{padding:20px;text-align:center;white-space:normal;line-height:1.45}.lesson-paused .typing-practice-card[data-pause-message]::after{content:attr(data-pause-message)}/* ========================================================== FOCUS LESSON BAR v4.4 ========================================================== */.lesson-focus-bar{position:relative;display:grid;grid-template-columns:minmax(230px, 1.1fr) minmax(480px, 2fr) auto;gap:12px;align-items:center;min-height:54px;margin:8px 0 10px;padding:7px 9px 7px 12px;background:var(--surface, #ffffff);border:1px solid var(--border-soft, #e7ebf2);border-radius:14px;box-shadow:0 8px 24px rgba(15, 23, 42, .05)}.lesson-focus-main{display:grid;grid-template-columns:40px minmax(0, 1fr);gap:9px;align-items:center;min-width:0}.lesson-focus-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--surface-alt, #eef4ff);font-size:19px}.lesson-focus-title{min-width:0}.lesson-focus-title > span{display:block;color:var(--text-light, #475569);font-size:9px;font-weight:800}.lesson-focus-title h2{margin:2px 0 0;overflow:hidden;color:var(--primary, #1769ff);font-family:var(--font-heading, "Poppins", sans-serif);font-size:15px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}.lesson-focus-meta{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}.lesson-focus-meta > span{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:5px 7px;color:var(--text-light, #475569);background:var(--surface-alt, #f8fafc);border:1px solid var(--border-soft, #e3e8f0);border-radius:8px;font-size:9px;white-space:nowrap}.lesson-focus-meta strong{color:var(--text-muted, #64748b);font-size:7px;letter-spacing:.04em;text-transform:uppercase}.lesson-focus-meta b{color:var(--text, #0f172a);font-size:10px}.lesson-focus-progress{display:grid !important;grid-template-columns:auto auto;min-width:110px}.lesson-focus-track{grid-column:1/-1;display:block;overflow:hidden;width:100%;height:4px;margin-top:2px;border-radius:999px;background:var(--border-soft, #dfe5ef)}#lessonInfoProgressFill{display:block;width:0;height:100%;border-radius:inherit;background:var(--primary, #1769ff)}.lesson-tips-button{min-width:94px;min-height:34px;padding:6px 10px;color:var(--primary, #1769ff);background:var(--surface, #ffffff);border:1px solid var(--border, #dce3ed);border-radius:9px;font-size:10px;font-weight:800;cursor:pointer}.lesson-tips-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:7px;padding:9px;background:color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--surface, #ffffff));border:1px solid color-mix(in srgb, var(--warning, #f59e0b) 30%, var(--border, #dce3ed));border-radius:10px}.lesson-tips-panel[hidden]{display:none !important}.lesson-tips-panel p{display:grid;grid-template-columns:16px auto 1fr;gap:3px;align-items:start;margin:0;min-width:0;color:var(--text, #111827);font-size:9px;line-height:1.4}.lesson-tips-panel p span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lesson-description-line{grid-column:1/-1}.hidden-metadata{display:none}@media (max-width: 1100px){.lesson-focus-bar{grid-template-columns:minmax(210px, 1fr) minmax(350px, 1.7fr) auto}.lesson-focus-meta > span:nth-child(2),.lesson-focus-meta > span:nth-child(3){display:none}}@media (max-width: 800px){.lesson-focus-bar{grid-template-columns:1fr auto}.lesson-focus-meta{grid-column:1/-1;justify-content:flex-start;overflow-x:auto}.lesson-tips-panel{grid-template-columns:1fr 1fr}}@media (max-width: 520px){.lesson-focus-main{grid-template-columns:34px minmax(0, 1fr)}.lesson-focus-icon{width:32px;height:32px;font-size:16px}.lesson-focus-title h2{font-size:13px}.lesson-tips-panel{grid-template-columns:1fr}}/* ========================================================== COMPACT LIVE STATISTICS v4.6 ========================================================== */@media (min-width: 901px){.lesson-practice-grid{grid-template-columns:minmax(0, 1fr) clamp(158px, 11.5vw, 176px)}.statistics-panel{gap:6px;padding:9px;border-radius:16px}.statistics-panel .stat{min-height:47px;padding:7px 9px;border-radius:10px}.statistics-panel .label{font-size:8px;letter-spacing:0.04em}.statistics-panel .stat > span:last-child{font-size:17px}}/* ========================================================== AUTOMATIC INACTIVITY PAUSE v4.6 ========================================================== */.lesson-paused .typing-practice-card::after{content:attr(data-pause-message);padding:20px;text-align:center;white-space:normal;line-height:1.45}.lesson-paused .typing-practice-card[data-pause-message]::after{content:attr(data-pause-message)}/* ========================================================== DYNAMIC TARGET ROW GUIDE v4.6 ========================================================== */.target-row-guide{display:flex;justify-content:center;align-items:center;gap:7px;min-width:0;margin-top:10px;color:var(--text, #1f2937);font-size:11px}.target-row-guide > strong{flex:0 0 auto;color:var(--text, #1f2937);font-size:11px}.target-row-keys{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}.target-row-key{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;color:var(--text-light, #475569);background:var(--surface-alt, #f1f5f9);border:1px solid var(--border-soft, #e5eaf1);border-radius:5px;font-size:9px;font-weight:700;line-height:1;transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}.target-row-key-active{color:#ffffff;background:var(--primary, #1769ff);border-color:var(--primary, #1769ff);box-shadow:0 0 0 3px rgba(23, 105, 255, .13);transform:translateY(-1px)}html[data-theme="dark"] .target-row-key{color:var(--text-light);background:var(--surface-alt);border-color:var(--border)}html[data-theme="dark"] .target-row-key-active{color:#ffffff;background:var(--primary);border-color:#75a5ff}@media (prefers-color-scheme: dark){html[data-theme="system"] .target-row-key{color:var(--text-light);background:var(--surface-alt);border-color:var(--border)}html[data-theme="system"] .target-row-key-active{color:#ffffff;background:var(--primary);border-color:#75a5ff}}@media (max-width: 650px){.target-row-guide{align-items:flex-start;flex-direction:column;gap:5px}.target-row-keys{justify-content:flex-start}.target-row-key{min-width:20px;height:20px;padding-inline:4px;font-size:8px}}@media (prefers-reduced-motion: reduce){.target-row-key{transition:none}}/* ========================================================== ATTRACTIVE LESSON ROW BUTTONS v4.7 Keeps the same compact size, but improves appearance. ========================================================== */.lesson-meta-card{position:relative;overflow:hidden;min-height:66px;padding:8px 8px;border:1px solid #dde6f2;border-radius:12px;background:linear-gradient(180deg, #ffffff 0%, #f7faff 100%);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.92),0 6px 14px rgba(15, 23, 42, 0.05);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.lesson-meta-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:12px 12px 0 0;background:#1769ff}.lesson-meta-card::after{content:"";position:absolute;right:-14px;top:-14px;width:42px;height:42px;border-radius:50%;background:rgba(23, 105, 255, 0.08);pointer-events:none}.lesson-meta-card > span{position:relative;z-index:1;color:#64748b;font-size:8px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase}.lesson-meta-card strong{position:relative;z-index:1;margin-top:4px;color:#0f172a;font-size:16px;line-height:1.05;font-weight:800}.lesson-meta-card small{position:relative;z-index:1;margin-top:5px;color:#526277;font-size:9px;font-weight:600}.lesson-meta-grid .lesson-meta-card:nth-child(1){background:linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);border-color:#dbe7ff}.lesson-meta-grid .lesson-meta-card:nth-child(1)::before{background:linear-gradient(90deg, #3b82f6, #2563eb)}.lesson-meta-grid .lesson-meta-card:nth-child(1)::after{background:rgba(59, 130, 246, 0.10)}.lesson-meta-grid .lesson-meta-card:nth-child(2){background:linear-gradient(180deg, #fcfbff 0%, #f7f3ff 100%);border-color:#e7dcff}.lesson-meta-grid .lesson-meta-card:nth-child(2)::before{background:linear-gradient(90deg, #8b5cf6, #7c3aed)}.lesson-meta-grid .lesson-meta-card:nth-child(2)::after{background:rgba(139, 92, 246, 0.10)}.lesson-meta-grid .lesson-meta-card:nth-child(3){background:linear-gradient(180deg, #fffdf8 0%, #fff8ec 100%);border-color:#f3e0b8}.lesson-meta-grid .lesson-meta-card:nth-child(3)::before{background:linear-gradient(90deg, #f59e0b, #f97316)}.lesson-meta-grid .lesson-meta-card:nth-child(3)::after{background:rgba(245, 158, 11, 0.10)}.lesson-meta-grid .lesson-meta-card:nth-child(4){background:linear-gradient(180deg, #f8fff9 0%, #effcf2 100%);border-color:#d7f0df}.lesson-meta-grid .lesson-meta-card:nth-child(4)::before{background:linear-gradient(90deg, #16a34a, #22c55e)}.lesson-meta-grid .lesson-meta-card:nth-child(4)::after{background:rgba(34, 197, 94, 0.10)}.lesson-meta-grid .lesson-meta-card:nth-child(5){background:linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);border-color:#d7e4fb}.lesson-meta-grid .lesson-meta-card:nth-child(5)::before{background:linear-gradient(90deg, #0ea5e9, #2563eb)}.lesson-meta-grid .lesson-meta-card:nth-child(5)::after{background:rgba(14, 165, 233, 0.10)}.lesson-info-progress-track{overflow:hidden;height:7px;margin-top:8px;border-radius:999px;background:linear-gradient(180deg, #e4ebf5, #dfe6f1);box-shadow:inset 0 1px 2px rgba(15, 23, 42, 0.08)}#lessonInfoProgressFill{border-radius:inherit;background:linear-gradient(90deg, #1769ff 0%, #2f8cff 100%);box-shadow:0 0 10px rgba(23, 105, 255, 0.28)}html[data-theme="dark"] .lesson-meta-card{border-color:#2b3545;background:linear-gradient(180deg, #141d29 0%, #101722 100%);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.02),0 10px 20px rgba(0, 0, 0, 0.20)}html[data-theme="dark"] .lesson-meta-card::after{opacity:0.55}html[data-theme="dark"] .lesson-meta-card > span{color:#8fa0b7}html[data-theme="dark"] .lesson-meta-card strong{color:#f3f7ff}html[data-theme="dark"] .lesson-meta-card small{color:#a6b4c8}html[data-theme="dark"] .lesson-info-progress-track{background:linear-gradient(180deg, #1a2432, #182230)}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-meta-card{border-color:#2b3545;background:linear-gradient(180deg, #141d29 0%, #101722 100%);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.02),0 10px 20px rgba(0, 0, 0, 0.20)}html[data-theme="system"] .lesson-meta-card::after{opacity:0.55}html[data-theme="system"] .lesson-meta-card > span{color:#8fa0b7}html[data-theme="system"] .lesson-meta-card strong{color:#f3f7ff}html[data-theme="system"] .lesson-meta-card small{color:#a6b4c8}html[data-theme="system"] .lesson-info-progress-track{background:linear-gradient(180deg, #1a2432, #182230)}}@media (max-width: 900px){.lesson-meta-card{min-height:64px}}/* ========================================================== EDUCATIONAL META CHIPS v4.8 Attractive, readable, and the same compact row height. ========================================================== */.lesson-focus-meta{gap:8px}.lesson-focus-meta > span{position:relative;overflow:hidden;min-height:34px;padding:6px 10px;border-radius:10px;border:1px solid #dbe6f5;background:linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);box-shadow:inset 0 1px 0 rgba(255, 255, 255, .95),0 5px 12px rgba(15, 23, 42, .05)}.lesson-focus-meta > span::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#2563eb}.lesson-focus-meta > span:nth-child(2){border-color:#e5dcfb;background:linear-gradient(180deg, #ffffff, #f8f4ff)}.lesson-focus-meta > span:nth-child(2)::before{background:#8b5cf6}.lesson-focus-meta > span:nth-child(3){border-color:#f1dfb8;background:linear-gradient(180deg, #fffefa, #fff8ea)}.lesson-focus-meta > span:nth-child(3)::before{background:#f59e0b}.lesson-focus-meta > span:nth-child(4){border-color:#d7eedf;background:linear-gradient(180deg, #fbfffc, #f0fbf3)}.lesson-focus-meta > span:nth-child(4)::before{background:#22c55e}.lesson-focus-meta > span:nth-child(5){border-color:#d9e5fa;background:linear-gradient(180deg, #fbfdff, #eff5ff)}.lesson-focus-meta > span:nth-child(5)::before{background:#0ea5e9}.lesson-focus-meta strong{color:#66758b;font-size:9px;font-weight:800;letter-spacing:.055em}.lesson-focus-meta b{color:#111827;font-size:13px;font-weight:850}.lesson-focus-progress{min-width:132px}.lesson-focus-track{height:5px;margin-top:3px;background:#dfe7f2}#lessonInfoProgressFill{background:linear-gradient(90deg, #1769ff, #39a0ff);box-shadow:0 0 8px rgba(23, 105, 255, .24)}.lesson-tips-button{min-width:110px;min-height:38px;padding:7px 12px;color:#ffffff;border:0;background:linear-gradient(135deg, #2780ff, #1769ff);box-shadow:0 7px 16px rgba(23, 105, 255, .20);font-size:11px;font-weight:800}.lesson-tips-button:hover{background:linear-gradient(135deg, #3690ff, #0f5de8);transform:translateY(-1px)}/* ========================================================== READABLE LIVE STATISTICS v4.8 ========================================================== */@media (min-width: 901px){.lesson-practice-grid{grid-template-columns:minmax(0, 1fr) clamp(170px, 12vw, 190px)}.statistics-panel{gap:7px;padding:10px}.statistics-panel .stat{min-height:54px;padding:9px 11px}.statistics-panel .label{font-size:10px;font-weight:800;letter-spacing:.045em}.statistics-panel .stat > span:last-child{font-size:21px;line-height:1}}/* ========================================================== CLEANER LESSON CONTROLS v4.8 ========================================================== */.lesson-controls-card{min-height:0;align-content:start;padding:14px}.control-button{min-height:45px;font-size:14px}.keyboard-tip-button{min-height:42px;margin-top:2px;font-size:12px;line-height:1.25}/* The old auto-advance toggle was removed from index.html. */.auto-advance-option{display:none !important}/* End Lesson closes the active lesson and returns to lesson selection. */.lesson-closed .lesson-focus-bar,.lesson-closed .lesson-practice-grid,.lesson-closed .typing-controls-grid{display:none !important}/* ========================================================== DARK / SYSTEM THEME ========================================================== */html[data-theme="dark"] .lesson-focus-meta > span{color:var(--text);border-color:#334155;background:linear-gradient(180deg, #172131, #111827);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 7px 16px rgba(0,0,0,.18)}html[data-theme="dark"] .lesson-focus-meta strong{color:#9aabc0}html[data-theme="dark"] .lesson-focus-meta b{color:#f8fafc}html[data-theme="dark"] .lesson-focus-track{background:#273449}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-focus-meta > span{color:var(--text);border-color:#334155;background:linear-gradient(180deg, #172131, #111827);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 7px 16px rgba(0,0,0,.18)}html[data-theme="system"] .lesson-focus-meta strong{color:#9aabc0}html[data-theme="system"] .lesson-focus-meta b{color:#f8fafc}html[data-theme="system"] .lesson-focus-track{background:#273449}}@media (max-width: 1100px){.lesson-focus-meta > span{padding-inline:9px}.lesson-focus-meta strong{font-size:8px}.lesson-focus-meta b{font-size:12px}}/* ========================================================== COMPACT PRACTICE ROW v4.9 ========================================================== *//* * The old Keyboard Tips control was not providing real tips. * It has been removed to keep the learner focused and save space. */.keyboard-tip-button,.auto-advance-option{display:none !important}/* * Stop the left controls card from stretching to the full keyboard * height. The bottom row now uses only the height it actually needs. */.typing-controls-grid{align-items:start;gap:10px;margin-top:10px}.lesson-controls-card{align-self:start;gap:8px;min-height:0;padding:10px;border-radius:15px}.control-button{min-height:40px;border-radius:9px;font-size:13px}.pause-button{box-shadow:0 7px 16px rgba(23, 105, 255, .18)}/* * Reduce empty space around the keyboard while preserving every key. */.keyboard-guidance-card{padding:8px 9px 7px;border-radius:15px}/* * Make the hands panel shorter and keep the illustration centered. */.hands-guidance-card{align-self:stretch;grid-template-rows:minmax(0, 1fr) auto;padding:7px;border-radius:15px}#handsContainer{height:178px;border-radius:18px}.hands-guidance-card p{margin:1px 0 3px;font-size:10px}/* * The guide remains useful, but uses less vertical space. */.target-row-guide{gap:5px;margin-top:5px;font-size:10px}.target-row-guide > strong{font-size:10px}.target-row-keys{gap:3px}.target-row-key{min-width:20px;height:20px;padding:0 4px;font-size:8px}/* * High-specificity light-theme rule: * the expected target key must remain blue with white text. * This also overrides the removed old tips-mode nth-child rule. */html[data-theme="light"] .target-row-guide .target-row-key.target-row-key-active,html:not([data-theme]) .target-row-guide .target-row-key.target-row-key-active{color:#ffffff !important;background:#1769ff !important;border-color:#1769ff !important;box-shadow:0 0 0 3px rgba(23, 105, 255, .14) !important}/* Remove any visual effect from an old cached class. */.keyboard-tips-visible .home-row-guide span:nth-of-type(5){color:inherit;background:inherit}/* Restore the actual expected key after the cached-class reset. */.keyboard-tips-visible .target-row-guide .target-row-key.target-row-key-active{color:#ffffff !important;background:var(--primary, #1769ff) !important;border-color:var(--primary, #1769ff) !important}@media (min-width: 901px){.typing-controls-grid{grid-template-columns:180px minmax(0, 1fr) 245px}}@media (max-width: 1100px){#handsContainer{height:160px}}@media (max-width: 900px){.typing-controls-grid{grid-template-columns:1fr}.lesson-controls-card{grid-template-columns:1fr 1fr}.hands-guidance-card{width:min(360px, 100%);justify-self:center}}/* ========================================================== KEYBOARD CONTROL STRIP v5.0 ========================================================== *//* * Remove the old left-side controls card entirely. * Pause and End Lesson now sit above the keyboard. */.lesson-controls-card{display:none !important}.typing-controls-grid{grid-template-columns:minmax(0, 1fr) 315px;gap:14px;align-items:stretch;margin-top:10px}.keyboard-guidance-card{min-width:0;padding:10px 12px 10px;border-radius:18px}.keyboard-control-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(420px, 100%);margin:0 auto 10px}.keyboard-control-strip .control-button{min-height:40px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:800}.keyboard-control-strip .pause-button{color:#ffffff;border:0;background:linear-gradient( 135deg, #2b7cff, #1769ff );box-shadow:0 7px 16px rgba(23, 105, 255, .20)}.keyboard-control-strip .end-button{color:#ef4444;border:1px solid #ef4444;background:var(--surface, #ffffff)}.keyboard-control-strip .pause-button:hover,.keyboard-control-strip .end-button:hover{transform:translateY(-1px)}/* * Restore comfortable keyboard spacing and keep the card compact * without shrinking the labels into tiny text. */#keyboardContainer{overflow:hidden}.target-row-guide{margin-top:8px}/* * Hands remain beside the keyboard, but no longer inherit the * old three-column control layout. */.hands-guidance-card{width:100%;min-width:0}/* * The actual active Target Row key remains clearly visible. */html[data-theme="light"] .target-row-key.target-row-key-active,html:not([data-theme]) .target-row-key.target-row-key-active{color:#ffffff !important;background:#1769ff !important;border-color:#1769ff !important}@media (max-width: 1250px){.typing-controls-grid{grid-template-columns:minmax(0, 1fr) 270px}.hands-guidance-card{grid-column:auto;width:100%;justify-self:stretch}}@media (max-width: 900px){.typing-controls-grid{grid-template-columns:1fr}.hands-guidance-card{width:min(390px, 100%);justify-self:center}}@media (max-width: 520px){.keyboard-control-strip{grid-template-columns:1fr}}/* ========================================================== FOOTER LESSON CONTROLS v5.1 ========================================================== *//* * Pause and End Lesson now sit inside the lesson footer, * exactly between character progress and Error/Reset. */.practice-footer{grid-template-columns:minmax(150px, 1fr) minmax(300px, 430px) auto;align-items:center;gap:14px;padding:8px 18px 12px}.practice-footer-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:430px;justify-self:center}.practice-footer-controls .control-button{min-height:38px;padding:7px 14px;border-radius:9px;font-size:12px;font-weight:800}.practice-footer-controls .pause-button{color:#ffffff;border:0;background:linear-gradient( 135deg, #2d7fff, #1769ff );box-shadow:0 6px 14px rgba(23, 105, 255, .18)}.practice-footer-controls .end-button{color:#ef4444;border:1px solid #ef4444;background:var(--surface, #ffffff)}.practice-footer-controls .control-button:hover{transform:translateY(-1px)}.character-progress-wrap{align-self:center}.practice-footer-actions{align-self:center;white-space:nowrap}/* * Since controls moved out of the keyboard card, remove the old * space reserved for the strip. */.keyboard-control-strip{display:none !important}.keyboard-guidance-card{padding-top:10px}/* Responsive footer controls */@media (max-width: 1000px){.practice-footer{grid-template-columns:minmax(120px, 1fr) minmax(260px, 360px) auto;gap:10px}}@media (max-width: 760px){.practice-footer{grid-template-columns:1fr auto}.practice-footer-controls{grid-column:1/-1;grid-row:2;max-width:none}}@media (max-width: 480px){.practice-footer{grid-template-columns:1fr}.practice-footer-actions{justify-self:start}.practice-footer-controls{grid-column:1}}/* ========================================================== CENTERED FOOTER CONTROLS v5.2 ========================================================== */.practice-footer{grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);align-items:center}.practice-footer-controls{width:min(430px, 42vw);max-width:430px;justify-self:center}.practice-footer-actions{justify-self:end}.character-progress-wrap{justify-self:start}@media (max-width: 760px){.practice-footer{grid-template-columns:1fr auto}.practice-footer-controls{grid-column:1/-1;grid-row:2;width:100%;max-width:none}}/* ========================================================== SAFE LESSON TEXT POSITION FIX v8.3 ========================================================== *//* * Preserve the complete lesson layout while moving the visible * practice rows slightly upward and keeping the final row clear * of the footer controls. */#lessonText{overflow-x:hidden !important;overflow-y:auto !important;padding-top:14px !important;padding-bottom:34px !important;scroll-padding-top:14px;scroll-padding-bottom:34px;scrollbar-width:none;overscroll-behavior:contain}#lessonText::-webkit-scrollbar{display:none}/* * Remove only the decorative text fades that can partially cover * the first or last visible row. No structural layout rules are * changed here. */.typing-window-shell::before,.typing-window-shell::after{display:none !important}/* Medium-height desktop and laptop screens */@media (max-height: 820px) and (min-width: 761px){#lessonText{padding-top:10px !important;padding-bottom:30px !important}}/* Tablet and mobile */@media (max-width: 760px){#lessonText{padding-top:12px !important;padding-bottom:28px !important}}/* ========================================================== WRONG CURRENT CHARACTER FEEDBACK v8.5 ========================================================== *//* * A wrong key keeps the learner on the same character, so that * character receives both .wrong-character and .current-character. * The normal current-character yellow styling previously overrode * the red error styling. This combined rule makes the error visible. */#lessonText .current-character.wrong-character{color:#ffffff !important;background:#dc2626 !important;box-shadow:0 0 0 4px rgba(220, 38, 38, 0.18),inset 0 -3px 0 #991b1b !important;animation:wrong-character-pulse .42s ease-in-out}@keyframes wrong-character-pulse{0%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}100%{transform:translateX(0)}}html[data-reduced-motion="true"] #lessonText .current-character.wrong-character{animation:none}/* ========================================================== DARK PAUSED LESSON OVERLAY READABILITY v17.2.8 ========================================================== */html[data-theme="dark"] .lesson-paused #lessonText{opacity:.28;filter:blur(1.3px)}html[data-theme="dark"] .lesson-paused .typing-practice-card::after{inset:58px 18px 54px;z-index:5;display:flex;align-items:center;justify-content:center;padding:26px 34px;text-align:center;white-space:normal;line-height:1.55;letter-spacing:0.01em;color:#eff6ff;font-size:21px;font-weight:800;text-shadow:0 2px 14px rgba(0, 0, 0, .55);background:rgba(15, 23, 42, .40);border:1px solid rgba(96, 165, 250, .28);border-radius:18px;backdrop-filter:blur(4px)}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-paused #lessonText{opacity:.28;filter:blur(1.3px)}html[data-theme="system"] .lesson-paused .typing-practice-card::after{inset:58px 18px 54px;z-index:5;display:flex;align-items:center;justify-content:center;padding:26px 34px;text-align:center;white-space:normal;line-height:1.55;letter-spacing:0.01em;color:#eff6ff;font-size:21px;font-weight:800;text-shadow:0 2px 14px rgba(0, 0, 0, .55);background:rgba(15, 23, 42, .40);border:1px solid rgba(96, 165, 250, .28);border-radius:18px;backdrop-filter:blur(4px)}}/* Source: /css/progress.css *//* ========================================================== TypingTutor.Online Lesson Progress v3 ========================================================== */#progressSection{width:1px;height:1px;overflow:hidden}#progressTrack{width:1px;height:1px}#progressText{font-size:1px}/* Source: /css/results.css *//* ========================================================== TypingTutor.Online Lesson Results Screen ========================================================== */.lesson-results-inline{position:relative;inset:auto;z-index:8;display:block;width:100%;padding:18px 20px 20px;background:transparent;backdrop-filter:none}.lesson-results-inline.hidden{display:none}.results-card{width:100%;max-width:none;padding:18px 20px;background-color:#ffffff;border:1px solid #dbe4f0;border-radius:18px;text-align:center;box-shadow:none;animation:resultsCardOpen 0.22s ease}.results-icon{margin-bottom:10px;font-size:52px}.results-card h2{margin:0 0 10px;font-size:32px;color:#0f172a}.results-message{margin:0 0 28px;font-size:16px;color:#64748b}.results-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;margin-bottom:24px}.result-item{padding:20px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}.result-label{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:#64748b}.result-value{display:block;font-size:28px;font-weight:800;color:#2563eb}.result-grade{margin-bottom:26px;font-size:18px;color:#475569}#resultGrade{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin-left:8px;background-color:#dcfce7;border-radius:50%;font-size:21px;color:#15803d}.results-actions{display:flex;justify-content:center;gap:12px}.result-button{min-width:160px;padding:13px 20px;border:0;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:transform 0.15s ease,box-shadow 0.15s ease}.result-button:hover{transform:translateY(-2px)}.primary-button{background-color:#2563eb;color:#ffffff;box-shadow:0 8px 20px rgba(37, 99, 235, 0.25)}.secondary-button{background-color:#e2e8f0;color:#0f172a}@keyframes resultsCardOpen{from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 600px){.results-card{padding:26px 20px}.results-grid{grid-template-columns:1fr 1fr;gap:10px}.result-item{padding:15px 10px}.result-value{font-size:23px}.results-actions{flex-direction:column}.result-button{width:100%}}/* ========================================================== KEYBOARD-ACTIVE COMPLETION SCREEN v3.4 ========================================================== */.results-actions{position:relative}.result-button:focus-visible{outline:4px solid rgba(37, 99, 235, 0.22);outline-offset:3px;transform:translateY(-2px)}.results-card::after{content:"Use Tab to reach the buttons, then press Enter to select.";display:block;margin-top:18px;color:#64748b;font-size:12px;font-weight:600}@media (max-width: 600px){.results-card::after{content:"Use the buttons below to continue.";font-size:11px}}/* ========================================================== PERFORMANCE ADVICE v5.4 ========================================================== */#resultAdvice{max-width:520px;margin-inline:auto;padding:10px 14px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:600;line-height:1.5}#resultAdvice[data-level="excellent"]{color:#166534;background:#f0fdf4;border-color:#bbf7d0}#resultAdvice[data-level="good"]{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}#resultAdvice[data-level="practice"]{color:#9a3412;background:#fff7ed;border-color:#fed7aa}#resultAdvice[data-level="retry"]{color:#991b1b;background:#fef2f2;border-color:#fecaca}html[data-theme="dark"] #resultAdvice[data-level="excellent"]{color:#166534;background:#e7f7eb;border-color:#6fd08c}html[data-theme="dark"] #resultAdvice[data-level="good"]{color:#bfdbfe;background:rgba(29, 78, 216, .20);border-color:#1d4ed8}html[data-theme="dark"] #resultAdvice[data-level="practice"]{color:#fed7aa;background:rgba(154, 52, 18, .22);border-color:#9a3412}html[data-theme="dark"] #resultAdvice[data-level="retry"]{color:#fecaca;background:rgba(153, 27, 27, .22);border-color:#991b1b}@media (prefers-color-scheme: dark){html[data-theme="system"] #resultAdvice[data-level="excellent"]{color:#166534;background:#e7f7eb;border-color:#6fd08c}html[data-theme="system"] #resultAdvice[data-level="good"]{color:#bfdbfe;background:rgba(29, 78, 216, .20);border-color:#1d4ed8}html[data-theme="system"] #resultAdvice[data-level="practice"]{color:#fed7aa;background:rgba(154, 52, 18, .22);border-color:#9a3412}html[data-theme="system"] #resultAdvice[data-level="retry"]{color:#fecaca;background:rgba(153, 27, 27, .22);border-color:#991b1b}}/* ========================================================== 10-MINUTE LESSON PRACTICE v6.3 ========================================================== */.result-practice-status{margin:0 0 20px;padding:13px 15px;text-align:left;background:#f8fafc;border:1px solid #dbe4f0;border-radius:12px}.result-practice-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.result-practice-heading strong{color:#0f172a;font-size:13px}#resultPracticeTime{color:#2563eb;font-size:13px;font-weight:800}.result-practice-track{overflow:hidden;height:9px;margin-bottom:8px;background:#e2e8f0;border-radius:999px}#resultPracticeFill{display:block;width:0;height:100%;background:linear-gradient( 90deg, #2563eb, #22c55e );border-radius:inherit;transition:width .3s ease}#resultPracticeNote{display:block;color:#64748b;font-size:11px;line-height:1.45}.result-button[hidden]{display:none !important}.results-actions .primary-button{min-width:220px}html[data-theme="dark"] .result-practice-status{background:#172033;border-color:#334155}html[data-theme="dark"] .result-practice-heading strong{color:#f8fafc}html[data-theme="dark"] .result-practice-track{background:#2b394d}html[data-theme="dark"] #resultPracticeNote{color:#cbd5e1}@media (prefers-color-scheme: dark){html[data-theme="system"] .result-practice-status{background:#172033;border-color:#334155}html[data-theme="system"] .result-practice-heading strong{color:#f8fafc}html[data-theme="system"] .result-practice-track{background:#2b394d}html[data-theme="system"] #resultPracticeNote{color:#cbd5e1}}@media (max-width: 600px){.result-practice-heading{align-items:flex-start;flex-direction:column;gap:4px}.results-actions .primary-button{min-width:0}}/* v17.2.1 dark-mode completion-message contrast fix */html[data-theme="dark"] #resultAdvice,html[data-theme="system"] #resultAdvice{text-shadow:none}/* ========================================================== INLINE LESSON RESULTS v17.3.1 ========================================================== */body.lesson-results-open .typing-practice-card .practice-toolbar,body.lesson-results-open .typing-practice-card #lessonText,body.lesson-results-open .typing-practice-card .mobile-keyboard-button,body.lesson-results-open .typing-practice-card .mobile-typing-input,body.lesson-results-open .typing-practice-card .practice-footer,body.lesson-results-open .typing-practice-card #lessonIntroPanel,body.lesson-results-open .typing-practice-card #lessonEndedPanel{display:none !important}body.lesson-results-open .typing-practice-card{overflow:hidden}body.lesson-results-open .results-icon{margin-bottom:2px;font-size:34px}body.lesson-results-open .results-card h2{margin-bottom:6px;font-size:clamp(24px, 2.4vw, 31px)}body.lesson-results-open .results-message{max-width:760px;margin:0 auto 14px}body.lesson-results-open .results-grid{grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px;margin-bottom:12px}body.lesson-results-open .result-item{padding:11px 9px}body.lesson-results-open .result-label{margin-bottom:4px;font-size:12px}body.lesson-results-open .result-value{font-size:clamp(22px, 2vw, 27px)}body.lesson-results-open .result-practice-status{margin-bottom:12px;padding:11px 14px}body.lesson-results-open .result-grade{margin-bottom:12px}body.lesson-results-open .next-lesson-preview{margin-bottom:13px;padding:12px 14px;text-align:left}body.lesson-results-open .results-actions{margin-top:4px}body.lesson-results-open .results-card::after{content:"Choose an action below. Typing is paused until you continue.";margin-top:12px}html[data-theme="dark"] .results-card{background:#111c2f;border-color:#40516a}@media (prefers-color-scheme: dark){html[data-theme="system"] .results-card{background:#111c2f;border-color:#40516a}}@media (max-width: 760px){.lesson-results-inline{padding:12px}.results-card{padding:16px 13px}body.lesson-results-open .results-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}a.result-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1}/* ========================================================== CERTIFICATE RESULT STATUS v17.5.0 ========================================================== */.lesson-certificate-status{margin:8px auto 2px;padding:9px 14px;max-width:760px;border:1px solid rgba(22, 163, 74, .28);border-radius:12px;color:#166534;background:#ecfdf3;font-size:13px;font-weight:800;text-align:center}html[data-theme="dark"] .lesson-certificate-status{color:#bbf7d0;background:rgba(22, 101, 52, .28);border-color:rgba(74, 222, 128, .34)}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-certificate-status{color:#bbf7d0;background:rgba(22, 101, 52, .28);border-color:rgba(74, 222, 128, .34)}}/* ========================================================== v17.8.28 — single dynamic completion icon + prominent next lesson ========================================================== */body.lesson-results-open .results-icon{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin:0 auto 8px;border-radius:18px;background:linear-gradient(145deg, #fff8df, #fff2b8);border:1px solid #f4d77a;box-shadow:0 8px 18px rgba(161, 98, 7, .10);font-size:32px;line-height:1}body.lesson-results-open .next-lesson-preview{position:relative;margin:0 0 16px;padding:18px 64px 18px 20px;overflow:hidden;border:1px solid #b9d5ff;border-left:5px solid #2475ff;border-radius:16px;background:linear-gradient(135deg, #f7fbff 0%, #edf5ff 58%, #e6f0ff 100%);box-shadow:0 9px 22px rgba(37, 99, 235, .08);text-align:left}body.lesson-results-open .next-lesson-preview::after{content:"→";position:absolute;right:18px;top:50%;display:flex;align-items:center;justify-content:center;width:36px;height:36px;transform:translateY(-50%);border-radius:50%;color:#1769ff;background:#ffffff;border:1px solid #c7dcff;font-size:22px;font-weight:800}body.lesson-results-open .next-lesson-preview-kicker{margin-bottom:5px;color:#1769ff;font-size:.72rem;font-weight:900;letter-spacing:.08em}body.lesson-results-open .next-lesson-preview h3{margin:0;color:#0f1f3d;font-size:1.08rem;line-height:1.3}body.lesson-results-open .next-lesson-preview p{margin:5px 0 0;color:#52657f;font-size:.83rem;line-height:1.45}body.lesson-results-open .next-lesson-preview-keys{gap:7px;margin-top:10px}body.lesson-results-open .next-key-badge{min-height:30px;padding:5px 10px;border-color:#b9d5ff;border-radius:9px;color:#165fcc;background:#ffffff;font-size:.72rem;font-weight:800}html[data-theme="dark"] body.lesson-results-open .results-icon{background:rgba(245, 158, 11, .14);border-color:rgba(245, 158, 11, .35);box-shadow:none}html[data-theme="dark"] body.lesson-results-open .next-lesson-preview{color:#e5edf8;background:linear-gradient(135deg, rgba(23, 105, 255, .15), rgba(30, 58, 138, .20));border-color:rgba(96, 165, 250, .34);border-left-color:#60a5fa;box-shadow:none}html[data-theme="dark"] body.lesson-results-open .next-lesson-preview h3{color:#f8fafc}html[data-theme="dark"] body.lesson-results-open .next-lesson-preview p{color:#cbd5e1}html[data-theme="dark"] body.lesson-results-open .next-lesson-preview::after{color:#93c5fd;background:#16243b;border-color:rgba(96, 165, 250, .34)}html[data-theme="dark"] body.lesson-results-open .next-key-badge{color:#bfdbfe;background:#16243b;border-color:rgba(96, 165, 250, .34)}@media (prefers-color-scheme: dark){html[data-theme="system"] body.lesson-results-open .results-icon{background:rgba(245, 158, 11, .14);border-color:rgba(245, 158, 11, .35);box-shadow:none}html[data-theme="system"] body.lesson-results-open .next-lesson-preview{color:#e5edf8;background:linear-gradient(135deg, rgba(23, 105, 255, .15), rgba(30, 58, 138, .20));border-color:rgba(96, 165, 250, .34);border-left-color:#60a5fa;box-shadow:none}html[data-theme="system"] body.lesson-results-open .next-lesson-preview h3{color:#f8fafc}html[data-theme="system"] body.lesson-results-open .next-lesson-preview p{color:#cbd5e1}html[data-theme="system"] body.lesson-results-open .next-lesson-preview::after{color:#93c5fd;background:#16243b;border-color:rgba(96, 165, 250, .34)}html[data-theme="system"] body.lesson-results-open .next-key-badge{color:#bfdbfe;background:#16243b;border-color:rgba(96, 165, 250, .34)}}@media (max-width: 760px){body.lesson-results-open .results-icon{width:50px;height:50px;border-radius:15px;font-size:27px}body.lesson-results-open .next-lesson-preview{padding:15px 48px 15px 15px;border-radius:14px}body.lesson-results-open .next-lesson-preview::after{right:12px;width:30px;height:30px;font-size:18px}}/* ========================================================== v17.8.29 — compact, non-duplicated lesson completion Final result stats live inside the result card only. The normal live-stat side column is hidden while results show. ========================================================== */body.lesson-results-open .lesson-practice-grid{grid-template-columns:minmax(0, 1fr) !important}body.lesson-results-open #statistics{display:none !important}body.lesson-results-open #resultsModal.lesson-results-inline{padding:10px 12px 12px !important}body.lesson-results-open #resultsModal.lesson-results-inline > .results-card{padding:13px 15px 12px !important;border-radius:16px !important}body.lesson-results-open .results-summary-head{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:12px;margin-bottom:10px;text-align:left}body.lesson-results-open .results-summary-head .results-icon{width:48px;height:48px;margin:0;border-radius:14px;font-size:27px}body.lesson-results-open .results-summary-copy{min-width:0}body.lesson-results-open .results-summary-copy h2{margin:0 0 3px;font-size:clamp(1.18rem, 1.8vw, 1.55rem);line-height:1.2}body.lesson-results-open .results-summary-copy .results-message{max-width:none;margin:0;padding:5px 9px;font-size:.77rem;line-height:1.35;text-align:left}body.lesson-results-open .results-summary-head .result-grade{display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 8px 6px 10px;border:1px solid #dbe4f0;border-radius:999px;background:#f8fafc;color:#52617a;font-size:.72rem;font-weight:800;white-space:nowrap}body.lesson-results-open .results-summary-head #resultGrade{min-width:28px;width:28px;height:28px;margin:0;font-size:.88rem}body.lesson-results-open .results-grid{grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px;margin-bottom:9px}body.lesson-results-open .result-item{display:flex;align-items:baseline;justify-content:center;gap:8px;min-height:42px;padding:8px 10px;border-radius:11px}body.lesson-results-open .result-label{display:inline;margin:0;font-size:.66rem;letter-spacing:.02em;text-transform:uppercase}body.lesson-results-open .result-value{display:inline;font-size:clamp(1.12rem, 1.65vw, 1.38rem);line-height:1}body.lesson-results-open .result-practice-status{margin-bottom:9px;padding:8px 11px;border-radius:11px}body.lesson-results-open .result-practice-heading{margin-bottom:5px}body.lesson-results-open .result-practice-track{height:7px;margin-bottom:5px}body.lesson-results-open #resultPracticeNote{font-size:.66rem;line-height:1.35}body.lesson-results-open .next-lesson-preview{margin-bottom:9px;padding:11px 52px 11px 14px;border-radius:13px;box-shadow:0 6px 16px rgba(37, 99, 235, .07)}body.lesson-results-open .next-lesson-preview::after{right:13px;width:30px;height:30px;font-size:18px}body.lesson-results-open .next-lesson-preview-kicker{margin-bottom:2px;font-size:.62rem}body.lesson-results-open .next-lesson-preview h3{font-size:.94rem}body.lesson-results-open .next-lesson-preview p{margin-top:2px;font-size:.72rem;line-height:1.35}body.lesson-results-open .next-lesson-preview-keys{gap:5px;margin-top:6px}body.lesson-results-open .next-key-badge{min-height:25px;padding:3px 8px;font-size:.66rem}body.lesson-results-open .lesson-certificate-status{margin:6px auto 7px;padding:7px 11px;font-size:.72rem}body.lesson-results-open .result-share-actions,body.lesson-results-open .results-actions{display:grid;gap:7px;margin:0}body.lesson-results-open .result-share-actions{grid-template-columns:repeat(3, minmax(0, 1fr));margin-bottom:7px}/* * Completion actions adapt to the actions that are actually available: * one action fills the row; two split it evenly; three use thirds. */body.lesson-results-open .results-actions{grid-template-columns:repeat(auto-fit, minmax(180px, 1fr))}body.lesson-results-open .result-button,body.lesson-results-open a.result-button{min-width:0 !important;min-height:36px;padding:7px 9px;border-radius:9px;font-size:.73rem;line-height:1.15}body.lesson-results-open .results-actions .primary-button{min-width:0}body.lesson-results-open .results-card::after{display:none}html[data-theme="dark"] body.lesson-results-open .results-summary-head .result-grade{color:#cbd5e1;background:#172033;border-color:#334155}@media (prefers-color-scheme: dark){html[data-theme="system"] body.lesson-results-open .results-summary-head .result-grade{color:#cbd5e1;background:#172033;border-color:#334155}}@media (max-width: 760px){body.lesson-results-open #resultsModal.lesson-results-inline{padding:8px !important}body.lesson-results-open #resultsModal.lesson-results-inline > .results-card{padding:11px 10px !important}body.lesson-results-open .results-summary-head{grid-template-columns:auto minmax(0, 1fr);gap:9px;margin-bottom:9px}body.lesson-results-open .results-summary-head .results-icon{width:42px;height:42px;border-radius:12px;font-size:23px}body.lesson-results-open .results-summary-copy h2{font-size:1.08rem}body.lesson-results-open .results-summary-copy .results-message{padding:4px 7px;font-size:.7rem}body.lesson-results-open .results-summary-head .result-grade{grid-column:1/-1;justify-self:start;padding:4px 7px 4px 9px}body.lesson-results-open .results-summary-head #resultGrade{width:24px;min-width:24px;height:24px;font-size:.78rem}body.lesson-results-open .results-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:6px}body.lesson-results-open .result-item{min-height:38px;padding:7px 8px}body.lesson-results-open .next-lesson-preview{padding:10px 44px 10px 12px}body.lesson-results-open .result-share-actions,body.lesson-results-open .results-actions{gap:6px}body.lesson-results-open .result-button,body.lesson-results-open a.result-button{min-height:34px;padding:6px 7px;font-size:.66rem}}@media (max-width: 520px){body.lesson-results-open .results-summary-head{grid-template-columns:1fr auto}body.lesson-results-open .results-summary-head .results-icon{display:none}body.lesson-results-open .results-summary-head .result-grade{grid-column:2;grid-row:1;align-self:start}body.lesson-results-open .results-summary-copy{grid-column:1;grid-row:1/span 2}body.lesson-results-open .result-share-actions{grid-template-columns:repeat(2, minmax(0, 1fr))}body.lesson-results-open .results-actions{grid-template-columns:1fr}body.lesson-results-open .results-actions .primary-button{grid-column:auto;grid-row:auto}body.lesson-results-open .result-share-actions > :last-child{grid-column:1/-1}body.lesson-results-open .results-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}/* ========================================================== v17.8.30 — Result screen: teach new keys only in lesson intro ========================================================== */body.lesson-results-open .next-lesson-preview{display:none !important}body.lesson-results-open .results-card{gap:10px}body.lesson-results-open .lesson-certificate-status{margin-top:2px}/* ========================================================== DARK MODE RESULT HEADING VISIBILITY v17.8.33 Keep completion/motivational headings readable on the dark results surface. This also covers the compact summary layout. ========================================================== */html[data-theme="dark"] .results-card h2,html[data-theme="dark"] body.lesson-results-open .results-summary-copy h2{color:#f8fafc}@media (prefers-color-scheme: dark){html[data-theme="system"] .results-card h2,html[data-theme="system"] body.lesson-results-open .results-summary-copy h2{color:#f8fafc}}/* ========================================================== v17.8.34 — First 10 Minutes: guided next-step recommendation ========================================================== */.result-next-step{display:flex;align-items:flex-start;gap:11px;margin:0 0 10px;padding:10px 12px;text-align:left;background:#f8fafc;border:1px solid #dbe4f0;border-radius:12px}.result-next-step-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#eaf2ff;color:#1d4ed8;font-size:18px;font-weight:900}.result-next-step-copy{min-width:0}.result-next-step-kicker{display:block;margin-bottom:2px;color:#64748b;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.result-next-step-copy strong{display:block;margin-bottom:2px;color:#0f172a;font-size:.83rem;line-height:1.3}.result-next-step-copy small{display:block;color:#64748b;font-size:.69rem;line-height:1.4}.result-next-step[data-state="continue"]{background:#f0fdf4;border-color:#bbf7d0}.result-next-step[data-state="continue"] .result-next-step-icon{background:#dcfce7;color:#15803d}.result-share-actions[hidden],#resultCertificatesButton[hidden]{display:none !important}html[data-theme="dark"] .result-next-step{background:#172033;border-color:#334155}html[data-theme="dark"] .result-next-step-copy strong{color:#f8fafc}html[data-theme="dark"] .result-next-step-copy small,html[data-theme="dark"] .result-next-step-kicker{color:#b8c5d8}html[data-theme="dark"] .result-next-step-icon{background:#1d355f;color:#bfdbfe}html[data-theme="dark"] .result-next-step[data-state="continue"]{background:rgba(22, 101, 52, .20);border-color:#2f855a}html[data-theme="dark"] .result-next-step[data-state="continue"] .result-next-step-icon{background:rgba(22, 101, 52, .34);color:#bbf7d0}@media (prefers-color-scheme: dark){html[data-theme="system"] .result-next-step{background:#172033;border-color:#334155}html[data-theme="system"] .result-next-step-copy strong{color:#f8fafc}html[data-theme="system"] .result-next-step-copy small,html[data-theme="system"] .result-next-step-kicker{color:#b8c5d8}html[data-theme="system"] .result-next-step-icon{background:#1d355f;color:#bfdbfe}html[data-theme="system"] .result-next-step[data-state="continue"]{background:rgba(22, 101, 52, .20);border-color:#2f855a}}@media (max-width: 520px){.result-next-step{gap:8px;padding:9px 10px}.result-next-step-icon{width:30px;height:30px;border-radius:9px;font-size:16px}}/* ========================================================== v17.8.38 — Completion header alignment polish Keep the trophy, completion heading and grade aligned to the same top edge. Feedback remains beneath the heading and no longer pulls the trophy downward in Safari or other browsers. ========================================================== */body.lesson-results-open .results-summary-head{align-items:start}body.lesson-results-open .results-summary-head .results-icon{align-self:start;margin-top:0}body.lesson-results-open .results-summary-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px}body.lesson-results-open .results-summary-copy h2{width:100%;margin:0;text-align:left}body.lesson-results-open .results-summary-copy .results-message{align-self:stretch;width:100%;max-width:none;box-sizing:border-box;margin:0 !important;text-align:left}body.lesson-results-open .results-summary-head .result-grade{align-self:start;margin-top:1px}@media (max-width: 760px){body.lesson-results-open .results-summary-copy{gap:4px}body.lesson-results-open .results-summary-copy .results-message{max-width:100%}}/* ========================================================== v17.8.40 — Full-width result feedback on larger screens The advice strip uses the complete summary-copy column so normal desktop result text stays on one line when space is available. It remains naturally responsive and wraps on smaller screens. ========================================================== */@media (min-width: 761px){body.lesson-results-open .results-summary-copy .results-message{width:100%;max-width:none;white-space:normal}}@media (max-width: 760px){body.lesson-results-open .results-summary-copy .results-message{width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere}}/* Source: /css/course.css *//* ========================================================== TypingTutor.Online Focus Course Bar v4.4 File: css/course.css ========================================================== */#courseDashboard{width:100%;margin:8px auto}.course-focus-bar{display:grid;grid-template-columns:auto minmax(160px, 1fr) auto auto;gap:12px;align-items:center;min-height:44px;padding:6px 9px 6px 12px;background:var(--surface, #ffffff);border:1px solid var(--border-soft, #e7ecf3);border-radius:13px;box-shadow:0 7px 20px rgba(15, 23, 42, .045)}.course-focus-label{display:inline-flex;align-items:center;gap:7px;color:var(--text, #0f172a);font-size:12px}.course-focus-progress{display:grid;grid-template-columns:auto minmax(90px, 1fr);gap:8px;align-items:center;color:var(--primary, #2563eb);font-size:10px;font-weight:800}.course-progress-track{overflow:hidden;height:6px;border-radius:999px;background:var(--surface-alt, #e8edf5)}.course-progress-fill{height:100%;border-radius:inherit;background:var(--primary, #2563eb);transition:width .3s ease}.course-focus-completed{min-width:52px;padding:6px 8px;text-align:center;color:var(--text-light, #475569);background:var(--surface-alt, #f1f5f9);border-radius:8px;font-size:10px;font-weight:800}.course-toggle-button{min-width:70px;min-height:32px;padding:6px 10px;color:#ffffff;background:var(--primary, #2563eb);border:0;border-radius:8px;font-size:10px;font-weight:800;cursor:pointer}.course-lesson-list{margin-top:8px;padding:16px;background:var(--surface, #ffffff);border:1px solid var(--border-soft, #e7ecf3);border-radius:14px;box-shadow:0 10px 28px rgba(15, 23, 42, .055)}.course-section{margin-top:22px}.course-section:first-child{margin-top:0}.course-section h3{margin:0 0 10px;color:var(--text, #172033);font-size:16px}.lesson-card-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}.lesson-card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:11px;background:var(--surface, #ffffff);border:1px solid var(--border, #dfe6ef);border-radius:11px}.lesson-number{display:grid;place-items:center;width:34px;height:34px;color:var(--primary, #1769ff);background:var(--primary-light, #eaf1ff);border-radius:50%;font-size:12px;font-weight:800}.lesson-card-content{min-width:0}.lesson-card-content h4{margin:0 0 3px;color:var(--text, #172033);font-size:12px}.lesson-card-content p{margin:0;overflow:hidden;color:var(--text-light, #64748b);font-size:10px;white-space:nowrap;text-overflow:ellipsis}.lesson-open-button{padding:7px 9px;color:#ffffff;background:var(--primary, #1769ff);border:0;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer}.lesson-completed{border-color:#86efac}.lesson-current{outline:3px solid rgba(23, 105, 255, .1);border-color:var(--primary, #1769ff)}.lesson-locked{opacity:.6}.lesson-locked .lesson-open-button{background:#cbd5e1;color:#64748b}@media (max-width: 700px){.course-focus-bar{grid-template-columns:auto 1fr auto}.course-focus-completed{display:none}.lesson-card-grid{grid-template-columns:1fr}}@media (max-width: 460px){.course-focus-progress{grid-template-columns:auto 1fr}.course-focus-label strong{display:none}.course-toggle-button{min-width:62px}}/* Source: /css/achievements.css *//* ========================================================== TypingTutor.Online Achievement System v11.0 ========================================================== */.achievements-dashboard{width:min(1180px, calc(100% - 24px));margin:22px auto 40px}.achievements-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;box-shadow:var(--shadow-sm)}.achievements-eyebrow{color:var(--primary);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.achievements-header h2{margin:5px 0 6px;color:var(--text);font-size:28px}.achievements-header p{max-width:700px;margin:0;color:var(--text-light);font-size:12px;line-height:1.55}.achievement-total{display:grid;flex:0 0 auto;min-width:120px;padding:14px;text-align:center;background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:13px}.achievement-total strong{color:var(--primary);font-size:28px;line-height:1}.achievement-total span{margin-top:5px;color:var(--text-light);font-size:10px}.achievement-overall-progress{overflow:hidden;height:8px;margin:12px 0 16px;background:var(--border-soft);border-radius:99px}.achievement-overall-progress span{display:block;height:100%;background:linear-gradient(90deg, var(--primary), #22c55e);border-radius:inherit}.new-achievement-banner{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:14px 16px;background:color-mix(in srgb, #f59e0b 12%, var(--surface));border:1px solid color-mix(in srgb, #f59e0b 35%, var(--border-soft));border-radius:13px}.new-achievement-banner > span{font-size:24px}.new-achievement-banner strong,.new-achievement-banner small{display:block}.new-achievement-banner small{margin-top:3px;color:var(--text-light)}.achievement-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px}.achievement-card{position:relative;display:flex;gap:13px;min-width:0;padding:17px;background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;box-shadow:var(--shadow-sm)}.achievement-card.locked{opacity:.72}.achievement-card.unlocked{border-color:color-mix(in srgb, #22c55e 40%, var(--border-soft))}.achievement-icon{display:grid;flex:0 0 auto;width:42px;height:42px;place-items:center;color:#fff;background:var(--primary);border-radius:11px;font-size:18px;font-weight:800}.achievement-card.locked .achievement-icon{color:var(--text-light);background:var(--surface-alt);border:1px solid var(--border-soft)}.achievement-card-copy{min-width:0;flex:1}.achievement-group{color:var(--primary);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.achievement-card h3{margin:3px 0 5px;color:var(--text);font-size:15px}.achievement-card p{min-height:34px;margin:0 0 10px;color:var(--text-light);font-size:10px;line-height:1.45}.achievement-progress{overflow:hidden;height:6px;background:var(--border-soft);border-radius:99px}.achievement-progress span{display:block;height:100%;background:var(--primary);border-radius:inherit}.achievement-card.unlocked .achievement-progress span{background:#22c55e}.achievement-card small{display:block;margin-top:6px;color:var(--text-light);font-size:9px}.achievement-status{position:absolute;top:12px;right:12px;color:#16a34a;font-size:12px}@media (max-width: 920px){.achievement-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (max-width: 620px){.achievements-header{align-items:stretch;flex-direction:column}.achievement-total{width:100%}.achievement-grid{grid-template-columns:1fr}}/* Source: /css/mode-switcher.css *//* ========================================================== TypingTutor.Online Responsive Mode Navigation v5.5 File: css/mode-switcher.css ========================================================== */#modeSwitcher{width:100%;min-width:0;background:transparent;border:0;box-shadow:none}.mode-switcher-inner{width:100%;margin:0;padding:0}.mode-switcher-heading{display:none}.mode-navigation{display:flex;justify-content:center;align-items:center;gap:clamp(4px, 1.1vw, 18px);min-width:0}.mode-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:46px;padding:9px clamp(9px, 1.15vw, 17px);color:var(--text);background:transparent;border:1px solid transparent;border-radius:11px;font:700 clamp(11px, .85vw, 13px)/1.15 inherit;white-space:nowrap;cursor:pointer}.mode-button:hover{color:var(--primary);background:var(--surface-alt)}.mode-button-active{color:#ffffff;background:linear-gradient(135deg, var(--primary), var(--primary-hover));box-shadow:0 8px 20px rgba(23, 105, 255, .22)}.mode-button-active:hover{color:#ffffff;background:linear-gradient(135deg, var(--primary), var(--primary-hover))}.mode-button-icon{flex:0 0 auto;font-size:16px}.mode-panel[hidden]{display:none !important}/* Smaller desktop: hide icons before text becomes cramped */@media (max-width: 1180px){.mode-navigation{gap:3px}.mode-button{padding-inline:10px;font-size:11px}.mode-button-icon{font-size:14px}}/* Two-row header: navigation scrolls safely instead of overlapping */@media (max-width: 900px){.mode-navigation{justify-content:flex-start;overflow-x:auto;padding:2px 0 3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.mode-navigation::-webkit-scrollbar{display:none}.mode-button{flex:0 0 auto;min-height:40px}}/* Mobile: compact icons + labels */@media (max-width: 560px){.mode-button{min-width:68px;min-height:42px;padding:7px 8px;flex-direction:column;gap:3px;font-size:9px}.mode-button-icon{font-size:14px}}/* Source: /css/statistics-dashboard.css *//* ========================================================== TypingTutor.Online Statistics Dashboard v17.1.8 ========================================================== */#statisticsDashboard{width:min(1180px, calc(100% - 24px));margin:22px auto}.statistics-dashboard{display:grid;gap:16px}.statistics-dashboard-header,.statistics-card,.statistics-rules{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;box-shadow:var(--shadow-md)}.statistics-dashboard-header{padding:22px}.dashboard-eyebrow{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.statistics-dashboard-header h2{margin:5px 0;color:var(--text);font-size:25px}.statistics-dashboard-header p{margin:0;color:var(--text-light)}.statistics-summary-grid{display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));gap:10px}.statistics-summary-card{display:grid;gap:6px;padding:15px;background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;box-shadow:var(--shadow-sm)}.statistics-summary-card span{color:var(--text-light);font-size:10px;font-weight:800;text-transform:uppercase}.statistics-summary-card strong{color:var(--primary);font-size:23px}.statistics-summary-card small{color:var(--text-muted);font-size:10px;line-height:1.35}.statistics-content-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:16px}.statistics-card{padding:18px}.statistics-card h3{margin:0 0 16px;color:var(--text);font-size:16px}.daily-bars{display:flex;align-items:end;gap:10px;min-height:220px}.daily-bar-item{display:grid;grid-template-rows:150px auto auto;gap:5px;flex:1;min-width:0;text-align:center}.daily-bar-track{position:relative;display:flex;align-items:end;overflow:hidden;background:var(--surface-alt);border-radius:9px}.daily-bar-track span{width:100%;min-height:6px;background:linear-gradient(180deg, #4d9aff, var(--primary));border-radius:9px}.daily-bar-item strong{color:var(--text);font-size:11px}.daily-bar-item small{color:var(--text-muted);font-size:9px}.recent-attempts{display:grid;gap:8px}.recent-attempt{display:grid;grid-template-columns:1fr auto auto minmax(100px, auto);gap:10px;align-items:center;padding:10px 12px;background:var(--surface-alt);border-radius:10px}.recent-attempt span,.recent-attempt small{color:var(--text-light);font-size:11px}.recent-attempt strong{color:var(--primary);font-size:12px}.recent-attempt b{color:var(--success);font-size:12px}.statistics-rules{display:flex;flex-wrap:wrap;gap:8px 18px;padding:13px 16px;color:var(--text-light);font-size:11px}.statistics-rules strong{color:var(--text)}.statistics-empty{color:var(--text-light);font-size:12px}@media (max-width: 1050px){.statistics-summary-grid{grid-template-columns:repeat(3, 1fr)}}@media (max-width: 760px){.statistics-content-grid{grid-template-columns:1fr}.recent-attempt{grid-template-columns:1fr auto auto}.recent-attempt small{grid-column:1/-1}}@media (max-width: 520px){.statistics-summary-grid{grid-template-columns:repeat(2, 1fr)}.daily-bars{gap:5px}}/* ========================================================== COURSE PROGRESS CARDS v10.2 ========================================================== */.course-progress-grid{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:12px;margin-bottom:16px}.course-progress-card{min-width:0;padding:16px;background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;box-shadow:var(--shadow-sm)}.course-progress-card::before{content:"";display:block;width:34px;height:4px;margin-bottom:12px;background:var(--primary);border-radius:99px}.course-progress-card.completed::before{background:#16a34a}.course-progress-card.current::before{background:#2563eb}.course-progress-card.ongoing::before{background:#f59e0b}.course-progress-card.remaining::before{background:#64748b}.course-progress-card.percentage::before{background:#7c3aed}.course-progress-card > span{display:block;margin-bottom:7px;color:var(--text-light);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.course-progress-card > strong{display:block;overflow:hidden;color:var(--text);font-size:23px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.course-progress-card.current > strong{font-size:18px}.course-progress-card > small{display:block;margin-top:7px;overflow:hidden;color:var(--text-light);font-size:10px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 1100px){.course-progress-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 720px){.course-progress-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (max-width: 460px){.course-progress-grid{grid-template-columns:1fr}}/* ========================================================== RESPONSIVE GROWING 60-DAY PRACTICE HISTORY v17.1.8 ========================================================== *//* Grid children must be allowed to shrink inside the theme width. */#statisticsModePanel,#statisticsDashboard,.statistics-dashboard,.statistics-content-grid,.statistics-card,.practice-history-card,.daily-bars-frame{box-sizing:border-box;min-width:0;max-width:100%}/* The history and recent-results cards use the full dashboard width. */.statistics-content-grid{grid-template-columns:minmax(0, 1fr)}.statistics-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.statistics-card-heading h3{margin-bottom:3px}.statistics-card-heading p,.statistics-card-heading > span{margin:0;color:var(--text-muted);font-size:10px;line-height:1.35}.statistics-card-heading > span{flex:0 0 auto;padding:5px 8px;background:var(--surface-alt);border-radius:999px;font-weight:700}.daily-bars-frame{width:100%;overflow:hidden;padding:2px}/* * The chart begins narrow and gains one column each calendar day. * It stops growing at the dashboard width, then its columns become * proportionally narrower until the rolling 60-day maximum is reached. */.practice-history-card .daily-bars{display:grid;grid-template-columns:repeat(var(--practice-day-count, 1), minmax(0, 1fr));align-items:end;gap:clamp(2px, .45vw, 7px);width:min( 100%, calc(var(--practice-day-count, 1) * 54px) );min-width:0;min-height:222px}.practice-history-card .daily-bar-item{display:grid;grid-template-rows:142px 13px 11px 10px;gap:3px;min-width:0;text-align:center}.practice-history-card .daily-bar-track{position:relative;display:flex;min-width:0;align-items:end;overflow:hidden;background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:clamp(4px, .55vw, 9px)}.practice-history-card .daily-bar-track span{width:100%;min-height:0;background:linear-gradient(180deg, #4d9aff, var(--primary));border-radius:8px 8px 4px 4px}.practice-history-card .daily-bar-item.goal-complete .daily-bar-track{border-color:rgba(22, 163, 74, .30);background:rgba(22, 163, 74, .07)}.practice-history-card .daily-bar-item.goal-complete .daily-bar-track span{background:linear-gradient(180deg, #42d87b, #16a34a)}.practice-history-card .daily-bar-item strong,.practice-history-card .daily-bar-item small,.practice-history-card .daily-bar-item em{display:block;min-width:0;overflow:hidden;line-height:1.1;text-overflow:clip;white-space:nowrap}.practice-history-card .daily-bar-item strong{color:var(--text);font-size:clamp(7px, .72vw, 10px)}.practice-history-card .daily-bar-item small{color:var(--text-muted);font-size:clamp(6px, .6vw, 8px)}.practice-history-card .daily-bar-item em{color:var(--success, #16a34a);font-size:clamp(6px, .53vw, 7px);font-style:normal;font-weight:800}@media (max-width: 760px){.statistics-card-heading{align-items:flex-start;flex-direction:column;gap:7px}.statistics-card-heading > span{padding:0;background:transparent}.practice-history-card .daily-bars{gap:2px;min-height:188px;width:min( 100%, calc(var(--practice-day-count, 1) * 42px) )}.practice-history-card .daily-bar-item{grid-template-rows:116px 12px 10px 9px;gap:2px}}/* Source: /css/settings.css *//* ========================================================== TypingTutor.Online Settings v7.0 ========================================================== */.settings-dashboard{width:min(1180px, calc(100% - 24px));margin:22px auto}.settings-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:22px;background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;box-shadow:var(--shadow-md)}.settings-eyebrow{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.settings-header h2{margin:5px 0;color:var(--text);font-size:26px}.settings-header p{max-width:720px;margin:0;color:var(--text-light);line-height:1.6}.settings-save-status{flex:0 0 auto;padding:8px 11px;color:var(--success);background:color-mix(in srgb, var(--success) 10%, var(--surface));border:1px solid color-mix(in srgb, var(--success) 25%, transparent);border-radius:999px;font-size:11px;font-weight:700}.settings-section-nav{display:flex;gap:8px;overflow-x:auto;margin:12px 0;padding:4px 0}.settings-section-nav button{flex:0 0 auto;padding:8px 13px;color:var(--text-light);background:var(--surface);border:1px solid var(--border-soft);border-radius:999px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.settings-section-nav button:hover,.settings-section-nav button:focus-visible{color:var(--primary);border-color:var(--primary)}.settings-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px}.settings-card{scroll-margin-top:100px;padding:18px;background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;box-shadow:var(--shadow-sm)}.settings-card-wide{grid-column:1/-1}.settings-card-heading{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid var(--border-soft)}.settings-card-icon{display:grid;flex:0 0 36px;width:36px;height:36px;place-items:center;color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, var(--surface));border-radius:10px;font-size:18px;font-weight:800}.settings-card h3{margin:0 0 4px;color:var(--text);font-size:16px}.settings-card-heading p{margin:0;color:var(--text-light);font-size:11px;line-height:1.45}.setting-row{display:flex;justify-content:space-between;gap:18px;align-items:center;min-height:62px;padding:11px 0;border-bottom:1px solid var(--border-soft)}.setting-row:last-of-type{border-bottom:0}.setting-row > span{display:grid;gap:4px;min-width:0}.setting-row strong{color:var(--text);font-size:12px}.setting-row small{color:var(--text-muted);font-size:10px;line-height:1.4}.setting-row select,.setting-row input[type="time"]{flex:0 0 155px;min-height:38px;padding:7px 10px;color:var(--text);background:var(--surface-alt);border:1px solid var(--border);border-radius:9px;font:inherit;font-size:11px}.setting-switch{appearance:none;position:relative;flex:0 0 44px;width:44px;height:24px;margin:0;background:var(--border);border-radius:999px;cursor:pointer;transition:background .2s ease}.setting-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, .25);transition:transform .2s ease}.setting-switch:checked{background:var(--primary)}.setting-switch:checked::after{transform:translateX(20px)}.setting-switch:focus-visible{outline:3px solid color-mix(in srgb, var(--primary) 30%, transparent);outline-offset:2px}.setting-action-group{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.settings-action-button{display:inline-flex;align-items:center;justify-content:center;min-height:39px;padding:8px 13px;color:var(--text);background:var(--surface-alt);border:1px solid var(--border);border-radius:9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.settings-action-button:hover,.settings-action-button:focus-visible{border-color:var(--primary)}.settings-action-button.primary{color:#fff;background:var(--primary);border-color:var(--primary)}.settings-action-button.danger{color:#b42318;background:#fff4f2;border-color:#fecdca}.file-action input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.settings-inline-message{min-height:18px;margin:10px 0 0;color:var(--primary);font-size:11px}.settings-data-notice{display:grid;gap:4px;padding:12px 14px;color:var(--text-light);background:var(--surface-alt);border-radius:10px;font-size:11px;line-height:1.5}.settings-data-notice strong{color:var(--text)}/* Applied tutor settings */html[data-typing-text-size="normal"] #lessonText{font-size:20px}html[data-typing-text-size="large"] #lessonText{font-size:24px}html[data-typing-text-size="extra-large"] #lessonText{font-size:29px}html[data-text-spacing="comfortable"] #lessonText{letter-spacing:.035em;line-height:1.9}html[data-text-spacing="wide"] #lessonText{letter-spacing:.075em;word-spacing:.18em;line-height:2.05}html[data-keyboard-text-size="normal"] .key-primary{font-size:clamp(12px, 1vw, 16px)}html[data-keyboard-text-size="large"] .key-primary{font-size:clamp(14px, 1.18vw, 19px)}html[data-keyboard-text-size="extra-large"] .key-primary{font-size:clamp(16px, 1.35vw, 21px)}html[data-keyboard-text-size="large"] .key-secondary{font-size:clamp(9px, .82vw, 13px)}html[data-keyboard-text-size="extra-large"] .key-secondary{font-size:clamp(10px, .95vw, 14px)}html[data-show-keyboard="false"] #keyboardContainer{display:none !important}html[data-show-hands="false"] .hands-guidance-card{display:none !important}html[data-show-target-row="false"] #targetRowGuide{display:none !important}html[data-live-statistics="accuracy"] #wpmCard,html[data-live-statistics="accuracy"] .stat-card:has(#wpm){display:none !important}html[data-live-statistics="hidden"] #statistics{display:none !important}html[data-highlight-expected-key="false"] .key.expected,html[data-highlight-expected-key="false"] .key.active,html[data-highlight-expected-key="false"] .target-key.expected{box-shadow:none !important;outline:0 !important}html[data-high-contrast="true"]{--border:#64748b;--border-soft:#94a3b8}html[data-high-contrast="true"] #lessonText,html[data-high-contrast="true"] .key{border-width:2px}html[data-high-contrast="true"] :focus-visible{outline:4px solid #ffbf00 !important;outline-offset:3px !important}html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after{scroll-behavior:auto !important;animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}@media (max-width: 760px){.settings-header{flex-direction:column}.settings-grid{grid-template-columns:1fr}.settings-card-wide{grid-column:auto}.setting-row{align-items:flex-start}}@media (max-width: 520px){.settings-dashboard{width:min(100% - 14px, 1180px)}.settings-header,.settings-card{padding:14px}.setting-row{flex-direction:column;gap:9px}.setting-row select,.setting-row input[type="time"]{flex-basis:auto;width:100%}.setting-toggle-row{flex-direction:row;align-items:center}.setting-action-group{display:grid;grid-template-columns:1fr}}/* ========================================================== SAFE LESSON VISIBILITY FIX v7.3 ========================================================== */#lessonText{overflow-x:hidden !important;overflow-y:auto !important;overscroll-behavior:contain;scrollbar-width:none;scroll-padding-top:24px;scroll-padding-bottom:24px}#lessonText::-webkit-scrollbar{display:none}/* Sound controls v17.2.0 */.sound-volume-control{display:flex;align-items:center;gap:12px;min-width:220px}.sound-volume-control input[type="range"]{width:170px;accent-color:var(--primary-color, #2f67f6)}.sound-volume-control output{min-width:44px;font-weight:800;color:var(--text-primary, #1f2937);text-align:right}@media (max-width:640px){.sound-volume-row{align-items:flex-start}.sound-volume-control{width:100%;min-width:0}.sound-volume-control input[type="range"]{flex:1;width:auto}}/* Quick access links v17.8.10 */.settings-quick-access-note{margin-top:14px}/* Source: /css/dynamic-lessons.css *//* ========================================================== TypingTutor.Online Dynamic Lessons v8.0 ========================================================== */.new-key-notice{display:grid;grid-template-columns:auto minmax(0, 1fr) auto auto;gap:12px;align-items:center;margin:10px 0;padding:13px 15px;color:var(--text);background:linear-gradient( 110deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), color-mix(in srgb, var(--success) 9%, var(--surface)) );border:1px solid color-mix(in srgb, var(--primary) 28%, var(--border));border-radius:13px;box-shadow:var(--shadow-sm)}.new-key-notice[hidden]{display:none !important}.new-key-notice-icon{display:grid;width:38px;height:38px;place-items:center;color:#fff;background:var(--primary);border-radius:10px;font-size:20px}.new-key-notice-copy{display:grid;gap:3px}.new-key-notice-copy strong{font-size:14px}.new-key-notice-copy span{color:var(--text-light);font-size:11px}.new-key-notice-countdown{display:grid;width:34px;height:34px;place-items:center;color:var(--primary);background:var(--surface);border:1px solid var(--border);border-radius:50%;font-size:14px;font-weight:900}.new-key-notice button{min-height:36px;padding:7px 11px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:9px;font:inherit;font-size:10px;font-weight:700;cursor:pointer}.new-key-notice button:hover,.new-key-notice button:focus-visible{color:var(--primary);border-color:var(--primary)}@media (max-width: 700px){.new-key-notice{grid-template-columns:auto minmax(0, 1fr) auto}.new-key-notice button{grid-column:1/-1}}/* Source: /css/navigation-resources.css *//* ========================================================== TypingTutor.Online Old Sections Navigation v9.1 ========================================================== */.more-practice-menu{position:relative}.more-practice-toggle{display:inline-flex;align-items:center;gap:5px}.more-practice-dropdown{position:absolute;z-index:1000;top:calc(100% + 8px);right:0;width:220px;padding:8px;background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;box-shadow:0 16px 34px rgba(30, 44, 72, 0.16)}.more-practice-dropdown[hidden]{display:none !important}.more-practice-dropdown a{display:block;padding:10px 11px;color:var(--text);border-radius:8px;font-size:12px;font-weight:700;text-decoration:none}.more-practice-dropdown a:hover,.more-practice-dropdown a:focus-visible{color:var(--primary);background:var(--surface-alt)}.more-typing-resources{padding:26px 0 40px}.more-typing-resources-inner{width:min(1180px, calc(100% - 24px));margin:0 auto}.resource-section-heading{margin-bottom:14px;text-align:center}.resource-section-heading > span{color:var(--primary);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.resource-section-heading h2{margin:4px 0 6px;color:var(--text);font-size:24px}.resource-section-heading p{max-width:720px;margin:0 auto;color:var(--text-light);font-size:12px;line-height:1.55}.resource-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px}.resource-card{display:grid;gap:7px;min-height:150px;padding:17px;color:var(--text);background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;box-shadow:var(--shadow-sm);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.resource-card:hover,.resource-card:focus-visible{color:var(--text);border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.resource-icon{display:grid;width:42px;height:42px;place-items:center;color:var(--primary);background:#eff6ff;border:1px solid #bfdbfe;border-radius:11px;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}.resource-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.resource-card:hover .resource-icon,.resource-card:focus-visible .resource-icon{color:var(--primary-hover);background:#dbeafe;border-color:#93c5fd;transform:translateY(-1px)}html[data-theme="dark"] .resource-icon{color:#93c5fd;background:rgba(37, 99, 235, .14);border-color:rgba(96, 165, 250, .32)}html[data-theme="dark"] .resource-card:hover .resource-icon,html[data-theme="dark"] .resource-card:focus-visible .resource-icon{color:#bfdbfe;background:rgba(37, 99, 235, .23);border-color:rgba(147, 197, 253, .5)}@media (prefers-color-scheme: dark){html[data-theme="system"] .resource-icon{color:#93c5fd;background:rgba(37, 99, 235, .14);border-color:rgba(96, 165, 250, .32)}html[data-theme="system"] .resource-card:hover .resource-icon,html[data-theme="system"] .resource-card:focus-visible .resource-icon{color:#bfdbfe;background:rgba(37, 99, 235, .23);border-color:rgba(147, 197, 253, .5)}}.resource-card strong{font-size:14px}.resource-card small{color:var(--text-light);font-size:11px;line-height:1.5}.footer-links{display:flex;flex-wrap:wrap;gap:8px 16px}.footer-links a{white-space:nowrap}@media (max-width: 980px){.resource-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (max-width: 760px){.more-practice-dropdown{right:auto;left:0}}@media (max-width: 520px){.resource-grid{grid-template-columns:1fr}.resource-card{min-height:0}}/* Preserve every legacy section link */.resource-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}@media (max-width: 1100px){.resource-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (max-width: 760px){.resource-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (max-width: 520px){.resource-grid{grid-template-columns:1fr}}/* Source: /css/notifications.css */.notification-permission-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:16px;background:linear-gradient(110deg, color-mix(in srgb, var(--primary) 9%, var(--surface)), color-mix(in srgb, #f59e0b 7%, var(--surface)));border:1px solid color-mix(in srgb, var(--primary) 22%, var(--border-soft));border-radius:14px}.notification-permission-copy{display:flex;align-items:flex-start;gap:12px}.notification-permission-icon{display:grid;width:40px;height:40px;flex:0 0 auto;place-items:center;color:#fff;background:var(--primary);border-radius:11px}.notification-permission-copy strong{display:block;margin-bottom:3px;color:var(--text);font-size:13px}.notification-permission-copy p{margin:0;color:var(--text-light);font-size:11px;line-height:1.5}.notification-permission-copy .notification-diagnostics{margin-top:7px;color:color-mix(in srgb, var(--primary) 82%, var(--text));font-size:10px;font-weight:700}.notification-permission-actions{display:flex;flex-wrap:wrap;gap:8px}.notification-delivery-note{display:flex;gap:8px;margin-top:10px;padding:10px 12px;color:var(--text-light);background:color-mix(in srgb, var(--primary) 4%, var(--surface));border:1px solid var(--border-soft);border-radius:10px;font-size:10px;line-height:1.55}.notification-delivery-note strong{flex:0 0 auto;color:var(--text)}.notification-delivery-note a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}@media (max-width: 720px){.notification-permission-card{align-items:stretch;flex-direction:column}.notification-permission-actions .settings-action-button{flex:1 1 150px}.notification-delivery-note{flex-direction:column}}/* ========================================================== Reminder status clarity v17.7.7 ========================================================== */#notificationPermissionStatus{max-width:72ch;line-height:1.55}html[data-theme="dark"] .notification-permission-card{background:#101b2f;border-color:#334766}html[data-theme="dark"] #notificationPermissionStatus{color:#cbd5e1}html[data-theme="dark"] .notification-permission-copy .notification-diagnostics,html[data-theme="dark"] .notification-delivery-note a{color:#7db1ff}html[data-theme="dark"] .notification-delivery-note{color:#cbd5e1;background:#101827;border-color:#334155}html[data-theme="dark"] .notification-delivery-note strong{color:#f8fafc}@media (prefers-color-scheme: dark){html[data-theme="system"] .notification-permission-card{background:#101b2f;border-color:#334766}html[data-theme="system"] #notificationPermissionStatus{color:#cbd5e1}html[data-theme="system"] .notification-permission-copy .notification-diagnostics,html[data-theme="system"] .notification-delivery-note a{color:#7db1ff}html[data-theme="system"] .notification-delivery-note{color:#cbd5e1;background:#101827;border-color:#334155}html[data-theme="system"] .notification-delivery-note strong{color:#f8fafc}}/* Source: /css/course-completion.css *//* ========================================================== TypingTutor.Online Final Course Completion v11.0 ========================================================== */.course-completion-panel{margin:18px 0;padding:20px;text-align:left;background:linear-gradient( 135deg, color-mix(in srgb, var(--primary) 10%, var(--surface)), color-mix(in srgb, #22c55e 10%, var(--surface)) );border:1px solid color-mix(in srgb, var(--primary) 26%, var(--border-soft));border-radius:15px}.course-completion-panel[hidden]{display:none !important}.course-completion-kicker{color:var(--primary);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.course-completion-panel h3{margin:5px 0 7px;color:var(--text);font-size:21px}.course-completion-panel > p{margin:0;color:var(--text-light);font-size:11px;line-height:1.55}.course-completion-summary{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px;margin-top:15px}.course-completion-summary article{padding:11px;text-align:center;background:var(--surface);border:1px solid var(--border-soft);border-radius:10px}.course-completion-summary span,.course-completion-summary strong{display:block}.course-completion-summary span{color:var(--text-light);font-size:8px;font-weight:800;text-transform:uppercase}.course-completion-summary strong{margin-top:4px;color:var(--text);font-size:14px}.course-completion-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.course-completion-actions button,.course-completion-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;color:var(--text);background:var(--surface);border:1px solid var(--border-soft);border-radius:9px;font:inherit;font-size:10px;font-weight:800;text-decoration:none;cursor:pointer}.course-completion-actions button:first-child{color:#fff;background:var(--primary);border-color:var(--primary)}@media (max-width: 650px){.course-completion-summary{grid-template-columns:repeat(2, minmax(0, 1fr))}}/* Source: /css/dark-mode-polish.css *//* ========================================================== TypingTutor.Online Dark Mode Polish v11.1 ========================================================== *//* Dark logo switching */.site-logo-picture{position:relative;display:inline-grid;align-items:center}.site-logo-picture > *{grid-area:1/1}.site-logo-dark{display:none}html[data-theme="dark"] .site-logo-light{display:none}html[data-theme="dark"] .site-logo-dark{display:block}@media (prefers-color-scheme: dark){html[data-theme="system"] .site-logo-light{display:none}html[data-theme="system"] .site-logo-dark{display:block}}/* Main dark surfaces */html[data-theme="dark"]{--background:#090f1d;--surface:#111a2b;--surface-alt:#172236;--surface-soft:#0e1727;--surface-elevated:#1a273c;--border:#3b4b63;--border-soft:#26364e;--text:#f8fafc;--text-light:#cbd5e1;--text-muted:#8fa0b8;--key-bg:#172235;--key-border:#40506a;--key-text:#f8fafc}/* Lesson text must belong to dark mode too */html[data-theme="dark"] #lessonText,html[data-theme="dark"] .typing-text-viewport{color:var(--text);background:#111827 !important;border-color:var(--border)}html[data-theme="dark"] #lessonText .future-character{color:#c4cede}html[data-theme="dark"] #lessonText .typed-character{color:#7f8da3}html[data-theme="dark"] #lessonText .current-character{color:#fff}/* Remove washed-out white cards */html[data-theme="dark"] .statistics-panel .stat,html[data-theme="dark"] .stat,html[data-theme="dark"] .keyboard-guidance-card,html[data-theme="dark"] .hands-guidance-card,html[data-theme="dark"] #keyboardContainer,html[data-theme="dark"] #handsContainer{color:var(--text);background:var(--surface) !important;border-color:var(--border)}/* Keyboard */html[data-theme="dark"] .key{color:var(--key-text);background:linear-gradient( 180deg, #1c2940, #151f32 ) !important;border-color:var(--key-border);box-shadow:0 2px 0 #08101d,0 5px 10px rgba(0, 0, 0, .28)}html[data-theme="dark"] .key-secondary{color:#9fb0c8}html[data-theme="dark"] .key.key-active,html[data-theme="dark"] .key.active,html[data-theme="dark"] .key.pressed{color:#fff;background:var(--primary) !important;border-color:#80a9ff}/* Hands panel: remove bright gray area */html[data-theme="dark"] #handsContainer,html[data-theme="dark"] .hands-guidance-card{background:radial-gradient( circle at center, #24334a 0, #172236 54%, #111a2b 100% ) !important}html[data-theme="dark"] .hands-guidance-card p,html[data-theme="dark"] .finger-position-label,html[data-theme="dark"] .home-row-guide{color:var(--text-light)}/* Improve weak header text visible in screenshot */html[data-theme="dark"] .stage-label,html[data-theme="dark"] .stage-name,html[data-theme="dark"] .lesson-stage,html[data-theme="dark"] .practice-stage{color:#e6edf7 !important}html[data-theme="dark"] .lesson-stage strong,html[data-theme="dark"] .practice-stage strong{color:#fff !important}/* Footer and resource cards */html[data-theme="dark"] .resource-card,html[data-theme="dark"] .more-practice-dropdown,html[data-theme="dark"] .course-progress-card,html[data-theme="dark"] .achievement-card{color:var(--text);background:var(--surface);border-color:var(--border-soft)}html[data-theme="dark"] .resource-card small,html[data-theme="dark"] .resource-section-heading p{color:var(--text-light)}/* System-dark mirrors explicit dark mode */@media (prefers-color-scheme: dark){html[data-theme="system"] #lessonText,html[data-theme="system"] .typing-text-viewport{color:var(--text);background:#111827 !important}html[data-theme="system"] .statistics-panel .stat,html[data-theme="system"] .stat,html[data-theme="system"] #keyboardContainer,html[data-theme="system"] #handsContainer{background:var(--surface) !important;border-color:var(--border)}html[data-theme="system"] .key{color:var(--key-text);background:linear-gradient(180deg, #1c2940, #151f32) !important;border-color:var(--key-border)}}/* ========================================================== DARK KEYBOARD LABEL VISIBILITY v11.2 ========================================================== *//* * The keyboard key labels became too dark because older key text * rules were overriding the new dark-mode palette. */html[data-theme="dark"] .keyboard,html[data-theme="dark"] .keyboard-container,html[data-theme="dark"] #keyboardContainer{color:#f8fafc !important}html[data-theme="dark"] .key,html[data-theme="dark"] .keyboard-key,html[data-theme="dark"] [data-key]{color:#f8fafc !important;background:linear-gradient( 180deg, #24334b 0%, #1a263a 100% ) !important;border-color:#52627a !important;text-shadow:none !important}html[data-theme="dark"] .key *,html[data-theme="dark"] .keyboard-key *,html[data-theme="dark"] [data-key] *{color:inherit !important}html[data-theme="dark"] .key-secondary,html[data-theme="dark"] .key .secondary,html[data-theme="dark"] .key .symbol,html[data-theme="dark"] .keyboard-key .secondary,html[data-theme="dark"] .keyboard-key .symbol{color:#cbd5e1 !important}html[data-theme="dark"] .key.key-active,html[data-theme="dark"] .key.active,html[data-theme="dark"] .key.pressed,html[data-theme="dark"] .keyboard-key.key-active,html[data-theme="dark"] .keyboard-key.active,html[data-theme="dark"] [data-key].key-active{color:#ffffff !important;background:#2f6df6 !important;border-color:#8fb3ff !important;box-shadow:0 0 0 3px rgba(47, 109, 246, .22),0 2px 0 #153a95 !important}html[data-theme="dark"] .key.key-active *,html[data-theme="dark"] .key.active *,html[data-theme="dark"] .key.pressed *,html[data-theme="dark"] .keyboard-key.key-active *,html[data-theme="dark"] .keyboard-key.active *,html[data-theme="dark"] [data-key].key-active *{color:#ffffff !important}/* Home-key markers and target-row labels */html[data-theme="dark"] .home-key-marker,html[data-theme="dark"] .target-row-guide,html[data-theme="dark"] .target-row-guide *,html[data-theme="dark"] #targetRowGuide,html[data-theme="dark"] #targetRowGuide *{color:#dbe7f8 !important}html[data-theme="dark"] .target-row-key{color:#dbe7f8 !important;background:#1d2a3f !important;border-color:#42536d !important}html[data-theme="dark"] .target-row-key.active,html[data-theme="dark"] .target-row-key.current{color:#ffffff !important;background:#2f6df6 !important;border-color:#8fb3ff !important}/* System-dark support */@media (prefers-color-scheme: dark){html[data-theme="system"] .key,html[data-theme="system"] .keyboard-key,html[data-theme="system"] [data-key]{color:#f8fafc !important;background:linear-gradient( 180deg, #24334b 0%, #1a263a 100% ) !important;border-color:#52627a !important}html[data-theme="system"] .key *,html[data-theme="system"] .keyboard-key *,html[data-theme="system"] [data-key] *{color:inherit !important}}/* ========================================================== DARK LESSON TEXT CONTRAST + PAUSE MESSAGE READABILITY v17.2.8 ========================================================== */html[data-theme="dark"] #lessonText .future-character{color:#e2e8f0}html[data-theme="dark"] #lessonText .typed-character{color:#66758d}html[data-theme="dark"] #lessonText .wrong-character{color:#ff8aa3;background:rgba(244, 63, 94, .18);box-shadow:inset 0 -3px 0 #fb7185}html[data-theme="dark"] #lessonText .current-character{color:#ffffff;background:#2f7fff !important;box-shadow:0 0 0 .09em rgba(96, 165, 250, .42) !important,0 0 22px rgba(47, 127, 255, .34)}@media (prefers-color-scheme: dark){html[data-theme="system"] #lessonText .future-character{color:#e2e8f0}html[data-theme="system"] #lessonText .typed-character{color:#66758d}html[data-theme="system"] #lessonText .wrong-character{color:#ff8aa3;background:rgba(244, 63, 94, .18);box-shadow:inset 0 -3px 0 #fb7185}html[data-theme="system"] #lessonText .current-character{color:#ffffff;background:#2f7fff !important;box-shadow:0 0 0 .09em rgba(96, 165, 250, .42) !important,0 0 22px rgba(47, 127, 255, .34)}}/* Source: /css/mobile-lesson-experience.css *//* ========================================================== TypingTutor.Online Mobile Lesson Experience v11.6 ========================================================== *//* * Mobile priorities: * 1. Lesson text * 2. Time and progress * 3. Pause, End, and Restart * * The full keyboard, hand illustration, and live-statistics sidebar * are hidden on small screens. Complete results remain available * when the lesson ends. */@media (max-width: 760px){body{padding-bottom:0}/* ------------------------------------------------------ COMPACT HEADER ------------------------------------------------------ */#header{position:sticky;top:0;z-index:1000}.header-inner{display:grid !important;grid-template-columns:minmax(0, 1fr) auto;gap:9px 12px;align-items:center;width:100%;padding:9px 12px 7px}.logo{min-width:0}.site-logo-image{width:180px !important;max-width:100%;height:auto}.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px}.more-practice-toggle,#themeButton{min-height:38px;padding:7px 9px;border-radius:9px;font-size:10px;white-space:nowrap}.more-practice-toggle{font-size:0}.more-practice-toggle::before{content:"More";font-size:10px}.more-practice-dropdown{position:fixed;top:58px;right:10px;left:10px;width:auto;max-height:calc(100vh - 76px);overflow-y:auto}/* ------------------------------------------------------ TOP MODE MENU ------------------------------------------------------ */#modeSwitcher{grid-column:1/-1;position:static;min-width:0;width:100%;overflow:hidden;background:transparent;border:0;box-shadow:none;backdrop-filter:none}.mode-switcher-inner{width:100% !important;max-width:none !important;padding:0 !important}.mode-navigation{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:4px;width:100%}.mode-button{display:grid;place-items:center;gap:2px;min-width:0;min-height:46px;padding:5px 2px;border-radius:9px}.mode-button-icon{font-size:15px}.mode-button-text{width:100%;overflow:hidden;font-size:8px;font-weight:750;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap}/* ------------------------------------------------------ COURSE AND LESSON BARS ------------------------------------------------------ */#courseProgressBar,.course-progress-bar{margin-top:8px}.lesson-dashboard-bar{display:grid !important;grid-template-columns:minmax(0, 1fr) auto;gap:8px;align-items:center}.lesson-meta-pills{grid-column:1/-1;display:grid !important;grid-template-columns:repeat(3, minmax(0, 1fr));gap:5px}.lesson-meta-pills > *:nth-child(1),.lesson-meta-pills > *:nth-child(2){display:none !important}.lesson-meta-pills > *{min-width:0;padding:7px 6px !important}/* ------------------------------------------------------ LESSON AREA ------------------------------------------------------ */.lesson-practice-grid{display:block !important}.typing-practice-card{width:100%;border-radius:14px}.practice-toolbar{display:grid !important;grid-template-columns:minmax(0, 1fr) auto;gap:7px 10px;align-items:center;padding:10px 12px}.stage-label{min-width:0;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.time-left{font-size:11px;white-space:nowrap}#viewFullTextButton{display:none !important}#lessonText{height:clamp(270px, 48vh, 430px) !important;min-height:270px !important;max-height:430px !important;padding:20px 16px 34px !important;font-size:clamp(23px, 7vw, 34px) !important;line-height:1.82 !important}.practice-footer{display:grid !important;grid-template-columns:1fr auto;gap:8px;padding:8px 10px 10px}.character-progress-wrap{grid-column:1/-1}.practice-footer-controls{display:grid !important;grid-template-columns:1fr 1fr;gap:7px;width:100%}.control-button{min-height:42px;padding:8px;font-size:11px}.practice-footer-actions{display:flex;align-items:center;justify-content:flex-end}#resetLessonButton{min-height:42px;padding:7px 9px;font-size:10px}/* ------------------------------------------------------ HIDE DISTRACTIONS DURING MOBILE LESSONS ------------------------------------------------------ */#statistics,.statistics-panel,.typing-controls-grid,.keyboard-guidance-card,.hands-guidance-card,#keyboardContainer,#handsContainer,#targetRowGuide{display:none !important}/* Results and statistics pages remain visible */[data-mode-panel="statistics"] .statistics-panel,.statistics-dashboard,.results-card,.results-overlay{display:block}/* Avoid excessive blank area after hiding keyboard */#courseModePanel,.course-mode-panel{min-height:0}.more-typing-resources{padding-top:24px}.resource-section-heading h2{font-size:21px}/* ------------------------------------------------------ DARK MODE MOBILE ------------------------------------------------------ */html[data-theme="dark"] .mode-button{color:#cbd5e1}html[data-theme="dark"] .mode-button-active{color:#fff}}/* Very small phones */@media (max-width: 390px){.site-logo-image{width:150px !important}.header-inner{padding-inline:8px}.mode-button-text{font-size:7px}#lessonText{padding-inline:12px !important;font-size:clamp(21px, 7.2vw, 29px) !important}.practice-footer{grid-template-columns:1fr}.practice-footer-actions{justify-content:center}}/* ========================================================== MOBILE NATIVE KEYBOARD INPUT v11.7 ========================================================== */.mobile-typing-input,.mobile-keyboard-button{display:none}@media (max-width: 760px){.mobile-keyboard-button{display:flex;align-items:center;justify-content:center;gap:7px;width:calc(100% - 20px);min-height:44px;margin:9px auto 0;padding:9px 12px;color:#ffffff;background:var(--primary);border:0;border-radius:10px;font:inherit;font-size:11px;font-weight:800;cursor:text}.mobile-keyboard-button.keyboard-open{color:var(--primary);background:color-mix( in srgb, var(--primary) 10%, var(--surface) );border:1px solid var(--primary)}.mobile-keyboard-button.keyboard-open::after{content:"Keyboard ready";font-size:9px;font-weight:700}.mobile-keyboard-button.keyboard-open{font-size:0}.mobile-keyboard-button.keyboard-open > span{font-size:15px}.mobile-typing-input{display:block;position:fixed;z-index:-1;left:50%;bottom:1px;width:2px;height:2px;padding:0;opacity:.01;color:transparent;background:transparent;border:0;outline:0;font-size:16px;caret-color:transparent;transform:translateX(-50%);resize:none}#lessonText{cursor:text;touch-action:manipulation}}/* Source: /css/lesson-keyboard-alignment.css *//* ========================================================== TypingTutor.Online Exact Lesson Keyboard Alignment v17.0.7 File: css/lesson-keyboard-alignment.css ========================================================== *//* * The JavaScript companion measures the real .typing-practice-card. * This avoids guessing the statistics width, outer container padding, * page max-width, or desktop breakpoint. *//* Side hands OFF: position the controls wrapper in the measured lesson area. */@media (min-width: 761px){html:not([data-show-side-hands="true"]) .typing-controls-grid[data-align-to-lesson="true"],html[data-show-side-hands="false"] .typing-controls-grid[data-align-to-lesson="true"]{display:block !important;width:var(--lesson-area-width) !important;max-width:none !important;margin-top:18px !important;margin-right:0 !important;margin-left:var(--lesson-area-offset) !important;padding:0 !important}/* * The keyboard keeps its calibrated maximum width, but it is centered * only within the measured lesson area—not the whole screen or the * lesson-plus-statistics width. */html:not([data-show-side-hands="true"]) .typing-controls-grid[data-align-to-lesson="true"] .keyboard-guidance-card,html[data-show-side-hands="false"] .typing-controls-grid[data-align-to-lesson="true"] .keyboard-guidance-card{display:block !important;width:100% !important;max-width:1120px !important;margin-right:auto !important;margin-left:auto !important;justify-self:auto !important}html:not([data-show-side-hands="true"]) .typing-controls-grid[data-align-to-lesson="true"] .hands-guidance-card,html[data-show-side-hands="false"] .typing-controls-grid[data-align-to-lesson="true"] .hands-guidance-card{display:none !important}}/* * Side hands ON: * Use the existing v17.0.5 side-by-side/below behavior. The exact lesson * alignment is intentionally removed while that additional panel is visible. */html[data-show-side-hands="true"] .typing-controls-grid{margin-right:auto !important;margin-left:auto !important}/* Mobile keeps the existing native-keyboard experience. */@media (max-width: 760px){.typing-controls-grid{display:block !important;width:100% !important;margin-right:auto !important;margin-left:auto !important}}/* Source: /css/capsule-front-layer.css *//* ========================================================== TypingTutor.Online Capsule True Front Layer v17.0.9 File: css/capsule-front-layer.css ========================================================== *//* * This file loads AFTER keyboard.css and every other stylesheet. * It creates one explicit stacking order for Capsule / Ribbon mode: * * 1. keyboard card background * 2. all key surfaces, borders, symbols and highlights * 3. capsule/ribbon fingers * 4. target-row guide * * The key characters remain naturally visible through the translucent skin, * but they no longer render as separate foreground objects above the fingers. */html[data-hand-guidance-style="capsule"] .keyboard-guidance-card{position:relative !important;isolation:isolate !important}/* Put the complete keyboard—including labels and highlighted keys—below hands. */html[data-hand-guidance-style="capsule"] #keyboardContainer{position:relative !important;z-index:1 !important;isolation:isolate !important}html[data-hand-guidance-style="capsule"] #keyboardContainer .keyboard-row,html[data-hand-guidance-style="capsule"] #keyboardContainer .key,html[data-hand-guidance-style="capsule"] #keyboardContainer .key-primary,html[data-hand-guidance-style="capsule"] #keyboardContainer .key-secondary,html[data-hand-guidance-style="capsule"] #keyboardContainer .home-bump{z-index:1 !important}/* * Key-secondary may be absolutely positioned by keyboard.css. * Do not alter its position—only keep its stacking below the hand overlay. */html[data-hand-guidance-style="capsule"] #keyboardContainer .key-secondary{position:absolute !important}/* The entire hand artwork is now one guaranteed foreground layer. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{position:absolute !important;z-index:50 !important;opacity:1 !important;transform:translateZ(0);pointer-events:none !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay svg,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .articulated-finger,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-segment,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-base{position:relative;z-index:1}/* Keep fingers translucent, but give the foreground silhouette more presence. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline{opacity:.94 !important;filter:drop-shadow( 0 2px 2px rgba(92, 65, 44, .13) ) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body{opacity:.96 !important}/* * Active finger stays soft and transparent. The blue border is clearer than * the key highlight, so the finger—not the key—is the main visual guide. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-edge-active:rgba(66, 126, 244, .62) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline{filter:drop-shadow( 0 0 5px rgba(66, 126, 244, .24) ) !important}/* Target key stays below the finger and uses a lighter background. */html[data-hand-guidance-style="capsule"] #keyboardContainer .key-next{z-index:1 !important;background:rgba(47, 103, 246, .11) !important;border-color:rgba(79, 139, 255, .66) !important;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .24),0 0 0 3px rgba(47, 103, 246, .07) !important}html[data-theme="dark"] [data-hand-guidance-style="capsule"] #keyboardContainer .key-next{background:rgba(79, 139, 255, .13) !important;border-color:rgba(112, 169, 255, .68) !important}/* The target-row chips remain usable above the hand illustration. */html[data-hand-guidance-style="capsule"] #targetRowGuide{position:relative !important;z-index:70 !important}/* Other hand modes keep their existing calibrated layers. *//* ========================================================== CAPSULE FRONT-DEPTH POLISH v17.0.10 ========================================================== *//* * The overlay was already above the keyboard in v17.0.9. Because the skin * body was only about 14–18% opaque, the key borders and characters remained * so clear that the fingers still looked as if they were underneath. * * This pass keeps them translucent but gives the skin enough coverage to * visually occlude the key surface and read unmistakably as the front layer. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(238, 225, 209, .42) !important;--capsule-skin-active:rgba(238, 225, 209, .46) !important;--capsule-edge:rgba(170, 139, 112, .58) !important;--capsule-edge-active:rgba(66, 126, 244, .66) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body{opacity:1 !important;mix-blend-mode:normal !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline{opacity:.98 !important;mix-blend-mode:normal !important;filter:drop-shadow( 0 2px 3px rgba(83, 58, 39, .16) ) !important}/* Warm skin body stays visible inside the active blue instructional edge. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body{stroke:rgba(232, 220, 207, .48) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline{filter:drop-shadow( 0 0 5px rgba(66, 126, 244, .28) ) , drop-shadow( 0 2px 2px rgba(83, 58, 39, .12) ) !important}/* The expected key remains visible but no longer visually overpowers hand. */html[data-hand-guidance-style="capsule"] #keyboardContainer .key-next{background:rgba(47, 103, 246, .08) !important;border-color:rgba(79, 139, 255, .58) !important;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .18),0 0 0 2px rgba(47, 103, 246, .06) !important}html[data-theme="dark"] [data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(214, 183, 153, .36) !important;--capsule-skin-active:rgba(220, 191, 162, .40) !important;--capsule-edge:rgba(228, 204, 181, .55) !important}html[data-theme="dark"] [data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body{stroke:rgba(217, 188, 160, .42) !important}/* ========================================================== LIGHT WARM CAPSULE SKIN v17.0.11 ========================================================== *//* * Keep the confirmed foreground stacking from v17.0.10, but return to a * lighter peach-cream skin tone. Opacity remains high enough to visually * separate fingers from the keyboard while preserving label readability. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(251, 232, 214, .34) !important;--capsule-skin-active:rgba(252, 233, 216, .38) !important;--capsule-edge:rgba(205, 167, 134, .44) !important;--capsule-edge-active:rgba(75, 136, 250, .58) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline{opacity:.92 !important;filter:drop-shadow( 0 2px 3px rgba(116, 75, 45, .12) ) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body{opacity:1 !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body{stroke:rgba(252, 233, 216, .40) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline{filter:drop-shadow( 0 0 5px rgba(75, 136, 250, .22) ) , drop-shadow( 0 2px 2px rgba(116, 75, 45, .10) ) !important}html[data-theme="dark"] [data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(232, 198, 167, .32) !important;--capsule-skin-active:rgba(237, 204, 174, .36) !important;--capsule-edge:rgba(237, 211, 187, .46) !important}html[data-theme="dark"] [data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body{stroke:rgba(237, 204, 174, .38) !important}/* ========================================================== CLEARER KEY VISIBILITY THROUGH CAPSULE HANDS v17.1.11 ========================================================== *//* * Reduce the visual density of the translucent skin so key labels remain * readable beneath the fingers. The active outline remains instructional. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(251, 232, 214, .24) !important;--capsule-skin-active:rgba(252, 233, 216, .29) !important;--capsule-edge:rgba(205, 167, 134, .36) !important;--capsule-edge-active:rgba(75, 136, 250, .58) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body{opacity:.82 !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline{opacity:.76 !important}/* Joint rings are especially light so they do not hide the key characters. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-joint{stroke:rgba(143, 103, 75, .14) !important;opacity:.30 !important}/* Keep the selected finger visible without filling over the key label. */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-body{stroke:rgba(252, 233, 216, .31) !important;opacity:.86 !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline{opacity:.88 !important}html[data-theme="dark"][data-hand-guidance-style="capsule"] #handsKeyboardOverlay{--capsule-skin:rgba(232, 198, 167, .23) !important;--capsule-skin-active:rgba(237, 204, 174, .28) !important;--capsule-edge:rgba(237, 211, 187, .38) !important}html[data-theme="dark"][data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-joint{stroke:rgba(229, 199, 174, .16) !important;opacity:.28 !important}/* ========================================================== v17.8.64 — Capsule depth + premium polish Keep the capsule style cleaner and more hand-like. ========================================================== */html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-body,html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-base{stroke-linecap:round;stroke-linejoin:round}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-outline{filter:drop-shadow(0 1px 2px rgba(92,65,44,.10)) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .finger-active .capsule-ribbon-outline{filter:drop-shadow(0 0 7px rgba(66,126,244,.20)) !important}html[data-hand-guidance-style="capsule"] #handsKeyboardOverlay .capsule-ribbon-nail{opacity:.56}/* Source: /css/mobile-logo-fix.css *//* ========================================================== TypingTutor.Online Mobile Theme Logo Fix v17.0.13 File: css/mobile-logo-fix.css ========================================================== *//* * The previous contained two image fallbacks and placed the dark * after the first . Browsers therefore selected the light * mobile logo even in Dark mode, making "TypingTutor" nearly invisible. * * Light and dark logos now use separate picture elements. The stable * full logo SVGs are scaled responsively on mobile. */.logo{position:relative;flex:0 1 auto;min-width:0}.site-logo-picture{min-width:0}.site-logo-picture-light{display:block}.site-logo-picture-dark{display:none}/* Explicit Dark theme */html[data-theme="dark"] .site-logo-picture-light{display:none !important}html[data-theme="dark"] .site-logo-picture-dark{display:block !important}/* Explicit Light theme */html[data-theme="light"] .site-logo-picture-light{display:block !important}html[data-theme="light"] .site-logo-picture-dark{display:none !important}/* System mode follows the device appearance. */@media (prefers-color-scheme: dark){html[data-theme="system"] .site-logo-picture-light{display:none !important}html[data-theme="system"] .site-logo-picture-dark{display:block !important}}@media (prefers-color-scheme: light){html[data-theme="system"] .site-logo-picture-light{display:block !important}html[data-theme="system"] .site-logo-picture-dark{display:none !important}}/* Compatibility with theme managers that expose a resolved theme. */html[data-resolved-theme="dark"] .site-logo-picture-light{display:none !important}html[data-resolved-theme="dark"] .site-logo-picture-dark{display:block !important}html[data-resolved-theme="light"] .site-logo-picture-light{display:block !important}html[data-resolved-theme="light"] .site-logo-picture-dark{display:none !important}@media (max-width: 900px){.logo{max-width:220px}.site-logo-image{width:min(220px, 100%) !important;max-height:46px !important}}@media (max-width: 560px){.logo{width:clamp(155px, 38vw, 190px);max-width:190px;overflow:visible}.site-logo-picture,.site-logo-image{width:100% !important}.site-logo-image{height:auto !important;max-height:42px !important;object-fit:contain;object-position:left center}}@media (max-width: 390px){.logo{width:150px;max-width:150px}.site-logo-image{max-height:38px !important}}/* Source: /css/focused-lesson-viewport.css *//* ========================================================== TypingTutor.Online Focused Lesson Viewport v17.0.14 File: css/focused-lesson-viewport.css ========================================================== *//* * Desktop strategy: * - Keep the full lesson card height so the five live-stat cards retain * their excellent matching height. * - Show only three lines of lesson text. * - Center the smaller text viewport inside the available middle space. * - Keep the practice footer anchored at the bottom. */.lesson-practice-grid{align-items:stretch !important}.typing-practice-card{display:flex !important;min-height:100%;flex-direction:column;align-self:stretch}.typing-practice-card .practice-toolbar,.typing-practice-card .practice-footer{flex:0 0 auto}/* * CSS variables are also read by TextRenderer.js when deciding where the * current line should sit inside the visible window. */#lessonText{--lesson-visible-lines:3;--lesson-text-line-height:1.72;box-sizing:border-box;flex:0 0 auto;height:calc( var(--lesson-visible-lines) * var(--lesson-text-line-height) * 1em + 34px ) !important;min-height:calc( var(--lesson-visible-lines) * var(--lesson-text-line-height) * 1em + 34px ) !important;max-height:calc( var(--lesson-visible-lines) * var(--lesson-text-line-height) * 1em + 34px ) !important;margin-top:auto;margin-bottom:auto;padding:17px 2.2% !important;overflow-x:hidden !important;overflow-y:hidden !important;line-height:var(--lesson-text-line-height) !important;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain}#lessonText::-webkit-scrollbar{display:none}/* * Keep the footer at the card bottom even though the visible text window is * shorter. The outer card therefore remains visually balanced with Stats. */.typing-practice-card .practice-footer{margin-top:0}/* * Mobile strategy: * - Statistics are no longer beside the lesson. * - Let the complete card become shorter. * - Show only two lines, with the active line placed first so the learner * can see the next line below it. */@media (max-width: 760px){.typing-practice-card{min-height:0 !important;height:auto !important}#lessonText{--lesson-visible-lines:2;--lesson-text-line-height:1.72;height:calc( var(--lesson-visible-lines) * var(--lesson-text-line-height) * 1em + 28px ) !important;min-height:calc( var(--lesson-visible-lines) * var(--lesson-text-line-height) * 1em + 28px ) !important;max-height:calc( var(--lesson-visible-lines) * var(--lesson-text-line-height) * 1em + 28px ) !important;margin-top:0;margin-bottom:0;padding:14px 14px !important}}@media (prefers-reduced-motion: reduce){#lessonText{scroll-behavior:auto}}/* Source: /css/lesson-transitions.css *//* ========================================================== TypingTutor.Online Beginner Hand Placement + Inline Key Introduction v17.0.22 File: css/lesson-transitions.css ========================================================== *//* ========================================================== INLINE NEW-KEY INTRODUCTION ========================================================== *//* * The introduction now lives inside the lesson card. It replaces the lesson * text and controls temporarily, while the real keyboard remains visible. */.lesson-inline-intro{box-sizing:border-box;display:grid;grid-template-columns:minmax(0, 1fr);gap:13px;width:100%;min-height:220px;padding:16px 20px 17px;color:#25334a;background:linear-gradient( 145deg, rgba(247, 251, 255, .98), rgba(238, 246, 255, .92) );border-top:1px solid var(--border-color, #dbe3ef);border-bottom:1px solid var(--border-color, #dbe3ef)}.lesson-inline-intro[hidden]{display:none !important}.lesson-inline-intro-heading{display:flex;justify-content:center;text-align:center}.lesson-intro-kicker{display:inline-flex;gap:7px;align-items:center;margin-bottom:5px;padding:5px 9px;color:#2567d9;background:#e6f0ff;border-radius:999px;font-size:.64rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase}.lesson-inline-intro h3{margin:0;color:#142139;font-size:clamp(1.18rem, 1.8vw, 1.55rem);line-height:1.2}#lessonIntroMessage{max-width:700px;margin:5px auto 0;color:#607089;font-size:.84rem;line-height:1.45}.lesson-intro-keys{display:grid;grid-template-columns:repeat( auto-fit, minmax(190px, 1fr) );gap:10px}.lesson-intro-key-card{display:flex;gap:11px;align-items:center;min-width:0;padding:11px 12px;background:rgba(255, 255, 255, .84);border:1px solid #d8e4f3;border-radius:13px;box-shadow:0 6px 18px rgba(37, 74, 126, .06)}.lesson-intro-keycap{display:flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:52px;min-height:48px;padding:7px 10px;color:#ffffff;background:linear-gradient( 145deg, #347df9, #1f62de );border:1px solid rgba(255, 255, 255, .48);border-radius:11px;box-shadow:inset 0 1px 0 rgba(255, 255, 255, .32),0 7px 16px rgba(38, 103, 222, .20);font-family:var(--font-mono, monospace);font-size:.88rem;font-weight:800;text-align:center}.lesson-intro-key-copy{display:grid;min-width:0;gap:2px}.lesson-intro-key-copy strong{color:#1c2940;font-size:.78rem;line-height:1.3}.lesson-intro-key-copy span{color:#65748b;font-size:.7rem;line-height:1.4}.lesson-intro-review{display:flex;gap:7px;align-items:flex-start;padding:8px 11px;color:#53647c;background:rgba(255, 255, 255, .62);border:1px solid #dbe7f5;border-radius:10px;font-size:.72rem;line-height:1.45}.lesson-intro-review strong{flex:0 0 auto;color:#263750}.lesson-intro-bottom{display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:14px;align-items:center}.lesson-intro-reminders{display:flex;gap:8px;min-width:0;flex-wrap:wrap}.lesson-intro-reminders span{display:inline-flex;gap:6px;align-items:center;min-height:34px;padding:7px 9px;color:#586980;background:rgba(255, 255, 255, .78);border:1px solid #dce6f2;border-radius:9px;font-size:.69rem;line-height:1.35}.lesson-intro-start{min-width:150px;min-height:42px;padding:9px 18px;color:#ffffff;background:linear-gradient( 145deg, #2e7cff, #1f63df );border:0;border-radius:11px;font-size:.83rem;font-weight:800;cursor:pointer;box-shadow:0 9px 22px rgba(39, 105, 225, .22)}.lesson-intro-start:hover{transform:translateY(-1px)}.lesson-intro-start:focus-visible{outline:3px solid rgba(74, 139, 255, .34);outline-offset:3px}/* * Replace the practice content—not the entire page—while the introduction * is visible. The lesson card keeps almost the same overall height as the * normal three-line text viewport plus footer. */body.lesson-inline-intro-open #lessonText,body.lesson-inline-intro-open #mobileKeyboardButton,body.lesson-inline-intro-open #mobileTypingInput,body.lesson-inline-intro-open .typing-practice-card .practice-footer{display:none !important}/* The stage/time row remains visible and the lesson timer is paused by JS. */body.lesson-inline-intro-open .typing-practice-card{min-height:0 !important}/* Highlight introduced keys on the real keyboard below the lesson. */#keyboardContainer .key.lesson-intro-key-highlight{border-color:#4b91ff !important;box-shadow:inset 0 0 0 2px rgba(66, 132, 255, .42),0 0 0 4px rgba(66, 132, 255, .14) !important}/* Review option inside Lesson Tips. */.review-lesson-keys-button{width:100%;min-height:40px;margin-top:12px;padding:9px 12px;color:#245fbe;background:#edf5ff;border:1px solid #cfe0f6;border-radius:11px;font-size:.78rem;font-weight:800;cursor:pointer}.review-lesson-keys-button:hover{background:#e2efff}.review-lesson-keys-button[hidden]{display:none !important}/* ========================================================== LESSON COMPLETION MODAL ========================================================== */body.lesson-results-open{overflow:hidden}.results-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8, 17, 33, .74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.results-modal.hidden{display:none !important}.results-modal[aria-hidden="false"]{display:flex !important}.results-card{max-height:min( 850px, calc(100vh - 44px) );overflow-y:auto}.next-lesson-preview{margin:2px 0 22px;padding:16px;color:#24334d;background:linear-gradient( 145deg, #f3f8ff, #edf5ff );border:1px solid #d6e6fb;border-radius:15px;text-align:left}.next-lesson-preview-kicker{display:block;margin-bottom:4px;color:#2670e8;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.next-lesson-preview h3{margin:0;color:#15233b;font-size:1.05rem}.next-lesson-preview p{margin:6px 0 0;color:#5b6d86;font-size:.84rem;line-height:1.5}.next-lesson-preview-keys{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.next-key-badge{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;color:#1f60c9;background:#ffffff;border:1px solid #cfe0f7;border-radius:9px;font-family:var(--font-mono, monospace);font-size:.76rem;font-weight:800}.results-actions{position:sticky;bottom:-1px;z-index:2;padding-top:10px;background:linear-gradient( to bottom, rgba(255, 255, 255, 0), #ffffff 28% )}/* ========================================================== DARK / SYSTEM-DARK ========================================================== */html[data-theme="dark"] .lesson-inline-intro{color:#e8eef8;background:linear-gradient( 145deg, #131f34, #101a2c );border-color:#2a3d57}html[data-theme="dark"] .lesson-inline-intro h3,html[data-theme="dark"] .lesson-intro-key-copy strong,html[data-theme="dark"] .lesson-intro-review strong{color:#f0f5ff}html[data-theme="dark"] #lessonIntroMessage,html[data-theme="dark"] .lesson-intro-key-copy span,html[data-theme="dark"] .lesson-intro-review,html[data-theme="dark"] .lesson-intro-reminders span{color:#b3c0d3}html[data-theme="dark"] .lesson-intro-kicker{color:#9cc0ff;background:#192d4c}html[data-theme="dark"] .lesson-intro-key-card,html[data-theme="dark"] .lesson-intro-reminders span{background:#17243a;border-color:#2e435f}html[data-theme="dark"] .lesson-intro-review{background:#15243a;border-color:#2d425e}html[data-theme="dark"] .review-lesson-keys-button{color:#b8d2ff;background:#172a47;border-color:#315177}html[data-theme="dark"] .next-lesson-preview{color:#dce8f8;background:linear-gradient( 145deg, #14243b, #122036 );border-color:#2e4564}html[data-theme="dark"] .next-lesson-preview h3{color:#f0f5ff}html[data-theme="dark"] .next-lesson-preview p{color:#adbbcf}html[data-theme="dark"] .next-key-badge{color:#b7d1ff;background:#182941;border-color:#355276}html[data-theme="dark"] .results-actions{background:linear-gradient( to bottom, rgba(17, 26, 43, 0), #111a2b 28% )}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-inline-intro{color:#e8eef8;background:linear-gradient( 145deg, #131f34, #101a2c );border-color:#2a3d57}html[data-theme="system"] .lesson-inline-intro h3,html[data-theme="system"] .lesson-intro-key-copy strong,html[data-theme="system"] .lesson-intro-review strong{color:#f0f5ff}html[data-theme="system"] #lessonIntroMessage,html[data-theme="system"] .lesson-intro-key-copy span,html[data-theme="system"] .lesson-intro-review,html[data-theme="system"] .lesson-intro-reminders span{color:#b3c0d3}html[data-theme="system"] .lesson-intro-key-card,html[data-theme="system"] .lesson-intro-reminders span{background:#17243a;border-color:#2e435f}}/* ========================================================== RESPONSIVE ========================================================== */@media (max-width: 760px){.lesson-inline-intro{min-height:0;padding:14px 12px 15px;gap:11px}.lesson-intro-keys{grid-template-columns:1fr;gap:8px}.lesson-intro-key-card{padding:10px}.lesson-intro-keycap{min-width:54px;min-height:46px}.lesson-intro-bottom{grid-template-columns:1fr;gap:10px}.lesson-intro-reminders{display:grid;grid-template-columns:1fr;gap:7px}.lesson-intro-start{width:100%}.results-modal{align-items:flex-end;padding:10px}.results-card{max-height:calc(100vh - 20px)}.results-actions{display:grid;grid-template-columns:1fr}.result-button{width:100%}}@media (prefers-reduced-motion: reduce){.lesson-intro-start:hover{transform:none}}/* ========================================================== BEGINNER HAND PLACEMENT ONBOARDING v17.0.22 ========================================================== */.lesson-intro-heading-meta{display:flex;justify-content:center;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}.lesson-intro-heading-meta .lesson-intro-kicker{margin-bottom:0}.lesson-intro-step{display:inline-flex;min-height:25px;padding:5px 9px;align-items:center;color:#607089;background:rgba(255, 255, 255, .72);border:1px solid #d7e3f1;border-radius:999px;font-size:.63rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase}.lesson-intro-step[hidden]{display:none !important}.lesson-hand-placement{display:grid;gap:12px}.lesson-hand-placement[hidden]{display:none !important}.home-row-keyboard-guide{display:grid;grid-template-columns:minmax(235px, 1fr) minmax(150px, .58fr) minmax(235px, 1fr);gap:12px;align-items:stretch}.home-row-hand,.home-row-center-guide{min-width:0;padding:12px;background:rgba(255, 255, 255, .86);border:1px solid #d8e4f3;border-radius:14px;box-shadow:0 6px 20px rgba(37, 74, 126, .06)}.home-row-hand-label{display:block;margin-bottom:9px;color:#56667e;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-align:center;text-transform:uppercase}.home-row-finger-map{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:7px}.home-row-finger-map > span{display:grid;min-width:0;min-height:68px;padding:8px 4px;place-content:center;gap:4px;color:#27364e;background:#f6f9fd;border:1px solid #dce6f3;border-radius:10px;text-align:center}.home-row-finger-map b{color:#1f66da;font-family:var(--font-mono, monospace);font-size:1.12rem}.home-row-finger-map small{color:#718097;font-size:.58rem;font-weight:700}.home-row-finger-map .home-anchor{background:#eaf3ff;border-color:#90b8f5;box-shadow:inset 0 -3px 0 rgba(47, 103, 246, .15)}.home-row-center-guide{display:grid;gap:9px;align-content:center}.home-row-bump-guide,.home-row-space-guide{display:grid;min-height:53px;padding:9px;place-content:center;color:#5b6b82;background:#f6f9fd;border:1px solid #dce6f3;border-radius:10px;font-size:.68rem;line-height:1.4;text-align:center}.home-row-bump-guide b,.home-row-space-guide b{color:#1f63d2}.home-row-space-guide small{margin-top:2px;color:#7b899d;font-size:.58rem;font-weight:700}.hand-placement-rules{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px}.hand-placement-rules span{display:flex;min-height:38px;padding:8px 10px;gap:7px;align-items:center;color:#586980;background:rgba(255, 255, 255, .74);border:1px solid #dce6f2;border-radius:10px;font-size:.69rem;line-height:1.35}.lesson-intro-actions{display:flex;justify-content:flex-end}.lesson-intro-actions .lesson-intro-start[hidden]{display:none !important}/* The home row is highlighted as a complete resting position. */#keyboardContainer .key.hand-placement-key-highlight{background:rgba(66, 132, 255, .12) !important;border-color:rgba(89, 145, 238, .72) !important;box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .22),0 0 0 3px rgba(66, 132, 255, .09) !important}#keyboardContainer .key.hand-placement-anchor-highlight{background:rgba(47, 103, 246, .22) !important;border-color:#5f9cf7 !important;box-shadow:inset 0 0 0 2px rgba(94, 157, 255, .34),0 0 0 4px rgba(47, 103, 246, .13) !important}#keyboardContainer .key.hand-placement-space-highlight{background:rgba(241, 177, 71, .16) !important;border-color:rgba(225, 157, 48, .74) !important}.lesson-tip-review-actions{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:9px;margin-top:12px}.lesson-tip-review-actions .review-lesson-keys-button{margin-top:0}.review-hand-position-button{color:#276a52;background:#ecf8f2;border-color:#c7e7d8}.review-hand-position-button:hover{background:#e0f3ea}/* Dark theme */html[data-theme="dark"] .lesson-intro-step{color:#b8c5d8;background:#17243a;border-color:#31455f}html[data-theme="dark"] .home-row-hand,html[data-theme="dark"] .home-row-center-guide{background:#17243a;border-color:#30445f}html[data-theme="dark"] .home-row-hand-label,html[data-theme="dark"] .home-row-finger-map small,html[data-theme="dark"] .home-row-bump-guide,html[data-theme="dark"] .home-row-space-guide,html[data-theme="dark"] .hand-placement-rules span{color:#b5c2d5}html[data-theme="dark"] .home-row-finger-map > span,html[data-theme="dark"] .home-row-bump-guide,html[data-theme="dark"] .home-row-space-guide,html[data-theme="dark"] .hand-placement-rules span{background:#111d31;border-color:#30445f}html[data-theme="dark"] .home-row-finger-map .home-anchor{background:#193156;border-color:#4778bc}html[data-theme="dark"] .review-hand-position-button{color:#b9ead5;background:#17362d;border-color:#2e624f}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-intro-step{color:#b8c5d8;background:#17243a;border-color:#31455f}html[data-theme="system"] .home-row-hand,html[data-theme="system"] .home-row-center-guide{background:#17243a;border-color:#30445f}html[data-theme="system"] .home-row-finger-map > span,html[data-theme="system"] .home-row-bump-guide,html[data-theme="system"] .home-row-space-guide,html[data-theme="system"] .hand-placement-rules span{background:#111d31;border-color:#30445f}}@media (max-width: 900px){.home-row-keyboard-guide{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}.home-row-center-guide{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (max-width: 760px){.home-row-keyboard-guide{grid-template-columns:minmax(0, 1fr)}.home-row-center-guide{grid-column:auto;grid-row:auto;grid-template-columns:minmax(0, 1fr)}.hand-placement-rules{grid-template-columns:minmax(0, 1fr)}.lesson-intro-actions{width:100%}.lesson-intro-actions .lesson-intro-start{width:100%}.lesson-tip-review-actions{grid-template-columns:minmax(0, 1fr)}}/* ========================================================== TIPS REVIEW CARD VISIBILITY FIX v17.0.33 ========================================================== *//* * Tips reviews pause the real lesson timer, but the ordinary pause notice is * irrelevant while the learner is already reading the review. Keep the * review card above any older pause layer and hide only the pause presentation. */body.lesson-inline-intro-open #lessonIntroPanel{position:relative;z-index:1100}body.lesson-inline-intro-open .lesson-review-pause-suppressed-element,body.lesson-inline-intro-open .pause-overlay,body.lesson-inline-intro-open .paused-overlay,body.lesson-inline-intro-open .lesson-pause-overlay,body.lesson-inline-intro-open .lesson-paused-overlay,body.lesson-inline-intro-open .pause-message,body.lesson-inline-intro-open .paused-message,body.lesson-inline-intro-open .lesson-pause-message,body.lesson-inline-intro-open .lesson-paused-message,body.lesson-inline-intro-open [data-pause-overlay],body.lesson-inline-intro-open [data-paused-overlay]{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}/* * LessonEngine stores its pause message on the complete practice card: * * .typing-practice-card[data-pause-message] * * Never hide that element. Hide only the pseudo-elements that display the * attribute text, otherwise the review card, lesson header, and controls all * disappear together. */body.lesson-inline-intro-open .typing-practice-card[data-pause-message]::before,body.lesson-inline-intro-open .typing-practice-card[data-pause-message]::after,body.lesson-inline-intro-open .typing-practice-card.paused::before,body.lesson-inline-intro-open .typing-practice-card.paused::after,body.lesson-inline-intro-open .typing-practice-card.is-paused::before,body.lesson-inline-intro-open .typing-practice-card.is-paused::after,body.lesson-inline-intro-open .typing-practice-card[data-paused="true"]::before,body.lesson-inline-intro-open .typing-practice-card[data-paused="true"]::after{display:none !important;visibility:hidden !important;opacity:0 !important;content:none !important;pointer-events:none !important}/* Keep both review types visible and distinct while the timer is paused. */body.lesson-inline-intro-open .typing-practice-card[data-pause-message]{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important}body.lesson-inline-intro-open #lessonIntroPanel{display:block;visibility:visible;opacity:1}/* ========================================================== COMPACT, CLICKABLE LESSON RESULTS v17.1.4 ========================================================== */.results-modal{overflow-y:auto;padding:16px;overscroll-behavior:contain;pointer-events:auto !important}.results-modal > .results-card{position:relative;z-index:1;width:min(100%, 420px);max-width:420px;max-height:calc(100dvh - 32px);box-sizing:border-box;padding:16px;overflow-x:hidden;overflow-y:auto;border-radius:16px;pointer-events:auto !important;-webkit-overflow-scrolling:touch}.results-card .results-icon{margin-bottom:4px;font-size:30px;line-height:1}.results-card > h2{margin-bottom:5px;font-size:clamp(1.25rem, 3vw, 1.55rem);line-height:1.2}.results-card .results-message{margin-bottom:10px;font-size:.82rem;line-height:1.45}.results-card .results-grid{gap:8px;margin-bottom:10px}.results-card .result-item{padding:9px 8px}.results-card .result-label{margin-bottom:4px;font-size:.75rem}.results-card .result-value{font-size:1.15rem;line-height:1.15}.results-card .result-practice-status{margin-bottom:9px;padding:9px}.results-card .result-grade{margin-bottom:10px;font-size:.9rem}.results-card #resultGrade{min-width:32px;height:32px;font-size:1rem}.results-card .next-lesson-preview{margin-bottom:10px;padding:9px}.results-card .next-lesson-preview-keys{margin-top:5px}.results-card .results-actions{position:static;z-index:auto;display:flex;gap:10px;padding-top:4px;background:none !important;pointer-events:auto !important}.results-card .result-button{position:relative;z-index:5;flex:1 1 0;min-width:0;min-height:42px;padding:9px 12px;cursor:pointer !important;pointer-events:auto !important;touch-action:manipulation;user-select:none;-webkit-user-select:none}.results-card .result-button:focus-visible{outline:3px solid rgba(37, 99, 235, .35);outline-offset:3px}@media (max-width: 760px){.results-modal{align-items:center;padding:8px}.results-modal > .results-card{width:100%;max-height:calc(100dvh - 16px);padding:17px 14px;border-radius:14px}.results-card .results-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.results-card .results-actions{grid-template-columns:none;flex-direction:column}.results-card .result-button{width:100%}}/* v17.1.4 compact completion refinements */.results-card .next-lesson-preview-kicker{margin-bottom:2px;font-size:.62rem}.results-card .next-lesson-preview h3{font-size:.92rem;line-height:1.25}.results-card .next-lesson-preview p{margin-top:3px;font-size:.74rem;line-height:1.35}.results-card .next-key-badge{min-height:26px;padding:4px 8px;font-size:.68rem}.results-card::after{margin-top:10px;font-size:10px}@media (max-width: 760px){.results-modal > .results-card{max-width:410px;padding:14px 12px}}/* ========================================================== v17.8.93 — TYPE-TO-CONTINUE NEW-KEY ONBOARDING ========================================================== */.lesson-intro-practice-status{justify-self:center;max-width:760px;padding:8px 13px;color:#235fbe;background:rgba(231, 241, 255, .92);border:1px solid #bfd7fa;border-radius:999px;font-size:.74rem;font-weight:800;line-height:1.35;text-align:center}.lesson-intro-practice-status[hidden]{display:none !important}.lesson-intro-practice-status.is-complete{color:#187448;background:#e9f8ef;border-color:#a8dec0}.lesson-intro-key-card{position:relative;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.lesson-intro-key-check{display:grid;flex:0 0 24px;width:24px;height:24px;margin-left:auto;place-items:center;color:transparent;background:#f1f5fa;border:1px solid #d8e2ee;border-radius:999px;font-size:.75rem;font-weight:900;transition:all .16s ease}.lesson-intro-key-card.intro-key-complete{background:#f2fbf6;border-color:#8fd3ae;box-shadow:0 7px 20px rgba(32, 135, 84, .10)}.lesson-intro-key-card.intro-key-complete .lesson-intro-keycap{background:linear-gradient( 145deg, #2cac69, #18854d );box-shadow:inset 0 1px 0 rgba(255, 255, 255, .30),0 7px 16px rgba(27, 139, 79, .18)}.lesson-intro-key-card.intro-key-complete .lesson-intro-key-check{color:#ffffff;background:#23965a;border-color:#23965a}.home-row-finger-map > span,.home-row-space-guide{transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.home-row-finger-map > span.intro-key-complete,.home-row-space-guide.intro-key-complete{background:#eefaf3;border-color:#83cea5;box-shadow:inset 0 -3px 0 rgba(31, 147, 84, .12),0 0 0 3px rgba(31, 147, 84, .08)}.home-row-finger-map > span.intro-key-complete b,.home-row-space-guide.intro-key-complete b{color:#18854d}.lesson-intro-key-card.intro-key-pressed,.home-row-finger-map > span.intro-key-pressed,.home-row-space-guide.intro-key-pressed{animation:lessonIntroPromptPulse .22s ease-out}#keyboardContainer .key.lesson-intro-key-pressed{animation:lessonIntroKeyboardPulse .22s ease-out;background:rgba(40, 174, 102, .24) !important;border-color:#2cad69 !important;box-shadow:inset 0 0 0 2px rgba(42, 173, 105, .34),0 0 0 6px rgba(42, 173, 105, .14) !important}@keyframes lessonIntroPromptPulse{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}@keyframes lessonIntroKeyboardPulse{0%{transform:translateY(0) scale(1)}45%{transform:translateY(2px) scale(.985)}100%{transform:translateY(0) scale(1)}}html[data-theme="dark"] .lesson-intro-practice-status{color:#bcd7ff;background:#172a47;border-color:#365b8d}html[data-theme="dark"] .lesson-intro-practice-status.is-complete{color:#ace0c2;background:#153328;border-color:#2d6748}html[data-theme="dark"] .lesson-intro-key-card.intro-key-complete,html[data-theme="dark"] .home-row-finger-map > span.intro-key-complete,html[data-theme="dark"] .home-row-space-guide.intro-key-complete{background:#153328;border-color:#347754}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-intro-practice-status{color:#bcd7ff;background:#172a47;border-color:#365b8d}html[data-theme="system"] .lesson-intro-practice-status.is-complete,html[data-theme="system"] .lesson-intro-key-card.intro-key-complete,html[data-theme="system"] .home-row-finger-map > span.intro-key-complete,html[data-theme="system"] .home-row-space-guide.intro-key-complete{color:#ace0c2;background:#153328;border-color:#347754}}@media (prefers-reduced-motion: reduce){.lesson-intro-key-card,.home-row-finger-map > span,.home-row-space-guide,.lesson-intro-key-check,#keyboardContainer .key{transition:none !important;animation:none !important}}/* Source: /css/readable-lesson-tips.css *//* ========================================================== TypingTutor.Online Readable Lesson Tips v17.0.19 File: css/readable-lesson-tips.css ========================================================== *//* * The earlier compact row layout allowed broad inherited styles and limited * widths to compress or truncate Goal, Tip, Mistake, and Practice text. * * This final stylesheet loads last and gives every tip its own readable row. */.typing-practice-card #lessonTipsPanel.lesson-tips-panel{position:absolute !important;z-index:500 !important;top:calc(100% - 4px) !important;right:14px !important;left:auto !important;display:block;width:min(560px, calc(100vw - 44px)) !important;min-width:0 !important;max-width:560px !important;max-height:min(620px, 72vh) !important;margin:0 !important;padding:18px !important;overflow-x:hidden !important;overflow-y:auto !important;color:#243249 !important;background:#ffffff !important;border:1px solid #d8e2ef !important;border-radius:18px !important;box-shadow:0 24px 70px rgba(15, 23, 42, .22) !important;white-space:normal !important;text-align:left !important}.typing-practice-card #lessonTipsPanel.lesson-tips-panel[hidden]{display:none !important}.lesson-tips-header{display:block !important;margin:0 0 14px !important;padding:0 0 13px !important;border:0 !important;border-bottom:1px solid #e2e9f2 !important}.lesson-tips-header > div{display:flex !important;gap:11px !important;align-items:flex-start !important}.lesson-tips-header-icon{display:inline-flex !important;flex:0 0 auto !important;align-items:center !important;justify-content:center !important;width:40px !important;height:40px !important;background:#eef5ff !important;border-radius:11px !important;font-size:1.1rem !important}.lesson-tips-header h3{margin:0 !important;color:#172237 !important;font-size:1.05rem !important;font-weight:800 !important;line-height:1.25 !important;white-space:normal !important}.lesson-tips-header p{display:block !important;margin:3px 0 0 !important;padding:0 !important;color:#68768c !important;font-size:.8rem !important;line-height:1.45 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important}.lesson-tips-list{display:grid !important;grid-template-columns:minmax(0, 1fr) !important;gap:10px !important;width:100% !important;min-width:0 !important}.lesson-tip-item{display:grid !important;grid-template-columns:40px minmax(0, 1fr) !important;gap:11px !important;align-items:flex-start !important;width:100% !important;min-width:0 !important;margin:0 !important;padding:12px 13px !important;background:#f8fafc !important;border:1px solid #e1e8f1 !important;border-radius:13px !important;white-space:normal !important;overflow:visible !important}.lesson-tip-icon{display:inline-flex !important;flex:0 0 auto !important;align-items:center !important;justify-content:center !important;width:38px !important;height:38px !important;background:#ffffff !important;border:1px solid #e0e8f2 !important;border-radius:10px !important;font-size:1rem !important;line-height:1 !important}.lesson-tip-content{display:grid !important;grid-template-columns:minmax(0, 1fr) !important;gap:4px !important;min-width:0 !important;width:100% !important}.lesson-tip-content strong{display:block !important;margin:0 !important;color:#18253b !important;font-size:.82rem !important;font-weight:800 !important;line-height:1.3 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important}.lesson-tip-content > span{display:block !important;min-width:0 !important;width:100% !important;color:#526178 !important;font-size:.88rem !important;font-weight:500 !important;line-height:1.55 !important;white-space:normal !important;overflow:visible !important;overflow-wrap:anywhere !important;word-break:normal !important;text-overflow:clip !important}.lesson-tip-goal{border-left:4px solid #4d8df7 !important}.lesson-tip-guidance{border-left:4px solid #e4af22 !important}.lesson-tip-mistake{border-left:4px solid #ee875c !important}.lesson-tip-practice{border-left:4px solid #48a878 !important}/* Dark theme */html[data-theme="dark"] .typing-practice-card #lessonTipsPanel.lesson-tips-panel{color:#e8eef8 !important;background:#111a2b !important;border-color:#2b3d57 !important;box-shadow:0 28px 80px rgba(0, 0, 0, .48) !important}html[data-theme="dark"] .lesson-tips-header{border-bottom-color:#2b3c55 !important}html[data-theme="dark"] .lesson-tips-header-icon{background:#192b47 !important}html[data-theme="dark"] .lesson-tips-header h3,html[data-theme="dark"] .lesson-tip-content strong{color:#f0f5ff !important}html[data-theme="dark"] .lesson-tips-header p,html[data-theme="dark"] .lesson-tip-content > span{color:#b7c4d7 !important}html[data-theme="dark"] .lesson-tip-item{background:#162238 !important;border-color:#2c405b !important}html[data-theme="dark"] .lesson-tip-icon{background:#111c30 !important;border-color:#30455f !important}/* System dark theme */@media (prefers-color-scheme: dark){html[data-theme="system"] .typing-practice-card #lessonTipsPanel.lesson-tips-panel{color:#e8eef8 !important;background:#111a2b !important;border-color:#2b3d57 !important}html[data-theme="system"] .lesson-tips-header{border-bottom-color:#2b3c55 !important}html[data-theme="system"] .lesson-tips-header-icon{background:#192b47 !important}html[data-theme="system"] .lesson-tips-header h3,html[data-theme="system"] .lesson-tip-content strong{color:#f0f5ff !important}html[data-theme="system"] .lesson-tips-header p,html[data-theme="system"] .lesson-tip-content > span{color:#b7c4d7 !important}html[data-theme="system"] .lesson-tip-item{background:#162238 !important;border-color:#2c405b !important}html[data-theme="system"] .lesson-tip-icon{background:#111c30 !important;border-color:#30455f !important}}@media (max-width: 760px){.typing-practice-card #lessonTipsPanel.lesson-tips-panel{position:fixed !important;top:auto !important;right:10px !important;bottom:10px !important;left:10px !important;width:auto !important;max-width:none !important;max-height:min(78vh, 620px) !important;padding:15px !important;border-radius:18px !important}.lesson-tip-item{grid-template-columns:36px minmax(0, 1fr) !important;gap:9px !important;padding:11px !important}.lesson-tip-icon{width:34px !important;height:34px !important}.lesson-tip-content > span{font-size:.84rem !important}}/* Source: /css/integrated-current-lesson.css *//* ========================================================== TypingTutor.Online Integrated Current Lesson + Focused Viewport v17.0.15 File: css/integrated-current-lesson.css ========================================================== *//* * The current-lesson information now belongs to the active lesson card. * Course progress remains separate above it. */.typing-practice-card{position:relative;display:flex !important;min-height:0 !important;height:auto !important;flex-direction:column;overflow:visible !important}.typing-practice-card > .lesson-focus-bar{position:relative;display:grid;grid-template-columns:minmax(220px, .72fr) minmax(520px, 1.55fr) auto;gap:14px;align-items:center;width:100%;margin:0 !important;padding:12px 14px;border:0 !important;border-bottom:1px solid var(--border-color, #dbe3ef) !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important}.typing-practice-card .lesson-focus-main{min-width:0}.typing-practice-card .lesson-focus-icon{width:42px;height:42px;border-radius:12px}.typing-practice-card .lesson-focus-title{min-width:0}.typing-practice-card .lesson-focus-title > span{font-size:.68rem}.typing-practice-card .lesson-focus-title h2{overflow:hidden;margin-top:2px;font-size:clamp(1rem, 1.45vw, 1.3rem);line-height:1.18;text-overflow:ellipsis;white-space:nowrap}.typing-practice-card .lesson-focus-meta{display:flex;min-width:0;gap:8px;align-items:stretch;justify-content:center;flex-wrap:nowrap}.typing-practice-card .lesson-focus-meta > span{min-width:0;padding:8px 10px;border-radius:11px;white-space:nowrap}.typing-practice-card .lesson-focus-meta > span > strong{font-size:.64rem}.typing-practice-card .lesson-focus-progress{min-width:128px !important}.typing-practice-card .lesson-tips-button{min-height:42px;padding:9px 15px;border-radius:11px;white-space:nowrap}/* * Tips are anchored to the compact lesson header and do not change the * lesson-card height when opened. */.typing-practice-card .lesson-tips-panel{position:absolute;z-index:120;top:calc(100% - 4px);right:14px;width:min(430px, calc(100vw - 36px));max-height:min(460px, 70vh);margin:0 !important;padding:16px;overflow-y:auto;border:1px solid var(--border-color, #dbe3ef);border-radius:15px;background:var(--surface-color, #ffffff);box-shadow:0 18px 48px rgba(15, 23, 42, .18)}.typing-practice-card .lesson-tips-panel[hidden]{display:none !important}.typing-practice-card .lesson-tips-panel p{margin:0;padding:9px 0}.typing-practice-card .lesson-tips-panel p + p{border-top:1px solid var(--border-color, #e5ebf3)}/* Compact stage row after the integrated lesson header. */.typing-practice-card .practice-toolbar{display:grid !important;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);min-height:58px;padding:10px 16px !important;align-items:center}.typing-practice-card .practice-toolbar .stage-label{justify-self:start}.typing-practice-card .practice-toolbar .time-left{justify-self:center}/* * EXACT DESKTOP VIEWPORT: * Three complete lines, without a partial fourth line. * Child characters inherit the same line height to prevent drift. */#lessonText{--lesson-visible-lines:3;--lesson-exact-line-height:1.62em;--lesson-vertical-padding:9px;box-sizing:border-box !important;height:calc( var(--lesson-visible-lines) * var(--lesson-exact-line-height) + 2 * var(--lesson-vertical-padding) ) !important;min-height:calc( var(--lesson-visible-lines) * var(--lesson-exact-line-height) + 2 * var(--lesson-vertical-padding) ) !important;max-height:calc( var(--lesson-visible-lines) * var(--lesson-exact-line-height) + 2 * var(--lesson-vertical-padding) ) !important;margin:0 !important;padding:var(--lesson-vertical-padding) 2.2% !important;overflow:hidden !important;line-height:var(--lesson-exact-line-height) !important}#lessonText .lesson-character{line-height:inherit !important}.typing-practice-card .practice-footer{min-height:66px;padding-top:9px !important;padding-bottom:9px !important}/* * Keep the side statistics beautiful and equal to the new compact card. */.lesson-practice-grid{align-items:stretch !important}.lesson-practice-grid .statistics-panel{align-self:stretch;grid-template-rows:repeat(5, minmax(0, 1fr))}.lesson-practice-grid .statistics-panel .stat{min-height:0}/* Dark mode panel depth */html[data-theme="dark"] .typing-practice-card .lesson-tips-panel{background:#111a2b;border-color:#2a3a53;box-shadow:0 20px 55px rgba(0, 0, 0, .38)}/* * Medium desktop: allow lesson metadata to wrap without increasing the * separate page height significantly. */@media (max-width: 1180px){.typing-practice-card > .lesson-focus-bar{grid-template-columns:minmax(220px, 1fr) auto}.typing-practice-card .lesson-focus-meta{grid-column:1/-1;grid-row:2;justify-content:flex-start;flex-wrap:wrap}.typing-practice-card .lesson-tips-button{grid-column:2;grid-row:1}}/* * Mobile: * - integrated lesson details use two compact rows * - exactly two complete typing lines * - complete card is allowed to shrink */@media (max-width: 760px){.typing-practice-card > .lesson-focus-bar{grid-template-columns:minmax(0, 1fr) auto;gap:10px;padding:12px}.typing-practice-card .lesson-focus-main{grid-column:1;grid-row:1}.typing-practice-card .lesson-tips-button{grid-column:2;grid-row:1;min-height:38px;padding:8px 11px}.typing-practice-card .lesson-focus-meta{grid-column:1/-1;grid-row:2;gap:7px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.typing-practice-card .lesson-focus-meta::-webkit-scrollbar{display:none}.typing-practice-card .lesson-focus-meta > span{flex:0 0 auto;padding:7px 9px}.typing-practice-card .lesson-focus-progress{min-width:118px !important}.typing-practice-card .lesson-tips-panel{top:calc(100% - 3px);right:10px;left:10px;width:auto}.typing-practice-card .practice-toolbar{grid-template-columns:minmax(0, 1fr) auto;min-height:56px;padding:10px 12px !important}.typing-practice-card .practice-toolbar .time-left{justify-self:end}#lessonText{--lesson-visible-lines:2;--lesson-exact-line-height:1.62em;--lesson-vertical-padding:8px;height:calc( var(--lesson-visible-lines) * var(--lesson-exact-line-height) + 2 * var(--lesson-vertical-padding) ) !important;min-height:calc( var(--lesson-visible-lines) * var(--lesson-exact-line-height) + 2 * var(--lesson-vertical-padding) ) !important;max-height:calc( var(--lesson-visible-lines) * var(--lesson-exact-line-height) + 2 * var(--lesson-vertical-padding) ) !important;padding:var(--lesson-vertical-padding) 14px !important}}@media (max-width: 430px){.typing-practice-card .lesson-focus-icon{display:none}.typing-practice-card .lesson-focus-title h2{font-size:1rem}}/* ========================================================== STABLE NON-SCROLLING LESSON PAGES v17.0.16 ========================================================== *//* * The renderer now displays a fixed block of three desktop lines or two * mobile lines. It replaces the complete block only after it is finished. * No smooth scrolling, scroll positioning, or per-key movement is used. */#lessonText{scroll-behavior:auto !important;overscroll-behavior:none !important;overflow:hidden !important;overflow-anchor:none !important}#lessonText,#lessonText .lesson-character{transform:none !important}/* * Current-character pulse may change only the glow. It must never translate, * resize, or shift the surrounding text. */#lessonText .current-character{translate:none !important}/* ========================================================== ZERO-REFLOW CHARACTER METRICS v17.0.17 ========================================================== *//* * The highlighted character previously inherited metric-changing styles * such as padding, border, font weight, or transforms. Near a line ending, * that temporary width change could move one character to another line, * making the third row appear to vibrate. * * Every character state now uses exactly the same box dimensions. */#lessonText .lesson-character,#lessonText .typed-character,#lessonText .future-character,#lessonText .wrong-character,#lessonText .current-character{display:inline-block !important;position:relative !important;box-sizing:border-box !important;width:auto !important;min-width:0 !important;max-width:none !important;margin:0 !important;padding:0 !important;border:0 !important;outline:0 !important;font-family:inherit !important;font-size:inherit !important;font-style:inherit !important;font-weight:inherit !important;line-height:inherit !important;letter-spacing:inherit !important;word-spacing:inherit !important;vertical-align:baseline !important;transform:none !important;translate:none !important;scale:none !important;animation:none !important}/* * Background and shadow do not affect width or line wrapping. The current * character remains clearly visible without changing text geometry. */#lessonText .current-character{color:#ffffff !important;background:#2878ff !important;border-radius:.16em !important;box-shadow:0 0 0 .08em rgba(40, 120, 255, .30) !important}#lessonText .wrong-character{border-radius:.12em !important}/* * Spaces use a non-breaking-space glyph and therefore keep their normal * monospace width. Highlighting a space cannot enlarge the line. */#lessonText .lesson-character{white-space:pre !important}/* Source: /css/course-progress-navigation.css *//* ========================================================== TypingTutor.Online Final Lesson and Course Navigation v17.1.7 File: css/course-progress-navigation.css ========================================================== *//* ========================================================== REMOVE THE DUPLICATE COURSE BAR FROM THE COURSE PAGE ========================================================== */#courseModePanel #courseDashboard{width:100%;margin:0 !important;padding:0 !important}#courseDashboard .course-focus-bar{display:none !important}#courseDashboard #courseLessonList[hidden]{display:none !important}#courseDashboard #courseLessonList:not([hidden]){margin-top:0 !important;margin-bottom:14px}/* ========================================================== COURSE NAVIGATION BADGE ========================================================== */#modeSwitcher .mode-button[data-course-lessons-toggle="navigation"]{overflow:visible}.course-nav-progress-badge{display:inline-flex;flex:0 0 auto;min-width:34px;min-height:22px;padding:3px 7px;align-items:center;justify-content:center;color:#315175;background:#eef3fa;border:1px solid #d8e2ef;border-radius:999px;font-size:.67rem;font-weight:800;line-height:1}.mode-button-active .course-nav-progress-badge{color:#ffffff;background:rgba(255, 255, 255, .20);border-color:rgba(255, 255, 255, .30)}[data-course-lessons-toggle] .course-nav-progress-badge{pointer-events:none}/* ========================================================== CLICKABLE CURRENT LESSON SHORTCUT ========================================================== */.lesson-number-toggle{display:inline-flex;width:fit-content;max-width:100%;margin:0;padding:0;color:inherit;background:transparent;border:0;border-radius:6px;font:inherit;font-size:.68rem;font-weight:700;line-height:1.3;cursor:pointer;text-align:left}.lesson-number-toggle:hover{color:var(--primary-color, #2563eb);text-decoration:underline;text-underline-offset:3px}.lesson-number-toggle:focus-visible{outline:3px solid rgba(47, 103, 246, .24);outline-offset:3px}.lesson-number-toggle::after{content:" ▾";opacity:.62;font-size:.78em}.lesson-number-toggle.course-lessons-toggle-open::after{content:" ▴"}/* ========================================================== COURSE PROGRESS ON STATISTICS PAGE ========================================================== */.statistics-course-progress{display:grid;grid-template-columns:minmax(220px, .82fr) minmax(300px, 1.45fr) minmax(250px, .8fr);gap:18px;align-items:center;width:calc(100% - 32px);max-width:1400px;margin:18px auto 12px;padding:18px 20px;color:#26354d;background:linear-gradient( 135deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .98) );border:1px solid #dce5f1;border-radius:18px;box-shadow:0 12px 34px rgba(15, 23, 42, .07)}.statistics-course-progress-heading{display:flex;gap:12px;min-width:0;align-items:center}.statistics-course-progress-icon{display:inline-flex;flex:0 0 auto;width:48px;height:48px;align-items:center;justify-content:center;background:#edf5ff;border:1px solid #d7e7fb;border-radius:13px;font-size:1.15rem}.statistics-course-progress-eyebrow{display:block;margin-bottom:3px;color:#62728a;font-size:.68rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.statistics-course-progress-heading h2{margin:0;color:#16243b;font-size:clamp(1rem, 1.5vw, 1.28rem);line-height:1.25}.statistics-course-progress-meter{min-width:0}.statistics-course-progress-meter-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:8px;color:#607089;font-size:.75rem;font-weight:700}.statistics-course-progress-meter-heading strong{color:#1f67dd;font-size:1rem}.statistics-course-progress-track{position:relative;width:100%;height:10px;overflow:hidden;background:#e7eef7;border-radius:999px}#statisticsCourseProgressFill{display:block;width:0;height:100%;background:linear-gradient( 90deg, #2e78f5, #5c95ff );border-radius:inherit;transition:width .28s ease}.statistics-course-progress-facts{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}.statistics-course-progress-facts > span{display:grid;min-width:0;min-height:62px;padding:10px 12px;place-content:center;background:rgba(238, 245, 255, .72);border:1px solid #dce7f5;border-radius:12px;text-align:center}.statistics-course-progress-facts strong{color:#18273f;font-size:1rem;line-height:1.1}.statistics-course-progress-facts small{margin-top:4px;color:#718097;font-size:.62rem;font-weight:700;line-height:1.25}/* ========================================================== DARK / SYSTEM DARK ========================================================== */html[data-theme="dark"] .course-nav-progress-badge{color:#c4d5ed;background:#1c2a40;border-color:#344760}html[data-theme="dark"] .mode-button-active .course-nav-progress-badge{color:#ffffff;background:rgba(255, 255, 255, .16);border-color:rgba(255, 255, 255, .26)}html[data-theme="dark"] .statistics-course-progress{color:#dfe9f7;background:linear-gradient( 135deg, #121d30, #101a2b );border-color:#2b3c55;box-shadow:0 18px 46px rgba(0, 0, 0, .30)}html[data-theme="dark"] .statistics-course-progress-icon{background:#192c49;border-color:#304967}html[data-theme="dark"] .statistics-course-progress-eyebrow,html[data-theme="dark"] .statistics-course-progress-meter-heading{color:#aab8cc}html[data-theme="dark"] .statistics-course-progress-heading h2,html[data-theme="dark"] .statistics-course-progress-facts strong{color:#f0f5ff}html[data-theme="dark"] .statistics-course-progress-track{background:#223149}html[data-theme="dark"] .statistics-course-progress-facts > span{background:#17243a;border-color:#2d425d}html[data-theme="dark"] .statistics-course-progress-facts small{color:#a8b6ca}@media (prefers-color-scheme: dark){html[data-theme="system"] .course-nav-progress-badge{color:#c4d5ed;background:#1c2a40;border-color:#344760}html[data-theme="system"] .statistics-course-progress{color:#dfe9f7;background:linear-gradient( 135deg, #121d30, #101a2b );border-color:#2b3c55}html[data-theme="system"] .statistics-course-progress-heading h2,html[data-theme="system"] .statistics-course-progress-facts strong{color:#f0f5ff}html[data-theme="system"] .statistics-course-progress-facts > span{background:#17243a;border-color:#2d425d}}/* ========================================================== RESPONSIVE ========================================================== */@media (max-width: 980px){.statistics-course-progress{grid-template-columns:minmax(210px, .8fr) minmax(300px, 1.2fr)}.statistics-course-progress-facts{grid-column:1/-1}}@media (max-width: 760px){.course-nav-progress-badge{min-width:30px;min-height:20px;padding:3px 6px;font-size:.61rem}.statistics-course-progress{grid-template-columns:minmax(0, 1fr);width:calc(100% - 20px);margin:12px auto 10px;padding:15px;border-radius:16px}.statistics-course-progress-facts{grid-column:auto}.lesson-number-toggle{font-size:.66rem}}@media (prefers-reduced-motion: reduce){#statisticsCourseProgressFill{transition:none}}/* ========================================================== DIRECT LESSON BUTTON v17.0.27 ========================================================== */#modeSwitcher .lesson-home-nav-button{position:relative;white-space:nowrap}.lesson-home-nav-icon{display:inline-block;line-height:1}.lesson-home-nav-label{display:inline-block}#modeSwitcher .lesson-home-nav-button.lesson-home-button-current{box-shadow:0 10px 24px rgba(47, 103, 246, .20)}#modeSwitcher .lesson-home-nav-button:focus-visible{outline:3px solid rgba(47, 103, 246, .28);outline-offset:3px}/* * Lesson is the current tutor screen. Course is the selector. Keeping the * two actions separate prevents learners from becoming trapped in Tests, * Achievements, Statistics, or Settings. */#modeSwitcher .lesson-home-nav-button[aria-current="page"]{cursor:default}@media (max-width: 760px){#modeSwitcher .lesson-home-nav-button{min-width:0}#modeSwitcher .lesson-home-nav-icon{margin-right:2px}}/* ========================================================== FINAL TOP NAVIGATION v17.0.28 ========================================================== */.primary-mode-navigation{display:flex;min-width:0;gap:8px;align-items:center;justify-content:center}.primary-mode-navigation #modeSwitcher{min-width:0}/* * Permanent Lesson button. It intentionally sits outside the application's * dynamic #modeSwitcher so it cannot disappear during a rerender. */.lesson-home-nav-button{display:inline-flex;min-height:46px;padding:10px 16px;gap:8px;align-items:center;justify-content:center;color:#172235;background:transparent;border:1px solid transparent;border-radius:11px;font:inherit;font-size:.92rem;font-weight:750;line-height:1;cursor:pointer;white-space:nowrap;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .16s ease}.lesson-home-nav-button:hover{color:#165fd0;background:#f2f7ff;border-color:#dbe8fa}.lesson-home-nav-button:active{transform:translateY(1px)}.lesson-home-nav-button:focus-visible{outline:3px solid rgba(47, 103, 246, .25);outline-offset:3px}.lesson-home-nav-button-active{color:#ffffff;background:linear-gradient( 135deg, #246df0, #285ee5 );border-color:rgba(31, 92, 222, .55);box-shadow:0 10px 23px rgba(47, 103, 246, .24)}.lesson-home-nav-button-active:hover{color:#ffffff;background:linear-gradient( 135deg, #2165df, #2457d5 );border-color:rgba(31, 92, 222, .64)}.lesson-home-nav-icon{display:inline-flex;min-width:1.15em;align-items:center;justify-content:center;font-size:18px;line-height:1;transform:translateY(-1px)}/* The final header no longer contains the More Practice dropdown. */.more-practice-menu,.more-practice-toggle,.more-practice-dropdown{display:none !important}/* Remove the obsolete badge/switch shape from Course. */.course-nav-progress-badge{display:none !important}html[data-theme="dark"] .lesson-home-nav-button{color:#dce7f7}html[data-theme="dark"] .lesson-home-nav-button:hover{color:#ffffff;background:#17263c;border-color:#304662}html[data-theme="dark"] .lesson-home-nav-button-active{color:#ffffff;background:linear-gradient( 135deg, #326fe8, #3c63db );border-color:#527dd8}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-home-nav-button{color:#dce7f7}html[data-theme="system"] .lesson-home-nav-button:hover{color:#ffffff;background:#17263c;border-color:#304662}}@media (max-width: 1100px){.primary-mode-navigation{gap:5px}.lesson-home-nav-button{min-height:42px;padding:9px 11px;font-size:.83rem}}@media (max-width: 760px){.primary-mode-navigation{width:100%;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.primary-mode-navigation::-webkit-scrollbar{display:none}.lesson-home-nav-button{flex:0 0 auto;min-height:40px;padding:8px 10px;font-size:.78rem}}@media (prefers-reduced-motion: reduce){.lesson-home-nav-button{transition:none}}/* Lesson icon visual balance v17.1.8 */#header .lesson-home-nav-icon{display:inline-flex;min-width:19px;align-items:center;justify-content:center;font-size:18px;line-height:1;transform:translateY(-1px)}@media (max-width: 1100px){#header .lesson-home-nav-icon{min-width:17px;font-size:16px}}@media (max-width: 560px){#header .lesson-home-nav-icon{min-width:16px;font-size:15px}}/* ========================================================== COURSE SELECTOR VIEW SEPARATION v17.1.7 ========================================================== *//* * Lesson and Course are separate navigation choices: * - Lesson shows the active typing workspace. * - Course shows only the 60-lesson selector. * * Hiding the tutor workspace while the selector is open removes the * duplicated current lesson below the course list. JavaScript also pauses * an actively running lesson and blocks lesson keystrokes in this state. */body.course-lessons-open #courseModePanel > #lessonAdTop,body.course-lessons-open #courseModePanel > #newKeyNotice,body.course-lessons-open #courseModePanel > .lesson-practice-grid,body.course-lessons-open #courseModePanel > .typing-controls-grid,body.course-lessons-open #courseModePanel > #lessonAdBottom,body.course-lessons-open #courseModePanel > #progressSection{display:none !important}body.course-lessons-open #courseDashboard #courseLessonList:not([hidden]){margin-bottom:0}/* Source: /css/hand-style-quick-controls.css *//* ========================================================== TypingTutor.Online Optional Hand Guide + Unified Four Hand Styles v17.10.94 File: css/hand-style-quick-controls.css ========================================================== */.hand-style-quick-controls{display:flex;grid-column:1;width:min(100%, 920px);min-height:48px;margin:-4px auto 0;padding:7px;gap:7px;align-items:center;justify-content:flex-start;justify-self:center;color:#334155;background:rgba(255, 255, 255, .96);border:1px solid #dce5f1;border-radius:14px;box-shadow:0 8px 24px rgba(15, 23, 42, .06)}.view-hand-guide-button{display:inline-flex;min-height:38px;padding:8px 13px;gap:7px;flex:0 0 auto;align-items:center;justify-content:center;color:#1f5fc8;background:#eef6ff;border:1px solid #bfd5f4;border-radius:10px;font:inherit;font-size:.76rem;font-weight:800;line-height:1;cursor:pointer;white-space:nowrap;transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}.view-hand-guide-button:hover{color:#174ea6;background:#ffffff;border-color:#8fb6eb;box-shadow:0 5px 14px rgba(47, 103, 246, .13)}.view-hand-guide-button:active{transform:translateY(1px)}.view-hand-guide-button:focus-visible{outline:3px solid rgba(47, 103, 246, .22);outline-offset:2px}.hand-style-quick-label{flex:0 0 auto;padding:0 7px;color:#52627a;font-size:.70rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}.hand-style-quick-options{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));min-width:0;padding:3px;gap:3px;background:#f1f5fa;border-radius:10px}.hand-style-quick-button{min-height:32px;padding:7px 11px;color:#42526a;background:transparent;border:1px solid transparent;border-radius:8px;font:inherit;font-size:.72rem;font-weight:750;line-height:1;cursor:pointer;white-space:nowrap;transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}.hand-style-quick-button:hover{color:#1f5fc8;background:#ffffff;border-color:#d8e4f2}.hand-style-quick-button:active{transform:translateY(1px)}.hand-style-quick-button:focus-visible{outline:3px solid rgba(47, 103, 246, .22);outline-offset:2px}.hand-style-quick-button-active{color:#ffffff;background:linear-gradient( 135deg, #2f75f0, #315fe0 );border-color:#2b63d9;box-shadow:0 5px 13px rgba(47, 103, 246, .22)}.hand-style-quick-button-active:hover{color:#ffffff;background:linear-gradient( 135deg, #286ce4, #2b58d3 );border-color:#285bc9}/* * Side Hands is a style, not an additional layer: * - Side selected: keyboard overlay hands are hidden and side panel appears. * - Any overlay style selected: side panel is hidden. */html[data-show-side-hands="true"] .keyboard-guidance-card{grid-column:1;grid-row:1}html[data-show-side-hands="true"] .hand-style-quick-controls{grid-column:1;grid-row:2}html[data-show-side-hands="true"] .hands-guidance-card{grid-column:2;grid-row:1/span 2}html[data-show-keyboard="false"] .hand-style-quick-controls{display:none !important}/* Dark theme */html[data-theme="dark"] .hand-style-quick-controls{color:#d5dfed;background:rgba(17, 26, 43, .96);border-color:#2c3e58;box-shadow:0 10px 28px rgba(0, 0, 0, .24)}html[data-theme="dark"] .view-hand-guide-button{color:#dbeafe;background:#1c3150;border-color:#3b5d89}html[data-theme="dark"] .view-hand-guide-button:hover{color:#ffffff;background:#254064;border-color:#5b83b8}html[data-theme="dark"] .hand-style-quick-label{color:#aebed2}html[data-theme="dark"] .hand-style-quick-options{background:#17243a}html[data-theme="dark"] .hand-style-quick-button{color:#c3d0e2}html[data-theme="dark"] .hand-style-quick-button:hover{color:#ffffff;background:#21314a;border-color:#3b526f}@media (prefers-color-scheme: dark){html[data-theme="system"] .hand-style-quick-controls{color:#d5dfed;background:rgba(17, 26, 43, .96);border-color:#2c3e58}html[data-theme="system"] .view-hand-guide-button{color:#dbeafe;background:#1c3150;border-color:#3b5d89}html[data-theme="system"] .view-hand-guide-button:hover{color:#ffffff;background:#254064;border-color:#5b83b8}html[data-theme="system"] .hand-style-quick-label{color:#aebed2}html[data-theme="system"] .hand-style-quick-options{background:#17243a}html[data-theme="system"] .hand-style-quick-button{color:#c3d0e2}}@media (max-width: 1240px){html[data-show-side-hands="true"] .keyboard-guidance-card,html[data-show-side-hands="true"] .hand-style-quick-controls,html[data-show-side-hands="true"] .hands-guidance-card{grid-column:1;grid-row:auto}}@media (max-width: 900px){.hand-style-quick-controls{width:min(100%, 680px);flex-wrap:wrap}.hand-style-quick-options{width:100%}}@media (max-width: 760px){.hand-style-quick-controls{display:none !important}}@media (prefers-reduced-motion: reduce){.view-hand-guide-button,.hand-style-quick-button{transition:none}}/* ========================================================== SIDE HANDS VISIBILITY REPAIR v17.0.31 ========================================================== *//* Never leave a keyboard-overlay hand visible in Side Hands mode. */html[data-hand-guidance-style="side"] #handsClassicOverlay,html[data-hand-guidance-style="side"] #handsKeyboardOverlay,html[data-hand-guidance="separate"] #handsClassicOverlay,html[data-hand-guidance="separate"] #handsKeyboardOverlay,html[data-show-side-hands="true"] #handsClassicOverlay,html[data-show-side-hands="true"] #handsKeyboardOverlay{display:none !important;visibility:hidden !important;opacity:0 !important}/* Show the real separate hand panel for every equivalent Side state. */html[data-hand-guidance-style="side"] .hands-guidance-card,html[data-hand-guidance="separate"] .hands-guidance-card,html[data-show-side-hands="true"] .hands-guidance-card{display:flex !important;visibility:visible !important;opacity:1 !important}/* Returning to an overlay style always removes the side panel. */html[data-hand-guidance="overlay"] .hands-guidance-card,html[data-show-side-hands="false"] .hands-guidance-card{display:none !important}/* v17.10.284: two tiny Premium markers, only on the existing homepage buttons. */.hand-style-quick-controls{position:relative}.hand-style-quick-button{display:inline-flex;align-items:center;justify-content:center;gap:4px}.tto-hand-premium-mark{display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;border:1px solid currentColor;border-radius:999px;padding:0 .2rem;font-size:.72rem;line-height:1;font-weight:800;letter-spacing:0;opacity:.9;white-space:nowrap;flex:0 0 auto}.tto-hand-premium-mark > [aria-hidden="true"]{display:block;transform:translateY(-0.02em)}.hand-style-quick-button[data-premium-locked="true"] .tto-hand-premium-mark{opacity:1;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}.tto-hand-premium-hint{position:absolute;bottom:calc(100% + 8px);right:0;max-width:min(310px,90vw);padding:10px 12px;border-radius:10px;background:#fff;border:1px solid #c7d5eb;box-shadow:0 8px 30px #0f172a26;font-size:.78rem;line-height:1.5;color:#263852;z-index:40}.tto-hand-premium-hint[hidden]{display:none !important}.tto-hand-premium-hint a{color:#205ce2;font-weight:800}html[data-theme="dark"] .tto-hand-premium-hint{background:#16243c;border-color:#455879;color:#e0e9f8}html[data-theme="dark"] .tto-hand-premium-hint a{color:#89b4ff}@media (prefers-color-scheme:dark){html[data-theme="system"] .tto-hand-premium-hint{background:#16243c;border-color:#455879;color:#e0e9f8}html[data-theme="system"] .tto-hand-premium-hint a{color:#89b4ff}}/* Source: /css/live-page-content.css *//* ========================================================== TypingTutor.Online Live Learning Content v17.0.34 File: css/live-page-content.css ========================================================== */.typing-learning-content{padding:34px 20px 20px;background:linear-gradient( 180deg, rgba(247, 250, 255, .72), rgba(255, 255, 255, 1) )}.typing-learning-content-inner{width:min(1180px, 100%);margin:0 auto}.typing-learning-heading{max-width:850px;margin:0 auto 24px;text-align:center}.typing-learning-heading > span{display:inline-block;margin-bottom:7px;color:#2768dc;font-size:.70rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.typing-learning-heading h2{margin:0 0 12px;color:#15233a;font-family:var(--font-heading, "Poppins", sans-serif);font-size:clamp(1.55rem, 2.5vw, 2.25rem);line-height:1.2}.typing-learning-heading p{margin:0;color:#5e6f87;font-size:.98rem;line-height:1.75}.typing-learning-card-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;margin-bottom:18px}.typing-learning-card,.typing-learning-method > article,.typing-learning-faq{background:#ffffff;border:1px solid #dfe7f2;border-radius:17px;box-shadow:0 10px 30px rgba(15, 23, 42, .055)}.typing-learning-card{padding:20px}.typing-learning-card-icon{display:inline-flex;width:42px;height:42px;margin-bottom:12px;align-items:center;justify-content:center;background:#edf5ff;border:1px solid #d9e9fd;border-radius:12px;font-size:1.05rem}.typing-learning-card h3,.typing-learning-method h3,.typing-learning-faq h3{margin:0 0 9px;color:#1b2a43;font-size:1rem;line-height:1.35}.typing-learning-card p,.typing-learning-method p,.typing-learning-method li,.typing-learning-faq p{color:#63738a;font-size:.88rem;line-height:1.7}.typing-learning-card p,.typing-learning-method p,.typing-learning-faq p{margin:0}.typing-learning-method{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;margin-bottom:18px}.typing-learning-method > article{padding:22px}.typing-learning-method ol{display:grid;gap:9px;margin:0;padding-left:1.2rem}.typing-learning-method li::marker{color:#2d6fe8;font-weight:800}.typing-learning-method p + p{margin-top:11px}.typing-learning-faq{padding:22px}.typing-learning-faq > h3{margin-bottom:13px}.typing-learning-faq details{border-top:1px solid #e4ebf4}.typing-learning-faq details:last-child{border-bottom:1px solid #e4ebf4}.typing-learning-faq summary{padding:14px 4px;color:#26364f;font-size:.88rem;font-weight:750;cursor:pointer}.typing-learning-faq details[open] summary{color:#2364d7}.typing-learning-faq details p{padding:0 4px 15px}/* Review navigation state */body.lesson-tips-review-open #lessonTipsButton{min-width:132px}html[data-theme="dark"] .typing-learning-content{background:linear-gradient( 180deg, #0e1727, #101929 )}html[data-theme="dark"] .typing-learning-heading h2,html[data-theme="dark"] .typing-learning-card h3,html[data-theme="dark"] .typing-learning-method h3,html[data-theme="dark"] .typing-learning-faq h3{color:#edf4ff}html[data-theme="dark"] .typing-learning-heading p,html[data-theme="dark"] .typing-learning-card p,html[data-theme="dark"] .typing-learning-method p,html[data-theme="dark"] .typing-learning-method li,html[data-theme="dark"] .typing-learning-faq p{color:#adbbcf}html[data-theme="dark"] .typing-learning-card,html[data-theme="dark"] .typing-learning-method > article,html[data-theme="dark"] .typing-learning-faq{background:#142035;border-color:#2c405b}html[data-theme="dark"] .typing-learning-card-icon{background:#1a3153;border-color:#315079}html[data-theme="dark"] .typing-learning-faq details,html[data-theme="dark"] .typing-learning-faq details:last-child{border-color:#2b3e58}html[data-theme="dark"] .typing-learning-faq summary{color:#dbe7f7}@media (prefers-color-scheme: dark){html[data-theme="system"] .typing-learning-content{background:linear-gradient( 180deg, #0e1727, #101929 )}html[data-theme="system"] .typing-learning-card,html[data-theme="system"] .typing-learning-method > article,html[data-theme="system"] .typing-learning-faq{background:#142035;border-color:#2c405b}html[data-theme="system"] .typing-learning-heading h2,html[data-theme="system"] .typing-learning-card h3,html[data-theme="system"] .typing-learning-method h3,html[data-theme="system"] .typing-learning-faq h3{color:#edf4ff}html[data-theme="system"] .typing-learning-heading p,html[data-theme="system"] .typing-learning-card p,html[data-theme="system"] .typing-learning-method p,html[data-theme="system"] .typing-learning-method li,html[data-theme="system"] .typing-learning-faq p{color:#adbbcf}}@media (max-width: 900px){.typing-learning-card-grid{grid-template-columns:minmax(0, 1fr)}.typing-learning-method{grid-template-columns:minmax(0, 1fr)}}@media (max-width: 760px){.typing-learning-content{padding:26px 12px 16px}.typing-learning-heading{text-align:left}.typing-learning-card,.typing-learning-method > article,.typing-learning-faq{padding:17px;border-radius:15px}}/* Source: /css/end-lesson-state.css *//* ========================================================== TypingTutor.Online End Lesson Isolation Fix v17.0.36 File: css/end-lesson-state.css ========================================================== */.lesson-ended-panel{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:14px 16px;align-items:start;min-height:235px;padding:24px 26px;color:#233149;background:linear-gradient( 135deg, #f5f9ff, #eef5ff );border-top:1px solid #dce7f4;border-bottom:1px solid #d8e5f4}.lesson-ended-panel[hidden]{display:none !important}.lesson-ended-icon{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;color:#d83a45;background:#fff1f2;border:1px solid #ffd3d7;border-radius:13px;font-size:1rem}.lesson-ended-copy{min-width:0}.lesson-ended-kicker{display:inline-block;margin-bottom:5px;color:#5b6f8d;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.lesson-ended-copy h3{margin:0 0 7px;color:#17253d;font-family:var(--font-heading, "Poppins", sans-serif);font-size:clamp(1.15rem, 1.7vw, 1.5rem);line-height:1.3}.lesson-ended-copy p{max-width:760px;margin:0;color:#62728a;font-size:.86rem;line-height:1.65}.lesson-ended-summary{grid-column:1/-1;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:9px}.lesson-ended-summary > span{display:grid;min-height:66px;padding:10px;place-content:center;gap:5px;background:rgba(255, 255, 255, .78);border:1px solid #dbe6f3;border-radius:12px;text-align:center}.lesson-ended-summary small{color:#6d7d94;font-size:.62rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase}.lesson-ended-summary strong{color:#1f64d4;font-size:1rem;line-height:1}.lesson-ended-actions{grid-column:1/-1;display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}.lesson-ended-button{min-height:40px;padding:9px 15px;color:#35465f;background:#ffffff;border:1px solid #d4e0ee;border-radius:10px;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer;box-shadow:0 5px 15px rgba(15, 23, 42, .05)}.lesson-ended-button:hover{color:#195fcf;border-color:#a9c8f2}.lesson-ended-button.primary{color:#ffffff;background:linear-gradient( 135deg, #2e77f4, #2862df );border-color:#2b68e5;box-shadow:0 8px 20px rgba(47, 103, 246, .22)}.lesson-ended-button.primary:hover{color:#ffffff;background:linear-gradient( 135deg, #296ee6, #2559d0 )}.lesson-ended-button:focus-visible{outline:3px solid rgba(47, 103, 246, .24);outline-offset:3px}/* * The old End Lesson behavior used body.lesson-closed to remove the tutor. * This state always keeps the lesson card and controls workspace present. */body.lesson-end-state-open .typing-practice-card{display:flex !important;visibility:visible !important;opacity:1 !important}body.lesson-end-state-open #lessonText,body.lesson-end-state-open #mobileKeyboardButton,body.lesson-end-state-open #mobileTypingInput,body.lesson-end-state-open .typing-practice-card .practice-footer{display:none !important}body.lesson-end-state-open .typing-practice-card::before,body.lesson-end-state-open .typing-practice-card::after{display:none !important;content:none !important}/* Dark theme */html[data-theme="dark"] .lesson-ended-panel{color:#dbe7f7;background:linear-gradient( 135deg, #142137, #111c30 );border-color:#2c405c}html[data-theme="dark"] .lesson-ended-icon{color:#ff9ba4;background:#3b2029;border-color:#69313d}html[data-theme="dark"] .lesson-ended-kicker,html[data-theme="dark"] .lesson-ended-copy p,html[data-theme="dark"] .lesson-ended-summary small{color:#aab9cd}html[data-theme="dark"] .lesson-ended-copy h3{color:#f0f5ff}html[data-theme="dark"] .lesson-ended-summary > span{background:#18263d;border-color:#304660}html[data-theme="dark"] .lesson-ended-summary strong{color:#77a9ff}html[data-theme="dark"] .lesson-ended-button{color:#d7e2f1;background:#1b2a41;border-color:#354b67}html[data-theme="dark"] .lesson-ended-button:hover{color:#ffffff;border-color:#5479a8}@media (prefers-color-scheme: dark){html[data-theme="system"] .lesson-ended-panel{color:#dbe7f7;background:linear-gradient( 135deg, #142137, #111c30 );border-color:#2c405c}html[data-theme="system"] .lesson-ended-copy h3{color:#f0f5ff}html[data-theme="system"] .lesson-ended-summary > span{background:#18263d;border-color:#304660}}@media (max-width: 760px){.lesson-ended-panel{grid-template-columns:minmax(0, 1fr);min-height:0;padding:20px 15px}.lesson-ended-icon{width:40px;height:40px}.lesson-ended-summary{grid-template-columns:repeat(2, minmax(0, 1fr))}.lesson-ended-summary > span:last-child{grid-column:1/-1}.lesson-ended-actions{display:grid;grid-template-columns:minmax(0, 1fr);width:100%}.lesson-ended-button{width:100%}}@media (prefers-reduced-motion: reduce){.lesson-ended-button{transition:none}}/* ========================================================== LEGACY END-LESSON ISOLATION v17.0.36 ========================================================== */#endLessonButton[hidden]{display:none !important}body.lesson-end-state-open #courseModePanel,body.lesson-end-state-open .lesson-practice-grid,body.lesson-end-state-open .keyboard-hands-grid,body.lesson-end-state-open .keyboard-guidance-card{display:grid !important;visibility:visible !important;opacity:1 !important}body.lesson-end-state-open .typing-practice-card{display:flex !important;visibility:visible !important;opacity:1 !important}body.lesson-end-state-open.lesson-closed #courseModePanel,body.lesson-end-state-open.lesson-closed .lesson-practice-grid,body.lesson-end-state-open.lesson-closed .keyboard-hands-grid{display:grid !important}/* Source: /css/navigation-viewport-fix.css *//* ========================================================== TypingTutor.Online Stable Header + Navigation Viewport v17.0.37 File: css/navigation-viewport-fix.css ========================================================== *//* * Keep consistent breathing room around the navigation in every application * mode. Dynamic content and active-button classes must not shrink the header. */#header{box-sizing:border-box;min-height:78px;padding-top:max(9px, env(safe-area-inset-top));padding-bottom:9px}#header .header-inner{box-sizing:border-box;min-height:58px;align-items:center}#header .logo,#header .primary-mode-navigation,#header .header-tools{align-self:center}#header .primary-mode-navigation,#header #modeSwitcher{min-height:48px;align-items:center}#header #modeSwitcher{display:flex}#header #modeSwitcher .mode-button,#header .lesson-home-nav-button,#header #themeButton{box-sizing:border-box;min-height:44px;margin-top:2px;margin-bottom:2px}/* * Focus should remain visible without forcing the browser to scroll the * navigation against the viewport edge. */#header button:focus{scroll-margin-top:18px}html{scroll-padding-top:calc(78px + env(safe-area-inset-top))}/* Make the logo's lesson-home behavior visually clear. */#siteHomeLogo{cursor:pointer}/* * Preserve a stable content start beneath the header even when a mode panel * changes from a tall page to a short page. */#mainContent{min-height:calc(100vh - 78px)}/* Dark theme keeps the same layout dimensions. */html[data-theme="dark"] #header,html[data-theme="system"] #header{min-height:78px}@media (max-width: 1100px){#header{min-height:72px;padding-top:max(7px, env(safe-area-inset-top));padding-bottom:7px}#header .header-inner{min-height:54px}#header .primary-mode-navigation,#header #modeSwitcher{min-height:44px}#header #modeSwitcher .mode-button,#header .lesson-home-nav-button,#header #themeButton{min-height:40px}html{scroll-padding-top:calc(72px + env(safe-area-inset-top))}}@media (max-width: 760px){#header{min-height:0;padding-top:max(6px, env(safe-area-inset-top));padding-bottom:6px}#header .header-inner{min-height:0}#mainContent{min-height:0}}/* Source: /css/practice-plan.css *//* ========================================================== TypingTutor.Online Daily Practice Goals + Adaptive Lessons v17.1.1 File: css/practice-plan.css ========================================================== *//* ========================================================== LESSON HEADER ========================================================== */.lesson-duration-card{position:relative}.lesson-duration-card small{display:block;margin-top:3px;color:#7a8799;font-size:.55rem;font-weight:750;line-height:1}.daily-goal-lesson-card{min-width:105px}.daily-goal-lesson-track{display:block;width:100%;height:4px;margin-top:7px;overflow:hidden;background:#e6edf6;border-radius:999px}#dailyGoalLessonFill{display:block;width:0;height:100%;background:linear-gradient( 90deg, #2f75f0, #57a0ff );border-radius:inherit;transition:width .25s ease}.daily-goal-lesson-card.daily-goal-complete{background:#effbf5 !important;border-color:#bfe7d2 !important}.daily-goal-lesson-card.daily-goal-complete #dailyGoalLessonFill{background:#18a566}/* ========================================================== STATISTICS DAILY GOAL ========================================================== */.daily-practice-summary{display:grid;grid-template-columns:minmax(220px, .9fr) minmax(310px, 1.35fr) minmax(290px, .9fr);gap:18px;align-items:center;width:calc(100% - 32px);max-width:1400px;margin:0 auto 14px;padding:18px 20px;color:#26354d;background:linear-gradient( 135deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .98) );border:1px solid #dce5f1;border-radius:18px;box-shadow:0 12px 34px rgba(15, 23, 42, .07)}.daily-practice-summary-heading{display:flex;gap:12px;align-items:center;min-width:0}.daily-practice-summary-icon{display:inline-flex;flex:0 0 auto;width:48px;height:48px;align-items:center;justify-content:center;color:#2668da;background:#edf5ff;border:1px solid #d7e7fb;border-radius:13px;font-size:1.1rem;font-weight:800}.daily-practice-summary-heading span{display:block;margin-bottom:3px;color:#62728a;font-size:.66rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.daily-practice-summary-heading h2{margin:0 0 3px;color:#16243b;font-size:clamp(1rem, 1.5vw, 1.25rem);line-height:1.2}.daily-practice-summary-heading p{margin:0;color:#718097;font-size:.68rem;line-height:1.4}.daily-practice-summary-values{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;margin-bottom:9px;color:#64748b;font-size:.74rem}.daily-practice-summary-values > strong{color:#1e65dd;font-size:1.05rem}.daily-practice-summary-values em{margin-left:auto;color:#728198;font-size:.67rem;font-style:normal;font-weight:700}.daily-practice-summary-track{position:relative;width:100%;height:10px;overflow:hidden;background:#e7eef7;border-radius:999px}#dailyPracticeFill{display:block;width:0;height:100%;background:linear-gradient( 90deg, #2e78f5, #5c95ff );border-radius:inherit;transition:width .25s ease}.daily-practice-summary-facts{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px}.daily-practice-summary-facts > span{display:grid;min-width:0;min-height:62px;padding:9px 8px;place-content:center;gap:4px;background:rgba(238, 245, 255, .72);border:1px solid #dce7f5;border-radius:12px;text-align:center}.daily-practice-summary-facts small{color:#718097;font-size:.56rem;font-weight:800;letter-spacing:.035em;text-transform:uppercase}.daily-practice-summary-facts strong{color:#18273f;font-size:.76rem;line-height:1.2}.daily-practice-summary.daily-goal-complete{border-color:#bfe5d0;background:linear-gradient( 135deg, #f6fff9, #edf9f3 )}.daily-practice-summary.daily-goal-complete #dailyPracticeFill{background:#18a566}/* ========================================================== SETTINGS ========================================================== */.setting-inline-fields{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.setting-custom-minutes{display:inline-flex;gap:6px;align-items:center;color:#65758c;font-size:.72rem;font-weight:700}.setting-custom-minutes[hidden]{display:none !important}.setting-custom-minutes input{width:82px;min-height:38px}.practice-plan-settings-message{min-height:18px;margin:5px 0 0}/* ========================================================== COMPLETION TOAST ========================================================== */.daily-goal-toast{position:fixed;z-index:3000;right:20px;bottom:20px;display:grid;grid-template-columns:auto minmax(0, 1fr) auto;width:min(390px, calc(100% - 30px));padding:14px 15px;gap:11px;align-items:start;color:#184e38;background:rgba(239, 253, 246, .98);border:1px solid #a9dec4;border-radius:15px;box-shadow:0 18px 48px rgba(15, 23, 42, .2);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.daily-goal-toast[hidden]{display:none !important}.daily-goal-toast-visible{opacity:1;transform:translateY(0);pointer-events:auto}.daily-goal-toast > span{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;color:#ffffff;background:#18a566;border-radius:999px;font-weight:900}.daily-goal-toast strong{display:block;margin-bottom:3px;color:#15533a;font-size:.86rem}.daily-goal-toast p{margin:0;color:#4a725f;font-size:.72rem;line-height:1.45}.daily-goal-toast button{padding:2px 5px;color:#47715d;background:transparent;border:0;font-size:1.2rem;cursor:pointer}/* ========================================================== DARK THEME ========================================================== */html[data-theme="dark"] .lesson-duration-card small{color:#a8b6ca}html[data-theme="dark"] .daily-goal-lesson-track{background:#26364d}html[data-theme="dark"] .daily-goal-lesson-card.daily-goal-complete{background:#17372d !important;border-color:#2d6751 !important}html[data-theme="dark"] .daily-practice-summary{color:#dfe9f7;background:linear-gradient( 135deg, #121d30, #101a2b );border-color:#2b3c55}html[data-theme="dark"] .daily-practice-summary-heading h2,html[data-theme="dark"] .daily-practice-summary-facts strong{color:#f0f5ff}html[data-theme="dark"] .daily-practice-summary-heading span,html[data-theme="dark"] .daily-practice-summary-heading p,html[data-theme="dark"] .daily-practice-summary-values,html[data-theme="dark"] .daily-practice-summary-values em,html[data-theme="dark"] .daily-practice-summary-facts small{color:#aab8cc}html[data-theme="dark"] .daily-practice-summary-track{background:#223149}html[data-theme="dark"] .daily-practice-summary-facts > span{background:#17243a;border-color:#2d425d}html[data-theme="dark"] .daily-practice-summary.daily-goal-complete{background:linear-gradient( 135deg, #123027, #11271f );border-color:#2c634f}html[data-theme="dark"] .daily-goal-toast{color:#c7f3de;background:rgba(20, 50, 40, .98);border-color:#36745b}html[data-theme="dark"] .daily-goal-toast strong{color:#e7fff4}html[data-theme="dark"] .daily-goal-toast p{color:#b7dcc9}/* ========================================================== RESPONSIVE ========================================================== */@media (max-width: 1100px){.daily-practice-summary{grid-template-columns:minmax(210px, .85fr) minmax(300px, 1.2fr)}.daily-practice-summary-facts{grid-column:1/-1}}@media (max-width: 760px){.daily-practice-summary{grid-template-columns:minmax(0, 1fr);width:calc(100% - 20px);margin:0 auto 10px;padding:15px;border-radius:16px}.daily-practice-summary-facts{grid-column:auto}.daily-practice-summary-values em{width:100%;margin-left:0}.daily-goal-lesson-card{min-width:92px}.setting-inline-fields{width:100%;justify-content:flex-start}.daily-goal-toast{right:15px;bottom:15px}}@media (prefers-reduced-motion: reduce){#dailyGoalLessonFill,#dailyPracticeFill,.daily-goal-toast{transition:none}}/* Source: /css/engagement-milestone.css *//* ========================================================== TypingTutor.Online v17.8.44 — First 10-Minute Milestone ========================================================== */.first-session-milestone{position:fixed;z-index:3200;left:50%;bottom:22px;width:min(620px, calc(100% - 32px));transform:translate(-50%, 14px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.first-session-milestone[hidden]{display:none !important}.first-session-milestone-visible{transform:translate(-50%, 0);opacity:1;pointer-events:auto}.first-session-milestone-card{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:12px 14px;padding:16px;color:#17335f;background:rgba(247, 251, 255, .98);border:1px solid #b9d2fb;border-radius:16px;box-shadow:0 18px 48px rgba(15, 23, 42, .18)}.first-session-milestone-icon{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;color:#0f63d8;background:#eaf3ff;border:1px solid #c6dcff;border-radius:12px;font-size:1.05rem;font-weight:800}.first-session-milestone-copy strong{display:block;margin:0 0 4px;color:#12213b;font-size:.98rem}.first-session-milestone-copy p{margin:0;color:#526680;font-size:.8rem;line-height:1.45}.first-session-milestone-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:9px}.first-session-milestone-actions button{min-height:38px;padding:8px 12px;border-radius:10px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}#firstSessionContinueButton{color:#ffffff;background:#246cf0;border:1px solid #246cf0}#firstSessionFinishButton{color:#27415f;background:#f4f7fb;border:1px solid #cdd8e6}html[data-theme="dark"] .first-session-milestone-card{color:#dbe8ff;background:rgba(15, 28, 48, .98);border-color:#29496f;box-shadow:0 20px 52px rgba(0, 0, 0, .42)}html[data-theme="dark"] .first-session-milestone-icon{color:#9fc5ff;background:#142f54;border-color:#315b8e}html[data-theme="dark"] .first-session-milestone-copy strong{color:#f1f6ff}html[data-theme="dark"] .first-session-milestone-copy p{color:#afbdd1}html[data-theme="dark"] #firstSessionFinishButton{color:#d8e5f7;background:#17263b;border-color:#344962}@media (prefers-color-scheme: dark){html[data-theme="system"] .first-session-milestone-card{color:#dbe8ff;background:rgba(15, 28, 48, .98);border-color:#29496f;box-shadow:0 20px 52px rgba(0, 0, 0, .42)}html[data-theme="system"] .first-session-milestone-icon{color:#9fc5ff;background:#142f54;border-color:#315b8e}html[data-theme="system"] .first-session-milestone-copy strong{color:#f1f6ff}html[data-theme="system"] .first-session-milestone-copy p{color:#afbdd1}html[data-theme="system"] #firstSessionFinishButton{color:#d8e5f7;background:#17263b;border-color:#344962}}@media (max-width: 560px){.first-session-milestone{bottom:14px;width:min(94%, 430px)}.first-session-milestone-card{padding:14px}.first-session-milestone-actions{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){.first-session-milestone{transition:none}}/* Source: /css/responsive-balance-v17.1.6.css *//* ========================================================== TypingTutor.Online Tablet / Small-Laptop Balance Fix v17.1.6 File: css/responsive-balance-v17.1.6.css ========================================================== *//* * Between the desktop sidebar layout and the mobile keyboard-free layout, * the live statistics move below the lesson. Keep that row compact and * allow the lesson card to use its natural height instead of stretching. */@media (min-width: 761px) and (max-width: 900px){.lesson-practice-grid{grid-template-columns:minmax(0, 1fr) !important;grid-auto-rows:max-content !important;align-items:start !important}.typing-practice-card{min-height:0 !important;height:auto !important;align-self:start !important}.statistics-panel{display:flex !important;flex-direction:row !important;align-items:stretch !important;width:100% !important;min-height:0 !important;height:max-content !important;block-size:max-content !important;align-self:start !important;gap:8px !important;padding:10px !important}.statistics-panel .stat{display:grid !important;flex:1 1 0 !important;min-width:0 !important;min-height:72px !important;height:auto !important;padding:9px 6px !important;place-items:center !important;align-content:center !important;gap:7px !important;text-align:center !important}.statistics-panel .label{font-size:9px !important;line-height:1 !important}.statistics-panel .stat > span:last-child{font-size:clamp(18px, 2.6vw, 23px) !important;line-height:1 !important}/* * The former fixed 66px key height made keys look tall and narrow after * the available keyboard width became smaller. Scale height, gaps, * padding, labels, and home-row bumps together so the keyboard keeps its * physical proportions while still fitting without horizontal clipping. */#keyboardContainer{--keyboard-type-key-height:clamp(44px, 6vw, 56px) !important;--keyboard-type-row-gap:clamp(4px, .65vw, 6px) !important;--keyboard-type-padding:clamp(8px, 1.25vw, 12px) !important;overflow:visible !important}#keyboardContainer .key{min-width:0 !important;padding-bottom:clamp(5px, .9vw, 8px) !important;border-radius:clamp(7px, .9vw, 10px) !important}#keyboardContainer .key-primary{font-size:clamp(10px, 1.45vw, 14px) !important}#keyboardContainer .key-secondary{top:clamp(4px, .65vw, 7px) !important;left:clamp(4px, .65vw, 7px) !important;font-size:clamp(7px, .9vw, 9px) !important}#keyboardContainer .home-bump{bottom:clamp(3px, .45vw, 5px) !important;width:clamp(13px, 1.8vw, 19px) !important;height:clamp(2px, .28vw, 3px) !important}.keyboard-guidance-card{padding:clamp(8px, 1.1vw, 11px) !important}}/* Keep the compact live-stat row usable on very narrow tablets. */@media (min-width: 761px) and (max-width: 820px){.statistics-panel{gap:6px !important;padding:8px !important}.statistics-panel .stat{min-height:66px !important;padding-inline:4px !important}}/* Source: /css/typing-text-sizes-v17.2.5.css *//* ========================================================== TypingTutor.Online Balanced Typing Text Sizes v17.2.5 File: css/typing-text-sizes-v17.2.5.css ========================================================== *//* * Five clearly separated reading sizes for lesson text. * Large is the default for new and reset users. */html[data-typing-text-size="small"] #lessonText{--lesson-text-line-height:1.72;--lesson-exact-line-height:1.72em;font-size:clamp(23px, 1.65vw, 26px) !important;line-height:1.72 !important;letter-spacing:.085em}html[data-typing-text-size="normal"] #lessonText{--lesson-text-line-height:1.66;--lesson-exact-line-height:1.66em;font-size:clamp(28px, 2.05vw, 32px) !important;line-height:1.66 !important;letter-spacing:.075em}html[data-typing-text-size="large"] #lessonText{--lesson-text-line-height:1.58;--lesson-exact-line-height:1.58em;font-size:clamp(34px, 2.5vw, 39px) !important;line-height:1.58 !important;letter-spacing:.064em}html[data-typing-text-size="extra-large"] #lessonText{--lesson-text-line-height:1.50;--lesson-exact-line-height:1.50em;font-size:clamp(40px, 3vw, 46px) !important;line-height:1.50 !important;letter-spacing:.052em}html[data-typing-text-size="maximum"] #lessonText{--lesson-text-line-height:1.44;--lesson-exact-line-height:1.44em;font-size:clamp(47px, 3.6vw, 55px) !important;line-height:1.44 !important;letter-spacing:.038em}/* Tablet and mobile sizes remain distinct without overwhelming the viewport. */@media (max-width: 760px){html[data-typing-text-size="small"] #lessonText{font-size:clamp(20px, 5.7vw, 24px) !important;line-height:1.72 !important}html[data-typing-text-size="normal"] #lessonText{font-size:clamp(23px, 6.4vw, 28px) !important;line-height:1.66 !important}html[data-typing-text-size="large"] #lessonText{font-size:clamp(28px, 7.4vw, 33px) !important;line-height:1.58 !important}html[data-typing-text-size="extra-large"] #lessonText{font-size:clamp(32px, 8.4vw, 38px) !important;line-height:1.50 !important}html[data-typing-text-size="maximum"] #lessonText{font-size:clamp(36px, 9.3vw, 43px) !important;line-height:1.44 !important}}/* Very narrow phones need a safety reduction while preserving hierarchy. */@media (max-width: 390px){html[data-typing-text-size="small"] #lessonText{font-size:20px !important}html[data-typing-text-size="normal"] #lessonText{font-size:23px !important}html[data-typing-text-size="large"] #lessonText{font-size:28px !important}html[data-typing-text-size="extra-large"] #lessonText{font-size:32px !important}html[data-typing-text-size="maximum"] #lessonText{font-size:36px !important}}/* Source: /css/inline-lesson-results-v17.3.2.css *//* ========================================================== TypingTutor.Online True Inline Lesson Results v17.3.2 ========================================================== *//* The completion result is part of the lesson card, never a viewport modal. */body.lesson-results-open{overflow:auto !important}#resultsModal.lesson-results-inline{position:relative !important;inset:auto !important;z-index:8 !important;display:block;width:100% !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:16px 18px 18px !important;overflow:visible !important;overscroll-behavior:auto !important;background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;pointer-events:auto !important}#resultsModal.lesson-results-inline.hidden,#resultsModal.lesson-results-inline[aria-hidden="true"]{display:none !important}#resultsModal.lesson-results-inline[aria-hidden="false"]{display:block !important}#resultsModal.lesson-results-inline > .results-card{position:relative !important;inset:auto !important;z-index:1 !important;width:100% !important;max-width:none !important;min-height:0 !important;max-height:none !important;margin:0 !important;padding:16px 18px !important;overflow:visible !important;border-radius:16px !important;box-shadow:none !important;pointer-events:auto !important}body.lesson-results-open .typing-practice-card{overflow:visible !important}/* Keep the result within the same space previously occupied by lesson text. */body.lesson-results-open .typing-practice-card .practice-toolbar,body.lesson-results-open .typing-practice-card #lessonText,body.lesson-results-open .typing-practice-card .mobile-keyboard-button,body.lesson-results-open .typing-practice-card .mobile-typing-input,body.lesson-results-open .typing-practice-card .practice-footer,body.lesson-results-open .typing-practice-card #lessonIntroPanel,body.lesson-results-open .typing-practice-card #lessonEndedPanel{display:none !important}/* Prevent any old modal pseudo-layout from reappearing. */body.lesson-results-open #resultsModal::before,body.lesson-results-open #resultsModal::after{position:static !important}@media (max-width: 760px){#resultsModal.lesson-results-inline{padding:12px !important}#resultsModal.lesson-results-inline > .results-card{padding:15px 12px !important}}/* Source: /css/weak-key-coach-v17.4.0.css *//* ========================================================== WEAK-KEY COACH + SMART REVIEW v17.4.0 ========================================================== */.weak-key-coach{display:grid;gap:18px;margin-top:20px}.weak-key-coach-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:22px;border:1px solid var(--border, #dbe4f0);border-radius:22px;background:radial-gradient(circle at 100% 0, rgba(23, 105, 255, .12), transparent 38%),var(--surface, #fff)}.weak-key-coach-header h2{margin:4px 0 8px;font-size:clamp(24px, 2.4vw, 34px)}.weak-key-coach-header p{max-width:760px;margin:0;color:var(--muted, #64748b);line-height:1.65}.coach-local-badge{flex:0 0 auto;padding:8px 12px;border:1px solid rgba(23, 105, 255, .2);border-radius:999px;color:#1358d3;background:rgba(23, 105, 255, .08);font-size:12px;font-weight:800}.coach-summary-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px}.coach-balance-note{display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--border, #dbe4f0);border-radius:14px;color:var(--muted, #64748b);background:var(--surface, #fff);font-size:13px}.coach-balance-note strong{color:var(--text, #0f172a)}.coach-main-grid,.coach-detail-grid{display:grid;grid-template-columns:minmax(0, 1.35fr) minmax(300px, .65fr);gap:16px}.coach-detail-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.coach-heatmap-card,.coach-focus-card{min-width:0}.coach-heatmap{display:grid;gap:7px;overflow:hidden;margin-top:16px;padding:13px;border:1px solid var(--border, #dbe4f0);border-radius:16px;background:var(--background, #f5f7fb)}.coach-key-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(34px, 1fr);gap:6px}.coach-key{min-width:0;min-height:48px;padding:5px 3px;border:1px solid transparent;border-radius:9px;color:#334155;background:#e7edf5;box-shadow:inset 0 -2px 0 rgba(15, 23, 42, .08);cursor:help}.coach-key strong,.coach-key small{display:block;line-height:1.1}.coach-key strong{font-family:"JetBrains Mono",monospace;font-size:14px}.coach-key small{margin-top:5px;font-size:9px;font-weight:800;opacity:.78}.coach-key:hover,.coach-key:focus-visible{position:relative;z-index:2;outline:3px solid rgba(23, 105, 255, .25);transform:translateY(-1px)}.coach-key-strong{color:#075f35;border-color:rgba(16, 185, 129, .34);background:#c8f3de}.coach-key-improving{color:#6b4d00;border-color:rgba(234, 179, 8, .35);background:#fff0a8}.coach-key-attention{color:#873c04;border-color:rgba(249, 115, 22, .38);background:#fed7aa}.coach-key-weak{color:#8e1837;border-color:rgba(244, 63, 94, .38);background:#fecdd3}.coach-key-learning{color:#334155;border-color:rgba(100, 116, 139, .22);background:#e7edf5}.coach-key-unseen{color:#94a3b8;border-color:rgba(148, 163, 184, .15);background:#f1f5f9;box-shadow:none}.coach-legend{display:flex;flex-wrap:wrap;gap:9px 15px;margin-top:13px;color:var(--muted, #64748b);font-size:11px;font-weight:700}.coach-legend span{display:inline-flex;align-items:center;gap:6px}.coach-legend i{width:11px;height:11px;border-radius:3px}.coach-legend-strong{background:#6ee7b7}.coach-legend-improving{background:#fde047}.coach-legend-attention{background:#fb923c}.coach-legend-weak{background:#fb7185}.coach-legend-learning{background:#cbd5e1}.coach-focus-list{display:grid;gap:9px;margin-top:15px}.coach-focus-item{display:grid;grid-template-columns:42px minmax(0, 1fr);gap:2px 11px;align-items:center;padding:11px;border:1px solid var(--border, #dbe4f0);border-radius:13px;background:var(--background, #f8fafc)}.coach-focus-item > strong{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:11px;color:#fff;background:#1769ff;font-family:"JetBrains Mono",monospace;font-size:19px}.coach-focus-item span,.coach-focus-item small{min-width:0}.coach-focus-item span{color:var(--text, #0f172a);font-size:13px}.coach-focus-item small{color:var(--muted, #64748b);font-size:11px}.coach-combination-list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:9px;margin-top:14px}.coach-combination-list > span{display:grid;gap:3px;padding:11px;border:1px solid var(--border, #dbe4f0);border-radius:12px;background:var(--background, #f8fafc)}.coach-combination-list strong{font-family:"JetBrains Mono",monospace;font-size:16px}.coach-combination-list b{color:#d9485f;font-size:13px}.coach-combination-list small{color:var(--muted, #64748b);font-size:10px}.coach-weekly-card dl{display:grid;gap:8px;margin:14px 0 0}.coach-weekly-card dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--border, #dbe4f0)}.coach-weekly-card dl div:last-child{border-bottom:0}.coach-weekly-card dt{color:var(--muted, #64748b);font-size:12px}.coach-weekly-card dd{margin:0;color:var(--text, #0f172a);font-size:12px;font-weight:800;text-align:right}.coach-action-card{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px;border:1px solid rgba(23, 105, 255, .28);border-radius:20px;background:linear-gradient(135deg, rgba(23, 105, 255, .09), rgba(34, 197, 94, .07)),var(--surface, #fff)}.coach-action-card h3{margin:5px 0 7px;font-size:20px}.coach-action-card p{max-width:700px;margin:0;color:var(--muted, #64748b);font-size:13px;line-height:1.55}.coach-action-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:end;gap:9px;flex:0 0 auto}.coach-action-controls label{display:grid;gap:5px;color:var(--muted, #64748b);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.coach-action-controls select,.coach-action-controls button{min-height:42px;border-radius:11px;font:inherit;font-size:12px;font-weight:800}.coach-action-controls select{min-width:126px;padding:0 34px 0 12px;border:1px solid var(--border, #cbd5e1);color:var(--text, #0f172a);background:var(--surface, #fff)}.coach-action-controls button{padding:0 15px;cursor:pointer}.coach-primary-action{border:1px solid #1769ff;color:#fff;background:#1769ff;box-shadow:0 7px 18px rgba(23, 105, 255, .22)}.coach-primary-action:hover{background:#0f5ce0}.coach-secondary-action{border:1px solid var(--border, #cbd5e1);color:var(--text, #0f172a);background:var(--surface, #fff)}.coach-secondary-action:hover{border-color:#1769ff;color:#1769ff}html[data-theme="dark"] .weak-key-coach-header,html[data-theme="dark"] .coach-balance-note,html[data-theme="dark"] .coach-action-card{background:radial-gradient(circle at 100% 0, rgba(47, 127, 255, .16), transparent 38%),var(--surface, #111827);border-color:var(--border, #263244)}html[data-theme="dark"] .coach-local-badge{color:#a9c9ff;background:rgba(47, 127, 255, .14);border-color:rgba(96, 165, 250, .3)}html[data-theme="dark"] .coach-heatmap,html[data-theme="dark"] .coach-focus-item,html[data-theme="dark"] .coach-combination-list > span{background:#0d1422;border-color:#263244}html[data-theme="dark"] .coach-key-unseen,html[data-theme="dark"] .coach-key-learning{color:#94a3b8;background:#202a3a;border-color:#334155}html[data-theme="dark"] .coach-key-strong{color:#d1fae5;background:#0d5b42}html[data-theme="dark"] .coach-key-improving{color:#fff7c2;background:#715b08}html[data-theme="dark"] .coach-key-attention{color:#ffedd5;background:#8a4212}html[data-theme="dark"] .coach-key-weak{color:#ffe4e6;background:#8f2441}html[data-theme="dark"] .coach-action-controls select,html[data-theme="dark"] .coach-secondary-action{color:var(--text, #e5e7eb);background:#111827;border-color:#334155}@media (prefers-color-scheme: dark){html[data-theme="system"] .weak-key-coach-header,html[data-theme="system"] .coach-balance-note,html[data-theme="system"] .coach-action-card{background:radial-gradient(circle at 100% 0, rgba(47, 127, 255, .16), transparent 38%),#111827;border-color:#263244}html[data-theme="system"] .coach-heatmap,html[data-theme="system"] .coach-focus-item,html[data-theme="system"] .coach-combination-list > span{background:#0d1422;border-color:#263244}}@media (max-width: 980px){.coach-summary-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.coach-main-grid,.coach-detail-grid{grid-template-columns:1fr}.coach-action-card{align-items:flex-start;flex-direction:column}.coach-action-controls{justify-content:flex-start;width:100%}}@media (max-width: 660px){.weak-key-coach-header{flex-direction:column;padding:17px}.coach-summary-grid{grid-template-columns:1fr}.coach-key-row{grid-auto-columns:minmax(25px, 1fr);gap:4px}.coach-key{min-height:42px;padding:4px 1px;border-radius:7px}.coach-key strong{font-size:11px}.coach-key small{font-size:7px}.coach-combination-list{grid-template-columns:repeat(2, minmax(0, 1fr))}.coach-action-controls,.coach-action-controls label,.coach-action-controls select,.coach-action-controls button{width:100%}}.coach-action-card .coach-mix-note{margin-top:7px;color:#1769ff;font-weight:700}html[data-theme="dark"] .coach-action-card .coach-mix-note{color:#8db8ff}/* ========================================================== HEATMAP CLARITY AND RESTORED KEYBOARD PRESENTATION v17.4.2 ========================================================== */.coach-heatmap-help{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;color:var(--text-light, #475569);background:var(--surface-alt, #f8fafc);border:1px solid var(--border-soft, #e2e8f0);border-radius:12px;font-size:11px;line-height:1.45}.coach-heatmap-help strong{flex:0 0 auto;color:var(--text, #0f172a)}.coach-legend-unseen{background:#e2e8f0;border:1px solid #cbd5e1}.coach-key-row:nth-child(2){padding-left:1.6%;padding-right:2.2%}.coach-key-row:nth-child(3){padding-left:3.6%;padding-right:6.2%}.coach-key-row:nth-child(4){padding-left:7.2%;padding-right:10.5%}.coach-key{display:grid;place-items:center;align-content:center;text-align:center}.coach-key strong{font-size:15px}.coach-key small{font-size:10px}html[data-theme="dark"] .coach-heatmap-help{color:#aebbd0;background:#0d1422;border-color:#263244}html[data-theme="dark"] .coach-heatmap-help strong{color:#f8fafc}html[data-theme="dark"] .coach-legend-unseen{background:#334155;border-color:#475569}@media (prefers-color-scheme: dark){html[data-theme="system"] .coach-heatmap-help{color:#aebbd0;background:#0d1422;border-color:#263244}html[data-theme="system"] .coach-heatmap-help strong{color:#f8fafc}html[data-theme="system"] .coach-legend-unseen{background:#334155;border-color:#475569}}@media (max-width: 660px){.coach-key-row:nth-child(2),.coach-key-row:nth-child(3),.coach-key-row:nth-child(4){padding-left:0;padding-right:0}.coach-heatmap{overflow-x:auto}.coach-key-row{min-width:560px}.coach-heatmap-help{flex-direction:column;gap:3px}}/* Source: /css/complete-statistics-v17.4.1.css *//* ========================================================== TypingTutor.Online — Complete Statistics Dashboard v17.4.1 ========================================================== */.statistics-dashboard-header-complete{display:flex;align-items:flex-end;justify-content:space-between;gap:22px}.statistics-filter-panel{display:flex;align-items:flex-end;gap:12px;flex:0 0 auto}.statistics-type-filters{display:flex;flex-wrap:wrap;gap:5px;padding:5px;background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:12px}.statistics-type-filters button{min-height:34px;padding:7px 11px;color:var(--text-light);background:transparent;border:0;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer}.statistics-type-filters button:hover,.statistics-type-filters button:focus-visible{color:var(--text);background:var(--surface)}.statistics-type-filters button.is-active{color:#fff;background:var(--primary);box-shadow:0 5px 13px rgba(37, 99, 235, .24)}.statistics-range-filter{display:grid;gap:5px}.statistics-range-filter span{color:var(--text-muted);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.statistics-range-filter select,.coach-action-controls select{min-height:44px;color:var(--text);background:var(--surface);border:1px solid var(--border-soft);border-radius:11px}.statistics-active-filter-note{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;color:var(--text-light);background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:12px;font-size:11px}.statistics-active-filter-note strong{color:var(--primary)}.course-progress-card.tests::before{background:#0891b2}.statistics-summary-grid-complete{grid-template-columns:repeat(3, minmax(0, 1fr))}.statistics-trend-grid,.statistics-ranking-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}.trend-card{min-width:0}.trend-chart-wrap{width:100%;overflow:hidden;border:1px solid var(--border-soft);border-radius:13px;background:var(--surface-alt)}.trend-chart{display:block;width:100%;height:auto;min-height:210px}.trend-grid-line{stroke:var(--border-soft);stroke-width:1}.trend-axis-label{fill:var(--text-muted);font:10px Inter,sans-serif}.trend-line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.trend-line-wpm{stroke:#2563eb}.trend-line-accuracy{stroke:#16a34a}.trend-point{fill:var(--surface);stroke:#2563eb;stroke-width:3}.trend-empty{display:grid;place-items:center;min-height:210px;margin:0;text-align:center}.key-ranking-list{display:grid;gap:8px}.key-ranking-item{display:grid;grid-template-columns:28px 42px minmax(0, 1fr);gap:10px;align-items:center;padding:10px 12px;background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:11px}.key-ranking-item > span{display:grid;place-items:center;width:26px;height:26px;color:var(--text-muted);background:var(--surface);border-radius:50%;font-size:10px;font-weight:800}.key-ranking-item > strong{color:var(--primary);font-family:"JetBrains Mono",monospace;font-size:20px}.key-ranking-item div{display:grid;gap:2px;min-width:0}.key-ranking-item b{color:var(--text);font-size:12px}.key-ranking-item small{color:var(--text-muted);font-size:10px}.key-ranking-errors .key-ranking-item > strong{color:#e11d48}.unified-activity-list{display:grid;gap:8px}.unified-activity-item{display:grid;grid-template-columns:92px minmax(180px, 1fr) auto auto minmax(120px, auto);gap:12px;align-items:center;padding:11px 12px;background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:11px}.activity-type-badge{display:inline-flex;justify-content:center;padding:5px 8px;color:#1d4ed8;background:rgba(59, 130, 246, .12);border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase}.activity-test .activity-type-badge{color:#0e7490;background:rgba(6, 182, 212, .12)}.activity-review .activity-type-badge{color:#7e22ce;background:rgba(168, 85, 247, .12)}.activity-main{display:grid;gap:3px;min-width:0}.activity-main strong,.activity-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-main strong{color:var(--text);font-size:12px}.activity-main small,.activity-detail{color:var(--text-muted);font-size:10px}.unified-activity-item > b{color:var(--primary);font-size:12px}.unified-activity-item > em{color:var(--success);font-size:12px;font-style:normal;font-weight:800}html[data-theme="dark"] .statistics-type-filters button.is-active,html[data-theme="dark"] .activity-type-badge,html[data-theme="dark"] .activity-test .activity-type-badge,html[data-theme="dark"] .activity-review .activity-type-badge{color:#fff}@media (prefers-color-scheme: dark){html[data-theme="system"] .statistics-type-filters button.is-active,html[data-theme="system"] .activity-type-badge,html[data-theme="system"] .activity-test .activity-type-badge,html[data-theme="system"] .activity-review .activity-type-badge{color:#fff}}@media (max-width: 980px){.statistics-dashboard-header-complete,.statistics-filter-panel{align-items:stretch;flex-direction:column}.statistics-filter-panel{width:100%}.statistics-range-filter select{width:100%}.statistics-trend-grid,.statistics-ranking-grid{grid-template-columns:1fr}.unified-activity-item{grid-template-columns:90px minmax(0, 1fr) auto auto}.activity-detail{grid-column:2/-1}}@media (max-width: 680px){.statistics-summary-grid-complete{grid-template-columns:repeat(2, minmax(0, 1fr))}.statistics-type-filters{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr))}.statistics-active-filter-note{align-items:flex-start;flex-direction:column}.unified-activity-item{grid-template-columns:1fr auto auto}.activity-type-badge,.activity-main,.activity-detail{grid-column:1/-1}.activity-type-badge{width:fit-content}}@media (max-width: 430px){.statistics-summary-grid-complete{grid-template-columns:1fr}}/* 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/certificate-dashboard-cards-v17.5.1.css *//* ========================================================== CERTIFICATE LINKS IN ACHIEVEMENTS + STATISTICS v17.5.1 ========================================================== */.certificate-dashboard-card{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr) auto;gap:18px;align-items:center;margin:16px 0;padding:20px 22px;color:var(--text);text-decoration:none;background:radial-gradient(circle at 88% 12%, rgba(23, 105, 255, .16), transparent 32%),linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), var(--surface));border:1px solid color-mix(in srgb, var(--primary) 32%, var(--border-soft));border-radius:18px;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.certificate-dashboard-card:hover,.certificate-dashboard-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb, var(--primary) 62%, var(--border-soft));box-shadow:0 16px 38px rgba(23, 105, 255, .14);outline:none}.certificate-dashboard-icon{display:grid;width:64px;height:64px;place-items:center;background:#fff;border:1px solid rgba(23, 105, 255, .22);border-radius:17px;box-shadow:0 10px 24px rgba(23, 105, 255, .12)}.certificate-dashboard-icon img{width:45px;height:45px}.certificate-dashboard-copy{min-width:0}.certificate-dashboard-eyebrow{display:block;margin-bottom:4px;color:var(--primary);font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.certificate-dashboard-card h3{margin:0;color:var(--text);font-size:clamp(18px, 2vw, 23px);line-height:1.2}.certificate-dashboard-card p{max-width:760px;margin:7px 0 0;color:var(--text-light);font-size:12px;line-height:1.55}.certificate-dashboard-side{display:grid;justify-items:end;gap:11px}.certificate-dashboard-metrics{display:flex;gap:9px}.certificate-dashboard-metric{min-width:88px;padding:10px 12px;text-align:center;background:color-mix(in srgb, var(--surface) 92%, transparent);border:1px solid var(--border-soft);border-radius:12px}.certificate-dashboard-metric strong,.certificate-dashboard-metric small{display:block}.certificate-dashboard-metric strong{color:var(--primary);font-size:21px;line-height:1}.certificate-dashboard-metric small{margin-top:5px;color:var(--text-muted);font-size:9px;font-weight:700}.certificate-dashboard-action{color:var(--primary);font-size:11px;font-weight:900}html[data-theme="dark"] .certificate-dashboard-icon{background:#f8fbff}@media (prefers-color-scheme: dark){html[data-theme="system"] .certificate-dashboard-icon{background:#f8fbff}}@media (max-width: 760px){.certificate-dashboard-card{grid-template-columns:auto minmax(0, 1fr);align-items:start}.certificate-dashboard-side{grid-column:1/-1;width:100%;justify-items:stretch}.certificate-dashboard-metrics{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr))}.certificate-dashboard-action{text-align:right}}@media (max-width: 430px){.certificate-dashboard-card{gap:13px;padding:17px}.certificate-dashboard-icon{width:52px;height:52px;border-radius:14px}.certificate-dashboard-icon img{width:37px;height:37px}}/* Source: /css/games-integration-v17.7.0.css */.activity-game .activity-type-badge{background:#ede9fe;color:#6d28d9}.game-statistics-gateway{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 22px;margin:16px 0;border:1px solid #c4b5fd;border-radius:20px;background:linear-gradient(135deg,#f5f3ff,#eff6ff);color:#0f172a}.game-statistics-gateway>span:first-child{font-size:40px}.game-statistics-gateway h3{margin:2px 0 5px}.game-statistics-gateway p{margin:0;color:#52627a}.game-statistics-gateway b{color:#6d28d9}.game-statistics-gateway small{display:block;color:#64748b}.game-statistics-gateway .gateway-action{color:#1769ff;font-weight:800}html[data-theme=dark] .game-statistics-gateway{background:linear-gradient(135deg,#24143f,#10223f);border-color:#5b4b8a;color:#f8fafc}html[data-theme=dark] .game-statistics-gateway p{color:#cbd5e1}@media(prefers-color-scheme:dark){html[data-theme=system] .game-statistics-gateway{background:linear-gradient(135deg,#24143f,#10223f);border-color:#5b4b8a;color:#f8fafc}html[data-theme=system] .game-statistics-gateway p{color:#cbd5e1}}@media(max-width:720px){.game-statistics-gateway{grid-template-columns:auto 1fr}.game-statistics-gateway>div:last-child{grid-column:1/3}}/* 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-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/share-actions-v17.8.0.css *//* Universal sharing entry points v17.8.0 */.result-share-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 4px}.result-share-actions .result-button{min-width:145px;text-decoration:none}.achievement-share-link{display:inline-flex;align-items:center;justify-content:center;align-self:center;margin-left:auto;padding:8px 10px;border:1px solid #bfd2ee;border-radius:10px;background:#f4f8ff;color:#1769ff;font-size:12px;font-weight:800;text-decoration:none}.achievement-card.locked .achievement-share-link{display:none}.share-dashboard-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin:18px 0;padding:20px;border:1px solid #bfd2ee;border-radius:20px;background:linear-gradient(135deg,#f7faff,#edf4ff);color:#0f172a;text-decoration:none}.share-dashboard-card-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:#1769ff;color:#fff;font-size:28px}.share-dashboard-card h3{margin:3px 0 5px;font-size:20px}.share-dashboard-card p{margin:0;color:#64748b}.share-dashboard-card-action{color:#1769ff;font-weight:850;white-space:nowrap}html[data-theme="dark"] .achievement-share-link{background:#172844;border-color:#345074;color:#8db9ff}html[data-theme="dark"] .share-dashboard-card{background:linear-gradient(135deg,#13233d,#172c4b);border-color:#345074;color:#f8fbff}html[data-theme="dark"] .share-dashboard-card p{color:#b8c7da}@media(max-width:700px){.result-share-actions{flex-direction:column}.result-share-actions .result-button{width:100%}.share-dashboard-card{grid-template-columns:auto minmax(0,1fr)}.share-dashboard-card-action{grid-column:1/-1}.achievement-share-link{margin-left:0}}.daily-goal-share-link{display:inline-flex;margin-top:7px;color:#1769ff;font-size:12px;font-weight:850;text-decoration:none}html[data-theme="dark"] .daily-goal-share-link{color:#8db9ff}/* 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/lesson-header-shortcuts-v17.8.6.css *//* ========================================================== TypingTutor.Online Lesson Header Shortcuts v17.8.6 Stats icon + Settings + Tips ========================================================== */.typing-practice-card .lesson-header-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:8px;min-width:0;justify-self:end}.typing-practice-card .lesson-header-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 14px;border:1px solid #cdddf5;border-radius:11px;background:#ffffff;color:#1557c8;box-shadow:0 5px 14px rgba(23, 105, 255, .10);font:inherit;font-size:11px;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease}.typing-practice-card .lesson-header-action:hover{transform:translateY(-1px);border-color:#8db8fb;background:#f5f9ff;box-shadow:0 8px 18px rgba(23, 105, 255, .15)}.typing-practice-card .lesson-header-action:active{transform:translateY(0)}.typing-practice-card .lesson-header-action:focus-visible{outline:3px solid rgba(23, 105, 255, .28);outline-offset:2px}.typing-practice-card .lesson-header-action-icon{display:inline-grid;place-items:center;line-height:1}.typing-practice-card .lesson-stats-button{flex:0 0 44px;width:44px;min-width:44px;padding:0;font-size:19px}.typing-practice-card .lesson-settings-button{min-width:104px}.typing-practice-card .lesson-settings-button .lesson-header-action-icon{font-size:17px}.typing-practice-card .lesson-tips-button{min-width:90px;min-height:42px;padding:9px 15px;border:0;color:#ffffff;background:linear-gradient(135deg, #2780ff, #1769ff);box-shadow:0 7px 16px rgba(23, 105, 255, .20);font-size:11px;font-weight:800}.typing-practice-card .lesson-tips-button:hover{border-color:transparent;color:#ffffff;background:linear-gradient(135deg, #3690ff, #0f5de8)}html[data-theme="dark"] .typing-practice-card .lesson-header-action:not(.lesson-tips-button){border-color:#33445f;background:#151f31;color:#9cc2ff;box-shadow:0 6px 16px rgba(0, 0, 0, .24)}html[data-theme="dark"] .typing-practice-card .lesson-header-action:not(.lesson-tips-button):hover{border-color:#4d6f9f;background:#1b2940}@media (max-width: 1180px){.typing-practice-card .lesson-header-actions{grid-column:2;grid-row:1}}@media (max-width: 760px){.typing-practice-card > .lesson-focus-bar{grid-template-columns:minmax(0, 1fr)}.typing-practice-card .lesson-focus-main{grid-column:1;grid-row:1}.typing-practice-card .lesson-header-actions{grid-column:1;grid-row:2;width:100%;justify-self:stretch}.typing-practice-card .lesson-settings-button,.typing-practice-card .lesson-tips-button{flex:1 1 0;min-width:0}.typing-practice-card .lesson-focus-meta{grid-column:1;grid-row:3}}@media (max-width: 430px){.typing-practice-card .lesson-header-actions{gap:6px}.typing-practice-card .lesson-header-action{min-height:40px;padding:8px 10px;font-size:10px}.typing-practice-card .lesson-stats-button{flex-basis:40px;width:40px;min-width:40px;padding:0;font-size:18px}}@media (prefers-reduced-motion: reduce){.typing-practice-card .lesson-header-action{transition:none}}/* ========================================================== Medium-width balance fix v17.8.6 Keep the title/actions row compact and make the lesson information use the complete available width when the desktop layout is squeezed. ========================================================== */@media (min-width: 761px) and (max-width: 1180px){.typing-practice-card > .lesson-focus-bar{column-gap:12px;row-gap:10px;padding:11px 14px}.typing-practice-card .lesson-header-actions{gap:7px}.typing-practice-card .lesson-header-action{min-height:40px;padding:8px 12px}.typing-practice-card .lesson-stats-button{flex-basis:42px;width:42px;min-width:42px}.typing-practice-card .lesson-settings-button{min-width:96px}.typing-practice-card .lesson-tips-button{min-width:82px;padding-inline:13px}.typing-practice-card .lesson-focus-meta{width:100%;margin:0;gap:9px}.typing-practice-card .lesson-focus-meta > span{justify-content:center}}/* At this width Module and estimated Time are intentionally hidden by the existing lesson stylesheet. Spread the four remaining cards evenly instead of leaving a large empty area on the right. */@media (min-width: 761px) and (max-width: 1100px){.typing-practice-card .lesson-focus-meta{display:grid;grid-template-columns:minmax(78px, .62fr) minmax(178px, 1.5fr) minmax(142px, 1.05fr) minmax(150px, 1.15fr);align-items:stretch}.typing-practice-card .lesson-focus-meta > span{width:100%;min-height:48px;box-sizing:border-box}.typing-practice-card .lesson-focus-progress{min-width:0 !important}}/* Before the true mobile layout, keep controls readable without squeezing the lesson title or allowing button labels to wrap. */@media (min-width: 761px) and (max-width: 860px){.typing-practice-card > .lesson-focus-bar{grid-template-columns:minmax(0, 1fr) auto}.typing-practice-card .lesson-focus-title h2{font-size:1rem}.typing-practice-card .lesson-header-action{font-size:10px}.typing-practice-card .lesson-settings-button{min-width:90px}.typing-practice-card .lesson-tips-button{min-width:76px}}/* Source: /css/homepage-quick-access-v17.8.18.css *//* TypingTutor.Online — Homepage quick access v17.8.18 */.homepage-quick-access{padding:0 0 28px}.homepage-quick-access-inner{box-sizing:border-box;width:min( var(--tto-workspace-max, 1500px), calc(100% - (2 * var(--tto-workspace-gutter, 24px))) );max-width:var(--tto-workspace-max, 1500px);margin-inline:auto;padding:clamp(22px, 2.2vw, 30px);border:1px solid #d8e4ff;border-radius:24px;background:radial-gradient(circle at 92% 10%, rgba(23, 105, 255, 0.09), transparent 28%),linear-gradient(180deg, rgba(23, 105, 255, 0.055), rgba(23, 105, 255, 0.018));box-shadow:0 10px 30px rgba(15, 23, 42, 0.05)}.homepage-quick-access-kicker{display:inline-block;margin-bottom:9px;color:#1769ff;font-size:0.82rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase}.homepage-quick-access-copy h2{margin:0;color:#0f172a;font-size:clamp(1.55rem, 2vw, 2.15rem);line-height:1.15}.homepage-quick-access-copy p{max-width:900px;margin:11px 0 0;color:#475569;font-size:1rem;line-height:1.65}.homepage-quick-access-actions{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px;margin-top:22px}.homepage-quick-access-card{appearance:none;box-sizing:border-box;display:grid;grid-template-columns:50px minmax(0, 1fr) auto;align-items:center;gap:13px;min-width:0;min-height:88px;padding:16px 17px;border:1px solid #d6e1f5;border-radius:18px;background:rgba(255, 255, 255, 0.92);color:#0f172a;font:inherit;text-align:left;text-decoration:none;cursor:pointer;box-shadow:0 6px 18px rgba(15, 23, 42, 0.045);transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease,background-color 0.18s ease}.homepage-quick-access-card:hover,.homepage-quick-access-card:focus-visible{transform:translateY(-2px);border-color:#9dbdff;background:#ffffff;box-shadow:0 12px 28px rgba(15, 23, 42, 0.09);outline:none}.homepage-quick-access-card:focus-visible{box-shadow:0 0 0 3px rgba(23, 105, 255, 0.18),0 12px 28px rgba(15, 23, 42, 0.09)}.homepage-quick-access-card-extension{border-color:#bcd0ff;background:linear-gradient(135deg, #ffffff, #f4f8ff)}.homepage-quick-access-card-icon{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:15px;background:#edf4ff;color:#1769ff;font-size:1.45rem;line-height:1}.homepage-quick-access-card-icon-desktop{font-size:1.3rem}.homepage-quick-access-extension-icon-wrap{background:#ffffff;border:1px solid #d8e4ff;overflow:hidden}.homepage-quick-access-extension-icon{display:block;width:42px;height:42px;object-fit:contain;border-radius:10px}.homepage-quick-access-card-copy{min-width:0}.homepage-quick-access-card-copy strong{display:flex;flex-wrap:wrap;align-items:center;gap:7px;color:inherit;font-size:1rem;font-weight:800;line-height:1.3}.homepage-quick-access-card-copy small{display:block;margin-top:4px;color:#64748b;font-size:0.86rem;font-weight:500;line-height:1.35}.homepage-quick-access-badge{display:inline-flex;align-items:center;min-height:22px;padding:2px 7px;border-radius:999px;background:#eaf2ff;color:#1769ff;font-size:0.68rem;font-weight:800;letter-spacing:0.025em;text-transform:uppercase}.homepage-quick-access-card-arrow{color:#94a3b8;font-size:1.15rem;font-weight:800;transition:transform 0.18s ease,color 0.18s ease}.homepage-quick-access-card:hover .homepage-quick-access-card-arrow,.homepage-quick-access-card:focus-visible .homepage-quick-access-card-arrow{transform:translateX(2px);color:#1769ff}.homepage-quick-access-note{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:12px 14px;border:1px solid #dbe6f7;border-radius:14px;background:rgba(255, 255, 255, 0.68);color:#475569}.homepage-quick-access-note > span{flex:0 0 auto;font-size:1.05rem;line-height:1.45}.homepage-quick-access-note p{margin:0;font-size:0.9rem;line-height:1.55}.homepage-quick-access-message{min-height:1.4em;margin:12px 2px 0;color:#1769ff;font-size:0.9rem;font-weight:700}html[data-theme="dark"] .homepage-quick-access-inner{border-color:rgba(125, 167, 255, 0.32);background:radial-gradient(circle at 92% 10%, rgba(59, 130, 246, 0.18), transparent 30%),linear-gradient(180deg, rgba(23, 105, 255, 0.13), rgba(23, 105, 255, 0.06));box-shadow:0 12px 28px rgba(2, 6, 23, 0.28)}html[data-theme="dark"] .homepage-quick-access-copy h2,html[data-theme="dark"] .homepage-quick-access-card{color:#f8fafc}html[data-theme="dark"] .homepage-quick-access-copy p,html[data-theme="dark"] .homepage-quick-access-card-copy small,html[data-theme="dark"] .homepage-quick-access-note,html[data-theme="dark"] .homepage-quick-access-note p{color:#cbd5e1}html[data-theme="dark"] .homepage-quick-access-card{border-color:rgba(148, 163, 184, 0.26);background:rgba(15, 23, 42, 0.78);box-shadow:none}html[data-theme="dark"] .homepage-quick-access-card:hover,html[data-theme="dark"] .homepage-quick-access-card:focus-visible{border-color:rgba(125, 167, 255, 0.55);background:rgba(21, 32, 55, 0.96)}html[data-theme="dark"] .homepage-quick-access-card-extension{border-color:rgba(96, 165, 250, 0.42);background:linear-gradient(135deg, rgba(15, 23, 42, 0.84), rgba(23, 105, 255, 0.13))}html[data-theme="dark"] .homepage-quick-access-card-icon{background:rgba(23, 105, 255, 0.18);color:#9ec0ff}html[data-theme="dark"] .homepage-quick-access-extension-icon-wrap{background:#ffffff;border-color:rgba(125, 167, 255, 0.45)}html[data-theme="dark"] .homepage-quick-access-badge{background:rgba(59, 130, 246, 0.2);color:#a9c7ff}html[data-theme="dark"] .homepage-quick-access-note{border-color:rgba(148, 163, 184, 0.22);background:rgba(15, 23, 42, 0.46)}@media (max-width: 980px){.homepage-quick-access-actions{grid-template-columns:1fr}.homepage-quick-access-card{min-height:78px}}@media (max-width: 560px){.homepage-quick-access{padding-bottom:22px}.homepage-quick-access-inner{padding:20px 15px;border-radius:20px}.homepage-quick-access-card{grid-template-columns:44px minmax(0, 1fr) auto;gap:11px;min-height:74px;padding:13px 14px;border-radius:16px}.homepage-quick-access-card-icon{width:44px;height:44px;border-radius:13px;font-size:1.25rem}.homepage-quick-access-extension-icon{width:38px;height:38px}.homepage-quick-access-card-copy small{font-size:0.8rem}.homepage-quick-access-note{padding:11px 12px}}@media (prefers-reduced-motion: reduce){.homepage-quick-access-card,.homepage-quick-access-card-arrow{transition:none}}/* Source: /css/smart-homepage-v17.8.32.css *//* TypingTutor.Online — smart returning-user homepage v17.8.25 */.smart-homepage{padding:18px 0 20px}.smart-homepage[hidden]{display:none !important}.smart-homepage-inner{position:relative;box-sizing:border-box;width:min( var(--tto-workspace-max, 1500px), calc(100% - (2 * var(--tto-workspace-gutter, 24px))) );max-width:var(--tto-workspace-max, 1500px);margin-inline:auto;display:grid;grid-template-columns:minmax(0, 1.35fr) minmax(340px, 0.9fr);gap:clamp(20px, 3vw, 42px);align-items:center;padding:clamp(24px, 3vw, 38px);border:1px solid #dbe6f7;border-radius:26px;background:radial-gradient(circle at 94% 12%, rgba(23, 105, 255, 0.12), transparent 30%),linear-gradient(135deg, #ffffff 0%, #f8fbff 62%, #f1f6ff 100%);box-shadow:0 14px 36px rgba(15, 23, 42, 0.06)}.smart-homepage-kicker{display:inline-flex;align-items:center;min-height:28px;margin-bottom:10px;padding:4px 10px;border-radius:999px;background:#eaf2ff;color:#1769ff;font-size:0.78rem;font-weight:800;letter-spacing:0.04em;text-transform:uppercase}.smart-homepage-copy h1{margin:0;color:#0f172a;font-size:clamp(2rem, 3.4vw, 3.35rem);line-height:1.05;letter-spacing:-0.035em}.smart-homepage-lead{max-width:760px;margin:14px 0 0;color:#475569;font-size:clamp(1rem, 1.25vw, 1.15rem);line-height:1.65}.smart-homepage-lesson-name{margin:7px 0 0;color:#64748b;font-size:0.95rem;font-weight:650}.smart-homepage-actions{display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-top:21px}.smart-homepage-primary,.smart-homepage-secondary{box-sizing:border-box;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;border-radius:14px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer}.smart-homepage-primary{border:1px solid #1769ff;background:linear-gradient(135deg, #1769ff, #2d7dff);color:#ffffff;box-shadow:0 10px 22px rgba(23, 105, 255, 0.2)}.smart-homepage-primary:hover,.smart-homepage-primary:focus-visible{transform:translateY(-1px);box-shadow:0 13px 26px rgba(23, 105, 255, 0.26)}.smart-homepage-secondary{border:1px solid #cbd9f0;background:rgba(255, 255, 255, 0.82);color:#1e3a5f}.smart-homepage-secondary:hover,.smart-homepage-secondary:focus-visible{border-color:#9dbdff;background:#ffffff}.smart-homepage-primary:focus-visible,.smart-homepage-secondary:focus-visible{outline:3px solid rgba(23, 105, 255, 0.2);outline-offset:2px}.smart-homepage-summary{display:grid;gap:10px}.smart-homepage-summary[hidden],.smart-homepage-new-summary[hidden],.smart-homepage-lesson-name[hidden]{display:none !important}.smart-homepage-metric{position:relative;display:grid;grid-template-columns:42px minmax(0, 1fr);gap:12px;align-items:center;min-height:74px;padding:13px 15px;border:1px solid #dbe6f7;border-radius:17px;background:rgba(255, 255, 255, 0.84)}.smart-homepage-metric-icon{width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;background:#edf4ff;font-size:1.15rem}.smart-homepage-metric strong,.smart-homepage-metric span{display:block}.smart-homepage-metric strong{color:#0f172a;font-size:0.98rem;line-height:1.35}.smart-homepage-metric div > span{margin-top:2px;color:#64748b;font-size:0.82rem;line-height:1.35}.smart-homepage-goal-track{grid-column:1/-1;height:7px;margin-top:-3px;overflow:hidden;border-radius:999px;background:#e7edf7}.smart-homepage-goal-track span{width:0;height:100%;border-radius:inherit;background:#1769ff;transition:width 0.28s ease}.smart-homepage-new-summary{display:grid;grid-template-columns:1fr;gap:11px;padding:5px 0}.smart-homepage-new-summary > span{display:flex;align-items:center;gap:11px;min-height:52px;padding:10px 13px;border:1px solid #dbe6f7;border-radius:15px;background:rgba(255, 255, 255, 0.78);color:#334155;font-size:0.94rem;font-weight:650}.smart-homepage-new-summary b{min-width:28px;color:#1769ff;font-size:1.05rem;text-align:center}html[data-theme="dark"] .smart-homepage-inner{border-color:rgba(125, 167, 255, 0.3);background:radial-gradient(circle at 94% 12%, rgba(59, 130, 246, 0.18), transparent 32%),linear-gradient(135deg, #101827 0%, #0f172a 60%, #111e35 100%);box-shadow:0 14px 36px rgba(2, 6, 23, 0.28)}html[data-theme="dark"] .smart-homepage-copy h1,html[data-theme="dark"] .smart-homepage-metric strong{color:#f8fafc}html[data-theme="dark"] .smart-homepage-lead,html[data-theme="dark"] .smart-homepage-lesson-name,html[data-theme="dark"] .smart-homepage-metric div > span{color:#cbd5e1}html[data-theme="dark"] .smart-homepage-kicker,html[data-theme="dark"] .smart-homepage-metric-icon{background:rgba(23, 105, 255, 0.18);color:#a9c7ff}html[data-theme="dark"] .smart-homepage-metric,html[data-theme="dark"] .smart-homepage-new-summary > span,html[data-theme="dark"] .smart-homepage-secondary{border-color:rgba(148, 163, 184, 0.24);background:rgba(15, 23, 42, 0.7);color:#e2e8f0}html[data-theme="dark"] .smart-homepage-goal-track{background:rgba(148, 163, 184, 0.22)}@media (prefers-color-scheme: dark){html[data-theme="system"] .smart-homepage-inner{border-color:rgba(125, 167, 255, 0.3);background:radial-gradient(circle at 94% 12%, rgba(59, 130, 246, 0.18), transparent 32%),linear-gradient(135deg, #101827 0%, #0f172a 60%, #111e35 100%)}html[data-theme="system"] .smart-homepage-copy h1,html[data-theme="system"] .smart-homepage-metric strong{color:#f8fafc}html[data-theme="system"] .smart-homepage-lead,html[data-theme="system"] .smart-homepage-lesson-name,html[data-theme="system"] .smart-homepage-metric div > span{color:#cbd5e1}html[data-theme="system"] .smart-homepage-kicker,html[data-theme="system"] .smart-homepage-metric-icon{background:rgba(23, 105, 255, 0.18);color:#a9c7ff}html[data-theme="system"] .smart-homepage-metric,html[data-theme="system"] .smart-homepage-new-summary > span,html[data-theme="system"] .smart-homepage-secondary{border-color:rgba(148, 163, 184, 0.24);background:rgba(15, 23, 42, 0.7);color:#e2e8f0}}@media (max-width: 980px){.smart-homepage-inner{grid-template-columns:1fr}.smart-homepage-summary,.smart-homepage-new-summary{grid-template-columns:repeat(3, minmax(0, 1fr))}.smart-homepage-metric,.smart-homepage-new-summary > span{min-height:82px}}@media (max-width: 760px){.smart-homepage{padding-top:12px}.smart-homepage-inner{width:calc(100% - 24px);padding:21px 17px;border-radius:21px}.smart-homepage-summary,.smart-homepage-new-summary{grid-template-columns:1fr}.smart-homepage-actions{align-items:stretch}.smart-homepage-primary,.smart-homepage-secondary{width:100%}}@media (prefers-reduced-motion: reduce){.smart-homepage-primary,.smart-homepage-secondary,.smart-homepage-goal-track span{transition:none !important}}/* Certificate + milestone motivation */.smart-homepage-certificate{grid-column:1/-1;display:grid;grid-template-columns:48px minmax(0, 1fr) auto;gap:14px;align-items:center;padding:15px 16px;border:1px solid #d7e3f6;border-radius:20px;background:rgba(255, 255, 255, 0.72)}.smart-homepage-certificate-icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;background:#fff7e6;font-size:1.35rem}.smart-homepage-certificate-copy{min-width:0;flex:1 1 auto}.smart-homepage-certificate-kicker{display:block;margin-bottom:2px;color:#7c5a0a;font-size:0.72rem;font-weight:800;letter-spacing:0.055em;text-transform:uppercase}.smart-homepage-certificate-copy strong{display:block;color:#0f172a;font-size:0.98rem;line-height:1.35}.smart-homepage-certificate-copy > span:not(.smart-homepage-certificate-kicker){display:block;margin-top:3px;color:#64748b;font-size:0.82rem;line-height:1.4}.smart-homepage-certificate-track{height:8px;margin-top:9px;overflow:hidden;border-radius:999px;background:#e7edf7}.smart-homepage-certificate-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg, #1769ff, #4f8cff);transition:width 0.28s ease}.smart-homepage-certificate-action{min-height:44px;padding:0 16px;border:1px solid #c7d7f1;border-radius:13px;background:#ffffff;color:#174ea6;font:inherit;font-size:0.88rem;font-weight:800;cursor:pointer;white-space:nowrap}.smart-homepage-certificate-action:hover,.smart-homepage-certificate-action:focus-visible{border-color:#8eb3f5;background:#f7faff}.smart-homepage-certificate-action:focus-visible{outline:3px solid rgba(23, 105, 255, 0.2);outline-offset:2px}html[data-theme="dark"] .smart-homepage-certificate{border-color:rgba(148, 163, 184, 0.24);background:rgba(15, 23, 42, 0.62)}html[data-theme="dark"] .smart-homepage-certificate-icon{background:rgba(245, 158, 11, 0.14)}html[data-theme="dark"] .smart-homepage-certificate-kicker{color:#f8cf72}html[data-theme="dark"] .smart-homepage-certificate-copy strong{color:#f8fafc}html[data-theme="dark"] .smart-homepage-certificate-copy > span:not(.smart-homepage-certificate-kicker){color:#cbd5e1}html[data-theme="dark"] .smart-homepage-certificate-track{background:rgba(148, 163, 184, 0.22)}html[data-theme="dark"] .smart-homepage-certificate-action{border-color:rgba(125, 167, 255, 0.34);background:rgba(23, 105, 255, 0.12);color:#cfe0ff}@media (prefers-color-scheme: dark){html[data-theme="system"] .smart-homepage-certificate{border-color:rgba(148, 163, 184, 0.24);background:rgba(15, 23, 42, 0.62)}html[data-theme="system"] .smart-homepage-certificate-icon{background:rgba(245, 158, 11, 0.14)}html[data-theme="system"] .smart-homepage-certificate-kicker{color:#f8cf72}html[data-theme="system"] .smart-homepage-certificate-copy strong{color:#f8fafc}html[data-theme="system"] .smart-homepage-certificate-copy > span:not(.smart-homepage-certificate-kicker){color:#cbd5e1}html[data-theme="system"] .smart-homepage-certificate-track{background:rgba(148, 163, 184, 0.22)}html[data-theme="system"] .smart-homepage-certificate-action{border-color:rgba(125, 167, 255, 0.34);background:rgba(23, 105, 255, 0.12);color:#cfe0ff}}@media (max-width: 760px){.smart-homepage-certificate{grid-template-columns:44px minmax(0, 1fr);padding:14px}.smart-homepage-certificate-icon{width:44px;height:44px;border-radius:14px}.smart-homepage-certificate-action{grid-column:1/-1;width:100%}}@media (prefers-reduced-motion: reduce){.smart-homepage-certificate-track span{transition:none !important}}/* ========================================================== Returning learner welcome — v17.8.25 Large floating course summary inspired by the smart homepage. It overlays the tutor instead of pushing the lesson downward. ========================================================== */.returning-welcome-toast{position:fixed;z-index:1200;top:92px;left:50%;width:min(1180px, calc(100% - 36px));transform:translate(-50%, -10px);opacity:0;pointer-events:none}.returning-welcome-toast[hidden]{display:none !important}.returning-welcome-toast.is-visible{animation:returningWelcomeIn 240ms ease-out forwards}.returning-welcome-toast.is-leaving{animation:returningWelcomeOut 300ms ease-in forwards}.returning-welcome-toast-card{position:relative;overflow:hidden;border:1px solid rgba(23, 105, 255, 0.2);border-radius:26px;background:radial-gradient(circle at 92% 8%, rgba(91, 146, 255, 0.22), transparent 38%),linear-gradient(135deg, rgba(255, 255, 255, 0.985), rgba(243, 248, 255, 0.985));box-shadow:0 24px 58px rgba(15, 23, 42, 0.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:auto}.returning-welcome-toast-main{display:grid;grid-template-columns:minmax(0, 1.08fr) minmax(360px, 0.92fr);gap:46px;align-items:center;padding:34px 38px}.returning-welcome-toast-copy{min-width:0}.returning-welcome-toast-kicker{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;background:#eaf2ff;color:#1769ff;font-size:0.78rem;font-weight:800;letter-spacing:0.04em;text-transform:uppercase}.returning-welcome-toast-copy h2{margin:14px 0 0;color:#0b1327;font-size:clamp(2.4rem, 4.2vw, 4.4rem);line-height:0.98;letter-spacing:-0.04em}.returning-welcome-toast-lesson-line{margin:20px 0 0;color:#52627a;font-size:1.08rem}.returning-welcome-toast-lesson-line strong{color:inherit}.returning-welcome-toast-lesson-name{display:block;margin-top:10px;color:#5a6b85;font-size:1rem;line-height:1.45}.returning-welcome-toast-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.returning-welcome-toast-primary,.returning-welcome-toast-secondary{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;border-radius:13px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer}.returning-welcome-toast-primary{border:1px solid #1769ff;background:linear-gradient(135deg, #1769ff, #2d7dff);color:#fff;box-shadow:0 10px 24px rgba(23, 105, 255, 0.22)}.returning-welcome-toast-secondary{border:1px solid #c9d9f4;background:rgba(255, 255, 255, 0.8);color:#1e3356}.returning-welcome-toast-primary:hover,.returning-welcome-toast-primary:focus-visible,.returning-welcome-toast-secondary:hover,.returning-welcome-toast-secondary:focus-visible{transform:translateY(-1px)}.returning-welcome-toast-primary:focus-visible,.returning-welcome-toast-secondary:focus-visible{outline:3px solid rgba(23, 105, 255, 0.25);outline-offset:2px}.returning-welcome-toast-stats{display:grid;gap:12px}.returning-welcome-stat-card{min-width:0;display:grid;grid-template-columns:48px minmax(0, 1fr);gap:14px;align-items:center;padding:14px 16px;border:1px solid rgba(168, 194, 238, 0.62);border-radius:17px;background:rgba(255, 255, 255, 0.84)}.returning-welcome-stat-icon{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;background:#edf4ff;font-size:1.3rem}.returning-welcome-stat-copy{min-width:0}.returning-welcome-stat-copy strong,.returning-welcome-stat-copy span{display:block}.returning-welcome-stat-copy strong{overflow-wrap:anywhere;color:#111b31;font-size:0.98rem;line-height:1.35}.returning-welcome-stat-copy > span{margin-top:3px;color:#71809a;font-size:0.88rem;line-height:1.35}.returning-welcome-daily-track{height:5px;margin-top:9px;overflow:hidden;border-radius:999px;background:#e2e9f4}.returning-welcome-daily-track span{display:block;width:0;height:100%;border-radius:inherit;background:#1769ff;transition:width 240ms ease}.returning-welcome-toast-close{position:absolute;z-index:2;top:14px;right:14px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(148, 163, 184, 0.3);border-radius:12px;background:rgba(255, 255, 255, 0.82);color:#5c6b82;font:inherit;font-size:1.35rem;line-height:1;cursor:pointer}.returning-welcome-toast-close:hover{background:#ffffff;color:#1769ff;border-color:rgba(23, 105, 255, 0.32)}.returning-welcome-toast-close:focus-visible{outline:3px solid rgba(23, 105, 255, 0.28);outline-offset:2px}@keyframes returningWelcomeIn{from{opacity:0;transform:translate(-50%, -10px) scale(0.99)}to{opacity:1;transform:translate(-50%, 0) scale(1)}}@keyframes returningWelcomeOut{from{opacity:1;transform:translate(-50%, 0) scale(1)}to{opacity:0;transform:translate(-50%, -7px) scale(0.995)}}/* Returning learners keep certificate motivation below the tutor. */.returning-certificate-milestone{width:min(1500px, calc(100% - 32px));margin:22px auto 4px}.returning-certificate-milestone[hidden]{display:none !important}.returning-certificate-card{box-shadow:0 8px 24px rgba(15, 23, 42, 0.05)}html[data-theme="dark"] .returning-welcome-toast-card{border-color:rgba(125, 167, 255, 0.26);background:radial-gradient(circle at 92% 8%, rgba(42, 103, 224, 0.24), transparent 38%),linear-gradient(135deg, rgba(15, 23, 42, 0.985), rgba(20, 31, 55, 0.985));box-shadow:0 26px 60px rgba(2, 6, 23, 0.5)}html[data-theme="dark"] .returning-welcome-toast-kicker{background:rgba(23, 105, 255, 0.18);color:#8bb4ff}html[data-theme="dark"] .returning-welcome-toast-copy h2,html[data-theme="dark"] .returning-welcome-stat-copy strong{color:#f8fafc}html[data-theme="dark"] .returning-welcome-toast-lesson-line,html[data-theme="dark"] .returning-welcome-toast-lesson-name,html[data-theme="dark"] .returning-welcome-stat-copy > span{color:#cbd5e1}html[data-theme="dark"] .returning-welcome-stat-card,html[data-theme="dark"] .returning-welcome-toast-secondary,html[data-theme="dark"] .returning-welcome-toast-close{background:rgba(15, 23, 42, 0.76);border-color:rgba(148, 163, 184, 0.26);color:#e2e8f0}html[data-theme="dark"] .returning-welcome-stat-icon{background:rgba(23, 105, 255, 0.18)}html[data-theme="dark"] .returning-welcome-daily-track{background:rgba(148, 163, 184, 0.2)}@media (prefers-color-scheme: dark){html[data-theme="system"] .returning-welcome-toast-card{border-color:rgba(125, 167, 255, 0.26);background:radial-gradient(circle at 92% 8%, rgba(42, 103, 224, 0.24), transparent 38%),linear-gradient(135deg, rgba(15, 23, 42, 0.985), rgba(20, 31, 55, 0.985));box-shadow:0 26px 60px rgba(2, 6, 23, 0.5)}html[data-theme="system"] .returning-welcome-toast-kicker{background:rgba(23, 105, 255, 0.18);color:#8bb4ff}html[data-theme="system"] .returning-welcome-toast-copy h2,html[data-theme="system"] .returning-welcome-stat-copy strong{color:#f8fafc}html[data-theme="system"] .returning-welcome-toast-lesson-line,html[data-theme="system"] .returning-welcome-toast-lesson-name,html[data-theme="system"] .returning-welcome-stat-copy > span{color:#cbd5e1}html[data-theme="system"] .returning-welcome-stat-card,html[data-theme="system"] .returning-welcome-toast-secondary,html[data-theme="system"] .returning-welcome-toast-close{background:rgba(15, 23, 42, 0.76);border-color:rgba(148, 163, 184, 0.26);color:#e2e8f0}html[data-theme="system"] .returning-welcome-stat-icon{background:rgba(23, 105, 255, 0.18)}html[data-theme="system"] .returning-welcome-daily-track{background:rgba(148, 163, 184, 0.2)}}@media (max-width: 900px){.returning-welcome-toast{top:82px;width:calc(100% - 24px)}.returning-welcome-toast-main{grid-template-columns:1fr;gap:22px;padding:28px 24px 24px}.returning-welcome-toast-copy h2{font-size:clamp(2.1rem, 8vw, 3.2rem)}.returning-welcome-toast-stats{grid-template-columns:repeat(3, minmax(0, 1fr))}.returning-welcome-stat-card{grid-template-columns:1fr;align-items:start}}@media (max-width: 640px){.returning-welcome-toast{top:70px;width:calc(100% - 16px)}.returning-welcome-toast-card{border-radius:20px}.returning-welcome-toast-main{gap:18px;padding:22px 16px 18px}.returning-welcome-toast-copy h2{margin-top:10px;font-size:2.15rem}.returning-welcome-toast-lesson-line{margin-top:14px}.returning-welcome-toast-actions{gap:9px;margin-top:18px}.returning-welcome-toast-primary,.returning-welcome-toast-secondary{flex:1 1 100%;min-height:46px}.returning-welcome-toast-stats{grid-template-columns:1fr;gap:8px}.returning-welcome-stat-card{grid-template-columns:42px minmax(0, 1fr);gap:11px;padding:11px 12px;border-radius:14px}.returning-welcome-stat-icon{width:42px;height:42px;border-radius:13px}.returning-welcome-toast-close{top:10px;right:10px}.returning-certificate-milestone{width:calc(100% - 24px);margin-top:16px}}@media (prefers-reduced-motion: reduce){.returning-welcome-toast.is-visible,.returning-welcome-toast.is-leaving{animation:none !important;transform:translate(-50%, 0)}.returning-welcome-toast.is-visible{opacity:1}.returning-welcome-toast.is-leaving{opacity:0}.returning-welcome-daily-track span{transition:none !important}}/* ========================================================= v17.8.31 — dismissible first-time introduction ========================================================= */.smart-homepage-dismiss{position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #cddbf8;border-radius:12px;background:rgba(255, 255, 255, 0.9);color:#475569;font:inherit;font-size:1.45rem;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(15, 23, 42, 0.06);transition:background-color 0.18s ease,border-color 0.18s ease,color 0.18s ease,transform 0.18s ease}.smart-homepage-dismiss:hover{background:#ffffff;border-color:#9dbdff;color:#1769ff;transform:translateY(-1px)}.smart-homepage-dismiss:focus-visible{outline:3px solid rgba(23, 105, 255, 0.24);outline-offset:2px}html[data-theme="dark"] .smart-homepage-dismiss{background:rgba(15, 23, 42, 0.9);border-color:rgba(148, 163, 184, 0.32);color:#cbd5e1}html[data-theme="dark"] .smart-homepage-dismiss:hover{background:#111827;border-color:rgba(96, 165, 250, 0.72);color:#93c5fd}@media (prefers-color-scheme: dark){html[data-theme="system"] .smart-homepage-dismiss{background:rgba(15, 23, 42, 0.9);border-color:rgba(148, 163, 184, 0.32);color:#cbd5e1}}@media (max-width: 760px){.smart-homepage-dismiss{top:12px;right:12px;width:36px;height:36px}.smart-homepage-copy{padding-right:34px}}/* ========================================================== v17.8.84 — compact once-daily returning learner toast ========================================================== */.returning-daily-toast{position:fixed;z-index:10020;left:50%;bottom:max(18px, env(safe-area-inset-bottom));width:min(680px, calc(100vw - 32px));transform:translate(-50%, 18px);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}.returning-daily-toast[hidden]{display:none !important}.returning-daily-toast.is-visible{opacity:1;transform:translate(-50%, 0);pointer-events:auto}.returning-daily-toast.is-leaving{opacity:0;transform:translate(-50%, 12px);pointer-events:none}.returning-daily-toast-card{display:grid;grid-template-columns:38px minmax(0, 1fr) 34px;gap:12px;align-items:center;min-height:72px;padding:12px 12px 12px 14px;border:1px solid rgba(22, 163, 74, .34);border-radius:17px;background:rgba(240, 253, 244, .97);box-shadow:0 14px 36px rgba(15, 23, 42, .18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.returning-daily-toast-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#16a34a;color:#fff;font-size:1.05rem;font-weight:900;box-shadow:0 6px 14px rgba(22, 163, 74, .2)}.returning-daily-toast-copy{min-width:0;display:grid;gap:3px}.returning-daily-toast-copy strong{color:#14532d;font-size:1rem;line-height:1.2;font-weight:850}.returning-daily-toast-copy span{color:#3f654d;font-size:.9rem;line-height:1.38}.returning-daily-toast-close{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;color:#52715d;font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}.returning-daily-toast-close:hover,.returning-daily-toast-close:focus-visible{background:rgba(22, 163, 74, .1);color:#14532d}.returning-daily-toast-close:focus-visible{outline:2px solid rgba(22, 163, 74, .35);outline-offset:2px}html[data-theme="dark"] .returning-daily-toast-card{border-color:rgba(74, 222, 128, .32);background:rgba(20, 50, 34, .97);box-shadow:0 14px 38px rgba(0, 0, 0, .34)}html[data-theme="dark"] .returning-daily-toast-copy strong{color:#dcfce7}html[data-theme="dark"] .returning-daily-toast-copy span,html[data-theme="dark"] .returning-daily-toast-close{color:#bbdfc7}@media (prefers-color-scheme: dark){html[data-theme="system"] .returning-daily-toast-card{border-color:rgba(74, 222, 128, .32);background:rgba(20, 50, 34, .97);box-shadow:0 14px 38px rgba(0, 0, 0, .34)}html[data-theme="system"] .returning-daily-toast-copy strong{color:#dcfce7}html[data-theme="system"] .returning-daily-toast-copy span,html[data-theme="system"] .returning-daily-toast-close{color:#bbdfc7}}@media (max-width: 560px){.returning-daily-toast{bottom:max(12px, env(safe-area-inset-bottom));width:calc(100vw - 20px)}.returning-daily-toast-card{grid-template-columns:34px minmax(0, 1fr) 30px;gap:9px;min-height:66px;padding:10px;border-radius:15px}.returning-daily-toast-icon{width:34px;height:34px;border-radius:10px}.returning-daily-toast-copy strong{font-size:.95rem}.returning-daily-toast-copy span{font-size:.82rem;line-height:1.34}.returning-daily-toast-close{width:30px;height:30px}}@media (prefers-reduced-motion: reduce){.returning-daily-toast{transition:opacity .01ms linear;transform:translate(-50%, 0)}}/* Source: /css/onboarding-flow-polish-v17.8.37.css *//* ========================================================== TypingTutor.Online — Onboarding Flow Polish v17.8.37 ========================================================== *//* Center the pre-render placeholder exactly inside the lesson viewport. white-space: normal removes the indentation preserved by the normal pre-wrap typing-text rules. TextRenderer removes this class immediately before real lesson characters are rendered. */#lessonText.lesson-text-preparing{display:flex !important;align-items:center !important;justify-content:center !important;text-align:center !important;white-space:normal !important;padding:0 20px !important}/* Lesson is now a real fallback link as well as an app control. */#header .lesson-home-nav-button{text-decoration:none;-webkit-tap-highlight-color:transparent}/* TypingTutor.Online v17.10.22 — practical typing-speed targets */.typing-speed-targets{width:min(calc(100% - 32px),1500px);margin:32px auto 0}.typing-speed-targets-inner{padding:clamp(22px,3vw,34px);border:1px solid #d7e2f0;border-radius:24px;background:linear-gradient(135deg,#f5f9ff 0%,#fbf8ff 52%,#f7fff9 100%);box-shadow:0 16px 40px rgba(15,23,42,.05)}.typing-speed-targets-heading{max-width:900px;margin-bottom:20px}.typing-speed-targets-heading>span{display:block;margin-bottom:6px;color:#1769ff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.typing-speed-targets-heading h2{margin:0 0 8px;font-size:clamp(27px,3vw,40px);line-height:1.15}.typing-speed-targets-heading p{margin:0;color:#52627a;line-height:1.65}.typing-speed-target-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.typing-speed-target-card{min-width:0;padding:18px;border:1px solid #dbe6f3;border-radius:18px;background:rgba(255,255,255,.86)}.typing-speed-target-card:nth-child(2n){background:#fffaf0}.typing-speed-target-card:nth-child(3n){background:#f2fbf7}.typing-speed-target-card:nth-child(4n){background:#f8f5ff}.typing-speed-target-card>span{display:block;font-size:23px;margin-bottom:8px}.typing-speed-target-card h3{margin:0 0 7px;font-size:18px}.typing-speed-target-card strong{display:block;margin-bottom:7px;color:#1769ff;font-size:21px}.typing-speed-target-card p{margin:0 0 12px;color:#5c6d83;font-size:14px;line-height:1.55}.typing-speed-target-card a{color:#1769ff;font-size:14px;font-weight:800;text-decoration:none}.typing-speed-target-card a:hover{text-decoration:underline}.typing-speed-target-card--guide{background:#eef6ff!important;border-color:#bfd8ff}html[data-theme="dark"] .typing-speed-targets-inner{background:linear-gradient(135deg,#111a2d,#17162a 55%,#10231c);border-color:#273852;box-shadow:none}html[data-theme="dark"] .typing-speed-target-card{background:#111827;border-color:#2a3a52}html[data-theme="dark"] .typing-speed-target-card:nth-child(2n),html[data-theme="dark"] .typing-speed-target-card:nth-child(3n),html[data-theme="dark"] .typing-speed-target-card:nth-child(4n),html[data-theme="dark"] .typing-speed-target-card--guide{background:#121b2c!important}html[data-theme="dark"] .typing-speed-targets-heading p,html[data-theme="dark"] .typing-speed-target-card p{color:#aab8ca}@media(prefers-color-scheme:dark){html[data-theme="system"] .typing-speed-targets-inner{background:linear-gradient(135deg,#111a2d,#17162a 55%,#10231c);border-color:#273852;box-shadow:none}html[data-theme="system"] .typing-speed-target-card{background:#111827;border-color:#2a3a52}html[data-theme="system"] .typing-speed-target-card:nth-child(2n),html[data-theme="system"] .typing-speed-target-card:nth-child(3n),html[data-theme="system"] .typing-speed-target-card:nth-child(4n),html[data-theme="system"] .typing-speed-target-card--guide{background:#121b2c!important}html[data-theme="system"] .typing-speed-targets-heading p,html[data-theme="system"] .typing-speed-target-card p{color:#aab8ca}}@media(max-width:1100px){.typing-speed-target-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.typing-speed-targets{width:min(calc(100% - 20px),1500px);margin-top:22px}.typing-speed-targets-inner{padding:18px;border-radius:18px}.typing-speed-target-grid{grid-template-columns:1fr}.typing-speed-target-card{padding:16px}.typing-speed-target-card strong{font-size:19px}}/* Homepage adapter for the shared universal header. Keep the dynamic mode controls intact; use the same horizontal sizing as .test-nav. */body.homepage-app #header .primary-mode-navigation{display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:clamp(2px, .72vw, 12px) !important}body.homepage-app #header #modeSwitcher{display:flex !important;flex:0 0 auto !important;position:static !important;width:auto !important;min-width:0 !important;min-height:0 !important;margin:0 !important;padding:0 !important;overflow:visible !important}body.homepage-app #header #modeSwitcher .mode-switcher-inner{width:auto !important;min-width:0 !important;margin:0 !important;padding:0 !important}body.homepage-app #header #modeSwitcher .mode-navigation{display:flex !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:flex-start !important;gap:clamp(2px, .72vw, 12px) !important;width:auto !important;margin:0 !important;padding:0 !important;overflow:visible !important}body.homepage-app #header .lesson-home-nav-button,body.homepage-app #header #modeSwitcher .mode-navigation > .mode-button,body.homepage-app #header #modeSwitcher .mode-more > summary.mode-button{display:inline-flex !important;flex:0 0 auto !important;align-items:center !important;justify-content:center !important;width:auto !important;height:auto !important;margin:0 !important;border-radius:12px !important;transform:none !important}body.homepage-app #header .lesson-home-nav-icon,body.homepage-app #header #modeSwitcher .mode-navigation > .mode-button > .mode-button-icon,body.homepage-app #header #modeSwitcher .mode-more > summary > .mode-button-icon{display:inline-flex !important;flex:0 0 22px !important;width:22px !important;min-width:22px !important;height:22px !important;margin:0 !important;font-size:19px !important;line-height:22px !important;transform:none !important}body.homepage-app #header .lesson-home-nav-label,body.homepage-app #header #modeSwitcher .mode-navigation > .mode-button > .mode-button-text,body.homepage-app #header #modeSwitcher .mode-more > summary > .mode-button-text{width:auto !important;margin:0 !important;font-size:inherit !important;line-height:1 !important}body.homepage-app #header .lesson-home-nav-button:not(:focus-visible){outline:none !important}@media (max-width: 1040px){body.homepage-app #header .primary-mode-navigation{justify-content:flex-start !important;overflow-x:auto !important;overflow-y:hidden !important;padding:2px 0 3px !important;scrollbar-width:none;-webkit-overflow-scrolling:touch}}@media (max-width: 900px){body.homepage-app #header .logo{width:235px !important;max-width:100% !important}body.homepage-app #header .site-logo-picture,body.homepage-app #header .site-logo-image{width:min(235px, 100%) !important;max-height:60px !important;height:auto !important}}@media (max-width: 590px){body.homepage-app #header .logo{width:190px !important}body.homepage-app #header .site-logo-picture,body.homepage-app #header .site-logo-image{width:min(190px, 100%) !important}body.homepage-app #header .lesson-home-nav-button,body.homepage-app #header #modeSwitcher .mode-navigation > .mode-button,body.homepage-app #header #modeSwitcher .mode-more > summary.mode-button{min-width:68px !important;min-height:44px !important;padding:7px 8px !important;flex-direction:column !important;gap:3px !important;font-size:9px !important;font-weight:750 !important;line-height:1 !important}}/* v17.10.189: Dropdown entries are horizontal action rows at every viewport. Top-level mobile button styles must not stack these icons and labels. */body.homepage-app #header #modeSwitcher .mode-more-menu{align-content:start !important;grid-template-columns:minmax(0, 1fr) !important;grid-auto-rows:auto !important;gap:4px !important}body.homepage-app #header #modeSwitcher .mode-more-menu > .mode-button{box-sizing:border-box !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:flex-start !important;gap:10px !important;width:100% !important;min-width:0 !important;height:auto !important;min-height:44px !important;margin:0 !important;padding:10px 12px !important;border-radius:9px !important;font-size:13px !important;line-height:1.3 !important;text-align:left !important}body.homepage-app #header #modeSwitcher .mode-more-menu > .mode-button > .mode-button-icon{display:inline-flex !important;align-items:center !important;justify-content:center !important;flex:0 0 22px !important;width:22px !important;min-width:22px !important;height:22px !important;margin:0 !important;padding:0 !important;font-size:19px !important;line-height:22px !important;transform:none !important}body.homepage-app #header #modeSwitcher .mode-more-menu > .mode-button > .mode-button-text{display:block !important;flex:1 1 auto !important;min-width:0 !important;width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;font-size:13px !important;line-height:1.3 !important;text-align:left !important;white-space:normal !important;overflow-wrap:anywhere}.journey-shell{max-width:1100px;margin:24px auto;padding:0 16px;color:var(--text-primary,#122039)}.journey-hero,.journey-step,.journey-note,.journey-result{background:var(--card-background,var(--surface,#fff));border:1px solid var(--border-color,#dce5f1);border-radius:16px;padding:22px}.journey-hero h1{font-size:clamp(26px,4vw,38px);margin:0 0 10px}.journey-hero p{margin:10px 0;line-height:1.65}.journey-primary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:#1769ff;color:white!important;border-radius:10px;padding:10px 18px;text-decoration:none;font-weight:700}.journey-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.journey-step{display:flex;flex-direction:column;min-width:0}.journey-step h2{font-size:20px;margin:0 0 10px}.journey-step p{line-height:1.6;margin:0 0 14px}.journey-step a{margin-top:auto;min-height:44px;display:flex;align-items:center;color:var(--primary-color,#1769ff);font-weight:700}.journey-step.is-done{border-color:#269f70}.journey-time{font-size:13px}.journey-note{line-height:1.7}.journey-note button{min-height:44px;padding:8px 12px;margin-top:12px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:8px;cursor:pointer}.journey-result{margin-top:18px;line-height:1.65}.journey-result h3{font-size:20px;margin:0 0 8px}.journey-result a,.journey-result button{display:inline-flex;margin:8px 8px 0 0;white-space:normal;max-width:100%}.journey-entry{display:block;margin:12px 0;padding:12px 16px;border:1px solid var(--border-color,#dce5f1);border-radius:12px;color:var(--primary-color,#1769ff);font-weight:700;text-decoration:none}.journey-shell a:focus-visible,.journey-entry:focus-visible{outline:3px solid #1769ff;outline-offset:3px}html[data-theme="dark"] .journey-hero,html[data-theme="dark"] .journey-step,html[data-theme="dark"] .journey-note,html[data-theme="dark"] .journey-result{background:#111c2e;color:#f2f6ff;border-color:#34445c}@media(prefers-color-scheme:dark){html[data-theme="system"] .journey-hero,html[data-theme="system"] .journey-step,html[data-theme="system"] .journey-note,html[data-theme="system"] .journey-result{background:#111c2e;color:#f2f6ff;border-color:#34445c}}@media(max-width:720px){.journey-steps{grid-template-columns:1fr}.journey-hero,.journey-step,.journey-note{padding:18px}.journey-primary{width:100%;box-sizing:border-box}}/* v17.10.299 — visitor guidance following the interactive daily plan */.journey-editorial{margin-top:20px;padding:24px;background:var(--card-background,var(--surface,#fff));border:1px solid var(--border-color,#dce5f1);border-radius:16px;line-height:1.75}.journey-editorial h2{font-size:clamp(21px,3vw,28px);margin:0 0 12px}.journey-editorial h3{font-size:18px;margin:20px 0 8px}.journey-editorial p{margin:10px 0}.journey-editorial ol{padding-left:23px;margin:12px 0}.journey-editorial li{padding-left:3px;margin-bottom:9px}.journey-editorial a{color:var(--primary-color,#1769ff);text-underline-offset:3px}html[data-theme="dark"] .journey-editorial{background:#111c2e;color:#f2f6ff;border-color:#34445c}@media(prefers-color-scheme:dark){html[data-theme="system"] .journey-editorial{background:#111c2e;color:#f2f6ff;border-color:#34445c}}@media(max-width:720px){.journey-editorial{padding:18px}}/* Phase 2 contextual help: progressive disclosure, never overlay the typing surface. */.tt-coach{box-sizing:border-box;max-width:100%;min-width:0;color:var(--text-primary,var(--text,#1b304f));font-size:14px;line-height:1.55}.tt-coach details{margin:0;border:1px solid #cbd9e9;border-radius:11px;background:var(--surface,#f7faff);color:inherit}.tt-coach details:not([open]){background:transparent}.tt-coach summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 12px;min-height:36px;font-weight:650;font-size:13px}.tt-coach summary::-webkit-details-marker{display:none}.tt-coach summary::after{content:'+';font-size:19px;line-height:1;color:#46658e}.tt-coach details[open] summary::after{content:'−'}.tt-coach summary:focus-visible,.tt-coach a:focus-visible{outline:3px solid #1682e3;outline-offset:2px}.tt-coach-content{padding:0 13px 12px;max-width:820px;color:inherit}.tt-coach-content p{margin:5px 0 8px;font-size:13px;line-height:1.6}.tt-coach-content ol,.tt-coach-content ul{margin:3px 0 9px 20px;padding:0}.tt-coach-content li{margin:3px 0;font-size:13px}.tt-coach-links{display:flex;flex-wrap:wrap;gap:6px 13px;margin-top:8px}.tt-coach a{color:#1169c4;text-decoration:underline;text-underline-offset:2px;font-weight:600}.tt-coach-lesson{margin:7px 0 0;padding:0}.tt-coach-lesson details{background:transparent;border-color:#dae4f2}.tt-coach-test{margin:8px 0 12px}.tt-coach-game{margin:8px 0 12px}.tt-coach-improver{margin:9px 0 11px}.tt-coach-action{box-sizing:border-box;display:block;padding:12px 14px;border:1px solid #c8d8e7;border-radius:12px;background:#f2f8ff;color:#183150;line-height:1.5;margin:12px 0;max-width:100%}.tt-coach-action strong{display:block;font-size:14px;margin-bottom:3px}.tt-coach-action p{font-size:13px;margin:0 0 6px;color:#425673}.tt-coach-action a{font-size:13px;display:inline-block;margin-right:12px;color:#095ba4;text-decoration:underline;font-weight:650}.tt-coach-action[hidden]{display:none!important}.tt-coach-results{margin:12px 0 2px}.tt-coach-step{font-size:12px;margin:0 0 9px;padding:8px 12px;border-left:3px solid #2563eb;background:#eff6ff;border-radius:5px;color:#243b5b;line-height:1.55}.tt-coach-step[hidden]{display:none}:root[data-theme='dark'] .tt-coach,:root.dark .tt-coach{color:#e5edfa}:root[data-theme='dark'] .tt-coach details,:root.dark .tt-coach details{border-color:#3e536f;background:#172438}:root[data-theme='dark'] .tt-coach a,:root.dark .tt-coach a{color:#93c9ff}:root[data-theme='dark'] .tt-coach-action,:root.dark .tt-coach-action{background:#152843;border-color:#3d577b;color:#f0f6ff}:root[data-theme='dark'] .tt-coach-action p,:root.dark .tt-coach-action p{color:#c7d6ed}:root[data-theme='dark'] .tt-coach-step,:root.dark .tt-coach-step{background:#182d49;color:#cbdaf0}@media(prefers-color-scheme:dark){:root[data-theme='system'] .tt-coach details,:root:not([data-theme]) .tt-coach details{background:#172438;border-color:#3e536f;color:#e5edfa}:root[data-theme='system'] .tt-coach-action{background:#152843;border-color:#3d577b;color:#f0f6ff}:root[data-theme='system'] .tt-coach-action p{color:#c7d6ed}:root[data-theme='system'] .tt-coach a{color:#93c9ff}:root[data-theme='system'] .tt-coach-step{background:#182d49;color:#cbdaf0}}@media(max-width:680px){.tt-coach{font-size:13px}.tt-coach summary{padding:7px 10px;min-height:34px}.tt-coach-action{padding:10px 12px;margin:9px 0}.tt-coach-content{padding:0 11px 10px}.tt-coach-links{gap:6px 11px}}@media print{.tt-coach details:not([open]),.tt-coach-step{display:none}}/* v17.10.272 — Keep the primary navigation reachable above lesson tips, completion dialogs and other lesson overlays. No change to its dimensions. */body.homepage-app #header{position:relative;z-index:2147483000 !important}body.homepage-app #header .mode-more[open]{z-index:2147483001 !important}body.homepage-app #header .mode-more[open] > .mode-more-menu{z-index:2147483002 !important;isolation:isolate}/* Keep menu inside the viewport on compact and touch-screen devices. */@media (max-width: 1040px),(pointer: coarse){body.homepage-app #header .mode-more[open] > .mode-more-menu{max-height:min(70dvh, 480px) !important;overflow-y:auto !important;overscroll-behavior:contain}}/* Source: /css/keyboard-palettes-v17.10.285.css *//* TypingTutor.Online v17.10.285 — Keyboard-only Premium palettes. Scoped to the lesson's keyboard; typography, finger SVG geometry and the rest of the page follow existing light/dark settings. No remote assets. */.tto-palette-section{margin:14px 0 6px;padding:13px;border:1px solid var(--border, #cbd5e1);border-radius:12px}.tto-palette-heading{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}.tto-palette-heading strong{font-size:12px;color:var(--text,#182339)}.tto-palette-heading small,.tto-palette-feedback{font-size:11px;color:var(--text-muted,#64748b);line-height:1.55}.tto-palette-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tto-palette-choice{position:relative;display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;min-width:0;padding:9px;border:1px solid var(--border,#cbd5e1);border-radius:10px;background:var(--surface-alt,#f8fafc);color:var(--text,#182339);font:inherit;cursor:pointer}.tto-palette-choice:hover{border-color:var(--primary,#2563eb)}.tto-palette-choice:focus-visible{outline:3px solid var(--primary,#2563eb);outline-offset:2px}.tto-palette-choice[aria-pressed="true"]{border:2px solid var(--primary,#2563eb);padding:8px}.tto-palette-preview{display:flex;align-items:center;justify-content:center;gap:3px;padding:5px;width:100%;height:32px;background:var(--swatch-base);border-radius:6px}.tto-palette-preview i{width:25%;height:18px;border:1px solid #94a3b8;border-radius:4px;background:var(--swatch-key)}.tto-palette-preview i:last-child{background:var(--swatch-active);border-color:transparent}.tto-palette-name{font-size:11px;font-weight:700;white-space:normal}.tto-palette-tier{font-size:10px;color:var(--text-muted,#64748b)}.tto-palette-tier[data-premium-label="true"]{color:var(--primary,#2563eb);font-weight:750}.tto-palette-choice[data-premium-locked="true"] .tto-palette-preview{opacity:.7}.tto-palette-feedback{min-height:1.3em;margin:10px 0 0}@media(max-width:600px){.tto-palette-options{grid-template-columns:repeat(2,minmax(0,1fr))}}/* Explicit palettes use the same four key surfaces, independent of site theme. 'auto' omits overrides to preserve the longstanding light/dark keyboard. */html[data-keyboard-palette="classic"] #keyboardContainer{--pk-base:#f1f5fa;--pk-key:#ffffff;--pk-border:#cbd5e1;--pk-ink:#172338;--pk-secondary:#536176;--pk-highlight:#2563eb;--pk-hi-ink:#fff;--pk-home:#e2edff;--pk-shadow:rgba(21,41,76,.09)}html[data-keyboard-palette="midnight"] #keyboardContainer{--pk-base:#101929;--pk-key:#24344b;--pk-border:#52637b;--pk-ink:#f1f5fb;--pk-secondary:#c0ccdc;--pk-highlight:#3169e8;--pk-hi-ink:#fff;--pk-home:#344866;--pk-shadow:rgba(0,0,0,.3)}html[data-keyboard-palette="ocean"] #keyboardContainer{--pk-base:#dbeeff;--pk-key:#f5fbff;--pk-border:#8fbfec;--pk-ink:#184a78;--pk-secondary:#416486;--pk-highlight:#1269d3;--pk-hi-ink:#fff;--pk-home:#add7fa;--pk-shadow:rgba(24,74,120,.12)}html[data-keyboard-palette="mint"] #keyboardContainer{--pk-base:#e1f6ed;--pk-key:#f8fffb;--pk-border:#a1cdb8;--pk-ink:#205343;--pk-secondary:#496a5c;--pk-highlight:#087e5b;--pk-hi-ink:#fff;--pk-home:#b8e9d1;--pk-shadow:rgba(32,83,67,.11)}html[data-keyboard-palette="lavender"] #keyboardContainer{--pk-base:#eee8ff;--pk-key:#fcfaff;--pk-border:#c3b5e9;--pk-ink:#473477;--pk-secondary:#6c6090;--pk-highlight:#6d35c6;--pk-hi-ink:#fff;--pk-home:#d9cbfb;--pk-shadow:rgba(71,52,119,.11)}html[data-keyboard-palette="graphite"] #keyboardContainer{--pk-base:#141b29;--pk-key:#283448;--pk-border:#627089;--pk-ink:#f3f6fb;--pk-secondary:#c4cddd;--pk-highlight:#f0ba42;--pk-hi-ink:#192232;--pk-home:#47465a;--pk-shadow:rgba(0,0,0,.36)}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer{background:var(--pk-base) !important;border-color:var(--pk-border) !important;color:var(--pk-ink) !important;color-scheme:normal}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key:not(.key-next):not(.key-correct):not(.key-wrong){background:var(--pk-key) !important;border-color:var(--pk-border) !important;color:var(--pk-ink) !important;box-shadow:0 2px 5px var(--pk-shadow) !important;text-shadow:none!important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key:not(.key-next):not(.key-correct):not(.key-wrong) .key-primary{color:var(--pk-ink) !important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key:not(.key-next):not(.key-correct):not(.key-wrong) .key-secondary{color:var(--pk-secondary) !important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-next{background:var(--pk-highlight) !important;border-color:var(--pk-highlight) !important;color:var(--pk-hi-ink) !important;box-shadow:0 0 0 3px var(--pk-shadow) !important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-next .key-primary,html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-next .key-secondary{color:var(--pk-hi-ink) !important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-correct{background:#d8f6df!important;border-color:#249048!important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key-wrong{background:#ffe3e3!important;border-color:#d63838!important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer :is(.key-correct,.key-wrong) :is(.key-primary,.key-secondary){color:#172338!important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer :is(.key-next,.key-correct,.key-wrong) .home-bump{background:currentColor!important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .home-bump{background:var(--pk-secondary) !important}html[data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key.home:not(.key-next):not(.key-correct):not(.key-wrong){background:var(--pk-home) !important}html[data-high-contrast="true"][data-keyboard-palette]:not([data-keyboard-palette="auto"]) body #keyboardContainer .key{outline:1px solid var(--pk-border)}/* Source: /css/learning-content-v17.10.295.css *//* v17.10.295 — Helpful page-specific reading sections after interactive tools. No AdSense scripts, reserved ad rectangles, or ad placeholders. */.tto-quality-guide{box-sizing:border-box;max-width:1180px;margin:28px auto;padding:clamp(20px,3vw,32px);background:var(--surface,#fff);border:1px solid var(--border-color,#dce4ef);border-radius:18px;color:var(--text-primary,#17243a);line-height:1.68}.tto-quality-guide *,.tto-quality-guide *::before,.tto-quality-guide *::after{box-sizing:border-box}.tto-quality-guide .tto-quality-eyebrow{display:block;color:var(--primary-color,#2563eb);font-size:.76rem;font-weight:750;text-transform:uppercase;letter-spacing:.07em;margin:0 0 6px}.tto-quality-guide h2{font-size:clamp(1.22rem,2.3vw,1.65rem);line-height:1.3;margin:0 0 12px;color:inherit}.tto-quality-guide h3{font-size:1.02rem;line-height:1.38;margin:0 0 7px;color:inherit}.tto-quality-guide p{margin:0 0 14px;font-size:.97rem;max-width:90ch}.tto-quality-guide p:last-child{margin-bottom:0}.tto-quality-guide .tto-quality-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 18px}.tto-quality-guide .tto-quality-card{padding:15px 16px;border:1px solid var(--border-color,#dce4ef);border-radius:12px;background:transparent}.tto-quality-guide .tto-quality-card p{font-size:.91rem;margin:0}.tto-quality-guide .tto-quality-steps{padding-left:1.35rem;margin:8px 0 14px}.tto-quality-guide .tto-quality-steps li{padding-left:3px;margin:0 0 8px;font-size:.96rem}.tto-quality-guide .tto-quality-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.tto-quality-guide a{color:var(--primary-color,#2563eb);text-decoration:underline;text-underline-offset:2px;font-weight:650}.tto-quality-guide .tto-quality-actions a{padding:9px 12px;border:1px solid var(--border-color,#cbd7e8);border-radius:10px;text-decoration:none}.tto-quality-guide a:hover{text-decoration:underline}html[data-theme="dark"] .tto-quality-guide{background:#111c2d;border-color:#344563;color:#e7eefc}html[data-theme="dark"] .tto-quality-guide .tto-quality-card,html[data-theme="dark"] .tto-quality-guide .tto-quality-actions a{border-color:#344563}html[data-theme="dark"] .tto-quality-guide a{color:#90b9ff}@media(max-width:700px){.tto-quality-guide{margin:22px 12px;padding:18px}.tto-quality-guide .tto-quality-grid{grid-template-columns:1fr;gap:10px}}/* Source: /css/site-account-header-v17.10.311.css *//* 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}/* Source: /css/workspace-alignment-v17.10.339.css *//* Align the statistics shortcut and Kids home with the shared workspace. */#statisticsModePanel > .journey-entry,body.kids-index-page.kids-ui-redesign > main.kids-shell{box-sizing:border-box;width:min(var(--tto-workspace-max,1500px),calc(100% - (2 * var(--tto-workspace-gutter,16px))));max-width:var(--tto-workspace-max,1500px);margin-inline:auto}#statisticsModePanel > .journey-entry{overflow-wrap:anywhere;white-space:normal}/* Source: /css/lesson-card-access-v17.10.368.css */.course-lesson-list .lesson-card{position:relative}.course-lesson-list .lesson-card:not(.lesson-locked){cursor:pointer}.course-lesson-list .lesson-card .lesson-open-button{position:static}.course-lesson-list .lesson-card a.lesson-open-button[href]::after,.course-lesson-list .lesson-card button.lesson-open-button:not(:disabled)::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}.course-lesson-list .lesson-card:not(.lesson-locked):focus-within{outline:3px solid var(--primary,#1769ff);outline-offset:3px}.course-lesson-list .lesson-card.lesson-locked{cursor:default}#lesson-progression-note,#course-lesson-progression-note{line-height:1.65;font-size:.95rem;color:var(--text-light,#64748b)}/* Source: /css/lesson-adjacent-navigation-v17.10.369.css */.practice-footer .practice-footer-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:normal;min-width:0}.lesson-adjacent-navigation{display:flex;align-items:center;gap:6px}.lesson-adjacent-navigation button{min-height:40px;padding:8px 12px;border:1px solid var(--border,#cbd5e1);border-radius:9px;background:var(--surface,#fff);color:var(--text,#172033);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}.lesson-adjacent-navigation button:not(:disabled):hover{border-color:var(--primary,#1769ff)}.lesson-adjacent-navigation button:focus-visible{outline:3px solid var(--primary,#1769ff);outline-offset:2px}.lesson-adjacent-navigation button:disabled{opacity:.5;cursor:not-allowed}.lesson-adjacent-navigation #nextAdjacentLesson:not(:disabled){background:#15803d;border-color:#15803d;color:#fff}@media(min-width:1101px){.practice-footer .practice-footer-controls{width:clamp(250px,28vw,430px)}}@media(max-width:1100px){.practice-footer .practice-footer-actions{grid-column:1/-1;justify-self:stretch;justify-content:flex-end;flex-wrap:wrap}}@media(max-width:480px){.practice-footer .practice-footer-actions{justify-content:space-between}.lesson-adjacent-navigation{flex:1}.lesson-adjacent-navigation button{flex:1}}