/* Figma-analysis tokens (DESIGN.md): monochrome chrome, pill buttons, pastel color blocks.
   The only saturated colors on a page belong to the puzzle itself (cube stickers, pieces). */
:root {
  --canvas: #ffffff; --soft: #f7f7f5; --soft-2: #efefec; --line: #e6e6e6; --line-soft: #f1f1f1; --line-strong: #000000;
  --ink: #000000; --body: #1f1f1f; --muted: #5c5c5c; --subtle: #707070;
  --primary: #000000; --on-primary: #ffffff; --link: #000000;
  --lime: #dceeb1; --lilac: #c5b0f4; --cream: #f4ecd6; --mint: #c8e6cd; --pink: #efd4d4; --coral: #f3c9b6; --navy: #1f1d3d;
  --tint-ink: #000000;
  --magenta: #ff3d8b; --ok: #17803a; --err: #c4271b; --warn: #8f5d10;
  --inv: #000000; --inv-2: #1c1c1c; --inv-ink: #ffffff; --inv-muted: #b3b3b3;
  --focus: #6d4aff;
  /* Cube stickers (standard color scheme). Kept in both themes. */
  --st-w: #ffffff; --st-y: #ffd500; --st-r: #c41e3a; --st-o: #ff5800; --st-b: #0051ba; --st-g: #009e60; --st-x: #3a3a3a;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-sm: 6px; --r-md: 8px; --r-lg: 24px; --pill: 50px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0d0d0d; --soft: #181818; --soft-2: #232323; --line: #2c2c2c; --line-soft: #1f1f1f; --line-strong: #ffffff;
    --ink: #ffffff; --body: #e6e6e6; --muted: #a6a6a6; --subtle: #8f8f8f; --primary: #ffffff; --on-primary: #000000; --link: #ffffff;
    --ok: #3ccf6b; --err: #ff6b5e; --warn: #e0a84a;
    --inv: #000000; --inv-2: #1c1c1c; --focus: #a58bff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0d0d0d; --soft: #181818; --soft-2: #232323; --line: #2c2c2c; --line-soft: #1f1f1f; --line-strong: #ffffff;
  --ink: #ffffff; --body: #e6e6e6; --muted: #a6a6a6; --subtle: #8f8f8f; --primary: #ffffff; --on-primary: #000000; --link: #ffffff;
    --ok: #3ccf6b; --err: #ff6b5e; --warn: #e0a84a;
  --inv: #000000; --inv-2: #1c1c1c; --focus: #a58bff; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--body); font: 400 17px/1.5 var(--font); letter-spacing: -0.15px; font-feature-settings: "kern"; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 12px; color: var(--ink); }
h2 { font-size: 30px; font-weight: 540; line-height: 1.2; letter-spacing: -0.5px; margin-top: 56px; }
h3 { font-size: 21px; font-weight: 600; line-height: 1.35; margin-top: 28px; letter-spacing: -0.2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--primary); color: var(--on-primary); padding: 8px 14px; border-radius: var(--pill); z-index: 10; }
.tnum, .num { font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }

