*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f6f9ff;color:#14203b;line-height:1.65}a{color:#1266ef}img{max-width:100%;height:auto}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}.top{position:sticky;top:0;background:rgba(246,249,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid #d8e3f5;z-index:20}.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:72px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#14203b;font-weight:850}.brand img{width:44px;height:44px;border-radius:10px}.navlinks{display:flex;gap:16px;align-items:center}.navlinks a{text-decoration:none;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 18px;background:#1769ff;color:white!important;text-decoration:none;font-weight:800;box-shadow:0 10px 24px rgba(23,105,255,.17)}.btn.alt{background:white;color:#1769ff!important;border:1px solid #cbd9ef;box-shadow:none}.btn.small{padding:9px 14px;border-radius:10px}.hero{padding:68px 0 46px}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}.eyebrow{color:#1769ff;font-weight:850;letter-spacing:.12em;text-transform:uppercase;font-size:13px}h1{font-size:clamp(40px,5.5vw,68px);line-height:1.04;letter-spacing:-.045em;margin:14px 0 18px}h2{font-size:clamp(27px,3.8vw,38px);line-height:1.16;letter-spacing:-.03em;margin:8px 0 18px}h3{line-height:1.25}.lead{font-size:20px;color:#586984;max-width:760px}.hero-shot{width:100%;border-radius:22px;border:1px solid #d8e3f5;box-shadow:0 22px 50px rgba(27,57,108,.14)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.section{padding:46px 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:white;border:1px solid #d8e3f5;border-radius:18px;padding:23px;box-shadow:0 10px 26px rgba(27,57,108,.06)}.card h3{margin:0 0 8px}.card p{margin:0;color:#5a6b86}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.gallery img{width:100%;border-radius:16px;border:1px solid #d8e3f5;background:white}.gallery .wide{grid-column:1/-1}.band{background:#eaf2ff;border:1px solid #d7e6ff;border-radius:22px;padding:30px}.footer{border-top:1px solid #d8e3f5;margin-top:50px;padding:34px 0;color:#64738e;font-size:14px}.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer a{margin-right:14px}.legal{max-width:940px;margin:50px auto;background:white;border:1px solid #d8e3f5;border-radius:20px;padding:36px}.legal h1{font-size:44px}.legal h2{font-size:25px;margin-top:32px}.legal h3{margin-top:24px}.legal p,.legal li{color:#4e607c}.toc{background:#f4f7fc;border:1px solid #d8e3f5;border-radius:14px;padding:18px 22px;margin:24px 0}.toc a{display:inline-block;margin:5px 14px 5px 0}.steps{counter-reset:step}.step{position:relative;padding:18px 18px 18px 62px;background:white;border:1px solid #d8e3f5;border-radius:16px;margin:14px 0}.step:before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:17px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1769ff;color:white;font-weight:800}.callout{border-left:4px solid #1769ff;background:#eef4ff;padding:16px 18px;border-radius:8px;margin:20px 0}.warning{border-left-color:#d89614;background:#fff8e8}.success{border-left-color:#21a366;background:#effbf5}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;background:white}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid #d8e3f5;vertical-align:top}th{background:#eef4ff}.faq details{background:white;border:1px solid #d8e3f5;border-radius:14px;margin:12px 0;padding:16px 18px}.faq summary{cursor:pointer;font-weight:800}.badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#eaf2ff;color:#1769ff;font-weight:800;font-size:13px}.subnav{background:#fff;border-bottom:1px solid #e2e9f5}.subnav .wrap{display:flex;gap:18px;overflow:auto;padding:10px 0}.subnav a{text-decoration:none;white-space:nowrap;font-size:14px;font-weight:750}.list-clean{padding-left:20px}.meta{color:#70809a;font-size:14px}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}.feature-list li{margin:4px 0}.store-note{font-size:14px;color:#64738e;margin-top:12px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}.metric{background:#fff;border:1px solid #d8e3f5;border-radius:16px;padding:18px;text-align:center}.metric strong{display:block;font-size:30px}.metric span{display:block;color:#6b7b96;font-size:13px}.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.checklist{display:grid;gap:10px;padding:0;list-style:none}.checklist li{padding-left:30px;position:relative}.checklist li:before{content:'✓';position:absolute;left:0;top:0;color:#1769ff;font-weight:900}.page-img{border-radius:18px;border:1px solid #d8e3f5;box-shadow:0 16px 36px rgba(27,57,108,.1)}code{background:#eef3fb;padding:2px 6px;border-radius:6px}@media(max-width:900px){.hero-grid,.cards,.gallery,.feature-list,.split,.metrics{grid-template-columns:1fr}.navlinks a:not(.btn){display:none}h1{font-size:46px}.legal{margin:28px 16px;padding:26px}.subnav{display:none}.gallery .wide{grid-column:auto}}@media(prefers-color-scheme:dark){body{background:#0e1626;color:#f2f6ff}.top{background:rgba(14,22,38,.95);border-color:#263651}.subnav{background:#111b2c;border-color:#263651}.brand{color:#f2f6ff}.card,.legal,.step,table,.faq details,.metric{background:#151f32;border-color:#2d3d59}.lead,.footer,.legal p,.legal li,.card p,.meta,.store-note,.metric span{color:#aab6cc}.btn.alt{background:#151f32;border-color:#31425f}.band,.toc,.callout{background:#142746;border-color:#2d4771}.warning{background:#302818}.success{background:#123027}.gallery img,.hero-shot,.page-img{border-color:#2d3d59}.footer{border-color:#263651}th{background:#192943}td,th{border-color:#2d3d59}code{background:#1c2a42}}

