/* Shared visual layer. Keep game state selectors and the existing print sheet intact. */
@media screen {
  :root {
    --ink: #252925;
    --muted: #666a61;
    --paper: #f7f5ef;
    --surface: #fffefa;
    --surface-strong: #eeece4;
    --line: #dedfd5;
    --line-strong: #aaafa3;
    --accent: #b6422c;
    --accent-dark: #8f3022;
    --shadow: rgba(37, 41, 37, 0.05);
    --content-width: 1060px;
    --play-width: var(--content-width);
    --board-size: 560px;
    --board-card-padding: 20px;
  }

  body {
    color: var(--ink);
    background: var(--paper);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  button, input, select, textarea { font-family: inherit; }
  body a { font-weight: 500; text-underline-offset: 3px; }
  body strong, body b { font-weight: 600; }
  body p { line-height: 1.7; }
  body :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }

  .site-shell, .app-shell { padding: 24px 28px 40px; }
  .site-chrome-frame { width: 100%; max-width: calc(var(--content-width) + 56px); padding: 24px 28px 0; margin-inline: auto; }
  .site-header-injected {
    position: relative;
    z-index: 40;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav actions";
    gap: 24px;
    margin-bottom: 0;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--line);
  }
  .site-header-injected .brand { gap: 10px; }
  .site-header-injected .brand-logo { width: 45px; height: 45px; }
  .site-header-injected .brand-copy { width: 128px; }
  .brand-wordmark { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .top-nav {
    flex-wrap: wrap;
    gap: 3px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .site-header-injected .top-nav { min-height: 44px; }
  .site-header-actions { grid-area: actions; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .site-utilities { display: flex; align-items: center; gap: 6px; }
  .site-header-actions .site-account-menu { margin-left: 0; }
  .site-header-injected .top-nav { flex-wrap: nowrap; justify-content: center; }
  .site-mobile-nav-toggle { display: none; }
  .site-header-injected .top-nav a,
  .site-header-injected .nav-trigger,
  .nav-option {
    min-height: 42px;
    padding: 10px 10px;
    border-radius: 5px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
  }
  .top-nav a:hover, .nav-trigger:hover, .nav-trigger.active,
  .top-nav > a.active, .top-nav > a[aria-current="page"],
  .nav-dropdown a.active, .nav-dropdown a[aria-current="page"] {
    color: var(--accent-dark);
    background: #eeeae1;
  }
  .top-nav > a.active::after, .top-nav > a[aria-current="page"]::after { height: 2px; }
  .nav-dropdown, .site-account-dropdown, .account-dropdown, .login-dropdown {
    top: calc(100% + 8px);
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(37, 41, 37, 0.1);
  }
  .site-header-injected .nav-menu .nav-dropdown { visibility: hidden; opacity: 0; pointer-events: none; }
  .site-header-injected .nav-menu.open .nav-dropdown { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
  .site-header-injected .nav-dropdown a { justify-content: space-between; gap: 8px; }
  .nav-dropdown small, .nav-option small { color: var(--accent-dark); font-weight: 500; }
  .site-account-button {
    min-height: 42px;
    padding: 8px 12px;
    border-color: var(--line);
    border-radius: 5px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: none;
    font-weight: 500;
  }
  .site-account-button:hover, .site-account-button[aria-expanded="true"] { background: #eeece4; }
  .site-header-injected .site-account-button.is-signed-in {
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    gap: 0;
    width: 42px;
    min-width: 42px;
    padding: 3px;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .account-menu-item, .site-account-menu-item, .provider-button { font-weight: 500; }
  .account-dropdown-profile, .login-dropdown-brand, .account-panel { background: var(--surface); box-shadow: none; }
  .account-name, .login-dropdown-brand strong { font-weight: 600; }

  .eyebrow, .section-kicker, .account-label, .control-label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.5;
  }
  body :is(.section-heading, .download-section, .mode-seo-intro, .mode-page,
    .blog-page, .blog-hero, .mode-hero, .article-hero, .solver-hero, .awards-heading,
    .result-panel, .infographic-hero, .hero, .card, .article-body) :is(h1, h2),
  body :is(.mode-seo-body, .article-body) h3 {
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.15;
  }

  .home-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    width: min(100%, var(--play-width));
    margin: 28px auto 24px;
  }
  .home-intro-copy { min-width: 0; }
  .home-intro-kicker {
    display: none;
    margin: 0 0 9px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }
  .home-intro :is(h1, h2) {
    margin: 0;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3.3vw, 38px);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.13;
  }
  .home-intro :is(h1, h2) em { color: var(--accent); font-weight: 400; }
  .home-intro-copy > p:not(.home-intro-kicker) { margin: 8px 0 0; max-width: 520px; font-size: 14px; }
  .home-intro-links { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 3px; }
  .home-intro-links a { color: var(--muted); font-size: 12px; white-space: nowrap; }

  .play-hero:not(.is-board-fullscreen), .game-layout:not(.is-board-fullscreen) {
    width: min(100%, var(--content-width));
    max-width: var(--content-width);
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
  }
  .site-header + .play-hero { margin-top: 30px; }
  .site-header + #plusModeMount { margin-top: 30px; }
  .board-stage, .control-panel, .side-panel, .profile-panel, .card {
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
  }
  .board-stage { min-width: 0; padding: var(--board-card-padding); }
  .control-panel { min-width: 0; padding: 16px; top: 20px; }
  .board-header { margin-bottom: 16px; padding-right: 90px; }
  .board-header :is(h1, h2) {
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }
  .puzzle-mode-label:empty { min-height: 0; height: 0; }
  .puzzle-id-chip { top: 20px; right: 20px; border: 0; background: transparent; font-weight: 500; }
  .puzzle-id-chip strong { font-size: 11px; font-weight: 500; }
  .difficulty-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
  .segment, .difficulty, .number-pad button, .button {
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--ink);
    background: var(--surface);
    font-weight: 500;
    box-shadow: none;
  }
  .difficulty { min-height: 42px; padding: 8px 4px; border-color: transparent; background: #f3f2eb; font-size: 12px; }
  .segment.active, .difficulty.active { border-color: var(--ink); color: #fff; background: var(--ink); }
  .button { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .button.primary, .button.active, .button[aria-pressed="true"] {
    border-color: var(--accent);
    color: #fff;
    background: var(--accent);
    box-shadow: none;
  }
  .button.ghost { background: var(--surface); }
  .button:hover, .segment:hover, .difficulty:hover, .number-pad button:hover { transform: none; border-color: #a5a99c; }
  .button.primary:hover { background: var(--accent-dark); }
  .button.active, .button.ghost[aria-pressed="true"] { color: #fff; background: var(--accent); }
  .board-wrap { width: min(100%, var(--board-size)); max-width: var(--board-size); margin-inline: auto; }
  .sudoku-board { width: 100%; max-width: var(--board-size); border-color: #3a4038; border-radius: 3px; box-shadow: none; }
  .sudoku-board .cell { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 500; }
  .sudoku-board .cell.given { font-weight: 600; }
  .cell-notes { font-weight: 500; }
  .board-start-overlay, .board-pause-overlay { border-radius: 3px; background: rgba(37, 41, 37, 0.16); backdrop-filter: blur(2px); }
  .board-start-card, .board-pause-card, .plus-lock-card {
    gap: 10px;
    padding: 22px;
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 36px rgba(37, 41, 37, 0.12);
  }
  .board-start-card img, .board-pause-card img { width: 42px; height: 42px; }
  .plus-lock-card img { width: 44px; height: 44px; }
  .plus-lock-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; line-height: 1.15; }
  .plus-mode-overlay { padding: 18px; border-radius: 3px; background: rgba(37, 41, 37, 0.16); backdrop-filter: blur(2px); }
  .board-start-card strong, .board-pause-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; }
  .board-start-card span, .board-pause-card span, .plus-lock-card span { font-weight: 400; line-height: 1.45; }
  .board-start-card .start-solve-rate { padding: 8px 10px; border-color: var(--line); background: #f3f2eb; color: var(--ink); font-size: 12px; font-weight: 500; box-shadow: none; }
  .board-start-card .start-subcopy { padding: 0; border: 0; background: transparent; font-size: 11px; font-weight: 400; }
  .score-strip { gap: 0; }
  .score-strip > div { padding: 6px 4px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .score-strip .section-kicker { color: var(--muted); font-size: 9px; letter-spacing: 0.09em; }
  .score-strip strong { margin-top: 7px; font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .control-title { margin: 16px 0 10px; }
  .number-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .number-pad button { aspect-ratio: auto; min-height: 62px; padding: 8px 4px 16px; background: #f4f4ef; box-shadow: none; }
  .number-pad button.complete { background: #e9ebe3; }
  .num-main { color: var(--ink); font-size: 28px; font-weight: 500; }
  .num-left { color: var(--muted); font-size: 9px; font-weight: 400; }
  .game-actions { margin-top: 12px; gap: 6px; }
  .game-actions .icon-button { min-height: 43px; border-color: var(--line); background: transparent; box-shadow: none; }
  .game-actions .icon-button img { width: 25px; height: 25px; }
  .game-actions .icon-button.active, .game-actions .icon-button[aria-pressed="true"] { border-color: var(--accent); background: #f4dfd8; }
  .game-settings { margin-top: 10px; }
  .game-settings .button { margin-top: 0; color: var(--muted); font-size: 12px; }
  .game-settings-panel { border-color: var(--line); background: var(--paper); box-shadow: none; }
  .setting-row { min-height: 40px; border-color: transparent; background: var(--surface); font-weight: 400; line-height: 1.4; }
  .sync-note { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
  .stat-grid { gap: 6px; }
  .stat-tile { padding: 8px 4px; border: 0; border-radius: 0; background: transparent; }
  .stat-tile span { font-size: 10px; font-weight: 400; }
  .stat-tile strong { font-weight: 500; }
  .status-box { padding: 10px 12px; border: 0; border-left: 2px solid var(--line); border-radius: 0; color: var(--muted); background: #f5f4ee; font-size: 11px; font-weight: 400; line-height: 1.6; }
  .play-hero.is-board-fullscreen, .game-layout.is-board-fullscreen { background: var(--paper); }
  .is-board-fullscreen .sudoku-board { box-shadow: none; }
  .is-board-fullscreen .number-pad button { background: var(--surface); }
  .is-board-fullscreen .score-strip > div { background: transparent; box-shadow: none; }

  /* The tool pages share the same paper palette and explicitly shrinkable grids. */
  .solver-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    margin-top: 28px;
  }
  .solver-layout > *, .solver-input-grid > *, .solver-panel-head > *,
  .solver-board-wrap, .solver-board-axis, .solver-results-panel > * {
    min-width: 0;
    max-width: 100%;
  }
  .solver-board-panel, .solver-results-panel {
    width: 100%;
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
  }
  .solver-board-panel { padding: 22px; }
  .solver-results-panel { padding: 14px; gap: 14px; }
  .solver-panel-head { flex-wrap: wrap; gap: 16px; }
  .solver-panel-head h2, .solver-hint-card h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }
  .solver-example-label { width: 200px; min-width: 0; font-weight: 500; }
  .solver-example-label select {
    min-height: 44px;
    border-color: var(--line);
    border-radius: 5px;
    color: var(--ink);
    background: var(--paper);
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
  }
  .solver-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .solver-string-panel, .solver-id-panel { padding: 12px; border-color: var(--line); background: var(--paper); }
  .solver-input-label, .solver-string-panel summary { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
  .solver-string-panel summary { grid-template-columns: minmax(0, 1fr) auto 10px; gap: 6px; }
  .solver-string-panel summary strong { border-color: var(--line); color: var(--muted); background: var(--surface); font-weight: 500; }
  .solver-row-editor span { border-color: var(--line); color: var(--muted); background: var(--surface); font-weight: 500; }
  .solver-row-input, .solver-id-row input { min-height: 44px; border-color: var(--line); border-radius: 5px; background: var(--surface); font-weight: 500; }
  .solver-id-row .button { min-width: 0; min-height: 44px; padding-inline: 12px; font-size: 12px; }
  .solver-action-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 16px 0; }
  .solver-action-row .button { min-height: 44px; padding: 9px 6px; font-size: 12px; white-space: normal; }
  .solver-board-axis { width: min(100%, 620px); grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 22px minmax(0, 1fr); gap: 3px; }
  .solver-board { min-width: 0; width: 100%; max-width: 100%; aspect-ratio: 1; border-color: #3a4038; border-radius: 3px; box-shadow: none; }
  .solver-cell input { min-width: 0; padding: 0; font-family: inherit; font-weight: 500; }
  .solver-column-labels, .solver-row-labels { color: var(--muted); font-size: 11px; font-weight: 500; }
  .solver-column-labels span, .solver-row-labels span, .solver-axis-corner { border-color: var(--line); background: var(--paper); }
  .solver-number-pad { padding-left: 25px; gap: 6px; }
  .solver-number-pad button { min-height: 44px; border-color: var(--line); border-radius: 5px; color: var(--ink); background: var(--paper); box-shadow: none; font-weight: 500; }
  .solver-status-card, .solver-hint-card, .solver-stat-grid > div { border-color: var(--line); border-radius: 5px; background: var(--paper); }
  .solver-status-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; line-height: 1.2; }
  .solver-status-card span, .solver-hint-card p, .solver-coach-body { font-size: 13px; font-weight: 400; line-height: 1.65; overflow-wrap: anywhere; }
  .solver-id-notice { border-color: var(--line); color: var(--muted); background: var(--paper); font-weight: 400; }
  .solver-id-notice::before { font-weight: 500; }
  .solver-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solver-stat-grid span { font-size: 11px; font-weight: 400; }
  .solver-stat-grid strong { font-size: 22px; font-weight: 500; }
  .solver-candidate-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solver-candidate-list span { grid-template-columns: 28px minmax(0, 1fr); border-color: var(--line); background: var(--surface); font-size: 11px; font-weight: 400; overflow-wrap: anywhere; }
  .solver-coach-proof-grid { grid-template-columns: minmax(0, 1fr); }
  .solver-cage-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); border-color: var(--line); background: var(--paper); }
  .solver-cage-editor-copy { grid-column: 1 / -1; }
  .solver-cage-editor-copy strong { font-weight: 500; }
  .solver-cage-editor-copy span { font-weight: 400; }
  .solver-cage-editor .solver-cage-sum-label {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    pointer-events: auto;
    user-select: auto;
  }
  .solver-cage-sum-label input, .solver-cage-step { min-height: 44px; border-color: var(--line); background: var(--surface); font-weight: 500; }
  .solver-cage-editor .button { min-height: 44px; font-size: 12px; }
  .coach-auth-gate { margin-top: 28px; }
  .coach-auth-card { padding: 32px; border-color: var(--line); background: var(--surface); box-shadow: none; text-align: left; }
  .coach-auth-card h1 { max-width: 720px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 4vw, 45px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.15; }
  .coach-auth-card p:last-of-type { margin-top: 18px; font-size: 15px; font-weight: 400; line-height: 1.7; }
  .coach-auth-actions { margin-top: 24px; gap: 10px; }

  .download-section, .content-section, .site-footer { margin-top: 56px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .content-section { padding: 0; }
  .section-heading { margin-bottom: 24px; }
  .section-heading h2 { font-size: clamp(28px, 3vw, 38px); }
  .download-section { padding: 34px 38px; border: 1px solid var(--line); border-radius: 8px; background: #efeee6; }
  .download-section h2 { max-width: 570px; font-size: clamp(28px, 3vw, 36px); }
  .download-section p { font-size: 15px; }
  .qr-card { border: 0; background: transparent; }
  .qr-card img { width: 112px; height: 112px; background: transparent; }
  .qr-card figcaption { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; }
  .seo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .seo-card, .article-card { min-height: 0; padding: 23px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
  .seo-card span, .article-card span { font-size: 17px; font-weight: 500; line-height: 1.4; }
  .seo-card p, .article-card p { margin-top: 8px; font-size: 14px; font-weight: 400; line-height: 1.65; }
  .seo-card:hover span, .article-card:hover span { color: var(--accent); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .mode-seo-guide { margin-top: 60px; }
  .site-shell[data-default-mode] .mode-seo-guide { order: 0; }
  .mode-seo-hero, .mode-seo-body, .mode-seo-aside, .mode-article, .mode-aside,
  .blog-article, .article-body, .article-sidebar-card, .blog-featured-panel,
  .blog-card, .mode-hero, .blog-hero, .article-hero, .infographic-card {
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: none;
  }
  .mode-seo-hero { gap: 0; }
  .mode-seo-intro { padding: 30px; }
  .mode-seo-intro :is(h1, h2) { font-size: clamp(27px, 3vw, 36px); }
  .mode-seo-figure { margin: 0; }
  .mode-seo-figure img { object-fit: cover; }
  .home-guide-hero { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .home-guide-hero .mode-seo-figure { display: block; position: relative; min-height: 320px; }
  .home-guide-hero .mode-seo-figure img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .home-guide-hero .mode-seo-intro { padding: 34px; align-self: center; }
  .home-guide-hero .mode-seo-intro h2 { margin: 10px 0 18px; font-size: clamp(28px, 3vw, 38px); }
  .home-guide-hero .mode-seo-intro p:not(.section-kicker) { font-size: 15px; line-height: 1.75; margin: 0 0 22px; }
  .home-guide-links { display: grid; gap: 10px; }
  .home-guide-links a { display: flex; justify-content: space-between; gap: 15px; font-size: 13px; color: var(--accent); text-decoration: none; }
  .home-guide-links a:hover { text-decoration: underline; }
  .home-guide-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
  .home-guide-tips > section { border-top: 1px solid var(--line); padding-top: 22px; }
  .home-guide-tips h3 { font: 400 24px/1.25 Georgia, serif; margin: 12px 0; }
  .home-guide-tips p:not(.section-kicker) { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0; }
  .mode-seo-layout { gap: 28px; margin-top: 28px; }
  .mode-seo-layout, .article-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .mode-seo-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .mode-seo-layout > *, .mode-seo-hero > *, .article-layout > *, .blog-content > *, .mode-content > *,
  .blog-featured-grid > *, .blog-grid > * { min-width: 0; max-width: 100%; }
  .mode-seo-table-wrap, .article-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
  .mode-seo-body { padding: 32px; }
  .mode-seo-aside { padding: 22px; }
  .mode-seo-intro p, .mode-seo-body p, .mode-seo-body li,
  .article-body p, .article-body li, .mode-article p, .blog-article p { font-size: 16px; font-weight: 400; line-height: 1.8; }
  .mode-seo-body h3 { font-size: 28px; }
  .mode-guide-links, .mode-guide-links a { font-size: 12px; font-weight: 500; line-height: 1.8; }
  .mode-seo-card, .article-note, .playtest-note { border-color: var(--line); background: #f2f1e9; box-shadow: none; }
  .mode-seo-card span, .mode-playtest-note span, .playtest-note strong { font-weight: 400; line-height: 1.65; }
  .mode-seo-table, .article-table { border-color: var(--line); background: var(--surface); font-size: 14px; }
  .mode-seo-table td, .article-table td { font-weight: 400; }
  .mode-seo-table th, .article-table th { background: #efeee7; font-weight: 600; }
  .blog-pill-row a, .blog-mode-links a, .article-link-cluster a { border-color: var(--line); background: transparent; font-weight: 500; }
  .blog-featured-grid { gap: 28px; }
  .blog-card-media img { height: auto; }
  .blog-featured-panel p, .blog-featured-panel li { font-size: 15px; font-weight: 400; line-height: 1.75; }
  .blog-grid { gap: 24px; }
  body .blog-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.2; }
  .blog-card-media.featured strong { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; }
  .blog-card-media .blog-card-kicker { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.5; }
  .blog-card-media span:not(.blog-card-kicker) { font-size: 14px; font-weight: 400; line-height: 1.7; }
  .blog-mode-links { border-color: var(--line); background: transparent; }
  .article-hero p { font-size: 16px; font-weight: 400; }
  .blog-page, .article-page, .mode-page, .infographic-page { margin-top: 32px; }
  .blog-hero h1, .article-hero h1, .mode-hero h1, .infographic-hero h1 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.15; }
  .blog-hero p, .mode-hero p, .infographic-hero p, .infographic-card p,
  .mode-article li, .blog-article li, .article-link-list li { font-weight: 400; line-height: 1.75; }
  .blog-hero p, .mode-hero p, .infographic-hero p { max-width: 65ch; }
  .infographic-hero { background: var(--surface); }
  .infographic-hero > *, .infographic-card > * { min-width: 0; max-width: 100%; }
  .infographic-hero .section-kicker { font-size: 10px; line-height: 1.5; }
  .infographic-card, .infographic-card-copy { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .infographic-card img { height: auto; }
  .infographic-links a, .infographic-card a { border-radius: 5px; font-weight: 500; font-size: 13px; }
  body .blog-featured-panel h2, body .article-sidebar-card h2 { font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; }
  .article-body > :is(p, ul, ol), .mode-seo-body > :is(p, ul, ol) { max-width: 70ch; }
  .page { min-height: 0; padding: 32px 28px; }
  .page > .hero, .page > .card { min-width: 0; padding: 40px; }
  .page :is(.hero, .card) h1 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.15; }
  .page > .card > :is(p, ul, ol) { max-width: 75ch; font-size: 16px; font-weight: 400; line-height: 1.8; }
  .article-meta { font-weight: 400; }
  .article-layout { gap: 28px; margin-top: 28px; }
  .article-body blockquote { border-left-width: 2px; border-radius: 0; background: var(--paper); font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.6; }
  .article-body pre { border-color: var(--line); background: var(--paper); font-weight: 400; }
  .site-footer { grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1fr) minmax(160px, 0.7fr); gap: 40px; margin-top: 64px; padding: 32px 0 20px; border-top: 1px solid var(--line); }
  .footer-logo { width: 42px; margin-bottom: 14px; }
  .site-footer p { max-width: 260px; font-size: 13px; font-weight: 400; }
  .site-footer nav { gap: 10px; }
  .site-footer a, .legal-links a { font-size: 12px; font-weight: 400; }
  .site-footer nav[aria-label="Footer navigation"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }

  /* These widgets inject a stylesheet at runtime; body provides stable precedence. */
  body .cookie-consent {
    max-width: 1040px;
    gap: 24px;
    padding: 18px 22px;
    border-color: var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 5px 28px rgba(37, 41, 37, 0.12);
    backdrop-filter: none;
    max-height: min(70vh, 330px);
    overflow-y: auto;
  }
  body .cookie-consent h2 { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
  body .cookie-consent p { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.55; }
  body .cookie-consent .cookie-consent-kicker { color: var(--accent); font-size: 9px; font-weight: 500; }
  body .cookie-consent a { color: var(--accent-dark); font-weight: 500; text-decoration: underline; }
  body .cookie-consent button { min-height: 44px; border-color: var(--line); border-radius: 5px; font-size: 12px; font-weight: 500; }
  body .cookie-consent button[data-consent-choice="granted"] { border-color: var(--ink); background: var(--ink); }
  body .cookie-consent button[data-consent-choice="denied"] { color: var(--ink); background: var(--surface); }
  body .cookie-settings-footer-button { color: var(--muted); font-size: 12px; font-weight: 400; }
  body .site-utility-control { position: relative; }
  body .site-utility-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px; min-width: 0; padding: 9px 12px; margin: 0;
    border: 1px solid var(--line); border-radius: 5px;
    color: var(--ink); background: var(--surface); box-shadow: none;
    font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer;
  }
  body .site-utility-toggle:hover, body .site-utility-toggle[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface-strong); transform: none; }
  body .site-utility-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; transform: none; }
  body .site-utility-popover {
    position: absolute; inset: calc(100% + 10px) 0 auto auto; z-index: 50;
    max-width: calc(100vw - 32px); margin: 0;
    border: 1px solid var(--line); border-radius: 10px;
    color: var(--ink); background: var(--surface); box-shadow: 0 12px 36px rgba(37, 41, 37, 0.14); backdrop-filter: none;
  }
  body .zudoku-app-download-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr); width: 248px;
    justify-items: center; gap: 12px; padding: 22px; text-align: center;
  }
  body .zudoku-app-download-card img { width: 140px; height: 140px; padding: 0; border: 0; border-radius: 0; background: #fff; }
  body .zudoku-app-download-kicker { color: var(--muted); font-size: 9px; font-weight: 500; }
  body .zudoku-app-download-card strong { color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.3; }
  body .zudoku-app-download-card span:not(.zudoku-app-download-kicker) { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
  body .zudoku-app-download-link { width: 100%; padding: 10px 12px; border-radius: 5px; color: white; background: var(--accent); text-decoration: none; font-size: 12px; font-weight: 500; }
  body .zudoku-app-download-link:hover { background: var(--accent-dark); }
  body .zudoku-share-rail { inset: auto; z-index: auto; width: auto; max-width: none; margin: 0; transform: none; }
  body .zudoku-share-menu { width: 200px; padding: 8px; }
  body .zudoku-share-menu a, body .zudoku-share-menu button { min-height: 44px; color: var(--ink); font-weight: 500; }
  body .zudoku-share-menu a:hover, body .zudoku-share-menu button:hover { background: var(--surface-strong); }

  /* Keep the first puzzle and its start action within ordinary laptop viewports. */
  @media (min-width: 901px) and (max-height: 850px) {
    :root { --board-size: 460px; --board-card-padding: 18px; }
    .site-shell, .app-shell { padding-top: 18px; }
    .site-header-injected { padding-bottom: 14px; }
    .home-intro { align-items: center; gap: 20px; margin-top: 20px; margin-bottom: 20px; }
    .home-intro :is(h1, h2) { font-size: 33px; }
    .home-intro-kicker { margin-bottom: 6px; }
    .home-intro-copy > p:not(.home-intro-kicker) { margin-top: 8px; font-size: 13px; }
    .home-intro-links { flex-direction: column; gap: 5px; padding: 0; }
    .play-hero:not(.is-board-fullscreen), .game-layout:not(.is-board-fullscreen) {
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 28px;
    }
    .board-header { margin-bottom: 12px; }
    .board-header :is(h1, h2) { font-size: 25px; }
    .difficulty-row { margin-bottom: 12px; }
    .puzzle-id-chip { top: 17px; right: 18px; }
    .control-panel { padding: 14px; }
    .number-pad button { min-height: 54px; }
    .control-title { margin-top: 12px; }
    .board-start-card, .board-pause-card { padding: 16px 18px; gap: 8px; }
    .board-start-card img, .board-pause-card img { width: 34px; height: 34px; }
    .board-start-card strong, .board-pause-card strong { font-size: 24px; }
  }
  @media (max-width: 1100px) {
    .site-header-injected { grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "nav nav"; gap: 12px; }
    .site-header-injected .top-nav { justify-content: flex-start; }
    .site-header-injected .top-nav a, .site-header-injected .nav-trigger { padding-inline: 8px; font-size: 12px; }
  }
  @media (max-width: 900px) {
    .site-header-injected { gap: 12px; }
    .site-header-injected .top-nav { justify-content: flex-start; }
    .home-intro { max-width: none; }
    .home-intro-links { gap: 8px 14px; }
    .play-hero:not(.is-board-fullscreen), .game-layout:not(.is-board-fullscreen) { max-width: 100%; grid-template-columns: 1fr; gap: 18px; }
    .control-panel { position: static; }
    .number-pad { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .number-pad button { min-height: 58px; }
    .game-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .site-footer { grid-template-columns: 1fr 1fr; gap: 28px; }
    .site-footer > div { grid-column: 1 / -1; }
    .site-footer p { max-width: 440px; }
    .download-section { grid-template-columns: 1fr auto; gap: 20px; }
    .mode-seo-layout, .mode-seo-hero, .article-layout, .blog-content, .mode-content { grid-template-columns: minmax(0, 1fr); }
    .home-guide-hero .mode-seo-figure { min-height: 0; aspect-ratio: 16 / 9; }
    .home-guide-hero .mode-seo-intro { padding: 26px; }
    .mode-seo-aside { position: static; }
    .blog-featured-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .infographic-hero { grid-template-columns: minmax(0, 1fr); }
    .infographic-links { justify-content: flex-start; }
    .infographic-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-sidebar { position: static; }
    .solver-layout { max-width: 680px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .solver-results-panel { grid-template-columns: minmax(0, 1fr); }
    .solver-input-grid { grid-template-columns: minmax(0, 1fr); }
    .coach-onboarding, .coach-game-surface.coach-layout { grid-template-columns: minmax(0, 1fr); }
    .coach-onboarding > *, .coach-layout > * { min-width: 0; max-width: 100%; }
  }
  @media (max-width: 680px) {
    :root { --board-card-padding: 12px; }
    .site-shell, .app-shell { padding: 18px 14px 28px; overflow: visible; }
    .site-chrome-frame { padding: 18px 14px 0; }
    .page { padding: 24px 14px; }
    .page > .hero, .page > .card { min-width: 0; padding: 26px 22px; }
    .site-header-injected { gap: 15px; padding-bottom: 16px; }
    .site-header-injected { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand account" "menu utilities"; gap: 12px; }
    .site-header-injected .brand { justify-self: start; }
    .site-header-actions { display: contents; }
    .site-header-actions .site-account-menu { grid-area: account; justify-self: end; }
    .site-utilities { grid-area: utilities; justify-self: end; position: relative; }
    body .site-utilities .site-utility-control { position: static; }
    .site-mobile-nav-toggle { grid-area: menu; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 500; cursor: pointer; }
    .site-mobile-nav-toggle::before { content: ""; width: 13px; height: 9px; border-top: 1px solid; border-bottom: 1px solid; }
    .site-header-injected .top-nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 12px 28px rgba(37, 41, 37, 0.14); }
    .site-header-injected.is-mobile-nav-open .top-nav { display: grid; }
    .site-header-injected .top-nav > * { min-width: 0; }
    .site-header-injected .top-nav > a, .site-header-injected .nav-trigger { justify-content: flex-start; width: 100%; text-align: left; }
    .site-header-injected .nav-menu { display: block; grid-column: 1 / -1; }
    .site-header-injected .nav-menu::after { display: none; }
    .site-header-injected .nav-dropdown { display: none; position: static; width: 100%; margin-top: 6px; max-height: 40vh; overflow-y: auto; box-shadow: none; }
    .site-header-injected .nav-menu.open .nav-dropdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .site-utility-popover { right: 0; left: auto; }
    .site-header-actions .site-account-dropdown { right: 0; left: auto; max-width: calc(100vw - 28px); }
    .blog-page, .article-page, .mode-page, .infographic-page { margin-top: 24px; }
    .site-header-injected .brand-logo { width: 42px; height: 42px; }
    .site-header-injected .brand-copy, .site-header-injected .brand-wordmark { width: 126px; }
    .site-header-injected .top-nav { gap: 2px; }
    .site-header-injected .top-nav a, .site-header-injected .nav-trigger { padding: 9px 10px; font-size: 12px; min-height: 42px; }
    .site-account-menu { margin-left: auto; }
    .site-account-button { min-height: 42px; }
    .nav-dropdown { width: 200px; }
    .home-intro { align-items: flex-start; flex-direction: column; gap: 14px; margin: 26px auto 24px; }
    .home-intro :is(h1, h2) { font-size: 34px; max-width: 320px; }
    .home-intro-copy > p:not(.home-intro-kicker) { font-size: 13px; }
    .home-intro-links { gap: 20px; }
    .home-intro-links a { min-height: 32px; }
    .board-stage { width: 100%; padding: 14px var(--board-card-padding) var(--board-card-padding); overflow: visible; }
    .board-header { margin-bottom: 14px; }
    .board-header :is(h1, h2) { font-size: 25px; }
    .puzzle-id-chip { top: 13px; right: 12px; }
    .difficulty-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
    .difficulty { min-height: 44px; font-size: 12px; }
    .board-wrap, .sudoku-board { width: 100%; max-width: none; }
    .sudoku-board .cell { font-size: clamp(20px, 5.8vw, 31px); }
    .board-start-card, .board-pause-card { width: min(260px, calc(100% - 36px)); padding: 16px; gap: 8px; }
    .board-start-card strong, .board-pause-card strong { font-size: 24px; }
    .board-start-card img, .board-pause-card img { width: 34px; height: 34px; }
    .board-start-card .start-solve-rate { font-size: 11px; padding: 6px 8px; }
    .plus-mode-overlay { padding: 14px; }
    .plus-lock-card { width: min(280px, 100%); padding: 16px; gap: 8px; }
    .plus-lock-card img { width: 40px; height: 40px; }
    .plus-lock-card strong { font-size: 24px; }
    .plus-lock-card span { font-size: 12px; line-height: 1.45; }
    .control-panel { padding: 16px; }
    .score-strip, .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .score-strip strong { font-size: 22px; }
    .number-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .number-pad button { min-height: 55px; }
    .num-main { font-size: 25px; }
    .game-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .game-actions .icon-button { min-height: 44px; }
    .solver-layout { margin-top: 24px; }
    .solver-board-panel, .solver-results-panel { padding: 14px; }
    .solver-panel-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .solver-example-label { width: 100%; }
    .solver-id-row { grid-template-columns: minmax(0, 1fr) auto; }
    .solver-action-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solver-board-axis { width: 100%; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: 18px minmax(0, 1fr); gap: 2px; }
    .solver-cell input { font-size: clamp(19px, 6vw, 30px); }
    .solver-number-pad { width: 100%; padding-left: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .solver-number-pad button { min-height: 44px; font-size: 20px; }
    .solver-notes { inset: 3px; font-size: 7px; }
    .coach-auth-card { padding: 24px; }
    .coach-auth-card h1 { font-size: 32px; }
    .coach-auth-card p:last-of-type { font-size: 14px; }
    .coach-auth-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .download-section, .content-section { margin-top: 40px; }
    .download-section { padding: 24px; grid-template-columns: 1fr; }
    .download-section p { font-size: 14px; }
    .content-section { padding: 0; }
    .seo-grid, .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
    .seo-card, .article-card { padding: 20px 0; }
    .seo-card span, .article-card span { font-size: 16px; }
    .seo-card p, .article-card p { font-size: 13px; }
    .mode-seo-guide { margin-top: 40px; }
    .home-guide-tips { grid-template-columns: 1fr; gap: 22px; }
    .mode-seo-intro, .mode-seo-body { padding: 22px; }
    .mode-seo-intro p, .mode-seo-body p, .mode-seo-body li, .article-body p, .article-body li { font-size: 15px; }
    .mode-seo-body h3 { font-size: 26px; }
    .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .infographic-gallery { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .infographic-hero { padding: 24px; }
    .infographic-hero p { font-size: 15px; }
    .blog-featured-panel { padding: 24px; }
    .blog-featured-panel p, .blog-featured-panel li { font-size: 14px; }
    .article-hero-copy, .article-body { padding: 24px; }
    .article-hero h1 { font-size: 34px; }
    .article-hero p { font-size: 15px; }
    .site-footer { padding: 28px 0 12px; margin-top: 44px; gap: 28px 20px; }
    .site-footer nav[aria-label="Footer navigation"] { grid-template-columns: 1fr; }
    .site-footer a { line-height: 1.7; }
    body .cookie-consent { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); grid-template-columns: 1fr; gap: 12px; padding: 15px; }
    body .cookie-consent-actions { grid-template-columns: 1fr 1fr; }
    body .cookie-consent p { font-size: 11px; line-height: 1.5; }
    body .cookie-consent h2 { font-size: 15px; }
    body .cookie-consent button { width: 100%; }
  }
  @media (max-width: 360px) {
    .site-shell, .app-shell { padding-inline: 10px; }
    .site-header-injected .top-nav a, .site-header-injected .nav-trigger { padding-inline: 8px; }
    .home-intro :is(h1, h2) { font-size: 30px; }
    .seo-grid, .article-grid { grid-template-columns: 1fr; }
    .board-start-card { gap: 6px; padding: 12px; }
    .board-start-card strong { font-size: 22px; }
    .board-start-card img { width: 28px; height: 28px; }
    .board-start-card .start-solve-rate, .board-start-card .start-subcopy { font-size: 10px; }
  }
}