/* Header: logo, section menus (mega panels on desktop, accordion panel on phones), search, language, theme */
.top { background: var(--canvas); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line-soft); }
.top-in { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; flex: none; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo .wm { font-size: 19px; font-weight: 400; letter-spacing: -0.5px; white-space: nowrap; }
.logo .wm b { font-weight: 700; }
.nav { flex: 1; min-width: 0; }
.nav-list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-top { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 480; padding: 0 14px; min-height: 40px; border-radius: var(--pill);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; user-select: none; }
.nav-top::-webkit-details-marker { display: none; }
.nav-top:hover, .nav-sec[open] > .nav-top { background: var(--soft); }
.nav-top.is-current { background: var(--ink); color: var(--canvas); }
.caret { width: 12px; height: 12px; flex: none; transition: transform .15s; }
details[open] > summary .caret { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--canvas); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0,0,0,.08); }
.mega-in { padding-top: 20px; padding-bottom: 20px; }
.mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 24px; }
.mega-h { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 6px; }
.mega ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.mega li a { display: flex; align-items: center; min-height: 36px; padding: 4px 10px; margin: 0 -10px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; font-size: 15px; }
.mega li a:hover { background: var(--soft); }
.mega li a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mega-foot { margin: 14px 0 0; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.mega-all { font-weight: 600; color: var(--ink); display: inline-flex; min-height: 40px; align-items: center; }
.hdr-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.icon-btn { background: var(--soft); border: 0; color: var(--ink); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; flex: none; text-decoration: none; list-style: none; }
.icon-btn:hover { background: var(--soft-2); }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn svg { width: 19px; height: 19px; }
/* theme button: icon + the mode it switches to ("Dark" / "Light") on wider screens, icon only on phones */
.theme-btn .i-sun, .theme-btn .tb-l { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
@media (min-width: 761px) {
  .theme-btn { width: auto; padding: 0 14px 0 12px; gap: 6px; border-radius: var(--pill); font-size: 14px; font-weight: 500; white-space: nowrap; }
  .theme-btn .tb-to-dark { display: inline; }
  :root[data-theme="dark"] .theme-btn .tb-to-dark { display: none; }
  :root[data-theme="dark"] .theme-btn .tb-to-light { display: inline; }
}
@media (min-width: 761px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .tb-to-dark { display: none; }
  :root:not([data-theme="light"]) .theme-btn .tb-to-light { display: inline; }
}
/* 961 to 1199 px: the full section menu shares the bar, so the theme button goes back to icon only, the wordmark hides
   (the logo tile stays and keeps its label) and menu items tighten; long menus (es, nl) fit from 961 px */
@media (min-width: 961px) and (max-width: 1199px) {
  .logo .wm { display: none; }
  .nav-top { padding: 0 11px; }
  .theme-btn { width: 44px; padding: 0; border-radius: 50%; }
  .theme-btn .tb-l, :root[data-theme="dark"] .theme-btn .tb-l { display: none; }
}
@media (min-width: 961px) and (max-width: 1199px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .tb-l { display: none; }
}
.lang { position: relative; }
.lang-btn { width: auto; min-width: 44px; padding: 0 12px; border-radius: var(--pill); gap: 4px; font: 600 13px/1 var(--mono); letter-spacing: .4px; }
.lang-btn .caret { width: 10px; height: 10px; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; list-style: none; margin: 0; padding: 6px; background: var(--canvas);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 12px 28px rgba(0,0,0,.14); z-index: 50; }
.lang-menu a { display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.lang-menu a:hover { background: var(--soft); }
.lang-menu a[aria-current] { font-weight: 600; background: var(--soft); }
.lang-menu small { color: var(--muted); font-size: 13px; }
.menu-btn { display: none; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .mb-close, .menu-btn[aria-expanded="true"] .mb-open { display: none; }
.menu-btn[aria-expanded="true"] .mb-close { display: inline; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: fixed; top: 61px; left: 0; right: 0; bottom: 0; background: var(--canvas); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 16px 32px; border-top: 1px solid var(--line-soft); z-index: 45; }
  .nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; max-width: 640px; margin: 0 auto; }
  .nav-list > li { border-bottom: 1px solid var(--line-soft); }
  .nav-top { display: flex; width: 100%; justify-content: space-between; min-height: 52px; padding: 0 8px; border-radius: var(--r-md); font-size: 17px; font-weight: 540; }
  .nav-top.is-current { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
  .nav-sec[open] > .nav-top { background: transparent; }
  .mega { position: static; border: 0; box-shadow: none; background: transparent; }
  .mega-in { padding: 0 8px 12px; }
  .mega-cols { grid-template-columns: 1fr; gap: 12px; }
  .mega li a { min-height: 44px; font-size: 16px; }
  .mega-foot { border: 0; margin-top: 4px; padding-top: 0; }
  .mega-all { min-height: 44px; }
  :root.menu-open, :root.menu-open body { overflow: hidden; }
}
@media (max-width: 420px) {
  .logo .wm { display: none; }
  .top-in { gap: 8px; }
}
:root.search-open, :root.search-open body { overflow: hidden; }

/* Search dialog */
.srch { padding: 0; border: 0; background: transparent; width: min(640px, calc(100% - 32px)); max-width: none; margin: 10vh auto auto; color: var(--ink); }
.srch::backdrop { background: rgba(0,0,0,.45); }
.srch-box { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden; }
.srch-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.srch-bar svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.srch-bar:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }
.srch-bar input:focus-visible { outline: none; }
.srch-bar input { border: 0; box-shadow: none !important; padding: 8px 0; font-size: 18px; background: transparent; min-height: 44px; }
.srch-bar input::-webkit-search-cancel-button { display: none; }
.srch-list { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 480px); overflow-y: auto; }
.srch-list [role="option"] a { display: block; padding: 10px 12px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; min-height: 44px; }
.srch-list [role="option"] b { display: block; font-weight: 600; font-size: 16px; }
.srch-list [role="option"] span { display: block; font-size: 14px; color: var(--muted); }
.srch-list [aria-selected="true"] a, .srch-list [role="option"] a:hover { background: var(--soft); }
.srch-tag { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px 6px; margin-left: 6px; vertical-align: 2px; }
.srch-cap { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 8px 12px 4px; }
.srch-empty { padding: 16px 12px; color: var(--muted); font-size: 15px; }
.srch-help { margin: 0; padding: 8px 18px 12px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line-soft); }
@media (max-width: 600px) { .srch { margin-top: 12px; } .srch-help { display: none; } }