/* TypingTutor.Online website integration — 2026-08-16 */
body{min-height:100vh}
.extension-subnav{background:var(--color-surface,#fff);border-bottom:1px solid var(--numeric-line,#d8e3f5);position:relative;z-index:8}
.extension-subnav-inner{width:min(1280px,calc(100% - 32px));margin:auto;display:flex;align-items:center;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:thin}
.extension-subnav a{display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border-radius:9px;text-decoration:none;white-space:nowrap;font-size:13px;font-weight:750;color:#53647e;border:1px solid transparent}
.extension-subnav a:hover{background:#eef4ff;color:#1769ff}
.extension-subnav a.is-current{background:#eaf2ff;border-color:#cfe0ff;color:#1769ff}
.extension-footer-band{margin-top:48px;border-top:1px solid #d8e3f5;background:#f2f6fd;padding:22px 0}
.extension-footer-grid{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.extension-footer-grid>div{display:flex;flex-direction:column;gap:2px}.extension-footer-grid strong{color:#14203b}.extension-footer-grid span{font-size:13px;color:#64738e}
.extension-footer-grid nav{display:flex;gap:12px;flex-wrap:wrap}.extension-footer-grid a{font-size:13px;font-weight:700;text-decoration:none}
/* Use the shared website header/footer, not the standalone extension-page header rules. */
.universal-site-header .test-logo img{max-width:none}
.universal-site-footer a{color:inherit}
/* Explicit website theme control (works independently of OS theme). */
html[data-theme="light"] body{background:#f6f9ff;color:#14203b}
html[data-theme="light"] .card,html[data-theme="light"] .legal,html[data-theme="light"] .step,html[data-theme="light"] table,html[data-theme="light"] .faq details,html[data-theme="light"] .metric{background:#fff;border-color:#d8e3f5}
html[data-theme="light"] .lead,html[data-theme="light"] .legal p,html[data-theme="light"] .legal li,html[data-theme="light"] .card p,html[data-theme="light"] .meta,html[data-theme="light"] .store-note,html[data-theme="light"] .metric span{color:#586984}
html[data-theme="light"] .btn.alt{background:#fff;border-color:#cbd9ef}
html[data-theme="light"] .band,html[data-theme="light"] .toc,html[data-theme="light"] .callout{background:#eaf2ff;border-color:#d7e6ff}
html[data-theme="light"] .warning{background:#fff8e8}html[data-theme="light"] .success{background:#effbf5}
html[data-theme="light"] .gallery img,html[data-theme="light"] .hero-shot,html[data-theme="light"] .page-img{border-color:#d8e3f5}
html[data-theme="light"] th{background:#eef4ff}html[data-theme="light"] td,html[data-theme="light"] th{border-color:#d8e3f5}
html[data-theme="light"] code{background:#eef3fb}
html[data-theme="dark"] body{background:#0e1626;color:#f2f6ff}
html[data-theme="dark"] .extension-subnav{background:#111b2c;border-color:#263651}
html[data-theme="dark"] .extension-subnav a{color:#aab6cc}html[data-theme="dark"] .extension-subnav a:hover,html[data-theme="dark"] .extension-subnav a.is-current{background:#172a49;border-color:#2e4c78;color:#8db7ff}
html[data-theme="dark"] .card,html[data-theme="dark"] .legal,html[data-theme="dark"] .step,html[data-theme="dark"] table,html[data-theme="dark"] .faq details,html[data-theme="dark"] .metric{background:#151f32;border-color:#2d3d59}
html[data-theme="dark"] .lead,html[data-theme="dark"] .legal p,html[data-theme="dark"] .legal li,html[data-theme="dark"] .card p,html[data-theme="dark"] .meta,html[data-theme="dark"] .store-note,html[data-theme="dark"] .metric span{color:#aab6cc}
html[data-theme="dark"] .btn.alt{background:#151f32;border-color:#31425f}
html[data-theme="dark"] .band,html[data-theme="dark"] .toc,html[data-theme="dark"] .callout{background:#142746;border-color:#2d4771}
html[data-theme="dark"] .warning{background:#302818}html[data-theme="dark"] .success{background:#123027}
html[data-theme="dark"] .gallery img,html[data-theme="dark"] .hero-shot,html[data-theme="dark"] .page-img{border-color:#2d3d59}
html[data-theme="dark"] th{background:#192943}html[data-theme="dark"] td,html[data-theme="dark"] th{border-color:#2d3d59}html[data-theme="dark"] code{background:#1c2a42}
html[data-theme="dark"] .extension-footer-band{background:#111b2c;border-color:#263651}html[data-theme="dark"] .extension-footer-grid strong{color:#f2f6ff}html[data-theme="dark"] .extension-footer-grid span{color:#aab6cc}
@media(max-width:900px){.extension-subnav-inner{width:calc(100% - 20px)}.extension-footer-grid{align-items:flex-start}}