/* Source: /css/fonts-v17.10.265.css */
/* Self-hosted Google Fonts, SIL OFL. See /fonts/v17.10.265/. */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/v17.10.265/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD2OwG_TA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD_OwG_TA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD4OwG_TA.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD0OwG_TA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD1OwG_TA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/tDbV2o-flEEny0FZhsfKu5WU4xD7OwE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url(/fonts/v17.10.265/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source: /css/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/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-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/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: /games/word-hop/word-hop.css */


:root{--wh-bg:#f5f7fb;--wh-surface:#fff;--wh-soft:#eef2f7;--wh-ink:#182940;--wh-muted:#5c6c80;--wh-line:#dfe6ef;--wh-blue:#2261db;--wh-blue-soft:#edf3ff;--wh-green:#176857;--wh-arena:#edf6f2;color-scheme:light}
*{box-sizing:border-box}body.word-hop-body{margin:0;background:var(--wh-bg);color:var(--wh-ink);font:15px/1.5 Inter,system-ui,sans-serif}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.wh-svg-symbols{position:absolute;width:0;height:0;overflow:hidden}button:focus-visible,a:focus-visible{outline:3px solid #88b2ff;outline-offset:4px}[hidden]{display:none!important}.wh-concept-bar{height:32px;background:#172b44;color:#cdd9e9;display:flex;justify-content:space-between;align-items:center;padding:0 max(32px,calc((100% - 1280px)/2));font-size:10px;letter-spacing:.04em}.wh-concept-bar>span:first-child{letter-spacing:.15em;display:flex;align-items:center;gap:8px;font-weight:700;color:#fff}.wh-concept-bar b{opacity:.65}.wh-concept-bar i{width:5px;height:5px;background:#86dbca;border-radius:50%}.wh-site-header{background:var(--wh-surface);border-bottom:1px solid var(--wh-line)}.wh-header-inner{max-width:1344px;padding:15px 32px;margin:auto;display:flex;align-items:center;gap:40px}.wh-brand{margin-right:auto;display:flex}.wh-brand img{display:block;max-width:100%;height:auto}.wh-logo-dark{display:none!important}.wh-header-inner nav{display:flex;gap:30px;align-items:center;font-size:13px;font-weight:600;color:var(--wh-muted)}.wh-header-inner nav a{padding:9px 0;position:relative}.wh-header-inner nav [aria-current]{color:var(--wh-blue)}.wh-header-inner nav [aria-current]:after{position:absolute;bottom:-17px;height:3px;content:'';background:var(--wh-blue);left:0;right:0;border-radius:4px}.wh-icon-button{border:1px solid var(--wh-line);border-radius:10px;display:inline-flex;justify-content:center;align-items:center;background:var(--wh-surface);width:38px;height:38px;flex:0 0 auto;color:var(--wh-muted)}.wh-icon-button:hover{background:var(--wh-soft);color:var(--wh-ink)}.word-hop-page{max-width:1500px;padding:26px 24px 32px;margin:auto}.wh-intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:20px}.wh-back-link{font-size:12px;color:var(--wh-muted);display:inline-block;margin-bottom:9px}.wh-back-link:hover{color:var(--wh-blue)}.wh-title-line{display:flex;align-items:center;gap:16px}h1{font-size:42px;line-height:1.2;letter-spacing:-1.9px;margin:0;font-weight:800}h1>span{color:var(--wh-blue)}.wh-premium-badge{display:inline-flex;align-items:center;gap:5px;border:1px solid #e6d5ad;background:#fff7e5;color:#765412;border-radius:7px;font-size:9px;font-weight:800;letter-spacing:.07em;padding:5px 8px}.wh-premium-badge svg{width:15px;height:15px;stroke-width:1.7}.wh-intro p{margin:7px 0 0;font-size:14px;color:var(--wh-muted)}.wh-mode-switch,.wh-state-switch{display:flex;gap:3px;align-items:center;padding:4px;background:var(--wh-soft);border-radius:10px;border:1px solid var(--wh-line)}.wh-mode-switch button,.wh-state-switch button{padding:6px 16px;border:0;background:transparent;font-size:12px;border-radius:6px;min-height:32px;font-weight:600;color:var(--wh-muted);white-space:nowrap}.wh-mode-switch [aria-pressed=true],.wh-state-switch [aria-pressed=true]{background:var(--wh-surface);color:var(--wh-ink);box-shadow:0 1px 4px #18294014}.wh-game-shell{border:1px solid var(--wh-line);border-radius:18px;background:var(--wh-surface);box-shadow:0 14px 40px #19294108;overflow:hidden}.wh-game-toolbar{padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.wh-stage{display:flex;align-items:center;gap:11px}.wh-stage-number{background:var(--wh-blue-soft);border:1px solid #2261db20;color:var(--wh-blue);border-radius:10px;font-size:15px;font-weight:800;width:42px;height:42px;display:grid;place-items:center}.wh-stage>div{display:flex;flex-direction:column}.wh-stage small{color:var(--wh-muted);font-size:9px;letter-spacing:.1em;font-weight:700}.wh-stage strong{font-size:13px;font-weight:700}.wh-metrics{display:flex;gap:38px}.wh-metrics>div{display:flex;flex-direction:column;min-width:72px;position:relative}.wh-metrics>div+div:before{content:'';position:absolute;left:-22px;top:5px;bottom:5px;width:1px;background:var(--wh-line)}.wh-metrics span{font-size:10px;color:var(--wh-muted)}.wh-metrics strong{font-size:22px;line-height:1.3;letter-spacing:-.7px;font-variant-numeric:tabular-nums}.wh-metrics small{font-size:11px;letter-spacing:0;font-weight:500;color:var(--wh-muted)}.wh-tools{display:flex;gap:7px}.wh-arena{height:420px;position:relative;isolation:isolate;background:var(--wh-arena);overflow:hidden;border-top:1px solid var(--wh-line);border-bottom:1px solid var(--wh-line)}.wh-scene{position:absolute;inset:0;overflow:hidden}.wh-scene svg{position:absolute;bottom:0;left:0;width:100%;height:100%;stroke:none;border:0;display:block}.wh-scene svg text{font-family:Inter,Arial,sans-serif}.wh-scene .wh-word-text{font-family:'JetBrains Mono',monospace}.wh-scene .wh-world{transform-box:fill-box;transform-origin:center}.wh-arena-top{position:absolute;z-index:1;top:22px;left:24px;right:24px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.wh-location{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.13em;color:#40645d;padding:6px 10px;background:#fff9;border:1px solid #fff8;border-radius:5px;backdrop-filter:blur(6px)}.wh-location i{width:5px;height:5px;background:#37816c;border-radius:50%}.wh-deadline{width:170px;padding:9px 12px 12px;border:1px solid #ffffffc0;background:#ffffffcf;border-radius:10px;color:#203d43;box-shadow:0 3px 14px #668d8b0d}.wh-deadline>span{display:flex;justify-content:space-between;gap:15px;align-items:center}.wh-deadline b{font-size:9px;letter-spacing:.1em;color:#627872}.wh-deadline strong{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.7px}.wh-deadline small{font-size:12px;font-weight:500;letter-spacing:0}.wh-time-track{height:4px;background:#dfe8e1;border-radius:4px;margin-top:8px;overflow:hidden}.wh-time-track>div{width:64%;background:#ba652e;height:100%;border-radius:4px;transition:width .15s linear}.wh-movement{position:absolute;bottom:73px;right:32px;color:#46766e;display:flex;gap:8px;align-items:center;font-size:8px;font-weight:700;letter-spacing:.12em}.wh-movement svg{width:30px}.wh-scene-caption{position:absolute;bottom:19px;left:24px;right:24px;text-align:center;font-size:11px;color:#375f59;letter-spacing:.01em}.wh-typing-panel{padding:20px 24px;display:flex;align-items:center;gap:24px}.wh-next-label{display:flex;align-items:center;gap:12px;min-width:175px}.wh-keycap{width:43px;height:43px;border:1px solid var(--wh-line);box-shadow:0 2px 0 var(--wh-line);border-radius:9px;display:grid;place-items:center;color:var(--wh-muted);background:var(--wh-bg);font-family:'JetBrains Mono',monospace;font-size:14px}.wh-next-label>div{display:flex;flex-direction:column;gap:1px}.wh-next-label>div>span{font-size:9px;letter-spacing:.1em;color:var(--wh-muted);font-weight:700}.wh-next-label strong{font:700 22px/1.25 'JetBrains Mono',monospace;letter-spacing:1px}.wh-input-wrap{position:relative;flex:1}.wh-input-wrap label{position:absolute;top:-10px;left:15px;background:var(--wh-surface);padding:0 6px;font-size:10px;font-weight:600;color:var(--wh-blue)}input{width:100%;height:56px;border:2px solid #aac4f6;border-radius:10px;background:var(--wh-surface);color:var(--wh-ink);font:600 21px 'JetBrains Mono',monospace;padding:9px 46px 9px 20px;box-shadow:0 0 0 4px #2261db05;letter-spacing:1.3px;outline:none}input:focus{border-color:var(--wh-blue);box-shadow:0 0 0 4px #2261db13}input::placeholder{font:400 13px Inter,system-ui,sans-serif;letter-spacing:0;color:var(--wh-muted);opacity:.9}.wh-input-prompt{position:absolute;right:16px;top:13px;color:var(--wh-muted);font-size:18px}.wh-input-help{min-width:175px;display:flex;flex-direction:column;gap:3px;font-size:11px}.wh-input-help strong{font-weight:600}.wh-input-help>span{color:var(--wh-muted);font-size:10px}.wh-under-game{display:flex;align-items:center;justify-content:space-between;margin:12px 3px 24px;gap:12px;font-size:11px;color:var(--wh-muted)}.wh-under-game p{display:flex;align-items:center;gap:7px;margin:0}.wh-live-dot{height:6px;width:6px;background:#3b8b76;border-radius:50%;display:inline-block;flex:0 0 auto}kbd{background:var(--wh-surface);border:1px solid var(--wh-line);border-radius:4px;margin-left:5px;padding:1px 4px;font-size:10px}.wh-preview-controls{border:1px dashed #cbd6e5;padding:14px 18px;border-radius:12px;display:flex;align-items:center;gap:20px;background:var(--wh-surface)}.wh-preview-controls>div:first-child{margin-right:auto;display:flex;flex-direction:column;gap:1px}.wh-preview-controls strong{font-size:12px}.wh-preview-controls>div:first-child>span{font-size:10px;color:var(--wh-muted)}.wh-demo-button,.wh-primary-button,.wh-secondary-button{border:0;background:var(--wh-blue);color:#fff;border-radius:8px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 17px;min-height:40px}.wh-demo-button svg{width:15px;height:15px}.wh-demo-button:hover,.wh-primary-button:hover{background:#184fb9}.wh-concept-note{text-align:center;margin:14px 0 0;font-size:10px;color:var(--wh-muted)}.wh-overlay{position:absolute;inset:0;z-index:5;background:#234b464d;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:16px}.wh-overlay-card{background:var(--wh-surface);border:1px solid var(--wh-line);width:min(400px,100%);padding:26px 30px;text-align:center;border-radius:17px;box-shadow:0 20px 70px #193d4530}.wh-overlay-icon{display:inline-grid;place-items:center;width:44px;height:44px;background:var(--wh-blue-soft);color:var(--wh-blue);border-radius:12px;margin-bottom:8px;font-size:22px}.wh-overlay-card .wh-eyebrow{font-size:9px;letter-spacing:.13em;color:var(--wh-muted);font-weight:700;margin:3px 0 8px}.wh-overlay-card h2{font-size:28px;letter-spacing:-1px;margin:0 0 7px;line-height:1.15}.wh-overlay-card p{color:var(--wh-muted);font-size:12px;margin:0 auto 17px;max-width:290px}.wh-overlay-card .wh-overlay-stats{display:flex;justify-content:center;gap:32px;margin:17px 0}.wh-overlay-stats strong{display:block;font-size:23px}.wh-overlay-stats span{font-size:10px;color:var(--wh-muted)}.wh-overlay-actions{display:flex;gap:9px;justify-content:center}.wh-secondary-button{background:var(--wh-soft);color:var(--wh-ink);border:1px solid var(--wh-line)}.wh-overlay-card .wh-quiet{font-size:10px;margin:12px 0 0}.wh-is-invalid{border-color:#bb4b48;box-shadow:0 0 0 4px #bb4b4814}.wh-is-invalid+span{color:#bb4b48}.wh-jumping .wh-hopper{animation:hop .65s cubic-bezier(.34,.01,.28,1) both}.wh-jumping .wh-platforms{animation:scroll .65s ease-in-out both}.wh-jumping .wh-back-hills{animation:parallax .65s ease-in-out both}.wh-jumping .wh-hop-path{opacity:0}.wh-jumping .wh-success-spark{opacity:1;transition:opacity .1s .4s}.wh-success-spark{opacity:0}.wh-scenery-cloud{animation:cloud-drift 20s linear infinite alternate}@keyframes cloud-drift{to{transform:translateX(-30px)}}@keyframes hop{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(94px,-115px) rotate(5deg)}100%{transform:translate(0,-34px) rotate(0)}}@keyframes scroll{to{transform:translateX(-250px)}}@keyframes parallax{to{transform:translateX(-40px)}}
html[data-theme=dark]{--wh-bg:#0d1725;--wh-surface:#142235;--wh-soft:#1b2d43;--wh-ink:#eaf1fb;--wh-muted:#a9bad0;--wh-line:#2b4059;--wh-blue:#93b8ff;--wh-blue-soft:#1c375b;--wh-green:#8bd3ba;--wh-arena:#d7ebe5;color-scheme:dark}html[data-theme=dark] .wh-logo-light{display:none}html[data-theme=dark] .wh-logo-dark{display:block!important}html[data-theme=dark] .wh-premium-badge{background:#362e1f;color:#f8d68d;border-color:#655131}html[data-theme=dark] .wh-primary-button,html[data-theme=dark] .wh-demo-button{background:#2965df;color:#fff}html[data-theme=dark] .wh-preview-controls{border-color:#3a506a}html[data-theme=dark] .wh-location,html[data-theme=dark] .wh-deadline{color-scheme:light}html[data-theme=dark] .wh-arena{border-color:#1d3840}html[data-theme=dark] .wh-keycap{background:#102032}html[data-theme=dark] .wh-input-wrap input{border-color:#5b83bc}html[data-theme=dark] .wh-input-wrap input:focus{border-color:#93b8ff}.wh-game-shell:fullscreen{border-radius:0;display:flex;flex-direction:column;justify-content:center;background:var(--wh-bg)}.wh-game-shell:fullscreen .wh-arena{height:calc(100vh - 195px);max-height:none}
@media(min-width:1500px){.wh-arena{height:455px}}@media(max-width:1000px){.wh-header-inner nav{gap:20px}.wh-header-inner{gap:24px}.wh-metrics{gap:24px}.wh-metrics>div{min-width:56px}.wh-metrics>div+div:before{left:-14px}.wh-typing-panel{gap:18px}.wh-input-help{min-width:140px}.wh-next-label{min-width:145px}.wh-arena{height:400px}}
@media(max-width:700px){.wh-concept-bar{padding:0 16px;font-size:8px;height:28px}.wh-header-inner{padding:12px 16px}.wh-brand img{width:197px;height:auto}.wh-header-inner nav{display:none}.wh-header-inner .wh-icon-button{width:35px;height:35px}.word-hop-page{padding:22px 14px}.wh-intro{align-items:flex-start;margin-bottom:18px;display:block}.wh-title-line{gap:12px}h1{font-size:36px;letter-spacing:-1.5px}.wh-intro p{font-size:12px}.wh-back-link{font-size:11px;margin-bottom:7px}.wh-premium-badge{font-size:8px;padding:4px 6px}.wh-premium-badge svg{width:13px;height:13px}.wh-mode-switch{margin-top:16px;width:100%;padding:3px}.wh-mode-switch button{flex:1;font-size:11px;padding:4px 9px;min-height:30px}.wh-game-shell{border-radius:13px}.wh-game-toolbar{padding:12px 14px;gap:8px;flex-wrap:wrap}.wh-stage-number{width:32px;height:32px;font-size:12px;border-radius:8px}.wh-stage{gap:8px}.wh-stage small{font-size:8px}.wh-stage strong{font-size:11px}.wh-tools{margin-left:auto;gap:5px}.wh-tools .wh-icon-button{width:32px;height:32px;border-radius:8px}.wh-tools svg{width:17px}.wh-tools .wh-fullscreen{display:none}.wh-metrics{order:3;flex:0 0 100%;justify-content:space-around;border-top:1px solid var(--wh-line);padding-top:9px;margin-top:3px;gap:0}.wh-metrics>div{min-width:0;width:33%;align-items:center;flex-direction:row;justify-content:center;gap:7px}.wh-metrics>div+div:before{left:0;top:3px;bottom:3px}.wh-metrics span{font-size:9px}.wh-metrics strong{font-size:17px}.wh-metrics small{font-size:9px}.wh-arena{height:310px}.wh-scene svg{width:780px;max-width:none;left:50%;transform:translateX(-39%)}.wh-arena-top{top:14px;left:14px;right:14px}.wh-location{font-size:7px;padding:5px 7px}.wh-deadline{width:119px;padding:7px 9px 9px;border-radius:8px}.wh-deadline b{font-size:7px}.wh-deadline strong{font-size:18px}.wh-deadline small{font-size:10px}.wh-time-track{height:3px;margin-top:6px}.wh-scene-caption{bottom:12px;left:18px;right:18px;font-size:9px}.wh-movement{display:none}.wh-typing-panel{padding:17px 14px;display:grid;grid-template-columns:78px 1fr;gap:10px}.wh-keycap{display:none}.wh-next-label{min-width:0}.wh-next-label>div>span{font-size:7px;letter-spacing:.07em}.wh-next-label strong{font-size:19px;letter-spacing:.5px}.wh-input-wrap{min-width:0}.wh-input-wrap label{font-size:8px;top:-7px;left:7px;padding:0 3px}input{height:49px;padding:8px 25px 8px 12px;font-size:19px;border-radius:8px}input::placeholder{font-size:11px}.wh-input-prompt{right:9px;top:12px;font-size:15px}.wh-input-help{grid-column:2;flex-direction:row;gap:5px;min-width:0;font-size:8px}.wh-input-help>span{font-size:8px}.wh-input-help strong{display:none}.wh-under-game{font-size:9px;align-items:flex-start;margin:10px 3px 18px}.wh-under-game>span{display:none}.wh-live-dot{width:5px;height:5px;margin-top:4px}.wh-under-game p{align-items:flex-start}.wh-preview-controls{padding:12px;gap:12px;display:grid;grid-template-columns:1fr auto}.wh-preview-controls>div:first-child>span{font-size:8px}.wh-preview-controls strong{font-size:11px}.wh-state-switch{order:3;grid-column:1/-1}.wh-state-switch button{flex:1;padding:5px 10px;font-size:10px}.wh-demo-button{font-size:10px;padding:9px 11px;min-height:35px;gap:5px}.wh-demo-button svg{width:12px}.wh-concept-note{font-size:8px;margin:13px 5px 0}.wh-overlay-card{padding:19px 18px;border-radius:13px}.wh-overlay-card h2{font-size:25px}.wh-overlay-card p{font-size:11px;margin-bottom:14px}.wh-overlay-icon{width:37px;height:37px;font-size:19px}.wh-overlay-card .wh-eyebrow{font-size:8px}.wh-overlay-card .wh-overlay-stats{margin:12px 0;gap:27px}.wh-overlay-stats strong{font-size:20px}.wh-overlay-actions button{font-size:11px;padding:9px 13px;min-height:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(prefers-color-scheme:dark){html[data-theme=system]{--wh-bg:#0d1725;--wh-surface:#142235;--wh-soft:#1b2d43;--wh-ink:#eaf1fb;--wh-muted:#a9bad0;--wh-line:#2b4059;--wh-blue:#93b8ff;--wh-blue-soft:#1c375b;--wh-green:#8bd3ba;--wh-arena:#d7ebe5;color-scheme:dark}}

@media(prefers-color-scheme:dark){html[data-theme=system]{--wh-bg:#0d1725;--wh-surface:#142235;--wh-soft:#1b2d43;--wh-ink:#eaf1fb;--wh-muted:#a9bad0;--wh-line:#2b4059;--wh-blue:#93b8ff;--wh-blue-soft:#1c375b;--wh-green:#8bd3ba;--wh-arena:#d7ebe5;color-scheme:dark}html[data-theme=system] .wh-logo-light{display:none}html[data-theme=system] .wh-logo-dark{display:block!important}html[data-theme=system] .wh-premium-badge{background:#362e1f;color:#f8d68d;border-color:#655131}html[data-theme=system] .wh-primary-button,html[data-theme=system] .wh-demo-button{background:#2965df;color:#fff}html[data-theme=system] .wh-preview-controls{border-color:#3a506a}html[data-theme=system] .wh-location,html[data-theme=system] .wh-deadline{color-scheme:light}html[data-theme=system] .wh-arena{border-color:#1d3840}html[data-theme=system] .wh-keycap{background:#102032}html[data-theme=system] .wh-input-wrap input{border-color:#5b83bc}html[data-theme=system] .wh-input-wrap input:focus{border-color:#93b8ff}}
/* Production page and the public learning guide. */
.word-hop-page{max-width:1500px}.word-hop-body{margin:0;font-family:Inter,system-ui,sans-serif}.word-hop-page button:disabled{cursor:default;opacity:.5}.word-hop-page input:disabled{opacity:.75}.wh-breadcrumbs{display:flex;gap:9px;flex-wrap:wrap;color:var(--wh-muted);font-size:12px;margin:0 0 18px}.wh-breadcrumbs a:hover,.wh-guide a:hover{text-decoration:underline}.wh-gate{background:var(--wh-surface);border:1px solid var(--wh-line);border-radius:17px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px;color:var(--wh-ink)}.wh-gate>div{max-width:720px}.wh-gate h2{font-size:24px;letter-spacing:-.5px;margin:7px 0}.wh-gate p{margin:8px 0 18px;color:var(--wh-muted);font-size:14px}.wh-gate-kicker,.wh-guide-kicker{font-size:10px;font-weight:750;letter-spacing:.12em;color:var(--wh-blue)}.wh-gate-actions{display:flex;flex-wrap:wrap;gap:9px}.wh-guide{max-width:980px;margin:32px auto 20px;padding:30px 34px;background:var(--wh-surface);border:1px solid var(--wh-line);border-radius:17px;font-size:15px;line-height:1.8}.wh-guide h2{font-size:23px;line-height:1.35;letter-spacing:-.5px;margin:28px 0 12px}.wh-guide>header h2{font-size:28px;margin:7px 0 13px}.wh-guide p{color:var(--wh-muted);margin:12px 0}.wh-guide .wh-guide-answer{font-size:16px;color:var(--wh-ink)}.wh-guide a{color:var(--wh-blue);text-decoration:underline;text-underline-offset:3px}.wh-guide-contents{display:flex;gap:10px 22px;flex-wrap:wrap;padding:14px 0 18px;border-bottom:1px solid var(--wh-line);font-size:12px}.wh-guide ol{padding-left:23px;color:var(--wh-muted)}.wh-guide li{margin:6px 0}.wh-guide section{scroll-margin-top:20px}.wh-table-wrap{overflow:auto;border:1px solid var(--wh-line);border-radius:9px;margin:18px 0}.wh-guide table{border-collapse:collapse;min-width:560px;width:100%;font-size:13px}.wh-guide caption{text-align:left;padding:12px 15px;font-weight:700;color:var(--wh-ink)}.wh-guide th,.wh-guide td{border-top:1px solid var(--wh-line);padding:12px 15px;text-align:left;vertical-align:top}.wh-guide thead th{background:var(--wh-soft)}.wh-guide td{color:var(--wh-muted)}.wh-guide details{border-top:1px solid var(--wh-line);padding:14px 0}.wh-guide summary{cursor:pointer;font-size:14px;font-weight:650;color:var(--wh-ink)}.wh-guide details p{font-size:14px;margin-bottom:0}.wh-metrics>div{min-width:80px}.wh-metrics strong{white-space:nowrap}.wh-tools{gap:6px}.wh-stage{min-width:190px}.wh-icon-button.wh-muted{background:var(--wh-soft);opacity:.7}.wh-muted svg{opacity:.6}.wh-mode-switch button:disabled{opacity:.6}.wh-mode-switch button[aria-pressed=true]:disabled{opacity:1}.wh-under-game{min-height:19px}.wh-gate .wh-secondary-button{cursor:pointer}.wh-scene svg{overflow:visible}.wh-scene #wh-platforms text{font-family:'JetBrains Mono',monospace}.wh-overlay-card .wh-review-words{font-size:11px;padding:9px;background:var(--wh-soft);border-radius:7px}.wh-overlay-card .wh-quiet{line-height:1.5}.wh-game-shell input.wh-is-invalid{border-color:#bb4b48;box-shadow:0 0 0 4px #bb4b4814}.wh-arena[data-biome=river] #sky stop:first-child{stop-color:#e3eff4}.wh-arena[data-biome=river] #sky stop:last-child{stop-color:#a3cfc9}.wh-arena[data-biome=sunset] #sky stop:first-child{stop-color:#f3d6bd}.wh-arena[data-biome=sunset] #sky stop:last-child{stop-color:#bfc9c3}.wh-arena[data-biome=night] #sky stop:first-child{stop-color:#73819b}.wh-arena[data-biome=night] #sky stop:last-child{stop-color:#a1beb4}.wh-arena[data-biome=night] .wh-back-hills{opacity:.7}.wh-overlay-card{max-height:calc(100% - 24px);overflow:auto}.wh-game-shell:fullscreen .wh-overlay-card{max-height:90vh}.wh-game-shell:fullscreen .wh-arena{height:calc(100vh - 180px)}
@media(max-width:1050px) and (min-width:701px){.wh-stage{min-width:145px}.wh-metrics{gap:20px}.wh-metrics>div{min-width:64px}.wh-tools .wh-icon-button{width:32px;height:34px}.wh-fullscreen{display:none}.wh-typing-panel .wh-input-help{min-width:135px;font-size:10px}}
@media(max-width:700px){.word-hop-page{padding:18px 14px 24px}.wh-stage{min-width:0}.wh-tools{gap:4px}.wh-tools .wh-icon-button{width:30px;height:32px}.wh-stage>div{max-width:120px}.wh-stage strong{font-size:10px}.wh-metrics>div{min-width:0}.wh-metrics strong{font-size:14px}.wh-metrics span{font-size:8px}.wh-gate{padding:21px 18px;gap:12px}.wh-gate img{width:65px;height:65px;align-self:flex-start}.wh-gate h2{font-size:20px}.wh-gate p{font-size:12px}.wh-gate-actions{gap:7px}.wh-gate-actions>*{font-size:11px;padding:9px 12px}.wh-guide{padding:22px 19px;margin-top:25px;border-radius:12px;font-size:14px;line-height:1.75}.wh-guide>header h2{font-size:23px}.wh-guide h2{font-size:20px}.wh-guide .wh-guide-answer{font-size:14px}.wh-guide-contents{font-size:11px;gap:8px 18px}.wh-guide summary,.wh-guide details p{font-size:13px}.wh-guide table{font-size:12px}.wh-keyboard-open .wh-game-toolbar{padding:6px 12px}.wh-keyboard-open .wh-stage-number{height:27px;width:27px}.wh-keyboard-open .wh-stage strong{font-size:9px}.wh-keyboard-open .wh-metrics{padding-top:4px;margin-top:0}.wh-keyboard-open .wh-metrics strong{font-size:12px}.wh-keyboard-open .wh-typing-panel{padding:12px}.wh-keyboard-open .wh-tools .wh-icon-button{height:27px;width:28px}.wh-keyboard-open .wh-arena-top{top:7px}.wh-keyboard-open .wh-scene-caption{bottom:6px;font-size:8px}.wh-keyboard-open .wh-typing-panel{gap:4px 10px}.wh-keyboard-open .wh-input-help{display:none}.wh-under-game>span{display:block;font-size:8px;white-space:nowrap}.wh-gate .wh-gate-actions .wh-primary-button{color:white}}
@media(max-width:370px){.wh-stage-number{display:none}.wh-stage strong{max-width:98px}.wh-title-line{gap:9px}.wh-gate img{display:none}.wh-under-game{flex-direction:column;gap:4px}.wh-tools .wh-icon-button{width:28px}}
@media(min-width:701px){.wh-overlay-card{width:min(440px,100%);padding:22px 28px}.wh-overlay-card p{max-width:340px}.wh-overlay-card .wh-overlay-stats{margin:13px 0}.wh-overlay-card .wh-quiet{font-size:10px;margin-top:10px}}