/* Hero: a pastel color block per section (Figma "color-block section") */
.hero { padding: 16px 0 0; }
.hero .wrap > .hero-in, .hero .wrap { position: relative; }
.hero.tint-lime .wrap, .hero.tint-lilac .wrap, .hero.tint-mint .wrap, .hero.tint-cream .wrap, .hero.tint-pink .wrap, .hero.tint-coral .wrap { padding-top: 0; }
.hero-block { border-radius: var(--r-lg); padding: 32px 32px 28px; background: var(--soft); color: var(--tint-ink); }
.tint-lime .hero-block { background: var(--lime); } .tint-lilac .hero-block { background: var(--lilac); }
.tint-mint .hero-block { background: var(--mint); } .tint-cream .hero-block { background: var(--cream); }
.tint-pink .hero-block { background: var(--pink); } .tint-coral .hero-block { background: var(--coral); }
.hero h1 { font-weight: 600; font-size: 52px; line-height: 1.04; letter-spacing: -1.5px; color: var(--tint-ink); margin: 0 0 12px; max-width: 860px; }
.lede { font-size: 19px; line-height: 1.45; font-weight: 400; color: #1f1f1f; max-width: 760px; margin: 0; }
.hero-block a { color: #000; } .tint-none .hero-block a, .tint-none .crumbs [aria-current] { color: var(--ink); }
.tint-none .lede { color: var(--muted); } .tint-none h1 { color: var(--ink); }
.crumbs { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 14px; color: #333; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.crumbs li { display: inline-flex; align-items: center; min-height: 24px; }
.crumbs li + li::before { content: "/"; padding: 0 8px; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: #000; }
.tint-none .crumbs { color: var(--muted); }
@media (max-width: 760px) {
  .hero-block { padding: 22px 18px 20px; border-radius: 18px; }
  .hero h1 { font-size: 34px; letter-spacing: -0.8px; } .lede { font-size: 16px; }
}
/* Tool pages on phones: a compact hero so the tool starts in the first screen. The h1 and the full lede stay in the
   HTML; only the section link of the breadcrumb shows, and the lede is clamped to two lines with a Read more toggle
   (added by ui.js when the text is longer). */
@media (max-width: 760px) {
  .hero-tool { padding-top: 8px; }
  .hero-tool .hero-block { padding: 12px 16px 12px; border-radius: 16px; }
  .hero-tool .crumbs { font-size: 11px; margin-bottom: 4px; }
  .hero-tool .crumbs li { min-height: 20px; }
  .hero-tool .crumbs li:first-child, .hero-tool .crumbs li:last-child:not(:nth-child(2)) { display: none; }
  .hero-tool .crumbs li:nth-child(2)::before { content: none; }
  .hero-tool h1 { font-size: 24px; line-height: 1.15; letter-spacing: -0.4px; margin: 0 0 4px; }
  .hero-tool .lede { font-size: 15px; line-height: 1.4; }
  .js .hero-tool .lede:not(.open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .hero-tool ~ .tool { padding-top: 12px; }
  .lede-more { display: inline-block; margin-top: 2px; padding: 4px 0; min-height: 28px; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.4; color: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }
}
@media (min-width: 761px) { .lede-more { display: none; } }

/* Tool area */
.tool { padding: 20px 0 8px; }
.panel { background: var(--soft); border-radius: var(--r-lg); padding: 24px; }
.panel.plain { background: var(--canvas); border: 1px solid var(--line); }
.panel + .panel { margin-top: 16px; }
@media (max-width: 760px) { .panel { padding: 16px; border-radius: 18px; } }
.panel-h { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 12px; }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .label { font-size: 13px; color: var(--muted); font-weight: 500; }
input[type=text], input[type=number], input[type=search], select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 14px; min-height: 46px; width: 100%; font-variant-numeric: tabular-nums;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
input.bad, .bad-cell { border-color: var(--err) !important; box-shadow: 0 0 0 1px var(--err) !important; }
input::placeholder, textarea::placeholder { color: var(--subtle); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
label.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }

/* Buttons: pill is the only shape */
.btn { font: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.1px; border: 0; border-radius: var(--pill); min-height: 44px; padding: 10px 20px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { opacity: .86; }
.btn-secondary { background: var(--canvas); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-secondary:hover:not(:disabled) { background: var(--soft); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover:not(:disabled) { background: var(--soft-2); }
.btn-soft { background: var(--canvas); color: var(--ink); }
.panel .btn-soft { background: var(--canvas); } .btn-soft:hover:not(:disabled) { background: var(--soft-2); }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.btn-icon { width: 44px; padding: 0; border-radius: 50%; }
.btn-icon.btn-sm { width: 36px; }
.btn-icon svg { width: 18px; height: 18px; }
.btn-promo { background: var(--magenta); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }

/* Segmented pills (tabs, modes) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--canvas); padding: 4px; border-radius: var(--pill); border: 1px solid var(--line); }
.seg button { font: inherit; font-size: 14px; font-weight: 500; background: transparent; border: 0; color: var(--ink); padding: 7px 16px; border-radius: var(--pill); cursor: pointer; min-height: 36px; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--canvas); }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; }
.tabs button { font: inherit; font-size: 15px; font-weight: 500; background: transparent; border: 1px solid var(--line); color: var(--ink); padding: 8px 18px; border-radius: var(--pill); cursor: pointer; white-space: nowrap; min-height: 40px; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 14px; background: var(--canvas); color: var(--ink); border: 1px solid var(--line); border-radius: var(--pill); min-height: 36px; padding: 6px 14px; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* Results and messages */
.result { background: var(--canvas); border-radius: var(--r-md); padding: 16px 20px; margin-top: 16px; border: 1px solid var(--line); }
.result .big { font-size: 40px; font-weight: 600; letter-spacing: -1px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.result .cap { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-top: 4px; }
.msg { border-radius: var(--r-md); padding: 12px 16px; margin-top: 12px; font-size: 15px; background: var(--canvas); border: 1px solid var(--line); }
.msg.ok { background: var(--mint); border-color: transparent; color: #0b3d1a; }
.msg.err { background: var(--pink); border-color: transparent; color: #5c0e0e; }
.msg.info { background: var(--cream); border-color: transparent; color: #3b2f10; }
/* pastel message boxes keep dark ink in both themes, including their links and ghost buttons */
.msg.ok a, .msg.err a, .msg.info a, .msg.ok .btn-ghost, .msg.err .btn-ghost, .msg.info .btn-ghost { color: #000; }
.msg.ok .btn-ghost:hover, .msg.err .btn-ghost:hover, .msg.info .btn-ghost:hover { background: rgba(0,0,0,.08); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.tile { background: var(--canvas); border-radius: var(--r-md); padding: 12px 14px; border: 1px solid var(--line); }
.tile b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile span { font-size: 13px; color: var(--muted); }
details.how { margin-top: 12px; background: var(--canvas); border-radius: var(--r-md); padding: 0 16px; border: 1px solid var(--line); }
details.how summary { cursor: pointer; padding: 12px 0; font-size: 15px; font-weight: 500; }
details.how > div { font-size: 15px; padding-bottom: 12px; }
.note { font-size: 14px; color: var(--muted); margin-top: 12px; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* Move list (cube and step-by-step solutions) */
.moves { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.moves li { padding: 4px 10px; border-radius: var(--r-sm); background: var(--canvas); border: 1px solid var(--line); cursor: pointer; min-width: 40px; text-align: center; }
.moves li.done { color: var(--subtle); }
.moves li.cur { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
table.data thead th { font-family: var(--mono); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }

/* Content */
.content { padding: 8px 0 16px; }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--body); }
.prose img, .prose svg { max-width: 100%; height: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 17px; color: var(--ink); }
.faq p { margin: 0 0 16px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card { background: var(--soft); border-radius: var(--r-md); padding: 18px; text-decoration: none; color: var(--ink); min-height: 96px; transition: background .15s; }
.card:hover { background: var(--soft-2); }
.card b { display: block; font-weight: 600; font-size: 17px; margin-bottom: 4px; letter-spacing: -0.2px; }
.card span { font-size: 14px; color: var(--muted); }
.hub-section { padding: 8px 0 32px; }
.wrap.hub-section { padding: 8px 16px 32px; }
.hub-section h2 a { color: inherit; text-decoration: none; }
.hub-section h2 a:hover { text-decoration: underline; }
.hub-group + .hub-group { margin-top: 8px; }
.hub-sub { font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 28px 0 10px; line-height: 1.4; }
.hub-section > .hub-group:first-child .hub-sub { margin-top: 8px; }
.hub-more { margin-top: 24px; }
.flangs { font-size: 14px; }
.sources { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 32px; }
.block { border-radius: var(--r-lg); padding: 32px; margin: 32px 0; }
.block.lime { background: var(--lime); } .block.lilac { background: var(--lilac); } .block.mint { background: var(--mint); } .block.cream { background: var(--cream); } .block.navy { background: var(--navy); color: #fff; }
.block, .block p { color: #000; } .block.navy, .block.navy p, .block.navy h2 { color: #fff; }
.block h2 { margin-top: 0; color: inherit; }
.block a:not(.btn) { color: #000; } .block.navy a:not(.btn) { color: #fff; }
.block .btn-primary { background: #000; color: #fff; }

/* Footer: black, Figma inverse canvas */
.foot { background: var(--inv); color: var(--inv-muted); padding: 56px 0 32px; margin-top: 56px; font-size: 15px; }
.foot-h { color: var(--inv-ink); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 10px; }
.foot-h a { color: inherit; text-decoration: none; }
.foot ul { list-style: none; margin: 0 0 24px; padding: 0; }
.foot li { padding: 3px 0; }
.foot a { color: var(--inv-muted); text-decoration: none; }
.foot a:hover { color: var(--inv-ink); text-decoration: underline; }
.foot .fmore a { color: var(--inv-ink); font-weight: 600; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.finfo { margin: 0 0 16px; }
.fine { border-top: 1px solid var(--inv-2); padding-top: 16px; font-size: 13px; }
.fine p { margin: 4px 0; }

/* Cookie notice */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; background: var(--canvas); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 15px; }
.consent p { margin: 0 0 10px; }
.consent-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--canvas); padding: 10px 18px; border-radius: var(--pill); font-size: 15px; z-index: 70; }

/* Reserve space for script-rendered output (CLS) */
[id$="-out"]:empty { min-height: 80px; }
/* Every tool draws its board with deferred JS. Until those scripts have run (DOMContentLoaded), the tool keeps its
   layout box but is not painted, so a first paint with an empty board never turns into a layout shift when the board
   appears. Measured before this rule on a first visit at 375 px: CLS 0.38 on the 2x2 solver, 0.21 on the sudoku solver. */
.tool.js-pending { visibility: hidden; }
/* Cube 3D views: CubeView sets height = 1.75 x clamp(width / 1.8, 130, 250) px; reserve the same box. */
.tool [id$="-3d"]:empty { aspect-ratio: 36 / 35; min-height: 228px; max-height: 438px; }

.print-only { display: none; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .top, .foot, .content, .actions, .no-print, .crumbs, .lede, .tabs, .seg, .consent, .theme-btn { display: none !important; }
  .print-only { display: block; }
  .hero-block { background: none !important; padding: 0; } .hero h1 { font-size: 20pt; }
  .panel { background: #fff; padding: 0; }
}

/* Logo mark: lift the black tile off the dark header */
:root[data-theme="dark"] .logo svg > rect:first-of-type { fill: #262626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo svg > rect:first-of-type { fill: #262626; } }

/* Long menu groups (e.g. puzzles to play) flow into two columns */
.mega-col.wide { grid-column: span 2; }
.mega-col.wide ul { columns: 2; column-gap: 24px; }
.mega-col.wide li { break-inside: avoid; }
@media (max-width: 960px) { .mega-col.wide { grid-column: auto; } .mega-col.wide ul { column-gap: 16px; } }