/* WORDLE DESIGN SYSTEM — v2
   Loaded after route and component styles so there is one final visual authority. */
:root {
  color-scheme: light;
  --page: #f4f6fb;
  --page-alt: #edf1f8;
  --surface: #fff;
  --surface-raised: #fff;
  --ink: #17213a;
  --ink-soft: #34415d;
  --muted: #68748c;
  --muted-2: #8c97aa;
  --line: #e3e8f1;
  --line-strong: #d2d9e7;
  --blue: #315de8;
  --blue-deep: #2448c5;
  --blue-soft: #edf2ff;
  --blue-tint: #dfe7ff;
  --red: #e95866;
  --green: #26966b;
  --green-soft: #e8f6ef;
  --yellow: #e7b63f;
  --shadow-sm: 0 3px 12px rgba(28, 44, 80, .045);
  --shadow-md: 0 12px 32px rgba(28, 44, 80, .075);
  --shadow-lg: 0 22px 60px rgba(28, 44, 80, .13);
  --r-sm: 11px;
  --r-md: 17px;
  --r-lg: 23px;
  --r-xl: 30px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b1222;
  --page-alt: #111b30;
  --surface: #151f34;
  --surface-raised: #1b2942;
  --ink: #f2f5fc;
  --ink-soft: #d1d9ea;
  --muted: #a6b2c8;
  --muted-2: #8190aa;
  --line: #293750;
  --line-strong: #3a4966;
  --blue: #86a1ff;
  --blue-deep: #a9bcff;
  --blue-soft: #1d2c4b;
  --blue-tint: #26375d;
  --red: #ff818b;
  --green: #6fd2a4;
  --green-soft: #16382f;
  --yellow: #f3d477;
  --shadow-sm: 0 3px 12px rgba(0, 0, 0, .18);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .25);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .38);
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 100px; background: var(--page) !important; }
body {
  min-height: 100vh; margin: 0 !important; background: var(--page) !important; color: var(--ink) !important;
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif !important; font-size: 16px; line-height: 1.65;
  letter-spacing: -.012em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
img, svg { max-width: 100%; }
::selection { background: var(--blue-tint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue) !important; outline-offset: 3px !important; }
[hidden] { display: none !important; }
.skip {
  position: fixed !important; z-index: 1000 !important; top: 12px !important; left: 12px !important;
  display: inline-flex !important; min-height: 44px !important; align-items: center !important;
  padding: 0 16px !important; border-radius: 10px !important; background: var(--blue-deep) !important;
  color: #fff !important; transform: translateY(-150%); transition: transform .18s ease;
}
.skip:focus { transform: translateY(0); }
.site-shell { width: 100% !important; max-width: none !important; margin: 0 !important; overflow: clip; }
.wrap, .site-header .wrap, .site-footer .wrap {
  width: min(1280px, calc(100% - 64px)) !important; max-width: 1280px !important; margin-inline: auto !important;
}
main.wrap.page-content {
  width: min(1240px, calc(100% - 64px)) !important; max-width: 1240px !important;
  padding-top: 42px !important; padding-bottom: 84px !important;
}
main h1, main h2, main h3, main h4 {
  color: var(--ink) !important; font-family: "Manrope", "DM Sans", sans-serif !important;
  letter-spacing: -.045em !important; text-wrap: balance;
}
main h1 { margin: 0 0 14px !important; font-size: clamp(2.4rem, 5vw, 4.3rem) !important; line-height: 1.04 !important; font-weight: 800 !important; }
main h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem) !important; line-height: 1.18 !important; font-weight: 800 !important; }
main h3 { font-size: 1.16rem !important; line-height: 1.3 !important; font-weight: 800 !important; }
main p { color: var(--muted); line-height: 1.75; }
main .eyebrow, main .section-kicker, main .kicker, main .toolkit-eyebrow, main .toolkit-kicker, main .catalog-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px !important;
  color: var(--blue) !important; font-size: 11px !important; line-height: 1.3 !important;
  font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase;
}
main .eyebrow::before, main .section-kicker::before, main .toolkit-eyebrow::before {
  content: ""; display: inline-block; width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: 50%; background: var(--blue);
}
.game-icon { display: inline-block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.page-icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 0 18px;
  border: 1px solid var(--blue-tint); border-radius: 18px; background: var(--blue-soft); color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.page-icon .game-icon { width: 31px; height: 31px; }

/* Header and navigation */
.site-header {
  position: sticky !important; top: 0 !important; z-index: 100 !important; width: 100%;
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  box-shadow: 0 4px 22px rgba(26, 42, 76, .035);
  backdrop-filter: blur(18px) saturate(1.25) !important; -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}
html[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--surface) 92%, transparent) !important; box-shadow: 0 4px 24px rgba(0,0,0,.18); }
.site-header .bar {
  display: flex !important; min-height: 78px !important; align-items: center !important;
  justify-content: space-between !important; gap: 25px !important;
}
.brand { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; gap: 11px !important; color: var(--ink) !important; }
.wordle-mark {
  position: relative; display: inline-grid !important; width: 42px !important; height: 42px !important;
  place-items: center !important; border: 0 !important; border-radius: 13px !important;
  background: #244bd7 !important; color: #fff !important; font-family: "Manrope", sans-serif !important;
  font-size: 25px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -.1em !important;
  box-shadow: 0 7px 17px rgba(49,93,232,.22) !important;
}
.wordle-mark::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: linear-gradient(90deg,#fff 0 68%,#e95866 68% 100%); }
.brand-text { color: var(--ink) !important; font-family: "Manrope",sans-serif !important; font-size: 23px !important; line-height: 1 !important; letter-spacing: -.065em !important; font-weight: 800 !important; }
nav.main { display: flex !important; flex: 1 1 auto !important; align-items: center !important; justify-content: center !important; gap: 4px !important; flex-wrap: nowrap !important; }
nav.main a {
  display: inline-flex !important; min-height: 42px !important; align-items: center !important; justify-content: center !important;
  padding: 0 13px !important; border: 1px solid transparent !important; border-radius: 11px !important;
  color: var(--muted) !important; font-size: 13px !important; font-weight: 700 !important; white-space: nowrap;
  transition: color .16s ease, background .16s ease, border-color .16s ease !important;
}
nav.main a:hover { background: var(--page-alt) !important; color: var(--ink) !important; }
nav.main a[aria-current="page"] { background: var(--blue-soft) !important; color: var(--blue) !important; }
.nav-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.theme-toggle, .mobile-menu-toggle {
  display: inline-flex !important; min-width: 42px !important; min-height: 42px !important;
  align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0 11px !important;
  border: 1px solid var(--line-strong) !important; border-radius: 11px !important;
  background: var(--surface) !important; color: var(--ink) !important; font-size: 12px !important; font-weight: 750 !important;
}
.theme-toggle:hover, .mobile-menu-toggle:hover { border-color: var(--blue) !important; background: var(--blue-soft) !important; }
.theme-toggle svg, .mobile-menu-toggle svg { display: block; width: 18px; height: 18px; }
.nav-cta {
  display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 9px; padding: 0 16px;
  border-radius: 11px; background: var(--blue) !important; color: #fff !important;
  box-shadow: 0 7px 16px rgba(49,93,232,.18); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.nav-cta:hover { background: var(--blue-deep) !important; color: #fff !important; }
.mobile-menu-toggle { display: none !important; }

/* Shared cards and buttons */
.game-card, .side-card, .content-section, .library-card, .step-card, .finder-panel,
.extra-main-card, .extra-info-card, .connections-main, .connections-side-card,
.groups-main-card, .groups-info-card, .crossword-main-card, .crossword-info-card,
.wipe-main-panel, .wipe-info-card, .toolkit-panel, .toolkit-results, .catalog-tools, .catalog-faq {
  border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
  background: var(--surface) !important; box-shadow: var(--shadow-md) !important;
}
.button, a.button, button.button {
  display: inline-flex !important; min-height: 46px !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important; padding: 0 18px !important; border: 1px solid var(--blue) !important;
  border-radius: 11px !important; background: var(--blue) !important; color: #fff !important;
  font-size: 13px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0 !important;
  text-transform: none !important; text-decoration: none !important; box-shadow: 0 7px 15px rgba(49,93,232,.15);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.button:hover, a.button:hover, button.button:hover { transform: translateY(-2px); background: var(--blue-deep) !important; border-color: var(--blue-deep) !important; color: #fff !important; box-shadow: 0 11px 22px rgba(49,93,232,.2); }
.button.secondary, a.button.secondary, button.button.secondary {
  border-color: var(--line-strong) !important; background: var(--surface) !important; color: var(--ink) !important; box-shadow: none !important;
}
.button.secondary:hover, a.button.secondary:hover, button.button.secondary:hover { border-color: var(--blue) !important; background: var(--blue-soft) !important; color: var(--blue) !important; }

/* Homepage */
.home-page { display: grid !important; gap: 40px !important; }
.home-page > .hero {
  position: relative; display: grid !important; grid-template-columns: minmax(0,1.05fr) minmax(330px,.95fr) !important;
  align-items: center !important; gap: clamp(28px,5vw,64px) !important; min-height: 480px;
  padding: clamp(34px,5vw,66px) !important; overflow: hidden;
  border: 0 !important; border-radius: var(--r-xl) !important;
  background: radial-gradient(circle at 88% 15%,rgba(114,145,255,.25),transparent 24rem),linear-gradient(120deg,#101a37 0%,#1d3473 62%,#315de8 100%) !important;
  box-shadow: 0 25px 70px rgba(22,44,108,.18) !important;
}
.home-page > .hero::before {
  content: ""; position: absolute; right: -175px; bottom: -260px; width: 500px; height: 500px;
  border: 1px solid rgba(255,255,255,.17); border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025);
}
.home-page .hero-copy, .home-page .hero-visual { position: relative; z-index: 1; }
.home-page .hero-copy { max-width: 625px; }
.home-page .hero .eyebrow { color: #b9caff !important; }
.home-page .hero .eyebrow::before { background: #9db5ff; box-shadow: 0 0 0 5px rgba(157,181,255,.16); }
.home-page .hero h1 {
  max-width: 610px; margin: 0 !important; color: #fff !important;
  font-size: clamp(3.2rem,6vw,5.6rem) !important; line-height: .99 !important; letter-spacing: -.075em !important; font-weight: 800 !important;
}
.home-page .hero h1 span { color: #a9bcff !important; }
.home-page .hero .lede { max-width: 565px; margin: 17px 0 0 !important; color: rgba(255,255,255,.78) !important; font-size: 17px !important; line-height: 1.75 !important; }
.home-page .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
.home-page .hero-actions .button { min-height: 49px !important; padding-inline: 21px !important; background: #fff !important; color: #1d3473 !important; border-color: #fff !important; }
.home-page .hero-actions .button.secondary { border-color: rgba(255,255,255,.25) !important; background: rgba(255,255,255,.1) !important; color: #fff !important; }
.home-page .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; color: rgba(255,255,255,.72) !important; font-size: 12px !important; font-weight: 650; }
.home-page .hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.home-page .hero-trust span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #a9bcff; }
.home-page .hero-visual { display: flex; justify-content: center !important; }
.home-page .visual-panel {
  width: min(100%,430px) !important; padding: 22px !important; border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 23px !important; background: rgba(255,255,255,.1) !important;
  box-shadow: 0 22px 50px rgba(5,13,37,.25),inset 0 1px rgba(255,255,255,.16) !important; backdrop-filter: blur(12px);
}
.home-page .visual-top, .home-page .visual-footer { color: rgba(255,255,255,.8) !important; }
.home-page .guess-stack { display: grid; gap: 8px; }
.home-page .guess-row { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 8px !important; }
.home-page .guess-tile {
  display: grid; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.17) !important;
  border-radius: 10px !important; background: rgba(255,255,255,.1) !important; color: #fff !important;
  font-family: "Manrope",sans-serif; font-size: clamp(19px,2.4vw,26px) !important; font-weight: 800 !important;
}
.home-page .guess-tile.correct { border-color: #27966b !important; background: #27966b !important; }
.home-page .guess-tile.present { border-color: #e7b63f !important; background: #e7b63f !important; color: #202a42 !important; }
.home-page .guess-tile.absent { background: rgba(255,255,255,.16) !important; color: rgba(255,255,255,.74) !important; }
.home-page .visual-badge { border-radius: 999px; background: #e8f6ef !important; color: #17734f !important; padding: 4px 9px; font-size: 11px; font-weight: 800; }
.feature-strip { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 15px !important; }
.feature-card {
  display: grid; grid-template-columns: 52px minmax(0,1fr); column-gap: 14px; align-items: start;
  padding: 23px !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important;
  background: var(--surface) !important; box-shadow: var(--shadow-sm) !important;
}
.feature-icon {
  display: grid !important; grid-row: span 2; width: 52px !important; height: 52px !important;
  place-items: center; border-radius: 15px !important; background: var(--blue-soft) !important; color: var(--blue) !important;
}
.feature-icon .game-icon { width: 28px; height: 28px; }
.feature-card h3 { margin: 1px 0 4px !important; font-size: 16px !important; }
.feature-card p { margin: 0 !important; font-size: 13px !important; line-height: 1.65 !important; }
.home-page .showcase { display: grid !important; grid-template-columns: 1fr !important; max-width: 1120px; width: 100%; margin-inline: auto !important; gap: 0 !important; align-items: start; }
.home-page .showcase > .side-panel { display: none !important; }
.home-page .showcase > .game-card { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.home-page .showcase > .game-card > .game-card-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 16px !important; }
.home-page .showcase > .game-card > .game-card-head .kicker { margin: 0 0 6px !important; color: var(--blue) !important; }
.home-page .showcase > .game-card > .game-card-head h2 { margin: 0 !important; font-family: "Manrope",sans-serif !important; font-size: 29px !important; font-weight: 800 !important; }
.home-page .showcase > .game-card > .game-section {
  display: grid !important; grid-template-columns: minmax(0,1fr) 285px !important; align-items: stretch !important;
  gap: 16px !important; max-width: none !important; width: 100% !important; margin: 0 !important;
}
.home-page .showcase .game-section > .game-card { min-width: 0; padding: clamp(20px,3vw,32px) !important; border-radius: 22px !important; }
.home-page .showcase .game-section > .side-panel { display: grid !important; grid-template-columns: 1fr !important; align-content: start; gap: 14px !important; }
.home-page .showcase .game-section > .side-panel .side-card { padding: 21px !important; border-radius: 19px !important; }
.home-page .section-head { display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 20px !important; margin-bottom: 18px; }
.home-page .section-head h2 { margin: 0 0 5px !important; }
.home-page .section-head p { margin: 0 !important; }
.home-page .game-library-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 14px !important; }
.home-library-card {
  position: relative; display: grid !important; grid-template-columns: 46px minmax(0,1fr); column-gap: 13px;
  align-content: start; min-height: 154px; padding: 20px !important; border: 1px solid var(--line) !important;
  border-radius: 17px !important; background: var(--surface) !important; box-shadow: var(--shadow-sm) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.home-library-card:hover { transform: translateY(-3px); border-color: var(--blue) !important; box-shadow: var(--shadow-lg) !important; }
.home-library-icon { display: grid; grid-row: span 3; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: var(--blue-soft); color: var(--blue); }
.home-library-icon .game-icon { width: 26px; height: 26px; }
.home-library-card .meta { color: var(--blue) !important; font-size: 10px !important; line-height: 1.35; font-weight: 800 !important; letter-spacing: .11em; }
.home-library-card h3 { margin: 5px 0 !important; font-size: 16px !important; }
.home-library-card p { grid-column: 2; margin: 0 !important; font-size: 12px !important; line-height: 1.65 !important; }
.home-tools { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 19px 22px; border-radius: 15px; background: var(--blue-soft) !important; }
.home-tools p { margin: 0 !important; color: var(--ink) !important; font-size: 14px !important; font-weight: 650; }
.home-tools a { font-size: 13px; font-weight: 850; white-space: nowrap; }
.home-faq {
  padding: clamp(22px,3vw,34px) !important; border: 1px solid var(--line) !important;
  border-radius: 20px !important; background: var(--surface) !important; box-shadow: var(--shadow-sm) !important;
}
.home-faq h2 { margin: 0 0 14px !important; }
.faq-item { padding: 14px 0 !important; border-top: 1px solid var(--line) !important; }
.faq-item summary { color: var(--ink) !important; font-size: 14px; font-weight: 800 !important; cursor: pointer; }
.faq-item p { margin: 8px 0 0 !important; font-size: 14px; }

/* Wordle core game, stats and keyboard */
.game-section { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(255px,300px) !important; align-items: start !important; gap: 16px !important; max-width: 1080px !important; margin: 0 auto 30px !important; }
.game-section > .game-card { min-width: 0; padding: clamp(19px,3vw,30px) !important; border-radius: 21px !important; background: var(--surface) !important; box-shadow: var(--shadow-md) !important; }
.game-mode-banner {
  display: flex !important; min-height: 56px; align-items: center !important; justify-content: space-between !important;
  flex-wrap: wrap; gap: 10px; padding: 10px 14px !important; border: 1px solid var(--blue-tint) !important;
  border-radius: 12px !important; background: var(--blue-soft) !important; color: var(--blue) !important;
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .055em !important;
}
.game-mode-spark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface); color: var(--blue); font-size: 18px !important; }
.game-mode-banner a { color: var(--blue) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0; }
.game-card-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important; margin: 22px 0 12px !important; }
.game-card-head h2 { max-width: 600px; margin: 5px 0 6px !important; font-size: clamp(23px,2.7vw,31px) !important; line-height: 1.13 !important; font-weight: 800 !important; }
.game-card-head p { margin: 0 !important; color: var(--muted) !important; font-size: 14px !important; line-height: 1.6 !important; }
.game-kicker { display: flex; align-items: center; gap: 9px; color: var(--blue) !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .12em !important; text-transform: uppercase; }
.live-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--green) !important; box-shadow: 0 0 0 5px var(--green-soft) !important; }
.puzzle-pill, .connections-number, .extra-number, .groups-number, .crossword-completion, .catalog-count {
  display: inline-flex !important; min-height: 35px; align-items: center; justify-content: center;
  padding: 6px 12px !important; border: 1px solid var(--line) !important; border-radius: 999px !important;
  background: var(--page) !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 800 !important; white-space: nowrap;
}
.game-status, .extra-status, .connections-status, .groups-status, .wipe-status, .crossword-status {
  min-height: 24px; margin: 10px 0 14px !important; padding: 8px 12px; border-radius: 10px;
  background: var(--page-alt); color: var(--muted) !important; font-size: 13px !important; line-height: 1.5 !important;
}
.board { display: grid !important; width: min(100%,340px) !important; gap: 7px !important; justify-content: center; margin: 18px auto 21px !important; }
.board-row { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 7px !important; }
.board .tile {
  display: grid !important; min-width: 0; aspect-ratio: 1; place-items: center !important;
  border: 2px solid var(--line-strong) !important; border-radius: 10px !important;
  background: var(--surface) !important; color: var(--ink) !important;
  font-family: "Manrope",sans-serif !important; font-size: clamp(22px,2.7vw,29px) !important; font-weight: 800 !important;
}
.board .tile.filled, .board .tile.is-filled { border-color: #9ca9bf !important; background: var(--page) !important; }
.board .tile.correct, .board .tile[data-mark="correct"], .extra-tile.correct, .key.correct, .extra-key.correct { border-color: #26966b !important; background: #26966b !important; color: #fff !important; }
.board .tile.present, .board .tile[data-mark="present"], .extra-tile.present, .key.present, .extra-key.present { border-color: #e7b63f !important; background: #e7b63f !important; color: #202a42 !important; }
.board .tile.absent, .board .tile[data-mark="absent"], .extra-tile.absent, .key.absent, .extra-key.absent { border-color: #667085 !important; background: #667085 !important; color: #fff !important; }
.keyboard { display: grid !important; gap: 7px !important; width: min(100%,520px) !important; margin: 0 auto !important; }
.keyboard-row { display: flex !important; justify-content: center !important; gap: 5px !important; }
.keyboard .key {
  display: inline-flex !important; min-width: 0 !important; min-height: 46px !important; max-width: 51px !important;
  flex: 1 1 0 !important; align-items: center !important; justify-content: center !important;
  padding: 0 4px !important; border: 1px solid var(--line) !important; border-radius: 8px !important;
  background: var(--page-alt) !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 850 !important;
}
.keyboard .key-wide { max-width: 76px !important; font-size: 10px !important; }
.keyboard .key:disabled { opacity: 1 !important; cursor: pointer !important; }
.game-actions { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px !important; margin: 20px 0 8px !important; }
.game-footnote, .extra-game-note, .extra-note, .connections-note, .groups-note, .wipe-note {
  margin: 14px 0 0 !important; color: var(--muted-2) !important; font-size: 11px !important; line-height: 1.65 !important;
}
.side-panel { display: grid !important; align-content: start; gap: 13px !important; }
.side-card { min-width: 0; padding: 21px !important; border-radius: 19px !important; background: var(--surface) !important; box-shadow: var(--shadow-md) !important; }
.side-card:first-child { border-color: var(--line) !important; background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--shadow-md) !important; }
.side-card h3, .side-card:first-child h3 { margin: 0 0 9px !important; color: var(--ink) !important; font-size: 15px !important; }
.side-card p, .side-card:first-child p { margin: 0 0 14px !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.65 !important; }
.stat-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; margin-top: 15px !important; }
.stat { min-width: 0; padding: 13px 7px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--page) !important; text-align: center !important; }
.stat strong, .side-card:first-child .stat strong { display: block !important; color: var(--ink) !important; font-family: "Manrope",sans-serif !important; font-size: 24px !important; line-height: 1.1 !important; font-weight: 800 !important; }
.stat span, .side-card:first-child .stat span { display: block !important; margin-top: 5px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .07em; text-transform: uppercase; }
.legend { display: grid !important; gap: 10px !important; margin: 13px 0 !important; }
.legend-item { display: flex !important; align-items: center !important; gap: 10px !important; color: var(--muted) !important; font-size: 12px !important; line-height: 1.4 !important; }
.legend-item strong { color: var(--ink) !important; font-weight: 800 !important; }
.legend-tile { display: grid !important; width: 32px !important; height: 32px !important; flex: 0 0 32px; place-items: center; border-radius: 8px !important; background: #26966b !important; color: #fff !important; font-size: 12px !important; font-weight: 900 !important; }
.legend-tile.yellow { background: #e7b63f !important; color: #202a42 !important; }
.legend-tile.gray { background: #667085 !important; color: #fff !important; }
.tiny-link { display: inline-flex; margin-top: 8px; color: var(--blue) !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .04em; text-transform: uppercase; }

/* Other game pages */
.extra-page, .groups-page, .wipe-page, .catalog-page, .toolkit-page { display: block; }
.page-hero, .connections-intro, .extra-hero, .groups-hero, .toolkit-hero, .theme-intro, .arcade-game-hero, .wipe-hero {
  position: relative; margin: 0 0 30px !important; padding: 8px 0 26px !important;
  border-bottom: 1px solid var(--line) !important;
}
.page-hero h1, .connections-intro h1, .extra-hero h1, .groups-hero h1, .toolkit-hero h1,
.theme-intro h1, .arcade-game-hero h1, .wipe-hero h1 { margin: 0 0 12px !important; color: var(--ink) !important; }
.page-hero .lead, .page-hero > p:last-child, .connections-intro > p:last-child, .extra-hero > p:not(.eyebrow),
.groups-hero > p:not(.eyebrow), .toolkit-hero > p:not(.toolkit-eyebrow), .theme-intro > p:not(.eyebrow),
.arcade-game-hero > div > p:not(.arcade-eyebrow), .wipe-hero-copy > p:not(.eyebrow) {
  max-width: 770px; margin: 0 !important; color: var(--muted) !important; font-size: clamp(15px,1.5vw,18px) !important; line-height: 1.75 !important;
}
.extra-meta, .groups-meta, .wipe-meta, .toolkit-trust, .hero-row, .mode-points, .theme-intro-meta, .arcade-game-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 20px;
}
.extra-meta span, .groups-meta span, .wipe-meta span, .toolkit-trust span, .hero-row span, .mode-points span,
.theme-intro-meta span, .arcade-game-meta span {
  display: inline-flex; min-height: 33px; align-items: center; padding: 5px 11px;
  border: 1px solid var(--line) !important; border-radius: 999px !important; background: var(--surface) !important;
  color: var(--muted) !important; font-size: 11px !important; font-weight: 700 !important;
}
.connections-game, .groups-game, .wipe-layout, .crossword-layout, .extra-layout, .theme-layout,
.builder-layout, .hunt-layout {
  display: grid !important; grid-template-columns: minmax(0,1fr) minmax(260px,320px) !important;
  align-items: start !important; gap: 16px !important; margin-top: 20px;
}
.connections-main, .groups-main-card, .wipe-main-panel, .crossword-main-card, .extra-main-card,
.theme-board-card, .builder-main-panel, .hunt-main-panel { min-width: 0; padding: clamp(18px,3vw,28px) !important; }
.connections-sidebar, .groups-sidebar, .extra-sidebar, .wipe-sidebar, .theme-sidebar, .builder-sidebar, .hunt-sidebar {
  display: grid !important; align-content: start; gap: 13px !important;
}
.connections-side-card, .groups-info-card, .extra-info-card, .wipe-info-card, .crossword-info-card,
.theme-info-card, .builder-info-card, .hunt-info-card { padding: 20px !important; }
.connections-intro, .extra-hero, .groups-hero, .theme-intro, .wipe-hero { max-width: 900px; }
.connections-game-head, .groups-game-head, .extra-game-head, .crossword-game-heading, .wipe-toolbar, .theme-game-top {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important;
}
.connections-game-head h2, .groups-game-head h2, .extra-game-head h2, .crossword-game-heading h2,
.theme-game-top h2, .builder-topline h2, .hunt-topline h2 { margin: 2px 0 !important; font-size: clamp(20px,2.3vw,27px) !important; }
.connections-toolbar, .groups-toolbar, .crossword-topbar, .wipe-toolbar, .extra-game-toolbar {
  display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap; gap: 10px !important;
  padding: 12px 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  color: var(--muted) !important; font-size: 12px !important;
}
.connections-mode-tabs, .groups-mode-tabs, .crossword-mode-tabs, .wipe-mode-tabs {
  display: inline-flex !important; gap: 4px !important; padding: 4px !important;
  border: 1px solid var(--line) !important; border-radius: 11px !important; background: var(--page) !important;
}
.connections-mode-tabs button, .groups-mode-tabs button, .crossword-mode-tabs button, .wipe-mode-tabs button {
  min-height: 35px !important; padding: 0 13px !important; border: 0 !important; border-radius: 8px !important;
  background: transparent !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 800 !important;
}
.connections-mode-tabs button.is-active, .groups-mode-tabs button.is-active, .crossword-mode-tabs button.is-active, .wipe-mode-tabs button.is-active {
  background: var(--surface) !important; color: var(--blue) !important; box-shadow: var(--shadow-sm) !important;
}
.connections-grid, .groups-grid { gap: 9px !important; }
.connections-word, .groups-word {
  min-height: 70px !important; padding: 10px !important; border: 1px solid var(--line-strong) !important;
  border-radius: 12px !important; background: var(--page-alt) !important; color: var(--ink) !important;
  font-size: 13px !important; font-weight: 800 !important; line-height: 1.3 !important;
}
.connections-word:hover, .groups-word:hover { border-color: var(--blue) !important; background: var(--blue-soft) !important; }
.connections-word.is-selected, .groups-word.is-selected { border-color: var(--blue) !important; background: var(--blue-soft) !important; color: var(--blue) !important; box-shadow: inset 0 0 0 1px var(--blue) !important; }
.connections-solved-card, .groups-solved-card { padding: 13px !important; border-radius: 12px !important; }
.connections-actions, .groups-actions, .connections-powerup-actions, .extra-actions, .wipe-actions { display: flex; flex-wrap: wrap; gap: 8px !important; }
.connections-actions .button, .groups-actions .button, .extra-actions .button, .wipe-actions .button { min-height: 42px !important; }
.connections-status[data-tone="success"], .groups-status[data-tone="success"], .extra-status[data-tone="success"], .wipe-status[data-tone="success"] { color: var(--green) !important; }
.connections-status[data-tone="error"], .groups-status[data-tone="error"], .extra-status[data-tone="error"], .wipe-status[data-tone="error"] { color: var(--red) !important; }
.extra-game-head h2 { margin: 4px 0 !important; }
.extra-board, .extra-keyboard { max-width: 540px !important; }
.extra-tile { border: 2px solid var(--line-strong) !important; border-radius: 9px !important; background: var(--surface) !important; color: var(--ink) !important; }
.extra-key { border-radius: 8px !important; background: var(--page-alt) !important; color: var(--ink) !important; }
.extra-key:disabled { opacity: 1 !important; }
.crossword-game-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crossword-board, .crossword-grid { overflow: hidden; border: 2px solid var(--ink) !important; border-radius: 5px; }
.crossword-cell { border-color: var(--line-strong) !important; background: var(--surface) !important; color: var(--ink) !important; }
.crossword-cell.is-active, .crossword-cell.active { background: var(--blue-soft) !important; }
.crossword-cell input { border: 0 !important; background: transparent !important; color: var(--ink) !important; font-weight: 800 !important; }
[data-crossword] input, [data-crossword] select { border-color: var(--line-strong) !important; border-radius: 9px !important; background: var(--surface) !important; color: var(--ink) !important; }
[data-word-search] .search-grid, [data-word-search] .search-board-wrap { border-color: var(--line) !important; }
[data-word-search] .search-cell { border-radius: 7px !important; background: var(--page-alt) !important; color: var(--ink) !important; }
[data-word-search] .search-cell.is-selected { background: var(--blue-soft) !important; color: var(--blue) !important; }
[data-word-search] .search-cell.is-found { background: var(--green-soft) !important; color: var(--green) !important; }
[data-word-search] .search-word-list li { border-color: var(--line) !important; color: var(--ink) !important; }
.wipe-board-wrap { border: 1px solid var(--line) !important; border-radius: 17px !important; background: var(--page) !important; }
.wipe-tile { border: 1px solid var(--line) !important; border-radius: 9px !important; background: var(--surface) !important; color: var(--ink) !important; }
.wipe-tile.is-selected { border-color: var(--blue) !important; background: var(--blue-soft) !important; color: var(--blue) !important; }
.wipe-stats > div { border: 1px solid var(--line) !important; border-radius: 11px !important; background: var(--page) !important; }
.wipe-stats strong { color: var(--ink) !important; }
.wipe-level-track { background: var(--page-alt) !important; }
.wipe-level-track span { background: var(--blue) !important; }

/* Tools and content pages */
.toolkit-hero { max-width: 870px; margin-bottom: 30px !important; }
.toolkit-panel { max-width: 900px; padding: clamp(20px,3vw,34px) !important; }
.toolkit-panel-heading, .finder-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.toolkit-panel-heading h2, .finder-heading h2 { margin: 3px 0 0 !important; }
.toolkit-local, .finder-badge { padding: 7px 11px; border-radius: 999px; background: var(--green-soft) !important; color: var(--green) !important; font-size: 11px; font-weight: 800; }
.toolkit-label, .toolkit-page label, .finder-panel label { color: var(--ink) !important; font-size: 13px !important; font-weight: 800 !important; }
.toolkit-page input, .toolkit-page select, .toolkit-page textarea, .toolkit-letters,
[data-word-finder] input, [data-word-finder] select, .finder-panel input, .finder-panel select {
  min-height: 45px; padding: 10px 13px !important; border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important; background: var(--surface) !important; color: var(--ink) !important; font-size: 14px !important;
}
.toolkit-letters { width: 100%; }
.toolkit-help, .field-help { color: var(--muted) !important; font-size: 12px !important; }
.prose {
  max-width: 900px; margin: 0 auto; padding: clamp(25px,4vw,46px) !important;
  border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important; background: var(--surface) !important; box-shadow: var(--shadow-md) !important;
}
.prose .page-hero { border-bottom: 1px solid var(--line) !important; }
.prose h2 { margin: 29px 0 9px !important; font-size: 22px !important; }
.prose p, .prose li { color: var(--muted) !important; font-size: 15px !important; line-height: 1.8 !important; }
.prose ul, .prose ol { padding-left: 22px; }
.prose strong { color: var(--ink) !important; }

/* Game catalogue */
.catalog-hero {
  display: grid !important; grid-template-columns: minmax(0,1fr) 205px !important; align-items: center !important; gap: 25px !important;
  min-height: 260px; padding: clamp(27px,4vw,46px) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important; background: linear-gradient(115deg,var(--surface) 0%,var(--surface) 68%,var(--blue-soft) 100%) !important; box-shadow: var(--shadow-md) !important;
}
.catalog-hero h1 { margin: 8px 0 12px !important; font-size: clamp(2.5rem,5vw,4rem) !important; }
.catalog-hero .lede { max-width: 720px; margin: 0 !important; font-size: 16px !important; }
.catalog-hero .hero-row span { border-color: var(--line) !important; background: var(--page) !important; }
.catalog-hero .mini { display: grid; width: 190px; grid-template-columns: repeat(4,1fr); gap: 8px; transform: rotate(7deg); }
.catalog-hero .mini i { aspect-ratio: 1; border: 1px solid var(--blue-tint); border-radius: 9px; background: var(--blue-soft); box-shadow: var(--shadow-sm); }
.catalog-hero .mini i:nth-child(3n+1) { border-color: var(--blue); background: var(--blue); }
.catalog-hero .mini i:nth-child(5n+2) { border-color: #e6b640; background: #e6b640; }
.catalog-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 33px 0 17px; }
.catalog-section-head h2 { margin: 0 0 4px !important; }
.catalog-section-head p { margin: 0 !important; }
.catalog-controls { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px !important; margin-bottom: 17px; }
.catalog-search { display: flex !important; width: min(100%,360px); min-height: 45px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); }
.catalog-search svg { width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.catalog-search input { width: 100%; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; color: var(--ink) !important; font-size: 13px !important; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.catalog-filter { min-height: 39px !important; padding: 0 13px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--surface) !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 800 !important; }
.catalog-filter.is-active { border-color: var(--blue) !important; background: var(--blue-soft) !important; color: var(--blue) !important; }
.catalog-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 14px !important; }
.catalog-card {
  min-height: 190px; padding: 20px !important; border: 1px solid var(--line) !important; border-radius: 17px !important;
  background: var(--surface) !important; box-shadow: var(--shadow-sm) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.catalog-card:hover { transform: translateY(-3px); border-color: var(--blue) !important; box-shadow: var(--shadow-lg) !important; }
.catalog-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-card-title h3 { margin: 0 !important; }
.catalog-card-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 13px; background: var(--blue-soft); color: var(--blue); }
.catalog-card-icon .game-icon { width: 25px; height: 25px; }
.catalog-card-title .card-arrow { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--page-alt); color: var(--muted); font-size: 16px; font-weight: 800; }
.catalog-card p { min-height: 52px; font-size: 13px !important; line-height: 1.6 !important; }
.catalog-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line); }
.catalog-card-bottom > span { color: var(--muted-2); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.catalog-card-bottom a { font-size: 12px; font-weight: 850; }
.catalog-tools { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; margin: 27px 0; padding: 25px !important; }
.catalog-tools h2 { margin: 4px 0 !important; }
.catalog-tools p { margin: 0 !important; }
.catalog-tool-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-tool-link { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); font-size: 12px; font-weight: 800; }
.catalog-tool-link.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.catalog-empty { padding: 23px; border: 1px dashed var(--line-strong); border-radius: 13px; text-align: center; }

/* Footer */
.site-footer { margin: 0 !important; padding: 48px 0 22px !important; border-top: 1px solid var(--line) !important; background: var(--surface) !important; }
.footer-main { display: grid; grid-template-columns: minmax(230px,1.5fr) repeat(3,minmax(130px,.8fr)); gap: clamp(22px,4vw,54px); padding-bottom: 33px; }
.footer-brand-block { max-width: 315px; }
.foot-brand { display: inline-flex !important; align-items: center !important; gap: 10px !important; color: var(--ink) !important; font-family: "Manrope",sans-serif !important; font-size: 23px !important; font-weight: 800 !important; letter-spacing: -.06em !important; }
.footer-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 11px; background: #244bd7; color: #fff; font-family: "Manrope",sans-serif; font-size: 21px; font-weight: 900; letter-spacing: -.1em; box-shadow: inset 0 -4px 0 var(--red); }
.footer-brand-block p { margin: 13px 0 !important; color: var(--muted) !important; font-size: 13px !important; }
.footer-play-link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue) !important; font-size: 12px; font-weight: 850; }
.footer-column h2 { margin: 5px 0 13px !important; color: var(--ink) !important; font-size: 12px !important; letter-spacing: .02em !important; text-transform: none !important; }
.footer-column ul { display: grid !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.footer-column a { color: var(--muted) !important; font-size: 12px !important; font-weight: 600 !important; }
.footer-column a:hover { color: var(--blue) !important; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.footer-bottom p { margin: 0 !important; color: var(--muted-2) !important; font-size: 11px !important; }

/* Dark mode */
html[data-theme="dark"] .home-page > .hero { background: radial-gradient(circle at 88% 15%,rgba(93,119,212,.25),transparent 24rem),linear-gradient(120deg,#080e20 0%,#142555 62%,#243fb2 100%) !important; }
html[data-theme="dark"] .catalog-hero { background: linear-gradient(115deg,var(--surface) 0%,var(--surface) 68%,var(--blue-soft) 100%) !important; }
html[data-theme="dark"] .board .tile.filled, html[data-theme="dark"] .board .tile.is-filled { background: var(--page-alt) !important; }
html[data-theme="dark"] .side-card:first-child { background: var(--surface) !important; color: var(--ink) !important; }
html[data-theme="dark"] .side-card:first-child p, html[data-theme="dark"] .side-card:first-child h3 { color: var(--ink) !important; }
html[data-theme="dark"] .side-card:first-child .stat strong { color: var(--ink) !important; }
html[data-theme="dark"] .keyboard .key { background: var(--page-alt) !important; color: var(--ink) !important; }
html[data-theme="dark"] .connections-word, html[data-theme="dark"] .groups-word { background: var(--page-alt) !important; color: var(--ink) !important; }
html[data-theme="dark"] .connections-word.is-selected, html[data-theme="dark"] .groups-word.is-selected { background: var(--blue-soft) !important; color: var(--blue) !important; }

/* Responsive */
@media (max-width: 1080px) {
  .site-header .bar { gap: 12px !important; }
  nav.main { gap: 0 !important; }
  nav.main a { padding-inline: 9px !important; font-size: 12px !important; }
  .brand-text { font-size: 21px !important; }
  .nav-cta { padding-inline: 12px; }
  main.wrap.page-content { width: min(100% - 44px,1240px) !important; }
  .wrap, .site-header .wrap, .site-footer .wrap { width: min(100% - 44px,1280px) !important; }
}
@media (max-width: 900px) {
  .site-header .bar { min-height: 70px !important; }
  nav.main { display: none !important; }
  .mobile-menu-toggle { display: inline-flex !important; order: 3; }
  .nav-actions { margin-left: auto; }
  .bar.menu-open nav.main {
    display: flex !important; position: absolute !important; top: calc(100% + 8px) !important;
    left: 0 !important; right: 0 !important; z-index: 120 !important; flex-direction: column !important;
    align-items: stretch !important; gap: 4px !important; padding: 10px !important;
    border: 1px solid var(--line) !important; border-radius: 15px !important;
    background: var(--surface) !important; box-shadow: var(--shadow-lg) !important;
  }
  .bar.menu-open nav.main a { width: 100% !important; min-height: 45px !important; justify-content: flex-start !important; }
  .home-page > .hero { grid-template-columns: 1fr !important; min-height: auto; }
  .home-page .hero-visual { margin-top: 5px; }
  .home-page .visual-panel { max-width: 470px; }
  .home-page .showcase > .game-card > .game-section { grid-template-columns: minmax(0,1fr) 250px !important; }
  .game-section, .extra-layout, .groups-game, .connections-game, .wipe-layout, .crossword-layout, .theme-layout, .builder-layout, .hunt-layout { grid-template-columns: 1fr !important; }
  .side-panel, .extra-sidebar, .connections-sidebar, .groups-sidebar, .wipe-sidebar, .theme-sidebar, .builder-sidebar, .hunt-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .wrap, .site-header .wrap, .site-footer .wrap { width: calc(100% - 32px) !important; }
  main.wrap.page-content { width: calc(100% - 32px) !important; padding-top: 27px !important; padding-bottom: 56px !important; }
  .site-header .bar { min-height: 65px !important; gap: 7px !important; }
  .wordle-mark { width: 37px !important; height: 37px !important; font-size: 22px !important; }
  .brand-text { font-size: 20px !important; }
  .nav-actions { gap: 6px; }
  .theme-toggle { width: 39px !important; min-width: 39px !important; padding: 0 !important; }
  .theme-toggle span { display: none; }
  .nav-cta { min-height: 39px; padding-inline: 10px; font-size: 11px; }
  .mobile-menu-toggle { min-width: 39px !important; min-height: 39px !important; padding: 0 !important; }
  main h1 { font-size: clamp(2.3rem,11vw,3.3rem) !important; }
  .home-page { gap: 25px !important; }
  .home-page > .hero { padding: 28px 22px !important; border-radius: 22px !important; }
  .home-page .hero h1 { font-size: clamp(3rem,13vw,4.2rem) !important; }
  .home-page .hero .lede { font-size: 15px !important; }
  .home-page .visual-panel { padding: 15px !important; }
  .home-page .guess-row { gap: 5px !important; }
  .home-page .guess-tile { border-radius: 7px !important; font-size: 19px !important; }
  .feature-strip { grid-template-columns: 1fr !important; gap: 9px !important; }
  .feature-card { padding: 18px !important; }
  .home-page .showcase > .game-card > .game-card-head { align-items: flex-start !important; flex-direction: column !important; }
  .home-page .showcase > .game-card > .game-section { grid-template-columns: 1fr !important; }
  .home-page .showcase .game-section > .side-panel { grid-template-columns: 1fr 1fr !important; }
  .home-page .showcase .game-section > .side-panel .side-card { padding: 16px !important; }
  .home-page .section-head, .catalog-section-head { align-items: flex-start !important; flex-direction: column !important; }
  .home-page .game-library-grid, .catalog-grid { grid-template-columns: 1fr !important; }
  .home-library-card { min-height: 130px; }
  .home-tools, .catalog-tools { align-items: flex-start !important; flex-direction: column !important; padding: 18px !important; }
  .home-tools a { white-space: normal; }
  .page-hero, .connections-intro, .extra-hero, .groups-hero, .toolkit-hero, .theme-intro, .wipe-hero { padding-top: 0 !important; margin-bottom: 22px !important; }
  .page-hero .lead, .page-hero > p:last-child, .connections-intro > p:last-child, .extra-hero > p:not(.eyebrow), .groups-hero > p:not(.eyebrow), .toolkit-hero > p:not(.toolkit-eyebrow) { font-size: 15px !important; }
  .extra-meta, .groups-meta, .wipe-meta, .toolkit-trust, .hero-row, .mode-points { gap: 6px; }
  .extra-meta span, .groups-meta span, .wipe-meta span, .toolkit-trust span, .hero-row span, .mode-points span { font-size: 10px !important; }
  .game-section, .connections-game, .groups-game, .extra-layout, .wipe-layout, .crossword-layout, .theme-layout, .builder-layout, .hunt-layout { grid-template-columns: 1fr !important; gap: 12px !important; }
  .game-section > .game-card, .extra-main-card, .groups-main-card, .wipe-main-panel, .crossword-main-card, .connections-main, .toolkit-panel { padding: 16px !important; border-radius: 17px !important; }
  .game-mode-banner { align-items: flex-start !important; font-size: 10px !important; }
  .game-mode-banner a { width: 100%; }
  .game-card-head { align-items: flex-start !important; flex-direction: column !important; gap: 8px !important; margin-top: 16px !important; }
  .board { width: min(100%,320px) !important; }
  .board-row { width: 100%; gap: 5px !important; }
  .board .tile { border-radius: 7px !important; font-size: 21px !important; }
  .keyboard { gap: 5px !important; }
  .keyboard-row { gap: 4px !important; }
  .keyboard .key { min-height: 42px !important; padding: 0 2px !important; border-radius: 7px !important; font-size: 11px !important; }
  .keyboard .key-wide { font-size: 9px !important; }
  .side-panel, .extra-sidebar, .connections-sidebar, .groups-sidebar, .wipe-sidebar, .theme-sidebar, .builder-sidebar, .hunt-sidebar { grid-template-columns: 1fr !important; }
  .connections-grid, .groups-grid { gap: 5px !important; }
  .connections-word, .groups-word { min-height: 58px !important; padding: 6px 3px !important; border-radius: 8px !important; font-size: 10px !important; }
  .catalog-hero { grid-template-columns: 1fr !important; padding: 23px 19px !important; }
  .catalog-hero .mini { width: 145px; grid-row: 1; }
  .catalog-controls { align-items: stretch !important; }
  .catalog-search { width: 100%; }
  .catalog-filters { width: 100%; }
  .catalog-filter { flex: 1; padding-inline: 7px !important; font-size: 10px !important; }
  .catalog-card { min-height: 0; }
  .catalog-card p { min-height: 0; }
  .catalog-tools { gap: 14px; }
  .catalog-tool-actions { width: 100%; }
  .catalog-tool-link { flex: 1; }
  .toolkit-panel-heading, .finder-heading { align-items: flex-start !important; flex-direction: column !important; }
  .prose { padding: 21px !important; border-radius: 17px !important; }
  .prose p, .prose li { font-size: 14px !important; }
  .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
  .footer-brand-block { grid-column: 1/-1; max-width: 480px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
  .site-footer { padding: 35px 0 19px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Navigation system: native details menus remain keyboard-operable. */
.site-header .bar { position: relative; }
nav.main { gap: 6px !important; }
.nav-menu-wrap { position: relative; flex: 0 0 auto; }
.nav-trigger {
  display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px;
  padding: 0 13px; border: 1px solid transparent; border-radius: 11px;
  color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 750; list-style: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.nav-trigger::-webkit-details-marker { display: none; }
.nav-trigger::marker { content: ""; }
.nav-trigger:hover, .nav-menu-wrap[open] > .nav-trigger {
  border-color: var(--line); background: var(--page-alt); color: var(--ink);
}
.nav-trigger.is-current { background: var(--blue-soft); color: var(--blue); }
.nav-chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.nav-menu-wrap[open] .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 150;
  width: 248px; max-height: min(72vh,560px); overflow: auto; padding: 8px;
  border: 1px solid var(--line); border-radius: 17px; background: var(--surface);
  box-shadow: var(--shadow-lg); animation: nav-dropdown-in .14s ease-out;
}
.nav-dropdown-list { display: grid; gap: 3px; }
.nav-dropdown-link {
  display: flex; min-height: 42px; align-items: center; padding: 9px 11px; border-radius: 10px;
  color: var(--ink) !important; text-decoration: none !important;
  transition: background .14s ease, transform .14s ease;
}
.nav-dropdown-link:hover, .nav-dropdown-link.is-current { background: var(--blue-soft); color: var(--blue) !important; }
.nav-dropdown-link-title { font-size: 13px; font-weight: 800; line-height: 1.3; }
.brand-logo { display: block; width: 42px; height: 42px; flex: 0 0 auto; }
.foot-brand img { display: block; width: 38px; height: 38px; }
@keyframes nav-dropdown-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.site-breadcrumb { margin: 0 0 21px; }
.site-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-breadcrumb li { color: var(--muted-2); font-size: 12px; font-weight: 650; }
.site-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }
.site-breadcrumb a { color: var(--muted); }
.site-breadcrumb a:hover { color: var(--blue); }
.site-breadcrumb [aria-current="page"] { color: var(--ink-soft); }

/* Strands: readable word board, generous spacing, and clear feedback states. */
.strands-page { display: grid; gap: 24px; max-width: 1160px; margin: 0 auto 50px; }
.strands-intro {
  position: relative; overflow: hidden; padding: clamp(25px,4vw,42px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(125deg,var(--surface) 0%,var(--surface) 62%,var(--blue-soft) 100%);
  box-shadow: var(--shadow-md);
}
.strands-intro::after {
  content: ""; position: absolute; right: -55px; top: -85px; width: 245px; height: 245px;
  border: 1px solid color-mix(in srgb,var(--blue) 17%,transparent); border-radius: 50%;
  box-shadow: 0 0 0 24px color-mix(in srgb,var(--blue) 4%,transparent),0 0 0 50px color-mix(in srgb,var(--blue) 3%,transparent);
  pointer-events: none;
}
.strands-intro > * { position: relative; z-index: 1; }
.strands-intro .page-icon { margin-bottom: 14px; }
.strands-intro h1 { margin: 0 0 12px !important; }
.strands-intro > p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.strands-intro-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.strands-intro-meta > span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised);
  color: var(--muted); font-size: 11px; font-weight: 750;
}
.strands-meta-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 900; }
.strands-layout { display: grid; grid-template-columns: minmax(0,1fr) 315px; align-items: start; gap: 20px; }
.strands-board-card, .strands-info-card {
  min-width: 0; padding: clamp(18px,2.5vw,27px); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md);
}
.strands-game-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.strands-game-top .section-kicker { margin-bottom: 7px !important; }
.strands-game-top h2 { margin: 0 !important; font-size: clamp(20px,2.3vw,27px) !important; }
.strands-puzzle-number { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--page-alt); color: var(--muted); font-size: 10px; font-weight: 850; white-space: nowrap; }
.strands-clue { margin: 11px 0 16px; color: var(--ink-soft); font-size: 14px; font-weight: 650; line-height: 1.55; }
.strands-stats-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 14px 0 12px; }
.strands-stats-strip > div { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--page-alt); }
.strands-stats-strip strong { color: var(--ink); font-family: "Manrope",sans-serif; font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
.strands-stats-strip span { color: var(--muted); font-size: 10px; font-weight: 750; }
.strands-status { display: flex; min-height: 40px; align-items: center; justify-content: center; margin: 11px 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--page-alt); color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1.45; text-align: center; }
.strands-status[data-tone="success"] { border-color: color-mix(in srgb,var(--green) 25%,var(--line)); background: var(--green-soft); color: var(--green); }
.strands-status[data-tone="hint"] { border-color: color-mix(in srgb,var(--yellow) 35%,var(--line)); background: color-mix(in srgb,var(--yellow) 12%,var(--surface)); color: var(--ink-soft); }
.strands-status[data-tone="error"] { border-color: #e7b4b4; background: #fff0ef; color: #9c3d3d; }
html[data-theme="dark"] .strands-status[data-tone="error"] { border-color: #6a393d; background: #321f29; color: #ffaaaa; }
.strands-grid {
  display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); grid-template-rows: repeat(6,minmax(0,1fr));
  gap: clamp(4px,.8vw,8px); width: min(100%,590px); aspect-ratio: 4 / 3; margin: 0 auto 14px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.strands-cell {
  display: grid; min-width: 0; min-height: 0; place-items: center; padding: 0;
  border: 1px solid var(--line-strong); border-radius: clamp(7px,1.3vw,13px);
  background: var(--page-alt); color: var(--ink); font-family: "Manrope",sans-serif;
  font-size: clamp(13px,2vw,22px); font-weight: 850; line-height: 1;
  box-shadow: inset 0 -2px 0 color-mix(in srgb,var(--ink) 5%,transparent);
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.strands-cell:not(:disabled):hover { transform: translateY(-2px); border-color: var(--blue); background: var(--blue-soft); }
.strands-cell.is-selected { border: 2px solid var(--blue); background: var(--blue-soft); color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb,var(--blue) 13%,transparent); }
.strands-cell.is-found { border-color: #248e70; background: #2b9b79; color: #fff; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%); }
.strands-cell.is-spangram { border-color: #d29b2e; background: #efbd51; color: #2b2b26; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 9%); }
.strands-cell.is-hinted { outline: 3px solid #efbd51; outline-offset: 1px; animation: strands-hint-pulse 1.05s ease-in-out infinite alternate; }
.strands-cell:disabled { cursor: default; opacity: 1; }
@keyframes strands-hint-pulse { from { box-shadow: 0 0 0 0 rgb(239 189 81 / 24%); } to { box-shadow: 0 0 0 8px rgb(239 189 81 / 0%); } }
.strands-selection { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--page-alt); }
.strands-selection > div { display: grid; gap: 2px; min-width: 0; }
.strands-selection-label { color: var(--muted-2); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.strands-selection strong { overflow-wrap: anywhere; color: var(--ink); font-family: "Manrope",sans-serif; font-size: 16px; font-weight: 850; letter-spacing: .08em; }
.strands-selection-count { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.strands-controls, .strands-assist-controls, .strands-board-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.strands-controls .button, .strands-assist-controls .button, .strands-board-actions .button { flex: 1 1 auto; }
.strands-assist-controls { margin-top: 8px; }
.strands-progress { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--page-alt); }
.strands-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.strands-progress-head strong { color: var(--ink); font-size: 12px; font-weight: 850; }
.strands-progress-head span { color: var(--muted); font-size: 10px; line-height: 1.4; text-align: right; }
.strands-progress-track { height: 7px; overflow: hidden; margin-top: 11px; border-radius: 99px; background: var(--line-strong); }
.strands-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--green)); transition: width .25s ease; }
.strands-board-actions { margin-top: 13px; }
.strands-footnote { margin: 14px 0 0; color: var(--muted-2); font-size: 11px; line-height: 1.6; }
.strands-side-panel { display: grid; gap: 13px; }
.strands-info-card h2 { margin: 0 0 9px !important; font-size: 18px !important; }
.strands-side-copy, .strands-info-card > p:not(.section-kicker) { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.strands-found-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.strands-empty-list { padding: 13px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted-2); font-size: 11px; text-align: center; }
.strands-found-word { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--page-alt); }
.strands-found-word strong { color: var(--ink); font-family: "Manrope",sans-serif; font-size: 12px; letter-spacing: .06em; }
.strands-found-word span { color: var(--muted); font-size: 10px; font-weight: 700; }
.strands-found-word.is-spangram { border-color: #e8c46f; background: color-mix(in srgb,#efbd51 18%,var(--surface)); }
.strands-rule { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 10px; margin-top: 12px; }
.strands-rule-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 900; }
.strands-rule-mark.strands-rule-gold { background: #fff1ce; color: #93640b; }
.strands-rule-mark.strands-rule-green { background: var(--green-soft); color: var(--green); }
html[data-theme="dark"] .strands-rule-mark.strands-rule-gold { background: #43351a; color: #f3cf78; }
.strands-rule p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.strands-rule strong { color: var(--ink); font-size: 12px; }
.strands-tip-card { background: linear-gradient(145deg,var(--surface),var(--blue-soft)) !important; }
.strands-tip-card .tiny-link { display: inline-flex; margin-top: 7px; font-size: 11px; font-weight: 850; }
.strands-guide { margin-top: 0 !important; }
.strands-guide .steps-grid { margin-top: 18px; }
.strands-guide > p:last-child { margin-top: 18px; font-size: 13px; }
html[data-theme="dark"] .strands-intro { background: linear-gradient(125deg,var(--surface) 0%,var(--surface) 62%,var(--blue-soft) 100%); }
html[data-theme="dark"] .strands-cell.is-spangram { border-color: #d29b2e; background: #c79c43; color: #171b22; }

/* Helpful page FAQs: native disclosure controls with gradual, reduced-motion-safe reveals. */
.page-faq { max-width: 1040px; margin: 42px auto 0; padding: clamp(22px,3vw,34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.page-faq-heading { max-width: 760px; margin-bottom: 20px; }
.page-faq-heading h2 { margin: 0 0 8px !important; font-size: clamp(24px,3vw,32px) !important; }
.page-faq-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.page-faq-list { display: grid; gap: 9px; }
.page-faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.page-faq-item summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 800; line-height: 1.45; list-style: none; }
.page-faq-item summary::-webkit-details-marker { display: none; }
.page-faq-item summary::marker { content: ""; }
.page-faq-item summary svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.page-faq-item[open] summary { color: var(--blue); }
.page-faq-item[open] summary svg { transform: rotate(180deg); stroke: var(--blue); }
.page-faq-answer { padding: 0 16px 15px; }
.page-faq-answer p { max-width: 850px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
html.has-scroll-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.has-scroll-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.page-faq-item[data-reveal]:nth-child(2) { transition-delay: .04s; }
.page-faq-item[data-reveal]:nth-child(3) { transition-delay: .08s; }
.page-faq-item[data-reveal]:nth-child(4) { transition-delay: .12s; }
.page-faq-item[data-reveal]:nth-child(5) { transition-delay: .16s; }
.page-faq-item[data-reveal]:nth-child(6) { transition-delay: .2s; }

.mobile-navigation { display: none; }
.mobile-navigation > summary { list-style: none; cursor: pointer; }
.mobile-navigation > summary::-webkit-details-marker { display: none; }
.mobile-navigation > summary::marker { content: ""; }
.mobile-navigation[open] .menu-icon-open { display: none; }
.mobile-navigation .menu-icon-close { display: none; }
.mobile-navigation[open] .menu-icon-close { display: block; }
.mobile-nav-panel { display: none; }
@media (max-width: 900px) {
  .site-header .bar { gap: 10px !important; }
  nav.main { display: none !important; }
  .site-header .mobile-navigation { display: block; position: static; }
  .site-header .mobile-menu-toggle { display: inline-flex !important; min-width: 42px !important; min-height: 42px !important; list-style: none; cursor: pointer; }
  .site-header .mobile-menu-toggle svg { display: block; width: 18px; height: 18px; }
  .site-header .nav-actions { margin-left: auto; }
  .site-header .nav-cta { min-height: 41px; }
  .mobile-nav-panel {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 140;
    display: none !important; gap: 18px; max-height: min(78vh,720px); overflow: auto;
    padding: 16px max(18px,calc((100vw - 760px)/2)) 22px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: var(--surface); box-shadow: var(--shadow-lg); animation: nav-dropdown-in .15s ease-out;
  }
  .site-header .mobile-navigation[open] > .mobile-nav-panel { display: grid !important; }
  .mobile-nav-top { display: flex; flex-wrap: wrap; gap: 8px; }
  .mobile-nav-all { display: inline-flex; min-height: 41px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--page-alt); color: var(--ink); font-size: 12px; font-weight: 850; }
  .mobile-nav-section { display: grid; gap: 7px; }
  .mobile-nav-section h2 { margin: 0 0 1px; color: var(--muted-2); font-size: 10px !important; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-nav-section .nav-dropdown-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mobile-nav-section .nav-dropdown-link { min-height: 44px; padding: 10px 11px; border: 1px solid var(--line); background: var(--surface-raised); }
  .mobile-nav-section .nav-dropdown-link-title { font-size: 12px; }
}
@media (max-width: 620px) {
  .site-header .brand-logo { width: 37px; height: 37px; }
  .site-header .brand-text { font-size: 20px !important; }
  .site-header .bar { min-height: 65px !important; }
  .site-header .nav-actions { gap: 5px; }
  .site-header .theme-toggle { min-width: 39px !important; width: 39px !important; padding: 0 !important; }
  .site-header .theme-toggle span { display: none; }
  .site-header .nav-cta { min-height: 39px; padding-inline: 10px; font-size: 10px; }
  .site-header .mobile-menu-toggle { min-width: 39px !important; min-height: 39px !important; padding: 0 !important; }
  .mobile-nav-section .nav-dropdown-list { grid-template-columns: 1fr; }
  .mobile-nav-section .nav-dropdown-link { min-height: 44px; }
  .site-breadcrumb { margin-bottom: 15px; }
  .strands-intro { padding: 22px 17px; border-radius: 18px; }
  .strands-layout { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .strands-board-card { padding: 16px 12px; }
  .strands-side-panel { grid-template-columns: 1fr; }
  .strands-grid { gap: 4px; width: 100%; }
  .strands-cell { border-radius: 7px; font-size: clamp(12px,4vw,17px); }
  .strands-stats-strip { gap: 5px; }
  .strands-stats-strip > div { padding: 8px 7px; }
  .strands-stats-strip strong { font-size: 17px; }
  .strands-stats-strip span { font-size: 9px; }
  .strands-progress-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .strands-progress-head span { text-align: left; }
  .page-faq { margin-top: 26px; padding: 18px 13px; border-radius: 17px; }
  .page-faq-item summary { min-height: 54px; padding: 11px 12px; font-size: 12px; }
  .page-faq-answer { padding: 0 12px 13px; }
  .page-faq-answer p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown, .mobile-nav-panel { animation: none !important; }
  .nav-trigger, .nav-chevron, .nav-dropdown-link, .strands-cell, .strands-progress-track span, .page-faq-item summary svg { transition: none !important; }
  html.has-scroll-reveal [data-reveal], html.has-scroll-reveal [data-reveal].is-visible { opacity: 1; transform: none; transition: none; }
  .strands-cell.is-hinted { animation: none; }
}


/* Strands page refinements: compact intro, separated facts, and a concise how-to row. */
.strands-page { gap: 17px; }
.strands-intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 5px 2px 16px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.strands-intro::after { display: none; }
.strands-intro-copy { min-width: 0; }
.strands-intro h1 {
  margin: 0 0 5px !important;
  font-size: clamp(32px,4vw,42px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.06em !important;
}
.strands-intro-copy > p {
  max-width: 620px;
  margin: 0 !important;
  color: var(--muted);
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.strands-intro-meta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  margin: 0;
}
.strands-intro-meta > span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}
.strands-meta-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
}
.strands-meta-label { display: block; }

.strands-guide {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  align-items: center;
  gap: 20px;
  margin: 0 !important;
  padding: 18px 21px;
  border: 1px solid var(--line) !important;
  border-radius: 17px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm) !important;
}
.strands-guide-heading .section-kicker { margin-bottom: 6px !important; }
.strands-guide-heading h2 {
  margin: 0 !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
}
.strands-steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.strands-step {
  display: grid;
  grid-template-columns: 29px minmax(0,1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 3px 14px;
  border-left: 1px solid var(--line);
}
.strands-step:first-child { border-left: 0; }
.strands-step-number {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: "Manrope",sans-serif;
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.strands-step h3 {
  margin: 1px 0 4px !important;
  color: var(--ink) !important;
  font-family: "DM Sans",sans-serif !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
}
.strands-step p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}
html[data-theme="dark"] .strands-guide { background: var(--surface) !important; }
@media (max-width: 1040px) {
  .strands-intro { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .strands-intro-meta { justify-content: flex-start; }
  .strands-guide { grid-template-columns: 1fr; gap: 12px; }
  .strands-steps { border-top: 1px solid var(--line); padding-top: 12px; }
  .strands-step:first-child { padding-left: 0; }
}
@media (max-width: 700px) {
  .strands-page { gap: 13px; }
  .strands-intro { gap: 9px; padding: 1px 0 12px; }
  .strands-intro h1 { font-size: 31px !important; }
  .strands-intro-copy > p { max-width: 100%; font-size: 12px !important; }
  .strands-intro-meta { gap: 6px; }
  .strands-intro-meta > span { min-height: 31px; padding: 4px 7px 4px 5px; font-size: 9px; }
  .strands-meta-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .strands-guide { padding: 15px 13px; gap: 9px; }
  .strands-guide-heading h2 { font-size: 19px !important; }
  .strands-steps { grid-template-columns: 1fr; gap: 0; padding-top: 5px; }
  .strands-step, .strands-step:first-child {
    grid-template-columns: 27px minmax(0,1fr);
    padding: 11px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .strands-step:first-child { border-top: 0; }
  .strands-step h3 { font-size: 12px !important; }
  .strands-step p { font-size: 11px !important; }
}