@font-face { font-family: "Geist"; src: url("fonts/geist.woff2?v=19f9c92546aa") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2?v=684ad5b531f8") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

  :root {
    --page: 0 0% 100%; --background: 0 0% 100%; --foreground: 220 13% 9%; --card: 0 0% 100%; --popover: 0 0% 100%;
    --primary: 220 13% 9%; --primary-foreground: 240 14% 98.6%; --secondary: 220 18% 96.7%; --secondary-foreground: 220 13% 9%;
    --muted: 220 18% 96.7%; --muted-foreground: 225 2% 41%; --accent: 220 6% 93.3%; --accent-foreground: 220 13% 9%;
    --border: 225 4% 89.6%; --input: 225 4% 86%; --ring: 220 13% 9%; --brand: 42 92% 36%; --star: 38 92% 50%; --success: 142 72% 29%; --destructive: 0 72% 45%;
    --price-low: 142 72% 25%; --price-high: 0 72% 45%; --knob: 0 0% 100%;
    --accent-fill: 42 89% 64%; --accent-fill-hover: 43 81% 56%; --accent-fill-foreground: 33 22% 8%;
    --hf-fill: 220 13% 9%; --hf-fill-hover: 220 9% 20%; --hf-fill-foreground: 0 0% 100%; --hf-edge: 220 13% 9%;
    --shadow: 0 1px 2px 0 rgb(20 22 26 / .04); --shadow-md: 0 8px 24px -8px rgb(20 22 26 / .16), 0 2px 6px -2px rgb(20 22 26 / .06);
    --radius: 9px; --head-h: 64px;
    /* "only": Mindket has its own dark theme, so a browser's forced dark (Minda's Auto Dark, Chrome's flag) leaves the light one alone.
       With a plain "light" it repainted the page and turned the gold cards' dark ink white (the owner, 2026-11-11: "dark font when dark mode"). */
    color-scheme: only light;
    --font: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "Geist Mono", ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --page: 0 0% 3.1%; --background: 0 0% 4.3%; --foreground: 40 13% 95.3%; --card: 30 7% 5.9%; --popover: 30 7% 5.9%;
    --primary: 42 89% 64%; --primary-foreground: 33 22% 8%; --secondary: 0 0% 11%; --secondary-foreground: 40 13% 95.3%;
    --muted: 30 4% 8%; --muted-foreground: 30 2% 60%; --accent: 0 0% 11%; --accent-foreground: 40 13% 95.3%;
    --border: 0 0% 12.5%; --input: 0 0% 16%; --ring: 42 89% 64%; --brand: 42 89% 64%; --star: 43 96% 56%; --success: 142 69% 58%; --destructive: 0 84% 66%;
    --price-low: 142 69% 58%; --price-high: 0 84% 66%; --knob: 40 13% 95.3%;
    --accent-fill: 42 89% 64%; --accent-fill-hover: 43 100% 73%; --accent-fill-foreground: 33 22% 8%;
    --hf-fill: 0 0% 13%; --hf-fill-hover: 0 0% 18%; --hf-fill-foreground: 40 13% 95.3%; --hf-edge: 0 0% 22%;
    --shadow: 0 1px 2px 0 rgb(0 0 0 / .5); --shadow-md: 0 8px 24px -8px rgb(0 0 0 / .7), 0 2px 6px -2px rgb(0 0 0 / .5); color-scheme: dark; } }
  :root[data-theme="dark"] {
    --page: 0 0% 3.1%; --background: 0 0% 4.3%; --foreground: 40 13% 95.3%; --card: 30 7% 5.9%; --popover: 30 7% 5.9%;
    --primary: 42 89% 64%; --primary-foreground: 33 22% 8%; --secondary: 0 0% 11%; --secondary-foreground: 40 13% 95.3%;
    --muted: 30 4% 8%; --muted-foreground: 30 2% 60%; --accent: 0 0% 11%; --accent-foreground: 40 13% 95.3%;
    --border: 0 0% 12.5%; --input: 0 0% 16%; --ring: 42 89% 64%; --brand: 42 89% 64%; --star: 43 96% 56%; --success: 142 69% 58%; --destructive: 0 84% 66%;
    --price-low: 142 69% 58%; --price-high: 0 84% 66%; --knob: 40 13% 95.3%;
    --accent-fill: 42 89% 64%; --accent-fill-hover: 43 100% 73%; --accent-fill-foreground: 33 22% 8%;
    --hf-fill: 0 0% 13%; --hf-fill-hover: 0 0% 18%; --hf-fill-foreground: 40 13% 95.3%; --hf-edge: 0 0% 22%;
    --shadow: 0 1px 2px 0 rgb(0 0 0 / .5); --shadow-md: 0 8px 24px -8px rgb(0 0 0 / .7), 0 2px 6px -2px rgb(0 0 0 / .5); color-scheme: dark; }
  *, *::before, *::after { box-sizing: border-box; border: 0 solid hsl(var(--border)); }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: hsl(var(--page)); color: hsl(var(--foreground)); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
  ::selection { background: hsl(var(--accent-fill) / .45); }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3, p, ul, ol, dl, dd, pre, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  .container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 16px; }
  @media (min-width: 768px) { .container { padding: 0 24px; } }
  .muted, .meta { color: hsl(var(--muted-foreground)); }
  .meta { font-size: 13px; }
  /* AI Hero's headings: bold, set tight, balanced over their lines */
  h1 { font-size: 34px; line-height: 1.05; font-weight: 700; letter-spacing: -.04em; overflow-wrap: anywhere; text-wrap: balance; }
  h2 { font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.028em; text-wrap: balance; }
  h3 { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
  @media (min-width: 768px) { h1 { font-size: 44px; } h2 { font-size: 26px; } }
  :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 4px; }
  h1[tabindex="-1"]:focus { outline: none; }

  /* Button */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius);
         font: 600 14px/1 var(--font); white-space: nowrap; cursor: pointer; background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
         box-shadow: var(--shadow); transition: background-color .15s, color .15s, border-color .15s, transform .1s; border: 1px solid transparent; }
  .btn:hover { background: hsl(var(--primary) / .9); }
  .btn:active { transform: scale(.98); }
  .btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
  .btn-secondary:hover { background: hsl(var(--secondary) / .8); }
  .btn-outline { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--input)); box-shadow: none; }
  /* AI Hero's gold: the one call to act on a page (Get, Buy, Search, Sell) */
  .btn-accent { background: hsl(var(--accent-fill)); color: hsl(var(--accent-fill-foreground)); font-weight: 700; }
  .btn-accent:hover { background: hsl(var(--accent-fill-hover)); }
  /* GitHub's own black under white words: a repository's Open on GitHub (the user, 2026-11-04: "make black btn and white color"); the page's
     ink and ground swapped, so dark shows it white under black words, never a black button lost on the black page */
  .btn-github { background: hsl(var(--foreground)); color: hsl(var(--background)); font-weight: 700; }
  .btn-github:hover { background: hsl(var(--foreground) / .85); }
  /* Hugging Face's yellow face on a dark button (the owner, 2026-11-10: "show haggingface logo"): the face is the site's gold, so the
     gold button would hide it; near-black in light, a raised dark grey with an edge in dark, so the face reads on both */
  .btn-hf { background: hsl(var(--hf-fill)); color: hsl(var(--hf-fill-foreground)); border-color: hsl(var(--hf-edge)); font-weight: 700; }
  .btn-hf:hover { background: hsl(var(--hf-fill-hover)); }
  .btn-outline:hover, .btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
  .btn-ghost { background: transparent; color: hsl(var(--foreground)); box-shadow: none; }
  .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
  .btn-lg { height: 46px; padding: 0 20px; font-weight: 700; }
  .btn-icon { width: 36px; height: 36px; padding: 0; }
  .btn-block { width: 100%; }
  /* A button that is not live yet (Open in Minda, Coming soon): readable, never pressed, no hover. */
  .btn-soon, .btn-soon:hover { color: hsl(var(--muted-foreground)); background: hsl(var(--card)); cursor: default; }
  .btn svg { width: 16px; height: 16px; flex: none; }

  /* Badge */
  .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 16px;
           background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); white-space: nowrap; }
  .badge-secondary, .chip { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
  .badge-outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
  .badge-brand { background: hsl(var(--brand) / .12); color: hsl(var(--brand)); }
  .badge-new { background: hsl(142 71% 45% / .12); color: hsl(142 64% 34%); }
  /* A home part's newest, its spotlight's Latest (the user, 2026-11-04: "use other suitable color for latest"): Mindket's gold under its ink */
  .badge-latest { background: hsl(var(--accent-fill)); color: hsl(var(--accent-fill-foreground)); }
  :root[data-theme="dark"] .badge-new { color: hsl(142 69% 58%); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-new { color: hsl(142 69% 58%); } }

  /* Card */
  .card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 3px); box-shadow: var(--shadow); min-width: 0; }
  .card-pad { padding: 24px; }
  @media (max-width: 640px) { .card-pad { padding: 16px; } }

  /* Input and Select */
  .input, select.input { height: 40px; width: 100%; min-width: 0; padding: 0 12px; border: 1px solid hsl(var(--input)); border-radius: var(--radius);
                          background: hsl(var(--card)); color: inherit; font: 400 14px/1 var(--font); box-shadow: var(--shadow); }
  /* Select, shadcn's (the owner, 2026-11-02, of the calculator's Model: "use shadcn ui design style for the dropdown and related component,
     the arrow too close to right, make standard design"): a chevron 12 px in from the right edge, drawn with borders on the field's label
     (MINDKET_CSP's img-src has no data:, so an SVG picture in CSS is blocked); where the browser lets a page draw the list (appearance:
     base-select), shadcn's popover under the field: a bordered card, 32 px rows, the row under the pointer tinted and a check after the
     chosen one, as the sort menu's .dd-menu. Elsewhere the browser's own list opens */
  select.input { appearance: none; padding-right: 40px; cursor: pointer; }
  .field:has(> select.input) { position: relative; }
  .field:has(> select.input)::after { content: ''; position: absolute; right: 17px; bottom: 19px; width: 7px; height: 7px; pointer-events: none;
                                      border: solid hsl(var(--muted-foreground)); border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
  @supports (appearance: base-select) {
    select.input, select.input::picker(select) { appearance: base-select; }
    select.input { display: flex; align-items: center; }
    select.input::picker-icon { display: none; }
    select.input::picker(select) { margin-top: 4px; padding: 4px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
                                   background: hsl(var(--popover)); color: hsl(var(--foreground)); box-shadow: var(--shadow-md); }
    select.input option { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: 4px; font-size: 14px; cursor: pointer; }
    select.input option:hover, select.input option:focus-visible { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); outline: none; }
    select.input option::checkmark { order: 1; margin-left: auto; padding-left: 12px; content: '✓'; font-size: 13px; }
    /* A long menu in groups (the calculator's models by maker): each group's name a quiet small line over its rows */
    select.input optgroup { padding-top: 4px; font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); }
    select.input optgroup option { font-weight: 400; color: hsl(var(--foreground)); }
  }
  .input:focus-visible { outline: none; box-shadow: 0 0 0 1px hsl(var(--ring)); }
  .input::placeholder { color: hsl(var(--muted-foreground)); }
  /* A switch, iOS style: a checkbox drawn as a pill whose knob slides across when on; keyboard and screen readers keep the checkbox */
  .switch { appearance: none; position: relative; flex: none; width: 36px; height: 22px; margin: 0; border-radius: 9999px; background: hsl(var(--input));
    cursor: pointer; transition: background-color .2s ease; }
  .switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 9999px; background: hsl(var(--knob));
    box-shadow: var(--shadow); transition: transform .2s ease; }
  .switch:checked { background: hsl(var(--success)); }
  .switch:checked::before { transform: translateX(14px); }
  .switch:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .switch, .switch::before { transition: none; } }
  .field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
  .search { position: relative; display: flex; gap: 8px; }
  .search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: hsl(var(--muted-foreground)); pointer-events: none; }
  .search .input { padding-left: 36px; }
  /* A big search (the store's, the home page's, Learn's) holds its button inside the field, at its right end (the owner, 2026-11-09: "the
     btn make it inside the search field"); the field leaves the button its room */
  .search-lg .input { height: 48px; padding-right: 112px; font-size: 16px; }
  .search-lg .btn { position: absolute; top: 6px; right: 6px; height: 36px; padding: 0 16px; border-radius: calc(var(--radius) - 2px); font-size: 14px; }

  /* Header */
  header.site { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / .9); backdrop-filter: blur(12px); }
  header.site .container { display: flex; align-items: center; gap: 12px; height: 64px; }
  /* A page opening in place (web/mindket-search.js go, KDD 507): the old page fades into the new in 180 ms with the header held
     still, a page that loads whole fades the same way where the browser can, and a 2 px bar runs along the top while a slow one comes */
  @view-transition { navigation: auto; }
  header.site { view-transition-name: mk-head; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
  html.mk-loading body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2px; background: hsl(var(--brand)); transform-origin: left;
                                 animation: mk-load 2s cubic-bezier(.1, .7, .3, 1) forwards; }
  @keyframes mk-load { from { transform: scaleX(.08); } to { transform: scaleX(.92); } }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
    html.mk-loading body::before { animation: none; transform: scaleX(.6); }
  }
  /* The header's logo, a fifth larger than it was (the owner, 2026-11-03: "then header logo here enlarge 20% overall"): 20 to 24 px type, the mark with it (em), an upload 26 to 31 px */
  .mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 24px; letter-spacing: -.035em; flex: none; }
  .mark img { height: 31px; width: auto; }
  /* The built-in wordmark (src/shared/mindket-mark.ts): the bars as tall as the letters, the i's dot gold */
  .mk-word { white-space: nowrap; } .mk-bars { display: inline-block; height: 0.864em; width: auto; flex: none; vertical-align: baseline; margin-right: 0.36em; } .mk-i { background-image: linear-gradient(#fdb700 35%, currentColor 35%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .mark-dark { display: none; }
  :root[data-theme="dark"] .mark-light { display: none; } :root[data-theme="dark"] .mark-dark { display: block; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-light { display: none; } :root:not([data-theme="light"]) .mark-dark { display: block; } }
  /* The theme toggle: the moon on a light page, the sun on a dark one (mindket-ui.ts themeToggle) */
  .theme-to-light { display: none; }
  :root[data-theme="dark"] .theme-to-dark { display: none; } :root[data-theme="dark"] .theme-to-light { display: inline-flex; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-to-dark { display: none; } :root:not([data-theme="light"]) .theme-to-light { display: inline-flex; } }
  nav.main { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
  /* Labels, not pills: the site's 9 px corners under the pointer, so the links never read as the header's buttons (the owner, 2026-11-10:
     "hover make label shape instead of btn shape"; pills since 2026-11-02, "change to ratio btn") */
  nav.main > a, nav.main > details > summary { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius);
                                               font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; white-space: nowrap; }
  nav.main > a:hover, nav.main > a[aria-current], nav.main > details > summary:hover, nav.main > details[open] > summary { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
  .head-search { flex: 1; max-width: 320px; margin-left: auto; }
  .head-search .input { height: 36px; }
  /* Search as you type (mindket-ui.ts suggestBox, web/mindket-search.js): a popover under the field */
  .suggest { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 480px); overflow: auto; padding: 4px;
             border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--popover)); color: hsl(var(--foreground)); box-shadow: var(--shadow-md);
             text-align: left; }
  .head-search .suggest { min-width: 360px; left: auto; }
  /* The cookie bar (web/mindket-search.js, KDD 487, 517): only once the admins turn Google Analytics or a Meta Pixel on, until the reader answers; three buttons, which wrap on a phone */
  .consent { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap;
             align-items: center; gap: 12px 16px; padding: 14px 16px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 3px);
             background: hsl(var(--popover)); color: hsl(var(--foreground)); box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.5; }
  .consent p { flex: 1 1 260px; margin: 0; }
  .consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
  @media (max-width: 480px) { .consent-actions { width: 100%; margin-left: 0; } .consent-actions .btn { flex: 1 1 auto; } }
  /* The footer's Cookie settings: a button that reads as the links around it */
  .foot-cols .linkbtn { padding: 0; border: 0; background: none; font: inherit; color: hsl(var(--muted-foreground)); cursor: pointer; text-align: left; }
  .foot-cols .linkbtn:hover { color: hsl(var(--foreground)); }
  .foot-cols .linkbtn[hidden] { display: none; }
  /* An A/B test's words (web/mindket-search.js, mindket-growth/experiments.ts): hidden until the script has put its arm in place, and shown anyway after 1.2 s, so a blocked script never hides them */
  [data-mk-exp] { visibility: hidden; animation: mk-show 0s 1.2s forwards; }
  @keyframes mk-show { to { visibility: visible; } }
  [data-mk-exp].mk-shown { visibility: visible; animation: none; }
  .sg-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: calc(var(--radius) - 2px); }
  .sg-item .thumb { width: 36px; height: 36px; }
  .sg-text { display: grid; min-width: 0; flex: 1; }
  .sg-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sg-name mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: hsl(var(--brand)); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .sg-meta { font-size: 13px; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sg-price { flex: none; font-size: 13px; font-weight: 600; }
  .sg-all { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 10px 8px; border-top: 1px solid hsl(var(--border)); border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
            font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); }
  .sg-all svg { width: 16px; height: 16px; }
  .sg-item:hover, .sg-all:hover, .suggest [aria-selected="true"] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
  .sg-none { padding: 12px 8px; font-size: 14px; color: hsl(var(--muted-foreground)); }
  /* The Adding page (mindket-routes.ts addPage, web/mindket-search.js, adding): one status line over a product page drawn as skeletons; the shimmer runs only while it works. The row under a search field that leads to it (.sg-add) */
  .sg-add .thumb { background: hsl(var(--brand) / .12); color: hsl(var(--brand)); }
  .sg-add .thumb svg { width: 18px; height: 18px; }
  .add [hidden] { display: none; }
  .add-status { display: flex; align-items: flex-start; gap: 12px; }
  .add-dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: hsl(var(--brand)); animation: add-pulse 1.4s ease-in-out infinite; }
  @keyframes add-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
  @keyframes add-in { from { opacity: 0; transform: translateY(3px); } }
  .add-lines { flex: 1; min-width: 0; display: grid; gap: 4px; }
  .add-step { font-size: 16px; line-height: 24px; font-weight: 600; }
  .add-step.add-in, .add-why.add-in { animation: add-in .25s ease; }
  .add-addr, .add-why { overflow-wrap: anywhere; }
  .add-addr a:hover { text-decoration: underline; }
  .add-acts { margin-top: 8px; }
  .add-acts:not(:has(> :not([hidden]))) { display: none; }
  .add-search { margin-top: 16px; }
  .add-idle .add-name { margin-top: 24px; }
  .add-head { margin: 20px 0 24px; }
  .add :is(.add-head .skeleton, .add-shot-sk, .add-about, .side) { transition: opacity .3s ease; }
  .add:is([data-state="failed"], [data-state="held"]) :is(.add-head .skeleton, .add-shot-sk, .add-about, .side) { opacity: .4; }
  .add[data-state="gate"] .add-dot, .add[data-state="held"] .add-dot, .add[data-state="live"] .add-dot { animation: none; }
  .add[data-state="failed"] .add-dot { animation: none; background: hsl(var(--destructive)); }
  .add:not([data-state="working"]):not([data-state="credits"]) .skeleton { animation: none; }
  .sk { display: block; height: 14px; border-radius: 6px; }
  .sk-title { width: min(420px, 100%); height: 28px; }
  .sk-title + .sk-title { width: min(240px, 60%); margin-top: 8px; }
  .add-chips .sk-chip { width: 72px; height: 22px; }
  .add-chips .sk-wide { width: 120px; }
  .add-shot { position: relative; display: grid; place-items: center; padding: 24px; width: 100%; max-height: 420px; aspect-ratio: 16 / 9; margin-bottom: 24px; border-radius: calc(var(--radius) + 3px); }
  .add-shot-sk { position: absolute; inset: 0; border-radius: inherit; }
  .add-shot > .add-status { position: relative; width: min(520px, 100%); box-shadow: 0 8px 24px hsl(var(--foreground) / .08); }
  .add-about, .add-side { display: grid; gap: 12px; }
  .sk-h2 { width: 180px; height: 22px; }
  .sk-gap { margin-top: 12px; }
  .sk-btn { height: 40px; border-radius: var(--radius); }
  .sk-end { margin-left: auto; }
  .add-side .kv { margin-top: 4px; }
  @media (prefers-reduced-motion: reduce) { .add-dot, .add-step.add-in, .add-why.add-in { animation: none; } .add :is(.add-head .skeleton, .add-shot-sk, .add-about, .side) { transition: none; } }
  .head-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  /* The header's theme toggle is round; Sign in and Sign up are one radio-style switch (the owner, 2026-11-02: "switch to ratio btn"): a
     pill track 40 px tall, Sign up filled, the fill on whichever of the two is pointed at or focused. The header has no Sell button
     (the user, 2026-11-06: "remove sell btn at header for mindket"): Sell is in the footer and at /sell */
  .head-end > .btn { border-radius: 9999px; }
  .auth-seg { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 3px; border: 1px solid hsl(var(--border)); border-radius: 9999px;
              background: hsl(var(--muted)); flex: none; }
  .auth-seg > a { display: inline-flex; align-items: center; height: 100%; padding: 0 16px; border-radius: 9999px; font: 600 14px/1 var(--font);
                  white-space: nowrap; color: hsl(var(--foreground)); transition: background-color .15s, color .15s; }
  .auth-seg > a:last-child, .auth-seg > a:is(:hover, :focus-visible) { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
  .auth-seg:has(> a:first-child:is(:hover, :focus-visible)) > a:last-child { background: transparent; color: hsl(var(--foreground)); }
  .auth-seg > a:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--ring)); }
  /* A signed-in reader's profile stands where the switch did (mindket-ui.ts profileSlot, web/mindket-search.js profile; the user, 2026-11-03:
     "if signed already, need to show the profile accordingly here as standard"): the same 40 px pill and track, so the header does not
     change height; a 32 px round avatar (the account's mascot, or the initial on a tint of the brand colour), the first name and a chevron, opening the menu */
  .auth-seg[hidden] { display: none; }
  .me { position: relative; flex: none; }
  .me-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 3px 12px 3px 3px; border: 1px solid hsl(var(--border)); border-radius: 9999px;
            background: hsl(var(--muted)); color: hsl(var(--foreground)); font: 600 14px/1 var(--font); cursor: pointer; transition: background-color .15s; }
  .me-btn:hover, .me-btn[aria-expanded="true"] { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
  .me-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--ring)); }
  .me-btn svg { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); transition: transform .15s; }
  .me-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .me-first { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .me-avatar { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; overflow: hidden;
               background: hsl(var(--brand) / .15); color: hsl(var(--brand)); font: 600 14px/1 var(--font); text-transform: uppercase; }
  .me-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* its picture or its mascot (shared/mindket-avatars.ts) over the initial, which shows only where neither is: none, or one that did not load */
  .me-avatar:has(> img:not([hidden])) > [data-me-initial] { visibility: hidden; }
  .me-menu { min-width: 240px; }
  .me-who { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; color: inherit; }
  a.me-who:hover, a.me-who:focus-visible { background: hsl(var(--accent)); outline: none; }
  .me-lines { display: grid; min-width: 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
  .me-lines > strong { font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  button.dd-item { width: 100%; border: 0; background: none; color: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; text-align: left; }
  button.dd-item:hover, button.dd-item:focus-visible { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
  .head-search + .head-end { margin-left: 0; }
  .phone-only { display: none; }
  /* Under 901 px the links move into the phone menu. The search field is never left out (the owner, 2026-11-06: "ensure all
     header have search bar"): under 1,024 px, where it would be squeezed to 50 px beside the links and buttons, it has a row of its own
     under them, as wide as the page, and the sticky bars under the header (--head-h) sit under both rows */
  @media (max-width: 900px) { nav.main, .head-end .wide { display: none; } .phone-only { display: block; } }
  @media (max-width: 1023px) {
    :root { --head-h: 96px; }
    header.site .container { flex-wrap: wrap; height: auto; padding-block: 8px; row-gap: 8px; }
    header.site .mark { height: 36px; }
    .head-search { order: 1; flex: 1 0 100%; max-width: none; }
    .head-search + .head-end { margin-left: auto; order: 0; }
    .head-search .suggest { min-width: 0; left: 0; }
  }
  /* Row 1 is 36 px tall under 901 px (the links are in the menu) and 40 px above it (the sign-in switch's) */
  @media (min-width: 901px) and (max-width: 1023px) { :root { --head-h: 100px; } }

  /* DropdownMenu: a <details> with its popover */
  details.dd { position: relative; }
  details.dd > summary { list-style: none; }
  details.dd > summary::-webkit-details-marker { display: none; }
  .dd-menu { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; min-width: 200px; max-height: 70vh; overflow: auto; padding: 4px; border-radius: calc(var(--radius) - 2px);
             border: 1px solid hsl(var(--border)); background: hsl(var(--popover)); color: hsl(var(--foreground)); box-shadow: var(--shadow-md); }
  .dd-menu.end { left: auto; right: 0; }
  .dd-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: 4px; font-size: 14px; white-space: nowrap; cursor: pointer; }
  .dd-item:hover, .dd-item:focus-visible { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); outline: none; }
  .dd-item[aria-current]::after { content: '✓'; margin-left: auto; padding-left: 12px; font-size: 13px; }
  .dd-label { padding: 6px 8px; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
  .dd-sep, hr.sep { height: 1px; margin: 4px -4px; background: hsl(var(--border)); border: 0; }
  hr.sep { margin: 0; }
  /* The language menu (mindket-ui.ts langMenu): the globe, the page's language and a chevron, as tall as the theme toggle beside it */
  .lang-menu > summary { height: 36px; gap: 6px; padding: 0 10px; font-weight: 500; border-radius: 9999px; }
  .lang-menu > summary svg:last-child { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); }
  .lang-menu[open] > summary { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
  .lang-menu .dd-menu { min-width: 168px; }
  /* Beside the header's search field there is room for the name only from 1,280 px: under it the globe and chevron alone, so the field stays readable */
  @media (max-width: 1279px) { .head-search + .head-end .lang-name { display: none; } .head-search + .head-end .lang-menu > summary { padding: 0 8px; } }
  /* Discover, named Categories until 2026-11-08 (mindket-ui.ts categoriesMenu), Stripe's (the user, 2026-11-03: "improve the header dropdown", replacing 2026-10-31's Apify
     card and marks in bordered squares): one panel as wide as the header, hung from its bottom edge; a column per group,
     its title over a rule, each link its name in the brand ink over a muted line of what it holds, and More on the muted ground at the
     end; under 1,024 px More wraps under the groups as a row */
  header.site .container { position: relative; }
  nav.main > details.dd-cat { position: static; }
  .dd-mega { top: calc(100% + 1px); left: 24px; right: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); width: auto;
             max-height: calc(100vh - 80px); padding: 0; border-top: 0; border-radius: 0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px); overflow: hidden auto; }
  /* Its items 10 px apart, a row's 4 px padding each side and 2 px between (the owner, 2026-11-09: "reduce the gap size"; 16 px before) */
  .mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 24px 12px; }
  .mega-col:first-child { padding-left: 20px; }
  .mega-title { margin: 0 8px 8px; padding-bottom: 12px; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; font-weight: 500; line-height: 20px; }
  .mega-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: calc(var(--radius) - 2px);
               font-size: 14px; line-height: 20px; }
  .mega-name { font-weight: 600; color: hsl(var(--foreground)); }
  .mega-hint { grid-column: 1 / -1; color: hsl(var(--muted-foreground)); }
  /* How many products a place opens, at the end of its name's line (the owner, 2026-11-08: "need to show the number on the discover
     page foe different group"); the phone menu's categories carry theirs at the row's end */
  :is(.mega-count, .dd-count) { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
  .dd-count { margin-left: auto; padding-left: 12px; }
  .mega-item:hover, .mega-item:focus-visible { background: hsl(var(--accent)); outline: none; }
  .mega-item:focus-visible { box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
  .mega-aside { padding-right: 20px; border-left: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
  .mega-aside .mega-item:hover, .mega-aside .mega-item:focus-visible { background: hsl(var(--background)); }
  @media (max-width: 1023px) { .dd-mega { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mega-aside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                               column-gap: 4px; padding-left: 20px; border-left: 0; border-top: 1px solid hsl(var(--border)); } .mega-aside .mega-title { grid-column: 1 / -1; } }

  /* Tooltip */
  [data-tip] { position: relative; }
  /* The header sits at the window's top, so a tip above its buttons would open off screen (the owner, 2026-10-31: "fix upside pop"): below. */
  header.site [data-tip]:hover::after, header.site [data-tip]:focus-visible::after { bottom: auto; top: calc(100% + 6px); }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; z-index: 60; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
                                                             padding: 4px 8px; border-radius: calc(var(--radius) - 2px); background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
                                                             font: 500 12px/1.4 var(--font); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); }

  /* Tabs */
  .tabs { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 4px; border-radius: var(--radius); background: hsl(var(--accent)); color: hsl(var(--muted-foreground));
          max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tab { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: calc(var(--radius) - 2px); font-weight: 500; white-space: nowrap; cursor: pointer; }
  .tab:hover { color: hsl(var(--foreground)); }
  .tab[aria-current] { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow); }
  /* A group's tab leads with its logo (n8n workflows, GitHub) */
  .tab:has(svg) { gap: 6px; }
  .tab svg { width: 16px; height: 16px; flex: none; }

  /* Sidebar (on the right of the store and of a listing) */
  .with-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
  .lmain { min-width: 0; }
  .side { position: sticky; top: 72px; display: grid; gap: 16px; }
  /* One standard padding for every side card, and one left edge in it: a row's tint reaches 8px past its text, so the categories
     line up with the filters' labels, fields and buttons (the owner, 2026-11-01: "reduce the card padding, anned to be same and standard"). */
  .side .card-pad, .side-phone .card-pad { padding: 16px; }
  .sb-group { display: grid; gap: 2px; }
  .sb-label { height: 32px; display: flex; align-items: center; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
  .sb-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; margin: 0 -8px; padding: 0 8px; border-radius: calc(var(--radius) - 2px); font-size: 14px; }
  .sb-item:hover { background: hsl(var(--accent)); }
  .sb-item[aria-current] { background: hsl(var(--accent)); font-weight: 600; }
  details.side-phone { display: none; }
  details.side-phone > summary { list-style: none; }
  details.side-phone > summary::-webkit-details-marker { display: none; }
  details.side-phone[open] > summary { margin-bottom: 12px; }
  form.filters { gap: 12px; margin-top: 16px; }
  @media (max-width: 1023px) {
    .with-side { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .side { position: static; order: -1; }
    .store .side { display: none; }
    details.side-phone { display: block; }
  }

  /* Skeleton: behind a picture until it paints */
  .skeleton { background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--accent) / .55) 37%, hsl(var(--muted)) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
  @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .btn { transition: none; } }

  /* Breadcrumb */
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: hsl(var(--muted-foreground)); }
  .crumbs a:hover { color: hsl(var(--foreground)); }
  .crumbs .sepx { opacity: .6; }
  .crumbs [aria-current] { color: hsl(var(--foreground)); }

  /* Listing card (Apify Store's: picture, name, seller, two lines, stats, price) */
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  /* A home page part (mindket-routes.ts) is its spotlight, two rows tall in the first column, and PART (eight) cards: the widest grid's
     two lines. It shows two whole lines at every width: 260 px columns and 16 px gaps make four under 1,364 px (six cards beside it),
     three under 1,088 (four); under 812 the spotlight takes a row of its own on top, over two lines of two, and on a phone under 536,
     two cards. */
  .two-lines { container-type: inline-size; }
  @container (max-width: 1363.98px) { .two-lines .cards > :nth-child(n+8) { display: none; } }
  @container (max-width: 1087.98px) { .two-lines .cards > :nth-child(n+6) { display: none; } }
  @container (max-width: 535.98px) { .two-lines .cards > :nth-child(n+4) { display: none; } }
  .lcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; transition: border-color .15s, box-shadow .15s; }
  .lcard:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .lcard-top { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
  .thumb { flex: none; width: 44px; height: 44px; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .thumb svg { width: 22px; height: 22px; }
  .thumb.initial { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: 18px; font-weight: 600; }
  .thumb-lg.initial { font-size: 24px; }
  .tint { background: hsl(var(--h) 85% 55% / .13); color: hsl(var(--h) 70% 38%); }
  :root[data-theme="dark"] .tint { color: hsl(var(--h) 85% 70%); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tint { color: hsl(var(--h) 85% 70%); } }
  .lcard-name { flex: 1; min-width: 0; }
  .thumb-lg { width: 72px; height: 72px; border-radius: calc(var(--radius) + 4px); }
  .thumb-lg svg { width: 34px; height: 34px; }
  .lcard h3 { font-size: 15px; line-height: 20px; letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .lcard h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .lcard .by { font-size: 13px; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lcard .by a { position: relative; z-index: 1; }
  .lcard .by a:hover, .lcard-foot a:hover { color: hsl(var(--foreground)); text-decoration: underline; }
  .lcard .desc { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-height: 40px; }
  .lcard .tested { font-size: 12px; color: hsl(var(--muted-foreground)); }
  .lcard-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid hsl(var(--border)); font-size: 12px; color: hsl(var(--muted-foreground)); }
  .lcard-foot .price { margin-left: auto; font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); }
  /* The home page's Products row (mindket-routes.ts homeProducts; the owner, 2026-11-08: "show the products on home page"): a shelf of
     product cards, the picture on top, then the kind chip, the name, the pitch uncut (a sentence, never clipped to lines) and the price as the sales page shows it (priceLine's markup, styled
     here: the offer sheet is not on the home page). Five share the row in a window of 1,212 px or more; narrower, each keeps 220 px and the
     row scrolls sideways in its own box, snapping to a card, never the page (min-width: 0 on the grid item). On a phone each is 240 px, so
     a US$199 price, its struck US$399 and the badge stay on one line (at 220 px the badge wrapped). */
  .pcards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; min-width: 0; overflow-x: auto;
            overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
  .pcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; overflow: hidden; scroll-snap-align: start;
           transition: border-color .15s, box-shadow .15s; }
  .pcard:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .pcard-pic { aspect-ratio: 1; margin-bottom: 4px; overflow: hidden; background: hsl(0 0% 6%); }
  .pcard-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
  .pcard:hover .pcard-pic img { transform: scale(1.03); }
  .pcard > :is(h3, .desc, .offer-price, .pcard-kind, .pcard-plan) { margin-inline: 16px; }
  .pcard h3 { font-size: 15px; line-height: 20px; letter-spacing: -.015em; overflow-wrap: anywhere; }
  .pcard h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .pcard .desc { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
  .pcard-kind { display: flex; }
  .pcard-plan { font-size: 12px; line-height: 16px; }
  .pcard .offer-price { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .pcard .offer-now { order: -1; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.02em; }
  .pcard .offer-price s { font-size: 14px; color: hsl(var(--muted-foreground)); }
  .pcard .offer-off { align-self: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: hsl(var(--accent-fill)); color: hsl(var(--accent-fill-foreground)); }
  @media (prefers-reduced-motion: reduce) { .pcard-pic img { transition: none; } .pcard:hover .pcard-pic img { transform: none; } }
  @media (max-width: 640px) { .pcards { grid-auto-columns: 240px; } }
  /* The Products page (mindket-products-page.ts): the same cards wrap in a grid, none scrolls sideways, and a group's section has its line under its title */
  .pcards.is-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .products-line { margin: -8px 0 16px; }
  @media (max-width: 640px) { .pcards.is-grid .pcard-pic { aspect-ratio: 4 / 3; } }
  .stat { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; }
  .stat svg { width: 14px; height: 14px; }
  .star { color: hsl(var(--star)); }
  .corner { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: -4px -4px 0 0; }
  .badge-gh { background: hsl(var(--muted)); color: hsl(var(--foreground)); padding: 2px 6px; font-variant-numeric: tabular-nums; }
  .badge-gh svg { width: 12px; height: 12px; color: hsl(var(--star)); }
  /* The spotlight (mindket-ui.ts spotlight): a card two rows tall in the first column (the user, 2026-11-07: "make full height for the
     latest item, same like before", "make it for skill github automation"; a card's size from 2026-11-04) that shows all of itself (the
     user, the same day, of a title cut at "…deck of A…": "Need to show all info, and change to more sutiable card color"): its whole
     name, maker line and description with no line cut, so its words may make the two rows taller; on Mindket's cool grey wash with the
     cards' own border, the gold kept for its Latest alone (a colour marks one thing: lessons, 2026-11-04). Under 812 px it is a card on a
     row of its own over the two lines. */
  .spot { background: linear-gradient(180deg, hsl(var(--secondary)), hsl(var(--card)) 70%); }
  .spot h3, .spot .desc { display: block; -webkit-line-clamp: none; overflow: visible; }
  .spot .by { white-space: normal; overflow-wrap: anywhere; }
  .two-lines .spot { grid-row: span 2; min-height: 340px; }
  .spot-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
  .spot-facts dt { font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }
  .spot-facts dd { margin: 0; font-size: 14px; line-height: 20px; color: hsl(var(--foreground)); overflow-wrap: anywhere; }
  @container (max-width: 811.98px) {
    .two-lines .spot { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  }

  /* Page parts */
  main { padding: 32px 0 80px; }
  .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* AI Hero's sections sit between 1 px rules */
  .stack > section + section { padding-top: 40px; border-top: 1px solid hsl(var(--border)); }
  .hero { text-align: center; padding: 40px 0 8px; display: grid; gap: 20px; justify-items: center; }
  .hero form { width: 100%; max-width: 640px; }
  .hero .chips-row { max-width: 100%; }
  .hero .chips-row > :first-child { margin-left: auto; }
  .hero .chips-row > :last-child { margin-right: auto; }
  /* The home page's hero, left and right, AI Hero's (the owner, 2026-10-31: "change this part and become left right like this"; "ensure have
     search bar"): the words, the search and the numbers on the left; three listings on a bright panel on the right; the categories under both.
     Under 1,024 px the words stand alone and the panel goes (the rows below show the same listings) */
  /* The home's hero on a world map of cubes, big and small (the owner, 2026-11-11: "change the homepage bg cube to world map cube
     design, need to have small big cube"; 2026-11-12: "change to better background cube"; before it a halftone of small squares,
     2026-11-04 to 11-11, mcpservers.org's dotted hero; 2026-11-12: "make the background cube smaller"): mindket-world.ts draws it, one 3D
     cube per 2° of land, at most half its cell, lit from the top left,
     small on the coast and big inland. The whole world across the page from 1,680 px up, its middle on a narrower one (Europe and Africa
     on a phone), under the header. Two masks: an ellipse on the text column (the 1,392 px content's left column; the page's middle when
     the hero is one column under 1,024 px) leaves the map at 30% behind the words, and a fall to none under the hero. On body::after
     (body::before is the loading bar), absolute to the first screen with left 0 and right 0, so no 100vw and no sideways scroll; the map
     is a file of this server (world.svg, relative to this stylesheet as its fonts are), so MINDKET_CSP's img-src 'self' allows it. The ink
     is in the file: black faces at 12% on a light page, world-dark.svg's white ones at 16% on a dark one, each top and side its own share */
  body:has(.hero-split)::after {
    --hx: max(min(25% - 2px, 324px), 50% - 396px); --hy: 460px; --hr: 560px 380px;
    --hmask: radial-gradient(ellipse var(--hr) at var(--hx) var(--hy), rgb(0 0 0 / .3) 45%, black 100%), linear-gradient(black 640px, transparent 940px);
    content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 960px; pointer-events: none;
    background: url("world.svg?v=2123b76f8364") 50% 104px / max(100%, 1680px) auto no-repeat;
    -webkit-mask: var(--hmask); -webkit-mask-composite: source-in; mask: var(--hmask); mask-composite: intersect;
  }
  :root[data-theme="dark"] body:has(.hero-split)::after { background-image: url("world-dark.svg?v=dadab3e4c9bb"); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:has(.hero-split)::after { background-image: url("world-dark.svg?v=dadab3e4c9bb"); } }
  .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; justify-items: stretch; column-gap: 56px; row-gap: 32px;
                padding-top: 24px; text-align: left; }
  .hero-copy { display: grid; gap: 20px; justify-items: start; min-width: 0; }
  .eyebrow { font: 500 13px/18px var(--font); color: hsl(var(--muted-foreground)); }
  .hero-split h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: .98; letter-spacing: -.042em; }
  .hero-split .lead { max-width: 560px; }
  .hero-split .hero-copy form { max-width: 600px; }
  /* Cubby, the mascot over the headline (mindket-routes.ts homePage): its still floats gently (still for reduced motion); where the page
     script brings it to life (web/mindket-search.js mascot) the app's renderer draws it over the still, in a larger square that has room
     for its moves and lets presses through to the box, which pokes it */
  .hero-mascot-box { position: relative; width: 132px; margin: 0 0 -8px -6px; }
  .hero-mascot { display: block; width: 100%; height: auto; animation: hero-mascot-float 4.2s ease-in-out infinite; }
  @keyframes hero-mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .hero-mascot-live { position: absolute; left: 50%; top: 50%; width: 204%; height: auto; aspect-ratio: 1; transform: translate(-50%, -59%); pointer-events: none; opacity: 0; transition: opacity .3s ease; }
  .hero-mascot-box.is-live { cursor: pointer; }
  .hero-mascot-box.is-live .hero-mascot { visibility: hidden; animation: none; }
  .hero-mascot-box.is-live .hero-mascot-live { opacity: 1; }
  @media (max-width: 640px) { .hero-mascot-box { width: 96px; } }
  @media (prefers-reduced-motion: reduce) { .hero-mascot { animation: none; } }
  .hero-stats { display: flex; flex-wrap: wrap; gap: 24px 56px; width: 100%; max-width: 600px; margin: 8px 0 0; padding-top: 24px; border-top: 1px solid hsl(var(--border)); }
  .hero-stats > div { display: flex; flex-direction: column-reverse; gap: 6px; }
  .hero-stats dd { margin: 0; font: 700 30px/34px var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
  .hero-stats dt { font: 500 13px/18px var(--font); color: hsl(var(--muted-foreground)); }
  .hero-stats dd a { color: inherit; text-decoration: none; border-radius: 6px; }
  .hero-stats dd a:hover { color: hsl(var(--brand)); }
  /* The home's band (mindket-home-parts.ts heroStats) on one row (the owner, 2026-11-11: "make 1 row", after three to a row): its six
     numbers spread across the band's width, their size from that width (container units: 30 px where they fit, down to 20 px on a
     narrow column) so they never wrap three and one (docs/lessons.md). n8n's, GitHub's and Hugging Face's logos before their
     numbers, a figure tall. A phone (under 561 px) keeps two columns at the full size: six numbers do not fit its width */
  .hero-split .hero-stats { container-type: inline-size; flex-wrap: nowrap; justify-content: space-between; gap: 16px; max-width: none; }
  .hero-split .hero-stats > div { flex: none; }
  .hero-split .hero-stats dd { font-size: clamp(20px, calc((100cqi - 80px) / 21), 30px); line-height: 1.15; white-space: nowrap; }
  .hero-split .hero-stats dt { white-space: nowrap; }
  @media (max-width: 560px) {
    .hero-split .hero-stats { display: grid; grid-template-columns: repeat(2, max-content); gap: 24px 56px; container-type: normal; }
    .hero-split .hero-stats dd { font-size: 30px; }
  }
  .hero-stats dd a:has(svg) { display: inline-flex; align-items: center; gap: .27em; }
  .hero-stats dd svg { width: .87em; height: .87em; flex: none; }
  .hero-art { display: grid; gap: 16px; align-content: center; min-height: 100%; padding: 40px 32px; border-radius: calc(var(--radius) + 8px); overflow: hidden;
              background: linear-gradient(90deg, hsl(214 95% 90%), hsl(326 85% 72%) 20%, hsl(228 88% 62%) 34%, hsl(318 82% 70%) 46%, hsl(18 95% 60%) 66%,
              hsl(40 100% 56%) 82%, hsl(52 100% 62%)); }
  .hero-art .lcard { width: calc(100% - 64px); max-width: 420px; box-shadow: var(--shadow-md); }
  .hero-art .lcard:nth-child(2) { justify-self: end; }
  .hero-split > .chips-row { grid-column: 1 / -1; }
  .hero-split > .chips-row > :first-child, .hero-split > .chips-row > :last-child { margin: 0; }
  @media (max-width: 1023px) { .hero-split { grid-template-columns: minmax(0, 1fr); } .hero-art { display: none; }
    body:has(.hero-split)::after { --hx: 50%; --hy: 330px; --hr: 330px 380px; } }

  /* Sliders (a listing's pictures, mindket-ui.ts galleryBlock): a scroll-snap track (swipe, scroll, or ‹ › jump to a slide), ‹ n / N › over it */
  .ads-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
               overscroll-behavior-x: contain; scrollbar-width: none; border-radius: calc(var(--radius) + 4px); }
  .ads-track::-webkit-scrollbar { display: none; }
  .ad-nav { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 2px; border-radius: 9999px;
            background: rgb(0 0 0 / .45); color: #fff; font-size: 12px; font-weight: 600; }
  .ad-step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; font-size: 18px; line-height: 1; }
  .ad-step:hover { background: rgb(255 255 255 / .18); }
  .ad-count { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) { .ads-track { scroll-behavior: auto; } }
  .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
  .section-head a { font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); }
  .section-head a:hover { color: hsl(var(--foreground)); }
  /* A home part's mark before its title (mindket-routes.ts section): GitHub's logo, a kind's mark; the title's size, on its line
     (inline: the reset makes every svg a block, which put it on a line of its own) */
  .section-head h2 > svg { display: inline-block; width: .9em; height: .9em; margin-right: .35em; vertical-align: -.1em; }
  .chips-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .chips-row::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
  .pill { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9999px; border: 1px solid hsl(var(--border)); font-weight: 500;
          background: hsl(var(--card)); white-space: nowrap; }
  .pill:hover { background: hsl(var(--accent)); }
  .pill[aria-current] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
  .band { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px; background: hsl(var(--card)); }
  .empty { display: grid; justify-items: center; gap: 12px; padding: 48px 16px; text-align: center; border: 1px dashed hsl(var(--border)); border-radius: calc(var(--radius) + 4px); }
  /* A list's pages (mindket-ui.ts pageNav): round pills as the topics', this page's filled; on a phone the steps keep their arrow alone */
  .pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
  .pager-num, .pager-step { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 9999px;
          border: 1px solid hsl(var(--border)); background: hsl(var(--card)); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .pager-step { padding: 0 14px; }
  a.pager-num:hover, a.pager-step:hover { background: hsl(var(--accent)); }
  .pager-num[aria-current] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
  .pager-step[aria-disabled] { color: hsl(var(--muted-foreground)); opacity: .5; }
  .pager-step svg { width: 16px; height: 16px; flex: none; }
  .pager-prev svg { transform: rotate(90deg); }
  .pager-next svg { transform: rotate(-90deg); }
  .pager-gap { min-width: 16px; text-align: center; color: hsl(var(--muted-foreground)); }
  .pager-gap.pager-phone { display: none; }
  /* The pages and Per page on one row (mindket-routes.ts pager; the user, 2026-11-09: "per page make it dropdown same row"): Per page
     a pill of the size in use opening the sizes (mindket-ui.ts perPageNav), the sort's menu; a phone keeps the pill alone (its words for a screen reader) and wraps it under only when the pages leave no room */
  .pager-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 28px; }
  .pager-row > .pager { margin-top: 0; }
  .per-page { display: flex; align-items: center; gap: 8px; font-size: 14px; color: hsl(var(--muted-foreground)); }
  .per-page summary { padding: 0 14px; cursor: pointer; color: hsl(var(--foreground)); }
  .per-page details[open] summary svg { transform: rotate(180deg); }
  .per-page .dd-menu { min-width: 96px; }
  @media (max-width: 640px) {
    .pager { gap: 4px; }
    .pager .pager-wide { display: none; }
    .pager-gap.pager-phone { display: inline; }
    .pager-step { padding: 0; }
    .pager-word, .per-page > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .pager-row { column-gap: 8px; }
  }
  .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
  .count { font-size: 14px; color: hsl(var(--muted-foreground)); }
  .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .chips-label { font-size: 13px; color: hsl(var(--muted-foreground)); margin-right: 2px; }
  .chip { display: inline-flex; align-items: center; border-radius: calc(var(--radius) - 2px); padding: 2px 8px; font-size: 12px; font-weight: 600; }

  /* A listing */
  .lhead { display: flex; gap: 16px; align-items: flex-start; }
  .lhead-main { flex: 1; min-width: 0; }
  /* Its GitHub repository's Star button (mindket-routes.ts githubBar) at the head's right, as GitHub's own header (the owner, 2026-11-02, of the empty right: "show all the related info here include badge"); under the name
     where the head is narrow */
  .lhead-gh { display: grid; justify-items: start; gap: 12px; }
  .lhead-gh .gh-bar { margin-top: 0; }
  @media (min-width: 900px) {
    .lhead-gh { flex: none; max-width: 50%; justify-items: end; }
    .lhead-gh .gh-bar { flex-direction: column; align-items: flex-end; }
  }
  @media (max-width: 899px) {
    .lhead { flex-wrap: wrap; }
    .lhead-gh { flex-basis: 100%; padding-left: 88px; }
  }
  /* Its trending badge (mindket-routes.ts githubHead) in the room between the name and the GitHub bar on a wide head (the owner,
     2026-11-02, of REA's empty middle: "need to detect and show this"); under the bar on a narrower one */
  .lhead-trend { display: flex; flex-wrap: wrap; gap: 8px; }
  .lhead-trend .gh-trend { margin-top: 0; }
  /* Two badges (Trendshift's laurel and medal, 2026-11-04) one over the other there, leaving the name its room */
  @media (min-width: 1280px) { .lhead-trend { flex: none; flex-direction: column; margin-right: 16px; } }
  @media (min-width: 900px) and (max-width: 1279px) {
    .lhead { flex-wrap: wrap; }
    .lhead-trend { order: 1; flex-basis: 100%; display: flex; justify-content: flex-end; }
  }
  @media (max-width: 899px) { .lhead-trend { order: 1; flex-basis: 100%; padding-left: 88px; } }
  .lhead h1 { font-size: 30px; line-height: 1.08; }
  .lhead .row { margin-top: 8px; }
  /* The head's Like (mindket-routes.ts upvoteButton; the owner, 2026-11-08: "add let user upvote like producthunt", then "all the vote move
     to here, and change to like icon"): the same small button as Star, at the head's top right after Star, or last in an n8n workflow's
     numbers so its apps' logos under them end at its right edge ("align to right", 2026-11-09);
     its thumbs-up gives way to Cubby, Mindket's mascot, round, once the reader liked it (the owner, 2026-11-09: "after liked, change the icon
     to moscot icon"); no count ("dont public the vote rate data first"). Where the head is narrower it has a line of its own under them, in
     line with the name; on a phone, under everything */
  .lvote { flex: none; }
  .lvote .upvote { font-size: 13px; }
  @media (min-width: 900px) { .lhead-gh + .lvote { margin-left: -8px; } }
  @media (max-width: 899px) { .lvote { flex-basis: 100%; padding-left: 88px; margin-top: -8px; } }
  .upvote { transition: border-color .2s ease, background-color .15s ease; }
  /* Liked keeps its own ground with a gold edge, Cubby in the thumbs-up's place (the owner, 2026-11-11: "should be the icon yellow will do,
     bg color remain previous", after a gold fill on 2026-11-10's "show theme yellow after clicked") */
  .upvote[aria-pressed="true"] { border-color: hsl(var(--brand)); }
  .upvote-mascot { display: none; width: 16px; height: 16px; flex: none; border-radius: 50%; }
  .upvote[aria-pressed="true"] svg { display: none; }
  .upvote[aria-pressed="true"] .upvote-mascot { display: block; }
  /* A press glides (the owner, 2026-11-10: "apply smooth animation when toggle"): the icon dips while held, and the one it turns into
     pops in once the press lands (web/mindket-search.js popToggle, never when the page paints a saved Like); My stack's toggle beside it
     uses the same pop (mindket-stack-css.ts) */
  .upvote :is(svg, .upvote-mascot) { transition: transform .15s ease; }
  .upvote:active :is(svg, .upvote-mascot) { transform: scale(.88); }
  .upvote.is-popping :is(svg, .upvote-mascot) { animation: mk-toggle-pop .34s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes mk-toggle-pop { 0% { opacity: .4; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.15); } 100% { transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .upvote, .upvote :is(svg, .upvote-mascot) { transition: none; }
    .upvote.is-popping :is(svg, .upvote-mascot) { animation: none; }
  }
  .upvote[aria-disabled="true"] { opacity: .6; cursor: default; }
  .upvote[aria-busy="true"] { cursor: progress; }
  /* On a phone the name sits beside its logo, smaller, and what follows from "Made by" runs the page's full width under both (the owner,
     2026-11-02: "mobile view, make the title smaller, and make full width start from "Made..."): the inner column's parts join the
     head's grid (display: contents) */
  @media (max-width: 640px) {
    .lhead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
    .lhead-main, .lhead-gh { display: contents; }
    .lhead-main > :not(h1), .lhead-gh > * { grid-column: 1 / -1; }
    .lhead-gh > * { margin-top: 8px; }
    .lhead-trend { grid-column: 1 / -1; padding-left: 0; margin-top: 8px; }
    .lvote { grid-column: 1 / -1; padding-left: 0; margin-top: 8px; }
    .lhead .thumb-lg { width: 56px; height: 56px; }
    .lhead h1 { font-size: 24px; line-height: 1.15; }
  }
  .stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 14px; color: hsl(var(--muted-foreground)); }
  .stats .stat svg { width: 16px; height: 16px; }
  .desc-lg { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
  .prose { display: grid; gap: 16px; }
  .prose h2 { font-size: 24px; line-height: 28px; font-weight: 700; margin-top: 8px; }
  /* A README as Apify Store draws one (the owner, 2026-10-30: "show the standard font size like apify"; measured on apify.com at 1280 px):
     14 px text on 24 px lines, 24 and 20 px bold headings, 14 px code in a pill */
  .md { display: grid; gap: 16px; font-size: 14px; line-height: 24px; overflow-wrap: anywhere; }
  .md h2 { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; }
  .md h3 { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; margin-top: 8px; }
  .md h4 { font-size: 16px; line-height: 24px; font-weight: 700; }
  .md > :first-child { margin-top: 0; }
  .md ul, .md ol { display: grid; gap: 6px; padding-left: 24px; } .md ul { list-style: disc; } .md ol { list-style: decimal; }
  .md a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: hsl(var(--muted-foreground) / .5); }
  .md a:hover { text-decoration-color: currentColor; }
  .md code { font: 14px/20px var(--mono); padding: 2px 6px; border: 1px solid hsl(var(--border)); border-radius: 6px; background: hsl(var(--muted)); }
  .md pre code { padding: 0; border: 0; border-radius: 0; background: none; font: inherit; }
  /* A control the page script shows once it is wired (the Privacy page's Don't count this browser, KDD 532) */
  .md [hidden] { display: none; }
  .md blockquote { padding: 12px 16px; border-radius: var(--radius); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); display: grid; gap: 12px; }
  .md hr { border-top: 1px solid hsl(var(--border)); }
  /* A listing's pictures and intro videos (mindket-ui.ts galleryBlock; the owner, 2026-11-02: "combine the image with vidoe, move to
     bottom part, then make the preview full width, show video first then image"): one preview the column's full width, each picture
     whole in a 16:10 frame, the first video's still or a video playing over them; one row of thumbnails under it, the videos' first.
     Without the script a picture's thumbnail (#pic-N, :target) takes the still away */
  .gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 24px; }
  .gallery > .gal-track, .gallery > .vid { grid-area: 1 / 1; }
  .gallery:has(> .gal-track) > .vid { z-index: 3; aspect-ratio: auto; background: #000; }
  .gallery:has(.gal-slide:target) > a.vid { display: none; }
  /* The still never sizes the frame (YouTube's is 4:3, which made it 4:3) and shows the whole video (the user, 2026-11-03: "why th
     preview image video no fit the size? fix"): a 16:9 box as wide as the frame, in its middle on its black, which `cover` cuts to
     the video, YouTube's black bands above and below left out. Scaled past the bands, it had lost the video's sides. */
  .gallery:has(> .gal-track) > a.vid img { position: absolute; inset: 0; margin: auto; height: auto; aspect-ratio: 16 / 9; }
  .gal-track { gap: 0; }
  .gal-slide { position: relative; margin: 0; scroll-snap-align: start; scroll-margin-top: 72px; aspect-ratio: 16 / 10; overflow: hidden;
               border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--muted)); }
  .gal-slide > a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
  .gal-slide img { width: 100%; height: 100%; object-fit: contain; }
  /* The row starts from the middle, each thumbnail a quarter of it (the owner, 2026-11-02: "move to start from middle, and enlarge it
     like entire row can fit 4 card video"); more than four share the row, down to 80 px each, then scroll from the first */
  .gal-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
  .gal-thumbs a { position: relative; flex: 0 1 calc((100% - 24px) / 4); min-width: 80px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid hsl(var(--border));
                  border-radius: var(--radius); background: hsl(var(--muted)); opacity: .7; transition: opacity .15s, border-color .15s; }
  .gal-thumbs a:hover, .gal-thumbs a[aria-current="true"] { opacity: 1; border-color: hsl(var(--foreground)); }
  .gal-thumbs img { width: 100%; height: 100%; object-fit: cover; }
  .gal-thumbs .vid-play { width: 44px; height: 32px; border-radius: 8px; }
  .gal-thumbs a:hover .vid-play { background: hsl(0 85% 48%); }
  .gal-thumbs .vid-play svg { width: 16px; height: 16px; }
  /* The picture viewer (web/mindket-search.js; the owner, 2026-11-01: "standard image zoom"), Minda's ImageViewer on the web: the picture
     over a dark page, dark in both themes; ‹ › at the sides, the zoom bar at the foot, × at the top right. */
  html.pv-open { overflow: hidden; }
  .pv { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
        background: rgb(0 0 0 / .82); color: rgb(255 255 255 / .86); cursor: zoom-out; outline: none; }
  .pv[open] { display: flex; align-items: center; justify-content: center; }
  .pv::backdrop { background: transparent; }
  .pv [hidden] { display: none; }
  .pv-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 12px; cursor: zoom-in; user-select: none; touch-action: none;
            transition: transform .18s cubic-bezier(.2, 0, 0, 1); }
  .pv-img.is-zoomed { border-radius: 0; cursor: grab; }
  .pv-img.is-panning { cursor: grabbing; transition: none; }
  .pv-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9999px; background: none; color: inherit; cursor: pointer; }
  .pv-btn:hover:not(:disabled) { background: rgb(255 255 255 / .12); color: #fff; }
  .pv-btn:disabled { opacity: .4; cursor: default; }
  .pv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .pv-close { position: absolute; top: 16px; right: 16px; }
  .pv-page { position: absolute; top: 50%; translate: 0 -50%; background: rgb(38 38 38 / .92); }
  .pv-page.is-prev { left: 16px; }
  .pv-page.is-next { right: 16px; }
  .pv-bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px;
            border-radius: 9999px; background: rgb(38 38 38 / .92); cursor: default; }
  .pv-zoom { min-width: 4.5em; font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; }
  /* Every picture in a strip at the foot (the owner, 2026-11-01: "show all the images at btm carousel of the product after zoom"), the
     zoom bar over it; the picture keeps clear of both, still centred so zooming at the pointer holds */
  .pv.has-strip .pv-img { max-height: calc(100vh - 264px); }
  .pv.has-strip .pv-bar { bottom: 80px; }
  .pv-strip { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; max-width: calc(100vw - 32px); padding: 4px;
              overflow-x: auto; scrollbar-width: none; border-radius: 12px; background: rgb(38 38 38 / .92); cursor: default; }
  .pv-thumb { flex: none; width: 64px; height: 40px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: none; opacity: .55;
              cursor: pointer; transition: opacity .15s, border-color .15s; }
  .pv-thumb:hover { opacity: .9; }
  .pv-thumb[aria-current="true"] { border-color: #fff; opacity: 1; }
  .pv-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
  .pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
  @media (prefers-reduced-motion: reduce) { .pv-img { transition: none; } }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 16px;
        font: 14px/1.6 var(--mono); }
  .price-big { font: 600 30px/1.1 var(--font); letter-spacing: -.03em; }
  .buy { display: grid; gap: 12px; }
  .kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; font-size: 14px; }
  .kv dt { color: hsl(var(--muted-foreground)); }
  .kv dd { text-align: right; overflow-wrap: anywhere; }
  .kv dd a:hover { text-decoration: underline; }
  .proof { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
  .proof-note { margin-top: -8px; }
  .changes li { padding: 12px 0; border-top: 1px solid hsl(var(--border)); display: grid; gap: 4px; }
  .changes .notes { white-space: pre-line; overflow-wrap: anywhere; }
  /* Reviews as a shop's product page has them (mindket-routes.ts reviewsBlock; the user, 2026-11-03: "need better standard design"): the
     score card (the average, its stars and count, a bar for each of 5 down to 1 stars, Write a review) beside the reviews, each a card of
     its writer, stars, day and words; one column under 720 px of the section. The form opens in place of nothing, over the reviews */
  .rv-sec { container: rv / inline-size; margin-bottom: 24px; display: grid; gap: 16px; }
  .rv { display: grid; gap: 24px; align-items: start; }
  @container rv (min-width: 720px) { .rv { grid-template-columns: 280px minmax(0, 1fr); } .rv-side { position: sticky; top: 136px; } }
  .rv-side { display: grid; gap: 16px; padding: 20px; }
  .rv-score { display: flex; align-items: center; gap: 12px; }
  .rv-big { margin: 0; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .rv-score .meta { margin: 4px 0 0; font-size: 14px; }
  .stars { position: relative; display: inline-flex; vertical-align: middle; line-height: 0; }
  .stars > span { display: inline-flex; gap: 2px; }
  .stars-on { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
  .stars svg { width: 16px; height: 16px; flex: none; }
  .stars-lg svg { width: 20px; height: 20px; }
  .stars-off svg { color: hsl(var(--muted-foreground) / .35); }
  .stars-on svg { color: hsl(var(--star)); }
  .rv-bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .rv-bars li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 8px; font-size: 14px; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
  .rev-bar { height: 8px; overflow: hidden; border-radius: 9999px; background: hsl(var(--muted)); }
  .rev-bar > span { display: block; height: 100%; border-radius: inherit; background: hsl(var(--star)); }
  .rv-bars li > :last-child { text-align: right; }
  .rv-open { font-size: 14px; }
  .rv-main { display: grid; gap: 16px; min-width: 0; }
  .rv-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .rv-item { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 3px); background: hsl(var(--card)); }
  .rv-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
  /* The writer's picture: the Mindket mascot they wear (mindket-reviews.ts reviewerAvatar; the owner, 2026-11-12: "show the default profile
     picture"), round on its own tint. Every review text is the standard 14 px (the owner, the same day: "all use standard font size") */
  .rv-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 9999px; background: hsl(var(--secondary)); }
  .rv-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .rv-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
  .rv-who time { margin-left: auto; flex: none; font-size: 14px; color: hsl(var(--muted-foreground)); }
  .rv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
  .rv-note { color: hsl(var(--muted-foreground)); }
  .rv-body { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
  .rv-empty { display: grid; place-items: center; min-height: 120px; padding: 24px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 3px); color: hsl(var(--muted-foreground)); font-size: 14px; text-align: center; }
  .rv-empty p { margin: 0; }
  .verified { display: inline-flex; align-items: center; gap: 4px; color: hsl(var(--success)); font-weight: 500; }
  .verified svg { width: 14px; height: 14px; }
  /* The form (the page script's, web/mindket-search.js reviews): five stars to press, lit up to the one pressed or pointed at, the words
     with their count, a refusal under them, Post and Cancel */
  .rv-form, .rv-gate { display: grid; gap: 16px; padding: 20px; scroll-margin-top: 136px; }
  .rv-form[hidden], .rv-gate[hidden], .rv-error[hidden] { display: none; }
  .rv-form h3 { margin: 0; font-size: 18px; line-height: 24px; }
  .rv-pick { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 6px; }
  .rv-pick legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
  .rv-pick-row { display: inline-flex; gap: 4px; }
  .rv-pick label { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); cursor: pointer; color: hsl(var(--muted-foreground) / .35); transition: color .1s, transform .1s; }
  .rv-pick label svg { width: 32px; height: 32px; color: inherit; }
  .rv-pick label:active { transform: scale(.92); }
  .rv-pick input:focus-visible + label { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
  .rv-pick-row:has(input:nth-of-type(1):checked) label:nth-of-type(-n+1),
  .rv-pick-row:has(input:nth-of-type(2):checked) label:nth-of-type(-n+2),
  .rv-pick-row:has(input:nth-of-type(3):checked) label:nth-of-type(-n+3),
  .rv-pick-row:has(input:nth-of-type(4):checked) label:nth-of-type(-n+4),
  .rv-pick-row:has(input:nth-of-type(5):checked) label:nth-of-type(-n+5) { color: hsl(var(--star)); }
  @media (hover: hover) {
    .rv-pick-row:hover label { color: hsl(var(--muted-foreground) / .35); }
    .rv-pick-row:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1),
    .rv-pick-row:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2),
    .rv-pick-row:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3),
    .rv-pick-row:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4),
    .rv-pick-row:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) { color: hsl(var(--star)); }
  }
  .rv-words { height: auto; min-height: 112px; padding: 10px 12px; font: 400 14px/1.6 var(--font); resize: vertical; }
  .rv-count { margin: -10px 0 0; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
  .rv-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .rv-error { margin: 0; color: hsl(var(--destructive)); font-size: 14px; }
  .rv-gate p { margin: 0; font-size: 14px; }
  .rv-gate .btn { justify-self: start; }
  .rv-form .row { gap: 8px; }
  .rv-posted { display: flex; align-items: center; gap: 6px; margin: 0; color: hsl(var(--success)); font-size: 14px; font-weight: 500; }
  .rv-posted[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) { .rv-pick label { transition: none; } }
  .avatar { flex: none; width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; font-weight: 600; background: hsl(var(--secondary)); }
  .avatar-lg { width: 64px; height: 64px; font-size: 24px; }

  /* Steps, FAQ, tables */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: step; }
  .steps .card { padding: 20px; display: grid; gap: 6px; }
  /* AI Hero numbers its steps "01", "02" in mono */
  .steps .card::before { counter-increment: step; content: counter(step, decimal-leading-zero); font: 600 13px/16px var(--mono); letter-spacing: .08em;
                         color: hsl(var(--muted-foreground)); margin-bottom: 6px; }
  .faq details { border-bottom: 1px solid hsl(var(--border)); }
  .faq summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; font-weight: 500; cursor: pointer; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; color: hsl(var(--muted-foreground)); font-size: 18px; line-height: 1; }
  .faq details[open] summary::after { content: '−'; }
  .faq details p { padding: 0 0 16px; color: hsl(var(--muted-foreground)); }
  .calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: end; }
  :is(td, th, .ct-buys) .sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: hsl(var(--muted-foreground)); }
  tr.mine :is(th, td) { font-weight: 600; background: hsl(var(--accent)); }
  /* The calculator in tabs (the user, 2026-11-04: "comfuse ui, revamp it, add tab view, make proper design", "split to multi tab for
     image vidoe audio text reseacgh code"): a radio in each tab's label, the panel of the one checked shown, so a press switches with
     no script and Calculate keeps the tab; the month in all beside the panels, in view as they scroll, under them on a narrow screen */
  /* One column no wider than the page (an auto column grows to the widest table and the page scrolls sideways on a phone) */
  .ct { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* #ct and a table's own anchor land under the sticky header, not behind it */
  .ct, .ct-cmp { scroll-margin-top: 80px; }
  /* The tabs as arena.ai's boards: an icon and a name each, the one picked on a grey pill, no track */
  .ct-tabs { position: relative; justify-self: start; max-width: 100%; height: auto; gap: 4px; padding: 0; overflow-x: auto; scrollbar-width: none; background: none; }
  .ct-tabs .tab { flex: none; gap: 8px; height: 36px; padding: 0 14px; border-radius: calc(var(--radius) - 1px); font-size: 14px; color: hsl(var(--muted-foreground)); }
  .ct-tabs .tab svg { width: 16px; height: 16px; }
  .ct-tabs .tab:hover { background: hsl(var(--accent) / .6); color: hsl(var(--foreground)); }
  .ct-tabs .tab:has(:checked) { background: hsl(var(--accent)); color: hsl(var(--foreground)); font-weight: 600; }
  .ct-tabs .tab:has(:focus-visible) { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
  .ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
  .ct-p { display: none; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
  .ct:has([name="tab"][value="text"]:checked) [data-tab="text"], .ct:has([name="tab"][value="code"]:checked) [data-tab="code"],
  .ct:has([name="tab"][value="research"]:checked) [data-tab="research"], .ct:has([name="tab"][value="image"]:checked) [data-tab="image"],
  .ct:has([name="tab"][value="video"]:checked) [data-tab="video"], .ct:has([name="tab"][value="audio"]:checked) [data-tab="audio"] { display: grid; }
  /* A browser with no :has shows every panel, one under the next, rather than none */
  @supports not selector(:has(*)) { .ct-p { display: grid; } .ct-p + .ct-p { margin-top: 32px; } }
  .ct-go { display: flex; align-items: end; }
  /* The Text and Code tabs' warning when the chosen model's context window cannot hold a session */
  .ct-warn { padding: 10px 14px; border: 1px solid hsl(var(--price-high) / .4); border-radius: var(--radius); background: hsl(var(--price-high) / .08); font-size: 14px; line-height: 20px; }
  /* The token counter under the Text and Code tabs' fields: the rule of thumb always, the box with the page's script */
  .ct-count { padding: 10px 14px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
  .ct-count > summary { cursor: pointer; font-size: 14px; font-weight: 600; line-height: 20px; }
  .ct-count[open] > summary { margin-bottom: 8px; }
  .ct-counter { display: grid; gap: 8px; margin-top: 10px; }
  .ct-counter[hidden] { display: none; }
  .ct-counter textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 20px; resize: vertical; }
  .ct-count-act { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Claude's plans beside an Anthropic model's API month on Text and Code */
  .ct-plans { display: grid; gap: 6px; padding: 10px 14px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
  .ct .ct-plans h4 { margin: 0; }
  .ct-plans ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
  .ct-plans li { display: flex; flex-wrap: wrap; gap: 0 8px; }
  .ct-plans li span { color: hsl(var(--muted-foreground)); }
  .ct-plans .meta { margin: 0; }
  .ct-head h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
  .ct-head p { margin-top: 4px; font-size: 14px; }
  .ct h4 { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
  /* A tab's board as arena.ai's Top 10 and Pareto cards: its place in a small box, the name and maker over a bar as long as the score
     (the theme's gold, the visitor's own fuller), then the visitor's month on it and the score */
  .ct-board { padding: 16px 18px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 3px); background: hsl(var(--card)); }
  .ct-board-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .ct-board-head h4 { margin: 0; font-size: 16px; font-weight: 600; }
  .ct-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .ct-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .ct-place { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 3px);
              font: 600 12px/1 var(--mono); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
  .ct-bar { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 12px; border-radius: calc(var(--radius) - 3px); }
  .ct-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: hsl(var(--accent-fill) / .32); }
  .ct-bar > * { position: relative; }
  .ct-name { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  .ct-maker { font-size: 12px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
  .ct-num { display: grid; justify-items: end; text-align: right; }
  .ct-month { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ct-score { font: 500 12px/16px var(--mono); color: hsl(var(--muted-foreground)); white-space: nowrap; }
  .ct-row.is-mine .ct-bar::before { background: hsl(var(--accent-fill) / .55); }
  .ct-row.is-mine .ct-name { font-weight: 600; }
  .ct-row.is-mine .ct-maker { color: hsl(var(--foreground) / .7); }
  .ct-row.is-mine .ct-place { border-color: hsl(var(--brand)); color: hsl(var(--brand)); }
  /* Best value on a solid green, white words, in both themes (the user, 2026-11-06: "make solid green bg color"): 5:1 */
  .badge.ct-best { background: hsl(142 72% 29%); color: #fff; }
  .ct-board > .meta { margin-top: 12px; }
  .ct-ranks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .ct-ranks .chip { font-weight: 500; }
  .ct-ranks .chip.is-board { background: hsl(var(--brand) / .16); color: hsl(var(--foreground)); }
  /* A kind's models as WaveSpeed's /models cards: a banner of the maker's real logo, large, on a wash of the logo's own colours (a
     blurred copy behind it), its place and the sizes or lengths it makes over it; then its name, maker and task, its starting price
     and what the budget makes; a press prices it */
  .mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
  .mc { display: grid; grid-template-rows: auto 1fr; min-width: 0; padding: 0; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 3px);
        background: hsl(var(--card)); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
  .mc:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .mc:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
  .mc.is-mine { border-color: hsl(var(--brand)); box-shadow: 0 0 0 1px hsl(var(--brand)); }
  .mc-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; color: hsl(var(--foreground));
            background: hsl(var(--secondary)); }
  .mc-wash { position: absolute; top: -40%; left: -20%; z-index: -1; width: 140%; max-width: none; height: 180%; opacity: .34; filter: blur(36px) saturate(1.5); }
  .mc-logo { width: 50%; height: 62%; filter: drop-shadow(0 8px 18px hsl(var(--foreground) / .14)); transition: transform .2s ease; }
  .mc-art:has(.mc-facts) .mc-logo { height: 46%; margin-bottom: 24px; }
  .mc:hover .mc-logo { transform: scale(1.05); }
  @media (prefers-reduced-motion: reduce) { .mc-logo { transition: none; } }
  .mc-mark { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: calc(var(--radius) + 3px); background: hsl(var(--card));
             box-shadow: var(--shadow-md); font-size: 20px; font-weight: 600; }
  /* A maker's logo before a model's name in the price tables and on the board; every logo's symbol in one hidden sprite (by size: a
     display: none sprite blanks the colour logos' gradients) */
  .ct-logo { display: inline-block; flex: none; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; }
  .ct-bar .ct-logo { margin-right: 0; }
  .ct-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .mc-place { position: absolute; top: 8px; left: 8px; padding: 2px 6px; border-radius: 6px; background: hsl(var(--card) / .86); font: 600 12px/16px var(--mono); }
  .mc-facts { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 2px 8px; overflow: hidden; border-radius: 6px; background: hsl(var(--card) / .86);
              font-size: 12px; line-height: 18px; color: hsl(var(--muted-foreground)); white-space: nowrap; text-overflow: ellipsis; }
  .mc-body { display: grid; align-content: start; gap: 2px; padding: 12px 14px 14px; }
  .mc-name { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .mc-maker, .mc-out { font-size: 12px; color: hsl(var(--muted-foreground)); }
  .mc-price { margin-top: 8px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  /* A tab's price table as WaveSpeed's /pricing: its title and the sort pills over it, a model's name kept in view as it scrolls sideways */
  .ct-cmp { display: grid; gap: 8px; min-width: 0; }
  .ct-cmp + .ct-cmp { margin-top: 16px; }
  .ct-cmp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
  .ct-cmp-head h4 { margin: 0; }
  .ct-sort { display: flex; flex-wrap: wrap; gap: 6px; }
  .ct-sort .pill { height: 30px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 500; color: inherit; cursor: pointer; }
  .ct-sort .pill[aria-pressed="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
  .ct-sort .pill:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
  /* A price table's sort pills and its CSV download, side by side */
  .ct-cmp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .ct-csv { gap: 6px; height: 30px; padding: 0 12px; font-size: 13px; color: inherit; text-decoration: none; }
  .ct-csv svg { width: 14px; height: 14px; }
  .ct-csv:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
  .ct-cmp :is(thead th:first-child, th[scope="row"]) { position: sticky; left: 0; z-index: 1; background: hsl(var(--card)); }
  .ct-cmp tr.mine th[scope="row"] { background: hsl(var(--accent)); }
  .ct-cmp th[scope="row"] { min-width: 168px; padding-left: 38px; color: hsl(var(--foreground)); }
  .ct-cmp th[scope="row"] .ct-logo { margin-left: -26px; }
  .ct-cmp .u { font-size: 12px; color: hsl(var(--muted-foreground)); }
  /* Shorter rows (the user, 2026-11-05: "reduce the td height or padding"): 67 px to about 50, the model's name and maker kept on two
     lines; a price green in its column's cheapest third and red in its priciest (mindket-calc.ts bands), the light green a step darker
     than --success so it keeps 4.5:1 on the visitor's tinted row */
  .ct-cmp :is(th, td) { padding-block: 7px; line-height: 1.3; }
  .ct-cmp :is(th, td) .sub { margin-top: 1px; }
  .ct-cmp td.lo { color: hsl(var(--price-low)); }
  .ct-cmp td.hi { color: hsl(var(--price-high)); }
  .ct-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: hsl(var(--muted-foreground)); }
  .ct-key span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 9999px; vertical-align: 1px; }
  .ct-key .lo::before { background: hsl(var(--price-low)); }
  .ct-key .hi::before { background: hsl(var(--price-high)); }
  /* What the budget makes on each of the visitor's models, the budget's field under the list */
  .ct-buys { display: grid; gap: 10px; }
  .ct-buys h4 { margin: 0; font-size: 16px; }
  .ct-buys ul { margin: 0; padding: 0; list-style: none; }
  .ct-buys li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; }
  .ct-buys li > span { min-width: 0; }
  .ct-buys b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
  /* Sticky while it fits: taller than the window, it scrolls in itself, so the budget and Calculate stay reachable */
  .ct-sum { position: sticky; top: 84px; display: grid; gap: 16px; max-height: calc(100vh - 100px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .ct-sum thead th:first-child { font-size: 16px; font-weight: 600; color: hsl(var(--foreground)); }
  .ct-sum :is(th, td) { padding: 10px 0; }
  .ct-sum thead th { padding-top: 0; }
  .ct-sum :is(th, td) + :is(th, td) { padding-left: 12px; }
  /* Each part of the month counted or not (AI-004): a switch at its row's end; a part left out is muted, its amount struck, out of the sums */
  .ct-sum td.ct-use { width: 36px; vertical-align: middle; }
  .ct-sum td.ct-use .switch { display: block; }
  .ct-sum [hidden] { display: none; }
  .ct-sum tr.is-off td:not(.ct-use) { color: hsl(var(--muted-foreground)); }
  .ct-sum tr.is-off td.num { text-decoration: line-through; }
  /* Off, an icon by the struck amount says so; every part's row keeps its place, so a switch pressed moves nothing (2026-11-09) */
  .ct-sum .ct-off { display: inline-flex; margin-right: 6px; vertical-align: -2px; visibility: hidden; }
  .ct-sum .ct-off svg { width: 14px; height: 14px; }
  .ct-sum tr.is-off .ct-off { visibility: visible; }
  @media (max-width: 1023px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } .ct-sum { position: static; max-height: none; overflow: visible; } }
  @media (max-width: 640px) { .ct-tabs { flex-wrap: wrap; overflow: visible; } .ct-tabs .tab { padding: 0 10px; } .ct-sum { padding: 16px; } .ct-board { padding: 14px; }
    .ct-maker, .ct-cmp .c-x { display: none; } .mc-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; } .ct-cmp th[scope="row"] { min-width: 132px; } }
  @media (max-width: 480px) { .ct-row { grid-template-columns: 26px minmax(0, 1fr); row-gap: 2px; } .ct-num { grid-column: 2; display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 0 2px 4px; } }
  .scroll { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { text-align: left; padding: 12px; border-bottom: 1px solid hsl(var(--border)); }
  th { font-weight: 500; color: hsl(var(--muted-foreground)); }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  tr.total td { font-weight: 700; border-bottom: 0; }

  /* Footer */
  footer.site { border-top: 1px solid hsl(var(--border)); padding: 40px 0 32px; font-size: 14px; }
  .foot-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
  footer.site { background: hsl(var(--background)); }
  .foot-cols h3 { font: 600 13px/18px var(--font); color: hsl(var(--muted-foreground)); margin-bottom: 14px; }
  .foot-cols li { margin-bottom: 8px; }
  .foot-cols a { color: hsl(var(--muted-foreground)); }
  .foot-cols a:hover { color: hsl(var(--foreground)); }
  .foot-note { margin-top: 32px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); font-size: 12px; color: hsl(var(--muted-foreground)); }
  @media (max-width: 768px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > :first-child { grid-column: 1 / -1; } }
  .foot-cols .langs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .foot-cols .langs [aria-current] { color: hsl(var(--foreground)); font-weight: 500; }

  /* Chinese pages (2026-11-01): Han in the reader's own fonts (Geist has no Chinese; a Chinese web font is megabytes), Latin still
     Geist; no tight Latin tracking or capitals on Han, and room between its lines. */
  html:lang(zh) {
    --font: Geist, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", ui-sans-serif, system-ui, sans-serif;
    --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace;
  }
  html:lang(zh) body { line-height: 1.7; }
  html:lang(zh) :is(h1, h2, h3, .mark, .lcard h3, .hero-split h1, .md h2, .md h3) { letter-spacing: 0; }
  /* A heading breaks at its spaces and after 、，, never inside a word like 智能体; a run too long for the line still breaks
     (2026-11-08: h2 had no overflow-wrap, so a nine-glyph run in a 36 px heading overhung both gutters at 320 px). */
  html:lang(zh) :is(h1, h2) { word-break: keep-all; overflow-wrap: anywhere; }
  html:lang(zh) .hero-split h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.12; }
  html:lang(zh) :is(.eyebrow, .hero-stats dt, .foot-cols h3) { letter-spacing: .04em; }
  .seller-words { margin: 0 0 8px; }

  /* Intro videos (mindket-ui.ts galleryBlock): YouTube's still with a play mark, opening on YouTube; the page script plays it in the
     listing's preview (web/mindket-search.js) */
  .intro, .howto, .about { margin-bottom: 24px; }
  .howto h2, .about h2 { margin-top: 0; }
  .vid { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px);
         background: hsl(var(--muted)); }
  .vid img { width: 100%; height: 100%; object-fit: cover; }
  .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  /* the page script's clear cover over a player just started, catching a double click's second press (web/mindket-search.js) */
  .vid-catch { position: absolute; inset: 0; z-index: 1; }
  .vid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 56px; height: 40px;
              border-radius: 12px; background: rgb(0 0 0 / .72); color: #fff; transition: background-color .15s; }
  .vid:hover .vid-play, .vid:focus-visible .vid-play { background: hsl(0 85% 48%); }
  .vid-play svg { width: 20px; height: 20px; }

  /* How to use it (mindket-mcp-parts.ts mcpHowTo): an MCP server's install tabs, one per AI app (radio inputs, no script; the arrow keys
     move between them), each a line on where it goes and a block with Copy */
  /* .prose is a grid, whose items grow to their content: the tab row wraps onto a second line on a phone, every app in sight */
  .itabs { min-width: 0; }
  .itabs .tabs { flex-wrap: wrap; height: auto; max-width: 100%; }
  .itabs .tab { flex: none; }
  .itabs > input { position: absolute; opacity: 0; pointer-events: none; }
  .itabs > .ipanel { display: none; margin-top: 12px; }
  #i-claude-code:checked ~ #i-claude-code-panel, #i-claude-desktop:checked ~ #i-claude-desktop-panel, #i-cursor:checked ~ #i-cursor-panel, #i-vscode:checked ~ #i-vscode-panel, #i-codex:checked ~ #i-codex-panel, #i-windsurf:checked ~ #i-windsurf-panel { display: block; }
  #i-claude-code:checked ~ .tabs [for="i-claude-code"], #i-claude-desktop:checked ~ .tabs [for="i-claude-desktop"], #i-cursor:checked ~ .tabs [for="i-cursor"], #i-vscode:checked ~ .tabs [for="i-vscode"], #i-codex:checked ~ .tabs [for="i-codex"], #i-windsurf:checked ~ .tabs [for="i-windsurf"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow); }
  #i-claude-code:focus-visible ~ .tabs [for="i-claude-code"], #i-claude-desktop:focus-visible ~ .tabs [for="i-claude-desktop"], #i-cursor:focus-visible ~ .tabs [for="i-cursor"], #i-vscode:focus-visible ~ .tabs [for="i-vscode"], #i-codex:focus-visible ~ .tabs [for="i-codex"], #i-windsurf:focus-visible ~ .tabs [for="i-windsurf"] { outline: 2px solid hsl(var(--ring)); }
  .ihelp { margin: 0 0 8px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
  .icode { position: relative; min-width: 0; }
  .ipanel pre { padding-right: 88px; }
  /* Copy sits halfway down its block (the owner, 2026-11-02, of an About's code block: "make it middle"); translate, so a pressed
     .btn's own transform never moves it */
  .copy { position: absolute; top: 50%; right: 8px; translate: 0 -50%; }
  .copy[hidden] { display: none; }
  .chip-code { font-family: var(--mono); font-weight: 500; }

  /* A listing's About (market-pages.ts aboutBlock) reads as a README on GitHub or mcpservers.org (the owner, 2026-11-02: "the title and
     font size need same with the website"): each section's label a 24 px heading over a hairline, 24 px above it, its words 16 px on
     24 px lines. "About" itself stays for screen readers when a section's heading follows it, so two big headings never stack */
  .about > h2:has(+ .about-part) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
                                   white-space: nowrap; border-width: 0; }
  .about-part { display: grid; gap: 16px; min-width: 0; }
  .about-part + .about-part { margin-top: 8px; }
  .about h3 { padding-bottom: 8px; border-bottom: 1px solid hsl(var(--border)); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0; }
  .about p { font-size: 16px; line-height: 24px; color: hsl(var(--foreground) / .82); white-space: pre-line; overflow-wrap: anywhere; }
  /* Its parts (the owner, 2026-11-01): numbered steps; code with Copy (the install block's button, web/mindket-search.js); a flow, boxes
     joined by arrows that wrap on a phone; a chart, bars as long as their values against the largest, each with its label and value */
  .about-steps { display: grid; gap: 6px; padding-left: 24px; list-style: decimal; font-size: 16px; line-height: 24px; color: hsl(var(--foreground) / .82); }
  .about-steps li { padding-left: 4px; overflow-wrap: anywhere; }
  .about-steps li::marker { color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
  /* A value to type or find in an About's words and steps (market-pages.ts aboutInline): the README's code pill, a size smaller */
  /* Bold words and links in an About (market-about.ts aboutRuns, 2026-11-03): the key fact at full ink, a link underlined in the text's colour */
  .about :is(p, li, td, th) strong { color: hsl(var(--foreground)); font-weight: 600; }
  .about :is(p, li, td, th) a { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: hsl(var(--muted-foreground) / .5); overflow-wrap: anywhere; }
  .about :is(p, li, td, th) a:hover { text-decoration-color: currentColor; }
  .about-inline { padding: 1px 6px; border: 1px solid hsl(var(--border)); border-radius: 6px; background: hsl(var(--muted)); font: 14px/20px var(--mono); color: hsl(var(--foreground)); overflow-wrap: anywhere; }
  .about-code { position: relative; min-width: 0; }
  /* A code block's Copy (the user, 2026-11-05: "when hover only show the copy btn"): at its top right, shown while the pointer is over
     the block or a key is on it; a phone (no hover) keeps it shown. The block's text runs the full width under it. */
  :is(.about-code, .code-box) .copy { top: 8px; translate: none; background: hsl(var(--card)); box-shadow: var(--shadow); }
  @media (hover: hover) {
    :is(.about-code, .code-box) .copy { opacity: 0; transition: opacity .15s ease; }
    :is(.about-code, .code-box):is(:hover, :focus-within) .copy, :is(.about-code, .code-box) .copy.is-copied { opacity: 1; }
  }
  .about-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; list-style: none; }
  .about-flow li { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .about-flow li + li::before { content: '→'; content: '→' / ''; color: hsl(var(--muted-foreground)); }
  .about-flow span { padding: 6px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); font-size: 14px; line-height: 20px;
                     overflow-wrap: anywhere; }
  .about-chart { display: grid; gap: 10px; padding: 16px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
  .about-chart figcaption { font-size: 14px; line-height: 20px; font-weight: 600; }
  .about-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; line-height: 20px; }
  .about-bar-label { min-width: 0; overflow-wrap: anywhere; }
  .about-bar-value { font: 13px/20px var(--mono); color: hsl(var(--muted-foreground)); white-space: nowrap; }
  .about-bar-track { grid-column: 1 / -1; height: 8px; border-radius: 9999px; background: hsl(var(--border)); overflow: hidden; }
  .about-bar-track span { display: block; height: 100%; border-radius: inherit; background: hsl(var(--brand)); }
  /* Points and tables (the owner, 2026-11-02: "the page fully utilize the table view, point form, chart and graph if necessary"): a point
     with a dot, its lead term bold; a table as a README's on GitHub, hairline cells, its heading row on the muted grey, each row's first
     cell bold, columns at least 140 px so a phone scrolls the box sideways instead of squeezing the words */
  .about-list { display: grid; gap: 6px; padding-left: 24px; list-style: disc; font-size: 16px; line-height: 24px; color: hsl(var(--foreground) / .82); }
  .about-list li { padding-left: 4px; overflow-wrap: anywhere; }
  .about-list li::marker { color: hsl(var(--muted-foreground)); }
  .about-list strong { color: hsl(var(--foreground)); font-weight: 600; }
  .about-table { display: grid; gap: 8px; min-width: 0; }
  .about-table figcaption { font-size: 14px; line-height: 20px; font-weight: 600; }
  .about-table-scroll { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow-x: auto; }
  .about-table-scroll:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
  .about-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
  .about-table th, .about-table td { min-width: 140px; padding: 8px 12px; border-top: 1px solid hsl(var(--border)); text-align: left; vertical-align: top;
                                     overflow-wrap: anywhere; }
  .about-table th + th, .about-table th + td, .about-table td + td { border-left: 1px solid hsl(var(--border)); }
  .about-table thead th { border-top: 0; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-weight: 600; white-space: nowrap; }
  .about-table tbody th { color: hsl(var(--foreground)); font-weight: 600; }
  .about-table td { color: hsl(var(--foreground) / .82); }
  /* Compare with similar (mindket-compare-parts.ts): the About's table, its number columns as narrow as their figures, right-aligned in
     tabular figures so they read down a column, the listing's own row on a light grey, the topics a row shares quiet under its name */
  .compare > .muted { margin: 0 0 12px; }
  .about-table.cmp-table :is(th, td) { min-width: 0; }
  .about-table.cmp-table tbody th { min-width: 180px; }
  .about-table.cmp-table td { white-space: nowrap; }
  .about-table.cmp-table .cmp-num { text-align: right; font-variant-numeric: tabular-nums; }
  .about-table.cmp-table .cmp-self > * { background: hsl(var(--muted) / .5); }
  .cmp-why { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 400; color: hsl(var(--muted-foreground)); }
  .cmp-table figcaption.meta { font-size: 13px; line-height: 18px; font-weight: 400; color: hsl(var(--muted-foreground)); }
  /* At a glance under the description (mindket-routes.ts glanceBox; the owner, 2026-11-10: "the value data that user want to know"): a
     bordered box as an About's chart, its labels quiet beside their points (stacked on a phone), labels and points both at the body's
     14 px (the owner, 2026-11-10: "Need stnadard font size"), the command an About's code block on one line that scrolls inside its
     box, clear of Copy */
  .glance { margin: 0 0 24px; padding: 16px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
  .glance dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 12px 16px; margin: 0; }
  .glance dt { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
  .glance dd { min-width: 0; margin: 0; }
  .glance ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; list-style: disc; font-size: 14px; line-height: 20px; color: hsl(var(--foreground) / .82); }
  .glance li { overflow-wrap: anywhere; }
  .glance li::marker { color: hsl(var(--muted-foreground)); }
  .glance strong { color: hsl(var(--foreground)); font-weight: 600; }
  .glance pre { margin: 0; padding-right: 88px; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
  .glance pre[data-lang="text"] { white-space: pre-wrap; overflow-wrap: anywhere; }
  @media (max-width: 479px) {
    .glance dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .glance dd + dt { margin-top: 8px; }
  }
  /* The header's credit line: the repository's owner is a link, quiet until hovered */
  .credit a { color: hsl(var(--foreground)); text-decoration: underline; text-decoration-color: hsl(var(--muted-foreground) / .5); text-underline-offset: 3px; }
  .credit a:hover { text-decoration-color: currentColor; }

  /* A listing's source in its facts: the repository's mark and owner/repo */
  .src { display: inline-flex; align-items: flex-start; gap: 6px; text-align: right; overflow-wrap: anywhere; }
  .src svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }

  /* Blog and Learn stay at every desktop width (the owner, 2026-11-02: "add blog on header"): under 1,280 px the links sit closer, so the search keeps room */
  @media (max-width: 1279px) { nav.main { gap: 0; margin-left: 4px; } nav.main > a, nav.main > details > summary { padding: 0 8px; } }

  /* The footer's fifth column, For AI agents */
  @media (min-width: 769px) { .foot-cols { grid-template-columns: 1.4fr repeat(4, 1fr); } }
  .foot-cols .meta { font-size: 12px; }

  /* A tile's logo (mindket-ui.ts thumb): its maker's GitHub picture on a quiet ground; on Minda's own, Mindket's bars in white on its
     gold, in both themes (the owner, 2026-11-03: "invert the color"); on an n8n workflow, n8n's pink mark on n8n's navy, in both
     themes (the owner, 2026-11-03: "should use invert color") */
  .thumb.logo { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); }
  .thumb.house { background: #fdb700; border-color: #fdb700; }
  .thumb.house svg { width: 56%; height: 56%; }
  .thumb.house rect { fill: #fff; }
  .thumb.n8n { background: #1f1d38; border-color: #1f1d38; }
  .thumb.n8n svg { width: 60%; height: 60%; }

  /* A trending repository's badges (mindket-routes.ts trendBadge): Trendshift's own, the README's pictures or the laurel drawn as they
     are (the user, 2026-11-04: "Need use proper exactly same design"), 250 x 55 and white in both themes, as a README shows them */
  .gh-trend { display: inline-block; flex: none; margin-top: 12px; border-radius: 10px; line-height: 0; }
  .gh-trend svg, .gh-trend img { display: block; width: 250px; height: 55px; }
  .gh-trend:hover { opacity: .9; }
  /* Its numbers on GitHub, in the side's facts form */
  .gh-card h2 { font-size: 15px; margin: 0 0 8px; }
  /* Its health, one row above the facts (mindket-github-parts.ts githubHealth; the owner, 2026-11-10: "the value data that user want to
     know"): the state's pill (Active the green .badge-new, Quiet the secondary one, Archived the outline, Stale the star's amber under
     the page's ink) and a quiet line of its last change, its age and its license */
  .gh-health { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 12px; font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  .gh-health-stale { background: hsl(var(--star) / .2); color: hsl(var(--foreground)); }
  /* A Hugging Face model's or Space's tags under its facts (mindket-hf-parts.ts hfCard): the store's chips, each a link to the products with it */
  .hf-tags { margin-top: 12px; }
  .hf-tags a.chip { text-decoration: none; font-weight: 500; }
  .hf-tags a.chip:hover { background: hsl(var(--secondary) / .7); }
  /* Its repository's Star button as GitHub shows it (mindket-routes.ts githubBar; the owner, 2026-11-02: "Need to get and show this",
     then "show the badge and star only, remove other"), GitHub's small button with a count chip; an n8n workflow's head uses the same */
  .gh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 13px; }
  .gh-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .gh-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid hsl(var(--border));
            border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted)); color: hsl(var(--foreground)); font-weight: 500; text-decoration: none; }
  .gh-btn:hover { background: hsl(var(--accent)); }
  /* Star's count is shown, not a link (the owner, 2026-11-10: "remove here clickable since that is fail url"): no hover, no hand */
  .gh-btn.gh-stat { cursor: default; }
  .gh-btn.gh-stat:hover { background: hsl(var(--muted)); }
  .gh-btn svg { width: 16px; height: 16px; flex: none; color: hsl(var(--muted-foreground)); }
  .gh-count { padding: 0 6px; border-radius: 9999px; background: hsl(var(--border)); font-size: 12px; line-height: 18px; font-weight: 600; }
  /* A GitHub project's numbers read when its page is landed on (mindket-routes.ts ghLive, web/mindket-search.js githubLive; the owner,
     2026-11-08: "show the loading skeleton ... after latest updated only show the info after loading skeleton"): with a script, the Star
     button, GitHub's numbers and the facts card hold their words back under the skeleton (the shimmer of .skeleton) until the answer is
     in, so an old number is never shown first. Hidden where they stand (visibility), so nothing moves when they come. With no script
     (a crawler, a text browser) the numbers show; with a script that never answers they show after 9 s, as [data-mk-exp]'s words. */
  @media (scripting: enabled) {
    [data-gh-live] :is(dt, dd, .meta, .gh-btn, .gh-health) { position: relative; visibility: hidden; pointer-events: none; animation: mk-show 0s 9s forwards; }
    [data-gh-live] :is(.meta, .gh-health) { width: fit-content; }
    [data-gh-live] :is(dt, dd, .meta, .gh-btn, .gh-health)::after { content: ""; position: absolute; inset: 1px -1px; visibility: visible; border-radius: calc(var(--radius) - 4px);
      background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--accent) / .55) 37%, hsl(var(--muted)) 63%); background-size: 400% 100%;
      animation: shimmer 1.4s ease infinite, gh-skeleton-off 0s 9s forwards; }
    @media (prefers-reduced-motion: reduce) { [data-gh-live] :is(dt, dd, .meta, .gh-btn, .gh-health)::after { animation: gh-skeleton-off 0s 9s forwards; } }
  }
  @keyframes gh-skeleton-off { to { opacity: 0; visibility: hidden; } }
  /* A README's star-history.com chart, the preview's last picture (mindket-routes.ts starChart): its own white, in both themes */
  .gal-slide.chart, .gal-slide.chart img, .gal-thumbs a.chart { background: #fff; }
  /* A free repository's buy card (mindket-routes.ts buyCard): its site, owner/repo as a link, then the buttons and GitHub's numbers. */
  .repo-site { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
  .repo-site svg { width: 16px; height: 16px; flex: none; }
  .repo-name { font: 600 20px/1.25 var(--mono); letter-spacing: -.02em; color: hsl(var(--foreground)); overflow-wrap: anywhere; text-decoration: none; }
  .repo-name:hover { text-decoration: underline; }
  .repo-buy .gh-card { border-top: 1px solid hsl(var(--border)); padding-top: 12px; }
  .lcard-foot .price:has(svg), .sg-price:has(svg) { display: inline-flex; align-items: center; gap: 4px; }
  .lcard-foot .price svg, .sg-price svg { width: 14px; height: 14px; flex: none; }
  .gh-card .meta { margin-top: 8px; }
  /* A listing's page reads as a docs page (the owner, 2026-11-02, with a skill page beside it: "apply the bg color like the image 2
     show, and remove the border line of the right sidebar and add the seperator"): white under the words, the sidebar's blocks flat
     on it, split by hairlines, and one hairline the row's height between the column and the sidebar. Its blocks stick in .side-in */
  body:has(.l-sheet) { background: hsl(var(--card)); }
  .l-sheet { align-items: stretch; }
  .l-sheet > .side { position: static; display: block; padding-left: 32px; border-left: 1px solid hsl(var(--border)); }
  /* It sticks where it starts, under the 65 px header and main's 32 px (the user, 2026-11-04: "dont move when scroll, so make it stick on top
     will do"): no nudge as it sticks and no scroll of its own, the wheel always moves the page; what is under the window's edge shows at the
     page's end, where the sheet's end lifts it */
  .l-sheet .side-in { position: sticky; top: 97px; display: grid; gap: 24px; }
  /* The sidebar runs the page's full height, from the trail down (the user, 2026-11-02: "make this part full height"): the trail and the
     head (.l-top) and the tabs (atop .lmain, sticking down the column) sit in the column beside it; on a narrow screen it follows the head */
  .l-sheet { grid-template-areas: "top side" "main side"; grid-template-rows: auto 1fr; row-gap: 0; }
  .l-top { grid-area: top; min-width: 0; }
  .l-sheet > .lmain { grid-area: main; }
  .l-sheet > .side { grid-area: side; }
  .l-sheet .snav { margin-bottom: 24px; }
  /* Its related listings under Report this listing (listingPage's relatedSide; the owner, 2026-11-02: "show the related element"), rows
     as the search's suggestions. On a wide screen they replace the rows of cards at the column's end (.rel-main); on a phone those stay and
     these go. The side has no scroll box of its own since 2026-11-04 (above), so the rows' 8 px bleed (.side-rel .sg-item) and their
     hover's round corners show whole */
  @media (min-width: 1024px) {
    .l-sheet .rel-main { display: none; }
  }
  .side-rel { display: grid; gap: 2px; }
  .side-rel .side-h { margin: 0 0 6px; font-size: 14px; line-height: 20px; font-weight: 600; }
  .side-rel .sg-item { margin: 0 -8px; }
  .l-sheet .side-in > .card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .l-sheet .side-in > * + *, .l-sheet .side-in > * + .card { padding-top: 24px; border-top: 1px solid hsl(var(--border)); }
  /* Its sections as tabs under its head (mindket-routes.ts listingPage; the owner, 2026-11-02: "move the tab at top here red line, and
     when scroll down will strick the tab, when scroll on the section the tab will show the active bg color"): stuck under the site's
     64 px header, the one in view marked by the page script (aria-current: .tab's white chip), and a section a tab jumps to stops
     clear of both; the sidebar sticks under them too */
  /* The row sits in the middle of its bar (the owner, 2026-11-02: "make middle"); .tabs is inline-flex, so text-align centers it, and one wider than the bar fills it and scrolls from Overview (never justify-content, which clips the start) */
  .snav { position: sticky; top: var(--head-h); z-index: 30; margin-top: 20px; padding: 8px 0; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); text-align: center; }
  .l-sheet :is(.lsec, .about, .about-part, .howto) { scroll-margin-top: 136px; }
  .lsec.prose { margin-bottom: 24px; }
  .lsec h2 { margin-top: 0; }
  @media (prefers-reduced-motion: no-preference) { html:has(.snav) { scroll-behavior: smooth; } }
  /* The command that installs it, under its name with Copy (mindket-routes.ts listingPage, as mcpservers.org leads a skill's page) */
  /* A kit's README and files, open (mindket-routes.ts kitBoxes; the owner, 2026-11-05: "can those skill show at the product directly and
     have btn expand let user expand and copy"): grey boxes as the account page's (AboutParts.tsx CopyBlock), the label, Expand and Copy
     in the head; each body 400 px tall at most, scrolling with no script, cut and faded with Expand by the page script (.is-capped),
     whole once open (.is-open). Show more, a link-style word centred on the fade at the foot (the owner, 2026-11-05: "show show more
     word to click"), opens it as Expand does and says Show less once open; both are one state. The README in the About's type (the
     owner, 2026-11-02: "ensure those part are same font size and family with top"), its code blocks on the card's white so they stand
     off the grey */
  .kit-boxes { display: grid; gap: 16px; min-width: 0; }
  .kit-box { min-width: 0; margin: 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--muted) / .6); scroll-margin-top: 136px; }
  .kit-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 8px 8px 16px;
                  border-bottom: 1px solid hsl(var(--border)); font-size: 13px; line-height: 20px; font-weight: 600; color: hsl(var(--muted-foreground)); }
  .kit-box-acts { display: flex; flex: none; gap: 8px; }
  .kit-box-acts .btn[hidden] { display: none; }
  .kit-box-body { max-height: 400px; overflow: auto; padding: 16px; }
  .kit-box-body:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
  pre.kit-box-body { margin: 0; border: 0; border-radius: 0; background: none; }
  pre.kit-box-body.is-prose { white-space: pre-wrap; overflow-wrap: anywhere; }
  .kit-box.is-capped .kit-box-body { overflow: hidden; mask-image: linear-gradient(to bottom, black calc(100% - 88px), transparent calc(100% - 24px)); }
  .kit-box.is-open .kit-box-body { max-height: none; mask-image: none; }
  .kit-more { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; margin: 0 auto; padding: 0 12px; background: none;
              color: hsl(var(--foreground)); font: 600 14px/20px var(--font); text-decoration: underline; text-decoration-color: hsl(var(--muted-foreground) / .5);
              text-underline-offset: 3px; cursor: pointer; }
  .kit-more[hidden] { display: none; }
  .kit-more:hover { text-decoration-color: currentColor; }
  .kit-more:focus-visible { outline-offset: -8px; }
  .kit-box.is-capped:not(.is-open) .kit-more { position: relative; margin-top: -44px; }
  /* Sign in to copy (mindket-routes.ts copySignIn): a modal card in the popover's colours over the dimmed page, its ways full-width rows
     as every sign-in has, its Close an icon in the corner. The card fills the dialog, so a press on the dialog itself is a press on the
     dark around it, which closes it (web/mindket-search.js askSignIn); the page behind does not scroll while it is open. Its Copied mode
     (is-copied, after a free copy signed out) shows the .mk-done parts in the .mk-ask ones' place: a plain check in the success ink
     before Copied (no tinted circle), what a free account adds as checked rows, and Not now, a ghost button as wide as the ways, under them. One
     size for both modes: 400 px, 24 px in, an 18 px title as the review form's, 14 px lines, 44 px ways. */
  html:has(dialog.mk-signin[open]) { overflow: hidden; }
  .mk-signin { width: min(400px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto;
               border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 3px); background: hsl(var(--popover)); color: hsl(var(--foreground));
               box-shadow: var(--shadow-md); }
  .mk-signin::backdrop { background: rgb(0 0 0 / .55); }
  .mk-signin-in { position: relative; display: grid; gap: 8px; padding: 24px; }
  .mk-signin h2 { padding-right: 40px; font-size: 18px; line-height: 24px; font-weight: 600; }
  .mk-signin #mk-signin-lead { font-size: 14px; line-height: 20px; }
  .mk-signin:not(.is-copied) .mk-done, .mk-signin.is-copied .mk-ask { display: none; }
  .mk-signin h2 .mk-done { display: inline-flex; align-items: center; gap: 8px; }
  .mk-signin h2 .mk-done svg { width: 22px; height: 22px; }
  /* A tick that draws itself (ICONS.tick; the owner, 2026-11-08: "show the tick slowly complete the tick with animation", "NEed circle
     tick"): the ring, then the tick, in the success ink, each time it is shown (a display: none parent restarts it); drawn at once where
     motion is reduced. Copy JSON (#copy-json) shows it with Copied for 2 s after a copy (web/mindket-search.js copyJson), in place of a
     line under the buttons ("show copied btn after copy, remove the subtitle") */
  .tick-draw { flex: none; color: hsl(var(--success)); }
  .tick-draw :is(.tick-ring, .tick-mark) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tick-in .6s cubic-bezier(.65, 0, .35, 1) forwards; }
  .tick-draw .tick-mark { animation-duration: .4s; animation-delay: .5s; }
  @keyframes tick-in { to { stroke-dashoffset: 0; } }
  @media (prefers-reduced-motion: reduce) { .tick-draw :is(.tick-ring, .tick-mark) { animation: none; stroke-dashoffset: 0; } }
  #copy-json .tick-draw { display: none; width: 18px; height: 18px; }
  #copy-json.is-copied .tick-draw { display: block; }
  .mk-perks { display: grid; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid hsl(var(--border)); font-size: 14px; line-height: 20px; }
  .mk-perks p { font-weight: 600; }
  .mk-perks ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .mk-perks li { display: flex; align-items: flex-start; gap: 8px; color: hsl(var(--muted-foreground)); }
  .mk-perks li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: hsl(var(--foreground)); }
  .mk-signin-ways { display: grid; gap: 8px; margin-top: 16px; }
  .mk-signin.is-copied .mk-signin-ways { margin-top: 8px; }
  /* Not now as wide and tall as the ways, its hover across the whole row (the owner, 2026-11-08: "hover and full width btn") */
  .mk-signin .mk-later { height: 44px; color: hsl(var(--muted-foreground)); }
  .mk-signin .mk-later:hover { color: hsl(var(--foreground)); }
  .mk-way { height: 44px; }
  .mk-way svg { width: 18px; height: 18px; }
  .mk-signin-close { position: absolute; top: 18px; right: 18px; }
  .mk-signin-close svg { width: 18px; height: 18px; }
  /* Its picture (mindket-ui.ts SIGNIN_ART; the owner, 2026-11-08: "add banner image for better"): edge to edge on top in both modes, 2.5:1
     at the box's width, the gold under it until it arrives; Close sits on it as a round light chip in the gold's ink, readable on the
     yellow in both themes */
  .mk-signin-banner { position: relative; margin: -24px -24px 16px; }
  .mk-signin-art { display: block; width: 100%; max-width: none; height: auto; background: hsl(var(--accent-fill)); }
  .mk-signin-banner + .mk-signin-close { border-radius: 9999px; background: rgb(255 255 255 / .72); color: hsl(var(--accent-fill-foreground)); }
  .mk-signin-banner + .mk-signin-close:hover { background: rgb(255 255 255 / .92); color: hsl(var(--accent-fill-foreground)); }
  /* Cubby beside the tile (mindket-routes.ts copySignIn; the owner, 2026-11-10: "When pop need show smooth animation beside add moscot"):
     placed in the picture's own proportions, so it stands by the tile at any width */
  .mk-signin-cubby { position: absolute; left: 63%; bottom: 16%; width: 19%; height: auto; transform-origin: 50% 100%; pointer-events: none; }
  /* The box's motion: the card rises in as the page dims, its parts follow in order, Cubby hops up, waves and then floats; Close, Esc,
     Not now or a press on the dark play it out before the box closes (web/mindket-search.js shut). All still for reduced motion. */
  .mk-signin[open] { animation: mk-signin-in .32s cubic-bezier(.2, .9, .3, 1); }
  .mk-signin[open]::backdrop { animation: mk-signin-fade .32s ease; }
  .mk-signin[open] :is(#mk-signin-title, #mk-signin-lead, .mk-perks, .mk-signin-ways, .mk-later) { animation: mk-signin-rise .4s cubic-bezier(.2, .9, .3, 1) var(--rise, 0s) both; }
  #mk-signin-title { --rise: .06s; }
  #mk-signin-lead { --rise: .1s; }
  .mk-perks { --rise: .14s; }
  .mk-signin-ways { --rise: .18s; }
  .mk-later { --rise: .22s; }
  .mk-signin[open] .mk-signin-cubby { animation: mk-cubby-hop .8s cubic-bezier(.34, 1.4, .64, 1) .12s both, mk-cubby-float 4.2s ease-in-out .92s infinite; }
  .mk-signin.is-closing { animation: mk-signin-out .18s ease-in forwards; }
  .mk-signin.is-closing::backdrop { animation: mk-signin-fade .18s ease-in reverse forwards; }
  @keyframes mk-signin-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
  @keyframes mk-signin-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
  @keyframes mk-signin-fade { from { opacity: 0; } }
  @keyframes mk-signin-rise { from { opacity: 0; transform: translateY(8px); } }
  @keyframes mk-cubby-hop {
    0% { opacity: 0; transform: translateY(45%) scale(.5); }
    45% { opacity: 1; transform: translateY(-8%) scale(1.04) rotate(-7deg); }
    65% { transform: rotate(6deg); }
    82% { transform: rotate(-3deg); }
    100% { transform: none; }
  }
  @keyframes mk-cubby-float { 0%, 100% { transform: none; } 50% { transform: translateY(-5%); } }
  @media (prefers-reduced-motion: reduce) {
    .mk-signin[open], .mk-signin[open]::backdrop, .mk-signin.is-closing, .mk-signin.is-closing::backdrop, .mk-signin[open] :is(#mk-signin-title, #mk-signin-lead, .mk-perks, .mk-signin-ways, .mk-later),
    .mk-signin[open] .mk-signin-cubby { animation: none; }
  }
  .kit-box .md { font-size: 16px; line-height: 24px; }
  .kit-box .md h1, .kit-box .md h2 { padding-bottom: 8px; border-bottom: 1px solid hsl(var(--border)); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0; }
  .kit-box .md h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; }
  .kit-box .md > :first-child { margin-top: 0; }
  .kit-box .md pre { background: hsl(var(--card)); }
  .kit-said { margin-top: -8px; }
  @media (max-width: 1023px) {
    .l-sheet { grid-template-areas: "top" "side" "main"; grid-template-rows: auto; row-gap: 24px; }
    .l-sheet .snav { margin-top: 0; }
    .l-sheet > .side { padding: 0 0 24px; border-left: 0; border-bottom: 1px solid hsl(var(--border)); }
    .l-sheet .side-in { position: static; }
    .side-rel { display: none; }
  }
  /* A number or a date stays on one line; a long label ("Open issues and pull requests") wraps instead */
  .gh-card .kv dd { white-space: nowrap; }
  /* The Trust card (mindket-trust-parts.ts trustCard, 2026-11-10): each source's facts with the day they were read, a hairline between
     two sources; a scoped npm name and a list of install scripts are long, so they wrap */
  .trust-card .trust-lead { margin: 0 0 12px; }
  .trust-src + .trust-src { margin-top: 12px; padding-top: 12px; border-top: 1px solid hsl(var(--border)); }
  .trust-card .kv :is(.pkg-name, .trust-wrap) { white-space: normal; }

  /* What people say (mindket-routes.ts mentionsBlock; the user, 2026-11-03: "make better view here, row by row, show platform logo,
     standard fonrt size"): one card, a row a post or comment opening it on its site, its site's logo at the row's start, every line at
     the standard 14 px (its counts the quiet 13 of a side row's line); no pictures of anyone */
  .said-block { margin-top: 32px; }
  .said-block h2 { font-size: 20px; line-height: 28px; margin-top: 0; }
  /* .prose is a grid, whose items grow to their content: without min-width 0 a long post widens the list past a phone's edge */
  .said-list { display: grid; min-width: 0; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); overflow: hidden; }
  .said { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 16px; color: hsl(var(--foreground)); text-decoration: none; transition: background-color .15s; }
  .said + .said { border-top: 1px solid hsl(var(--border)); }
  .said:hover, .said:focus-visible { background: hsl(var(--muted) / .5); }
  .said-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .said-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
  .said-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 75%; font-weight: 600; color: hsl(var(--foreground)); }
  /* Its date, quieter than the name (the user, 2026-11-03: "the date time color need dim and suitable small font size") */
  .said-head time { font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground) / .8); }
  .said-title { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
  .said-text { font-size: 14px; line-height: 20px; color: hsl(var(--foreground) / .82); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .said-counts { margin-top: 2px; font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }

  /* The listing */
  .blog-head { display: grid; gap: 12px; margin: 8px 0 20px; max-width: 760px; }
  .blog-topics { margin-bottom: 24px; }
  .post-card { display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
  .post-card:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .post-card-cover { display: block; aspect-ratio: 16 / 9; background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); }
  .post-card-cover img { width: 100%; height: 100%; object-fit: cover; }
  .post-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
  .post-card-title { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
  .post-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .post-card-desc { font-size: 15px; line-height: 1.6; color: hsl(var(--muted-foreground)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .post-card .meta { margin-top: auto; }
  .post-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .post-feature .post-card-cover { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid hsl(var(--border)); }
  .post-feature .post-card-body { justify-content: center; gap: 14px; padding: 32px; }
  .post-feature .post-card-title { font-size: 30px; line-height: 1.12; letter-spacing: -.03em; }
  .post-feature .meta { margin-top: 0; }
  /* the feature card's date and Read the article share one row, the button on the right (the user, 2026-11-05: "move" it there) */
  .post-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .post-card-more { margin-left: auto; }
  .post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
  .blog-foot { margin-top: 32px; }
  .blog-foot a:hover { color: hsl(var(--foreground)); text-decoration: underline; }
  @media (max-width: 860px) {
    .post-feature { grid-template-columns: minmax(0, 1fr); }
    .post-feature .post-card-cover { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
    .post-feature .post-card-body { padding: 20px; }
    .post-feature .post-card-title { font-size: 24px; }
  }

  /* The home page's blog section (mindket-blog.ts homeBlog; the user, 2026-11-03: "first latest postng need big compare with other"):
     from 1,024 px the newest post's card, its cover on top, beside a column of the next posts as rows (a 16:9 cover 176 px wide, the
     title and the description on two lines each, the date), its first row level with the card's top and the rows 16 px apart, no rule (the
     user, 2026-11-03: "remove the seperator and add 1 more blgo post and align with the left"; 2026-11-04, of the rows spread to the
     card's height: "remove the gap"); narrower, the card is the blog page's own feature (cover beside its words, its left edge kept where it is cropped,
     stacked under 861 px) and the rows follow it;
     on a phone the rows drop the description */
  .home-blog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-blog > .post-feature .post-card-cover img { object-position: left center; }
  .home-posts { display: grid; gap: 20px; }
  .home-post { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 16px; align-items: center; }
  .home-post-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted)); }
  .home-post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
  .home-post:hover .home-post-cover img { transform: scale(1.04); }
  .home-post-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .home-post h3 { font-size: 16px; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .home-post h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .home-post-desc { color: hsl(var(--muted-foreground)); font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .home-post-cover img { transition: none; } .home-post:hover .home-post-cover img { transform: none; } }
  @media (min-width: 1024px) {
    .home-blog { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .home-blog > .post-feature { align-self: start; grid-template-columns: minmax(0, 1fr); }
    .home-blog > .post-feature .post-card-cover { aspect-ratio: 16 / 9; min-height: 0; border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
    .home-blog > .post-feature .post-card-body { padding: 24px; gap: 12px; }
    .home-blog > .post-feature .post-card-title { font-size: 28px; }
    .home-posts { display: flex; flex-direction: column; gap: 16px; }
  }
  @media (max-width: 480px) {
    .home-post { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
    .home-post h3 { font-size: 15px; line-height: 21px; }
    .home-post-desc { display: none; }
  }

  /* The home page's Hot news & deals (mindket-hot.ts; the user, 2026-11-03: "little like pinterest style, follow the red line, so the
     section will have 8 banner there", "when hover the banner will show the gradint black shadow on the banner show the title and
     subtitle with slowly animate"): up to eight banners, each one link (a.hot-tile), placed by grid areas named for their slots (hot-a
     to hot-h, given by mindket-hot.ts by each picture's shape). From 1,024 px four columns of six rows, the grid at the aspect that makes
     a two-row tile 16:9 so the columns end flush: eight are a (the full height), b short over c tall, d tall over e short, f g h short;
     seven end in two three-row tiles, six in one full one, five keep three columns, four or fewer are one row of 16:9 tiles. Narrower,
     two columns on rows of a set height (a short tile stays within HOT_FIT of 16:9 from 360 px up), the tall tiles two or three rows,
     with no hole. A picture far from its slot's shape (fit-whole) is shown whole over a blurred copy of itself; one with none shows its
     logo on a quiet panel with its words always shown. On hover or focus a black shade rises, the picture grows a little, blurs and
     dims, and the title and description slide up, one after another, with no label (the user, 2026-11-03, of the Higgsfield banner's
     words over its own big type: "stil hard to see the word, make it better, and remove the label"); on a touch screen they always show
     over the shade; with reduced motion they only fade. White words with a soft shadow in light and dark. The playbook's poster leads
     in slot a (mindket-offer-css.ts .hot-offer) and grows into its full banner under the pointer (.hot-full below). */
  .hot { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(100px, 26vw, 220px); }
  .hot[data-n="1"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "a"; }
  .hot[data-n="2"] { grid-template-areas: "a b"; }
  .hot[data-n="3"] { grid-template-areas: "a a" "a a" "b c"; }
  .hot[data-n="4"] { grid-template-areas: "a b" "c d"; }
  .hot[data-n="5"] { grid-template-areas: "a b" "a c" "d c" "d e"; }
  .hot[data-n="6"] { grid-template-areas: "a b" "a c" "a c" "f d" "f d" "f e"; }
  .hot[data-n="7"] { grid-template-areas: "a b" "a c" "a c" "d e" "d f" "g f"; }
  .hot[data-n="8"] { grid-template-areas: "a b" "a c" "a c" "d e" "d f" "g h"; }
  .hot-a { grid-area: a; } .hot-b { grid-area: b; } .hot-c { grid-area: c; } .hot-d { grid-area: d; }
  .hot-e { grid-area: e; } .hot-f { grid-area: f; } .hot-g { grid-area: g; } .hot-h { grid-area: h; }
  @media (min-width: 1024px) {
    .hot { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); aspect-ratio: 2.32; }
    .hot[data-n="8"] { grid-template-areas: "a b d f" "a b d f" "a c d g" "a c d g" "a c e h" "a c e h"; }
    .hot[data-n="7"] { grid-template-areas: "a b d f" "a b d f" "a c d f" "a c d g" "a c e g" "a c e g"; }
    .hot[data-n="6"] { grid-template-areas: "a b d f" "a b d f" "a c d f" "a c d f" "a c e f" "a c e f"; }
    .hot[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b d" "a b d" "a c d" "a c d" "a c e" "a c e"; aspect-ratio: 1.74; }
    .hot:is([data-n="1"], [data-n="2"], [data-n="3"], [data-n="4"]) { grid-template-rows: minmax(0, 1fr); }
    .hot[data-n="4"] { grid-template-areas: "a b c d"; aspect-ratio: 7.4; }
    .hot[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "a b c"; aspect-ratio: 5.48; }
    .hot:is([data-n="1"], [data-n="2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b"; aspect-ratio: 3.6; }
  }
  .hot-tile { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; container-type: size;
              border-radius: calc(var(--radius) + 3px); background: hsl(var(--muted)); color: #fff; }
  .hot-tile:focus-visible { border-radius: calc(var(--radius) + 3px); }
  /* Its edge over the picture, so a white banner still ends on a white page */
  .hot-tile::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px hsl(var(--foreground) / .08); }
  .hot-pic { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .5s ease; }
  .hot-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .fit-whole .hot-pic img { object-fit: contain; }
  /* Behind a picture shown whole, a faint wash of its colours on the tile's ground (a drawn card's black code box blurred at full
     strength left dark smudges on :1931's real listings, 2026-11-03) */
  .fit-whole .hot-pic { background: hsl(var(--muted)); }
  .fit-whole .hot-pic .hot-blur { object-fit: cover; filter: blur(48px) saturate(1.1); transform: scale(1.3); opacity: .45; }
  .hot-tile::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s ease;
                     background: linear-gradient(to top, rgb(0 0 0 / .92), rgb(0 0 0 / .78) 38%, rgb(0 0 0 / .3) 72%, rgb(0 0 0 / .08)); }
  .hot-cap { position: absolute; z-index: 2; inset: auto 0 0; display: grid; justify-items: start; gap: 6px; padding: 16px 18px 18px; }
  /* A product of Mindket's own wears its label on the picture, always shown (the owner, 2026-11-10: "label the product"; mindket-hot.ts HotPick) */
  .hot-label { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 4px 10px; border-radius: 9999px; background: hsl(var(--card));
               color: hsl(var(--foreground)); font-size: 12px; line-height: 16px; font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
  .hot-cap > * { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1); }
  .hot-cap h3 { transition-delay: .04s; font-size: 17px; line-height: 23px; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgb(0 0 0 / .55);
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hot-cap p { transition-delay: .12s; font-size: 14px; line-height: 20px; color: rgb(255 255 255 / .92); overflow-wrap: anywhere; text-shadow: 0 1px 2px rgb(0 0 0 / .5);
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hot-tile:is(:hover, :focus-visible)::after { opacity: 1; }
  .hot-tile:is(:hover, :focus-visible) .hot-cap > * { opacity: 1; transform: none; }
  .hot-tile:is(:hover, :focus-visible) .hot-pic { transform: scale(1.04); filter: blur(3px) brightness(.75); }
  /* No picture: its logo at the top, its words under it, always shown, in the page's ink */
  .no-pic { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px 18px 18px;
            background: linear-gradient(160deg, hsl(var(--muted)), hsl(var(--accent))); color: hsl(var(--foreground)); }
  .no-pic::after { display: none; }
  .no-pic .hot-pic, .no-pic .hot-cap { position: static; }
  .no-pic .hot-cap { padding: 0; }
  .no-pic .hot-cap > * { opacity: 1; transform: none; }
  .no-pic .hot-cap :is(h3, p) { text-shadow: none; }
  .no-pic .hot-cap p { color: hsl(var(--muted-foreground)); }
  .no-pic:is(:hover, :focus-visible) .hot-pic { filter: none; }
  /* A short tile keeps its words in it: a smaller title, the description on one line, then none; the full-height tile's title larger */
  @container (max-height: 180px) {
    .hot-cap { gap: 4px; padding: 12px 14px 14px; }
    .hot-cap h3 { font-size: 15px; line-height: 20px; }
    .hot-cap p { font-size: 13px; line-height: 18px; -webkit-line-clamp: 1; }
    .no-pic .thumb-lg { width: 40px; height: 40px; border-radius: var(--radius); }
    .no-pic .thumb-lg svg { width: 20px; height: 20px; }
  }
  @container (max-height: 132px) { .hot-cap { padding: 10px 12px 12px; } .hot-cap p { display: none; } }
  @container (min-height: 420px) and (min-width: 260px) { .hot-cap { padding: 20px 22px 22px; } .hot-cap h3 { font-size: 21px; line-height: 27px; } }
  @media (hover: none) {
    .hot-tile::after { opacity: 1; }
    .hot-cap > * { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hot-pic, .hot-cap > * { transition-property: opacity; }
    .hot-cap > *, .hot-tile:is(:hover, :focus-visible) .hot-pic { transform: none; }
  }
  /* The lead grows into its full banner (mindket-hot.ts homeHot a.hot-full; the user, 2026-11-06: "when hover the first banner, auto
     expand to full for full banner with smooth animation"): from 1,024 px under a mouse the banner lies over the whole wall, hidden and
     cut to slot a (the first of --hot-cols columns, 16 px apart). Pointed at for 0.12 s, the lead opens the cut to the whole wall in
     0.55 s while the banner fades in over the tile, its words rising after; it holds while the pointer is on it and folds back
     into the tile when the pointer leaves the wall. The lead itself keeps still meanwhile (no shade, zoom or caption). With reduced
     motion it only fades; on a touch screen or a narrower window the tile stays a tile. */
  .hot-full { display: none; }
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .hot { position: relative; --hot-cols: 4; }
    .hot[data-n="5"] { --hot-cols: 3; }
    .hot-full { --hot-r: calc(var(--radius) + 3px); --hot-ease: cubic-bezier(.22, .61, .36, 1); position: absolute; inset: 0; z-index: 4; display: grid;
                border-radius: var(--hot-r); container-type: size; opacity: 0; visibility: hidden;
                clip-path: inset(0 calc(100% - (100% - (var(--hot-cols) - 1) * 16px) / var(--hot-cols)) 0 0 round var(--hot-r));
                transition: clip-path .5s var(--hot-ease) .1s, opacity .25s ease .45s, visibility 0s linear .7s; }
    .hot-full > * { opacity: 0; transform: translateY(12px); transition: opacity .15s ease, transform .15s ease; }
    .hot-tile:hover + .hot-full, .hot-full:hover { clip-path: inset(0 round var(--hot-r)); opacity: 1; visibility: visible;
                                                   transition: clip-path .55s var(--hot-ease) .12s, opacity .2s ease .12s, visibility 0s linear .12s; }
    .hot-tile:hover + .hot-full > *, .hot-full:hover > * { opacity: 1; transform: none; transition: opacity .45s var(--hot-ease) .28s, transform .55s var(--hot-ease) .28s; }
    .hot-tile:hover + .hot-full > :nth-child(2), .hot-full:hover > :nth-child(2) { transition-delay: .36s; }
    .hot-tile:has(+ .hot-full):hover::after { opacity: 0; }
    .hot-tile:has(+ .hot-full):hover .hot-pic { transform: none; filter: none; }
    .hot-tile:has(+ .hot-full):hover .hot-cap > * { opacity: 0; transform: translateY(16px); }
  }
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .hot .hot-full { clip-path: none; }
    .hot .hot-full > * { transform: none; }
  }

  /* The home page's banner under the hero (mindket-hot.ts homeBanner; the user, 2026-11-03, of the playbook's gold band: "remain this
     part and make it carousel banner like wavespeed"): its slides side by side in a scroll-snap track, each as tall as the tallest, the
     playbook's on the gold (mindket-offer-css.ts .home-offer), an item's dark in light and dark: its picture whole on the right over a
     blurred, darkened copy filling the slide, white words on the left; a post's own banner background (.hb-own, the user, 2026-11-04:
     "use this bg banner for the higgsfield banner, replace it") fills it whole and sharp instead, its art on the right, a shade on the
     left under the words, set in its brand's look (.hb-brand). WaveSpeed's row of thumbnails sits at the foot's right with no panel behind it (the user, 2026-11-04, of its
     glass: "remove the border background"), each its picture and name, the shown one ringed and its bar filling for the time it shows (the page script then shows the next); the
     bar holds while the banner is pointed at or focused, and stands full with reduced motion, nothing turning by itself. Under 900 px a
     slide is one column, an item's picture on top, and the thumbnails a row under the slides that scrolls sideways. */
  .home-banner { position: relative; min-width: 0; border-radius: 20px; overflow: clip; isolation: isolate; }
  .stack > .home-banner { padding-top: 0; border-top: 0; }
  .hb-track { gap: 0; border-radius: 0; }
  .hb-slide { position: relative; display: grid; min-width: 0; scroll-snap-align: start; padding: 48px 56px 136px; }
  .hb-item { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; isolation: isolate; background: #0b0b0f; color: #fff; }
  .hb-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
  .hb-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.3) brightness(.42); transform: scale(1.2); }
  .hb-copy { display: grid; gap: 16px; justify-items: start; min-width: 0; }
  .hb-copy :is(h2, .hb-h) { font-family: var(--font); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; text-wrap: balance;
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hb-copy h2 a { color: inherit; }
  .hb-copy p { font-size: 16px; line-height: 1.55; color: rgb(255 255 255 / .82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hb-go { margin-top: 4px; background: #fff; color: #0b0b0f; }
  .hb-go:hover { background: rgb(255 255 255 / .86); }
  .hb-art { display: block; justify-self: center; min-width: 0; max-width: 100%; overflow: hidden; border-radius: 14px;
            box-shadow: 0 30px 60px -24px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .12); }
  .hb-art img { width: auto; max-width: 100%; max-height: 340px; object-fit: contain; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
  .hb-art:hover img { transform: scale(1.03); }
  .hb-own .hb-bg img { filter: none; transform: none; object-position: right center; }
  .hb-own .hb-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 55%); }
  /* a brand's own banner, its words set as the banner sets its own (the user, 2026-11-04, of the Higgsfield slide: "this part need design
     close with the banner and state with the logo"): the logo and name first, the title heavier with its highlighted words in the brand's
     accent (kept on one line in Chinese, where a break could part "7" from "天无限"), and the button a pill of that accent with dark words
     and a soft glow. Its own short title (the user, 2026-11-06: "make it like user like to see the item free or % percentage cut cost and price
     and number") in the theme's Geist at its heading weight ("change the title font family to use theme font"), larger, its free, % off or
     number words on a tag of the accent with dark type; under it the price (.hb-deal): now large in the accent, was struck through, a note */
  .hb-brand { gap: 18px; }
  .hb-logo { display: inline-flex; align-items: center; gap: 12px; font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: -.01em; }
  .hb-logo img { width: 40px; height: 40px; border-radius: 10px; }
  /* The tag is one block with four round corners (the user, 2026-11-07, of "free for" and "1 year" split over two lines, each cut flat on
     one side: "this kind of highlight is weird, why top or bottom only have border radius? fix"): the title's line clamp clipped the tag's
     top on line one and its bottom on line two. A brand's title is capped at 48 characters, so it needs no clamp. */
  .hb-brand :is(h2, .hb-h) { font-size: clamp(32px, 3.7vw, 52px); line-height: 1.12; font-weight: 700; letter-spacing: -.04em; display: block; overflow: visible; }
  .hb-brand :is(h2, .hb-h) em { display: inline-block; font-style: normal; color: #0b0b0f; background: var(--hb-accent); padding: .02em .18em .06em; border-radius: .2em;
                    line-height: 1.02; box-shadow: 0 6px 24px -10px var(--hb-accent); }
  .hb-copy p.hb-deal { display: flex; -webkit-line-clamp: unset; overflow: visible; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-variant-numeric: tabular-nums; }
  .hb-deal strong { font-size: clamp(26px, 2.6vw, 36px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--hb-accent); }
  .hb-deal s { font-size: 18px; color: rgb(255 255 255 / .55); text-decoration-thickness: 2px; }
  .hb-deal span { font-size: 15px; color: rgb(255 255 255 / .82); }
  .hb-brand p:not(.hb-deal) { -webkit-line-clamp: 2; }
  .hb-brand :is(h2, .hb-h) em:lang(zh) { white-space: nowrap; }
  .hb-brand .hb-go { border-radius: 999px; background: var(--hb-accent); color: #0b0b0f; font-weight: 700; box-shadow: 0 8px 28px -8px var(--hb-accent); }
  .hb-brand .hb-go:hover { background: var(--hb-accent); filter: brightness(1.06); }
  .hb-thumbs { position: absolute; right: 32px; bottom: 28px; z-index: 2; display: flex; gap: 8px; max-width: calc(100% - 64px); overflow-x: auto; scrollbar-width: none; }
  .hb-thumbs::-webkit-scrollbar { display: none; }
  .hb-thumbs a { position: relative; flex: none; width: 116px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; border: 1px solid rgb(255 255 255 / .18);
                 color: #fff; opacity: .7; transition: opacity .2s ease, border-color .2s ease; }
  .hb-thumbs a:is(:hover, :focus-visible, [aria-current="true"]) { opacity: 1; border-color: rgb(255 255 255 / .92); }
  .hb-thumb-pic { position: absolute; inset: 0; }
  .hb-thumb-pic img { width: 100%; height: 100%; object-fit: cover; }
  /* a banner background's thumbnail: its right part, x 1,150-2,560 of 2,560 (where its picture sits, the left being ground for the words),
     vertically centred, so the thumbnail looks like its slide */
  .hb-thumb-own img { position: absolute; right: 0; top: 50%; width: 182%; max-width: none; height: auto; object-fit: fill; transform: translateY(-50%); }
  .hb-name { position: absolute; inset: auto 0 0; padding: 14px 8px 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 16px;
             font-weight: 600; background: linear-gradient(to top, rgb(0 0 0 / .82), rgb(0 0 0 / 0)); text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
  .hb-bar { position: absolute; inset: auto 0 0; height: 3px; background: #fff; transform: scaleX(0); transform-origin: left; }
  .hb-thumbs a[aria-current="true"] .hb-bar { animation: hb-fill 6s linear forwards; }
  .home-banner:is(:hover, :focus-within) .hb-thumbs a .hb-bar { animation-play-state: paused; }
  @keyframes hb-fill { to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) {
    .hb-thumbs a[aria-current="true"] .hb-bar { animation: none; transform: none; }
    .hb-art img { transition: none; }
  }
  @media (max-width: 900px) {
    .home-banner { border-radius: 16px; }
    .hb-slide { padding: 28px 24px; align-content: start; }
    .hb-item { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .hb-art { order: -1; justify-self: stretch; aspect-ratio: 16 / 9; }
    .hb-art img { width: 100%; height: 100%; max-height: none; }
    .hb-copy p { font-size: 15px; }
    .hb-thumbs { position: static; max-width: none; padding: 10px 12px; background: #0b0b0f; }
    .hb-own .hb-bg { position: relative; inset: auto; z-index: 0; order: -1; aspect-ratio: 16 / 10; border-radius: 14px; }
    .hb-own .hb-bg::after { content: none; }
    .hb-thumbs a { width: 96px; }
  }

  /* A post: On this page on the left, the reading column, the sidebar on the right, filling the page's width (the user, 2026-11-02:
     "fit the width size", "move the right side section scroll to left"). The article comes first in the page, the grid places it. */
  .post-layout { grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 48px; margin-top: 8px; }
  .post-layout > .post-main { grid-column: 2; grid-row: 1; }
  .post-layout > .post-side { grid-column: 3; grid-row: 1; position: static; align-self: stretch; align-content: start; }
  /* Its links' tint reaches 10 px past their words: the scroll box keeps that room so it is not cut */
  .post-toc-side { grid-column: 1; grid-row: 1; position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; scrollbar-width: thin;
                   margin-left: -10px; padding: 0 4px 8px 10px; }
  /* The sidebar scrolls with the post, and its last card (the Token Playbook) stays in view for the rest of it */
  .post-side > :last-child { position: sticky; top: 72px; }
  /* Its lists (Share, Related and Latest articles, Explore, Topics) are plain sections with no box around them (the owner, 2026-11-09:
     "right sidebar, remove th border line and padding"); its call to act and the Playbook's card keep theirs. */
  .post-side { gap: 28px; }
  .post-side > .card:not(.post-cta, .post-offer) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .post-main { display: grid; gap: 28px; }
  .post-head { display: grid; gap: 16px; }
  /* the title fills its column, never balanced into short lines (the user, 2026-11-06, of a tool page's three-line title: "make title full width") */
  .post-head h1 { font-size: clamp(32px, 4.2vw, 46px); line-height: 1.08; letter-spacing: -.035em; text-wrap: pretty; }
  /* The answer opens the body under the cover (not the head: the user, 2026-11-03), on a quiet fill: never a coloured bar down one side (the owner, 2026-11-02, "never use this kind of border line").
     In the body's own size, not a step up (the user, 2026-11-03: "change to standard font size") */
  .post-answer { font-size: 17px; line-height: 30px; padding: 16px 20px; border-radius: calc(var(--radius) + 4px); background: hsl(var(--muted)); }
  .post-byline { display: flex; flex-wrap: wrap; gap: 4px 6px; }
  .post-byline span { color: hsl(var(--foreground)); font-weight: 500; }
  .post-cover { margin: 0; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--muted)); aspect-ratio: 16 / 9; }
  .post-cover img { width: 100%; height: 100%; object-fit: cover; }
  .post-takeaways { display: grid; gap: 12px; }
  .post-takeaways h2 { font: 600 13px/18px var(--font); color: hsl(var(--muted-foreground)); }
  .post-takeaways ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; font-size: 16px; line-height: 1.6; }
  .post-body { font-size: 17px; line-height: 30px; gap: 20px; }
  .post-body p, .post-body li { overflow-wrap: break-word; }
  .post-sec { display: grid; gap: 18px; scroll-margin-top: 88px; }
  .post-sec + .post-sec { margin-top: 20px; padding-top: 32px; border-top: 1px solid hsl(var(--border)); }
  .post-body h2 { font-size: 28px; line-height: 34px; letter-spacing: -.025em; margin-top: 0; }
  .post-body h3 { font-size: 19px; line-height: 28px; margin-top: 8px; }
  .post-body ul, .post-body ol { gap: 8px; }
  .post-body code { font-size: 15px; }
  .post-body :not(pre) > code { overflow-wrap: anywhere; }
  .post-body pre { margin: 0; font-size: 14px; line-height: 22px; }
  .code-box { position: relative; }
  .post-body table { font-size: 15px; line-height: 1.55; }
  .post-body th, .post-body td { vertical-align: top; overflow-wrap: break-word; }
  .post-body tbody th { color: hsl(var(--foreground)); font-weight: 600; }
  /* A table of five or more columns (mindket-blog.ts STACK_COLUMNS) as one card per row on a phone: the row's name as its title, each
     cell under its column's name, the caption last (the user, 2026-11-08, of the computer use comparison's table). */
  @media (max-width: 640px) {
    .post-body table.stack { display: flex; flex-direction: column; }
    .post-body table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .post-body table.stack caption { order: 1; display: block; }
    .post-body table.stack tbody, .post-body table.stack tr, .post-body table.stack tbody th, .post-body table.stack td { display: block; }
    .post-body table.stack tr { padding: 14px 0; border-bottom: 1px solid hsl(var(--border)); }
    .post-body table.stack tbody th, .post-body table.stack td { padding: 0; border: 0; }
    .post-body table.stack tbody th { font-size: 17px; line-height: 24px; margin-bottom: 6px; }
    .post-body table.stack td + td { margin-top: 8px; }
    .post-body table.stack td::before { content: attr(data-label); display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: hsl(var(--muted-foreground)); }
  }
  .post-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .post-shot, .post-video { display: grid; gap: 8px; margin: 0; }
  /* One shot across the column (Mindber's inline screenshot), from any site a shot may show */
  .post-shot.is-wide { grid-column: 1 / -1; }
  /* A post shot is mostly a tall phone capture: on its own row it grows to 720 px high at most, centred */
  .post-shot.is-wide > a { display: flex; justify-content: center; }
  .post-shot.is-wide img { width: auto; max-width: 100%; max-height: 720px; }
  .post-shot.is-wide figcaption { text-align: center; }
  .post-shot img { width: 100%; height: auto; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: #fff; }
  .post-shot figcaption, .post-video figcaption { font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  /* Red, so the play button shows on a dark thumbnail too (the store's dark one vanished on Lex Fridman's black frame) */
  .post-video .vid-play { width: 68px; height: 48px; background: hsl(0 85% 48%); }
  .post-video .vid-play svg { width: 24px; height: 24px; }
  .post-body caption { caption-side: bottom; padding-top: 8px; font-size: 13px; color: hsl(var(--muted-foreground)); text-align: left; }
  /* A walkthrough (MindketPostBlock.walkthrough; the user, 2026-11-06: "show the print screen of the app step by step how to use"): the
     steps are numbered like any steps list, and each one's screenshot runs under its words across the whole column, back out over the
     number's indent, in the post shot's hairline and container radius. The picture is a link to the file at its own size. */
  .post-body ol.walk { --walk-in: 24px; display: grid; gap: 32px; padding-left: var(--walk-in); list-style: decimal; }
  .walk > li::marker { font-weight: 600; color: hsl(var(--muted-foreground)); }
  .walk-text { overflow-wrap: break-word; }
  .walk-shot { margin: 14px 0 0 calc(var(--walk-in) * -1); }
  .walk-shot a { display: block; }
  .walk-shot img { display: block; width: 100%; height: auto; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--muted)); }
  .walk-taken { font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  .post-note { font-size: 15px; line-height: 1.6; padding: 12px 16px; border-radius: var(--radius); background: hsl(var(--muted)); }
  /* Its questions open one at a time, as every FAQ on Mindket (the user, 2026-11-02: "faq all use dropdown according"): the site's
     .faq rows, the question at the body's size */
  .post-faq { border-top: 1px solid hsl(var(--border)); }
  .post-faq summary { font-weight: 600; }
  .post-sources { display: grid; gap: 12px; padding-left: 20px; list-style: decimal; font-size: 15px; line-height: 1.55; }
  .post-url { display: block; font: 12px/18px var(--mono); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
  .post-cta-title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
  .post-cta { display: grid; gap: 10px; }
  .post-band { margin-top: 8px; }
  .post-twin a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: hsl(var(--muted-foreground) / .5); }
  .post-twin a:hover { color: hsl(var(--foreground)); }
  .toc ol { display: grid; gap: 2px; margin-top: 4px; }
  .toc a, .post-toc-phone a { display: block; padding: 5px 10px; margin-left: -10px; border-radius: 6px; font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
  .toc a:hover, .post-toc-phone a:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
  .toc a[aria-current] { color: hsl(var(--foreground)); font-weight: 600; background: hsl(var(--muted)); }
  .post-related { display: grid; gap: 12px; font-size: 14px; line-height: 20px; }
  .post-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
  .post-mini img { width: 96px; height: 54px; object-fit: cover; border: 1px solid hsl(var(--border)); border-radius: 6px; background: hsl(var(--muted)); }
  .post-mini > span { display: grid; gap: 2px; }
  .post-mini-title { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .post-mini .meta { font-size: 12px; line-height: 16px; }
  .post-mini:hover .post-mini-title { text-decoration: underline; text-underline-offset: 3px; }
  .post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .post-share .copy { position: static; translate: none; width: 100%; height: 40px; margin-top: 4px; border-radius: 9999px; }

  /* A post's charts (mindket-blog-charts.ts; the user, 2026-11-03: Mindber's StatHero, bars, TimelineFlow, matrix, callout, RatingScale):
     each a figure on the reading column with its title, the numbers as text and the source line in small muted type. No bar down any
     side (the owner, 2026-11-02): the callout and the stats are tinted cards. */
  .post-fig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 4px 0 0; }
  .post-fig-head { display: grid; gap: 2px; }
  .post-fig-title { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
  .post-fig-note { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
  .post-src { font-size: 12px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  .post-src a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: hsl(var(--muted-foreground) / .5); }
  .post-src a:hover { color: hsl(var(--foreground)); }
  .post-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: 12px; }
  .post-stat { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: calc(var(--radius) + 4px);
               background: linear-gradient(hsl(var(--muted)), hsl(var(--muted) / .45)); }
  .post-stat-value { font: 700 40px/1.05 var(--font); letter-spacing: -.04em; color: hsl(var(--brand)); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .post-stat-label { font-size: 14px; line-height: 20px; font-weight: 500; }
  .post-stat .post-src { margin-top: auto; padding-top: 4px; }
  .post-stats.is-hero .post-stat { padding: 24px 28px; }
  .post-stats.is-hero .post-stat-value { font-size: 52px; }
  .post-stats.is-hero .post-stat-label { font-size: 16px; line-height: 24px; max-width: 36em; }
  .post-bars, .post-timeline, .post-rating, .post-matrix { padding: 20px 24px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--card)); }
  /* .post-fig first: .md ul / ol (and .post-body's) would give these lists a bullet, an indent and their own gap */
  .post-fig .post-bars-list { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
  .post-bar { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; font-size: 14px; line-height: 20px; }
  .post-bar-label { color: hsl(var(--muted-foreground)); text-align: right; overflow-wrap: break-word; }
  .post-bar-track { position: relative; height: 20px; border-radius: 6px; background: hsl(var(--muted)); overflow: hidden; }
  .post-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: hsl(var(--foreground) / .72); }
  .post-bar-value { min-width: 3.5em; font: 600 13px/20px var(--mono); font-variant-numeric: tabular-nums; }
  .post-bar.is-high .post-bar-label { color: hsl(var(--foreground)); font-weight: 600; }
  .post-bar.is-high .post-bar-fill { background: hsl(var(--accent-fill)); }
  .post-fig .post-tl { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .post-tl-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
  .post-tl-item::before { content: ''; position: absolute; left: 13px; top: 38px; bottom: -10px; width: 2px; background: repeating-linear-gradient(hsl(var(--border)) 0 2px, transparent 2px 5px); }
  .post-tl-item:last-child::before { display: none; }
  .post-tl-mark { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 10px; border: 2px solid hsl(var(--border)); border-radius: 50%;
                  background: hsl(var(--card)); font: 600 12px/1 var(--mono); }
  .post-timeline.is-dated .post-tl-mark::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--brand)); }
  .post-tl-card { display: grid; gap: 4px; padding: 12px 16px; border-radius: calc(var(--radius) + 2px); background: hsl(var(--muted)); }
  /* A step's date in the theme's sans (the user, 2026-11-09, of the mono date: "change to other suitable font family, match with theme") */
  .post-tl-when { font: 600 13px/18px var(--font); font-variant-numeric: tabular-nums; color: hsl(var(--brand)); }
  .post-tl-title { font-size: 16px; line-height: 24px; font-weight: 600; }
  .post-tl-text { font-size: 14px; line-height: 22px; color: hsl(var(--muted-foreground)); }
  /* relative: the marks' words (.sr-only, absolute) are clipped by the scroller, or a phone scrolls the page sideways to them */
  .post-matrix .scroll { position: relative; margin: 0 -24px; padding: 0 24px; }
  .post-matrix table { font-size: 14px; }
  .post-matrix thead td { border: 0; }
  .post-matrix :is(th, td).is-pick { background: hsl(var(--accent-fill) / .14); }
  .post-matrix thead th { white-space: nowrap; }
  .post-matrix tbody th { min-width: 8rem; }
  .post-matrix td { text-align: center; vertical-align: middle; }
  .post-mx { display: inline-grid; place-items: center; vertical-align: middle; }
  .post-mx svg { width: 18px; height: 18px; }
  .post-mx-yes { color: hsl(var(--success)); }
  .post-mx-no { color: hsl(var(--destructive)); }
  .post-mx-partly { color: hsl(var(--star)); }
  .post-mx-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  .post-mx-legend > span { display: inline-flex; align-items: center; gap: 6px; }
  .post-mx-legend svg { width: 14px; height: 14px; }
  .post-mx-pick { font-size: 15px; line-height: 1.6; }
  .post-callout { position: relative; gap: 10px; padding: 20px 24px; border-radius: calc(var(--radius) + 4px); background: hsl(var(--muted)); }
  .post-callout-mark { width: 28px; height: 28px; color: hsl(var(--muted-foreground) / .55); }
  .post-callout-title { font-size: 16px; line-height: 24px; font-weight: 600; }
  .post-fig.post-callout blockquote { display: block; margin: 0; padding: 0; border-radius: 0; background: none; color: hsl(var(--foreground)); }
  .post-callout-text { font-size: 19px; line-height: 1.55; letter-spacing: -.01em; }
  .post-callout-by { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
  .post-callout-name { color: hsl(var(--foreground)); font-weight: 600; }
  .post-callout-by a { text-decoration: underline; text-underline-offset: 2px; }
  .post-fig .post-rating-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .post-rating-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid hsl(var(--border)); }
  .post-rating-list > li:first-child { border-top: 0; padding-top: 0; }
  .post-rating-label { display: grid; gap: 2px; font-size: 14px; line-height: 20px; font-weight: 600; }
  .post-rating-note { font-size: 13px; line-height: 18px; font-weight: 400; color: hsl(var(--muted-foreground)); }
  .post-rating-dots { display: flex; gap: 5px; }
  .post-rating-dots i { width: 11px; height: 11px; border-radius: 50%; background: hsl(var(--muted-foreground) / .2); }
  .post-rating-dots i.on { background: hsl(var(--brand)); }
  .post-rating-value { font: 600 13px/20px var(--mono); font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) {
    .post-bars, .post-timeline, .post-rating, .post-matrix { padding: 16px; }
    .post-matrix .scroll { margin: 0 -16px; padding: 0 16px; }
    .post-fig .post-bars-list { grid-template-columns: minmax(0, 1fr) auto; }
    .post-bar { row-gap: 6px; }
    .post-bar-label { grid-area: 1 / 1; text-align: left; }
    .post-bar-value { grid-area: 1 / 2; text-align: right; }
    .post-bar-track { grid-area: 2 / 1 / 3 / -1; }
    .post-stat-value { font-size: 30px; }
    .post-stats.is-hero .post-stat-value { font-size: 40px; }
    .post-stat { padding: 16px; }
    .post-callout-text { font-size: 17px; }
    .post-rating-list > li { grid-template-columns: minmax(0, 1fr) auto; }
    .post-rating-dots { grid-row: 2; }
  }

  /* The share bar under a post (mindket-blog-share.ts; Mindber's ArticleShareBar): round buttons in each site's colours, More and the
     sites with no share link (WeChat's QR code, Xiaohongshu) opening a panel under the row, Copy link turning to a check once copied.
     The brand marks keep their own colours in both themes; X, Threads and the plain buttons take a ring in the dark one. */
  .post-sharebar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 24px; border-top: 1px solid hsl(var(--border)); }
  .post-sharebar-title { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); }
  .post-sharebar-title svg { width: 16px; height: 16px; }
  .post-sharebar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .share-round { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; cursor: pointer; list-style: none;
                 transition: transform .15s, opacity .15s, background-color .15s; }
  .share-round::-webkit-details-marker { display: none; }
  .share-round:hover { transform: scale(1.06); opacity: .9; }
  .share-round svg { width: 17px; height: 17px; }
  .share-plain { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); }
  .share-plain:hover { background: hsl(var(--accent)); opacity: 1; }
  button.share-plain { padding: 0; font: inherit; }
  .share-round.copy { position: static; translate: none; }
  .share-round.copy svg:nth-of-type(2), .share-round.copy.is-copied svg:first-of-type { display: none; }
  .share-round.copy.is-copied svg:nth-of-type(2) { display: block; color: hsl(var(--success)); }
  .share-x, .share-threads { background: #000; }
  .share-facebook { background: #0866ff; }
  .share-linkedin { background: #0a66c2; }
  .share-reddit { background: #ff4500; }
  .share-whatsapp { background: #25d366; }
  .share-telegram { background: #26a5e4; }
  .share-wechat { background: #07c160; }
  .share-weibo { background: #e6162d; }
  .share-xiaohongshu { background: #ff2442; }
  .share-bluesky { background: #1185fe; }
  .share-pinterest { background: #bd081c; }
  .share-line { background: #06c755; }
  .share-tumblr { background: #36465d; }
  .share-email { background: #64748b; }
  /* Its panels hang from the bar, not their button, so one opened at a phone's right edge stays on the screen */
  .post-sharebar details.share-pop { position: static; }
  /* A shut <details> still lays its panel's boxes out in Chromium (content-visibility: hidden): none until it opens */
  details.share-pop:not([open]) > .share-panel { display: none; }
  .post-sharebar-row details.share-pop > summary, .post-share details > summary { list-style: none; }
  .share-panel { position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); display: grid; gap: 10px; width: min(320px, 100%); padding: 16px;
                 border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--popover)); box-shadow: var(--shadow-md); }
  .share-more > .share-panel { width: min(440px, 100%); }
  .share-panel-title { font-size: 14px; font-weight: 600; }
  .share-panel-text { font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
  .share-panel .btn { justify-self: start; }
  .share-panel-copy { display: grid; gap: 6px; }
  .share-panel-copy .copy { position: static; translate: none; justify-self: start; }
  .share-qr { justify-self: center; width: 168px; height: 168px; padding: 0; border-radius: 8px; overflow: hidden; background: #fff; }
  .share-qr svg { display: block; width: 100%; height: 100%; }
  .share-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .share-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border: 1px solid hsl(var(--border)); border-radius: 9999px;
                background: hsl(var(--card)); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
  .share-chip::-webkit-details-marker { display: none; }
  .share-chip:hover { background: hsl(var(--accent)); }
  .share-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; }
  .share-dot svg { width: 14px; height: 14px; }
  :root[data-theme="dark"] :is(.share-x, .share-threads) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.share-x, .share-threads) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); } }
  @media (prefers-reduced-motion: reduce) { .share-round { transition: none; } .share-round:hover { transform: none; } }
  @media (max-width: 640px) {
    .post-sharebar-title { width: 100%; }
    .post-sharebar-row { gap: 5px; }
    .post-sharebar-row .share-round { width: 32px; height: 32px; }
  }
  .post-explore > span { display: inline-flex; align-items: center; gap: 10px; }
  .post-explore svg { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }
  /* The Token Playbook's card (mindket-offer.ts offerSideCard): the slide's banner, a short title, one line, the button. The banner's words
     and cards sit in its right half (2560 x 1600), so the picture is cropped to them: a 4 : 3 window of it from x 1240 and y 216 (the image
     is 193.9% of the window's width, shifted left 93.9% and up 16.4% of it), under the card's own radius. Its box is set before it loads. */
  .post-offer { display: grid; gap: 12px; border-color: transparent; }
  .post-offer-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
  .post-offer-pic img { width: 193.9%; max-width: none; height: auto; margin: -16.4% 0 0 -93.9%; }
  .post-offer-body { display: grid; gap: 12px; align-content: start; }
  .post-offer-title { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
  .post-offer-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .post-offer-line { font-size: 14px; line-height: 20px; }
  .post-offer-line small { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: hsl(var(--ink) / .76); }
  @media (min-width: 520px) and (max-width: 1023px) {
    .post-offer { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: center; gap: 24px; }
    .post-offer-body .btn { width: auto; justify-self: start; }
  }
  .post-toc-phone { display: none; padding: 0 16px; }
  .post-toc-phone summary { list-style: none; display: flex; align-items: center; justify-content: space-between; height: 48px; font-weight: 600; cursor: pointer; }
  .post-toc-phone summary::-webkit-details-marker { display: none; }
  .post-toc-phone summary svg { width: 16px; height: 16px; transition: transform .15s; }
  .post-toc-phone[open] summary svg { transform: rotate(180deg); }
  .post-toc-phone ol { display: grid; gap: 2px; padding: 0 0 12px 10px; }
  @media (prefers-reduced-motion: no-preference) { html:has(.post-layout) { scroll-behavior: smooth; } }
  /* Under 1,280 px the post keeps its sidebar and On this page folds open above the sections; under 1,024 px the sidebar follows the post */
  @media (max-width: 1279px) {
    .post-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
    .post-layout > .post-main { grid-column: 1; }
    .post-layout > .post-side { grid-column: 2; }
    .post-toc-side { display: none; }
    .post-toc-phone { display: block; }
  }
  @media (max-width: 1023px) {
    .post-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .post-layout > :is(.post-main, .post-side) { grid-column: 1; grid-row: auto; }
    .post-layout > .post-side { order: 0; }
    .post-side > :last-child { position: static; }
  }
  @media (max-width: 640px) {
    .post-body { font-size: 16px; line-height: 28px; }
    .post-body h2 { font-size: 24px; line-height: 30px; }
    .post-answer { font-size: 16px; line-height: 28px; }
    .post-shots { grid-template-columns: minmax(0, 1fr); }
  }
  html:lang(zh) .post-body { line-height: 1.85; }
  html:lang(zh) :is(.post-head h1, .post-body h2, .post-card-title) { letter-spacing: 0; }

  /* The hub */
  /* Four cards a row on every grid of the hub (the user, 2026-11-06, of the paths and the jobs: "make 4 card per row for all"): the
     paths, the jobs, the tools, the latest lessons and the courses; two below 1,024 px, one at 640 (the tools keep two) */
  .learn-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
  .learn-card { display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
  .learn-card:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .learn-card .post-card-cover img { transition: transform .3s ease; }
  .learn-card:hover .post-card-cover img { transform: scale(1.03); }
  .learn-card .post-card-cover { overflow: hidden; }
  .learn-card-body { display: flex; flex-direction: column; gap: 12px; padding: 20px; flex: 1; }
  .learn-free { color: hsl(var(--brand)); border-color: hsl(var(--brand) / .45); }
  .learn-card-lessons { display: grid; counter-reset: lesson; border-top: 1px solid hsl(var(--border)); }
  .learn-card-lessons li { counter-increment: lesson; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
                           padding: 9px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; line-height: 20px; }
  .learn-card-lessons li::before { content: counter(lesson); font: 600 12px/20px var(--mono); color: hsl(var(--muted-foreground)); }
  .learn-card-lessons a { font-weight: 500; }
  .learn-card-lessons a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .learn-card-lessons .meta { font-size: 12px; white-space: nowrap; }
  .learn-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
  .learn-about { display: grid; gap: 16px; max-width: 820px; margin-top: 48px; }
  .learn-about h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin-top: 8px; }
  @media (prefers-reduced-motion: reduce) { .learn-card .post-card-cover img { transition: none; } .learn-card:hover .post-card-cover img { transform: none; } }

  /* The outline beside a course and a lesson, and in a lesson's folded menu under 1,280 px */
  .learn-outline { display: grid; gap: 2px; margin-top: 4px; }
  .learn-outline a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
  .learn-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid hsl(var(--border));
               font: 600 12px/1 var(--mono); color: hsl(var(--muted-foreground)); background: hsl(var(--card)); }
  .sg-item .learn-num { flex: none; width: 28px; height: 28px; }
  .learn-outline a[aria-current] .learn-num { background: hsl(var(--foreground)); border-color: hsl(var(--foreground)); color: hsl(var(--background)); }
  .post-toc-phone .learn-outline { padding: 0 0 12px; }
  .post-toc-side .toc + .toc { margin-top: 20px; }

  /* A course's lessons */
  .post-body .learn-lessons { display: grid; gap: 12px; padding: 0; list-style: none; }
  .learn-lesson { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 16px; align-items: center; padding: 16px 20px;
                  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); background: hsl(var(--card)); transition: border-color .15s, box-shadow .15s; }
  .md a.learn-lesson { text-decoration: none; color: inherit; }
  .learn-lesson:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .learn-lesson .learn-num { width: 36px; height: 36px; font-size: 14px; }
  .learn-lesson-body { display: grid; gap: 4px; min-width: 0; }
  .learn-lesson-title { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
  .learn-lesson-desc { font-size: 15px; line-height: 22px; color: hsl(var(--muted-foreground)); }
  .learn-lesson svg { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }
  .learn-lesson:hover .learn-lesson-title { text-decoration: underline; text-underline-offset: 3px; }

  /* Previous and Next under a lesson */
  .learn-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .learn-step { display: grid; gap: 4px; padding: 16px 20px; transition: border-color .15s, box-shadow .15s; }
  .learn-step:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .learn-step-title { font-size: 16px; line-height: 22px; font-weight: 600; }
  .learn-next { grid-column: 2; text-align: right; }
  @media (max-width: 640px) {
    .learn-pager { grid-template-columns: minmax(0, 1fr); }
    .learn-next { grid-column: 1; text-align: left; }
    .learn-lesson { grid-template-columns: 32px minmax(0, 1fr); padding: 14px 16px; gap: 12px; }
    .learn-lesson svg { display: none; }
    .learn-lesson .learn-num { width: 32px; height: 32px; }
  }
  /* The hub's head, as the owner's picture (2026-11-04: "then use the similar layout design for the learn page"): the eyebrow, H1,
     line, search and count on the left; on the right the first course's card on a deck of two more, upright, on a gold tint (the user,
     2026-11-07: "change better design", of the dark tilted lesson card with its cut lines): its cover, facts, name, every lesson whole,
     progress and Start lesson 1; under 1,024 px the words stand alone. The topics as chips, the chosen one gold */
  .learn-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding: 16px 0 8px; }
  .learn-hero-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
  .learn-hero h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
  .learn-hero .lead { font-size: 18px; line-height: 28px; max-width: 520px; }
  .learn-hero form { width: 100%; max-width: 580px; }
  .learn-preview { display: grid; place-items: center; min-height: 100%; padding: 32px 32px 48px; border-radius: calc(var(--radius) + 8px);
                   background: radial-gradient(120% 90% at 100% 0%, hsl(var(--accent-fill) / .42), hsl(var(--accent-fill) / .1) 60%, hsl(var(--accent-fill) / .04)); }
  .learn-preview-deck { position: relative; isolation: isolate; width: 100%; max-width: 400px; }
  .learn-preview-deck::before, .learn-preview-deck::after { content: ''; position: absolute; inset: 0; z-index: -1; border: 1px solid hsl(var(--border));
                   border-radius: calc(var(--radius) + 4px); background: hsl(var(--card)); box-shadow: var(--shadow-sm); transform-origin: 50% 100%; }
  .learn-preview-deck::before { translate: 0 12px; scale: .95; opacity: .75; }
  .learn-preview-deck::after { translate: 0 24px; scale: .9; opacity: .45; z-index: -2; }
  .learn-preview-card { display: grid; overflow: hidden; border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-md); }
  .learn-preview-cover { display: block; overflow: hidden; background: hsl(var(--secondary)); }
  .learn-preview-cover img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
  .learn-preview-card:hover .learn-preview-cover img { transform: scale(1.03); }
  .learn-preview-body { display: grid; gap: 12px; padding: 16px 20px 20px; }
  .learn-preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .learn-preview-meta .meta { margin-left: auto; font-size: 12px; white-space: nowrap; }
  .learn-preview-title { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.02em; }
  .learn-preview-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .learn-preview-lessons { display: grid; border-top: 1px solid hsl(var(--border)); }
  .learn-preview-lessons a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0;
                   border-bottom: 1px solid hsl(var(--border)); font-size: 14px; line-height: 20px; }
  .learn-preview-lessons .learn-num { margin-top: -1px; }
  .learn-preview-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
  .learn-preview-lessons a:hover .learn-preview-name { text-decoration: underline; text-underline-offset: 3px; }
  .learn-preview-lessons .meta { font-size: 12px; white-space: nowrap; }
  .learn-preview-card .btn { justify-self: start; }
  @media (prefers-reduced-motion: reduce) { .learn-preview-cover img { transition: none; } .learn-preview-card:hover .learn-preview-cover img { transform: none; } }
  /* The topic chips stick under the site's header as the hub scrolls (the user, 2026-11-09: "stick at top when scroll"): an opaque
     bar as wide as the window (its ground and hairline are spread shadows the clip-path keeps to its own height), 54 px tall; a
     section a chip jumps to, a term and the FAQ stop clear of both */
  .learn-topics { position: sticky; top: var(--head-h); z-index: 30; margin-top: 24px; padding: 10px 0;
                  background: hsl(var(--background)); box-shadow: 0 0 0 100vmax hsl(var(--background)), 0 1px 0 100vmax hsl(var(--border)); clip-path: inset(0 -100vmax -1px); }
  .learn-topics ~ * :is(.learn-sec-head h2, .learn-topic, .learn-term), .learn-topics ~ .learn-about { scroll-margin-top: calc(var(--head-h) + 70px); }
  .learn-topics .pill[aria-current] { background: hsl(var(--accent-fill)); color: hsl(var(--accent-fill-foreground)); border-color: hsl(var(--accent-fill)); }
  @media (max-width: 1023px) { .learn-hero { grid-template-columns: minmax(0, 1fr); } .learn-preview { display: none; } }

  /* The hub's sections: a head (the H2, a link on its right), then the paths, the latest lessons, every course, a search's results */
  .learn-sec { display: grid; gap: 16px; margin-top: 40px; }
  .learn-sec .learn-cards { margin-top: 0; }
  .learn-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
  .learn-sec-head h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
  /* All courses by topic: a topic's chip jumps here (the user, 2026-11-06: "when click the tab, should jump to the section instead
     just show the categories and hide other"), its head just under the sticky header */
  .learn-sec-head h2, .learn-topic { scroll-margin-top: calc(var(--head-h) + 16px); }
  .learn-topic + .learn-topic { margin-top: 16px; }
  .learn-topic-h { margin: 0 0 12px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
  .learn-sec-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
  .learn-sec-link svg { width: 14px; height: 14px; }
  .learn-sec-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .learn-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .learn-path { display: flex; flex-direction: column; gap: 10px; padding: 20px; transition: border-color .15s, box-shadow .15s; }
  .learn-path:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .learn-path-art { display: grid; place-items: center; height: 96px; margin-bottom: 4px; border-radius: var(--radius); background: hsl(var(--muted)); color: hsl(var(--foreground) / .72); }
  .learn-path-art svg { width: 120px; height: 72px; }
  .learn-path-name { font-size: 18px; line-height: 24px; letter-spacing: -.01em; }
  .learn-path-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .learn-path-desc { font-size: 14px; line-height: 21px; color: hsl(var(--muted-foreground)); }
  .learn-path-courses { display: grid; gap: 6px; counter-reset: path-course; }
  .learn-path-courses li { counter-increment: path-course; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; font-size: 13px; line-height: 18px; }
  .learn-path-courses li::before { content: counter(path-course); font: 600 11px/18px var(--mono); color: hsl(var(--muted-foreground)); }
  .learn-path-courses a { font-weight: 500; }
  .learn-path-courses a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .learn-path-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 4px; }
  .learn-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .learn-progress[hidden] { display: none; }
  .learn-bar { height: 6px; border-radius: 9999px; background: hsl(var(--secondary)); overflow: hidden; }
  .learn-bar > span { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: hsl(var(--accent-fill)); transition: width .3s ease; }
  .learn-progress .meta { font: 600 12px/16px var(--mono); }
  .post-cta .learn-progress { margin: 2px 0 4px; }
  .learn-tuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .learn-tut { display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
  .learn-tut:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .learn-tut .post-card-cover { overflow: hidden; }
  .learn-tut-body { display: grid; gap: 10px; padding: 18px 20px 20px; }
  /* A course's name is a sentence: its chip wraps instead of widening a phone's page (521 px on a 390 px screen). */
  .learn-course-chip { white-space: normal; min-width: 0; max-width: 100%; }
  .learn-tut-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .learn-tut .post-card-title { font-size: 18px; }
  .learn-results { display: grid; gap: 12px; padding: 0; list-style: none; }
  .learn-empty { font-size: 16px; line-height: 26px; color: hsl(var(--muted-foreground)); }
  @media (max-width: 1023px) { .learn-cards, .learn-tuts, .learn-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .learn-cards, .learn-tuts, .learn-paths { grid-template-columns: minmax(0, 1fr); } }
  @media (prefers-reduced-motion: reduce) { .learn-bar > span { transition: none; } }

  /* The syllabus beside a course and a lesson (W3Schools' chapter list, the owner, 2026-11-04): each path's name, its courses folded,
     the page's own open; a lesson marked as done gets a green number (here, on a course's rows and a course card's). A course's name
     is in the regular weight (the user, 2026-11-06, of the AI fundamentals list: "no need bold font") */
  .learn-syllabus .sb-label { margin-top: 12px; }
  .learn-syllabus .sb-label:first-child { margin-top: 0; }
  .learn-syl summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-left: -10px; padding: 6px 10px;
                       border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 400; cursor: pointer; }
  .learn-syl summary::-webkit-details-marker { display: none; }
  .learn-syl summary:hover { background: hsl(var(--accent)); }
  .learn-syl summary > svg { flex: none; width: 14px; height: 14px; color: hsl(var(--muted-foreground)); transition: transform .15s; }
  .learn-syl[open] > summary > svg { transform: rotate(180deg); }
  .learn-syl-name { flex: 1; min-width: 0; }
  .learn-syl > .learn-outline { padding: 2px 0 8px; }
  .learn-outline a.learn-syl-over { display: block; padding-left: 42px; }
  .post-toc-phone .learn-syllabus { padding-bottom: 12px; }
  .post-toc-phone .learn-syl > .learn-outline { padding: 2px 0 8px; }
  [data-learn-lesson].is-done .learn-num, [data-learn-lesson].is-done a[aria-current] .learn-num { background: hsl(var(--success)); border-color: hsl(var(--success)); color: hsl(var(--background)); font-size: 0; }
  /* Done shows as a green tick (the user, 2026-11-09: "show tick green when done"): a lesson's tick in place of its number, and a course
     whose every lesson is done ticks its syllabus row; pure CSS over the lessons web/mindket-search.js marks .is-done. The tick is
     two borders turned 45 degrees: the CSP's img-src has no data:, so a picture in the stylesheet would never draw */
  [data-learn-lesson].is-done .learn-num::before { content: ''; width: 5px; height: 10px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0;
                                                   transform: rotate(45deg); }
  .learn-lesson.learn-lesson .learn-num::before { width: 8px; height: 15px; margin-top: -4px; border-width: 0 3px 3px 0; }
  .learn-syl-tick { display: none; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--success)); color: hsl(var(--background)); }
  .learn-syl-tick svg { width: 12px; height: 12px; stroke-width: 3; }
  .learn-syl:has([data-learn-lesson]):not(:has([data-learn-lesson]:not(.is-done))) > summary .learn-syl-tick { display: inline-grid; }
  .learn-card-lessons li.is-done::before { content: "✓"; color: hsl(var(--success)); }
  /* 1,024 to 1,279 px: the syllabus stays on the left and the sidebar follows the page; On this page folds above the sections */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .post-layout.learn-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .learn-layout > .post-toc-side { display: block; }
    .learn-layout > .post-main { grid-column: 2; }
    .learn-layout > .post-side { grid-column: 2; grid-row: 2; }
    .learn-layout .learn-syl-phone { display: none; }
  }
  @media (max-width: 1279px) { .learn-toc { display: none; } }
  .post-side > .learn-toc { padding: 0 4px 0 10px; }

  /* A lesson's Check yourself: each question a card, its options as rows (lettered), right in green and wrong in red once pressed */
  .post-body .learn-quiz-list { display: grid; gap: 16px; padding: 0; list-style: none; counter-reset: quiz; }
  .learn-quiz-item { counter-increment: quiz; display: grid; gap: 12px; padding: 18px 20px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); background: hsl(var(--card)); }
  .learn-quiz-q { margin: 0; font-weight: 600; }
  .learn-quiz-q::before { content: counter(quiz) ". "; }
  .learn-quiz-opts { display: grid; gap: 8px; }
  .learn-quiz-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 10px 12px; text-align: left;
                    border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--background)); color: inherit; font: inherit; font-size: 15px; line-height: 22px;
                    cursor: pointer; transition: border-color .15s, background-color .15s; }
  .learn-quiz-opt:hover:not(:disabled) { border-color: hsl(var(--foreground) / .35); }
  .learn-quiz-opt:disabled { cursor: default; color: inherit; opacity: 1; }
  .learn-quiz-letter { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid hsl(var(--border)); border-radius: 50%;
                       font: 600 12px/1 var(--mono); color: hsl(var(--muted-foreground)); }
  .learn-quiz-opt.is-right { border-color: hsl(var(--success)); background: hsl(var(--success) / .08); }
  .learn-quiz-opt.is-wrong { border-color: hsl(var(--destructive)); background: hsl(var(--destructive) / .08); }
  .learn-quiz-opt.is-right .learn-quiz-letter { background: hsl(var(--success)); border-color: hsl(var(--success)); color: hsl(var(--background)); }
  .learn-quiz-opt.is-wrong .learn-quiz-letter { background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: hsl(var(--background)); }
  .learn-quiz-says { margin: 0; font-size: 14px; font-weight: 600; color: hsl(var(--success)); }
  .learn-quiz-says.is-wrong { color: hsl(var(--destructive)); }
  .learn-quiz-says[hidden] { display: none; }
  .learn-quiz-why summary { width: fit-content; font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); cursor: pointer; }
  .learn-quiz-why summary:hover { color: hsl(var(--foreground)); }
  .learn-quiz-why p { margin: 8px 0 0; font-size: 15px; line-height: 24px; }
  /* Mark as done, under a lesson: shown by the script; pressed, it reads Done in green */
  .learn-done { display: flex; justify-content: center; }
  .learn-done:has(> [hidden]) { display: none; }
  .learn-done-btn svg { width: 16px; height: 16px; }
  .learn-done-btn[aria-pressed="true"] { background: hsl(var(--success) / .1); border-color: hsl(var(--success)); color: hsl(var(--success)); }
  /* The hub's latest info and data (2026-11-05): Learn in numbers (the blog's figure cards); the key terms, two to a row. What's new
     in the tools is gone (the user, 2026-11-09: "remove this part") */
  .learn-sec-head > .meta { font-size: 14px; }
  .learn-jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .learn-job { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; transition: border-color .15s, box-shadow .15s; }
  .learn-job:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .learn-job-name { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
  .learn-job-name a::after { content: ""; position: absolute; inset: 0; }
  .learn-job { position: relative; }
  .learn-job-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .learn-job-line { font-size: 14px; line-height: 21px; color: hsl(var(--muted-foreground)); }
  .learn-job-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
  .learn-job-tools li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 500; }
  .learn-job-tools .learn-tool-mark { width: 26px; height: 26px; }
  .learn-job-tools .learn-tool-mark svg { width: 24px; height: 24px; }
  .learn-job-count { margin-top: auto; padding-top: 10px; border-top: 1px solid hsl(var(--border)); font-size: 12px; line-height: 16px; }
  /* Five tools a row (the user, 2026-11-06, of Tools you'll learn: "make 5 column per row"); two below 1,024 px */
  .learn-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  /* A tool's tile: the card's border round the tile (the user, 2026-11-06, of the ChatGPT tile: "here still need ori border"), its
     logo large and bare, no box round the logo (the same day: "remove the border and increase the logo size, apply for all pages if
     have the similar design") */
  .learn-tool { display: flex; gap: 14px; align-items: center; padding: 14px 16px; min-width: 0; transition: border-color .15s, box-shadow .15s; }
  .learn-tool:hover { border-color: hsl(var(--foreground) / .28); box-shadow: var(--shadow-md); }
  .learn-tool-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: hsl(var(--foreground)); }
  .learn-tool-mark svg { width: 40px; height: 40px; }
  .learn-tool-text { display: grid; gap: 2px; min-width: 0; }
  .learn-tool-name { font-size: 15px; line-height: 20px; font-weight: 600; }
  .learn-tool-lesson { font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .learn-tool:hover .learn-tool-name { text-decoration: underline; text-underline-offset: 3px; }
  /* A tool's page (mindket-learn-tools.ts): its logo, name, maker and price over the H1, Good for as chips under the answer, the YouTube
     tutorials two a row (one on a phone), the other tools on the left with their small logos; the list of tools at /learn/tools */
  .tool-id { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
  .tool-logo { display: grid; place-items: center; flex: none; width: 56px; height: 56px; color: hsl(var(--foreground)); }
  .tool-logo svg { width: 52px; height: 52px; }
  .tool-id-text { display: grid; gap: 2px; min-width: 0; }
  .tool-id-name { font-size: 16px; line-height: 22px; font-weight: 600; }
  .tool-id-name .meta { font-weight: 400; }
  .tool-price { margin-left: auto; }
  .tool-good { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 20px; }
  .tool-good .sb-label { margin: 0; }
  .tool-good ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .tool-good .chip { font-size: 13px; line-height: 18px; font-weight: 400; }
  /* The tutorials under the byline, a product page's preview and thumbnails (the user, 2026-11-06: "like product view, show the
     carousel of video youtube"; mindket-ui.ts galleryBlock), the channels under them */
  .tool-gallery { margin: 4px 0 20px; }
  .tool-gallery .gallery { margin-bottom: 8px; }
  .tool-vids-by { margin: 0; text-align: center; }
  .tool-list a { grid-template-columns: 20px minmax(0, 1fr); align-items: center; }
  .tool-list a[aria-current] { font-weight: 600; }
  .tool-list-mark { display: grid; place-items: center; width: 20px; height: 20px; color: hsl(var(--foreground)); }
  .tool-list-mark svg { width: 18px; height: 18px; }
  .tool-index { display: grid; gap: 12px; }
  .tool-index h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -.03em; }
  .tool-index .learn-tools { margin-top: 12px; }
  @media (max-width: 640px) { .tool-price { margin-left: 0; } }
  html:lang(zh) .tool-index h1 { letter-spacing: 0; }
  .learn-numbers .post-stat { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
  .learn-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
  .learn-term { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid hsl(var(--border)); scroll-margin-top: 136px; }
  .learn-term dt { font-size: 16px; line-height: 22px; font-weight: 600; }
  .learn-term dt a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .learn-term dd { margin: 0; font-size: 14px; line-height: 21px; color: hsl(var(--muted-foreground)); }
  .learn-term:target { background: hsl(var(--accent-fill) / .12); }
  @media (max-width: 1023px) { .learn-tools, .learn-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .learn-terms, .learn-jobs { grid-template-columns: minmax(0, 1fr); }
    .learn-tool { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  }
  html:lang(zh) :is(.learn-lesson-title, .learn-about h2, .learn-hero h1, .learn-sec-head h2, .learn-path-name, .learn-preview-title) { letter-spacing: 0; }

  /* The workflow as the first picture (flowSlide, web/mindket-search.js): the workflow drawn on a dotted canvas fills the 16:10 slide
     from the first paint (mindket-n8n-draw.ts flowDrawing); n8n's frame loads unseen behind it and fades in only once the reader has
     pressed the cover and n8n has drawn (.live), a spinning ring on the cover's label while it waits; the cover keeps the page's scroll,
     its label at the bottom right, clear of n8n's own fit and zoom buttons at the bottom left on a phone too; Full screen at the top right */
  .gal-slide.flow { background: hsl(var(--card)); }
  .flow-box { position: relative; width: 100%; height: 100%; }
  .flow-draw { position: absolute; inset: 0; width: 100%; height: 100%; }
  .flow-box.live .flow-draw { visibility: hidden; }
  .fd-dot { fill: hsl(var(--foreground) / .14); }
  .fd-node { fill: hsl(var(--card)); stroke: hsl(var(--foreground) / .3); stroke-width: 2; }
  .fd-port, .fd-arrow { fill: hsl(var(--foreground) / .4); }
  .fd-line { fill: none; stroke: hsl(var(--foreground) / .4); stroke-width: 2; }
  .fd-ai { stroke-dasharray: 6 6; }
  .fd-off { stroke-dasharray: 4 4; fill-opacity: .5; }
  .fd-glyph { fill: none; stroke: hsl(var(--foreground) / .8); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .fd-bolt { fill: hsl(var(--brand)); }
  .fd-name { fill: hsl(var(--foreground)); font-size: 15px; font-weight: 600; }
  .flow-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .flow-box.live iframe { opacity: 1; pointer-events: auto; }
  .flow-cover { position: absolute; inset: 0; z-index: 1; display: grid; place-items: end end; padding: 0 12px 12px 0; border: 0; background: transparent; cursor: pointer; }
  .flow-cover .btn { pointer-events: none; gap: 8px; box-shadow: 0 1px 3px hsl(0 0% 0% / .2); }
  .flow-box.wanted .flow-cover .btn::after { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: flow-wait .8s linear infinite; }
  @keyframes flow-wait { to { transform: rotate(1turn); } }
  @media (prefers-reduced-motion: reduce) { .flow-box.wanted .flow-cover .btn::after { animation-duration: 2.4s; } .flow-box iframe { transition: none; } }
  .flow-full { position: absolute; top: 12px; right: 12px; z-index: 2; background: hsl(var(--card)); }
  .flow-cover[hidden], .flow-full[hidden] { display: none; }
  .flow-box:fullscreen { background: hsl(var(--background)); }
  .gal-thumbs a.flow-thumb { display: grid; place-items: center; color: hsl(var(--muted-foreground)); }
  .flow-thumb svg { width: 24px; height: 24px; }
  /* How it works and Integrations read as the About's sections (mindket-listing-css.ts .about h3): a 24 px heading over a hairline */
  .n8n-how, .n8n-apps { display: grid; gap: 16px; min-width: 0; margin-bottom: 32px; }
  .n8n-how > h2, .n8n-apps > h2 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid hsl(var(--border)); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 0; }
  /* How it works (howItWorks): three cards in a row, one under the other on a phone */
  .how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .how-card { min-width: 0; padding: 16px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--card)); }
  .how-card h3 { margin: 0 0 8px; font: 600 13px/18px var(--font); color: hsl(var(--muted-foreground)); }
  .how-card p, .how-card li { font-size: 14px; line-height: 20px; color: hsl(var(--foreground) / .82); overflow-wrap: anywhere; }
  .how-card .how-title { margin-bottom: 4px; font-size: 16px; line-height: 24px; font-weight: 600; color: hsl(var(--foreground)); }
  .how-card ul, .how-card ol { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; }
  .how-card ul { list-style: disc; }
  .how-card ol { list-style: decimal; }
  /* What you get, on a quiet fill: never a coloured bar down one side (the owner, 2026-11-02, "never use this kind of border line") */
  .how-card .how-result { padding: 12px; border-radius: var(--radius); background: hsl(var(--muted)); font-weight: 600; color: hsl(var(--foreground)); }
  /* Integrations (integrations): one card an app, its logo on a plain tile (its initial there for an app with none yet), what it needs
     at the foot */
  .lead-sm { margin: -4px 0 0; font-size: 16px; line-height: 24px; color: hsl(var(--muted-foreground)); }
  .apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; min-width: 0; }
  .app-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--card)); }
  .app-card > p { font-size: 14px; line-height: 20px; color: hsl(var(--foreground) / .82); overflow-wrap: anywhere; }
  .app-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .app-head h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
  /* An app's logo, large and bare (the user, 2026-11-06, of Learn's tool tiles: "remove the border and increase the logo size, apply
     for all pages if have the similar design"): no box round it; its card keeps the border (the same day: "here still need ori border") */
  .app-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; color: hsl(var(--muted-foreground)); font-weight: 600; }
  .app-mark svg, .app-mark img { width: 32px; height: 32px; }
  /* The head's bar (mindket-n8n.ts n8nHead): the apps' logos in a row, each the height of a button there */
  .head-apps { display: inline-flex; flex-wrap: wrap; gap: 6px; border-radius: 8px; }
  .head-apps .app-mark { width: 28px; height: 28px; border-radius: 8px; }
  .head-apps .app-mark svg, .head-apps .app-mark img { width: 22px; height: 22px; }
  .head-apps:hover .app-mark { background: hsl(var(--accent)); }
  /* The Platform block under the description (n8nPlatform, mindket-platform.ts platformCard; the user, 2026-11-03, of the side's card:
     "move to desc there"): its heading, a bordered tile a platform in a grid of three at most, n8n's a link with its line whole, then
     the apps' logos after a quiet count */
  .plat-main { margin: 0 0 24px; }
  .plat-h { margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 600; }
  .plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 16px) / 3)), 1fr)); gap: 8px; }
  .plat-main .plat-grid > * { padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
  .plat-main .sg-meta { white-space: normal; line-height: 18px; }
  .plat-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
  .plat-label { font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  .plat-main > .plat-label { margin: 8px 0 0; }
  /* Every other listing's tiles (mindket-platform.ts platformCard): a platform's logo, name and what it is there, none a link, so no
     hover; a wide logo (or the brand's uploaded one) kept whole on its tile */
  .plat-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .plat-row .app-mark img { object-fit: contain; }
  .app-role { font-size: 12px; line-height: 16px; color: hsl(var(--muted-foreground)); }
  .app-card .app-needs { margin-top: auto; padding-top: 8px; border-top: 1px solid hsl(var(--border)); font-size: 13px; line-height: 18px; }
  .app-needs span { margin-right: 6px; font-weight: 600; color: hsl(var(--foreground)); }
  @media (max-width: 640px) {
    .how-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* The page runs the window's width: main's own padding goes, each band pads itself */
  main:has(> .offer) { padding: 0; }
  .offer { --paper: 40 13% 95.3%; --spring: cubic-bezier(.16, 1, .3, 1); }
  .offer h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -.036em; }
  .offer h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.015em; }
  /* The free-part box under a skill to copy (AI-105): a card at the site's own heading size, apart from the note above it */
  .offer #list-box { margin-top: 24px; }
  .offer #list-box h2 { font-size: 22px; line-height: 1.15; letter-spacing: -.028em; }
  @media (min-width: 768px) { .offer #list-box h2 { font-size: 26px; } }
  .offer-sub { font-size: 17px; line-height: 1.6; color: hsl(var(--muted-foreground)); max-width: 640px; }
  .offer-band { padding: 88px 0; border-top: 1px solid hsl(var(--border)); }
  /* A jump to a band (What's inside) lands under the header and the product's bar, not behind them */
  .offer [id] { scroll-margin-top: 136px; }

  /* The product's own bar under the site's header (64 px and its rule): its name, the price and Get it, in reach the whole page down.
     Its ground is 94% so the struck price reads 5:1 over any band that scrolls under it (at 86% a red band gave 4.38, an ink one 4.2) */
  .offer-bar { position: sticky; top: calc(var(--head-h) + 1px); z-index: 30; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / .94);
               backdrop-filter: saturate(1.6) blur(16px); }
  .offer-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
  .offer-bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
  .offer-bar-buy { display: flex; flex: none; align-items: center; gap: 16px; }
  .offer-bar-price { display: inline-flex; gap: 10px; font: 500 14px/1 var(--font); }
  .offer-bar-price s { color: hsl(var(--muted-foreground)); }

  /* The brand's gold, edge to edge, in light and dark alike: ink type, ink buttons, the percent off on the ink */
  .offer-gold { --ink: var(--accent-fill-foreground); background: hsl(var(--accent-fill)); color: hsl(var(--ink)); }
  .offer-gold :is(.eyebrow, .offer-lead, .offer-cash, .offer-price s, .offer-final) { color: hsl(var(--ink) / .76); }
  .offer-gold .offer-off { background: hsl(var(--ink)); color: hsl(var(--accent-fill)); }
  .offer-gold .btn-accent { background: hsl(var(--ink)); color: hsl(var(--accent-fill)); }
  .offer-gold .btn-accent:hover { background: hsl(var(--ink) / .86); }
  .offer-gold .btn-outline { background: transparent; color: hsl(var(--ink)); border-color: hsl(var(--ink) / .4); }
  .offer-gold .btn-outline:hover { background: hsl(var(--ink) / .08); color: hsl(var(--ink)); }

  /* The mark's bars, huge, behind a band: filled, then ringed, on one foot (on the ink, in the gold) */
  /* clip, not hidden: hidden would make the band a scroll container, and its content's view() timeline would never run (the ink band
     stood still while the others rose) */
  .offer-backdrop { position: relative; overflow: clip; }
  .offer-backdrop > .container { position: relative; z-index: 1; }
  .offer-bg { position: absolute; top: 50%; right: -40px; height: 680px; width: auto; pointer-events: none; transform: translateY(-50%); }
  .offer-bg.is-ring { right: -120px; height: 820px; }
  .offer-bg rect { fill: hsl(var(--accent-fill-foreground) / .07); }
  .offer-bg.is-ring rect { fill: none; stroke: hsl(var(--accent-fill-foreground) / .1); stroke-width: 2px; vector-effect: non-scaling-stroke; }
  .offer-ink .offer-bg rect { fill: hsl(var(--accent-fill) / .06); }
  .offer-ink .offer-bg.is-ring rect { fill: none; stroke: hsl(var(--accent-fill) / .12); }

  /* The mark on an ink tile (mindket-offer.ts tile): the seal, the last band's mark */
  .offer-tile { display: grid; place-items: center; flex: none; border-radius: 25%; background: hsl(var(--accent-fill-foreground)); border: 1px solid hsl(var(--accent-fill) / .3); }
  .offer-tile svg { width: 58%; height: 58%; }

  /* The hero */
  .offer-hero { padding: 72px 0 96px; }
  .offer-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; isolation: isolate; }
  /* A hero with no picture of its own (a product page's section, KDD 533): its words take the width */
  .offer-hero-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
  .offer-hero-grid.is-solo .offer-copy { max-width: 880px; }
  .offer-copy { display: grid; gap: 24px; justify-items: start; min-width: 0; }
  /* One size on every product page, a step over the page's h2 (the owner, 2026-11-10: "smaller and standardlize the product title, now
     look big and no enougt space"): it was clamp(48px, 6.6vw, 104px), five lines at 1280px */
  .offer-hero h1 { font-size: clamp(38px, 4.4vw, 60px); line-height: .98; letter-spacing: -.045em; font-weight: 800; }
  /* A block of its own height: an inline background spans the font's whole box and ran over the line above (2026-11-02, at 1,440 px) */
  .offer-hero h1 mark { display: inline-block; line-height: .86; padding: .08em .1em .1em; border-radius: .08em; background: hsl(var(--ink)); color: hsl(var(--accent-fill)); }
  /* A line may break after a block like the mark: a Chinese stop after it stays on its line (2026-11-08, at 390 px); a Latin one is
     inside the stamp (mindket-product-page.ts headline) */
  .offer-hero h1 .mark-keep { white-space: nowrap; }
  /* Chinese glyphs fill their whole em box: the Latin .94 leading made the two lines all but touch (2026-11-02, the QA at 500 px) */
  :root:lang(zh) .offer-hero h1, :root:lang(zh) .offer-end h2 { line-height: 1.12; letter-spacing: -.02em; }
  /* A Chinese highlight stays on one line (.mark-keep), about eight characters wide: at English sizes "能做的事多得多。" was 679px in a
     588px column at 1280px and 386px in 358px on a phone, widening the column so the lead and the works line ran under the picture or
     past the screen (2026-11-09). 5.4vw kept eight characters inside the column at every width; the standard size (2026-11-10) is
     smaller still. */
  :root:lang(zh) .offer-hero h1 { font-size: clamp(32px, 3.8vw, 52px); }
  .offer-lead { font-size: 19px; line-height: 1.55; color: hsl(var(--muted-foreground)); max-width: 580px; }
  .offer-ctas { gap: 12px; }
  /* The final-sale rule under every Get it (mindket-product-page.ts finalSale), close to its button */
  .offer-final { margin: -12px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: hsl(var(--muted-foreground)); }

  /* The price: the regular one struck through, today's, the percent off on the gold, its cash */
  .offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; font-family: var(--font); }
  .offer-price s { font-size: 20px; color: hsl(var(--muted-foreground)); text-decoration-thickness: 2px; }
  .offer-now { font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
  .offer-off { align-self: center; padding: 4px 10px; border-radius: 6px; background: hsl(var(--accent-fill)); color: hsl(var(--accent-fill-foreground));
               font: 700 13px/18px var(--font); }
  .offer-cash { font-size: 18px; color: hsl(var(--muted-foreground)); }
  .offer-price.is-big { justify-content: center; }
  .offer-price.is-big .offer-now { font-size: clamp(48px, 6vw, 72px); }

  /* The book in three dimensions, turned toward the headline: it settles into place as the page opens and squares up under the pointer.
     Only its turn moves, never whether it shows, so the first frame already has it. */
  .offer-stage { justify-self: center; width: 100%; max-width: 420px; transform: perspective(1800px) rotateY(-14deg) rotateX(4deg);
                 transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .offer-stage:hover { transform: perspective(1800px) rotateY(-5deg) rotateX(2deg); }
  @keyframes offer-settle { from { transform: perspective(1800px) rotateY(-34deg) rotateX(10deg) translateY(32px); } }
  @media (prefers-reduced-motion: no-preference) { .offer-stage { animation: offer-settle 1.1s cubic-bezier(.2, .7, .2, 1) backwards; } }
  @media (prefers-reduced-motion: reduce) { .offer-stage { transition: none; } }

  /* The kit as a book: the mark's ink with a hinge down its spine, its name in the gold, the chapters, two paper sheets behind */
  .offer-cover { position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column; gap: 16px;
                 padding: 36px 36px 36px 44px; border-radius: 6px 16px 16px 6px; background: hsl(var(--accent-fill-foreground)); color: hsl(var(--paper));
                 box-shadow: inset 12px 0 0 hsl(var(--paper) / .05), inset 13px 0 0 rgb(0 0 0 / .45), 0 40px 72px -28px rgb(25 21 16 / .6), 0 2px 6px rgb(25 21 16 / .2); }
  .offer-cover::before, .offer-cover::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 16px; background: hsl(var(--paper));
                                              border: 1px solid hsl(var(--accent-fill-foreground) / .14); box-shadow: 0 12px 28px -14px rgb(25 21 16 / .35); }
  .offer-cover::before { transform: translate(12px, 12px); }
  .offer-cover::after { transform: translate(24px, 24px); z-index: -2; }
  .offer-cover-head { display: flex; align-items: center; gap: 12px; font: 500 13px/18px var(--font);
                      color: hsl(var(--paper) / .7); }
  .offer-cover-head svg { width: 32px; height: 32px; }
  .offer-cover-title { margin-top: 8px; font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: hsl(var(--accent-fill)); }
  /* A Chinese title breaks between its words, as the headings do: "赚钱" split over two lines, "册" alone on the last (2026-11-08);
     a word wider than the book still breaks */
  :root:lang(zh) .offer-cover-title { word-break: keep-all; overflow-wrap: anywhere; }
  .offer-cover-list { margin-top: auto; }
  .offer-cover-list li { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid hsl(var(--paper) / .14); font-size: 14px; line-height: 1.3; }
  .offer-cover-list span { font-family: var(--mono); color: hsl(var(--accent-fill)); }
  .offer-cover-foot { font: 500 13px/18px var(--font); color: hsl(var(--paper) / .6); }

  /* The gold band (.home-offer), the playbook's home slide until 2026-11-07, when that slide took the banner's own look (.hb-offer
     below): on the gold, the words and the price on the left, the book on the right; one column with no book on a narrow screen. Its
     thumbnail was the mark's bars on the gold */
  .home-offer { --paper: 40 13% 95.3%; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; text-align: left; }
  .home-offer-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
  .home-offer h2 { font-size: clamp(34px, 4vw, 56px); line-height: .98; letter-spacing: -.045em; font-weight: 800; }
  .home-offer h2 a { color: inherit; text-decoration: none; }
  .home-offer h2 mark { display: inline-block; line-height: .88; padding: .06em .1em .1em; border-radius: .08em; background: hsl(var(--ink)); color: hsl(var(--accent-fill)); }
  :root:lang(zh) .home-offer h2 { line-height: 1.15; letter-spacing: -.02em; }
  .home-offer .offer-lead { font-size: 17px; }
  .home-offer .offer-now { font-size: 30px; }
  .home-offer .offer-stage { max-width: 300px; }
  .home-offer .offer-cover { padding: 26px 26px 26px 32px; gap: 12px; }
  .home-offer .offer-cover-title { font-size: 30px; }
  .home-offer .offer-cover-list li { padding: 6px 0; font-size: 13px; }
  .hb-thumb-pic.offer-gold { display: grid; place-items: center; }
  .hb-thumb-pic.offer-gold svg { width: 34%; height: auto; }
  .hb-thumb-pic.offer-gold rect { fill: hsl(var(--accent-fill-foreground)); }
  @media (max-width: 900px) { .home-offer { grid-template-columns: minmax(0, 1fr); } .home-offer .offer-stage { display: none; } .home-offer .offer-lead { font-size: 16px; } }

  /* Its tile leading the home page's Hot news and deals (offerTile in mindket-hot.ts homeHot, slot a: the first column's full height;
     the user, 2026-11-03: "duplicate here"), on the gold. Since 2026-11-08 the slide's (the owner: "Need to update the btm banner also";
     then "need better fit, and show title subtitle"): its title and line always shown at the top in ink, with no shade, and under them
     its picture (offerTileFile: the VS Code window and the method card on a clear ground) whole, at the foot; still under the pointer,
     where the full banner opens over it. Without that picture, the book, keeping only its name on a small tile */
  .hot-offer { --paper: 40 13% 95.3%; display: grid; grid-template-rows: auto minmax(0, 1fr); background: hsl(var(--accent-fill));
               color: hsl(var(--accent-fill-foreground)); }
  .hot-offer::after { content: none; }
  .hot-offer :is(.hot-cap, .hot-pic) { position: relative; inset: auto; }
  .hot-offer .hot-cap { grid-row: 1; padding-bottom: 0; }
  .hot-offer .hot-cap > * { opacity: 1; transform: none; text-shadow: none; }
  .hot-offer .hot-cap h3 { -webkit-line-clamp: 3; }
  .hot-offer .hot-cap p { color: hsl(var(--accent-fill-foreground) / .78); -webkit-line-clamp: 3; }
  .hot-offer .hot-pic { grid-row: 2; display: grid; place-items: center; padding: 20px 28px 28px 16px; }
  .hot-offer:is(:hover, :focus-visible) .hot-pic { transform: none; filter: none; }
  .hot-offer .offer-stage { width: 80%; max-width: 280px; }
  .hot-offer .offer-cover { padding: 24px 24px 24px 30px; gap: 12px; }
  .hot-offer .offer-cover-title { font-size: 28px; }
  .hot-offer .offer-cover-list li { padding: 6px 0; font-size: 13px; }
  @container (max-width: 250px) or (max-height: 400px) {
    .hot-offer .offer-cover { padding: 16px 16px 16px 22px; gap: 8px; }
    .hot-offer .offer-cover-head { gap: 8px; font-size: 10px; }
    .hot-offer .offer-cover-head svg { width: 20px; height: 20px; }
    .hot-offer .offer-cover-title { font-size: 20px; }
    .hot-offer :is(.offer-cover-list, .offer-cover-foot) { display: none; }
  }
  .hot-offer .hot-pic:has(.hot-offer-pic) { padding: 0; }
  .hot-pic .hot-offer-pic { object-fit: contain; object-position: 50% 100%; }

  /* Its slide on Mindket's home, the first of the banner under the hero (offerSlide in mindket-hot.ts homeBanner; the user, 2026-11-07,
     of the gold band among the other slides' pictures: "Need to have better design to fit the theme"; then "use the ori yellow but can
     remaint he background design"): a brand slide as theirs are (mindket-blog-css.ts .hb-own, .hb-brand), on its own picture, on
     Mindket's yellow with ink words, as the gold band was: no dark shade under them, the tag and the button ink with yellow type, Claude's
     mark on a white tile as their logos. The yellow and the ink are the theme's own (the same in light and dark) */
  .hb-offer { --hb-ink: var(--accent-fill-foreground); background: hsl(var(--accent-fill)); color: hsl(var(--hb-ink)); }
  .hb-offer .hb-bg::after { content: none; }
  .hb-offer .hb-logo .offer-logo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #fff;
                                   box-shadow: 0 4px 14px -6px hsl(var(--hb-ink) / .45); }
  .hb-offer .hb-logo .offer-logo svg { width: 26px; height: 26px; }
  .hb-offer .hb-copy p { text-wrap: pretty; color: hsl(var(--hb-ink) / .8); }
  .hb-offer .hb-brand p:not(.hb-deal) { -webkit-line-clamp: 4; } /* a phone wraps the line to three: "Not made by Anthropic." stays whole */
  .hb-offer .hb-brand :is(h2, .hb-h) em { background: hsl(var(--hb-ink)); color: hsl(var(--accent-fill)); box-shadow: none; }
  .hb-offer .hb-deal strong { color: hsl(var(--hb-ink)); }
  .hb-offer .hb-deal s { color: hsl(var(--hb-ink) / .55); }
  .hb-offer .hb-deal span { color: hsl(var(--hb-ink) / .8); }
  .hb-offer .hb-brand .hb-go { background: hsl(var(--hb-ink)); color: hsl(var(--accent-fill)); box-shadow: 0 10px 26px -12px hsl(var(--hb-ink) / .7); }
  .hb-offer .hb-brand .hb-go:hover { filter: none; background: hsl(var(--hb-ink) / .86); }
  /* The same slide is the wall's full banner (mindket-hot.ts homeHot .hot-full, the wall's size: about 420 to 700 px tall; the owner,
     2026-11-08, of it still showing the book and the old words: "need update here also after hover"): its picture fills it and shows with
     it, its words on the left a step smaller rise after; on a short wall the line under the price is left out */
  .hot-full.hb-offer { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; padding: 40px 56px; isolation: isolate; }
  .hot-full > .hb-bg { opacity: 1; transform: none; }
  .hot-full .hb-brand { gap: 14px; }
  .hot-full .hb-brand .hb-h { font-size: clamp(30px, 3.1vw, 44px); }
  @container (max-height: 470px) { .hot-full .hb-brand > p:not(.hb-deal) { display: none; } }

  /* A heading on the left, ruled notes on the right, each opening with its point */
  .offer-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .offer-split-head { display: grid; gap: 16px; }
  .offer-notes p { padding: 22px 0; border-top: 1px solid hsl(var(--border)); font-size: 17px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
  .offer-notes p:last-child { border-bottom: 1px solid hsl(var(--border)); }
  .offer-notes strong { color: hsl(var(--foreground)); font-weight: 600; }

  /* A product page's Text and Custom HTML sections (KDD 533): under the heading, or on its right in a split band */
  .offer-prose { display: grid; gap: 16px; max-width: 760px; margin-top: 32px; }
  .offer-prose p { font-size: 17px; line-height: 1.65; color: hsl(var(--muted-foreground)); }
  .offer-html { margin-top: 32px; min-width: 0; }
  .offer-split > :is(.offer-prose, .offer-html) { margin-top: 0; }
  .offer-html :is(img, video) { max-width: 100%; height: auto; border-radius: 12px; }
  .offer-html iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }

  /* The chart: the two chats as bars on one scale, each bar's tokens in its tip, the turns that ask for the note in the brand's colour.
     Bars in the ink (a soft grey on dark: the paper would glare), validated against the gold for colour-blind readers (dataviz) */
  .offer-chart { --bar: var(--foreground); display: grid; gap: 40px; margin: 48px 0 32px; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offer-chart { --bar: var(--muted-foreground); } }
  :root[data-theme="dark"] .offer-chart { --bar: var(--muted-foreground); }
  .offer-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: hsl(var(--muted-foreground)); }
  .offer-legend span { display: inline-flex; align-items: center; gap: 8px; }
  .offer-legend span::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: hsl(var(--bar)); }
  .offer-legend .is-note::before { background: hsl(var(--brand)); }
  .offer-run { display: grid; gap: 16px; }
  .offer-run-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
  .offer-run-total { font: 600 clamp(22px, 2.4vw, 32px)/1.1 var(--mono); letter-spacing: -.03em; }
  .offer-bars { position: relative; display: grid; grid-template-columns: repeat(var(--slots), minmax(0, 1fr)); gap: 2px; height: 200px;
                border-bottom: 1px solid hsl(var(--border)); }
  /* Each turn is a column the full height (the pointer finds it), its bar drawn from the baseline */
  .offer-bars i { position: static; display: flex; align-items: flex-end; }
  .offer-bars i::before { content: ''; width: 100%; height: var(--h); min-height: 2px; border-radius: 4px 4px 0 0; background: hsl(var(--bar)); transform-origin: bottom; }
  .offer-bars i.is-note::before { background: hsl(var(--brand)); }
  .offer-bars i:hover::before { opacity: .7; }
  /* A bar's tip sits just over its bar, set on the chart's own width by the bar's place along it (--x, 0 to 1): the first opens to the
     right, the last to the left, the middle ones centred, so no tip runs past the chart on any screen (a phone's bars are 6 px wide) */
  .offer-bars i:hover::after { left: calc(var(--x) * 100%); bottom: calc(var(--h) + 6px); transform: translateX(calc(var(--x) * -100%)); }
  .offer-chart-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
  .offer-chart-result strong { font: 600 clamp(56px, 7vw, 96px)/1 var(--mono); letter-spacing: -.05em; color: hsl(var(--brand)); }
  .offer-chart-result span { max-width: 34ch; font-size: 19px; line-height: 1.45; }

  /* A closer look: the template on a sheet, as the zip has it, its headings in the brand's colour */
  .offer-sheet { margin: 0; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 16px; background: hsl(var(--card));
                 box-shadow: 0 32px 64px -32px rgb(25 21 16 / .35), var(--shadow); }
  .offer-sheet figcaption { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
  .offer-sheet figcaption svg { width: 20px; height: 20px; }
  .offer-sheet code { font: 500 13px/1 var(--mono); color: hsl(var(--muted-foreground)); }
  .offer-sheet pre { margin: 0; padding: 28px 28px 32px; border: 0; border-radius: 0; background: none; font: 400 14px/1.75 var(--mono); color: hsl(var(--foreground)); }
  .offer-sheet strong { font-weight: 700; color: hsl(var(--brand)); }

  /* What it runs on: each product's own logo, as its maker draws it (never recoloured or framed), with its name */
  .offer-logo { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; }
  .offer-logo svg { width: 100%; height: 100%; }
  /* On the paper, as a pill: Claude's coral all but vanished on the gold, and its maker asks for a ground it reads on */
  .offer-works { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: 9999px; background: hsl(var(--paper));
                 color: hsl(var(--accent-fill-foreground)); font-size: 16px; font-weight: 600; box-shadow: 0 1px 2px rgb(25 21 16 / .12); }
  .offer-works span:last-child { margin-left: 4px; }
  /* Icons alone (the owner, 2026-11-10: "use only icon"): an even pill round them */
  .offer-works:not(:has(> span)) { padding: 8px 12px; }
  .offer-needs { display: grid; border-top: 1px solid hsl(var(--border)); }
  .offer-needs li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid hsl(var(--border)); }
  .offer-needs .offer-logo { width: 56px; height: 56px; }
  .offer-needs h3 { font-size: 22px; }
  .offer-needs p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: hsl(var(--muted-foreground)); }

  /* What's inside: a ruled table of contents, each chapter's file in code type */
  .offer-toc { margin-top: 40px; border-top: 1px solid hsl(var(--border)); }
  .offer-toc li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid hsl(var(--border)); }
  .offer-toc-n { font: 600 28px/1 var(--mono); letter-spacing: -.03em; color: hsl(var(--brand)); }
  .offer-toc h3 { font-size: 20px; }
  .offer-toc p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
  .offer-toc code { font: 400 13px/1.4 var(--mono); color: hsl(var(--muted-foreground)); }

  /* Three ruled columns: who it is for, the promise */
  .offer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
  .offer-cols > div { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid hsl(var(--border)); }
  .offer-cols p { font-size: 16px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
  .offer-cols .offer-read { font: 600 13px/18px var(--font); color: hsl(var(--brand)); }
  .offer-ink { background: hsl(var(--accent-fill-foreground)); color: hsl(var(--paper)); border-top: 0; }
  .offer-ink .offer-cols > div { border-color: hsl(var(--paper) / .16); }
  .offer-ink .offer-cols p { color: hsl(var(--paper) / .72); }
  .offer-ink strong { display: block; margin-bottom: 8px; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; color: hsl(var(--accent-fill)); }

  /* The price card, ringed in the gold, the mark on its top edge as its seal */
  .offer-buy { position: relative; max-width: 620px; margin: 32px auto 0; display: grid; justify-items: center; gap: 24px; padding: 64px 40px 48px; text-align: center;
               border-radius: 20px; border: 1px solid hsl(var(--accent-fill)); background: hsl(var(--card));
               box-shadow: 0 0 0 6px hsl(var(--accent-fill) / .18), var(--shadow-md); }
  .offer-seal { position: absolute; top: -32px; left: 50%; width: 64px; height: 64px; transform: translateX(-50%);
                box-shadow: 0 0 0 6px hsl(var(--background)), 0 12px 28px -10px rgb(25 21 16 / .45); }
  .offer-specs { width: 100%; border-top: 1px solid hsl(var(--border)); text-align: left; }
  .offer-specs > div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 15px; }
  .offer-specs dt { color: hsl(var(--muted-foreground)); flex: none; }
  .offer-specs dd { margin: 0; font-weight: 500; text-align: right; }

  .offer-faq { max-width: 860px; }
  .offer-faq h2 { margin-bottom: 16px; }
  .offer-faq summary { font-size: 17px; }
  .offer-faq details p { font-size: 16px; line-height: 1.6; }

  /* The last word, on the gold again, under the mark */
  .offer-end { padding: 104px 0 120px; text-align: center; }
  .offer-end-mark { width: 72px; height: 72px; box-shadow: 0 0 0 2px hsl(var(--accent-fill-foreground)), 0 14px 32px -10px rgb(25 21 16 / .45); }
  .offer-end .container { display: grid; justify-items: center; gap: 24px; }
  .offer-end h2 { font-size: clamp(36px, 5vw, 64px); }
  .offer-end .offer-price { justify-content: center; }

  @media (max-width: 1023px) {
    .offer-hero-grid, .offer-split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .offer-split { gap: 24px; }
    .offer-stage { max-width: 360px; justify-self: start; }
    .offer-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  }
  @media (max-width: 640px) {
    .offer-band { padding: 56px 0; }
    .offer-hero { padding: 40px 0 64px; }
    /* A phone's first screen (AI-108): a headline a size down (the logo plate over it is gone at every width since 2026-11-10) */
    .offer-hero h1 { font-size: 36px; }
    :root:lang(zh) .offer-hero h1 { font-size: 30px; }
    .offer-bg { top: 24%; right: -60px; height: 420px; }
    .offer-bg.is-ring { display: none; }
    .offer-lead { font-size: 17px; }
    .offer-now { font-size: 30px; }
    .offer-stage { max-width: calc(100% - 24px); transform: perspective(1400px) rotateY(-8deg) rotateX(2deg); }
    .offer-cover { padding: 28px 28px 28px 36px; aspect-ratio: auto; }
    .offer-cover-list { margin-top: 16px; }
    .offer-cover-title { font-size: 34px; }
    .offer-toc li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
    .offer-toc-n { font-size: 22px; }
    .offer-toc code { grid-column: 2; }
    .offer-buy { padding: 56px 20px 32px; }
    .offer-works { align-items: flex-start; font-size: 15px; }
    /* Four logos or more (Money's six) take their own row, the words under them: beside them the words ran a word a line (AI-123) */
    .offer-works:has(> .offer-logo:nth-child(4)) { flex-wrap: wrap; border-radius: 20px; padding: 10px 16px; }
    .offer-works:has(> .offer-logo:nth-child(4)) span:last-child { flex-basis: 100%; margin-left: 0; }
    .offer-needs li { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
    .offer-needs .offer-logo { width: 40px; height: 40px; }
    .offer-end { padding: 72px 0 88px; }
    /* On a phone the name keeps the bar's width, the price under it (the regular one struck beside today's, as the hero has them:
       2026-11-08, it showed today's alone), Get it beside both */
    .offer-bar .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px 16px; height: 56px; }
    .offer-bar-buy { display: contents; }
    .offer-bar-name { grid-area: 1 / 1; font-size: 15px; line-height: 1.25; }
    .offer-bar-price { grid-area: 2 / 1; gap: 8px; font-size: 12px; }
    .offer-bar .btn { grid-area: 1 / 2 / 3 / 3; }
    .offer-bars { height: 140px; gap: 1px; }
    .offer-bars i::before { border-radius: 2px 2px 0 0; }
    .offer-chart-result span { font-size: 17px; }
    .offer-sheet pre { padding: 20px; font-size: 13px; }
  }

  /* Claude's palette (the user, 2026-11-06: "use as much the claude color and logo"): a page with a Claude coral band (tone coral,
     KDD 533: mindket-product-page.ts adds .offer-claude) is drawn on Claude's ivory with its near-black ink and its coral, the mark's
     own #D97757; on Claude's dark ground in dark. The gold's rules then paint the coral bands and the buttons, the ink band is Claude's
     near-black, and --brand (numbers, the chart's note bars, the sheet's headings) is a coral deep enough to read on the ivory (5.5:1)
     and on its tint (5.0:1; at 44% a timeline's "Claude does" on the tint read 4.49, 2026-11-08) */
  .offer-claude { --paper: 48 33% 97%; --background: 48 33% 97%; --card: 0 0% 100%; --muted: 48 25% 92%; --border: 45 13% 86%;
                  --foreground: 60 3% 8%; --muted-foreground: 40 4% 36%; --brand: 15 55% 41%;
                  --accent-fill: 15 63% 60%; --accent-fill-hover: 15 63% 54%; --accent-fill-foreground: 60 3% 8%; --claude: 15 63% 60%;
                  background: hsl(var(--background)); color: hsl(var(--foreground)); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offer-claude { --background: 60 2% 11%; --card: 60 3% 14%; --muted: 60 3% 15%; --border: 60 3% 21%; --foreground: 48 33% 95%; --muted-foreground: 45 6% 66%; --brand: 15 63% 66%; } }
  :root[data-theme="dark"] .offer-claude { --background: 60 2% 11%; --card: 60 3% 14%; --muted: 60 3% 15%; --border: 60 3% 21%; --foreground: 48 33% 95%; --muted-foreground: 45 6% 66%; --brand: 15 63% 66%; }
  .offer-coral :is(.eyebrow, .offer-lead, .offer-price s, .offer-sub, .offer-final) { color: hsl(var(--ink) / .86); }
  .offer-ink :is(.eyebrow, .offer-lead, .offer-sub, .offer-price s, .offer-final) { color: hsl(var(--paper) / .72); }
  .offer-ink .offer-end-mark { box-shadow: 0 0 0 2px hsl(var(--accent-fill) / .5), 0 14px 32px -10px rgb(0 0 0 / .5); }

  /* Claude's mark huge behind a coral band, and the ink's on its page: filled, then ringed. It turns as the page scrolls past it, the
     ring slowly on its own; on the book's corner it turns too (none for a reader who asks for less motion) */
  .offer-spark { right: -60px; height: 640px; }
  .offer-spark.is-ring { right: -150px; height: 900px; }
  .offer-spark path { fill: hsl(var(--paper) / .2); }
  .offer-spark.is-ring path { fill: none; stroke: hsl(var(--paper) / .34); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
  .offer-ink .offer-spark path { fill: hsl(var(--accent-fill) / .12); }
  .offer-ink .offer-spark.is-ring path { fill: none; stroke: hsl(var(--accent-fill) / .26); }
  .offer-cover.is-claude .offer-cover-title { padding-right: 84px; }
  .offer-cover-spark { position: absolute; top: 30px; right: 30px; display: grid; width: 76px; height: 76px; }
  .offer-cover-spark .offer-logo { width: 100%; height: 100%; }

  /* A gold band on a Claude page wears Mindket's own gold again (the user, 2026-11-07: "first section use back the yellow bg color"),
     and Claude's mark behind it keeps its own coral, filled, then ringed ("claude logo remain ori color") */
  .offer-claude .offer-gold:not(.offer-coral) { --accent-fill: 42 89% 64%; --accent-fill-hover: 43 81% 56%; --accent-fill-foreground: 33 22% 8%; }
  .offer-claude .offer-gold:not(.offer-coral) .offer-spark path { fill: hsl(var(--claude)); }
  .offer-claude .offer-gold:not(.offer-coral) .offer-spark.is-ring path { fill: none; stroke: hsl(var(--claude) / .7); }
  /* Every buy button on a Claude page is Mindket's yellow with ink words, not the coral (the user, 2026-11-11: "change all this color
     btn to theme yellow btn"); on a band it stays the ink pill, its words in the yellow. The FREE on a gift's picture wears it too */
  .offer-claude :is(.btn-accent, .offer-gift-free) { --accent-fill: 42 89% 64%; --accent-fill-hover: 43 81% 56%; --accent-fill-foreground: 33 22% 8%; }

  /* Cube, Mindket's mascot, at the book's corner saying hello (mindket-offer.ts heroArt, mindket-product-page.ts mascotBox; the user,
     2026-11-07: "add moscot name "Cube" to the first section and add some animation"): it pops up once the book has settled, waves (the
     app's renderer where the page script brings it to life, else its still sways) and floats, and its bubble pops in after it. On a
     narrow screen it moves to the book's other corner; with no mascot (a brand without one) the bubble goes too */
  .offer-art { position: relative; justify-self: center; width: 100%; max-width: 420px; }
  .offer-art .offer-stage { max-width: none; }
  .offer-cube { position: absolute; left: -56px; bottom: -72px; z-index: 2; width: 152px; }
  .offer-cube:not(:has(.hero-mascot-box)) { display: none; }
  .offer-cube .offer-cube-box { width: 100%; margin: 0; transform-origin: 50% 90%; }
  .offer-cube-say { position: absolute; left: 90%; bottom: 8%; display: grid; justify-items: start; gap: 4px; width: max-content; max-width: 224px;
                    padding: 10px 14px 12px; border-radius: 18px 18px 18px 4px; background: hsl(var(--paper)); color: hsl(var(--accent-fill-foreground));
                    font-size: 15px; line-height: 1.35; font-weight: 500; box-shadow: 0 18px 40px -18px rgb(0 0 0 / .45); transform-origin: 0 100%; }
  .offer-cube-say strong { padding: 2px 8px; border-radius: 9999px; background: hsl(var(--accent-fill)); font: 700 12px/16px var(--font); }
  @media (max-width: 1023px) {
    .offer-art { justify-self: start; max-width: 360px; }
    .offer-cube { left: auto; right: -40px; bottom: -64px; width: 128px; }
    .offer-cube-say { left: auto; right: 90%; border-radius: 18px 18px 4px 18px; transform-origin: 100% 100%; }
    .offer-claude .offer-gold:not(.offer-coral) .offer-spark path { fill: hsl(var(--claude) / .55); }
  }
  @media (max-width: 640px) {
    .offer-art { max-width: calc(100% - 24px); }
    .offer-cube { right: -16px; bottom: -56px; width: 108px; }
    .offer-cube-say { max-width: 200px; font-size: 14px; }
  }
  @keyframes offer-cube-in { from { opacity: 0; translate: 0 56px; scale: .5; } 60% { opacity: 1; } }
  @keyframes offer-cube-hi { 0%, 100% { rotate: 0deg; } 15% { rotate: -9deg; } 30% { rotate: 7deg; } 45% { rotate: -5deg; } 60% { rotate: 3deg; } 75% { rotate: 0deg; } }
  @keyframes offer-say-in { from { opacity: 0; scale: .3; } }
  @keyframes offer-say-bob { 50% { translate: 0 -5px; } }
  @media (prefers-reduced-motion: no-preference) {
    .offer-cube { animation: offer-cube-in .9s cubic-bezier(.34, 1.56, .64, 1) .7s backwards; }
    .offer-cube .offer-cube-box:not(.is-live) { animation: offer-cube-hi 1.8s ease-in-out 1.6s 2; }
    .offer-cube-say { animation: offer-say-in .6s cubic-bezier(.34, 1.56, .64, 1) 1.4s backwards, offer-say-bob 3.6s ease-in-out 2.2s infinite; }
  }

  /* The long day on a drawn screen (mindket-offer.ts walkthrough; the user, 2026-11-08: "need like screen part by part potin out the
     user problema and provide solition"): kept in view beside the steps (above them on a narrow screen, on the band's own colour so the
     steps pass under it). The screen is VS Code as it looks (the owner, 2026-11-11: "this design change to claude or vs code layout"):
     its Dark Modern colours in the window's own properties, the title bar, the activity bar, the explorer, CLAUDE.md open in the editor
     (tabs, breadcrumbs, numbered lines) and Claude Code's panel on the right with its prompt box, the status bar under them. Each part
     shows its problem in the window's own form (the long file's note, the full context meter, the pasted log, the limit's red banner,
     the model) and wears its step's number in a red pin; it is ringed in white while its step is read and turns green once fixed, the fix
     fading in where the problem was. The window's layout follows its own width (a container): no explorer under 600 px, the panel's
     extras gone under 420 px. While the page script runs (web/mindket-search.js offerScreen, .is-live) the steps not being read step back */
  .ws { --bad: 4 78% 64%; --good: 145 55% 52%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
  .ws code { font: 500 .92em/1.2 var(--mono); }
  .ws-screen { position: sticky; top: calc(var(--head-h) + 81px); z-index: 2; container-type: inline-size; }
  .ws-win { overflow: hidden; border: 1px solid hsl(var(--paper) / .16); border-radius: 16px;
            background: linear-gradient(hsl(var(--paper) / .05), hsl(var(--paper) / .05)), hsl(var(--accent-fill-foreground));
            box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7); font: 500 12px/1.4 var(--font); color: hsl(var(--paper) / .8); }
  .ws-top { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid hsl(var(--paper) / .1); font-size: 11px; color: hsl(var(--paper) / .5); }
  .ws-top i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--paper) / .2); }
  .ws-top span { flex: 1; min-width: 0; margin-right: 39px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .ws-clock { font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: hsl(var(--paper)); }

  .ws-vs { --vs-bg: 0 0% 12%; --vs-side: 0 0% 9%; --vs-line: 0 0% 17%; --vs-fg: 0 0% 80%; --vs-dim: 0 0% 62%; --vs-num: 214 8% 47%;
           --vs-blue: 206 100% 42%; --vs-sel: 240 5% 23%; --vs-input: 0 0% 19%; --vs-input-line: 0 0% 24%; --vs-file: 198 44% 52%;
           --vs-json: 60 57% 53%; --vs-md: 207 61% 59%; --vs-li: 218 72% 65%;
           border-color: hsl(0 0% 100% / .14); border-radius: 10px; background: hsl(var(--vs-bg)); font: 400 12px/1.4 var(--font); color: hsl(var(--vs-fg)); }
  .ws-vs svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .ws-vs .offer-logo svg { stroke: none; }
  .ws-vs .ws-top { gap: 8px; height: 32px; border-color: hsl(var(--vs-line)); background: hsl(var(--vs-side)); font-size: 12px; color: hsl(var(--vs-fg)); }
  .ws-vs .ws-top i { width: 11px; height: 11px; background: hsl(3 100% 67%); }
  .ws-vs .ws-top i:nth-child(2) { background: hsl(40 99% 59%); }
  .ws-vs .ws-top i:nth-child(3) { background: hsl(129 67% 47%); }
  .ws-vs .ws-top span { margin-right: 0; }
  .ws-vs .ws-top b { display: flex; gap: 6px; color: hsl(var(--vs-fg) / .8); }
  .ws-vs .ws-top b svg { width: 15px; height: 15px; }
  .ws-main { display: flex; min-height: 392px; }
  .ws-act { flex: none; display: flex; flex-direction: column; align-items: center; width: 40px; margin: 0; padding: 4px 0 6px; border-right: 1px solid hsl(var(--vs-line));
            background: hsl(var(--vs-side)); color: hsl(var(--vs-fg) / .5); }
  .ws-act i { display: grid; place-items: center; width: 40px; height: 38px; }
  .ws-act svg { width: 21px; height: 21px; }
  .ws-act .is-on { color: hsl(var(--vs-fg)); }
  .ws-act .is-cc { margin-top: auto; }
  .ws-act .offer-logo { width: 19px; height: 19px; }
  .ws-act .offer-logo path { fill: currentColor; }
  .ws-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 3.8fr) minmax(0, 5fr); }
  .ws-pane { margin: 0; }
  .ws-files { display: grid; align-content: start; padding-bottom: 8px; border-right: 1px solid hsl(var(--vs-line)); background: hsl(var(--vs-side)); }
  .ws-files p { display: flex; align-items: center; gap: 4px; height: 22px; margin: 0; padding: 0 8px 0 28px; overflow: hidden; white-space: nowrap; }
  .ws-files .ws-pane { justify-content: space-between; height: 35px; padding-left: 20px; font-size: 11px; }
  .ws-files .ws-pane b { font-weight: 400; color: hsl(var(--vs-dim)); }
  .ws-files .is-root { padding-left: 4px; font-size: 11px; font-weight: 700; }
  .ws-files .is-dir { padding-left: 12px; }
  .ws-files .is-in { padding-left: 36px; }
  .ws-files .is-open { background: hsl(var(--vs-sel)); color: hsl(0 0% 100%); }
  .ws-ft { flex: none; display: inline-grid; place-items: center; width: 16px; font: 700 9px/1 var(--font); color: hsl(var(--vs-file)); }
  .ws-ft.is-json { color: hsl(var(--vs-json)); }
  .ws-ft.is-log { font-size: 13px; font-weight: 400; color: hsl(var(--vs-dim)); }
  .ws-ed { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid hsl(var(--vs-line)); }
  .ws-tabs { display: flex; height: 35px; margin: 0; overflow: hidden; border-bottom: 1px solid hsl(var(--vs-line)); background: hsl(var(--vs-side)); }
  .ws-tabs span { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 10px; border-right: 1px solid hsl(var(--vs-line)); white-space: nowrap; color: hsl(var(--vs-dim)); }
  .ws-tabs .is-on { margin-bottom: -1px; background: hsl(var(--vs-bg)); box-shadow: inset 0 1px hsl(var(--vs-blue)); color: hsl(0 0% 100%); }
  .ws-tabs i { margin-left: 6px; font-style: normal; color: hsl(var(--vs-fg)); }
  .ws-crumbs { display: flex; align-items: center; gap: 2px; height: 22px; margin: 0; padding: 0 12px 0 8px; overflow: hidden; white-space: nowrap; font-size: 11.5px; color: hsl(var(--vs-dim)); }
  .ws-crumbs i { padding: 0 4px; font-style: normal; }
  .ws-lens { margin: 0 8px 0 36px; font-size: 11px; line-height: 16px; }
  .ws-src { display: grid; margin: 0; counter-reset: ln; font: 400 11.5px/18px var(--mono); }
  .ws-src i { display: grid; grid-template-columns: 32px auto minmax(0, 1fr); align-items: center; height: 18px; font-style: normal; counter-increment: ln; }
  .ws-src i::before { content: counter(ln); padding-right: 14px; text-align: right; color: hsl(var(--vs-num)); }
  .ws-src i:first-child::before { color: hsl(var(--vs-fg)); }
  .ws-src i::after { content: ''; grid-column: 3; width: var(--w); height: 6px; margin-left: 7px; border-radius: 9999px; background: hsl(var(--vs-fg) / .26); }
  .ws-src i:empty::after { content: none; }
  .ws-src .is-h { font-weight: 700; color: hsl(var(--vs-md)); }
  .ws-src .is-h::after { background: hsl(var(--vs-md) / .6); }
  .ws-src .is-li { color: hsl(var(--vs-li)); }
  .ws-chat { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 12px 12px; background: hsl(var(--vs-side)); }
  .ws-chat > .ws-pane { display: flex; align-items: center; gap: 7px; height: 35px; margin: 0 -12px; padding: 0 12px; border-bottom: 1px solid hsl(var(--vs-line)); font-weight: 600; }
  .ws-chat > .ws-pane b { display: flex; gap: 8px; margin-left: auto; color: hsl(var(--vs-dim)); }
  .ws-chat > .ws-pane svg { width: 15px; height: 15px; }
  .ws-chat .offer-logo { width: 15px; height: 15px; }
  .ws-chat p { margin: 0; }
  .ws-lines { display: grid; gap: 7px; margin: 0; }
  .ws-lines i { display: block; width: var(--w); height: 5px; border-radius: 9999px; background: hsl(var(--vs-fg) / .22); }
  .ws-lines.is-log { gap: 6px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
  .ws-lines.is-log i { height: 4px; }
  .ws-tool { display: flex; align-items: center; gap: 7px; font-size: 9px; color: hsl(var(--good)); }
  .ws-tool i { width: 58%; height: 5px; border-radius: 9999px; background: hsl(var(--vs-fg) / .22); }
  .ws-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 11px; color: hsl(var(--vs-dim)); }
  .ws-meter i { position: relative; height: 5px; overflow: hidden; border-radius: 9999px; background: hsl(var(--vs-fg) / .14); }
  .ws-meter i::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: hsl(var(--good)); }
  .ws-meter.is-full i::before { background: hsl(var(--bad)); }
  .ws-paste { display: flex; align-items: flex-start; gap: 6px; font: 500 11.5px/1.4 var(--font); }
  .ws-paste svg { width: 14px; height: 14px; }
  .ws-was .ws-paste { color: hsl(var(--bad)); }
  .ws-now .ws-paste { display: block; }
  .ws-paste code { padding: 1px 5px; border-radius: 4px; background: hsl(var(--vs-blue) / .3); color: hsl(var(--vs-md)); }
  .ws-limit { display: flex; align-items: center; gap: 6px; font-weight: 700; color: hsl(var(--bad)); }
  .ws-limit svg { width: 14px; height: 14px; }
  .ws-vs .ws-clock { color: hsl(var(--vs-fg)); }
  .ws-ask { display: grid; gap: 8px; margin-top: auto; padding: 9px 8px 7px 10px; border: 1px solid hsl(var(--vs-input-line)); border-radius: 8px; background: hsl(var(--vs-input)); }
  .ws-ask > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--vs-fg)); }
  .ws-ask > p i { display: inline-block; width: 1.5px; height: 13px; margin-left: 1px; vertical-align: -2px; background: hsl(var(--vs-fg)); }
  .ws-ask-bar { display: flex; align-items: center; gap: 6px; color: hsl(var(--vs-dim)); }
  .ws-ask-bar > b { display: grid; place-items: center; width: 18px; height: 22px; font: 400 13px/1 var(--mono); }
  .ws-ask-bar svg { width: 15px; height: 15px; }
  .ws-ask-bar .ws-send { width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--claude, 15 63% 60%)); color: hsl(60 3% 8%); }
  .ws-ask-bar .ws-send svg { width: 14px; height: 14px; stroke-width: 2.2; }
  .ws-model { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 7px; border-radius: 5px; font: 600 11px/1.4 var(--font); }
  .ws-model svg { width: 12px; height: 12px; }
  .ws-was .ws-model { background: hsl(var(--bad) / .16); color: hsl(var(--bad)); }
  .ws-now .ws-model { background: hsl(var(--good) / .14); color: hsl(var(--good)); }
  .ws-status { display: flex; align-items: stretch; height: 22px; margin: 0; overflow: hidden; border-top: 1px solid hsl(var(--vs-line)); background: hsl(var(--vs-side));
               white-space: nowrap; font-size: 11px; color: hsl(var(--vs-fg)); }
  .ws-status > * { display: flex; align-items: center; gap: 4px; padding: 0 7px; }
  .ws-status > b { padding: 0 9px; background: hsl(var(--vs-blue)); color: hsl(0 0% 100%); }
  .ws-status .is-end { margin-left: auto; }
  .ws-status svg { width: 13px; height: 13px; }
  .ws-status .offer-logo { width: 12px; height: 12px; }

  .ws-part { position: relative; display: grid; border-radius: 8px; outline: 1.5px solid transparent; outline-offset: 3px; }
  .ws-part > div { grid-area: 1 / 1; display: grid; align-content: start; gap: 6px; border-radius: inherit; }
  .ws-now { opacity: 0; translate: 0 6px; }
  .ws-part.is-fixed > .ws-was { opacity: 0; translate: 0 -6px; }
  .ws-part.is-fixed > .ws-now { opacity: 1; translate: none; }
  .ws-part.is-on { outline-color: hsl(var(--paper) / .9); box-shadow: 0 0 0 7px hsl(var(--paper) / .1); }
  .ws-pin { position: absolute; top: -9px; left: -9px; z-index: 1; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
            background: hsl(var(--bad)); box-shadow: 0 0 0 2px hsl(var(--vs-side)); font: 700 11px/1 var(--font); color: hsl(60 3% 8%); }
  .ws-part.is-fixed .ws-pin { background: hsl(var(--good)); }
  .ws-part.is-on .ws-pin { background: hsl(var(--paper)); }
  .ws-code { flex: 1; border-radius: 0; outline-offset: -4px; }
  .ws-code > div { padding: 6px 0 0; gap: 2px; }
  .ws-code > .ws-pin { top: 6px; left: 8px; box-shadow: 0 0 0 2px hsl(var(--vs-bg)); }
  .ws-code.is-on { box-shadow: inset 0 0 0 4px hsl(var(--paper) / .1); }
  .ws-was .ws-lens { color: hsl(var(--bad)); }
  .ws-now .ws-lens { color: hsl(var(--good)); }
  .ws-sess > div, .ws-usage > div { padding: 8px 10px; border: 1px solid hsl(var(--vs-line)); background: hsl(var(--vs-bg)); }
  .ws-sess > .ws-was { border-color: hsl(var(--bad) / .45); }
  .ws-you > div { padding: 8px 10px; background: hsl(var(--vs-input)); }
  .ws-usage > .ws-was { border-color: hsl(var(--bad) / .55); background: hsl(var(--bad) / .12); }
  .ws-usage > .ws-now { border-color: hsl(var(--good) / .35); }
  .ws-chip { margin-left: auto; border-radius: 5px; }
  .ws-chip > .ws-pin { top: 50%; left: -25px; translate: 0 -50%; }
  @container (max-width: 600px) {
    .ws-body { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
    .ws-files, .ws-status .is-more { display: none; }
  }
  @container (max-width: 420px) {
    .ws-main { min-height: 0; }
    .ws-vs .ws-top { gap: 6px; height: 28px; padding: 0 10px; font-size: 11px; }
    .ws-vs .ws-top i { width: 9px; height: 9px; }
    .ws-vs .ws-top b, .ws-crumbs, .ws-tabs span + span, .ws-tabs i, .ws-lines.is-chat, .ws-tool, .ws-chat > .ws-pane b, .ws-ask-bar > b:not(.ws-send) { display: none; }
    .ws-act { width: 30px; padding-top: 2px; }
    .ws-act i { width: 30px; height: 32px; }
    .ws-act svg { width: 17px; height: 17px; }
    .ws-act .offer-logo { width: 16px; height: 16px; }
    .ws-tabs, .ws-chat > .ws-pane { height: 30px; }
    .ws-chat { gap: 8px; padding: 0 8px 8px; }
    .ws-chat > .ws-pane { margin: 0 -8px; padding: 0 8px; }
    .ws-lens { margin-left: 30px; }
    .ws-code > .ws-pin { left: 5px; }
    .ws-src i { grid-template-columns: 24px auto minmax(0, 1fr); }
    .ws-src i::before { padding-right: 8px; }
    .ws-src i:nth-child(n + 9) { display: none; }
    .ws-sess > div, .ws-usage > div, .ws-you > div { padding: 6px 8px; }
    .ws-lines.is-log { display: none; }
    .ws-ask { gap: 4px; padding: 7px 6px 5px 8px; }
  }

  .ws-steps { display: grid; }
  .ws-step { display: grid; align-content: start; gap: 12px; min-height: 52vh; padding-bottom: 48px; }
  .ws-step:last-child { min-height: 0; padding-bottom: 0; }
  .ws-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: hsl(var(--bad)); font: 700 15px/1 var(--font); color: hsl(var(--accent-fill-foreground)); }
  .ws-step.is-fixed .ws-n { background: hsl(var(--good)); }
  .ws-step h3 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: hsl(var(--paper)); }
  .ws-step p { font-size: 16px; line-height: 1.6; color: hsl(var(--paper) / .76); }
  .ws-step b { display: block; margin-bottom: 2px; font: 600 14px/1.4 var(--font); color: hsl(var(--paper) / .56); }
  .ws-bad b { color: hsl(var(--bad)); }
  .ws-good { padding: 12px 16px; border: 1px solid hsl(var(--good) / .28); border-radius: 14px; background: hsl(var(--good) / .08); }
  .ws-good b { color: hsl(var(--good)); }
  .ws-step p.ws-kit { font-size: 14px; }
  .ws-step code { padding: 1px 6px; border-radius: 6px; background: hsl(var(--paper) / .1); color: hsl(var(--paper)); }
  .ws-step.is-end { padding-top: 24px; border-top: 1px solid hsl(var(--paper) / .16); }
  .ws-step.is-end h3 { font-size: 30px; color: hsl(var(--good)); }
  .ws-step p.ws-note { font-size: 14px; color: hsl(var(--paper) / .56); }
  .ws.is-live .ws-step { cursor: pointer; }
  .ws.is-live .ws-step:not(.is-on) { opacity: .42; }
  @keyframes ws-ping { to { box-shadow: 0 0 0 2px hsl(var(--vs-side)), 0 0 0 12px hsl(var(--paper) / 0); } }
  @media (prefers-reduced-motion: no-preference) {
    .ws-part { transition: outline-color .4s, box-shadow .4s; }
    .ws-ask > p i { animation: ws-blink 1s steps(1) infinite; }
    .ws-part > div { transition: opacity .6s var(--spring), translate .6s var(--spring); }
    .ws-pin, .ws-n { transition: background .4s; }
    .ws-step { transition: opacity .5s var(--spring); }
    .ws-part.is-on .ws-pin { animation: ws-ping 1.2s ease-out infinite; box-shadow: 0 0 0 2px hsl(var(--vs-side)), 0 0 0 2px hsl(var(--paper) / .6); }
  }

  /* On Claude's page the columns are cards, numbered in the coral and lifting under the pointer: the three moves, who it is for and the
     three steps (the promise's statements on the ink stay ruled) */
  .offer-claude .offer-band:not(.offer-ink) .offer-cols { counter-reset: col; gap: 20px; }
  .offer-claude .offer-band:not(.offer-ink) .offer-cols > div { counter-increment: col; gap: 12px; padding: 32px 28px; border: 1px solid hsl(var(--border)); border-radius: 24px;
                                                                background: hsl(var(--card)); box-shadow: var(--shadow);
                                                                transition: transform .5s var(--spring), box-shadow .5s var(--spring), opacity .8s var(--spring) var(--d, 0s), translate 1s var(--spring) var(--d, 0s); }
  .offer-claude .offer-band:not(.offer-ink) .offer-cols > div::before { content: counter(col, decimal-leading-zero); font: 600 44px/1 var(--mono); letter-spacing: -.05em; color: hsl(var(--accent-fill)); }
  .offer-claude .offer-band:not(.offer-ink) .offer-cols > div:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -28px rgb(20 20 19 / .3), var(--shadow); }
  .offer-claude .offer-band:not(.offer-ink) .offer-cols h3 { font-size: 22px; }

  /* The savings chart (mindket-offer.ts savings) on Claude's coral: a card on the ivory for each plan step, its twelve months as coral
     bars of what has been kept by then, all on one scale, the twelfth in the ink; the year counted up as it comes into view and what
     it buys of Ultra on an ink pill; then Ultra on the ink with Claude's mark */
  .save { display: grid; gap: 16px; }
  .save-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); gap: 32px; align-items: center; padding: 28px 32px;
              border-radius: 24px; background: hsl(var(--paper)); color: hsl(var(--accent-fill-foreground)); box-shadow: 0 24px 48px -28px rgb(20 20 19 / .45);
              transition: transform .5s var(--spring), box-shadow .5s var(--spring); }
  .save-row:hover { transform: translateY(-4px); box-shadow: 0 32px 56px -28px rgb(20 20 19 / .55); }
  .save-head { display: grid; gap: 6px; }
  .save-head h3 { font-size: 22px; }
  .save-head p { font-size: 15px; line-height: 1.45; color: hsl(var(--accent-fill-foreground) / .68); }
  .save-head .save-month { margin-top: 6px; color: hsl(var(--accent-fill-foreground)); }
  .save-month strong { font: 600 26px/1 var(--mono); letter-spacing: -.03em; }
  .save-bars { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 120px; border-bottom: 1px solid hsl(var(--accent-fill-foreground) / .16); }
  .save-bars i { position: static; display: flex; align-items: flex-end; }
  .save-bars i::before { content: ''; width: 100%; height: var(--h); min-height: 3px; border-radius: 6px 6px 2px 2px; background: hsl(var(--accent-fill)); transform-origin: bottom; }
  .save-bars i:last-child::before { background: hsl(var(--accent-fill-foreground)); }
  .save-bars i:hover::before { opacity: .72; }
  .save-bars i:hover::after { left: calc(var(--x) * 100%); bottom: calc(var(--h) + 8px); transform: translateX(calc(var(--x) * -100%)); }
  .save-axis { display: flex; justify-content: space-between; margin-top: 8px; font: 500 12px/1 var(--mono); color: hsl(var(--accent-fill-foreground) / .62); }
  .save-year { display: grid; gap: 4px; justify-items: end; text-align: right; }
  .save-year strong { font: 700 clamp(36px, 4vw, 56px)/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
  .save-year p:nth-child(2) { font-size: 14px; color: hsl(var(--accent-fill-foreground) / .68); }
  .save-ultra { margin-top: 8px; padding: 6px 12px; border-radius: 9999px; background: hsl(var(--accent-fill-foreground)); color: hsl(var(--accent-fill)); font: 600 13px/1.2 var(--mono); }
  .save-note { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; padding: 28px 32px; border-radius: 24px;
               background: hsl(var(--accent-fill-foreground)); color: hsl(var(--paper)); }
  .save-note .offer-logo { width: 56px; height: 56px; }
  .save-note h3 { font-size: 22px; }
  .save-note p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: hsl(var(--paper) / .76); }
  .save-note + .offer-sub { max-width: none; margin-top: 24px; font-size: 14px; }

  /* Pro like Ultra (#pro-ultra, mindket-offer.ts proUltra): a week's work four ways on one track, Pro used the playbook way its full
     length and Ultra used so running past its end (the chevrons); under it the long day on Claude's near-black, the two ways side by
     side with their tokens on one meter, and the multiple large in coral */
  .pu { display: grid; gap: 20px; }
  .pu-week, .pu-day { display: grid; align-content: start; gap: 22px; padding: 32px; border-radius: 24px; }
  .pu-week { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: var(--shadow); }
  .pu-axis { font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: hsl(var(--muted-foreground)); }
  .pu-rows, .pu-way ul { margin: 0; padding: 0; list-style: none; }
  .pu-rows { display: grid; gap: 22px; }
  .pu-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); grid-template-areas: 'label track x'; gap: 20px; align-items: center; }
  .pu-label { grid-area: label; display: grid; justify-items: start; gap: 2px; }
  .pu-label strong { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
  .pu-label span { font-size: 14px; color: hsl(var(--muted-foreground)); }
  .pu-tag { margin-top: 6px; padding: 4px 10px; border-radius: 9999px; background: hsl(var(--accent-fill-foreground)); color: hsl(var(--accent-fill));
            font: 600 12px/1.3 var(--mono); font-style: normal; }
  .pu-track { grid-area: track; position: relative; height: 14px; border-radius: 9999px; background: hsl(var(--foreground) / .07); }
  .pu-track i { position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 14px; border-radius: inherit; background: hsl(var(--foreground) / .32); transform-origin: left; }
  .pu-row.is-lean .pu-track i { background: hsl(var(--accent-fill)); }
  .pu-row.is-past .pu-track i { background: linear-gradient(90deg, hsl(var(--accent-fill)) 60%, hsl(var(--brand))); }
  .pu-row.is-past .pu-track i::after { content: '»»'; position: absolute; right: 8px; top: 50%; translate: 0 -54%; font: 700 13px/1 var(--mono);
                                        letter-spacing: -.1em; color: hsl(var(--paper)); }
  .pu-x { grid-area: x; text-align: right; }
  .pu-x strong { font: 700 clamp(22px, 2.2vw, 30px)/1 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .pu-row.is-lean .pu-x strong { color: hsl(var(--brand)); }
  .pu-day { border: 1px solid hsl(var(--paper) / .08); background: hsl(var(--accent-fill-foreground)); color: hsl(var(--paper)); }
  .pu-day h3 { font-size: 22px; line-height: 1.25; }
  .pu-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pu-way { display: grid; gap: 10px; padding: 20px; border-radius: 16px; background: hsl(var(--paper) / .06); }
  .pu-way.is-lean { background: hsl(var(--accent-fill) / .14); box-shadow: inset 0 0 0 1px hsl(var(--accent-fill) / .5); }
  .pu-way h4 { font: 600 13px/1.2 var(--font); color: hsl(var(--paper) / .7); }
  .pu-way.is-lean h4 { color: hsl(var(--accent-fill)); }
  .pu-way ul { display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: hsl(var(--paper) / .8); }
  .pu-way li { position: relative; padding-left: 16px; }
  .pu-way li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--paper) / .4); }
  .pu-way.is-lean li::before { background: hsl(var(--accent-fill)); }
  .pu-total { font-size: 14px; color: hsl(var(--paper) / .72); }
  .pu-total strong { font: 700 24px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: hsl(var(--paper)); }
  .pu-meter { position: relative; height: 8px; overflow: hidden; border-radius: 9999px; background: hsl(var(--paper) / .1); }
  .pu-meter span { position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 8px; border-radius: inherit; background: hsl(var(--paper) / .55); transform-origin: left; }
  .pu-way.is-lean .pu-meter span { background: hsl(var(--accent-fill)); }
  .pu-result { display: flex; align-items: baseline; gap: 14px; padding-top: 18px; border-top: 1px solid hsl(var(--paper) / .14); }
  .pu-result strong { flex: none; font: 700 clamp(44px, 4.4vw, 64px)/1 var(--mono); letter-spacing: -.05em; color: hsl(var(--accent-fill)); }
  .pu-result span { font-size: 15px; line-height: 1.5; color: hsl(var(--paper) / .8); }
  .pu + .offer-sub { max-width: none; margin-top: 24px; font-size: 14px; }

  @media (max-width: 1023px) {
    /* One column: the screen sticks under the bars on the band's colour (as wide as the window) and the steps pass under it */
    .ws { display: block; }
    .ws-screen { top: calc(var(--head-h) + 57px); padding: 12px 0 16px; background: hsl(var(--accent-fill-foreground));
                 box-shadow: 0 0 0 100vmax hsl(var(--accent-fill-foreground)); clip-path: inset(0 -100vmax); }
    .ws-steps { margin-top: 24px; }
    .ws-step { min-height: 44vh; }
    .save-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .save-year { justify-items: start; text-align: left; }
  }
  @media (max-width: 640px) {
    .offer-spark { top: 30%; right: -90px; height: 380px; }
    .offer-cover-spark { top: 22px; right: 22px; width: 56px; height: 56px; }
    .offer-cover.is-claude .offer-cover-title { padding-right: 64px; }
    .ws-step { gap: 10px; }
    .ws-step h3 { font-size: 22px; }
    .ws-step.is-end h3 { font-size: 24px; }
    .offer-claude .offer-band:not(.offer-ink) .offer-cols > div { padding: 24px 20px; }
    .save-row, .save-note { padding: 24px 20px; }
    .save-note { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
    .save-note .offer-logo { width: 40px; height: 40px; }
    .save-bars { height: 96px; gap: 3px; }
    .pu-week, .pu-day { padding: 24px 20px; }
    .pu-ways { grid-template-columns: minmax(0, 1fr); }
    .pu-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label x' 'track track'; gap: 10px 12px; }
    .pu-result { flex-direction: column; gap: 8px; }
  }

  /* Scroll transitions, as a Framer site's (the user, 2026-11-06: "use the framer animaton of the section 转场method to show wow
     feeling"). With the page script (web/mindket-search.js offerMotion: .mk-motion on the root, .is-in on a band as it comes into
     view, --i on each item and bar) a band's content rises out of a blur, its items one after another; a band on Claude's coral or the
     ink opens from a rounded card to the window's width; the bars grow from their baseline and the year's
     figures count up. The hero needs no script: its words rise as the page opens and the highlight sweeps in. Claude's mark turns as
     the page scrolls. The reveal moves translate, scale and filter, never transform, so a card's lift under the pointer is its own.
     Without the script, or for a reader who asks for less motion, the page stands still and whole. */
  @keyframes offer-in { from { opacity: 0; translate: 0 28px; filter: blur(8px); } }
  @keyframes offer-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes offer-turn { from { rotate: -24deg; } to { rotate: 48deg; } }
  @keyframes offer-spin { to { rotate: 360deg; } }
  @media (prefers-reduced-motion: no-preference) {
    .offer-hero .offer-copy > * { animation: offer-in .9s var(--spring) backwards; }
    .offer-hero .offer-copy > :nth-child(2) { animation-delay: .07s; }
    .offer-hero .offer-copy > :nth-child(3) { animation-delay: .14s; }
    .offer-hero .offer-copy > :nth-child(4) { animation-delay: .21s; }
    .offer-hero .offer-copy > :nth-child(5) { animation-delay: .28s; }
    .offer-hero .offer-copy > :nth-child(n + 6) { animation-delay: .35s; }
    .offer-hero h1 mark { animation: offer-sweep .9s var(--spring) .5s backwards; }
    .offer-spark.is-ring, .offer-cover-spark .offer-logo { animation: offer-spin 90s linear infinite; }
    .offer-cover-spark .offer-logo { animation-duration: 40s; }
    @supports (animation-timeline: view()) {
      .offer-spark:not(.is-ring) { animation: offer-turn linear both; animation-timeline: view(); }
    }

    .mk-motion .offer > section:not(.offer-hero) > .container { opacity: 0; translate: 0 64px; scale: .97; filter: blur(12px);
                                                                transition: opacity 1s var(--spring), translate 1.2s var(--spring), scale 1.2s var(--spring), filter 1s var(--spring); }
    .mk-motion .offer > section.is-in > .container { opacity: 1; translate: none; scale: none; filter: none; }
    .mk-motion .offer > section :is(.offer-cols, .offer-notes, .offer-toc, .offer-needs, .pu-rows, .pu-ways, .save, .offer-specs, .faq) > * {
      --d: calc(var(--i, 0) * 90ms + 180ms); opacity: 0; translate: 0 32px; transition: opacity .8s var(--spring) var(--d), translate 1s var(--spring) var(--d); }
    .mk-motion .offer > section.is-in :is(.offer-cols, .offer-notes, .offer-toc, .offer-needs, .pu-rows, .pu-ways, .save, .offer-specs, .faq) > * { opacity: 1; translate: none; }
    .mk-motion .offer .save > .save-row { transition: transform .5s var(--spring), box-shadow .5s var(--spring), opacity .8s var(--spring) var(--d), translate 1s var(--spring) var(--d); }
    .mk-motion .offer > :is(.offer-band, .offer-end):is(.offer-ink, .offer-coral) { clip-path: inset(5% 3% round 48px); transition: clip-path 1.3s var(--spring); }
    .mk-motion .offer > :is(.offer-band, .offer-end):is(.offer-ink, .offer-coral).is-in { clip-path: inset(0 round 0); }
    .mk-motion .offer :is(.offer-bars, .save-bars) i::before { scale: 1 0; transition: scale .9s var(--spring) calc(var(--i, 0) * 22ms + 250ms); }
    .mk-motion .offer .is-in :is(.offer-bars, .save-bars) i::before { scale: none; }
    .mk-motion .offer :is(.pu-track i, .pu-meter span) { scale: 0 1; transition: scale 1.3s var(--spring) calc(var(--i, 0) * 140ms + 400ms); }
    .mk-motion .offer .is-in :is(.pu-track i, .pu-meter span) { scale: none; }
  }

  /* Each band's five colours for the richer kinds: its type, its quieter type, its rules, its figures and a tint, on every tone */
  .offer > section { --o-text: var(--foreground); --o-quiet: var(--muted-foreground); --o-rule: var(--border); --o-em: var(--brand); --o-tint: var(--muted);
                     --o-glow: var(--accent-fill); --o-deck: var(--accent-fill); --o-ground: var(--background); }
  .offer > .offer-gold { --o-text: var(--ink); --o-quiet: var(--ink) / .8; --o-rule: var(--ink) / .2; --o-em: var(--ink); --o-tint: var(--ink) / .06;
                         --o-glow: var(--paper); --o-deck: var(--ink); --o-ground: var(--accent-fill); }
  .offer > .offer-coral { --o-quiet: var(--ink) / .86; }
  .offer > .offer-ink { --o-text: var(--paper); --o-quiet: var(--paper) / .72; --o-rule: var(--paper) / .16; --o-em: var(--accent-fill); --o-tint: var(--paper) / .06;
                        --o-deck: var(--paper); --o-ground: var(--accent-fill-foreground); }
  /* Body text never leaves one word (or one Han character, 写) alone on its last line */
  .offer :is(p, li, dd, td, figcaption) { text-wrap: pretty; }

  /* YouTube's red (tone red): white type on a red deep enough for it, the same in light and dark. The page's own colours are remapped in
     it, so every kind on it reads (its notes, its table of contents, a price card); the button turns white with the red on it */
  .offer .offer-gold.offer-red { --accent-fill: 350 100% 42%; --accent-fill-hover: 350 100% 36%; --ink: 0 0% 100%;
                                 --foreground: 0 0% 100%; --muted-foreground: 350 100% 96%; --border: 350 72% 59%; --input: 350 72% 59%; --brand: 0 0% 100%;
                                 --card: 350 100% 37%; --muted: 350 100% 37%; --ring: 0 0% 100%;
                                 --o-text: 0 0% 100%; --o-quiet: 350 100% 96%; --o-rule: 0 0% 100% / .3; --o-em: 0 0% 100%; --o-tint: 0 0% 0% / .14;
                                 --o-glow: 350 100% 82%; --o-deck: 0 0% 100%; }
  .offer .offer-red :is(.eyebrow, .offer-lead, .offer-cash, .offer-price s, .offer-sub, .offer-final) { color: hsl(var(--muted-foreground)); }
  .offer .offer-red .btn-accent:hover { background: hsl(350 100% 96%); }
  .offer-red .offer-play path { fill: hsl(0 0% 100% / .1); }
  .offer-red .offer-play.is-ring path { fill: none; stroke: hsl(0 0% 100% / .24); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

  /* A page with a red band: YouTube's red as its accent, YouTube's near-black as its ink, white type on the red */
  .offer-youtube { --paper: 0 0% 96%; --brand: 350 100% 42%; --ring: 350 100% 42%;
                   --accent-fill: 350 100% 42%; --accent-fill-hover: 350 100% 36%; --accent-fill-foreground: 0 0% 7%; --on-fill: 0 0% 100%; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offer-youtube { --brand: 358 100% 66%; --ring: 358 100% 66%; } }
  :root[data-theme="dark"] .offer-youtube { --brand: 358 100% 66%; --ring: 358 100% 66%; }
  :where(.offer-youtube) :is(.btn-accent, .offer-off, .offer-gift-free) { color: hsl(var(--on-fill)); }
  .offer-youtube > .offer-ink { --accent-fill: 358 100% 66%; --accent-fill-hover: 358 100% 72%; --brand: 358 100% 66%; --on-fill: var(--accent-fill-foreground); }
  .offer-youtube > .offer-ink .offer-play path { fill: hsl(var(--accent-fill) / .09); }
  .offer-youtube > .offer-ink .offer-play.is-ring path { fill: none; stroke: hsl(var(--accent-fill) / .24); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
  .offer-youtube .offer-gold:not(.offer-red) { --accent-fill: 42 89% 64%; --accent-fill-hover: 43 81% 56%; --accent-fill-foreground: 33 22% 8%; --brand: 33 22% 8%; }

  /* YouTube's mark huge behind a red band (and the ink on its page): filled, then ringed, drifting as the page scrolls past */
  .offer-play { right: -150px; height: 760px; }
  .offer-play.is-ring { right: -320px; height: 1040px; }

  /* The hero's picture as a promo card (L5): beside the headline, half the hero, turned toward it, glowing in the band's colour, two cards
     fanned behind it. It settles as the page opens and squares up under the pointer; only its turn moves, so the first frame has it */
  @media (min-width: 1024px) { .offer-hero-grid:has(> .offer-pic) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
  .offer-pic { position: relative; z-index: 0; justify-self: center; width: calc(100% - 40px); max-width: 600px; margin: 32px 40px 32px 0;
               transform: perspective(1800px) rotateY(-12deg) rotateX(5deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .offer-pic:hover { transform: perspective(1800px) rotateY(-4deg) rotateX(2deg); }
  :is(.offer-pic, .offer-pic-face) > img { position: relative; display: block; width: 100%; height: auto; border-radius: 20px; background: hsl(var(--o-tint));
                   box-shadow: 0 0 0 1px hsl(0 0% 100% / .16), 0 36px 72px -28px rgb(0 0 0 / .55), 0 0 64px -6px hsl(var(--o-glow) / .75); }
  .offer-pic::before, .offer-pic::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 20px; transform-origin: 50% 100%;
                                          background: hsl(var(--o-deck) / .2); border: 1px solid hsl(var(--o-deck) / .32); }
  .offer-pic::before { rotate: 5deg; translate: 3% -3%; }
  .offer-pic::after { z-index: -2; rotate: 10deg; translate: 6% -6%; background: hsl(var(--o-deck) / .1); }
  @keyframes offer-pic-in { from { transform: perspective(1800px) rotateY(-30deg) rotateX(12deg) translateY(40px) scale(.94); } }
  @keyframes offer-deck-in { from { rotate: 0deg; translate: 0 0; } }
  @keyframes offer-bar-in { from { transform: scaleX(0); } }
  @keyframes offer-float-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
  /* It turns after the pointer (the page script's offerTilt sets --tx and --ty, -1 to 1, on a fine pointer that has not asked for less
     motion), a light sliding over it the same way, and its figure stands on a white panel over its lower corner, drifting a little the
     other way. Without the script it keeps its turn and squares up on hover, as before */
  .offer-pic { --tx: 0; --ty: 0; transform: perspective(1800px) rotateY(calc(-12deg + var(--tx) * 10deg)) rotateX(calc(5deg - var(--ty) * 8deg)); }
  .offer-pic:hover { transform: perspective(1800px) rotateY(calc(-4deg + var(--tx) * 10deg)) rotateX(calc(2deg - var(--ty) * 8deg)); }
  .offer-pic.is-tilt { transition-duration: .25s; }
  .offer-pic-glare { position: absolute; inset: 0; z-index: 1; border-radius: 20px; pointer-events: none; opacity: 0; transition: opacity .5s;
                     background: radial-gradient(70% 70% at calc(50% + var(--tx) * 45%) calc(50% + var(--ty) * 45%), hsl(0 0% 100% / .22), hsl(0 0% 100% / 0) 70%); }
  .offer-pic.is-tilt .offer-pic-glare { opacity: 1; }
  .offer-pic-stat { position: absolute; z-index: 2; left: -32px; bottom: -36px; display: grid; gap: 4px; width: max-content; max-width: min(320px, 72%);
                    margin: 0; padding: 16px 20px 18px; border-radius: 18px; background: hsl(0 0% 100%); color: hsl(0 0% 9%);
                    box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 28px 56px -18px rgb(0 0 0 / .5);
                    translate: calc(var(--tx) * -10px) calc(var(--ty) * -8px); transition: translate .6s var(--spring); }
  .offer-pic.is-tilt .offer-pic-stat { transition-duration: .25s; }
  .offer-pic-stat-label { font: 600 13px/18px var(--font); color: hsl(0 0% 36%); }
  .offer-pic-stat-n { font: 800 52px/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: hsl(var(--accent-fill-foreground)); }
  .offer-red .offer-pic-stat-n { color: hsl(350 100% 42%); }
  .offer-pic-stat-line { font-size: 14px; line-height: 1.45; color: hsl(0 0% 24%); text-wrap: pretty; }
  /* A phone's first screen (AI-108, mindket-product-page.ts glance): the picture and its figure under the headline, on the figure's
     white card; the big card under the buttons is left out there, so the page grows no longer */
  .offer-glance { display: none; }
  @media (max-width: 640px) {
    .offer-glance { display: grid; gap: 14px; align-items: center; width: 100%; }
    .offer-glance.has-stat { grid-template-columns: 112px minmax(0, 1fr); padding: 10px 16px 10px 10px; border-radius: 20px; background: hsl(0 0% 100%);
                             color: hsl(0 0% 9%); box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 14px 32px -16px rgb(0 0 0 / .45); }
    .offer-glance img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: hsl(var(--o-tint)); }
    .offer-glance:not(.has-stat) img { aspect-ratio: 16 / 9; border-radius: 18px; box-shadow: 0 14px 32px -16px rgb(0 0 0 / .45); }
    .offer-glance-stat { display: grid; gap: 2px; margin: 0; min-width: 0; }
    .offer-glance-n { font: 800 34px/1.05 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: hsl(var(--accent-fill-foreground)); }
    .offer-red .offer-glance-n { color: hsl(350 100% 42%); }
    .offer-glance-line { font-size: 13px; line-height: 1.4; color: hsl(0 0% 24%); text-wrap: pretty; }
    .offer-hero-grid:has(.offer-glance) > .offer-pic { display: none; }
  }
  /* The picture as a screen (the hero's screen field; the owner, 2026-11-09: "the main screen show ... money, number, rate and how"): a
     strip of the picture over a dark screen with the figure, the bars and their source, dark on every theme as a screen is. The figure
     panel moves to the card's top left; the notes (its floats field) float by its top right, its middle right and under its bottom right */
  .offer-pic-face { position: relative; overflow: hidden; border-radius: 20px; background: hsl(0 0% 6%);
                    box-shadow: 0 0 0 1px hsl(0 0% 100% / .16), 0 36px 72px -28px rgb(0 0 0 / .55), 0 0 64px -6px hsl(var(--o-glow) / .75); }
  .offer-pic-face > img { aspect-ratio: 2 / 1; object-fit: cover; border-radius: 0; box-shadow: none; }
  .offer-screen { display: grid; gap: 14px; padding: 18px 24px 24px; color: hsl(0 0% 100%); background: linear-gradient(180deg, hsl(0 0% 10%), hsl(0 0% 5%)); }
  .offer-screen-top { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 13px/18px var(--font); color: hsl(0 0% 100% / .72); }
  .offer-screen-dots { display: inline-flex; gap: 5px; }
  .offer-screen-dots i { width: 8px; height: 8px; border-radius: 50%; background: hsl(0 0% 100% / .22); }
  .offer-screen-dots i:first-child { background: hsl(350 100% 52%); }
  .offer-screen-fig { display: grid; gap: 4px; margin: 0; }
  .offer-screen-label { font: 600 13px/18px var(--font); color: hsl(0 0% 100% / .66); }
  .offer-screen-n { font: 800 56px/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: hsl(0 0% 100%); }
  .offer-screen-line { font-size: 13px; line-height: 1.45; color: hsl(0 0% 100% / .66); text-wrap: pretty; }
  .offer-screen-bars { display: grid; grid-template-columns: fit-content(13em) minmax(40px, 1fr) max-content; align-items: center; gap: 9px 12px;
                       margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid hsl(0 0% 100% / .12);
                       font-size: 13px; line-height: 18px; color: hsl(0 0% 100% / .82); }
  .offer-screen-bars li { display: contents; }
  .offer-screen-bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .offer-screen-track { height: 8px; overflow: hidden; border-radius: 999px; background: hsl(0 0% 100% / .1); }
  .offer-screen-track i { display: block; width: var(--w); height: 100%; border-radius: inherit; transform-origin: left;
                          background: linear-gradient(90deg, hsl(350 100% 46%), hsl(8 100% 64%)); }
  .offer-screen-bars b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: hsl(0 0% 100%); }
  .offer-screen-bars li:first-child b { color: hsl(45 100% 64%); }
  .offer-screen-note { margin: 0; font-size: 12px; line-height: 1.45; color: hsl(0 0% 100% / .52); text-wrap: pretty; }
  .offer-pic.has-screen .offer-pic-stat { top: -52px; bottom: auto; left: -40px; max-width: min(280px, 60%); padding: 12px 16px 14px; border-radius: 16px; }
  .offer-pic.has-screen .offer-pic-stat-n { font-size: 40px; }
  .offer-pic.has-screen .offer-pic-stat-line { font-size: 13px; }
  .offer-pic.has-floats .offer-screen { padding-bottom: 64px; }
  /* The hero's badge (mindket-product-page.ts award): the GitHub trending badge's shape (the owner, 2026-11-11: "make the badge like the
     purple", then of a laurel of gold squares: "chang eto normal better badge"; that morning a gold sticker, "try other design, dont make
     it move", then an ink plaque): a white card with no edge (the owner, 2026-11-12: "remove the border black line"), its soft shadow
     holding it on the gold, TOP in a gold laurel (.offer-award-laurel), then its line small over its words, in ink and the page's own case
     (no capital labels, the user, 2026-11-07). Still: no tilt, light or hover. One ink in every theme and tone, as the gold hero is the
     same in both */
  .offer-award { --award-ink: 33 22% 8%; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 18px 6px 8px;
                 border-radius: 12px; color: hsl(var(--award-ink)); background: #fff;
                 box-shadow: 0 10px 24px -14px hsl(var(--award-ink) / .45); }
  .offer-award-seal { display: grid; place-items: center; flex: none; }
  .offer-award-seal svg.offer-award-laurel { width: 80px; height: 50px; } /* TOP big in it (the owner, 2026-11-12: "make the top bigger") */
  .offer-award-words { display: grid; gap: 1px; line-height: 1.15; white-space: nowrap; }
  .offer-award-words span { font-size: 12px; font-weight: 600; color: hsl(var(--award-ink) / .62); }
  .offer-award-words b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
  /* Out of the hero's entrance too (mindket-offer-css.ts offer-in, every line of the hero's words rising out of a blur): in place from the
     first frame, as the words under it still come in */
  .offer-hero .offer-copy > .offer-award { animation: none; }
  .offer-floats { margin: 0; padding: 0; list-style: none; }
  .offer-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 250px;
                 padding: 10px 16px 10px 10px; border-radius: 16px; background: hsl(0 0% 100%); color: hsl(0 0% 9%);
                 box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 24px 48px -16px rgb(0 0 0 / .5);
                 translate: calc(var(--tx) * -14px) calc(var(--ty) * -10px); transition: translate .6s var(--spring); }
  .offer-pic.is-tilt .offer-float { transition-duration: .25s; }
  .offer-float.is-1 { top: 5%; right: -36px; }
  .offer-float.is-2 { top: 27%; right: -40px; }
  .offer-float.is-3 { right: -24px; bottom: -88px; }
  .offer-pic.has-floats { margin-bottom: 96px; }
  /* The Token page's notes where its picture is calm (the owner, 2026-11-11, three boxes marked on a screenshot): top left, top right,
     lower right; the figure keeps the bottom left */
  .offer-claude .offer-float.is-1 { top: 7%; right: auto; left: -44px; }
  .offer-claude .offer-float.is-2 { top: -4%; right: -48px; }
  .offer-claude .offer-float.is-3 { top: auto; right: -56px; bottom: 16%; }
  .offer-claude .offer-pic.has-floats { margin-bottom: 0; }
  /* A narrow picture column (1024 to 1199 px): the lower-right note rises clear of the figure's card */
  @media (min-width: 1024px) and (max-width: 1199px) { .offer-claude .offer-float.is-3 { bottom: 36%; } }
  /* One column (up to 1023 px): the upper-left note stays inside the page's edge */
  @media (max-width: 1023px) { .offer-claude .offer-float.is-1 { left: -12px; } }
  .offer-float-logos { display: flex; flex: none; }
  .offer-float-logos .offer-logo { display: grid; place-items: center; width: 36px; height: 36px; padding: 7px; border-radius: 10px;
                                   background: hsl(0 0% 100%); box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
  .offer-float-logos .offer-logo + .offer-logo { margin-left: -10px; }
  .offer-float-logos .offer-logo svg { width: 100%; height: 100%; }
  .offer-float-pic { flex: none; width: 84px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
  .offer-float-text { display: grid; gap: 2px; font-size: 13px; line-height: 1.35; color: hsl(0 0% 32%); text-wrap: pretty; }
  .offer-float-text b { font-size: 14px; font-weight: 700; line-height: 1.3; color: hsl(0 0% 9%); }

  /* The banner on Mindket's field of small squares (the owner, 2026-11-09: "from the banner, background and add theme cube background"):
     the home hero's halftone (mindket-css.ts body:has(.hero-split)::after) on the band. Each 12 px cell is a grey well; two ellipses
     lighten it (screen) and contrast() cuts it at mid grey, so a darker spot draws a bigger square: none over the words, small behind the
     card, largest at the band's edges. Inverted and screened, the squares lighten a coloured band; on a plain one they darken it */
  .offer-squares { position: absolute; inset: 0; z-index: 0; pointer-events: none;
                 background: radial-gradient(ellipse 40% 72% at 24% 50%, hsl(0 0% 54%) 42%, black 100%),
                             radial-gradient(ellipse 26% 44% at 74% 52%, hsl(0 0% 42%) 30%, black 100%),
                             linear-gradient(90deg, white, black 50%, white) 0 0 / 12px 12px,
                             linear-gradient(white, black 50%, white) 0 0 / 12px 12px;
                 background-blend-mode: screen, screen, lighten, normal;
                 filter: contrast(60) invert(1); mix-blend-mode: screen; opacity: .13; }
  .offer-hero:not(.offer-gold, .offer-ink) .offer-squares { filter: contrast(60); mix-blend-mode: multiply; opacity: .1; }

  /* The banner on YouTube's red (the owner, 2026-11-08: "make more better banner"): set so the price and Get it show in the first
     screen of a 1280 x 900 window, the logos a row of white tiles after the buttons (their makers' colours read on white), and the red
     deepened to the left and lifted behind the picture, never lighter than 45% where its words sit (white on it 4.8:1 or more) */
  .offer-youtube .offer-hero { padding: 40px 0 80px; }
  .offer-youtube .offer-hero.offer-red { background: radial-gradient(70% 90% at 0% 100%, hsl(350 100% 34%), hsl(350 100% 34% / 0) 70%), hsl(var(--accent-fill)); }
  .offer-youtube .offer-copy { gap: 18px; }
  .offer-youtube .offer-hero .offer-lead { font-size: 18px; }
  .offer-youtube .offer-hero .offer-now { font-size: 32px; }
  .offer-youtube .offer-hero .offer-works { order: 9; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none;
                                            color: hsl(var(--muted-foreground)); font-size: 15px; font-weight: 500; }
  .offer-youtube .offer-hero .offer-works .offer-logo { width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: hsl(0 0% 100%);
                                                        box-shadow: 0 6px 16px -8px rgb(0 0 0 / .45); }
  .offer-youtube .offer-hero .offer-works span:last-child { margin-left: 6px; }
  @media (min-width: 1024px) {
    .offer-youtube .offer-hero.offer-red { background: radial-gradient(42% 70% at 80% 48%, hsl(350 100% 46%), hsl(350 100% 46% / 0) 72%),
                                                       radial-gradient(60% 90% at 0% 100%, hsl(350 100% 34%), hsl(350 100% 34% / 0) 70%), hsl(var(--accent-fill)); }
    .offer-youtube .offer-hero-grid:has(> .offer-pic) { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 48px; }
  }

  /* A calculator (kind calc): the fields on the left, the answer on the right on its tint, in one ruled box; stacked on a phone. Shown
     by the page script, which works it out as the reader types (offerCalcs) */
  .offer-calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 40px; overflow: hidden;
                border: 1px solid hsl(var(--o-rule)); border-radius: 24px; background: hsl(var(--o-ground)); }
  .offer-calc[hidden] { display: none; }
  .calc-form { display: grid; gap: 24px; align-content: start; padding: 32px; }
  .calc-fields { display: grid; gap: 18px; }
  .calc-field { display: grid; gap: 8px; }
  .calc-field > span, .calc-when legend { font: 600 14px/20px var(--font); color: hsl(var(--o-text)); }
  .calc-field .input { height: 48px; font-size: 18px; font-variant-numeric: tabular-nums; }
  .calc-when { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .calc-when legend { float: left; padding: 0; margin-bottom: 8px; }
  .calc-seg { clear: both; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: hsl(var(--o-tint)); }
  .calc-seg label { position: relative; display: grid; }
  .calc-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .calc-seg span { padding: 8px 10px; border-radius: 9px; text-align: center; font: 500 14px/20px var(--font); color: hsl(var(--o-quiet)); transition: background .2s, color .2s; }
  .calc-seg input:checked + span { background: hsl(var(--o-ground)); color: hsl(var(--o-text)); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
  .calc-seg input:focus-visible + span { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
  .calc-out { display: grid; gap: 28px; align-content: center; padding: 32px 40px; border-left: 1px solid hsl(var(--o-rule)); background: hsl(var(--o-tint)); }
  .calc-level { display: grid; gap: 10px; }
  .calc-level-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font: 600 16px/22px var(--font); color: hsl(var(--o-text)); }
  .calc-pct { font: 700 22px/1 var(--font); font-variant-numeric: tabular-nums; color: hsl(var(--o-em)); }
  .calc-meter { height: 12px; margin: 0; overflow: hidden; border-radius: 9999px; background: hsl(var(--o-rule)); }
  .calc-meter i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: hsl(var(--o-em)); transition: width .7s var(--spring); }
  .calc-left { min-height: 3em; font-size: 15px; line-height: 1.5; color: hsl(var(--o-quiet)); }
  .calc-level.is-done .calc-left { color: hsl(var(--o-text)); font-weight: 600; }
  .calc-score { display: grid; gap: 6px; margin: 0; }
  .calc-score-label { font: 600 14px/20px var(--font); color: hsl(var(--o-quiet)); }
  .calc-score-n { font: 800 clamp(64px, 8vw, 104px)/.95 var(--font); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: hsl(var(--o-em)); }
  .is-example .calc-score-n { color: hsl(var(--o-quiet)); }
  .calc-scale { display: grid; gap: 8px; }
  .calc-zones, .calc-marks { display: grid; grid-template-columns: 30fr 40fr 30fr; margin: 0; font: 500 13px/18px var(--font); color: hsl(var(--o-quiet)); }
  .calc-zones span:nth-child(3) { color: hsl(var(--o-em)); font-weight: 700; }
  .calc-track { position: relative; height: 12px; margin: 0; border-radius: 9999px;
                background: linear-gradient(to right, hsl(var(--o-rule)) 0 30%, hsl(var(--o-em) / .38) 30% 70%, hsl(var(--o-em)) 70% 100%); }
  .calc-pin { position: absolute; top: 50%; left: var(--at, 0%); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
              background: hsl(var(--o-ground)); border: 3px solid hsl(var(--o-text)); box-shadow: 0 2px 8px rgb(0 0 0 / .28); transition: left .7s var(--spring); }
  .calc-verdict { margin: 0; font: 600 17px/1.5 var(--font); color: hsl(var(--o-text)); text-wrap: pretty; }
  .is-example .calc-verdict { font-weight: 500; color: hsl(var(--o-quiet)); }
  .offer-calc-note { margin-top: 20px; }
  .calc-payback { margin: 0; font: 700 17px/1.5 var(--font); color: hsl(var(--o-em)); text-wrap: pretty; }
  .calc-payback:empty { display: none; }
  /* Look inside (AI-104, mindket-product-page.ts peek): closed under What's inside; the kit's files as a tree beside the first chapter's
     opening, stacked on a phone; the band's own colours, so it reads on any tone */
  .offer-peek { margin-top: 28px; border: 1px solid hsl(var(--o-rule)); border-radius: 16px; background: hsl(var(--o-tint)); color: hsl(var(--o-text)); }
  .offer-peek > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 20px; cursor: pointer; list-style: none; font-size: 16px; line-height: 24px; font-weight: 600; }
  .offer-peek > summary::-webkit-details-marker { display: none; }
  .offer-peek > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease; }
  .offer-peek[open] > summary::after { transform: rotate(-135deg); }
  .peek-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px 24px; padding: 4px 20px 20px; animation: peek-in .2s ease; }
  @keyframes peek-in { from { opacity: 0; transform: translateY(-4px); } }
  .peek-tree, .peek-tree ul { margin: 0; padding: 0; list-style: none; }
  .peek-tree { font: 13px/22px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
  .peek-tree ul { padding-left: 16px; border-left: 1px solid hsl(var(--o-rule)); margin: 2px 0 6px 6px; }
  .peek-tree .is-dir > span:first-child { font-weight: 600; }
  .peek-n { color: hsl(var(--o-quiet)); font-family: var(--font); }
  .peek-file { align-self: start; min-width: 0; margin: 0; border: 1px solid hsl(var(--o-rule)); border-radius: 12px; overflow: hidden; }
  .peek-file figcaption { padding: 10px 14px; border-bottom: 1px solid hsl(var(--o-rule)); font-size: 13px; line-height: 20px; font-weight: 600; color: hsl(var(--o-quiet)); }
  .peek-file pre { max-height: 360px; margin: 0; padding: 14px; overflow: auto; border: 0; border-radius: 0; background: none; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/22px var(--font); }
  .peek-note { grid-column: 1 / -1; margin: 0; color: hsl(var(--o-quiet)); }
  @media (max-width: 640px) { .peek-body { grid-template-columns: minmax(0, 1fr); padding: 4px 16px 16px; } }
  @media (prefers-reduced-motion: reduce) { .peek-body { animation: none; } .offer-peek > summary::after { transition: none; } }

  /* The price and a Get it closing the calculator, the samples and What's inside (REPORT AI-121); on a phone the button the full width */
  .offer-buyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid hsl(var(--o-rule)); }
  .offer-buyrow .offer-price { margin: 0; }
  .offer-buyrow .offer-now { font-size: 28px; }
  .offer-buyrow .offer-final { flex-basis: 100%; margin: 0; }
  @media (max-width: 640px) { .offer-buyrow .btn { flex: 1 1 100%; justify-content: center; } }

  /* The ad earnings estimate (calc earnings; the owner, 2026-11-09: "chat graph ... how can make money and estimation"): the two fields
     beside the answer, then the niches as a bar chart across the box, each bar a radio the reader taps to pick the niche, the one picked
     in the band's figure colour, the rest quieter. The form's parts join the box's grid (display: contents), so the chart spans it */
  .offer-calc.is-earnings { grid-template-areas: 'fields out' 'chart chart'; }
  .is-earnings .calc-form { display: contents; }
  .is-earnings .calc-fields { grid-area: fields; align-content: start; padding: 32px; }
  .is-earnings .calc-out { grid-area: out; }
  .calc-chart { grid-area: chart; min-width: 0; margin: 0; padding: 28px 32px 32px; border: 0; border-top: 1px solid hsl(var(--o-rule)); }
  .calc-chart legend { float: left; padding: 0; margin-bottom: 16px; font: 600 14px/20px var(--font); color: hsl(var(--o-text)); }
  .calc-bars { clear: both; display: grid; gap: 4px; }
  .calc-bar { position: relative; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 88px; align-items: center; gap: 16px;
              padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: background .2s; }
  .calc-bar:hover { background: hsl(var(--o-tint)); }
  .calc-bar input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .calc-bar:has(input:focus-visible) { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
  .calc-bar-name { font: 500 15px/20px var(--font); color: hsl(var(--o-quiet)); }
  .calc-bar-track { height: 14px; overflow: hidden; border-radius: 9999px; background: hsl(var(--o-rule)); }
  .calc-bar-track i { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: hsl(var(--o-em) / .32); transition: width .7s var(--spring), background .2s; }
  .calc-bar-n { justify-self: end; font: 600 15px/20px var(--font); font-variant-numeric: tabular-nums; color: hsl(var(--o-quiet)); }
  .calc-bar.is-on { background: hsl(var(--o-tint)); }
  .calc-bar.is-on .calc-bar-name, .calc-bar.is-on .calc-bar-n { color: hsl(var(--o-text)); font-weight: 700; }
  .calc-bar.is-on .calc-bar-track i { background: hsl(var(--o-em)); }
  .calc-range { margin: -12px 0 0; font-size: 15px; line-height: 1.5; color: hsl(var(--o-quiet)); }
  .calc-range:empty { display: none; }
  .calc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding-top: 20px; border-top: 1px solid hsl(var(--o-rule)); }
  .calc-facts dt { font: 500 13px/18px var(--font); color: hsl(var(--o-quiet)); }
  .calc-facts dd { margin: 4px 0 0; font: 700 22px/1.2 var(--font); font-variant-numeric: tabular-nums; color: hsl(var(--o-text)); }
  .is-example .calc-facts dd { color: hsl(var(--o-quiet)); }

  /* For you, not for you (cards fit): two tinted cards side by side, a tick before each line of the first, a cross before the other's */
  .offer-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .offer-fit-card { display: grid; gap: 18px; align-content: start; padding: 32px; border-radius: 24px; background: hsl(var(--o-tint)); }
  .offer-fit-card h3 { font: 700 22px/1.3 var(--font); color: hsl(var(--o-text)); }
  .offer-fit-card ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
  .offer-fit-card li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 17px; line-height: 1.5; color: hsl(var(--o-text)); }
  .offer-fit-mark { width: 24px; height: 24px; padding: 4px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .is-yes .offer-fit-mark { color: hsl(var(--background)); background: hsl(var(--success)); }
  .is-no .offer-fit-mark { color: hsl(var(--o-quiet)); background: hsl(var(--o-rule)); }
  .is-no li { color: hsl(var(--o-quiet)); }
  .offer-fit-note { font: 600 15px/1.5 var(--font); color: hsl(var(--o-text)); }

  /* A band's heading with *stars* (headOf): the marked words over a highlighter stroke in the band's figure colour */
  .offer-band h2 mark, .offer-end h2 mark { padding: 0 .08em; border-radius: .12em; color: inherit;
                                            background: linear-gradient(to top, hsl(var(--o-em) / .26) 0 42%, transparent 42%); }
  .offer-red h2 mark { background: linear-gradient(to top, hsl(0 0% 0% / .26) 0 42%, transparent 42%); }

  /* A month of sales (calc earn): the routes as a wrapping row of choices, the month in large type (smaller than a score: it is money),
     twelve bars of the running total (calc-run), the year's in the band's figure colour, every third month's total over its bar */
  .calc-seg.is-wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .is-earn .calc-score-n { font-size: clamp(44px, 6vw, 88px); }
  .calc-run { display: grid; gap: 8px; }
  .calc-run-label, .calc-run-ends { display: flex; justify-content: space-between; margin: 0; font: 500 13px/18px var(--font); color: hsl(var(--o-quiet)); }
  .calc-run-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; height: 150px; margin: 0; padding-top: 22px; }
  .calc-run-bars i { position: relative; height: var(--h, 0%); min-height: 2px; border-radius: 6px 6px 2px 2px; background: hsl(var(--o-em) / .32); transition: height .7s var(--spring); }
  .calc-run-bars i:last-child { background: hsl(var(--o-em)); }
  .calc-run-bars i:nth-child(3n)[data-v]::after { content: attr(data-v); position: absolute; bottom: 100%; left: 50%; translate: -50% -4px;
                                                font: 600 12px/16px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; color: hsl(var(--o-quiet)); }
  .calc-run-bars i:last-child[data-v]::after { left: auto; right: 0; translate: 0 -4px; color: hsl(var(--o-text)); }

  /* A day of Claude (calc tokens): the share saved in large type, then the two days as bars against the larger, their tokens beside */
  .calc-vs { display: grid; gap: 16px; }
  .calc-vs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: baseline; margin: 0; }
  .calc-vs-name { font: 600 14px/20px var(--font); color: hsl(var(--o-text)); }
  .calc-vs-n { grid-column: 2; grid-row: 1; font: 700 14px/20px var(--font); font-variant-numeric: tabular-nums; color: hsl(var(--o-quiet)); text-align: right; }
  .calc-vs-bar { grid-column: 1 / -1; grid-row: 2; height: 14px; overflow: hidden; border-radius: 9999px; background: hsl(var(--o-rule)); }
  .calc-vs-bar i { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: hsl(var(--o-quiet)); transition: width .7s var(--spring); }
  :is(.is-short, .is-lead) .calc-vs-bar i { background: hsl(var(--o-em)); }
  :is(.is-short, .is-lead) .calc-vs-n { color: hsl(var(--o-em)); }

  /* The buy card's plan line (planPick): the cheapest plan that opens the product, its month's price and what else it opens */
  .offer-pick { justify-self: stretch; display: grid; gap: 6px; margin: 0; padding: 16px 20px; border: 1px dashed hsl(var(--o-rule)); border-radius: 16px; }
  .offer-pick p { margin: 0; }
  .offer-pick-head { font: 600 14px/20px var(--font); color: hsl(var(--o-text)); }
  .offer-pick-cost { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; }
  .offer-pick-cost b { font: 800 28px/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: hsl(var(--o-text)); }
  .offer-pick-cost s, .offer-pick-cost > span:not(.badge) { font-size: 14px; color: hsl(var(--o-quiet)); }
  .offer-pick .meta { font-size: 14px; line-height: 1.5; color: hsl(var(--o-quiet)); }

  /* A table's columns sort once the page script makes their names buttons (offerTables): the column sorted marked, its arrow turned for
     ascending; a column of multiples as bars against its largest, beside each figure; the row under the pointer tinted */
  .offer-sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
  .offer-sort svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
                    opacity: .35; transition: opacity .2s, rotate .25s var(--spring); }
  .offer-sort:hover { color: hsl(var(--o-text)); }
  .offer-sort:hover svg, [aria-sort] > .offer-sort svg { opacity: 1; }
  [aria-sort] > .offer-sort { color: hsl(var(--o-text)); }
  [aria-sort="ascending"] > .offer-sort svg { rotate: 180deg; }
  .offer-sort:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: 4px; }
  .offer-table tbody tr { transition: background .2s; }
  .offer-table tbody tr:hover { background: hsl(var(--o-tint)); }
  .offer-mult { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; }
  .offer-mult i { position: relative; flex: none; width: 72px; height: 6px; overflow: hidden; border-radius: 9999px; background: hsl(var(--o-rule)); }
  .offer-mult i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: hsl(var(--o-em)); }

  /* A timeline's rail, once the page script reads it (offerTimelines): a line down its left fills as the reader goes down the rows,
     each row's dot and when lit as it is reached; without the script the rows stand as they were */
  .offer-tl.is-live { position: relative; }
  .offer-tl.is-live > li { position: relative; padding-left: 52px; }
  .offer-tl.is-live::before, .offer-tl.is-live::after { content: ''; position: absolute; top: 0; left: 11px; width: 2px; border-radius: 1px; }
  .offer-tl.is-live::before { bottom: 0; background: hsl(var(--o-rule)); }
  .offer-tl.is-live::after { height: calc(var(--tl, 0) * 100%); background: hsl(var(--o-em)); }
  .offer-tl.is-live > li::before { content: ''; position: absolute; z-index: 1; top: calc(var(--tl-pad, 40px) + clamp(26px, 2.8vw, 40px) * .525 - 8px); left: 4px;
                                   width: 16px; height: 16px; border-radius: 50%;
                                   background: hsl(var(--o-ground)); border: 2px solid hsl(var(--o-rule)); transition: background .3s, border-color .3s, box-shadow .3s; }
  .offer-tl.is-live > li.is-on::before { background: hsl(var(--o-em)); border-color: hsl(var(--o-em)); box-shadow: 0 0 0 5px hsl(var(--o-em) / .16); }
  .offer-tl.is-live > li:not(.is-on) .offer-tl-when { color: hsl(var(--o-quiet)); }
  .offer-tl.is-live .offer-tl-when { transition: color .3s; }

  /* Pictures open large in the site's picture viewer: each lifts under the pointer */
  .offer-gal-open { display: block; border-radius: 16px; cursor: zoom-in; transition: translate .4s var(--spring); }
  .offer-gal-open img { transition: box-shadow .4s var(--spring); }
  .offer-gal-open:hover { translate: 0 -4px; }
  .offer-gal-open:hover img { box-shadow: 0 0 0 1px hsl(var(--o-rule)), 0 36px 60px -30px rgb(0 0 0 / .55); }
  .offer-gal-open:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; }

  /* A video (L1): beside its heading, or under it (wide). YouTube's still with YouTube's own play button, playing in place once pressed */
  .offer-video { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .offer-video.is-wide { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .offer-video.is-wide .offer-split-head { max-width: 760px; }
  .offer-film { display: grid; gap: 14px; min-width: 0; margin: 0; }
  .offer-film .vid { border: 0; border-radius: 20px; background: hsl(0 0% 6%);
                     box-shadow: 0 0 0 1px hsl(var(--o-rule)), 0 40px 80px -40px rgb(0 0 0 / .5); }
  .offer-film .vid img { transition: scale .8s var(--spring); }
  .offer-film a.vid:hover img { scale: 1.03; }
  .offer-film .vid:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; }
  .offer-film .vid-play { width: 76px; height: 54px; border-radius: 16px; background: hsl(348 100% 50%); box-shadow: 0 12px 32px -8px rgb(0 0 0 / .55);
                          transition: scale .3s var(--spring); }
  .offer-film .vid:is(:hover, :focus-visible) .vid-play { background: hsl(348 100% 50%); scale: 1.08; }
  .offer-film .vid-play svg { width: 26px; height: 26px; }
  .offer-film figcaption { font-size: 15px; line-height: 1.5; color: hsl(var(--o-quiet)); }

  /* A timeline (L2): dated rows ruled down the page, the when large on the left; what the reader does beside what Claude does */
  .offer-tl { margin-top: 48px; border-top: 1px solid hsl(var(--o-text)); }
  .offer-tl > li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px 48px; padding: 40px 0; border-bottom: 1px solid hsl(var(--o-rule)); }
  .offer-tl-when { font: 700 clamp(26px, 2.8vw, 40px)/1.05 var(--font); letter-spacing: -.04em; color: hsl(var(--o-em)); }
  .offer-tl-body { display: grid; gap: 12px; align-content: start; min-width: 0; }
  .offer-tl-body h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; color: hsl(var(--o-text)); }
  .offer-tl-body > p { max-width: 720px; font-size: 17px; line-height: 1.6; color: hsl(var(--o-quiet)); }
  .offer-tl-pair { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 12px 0 0; overflow: hidden;
                   border: 1px solid hsl(var(--o-rule)); border-radius: 16px; }
  .offer-tl-pair > div { display: grid; gap: 6px; align-content: start; padding: 18px 22px 20px; }
  .offer-tl-pair > div + div { border-left: 1px solid hsl(var(--o-rule)); }
  .offer-tl-pair .is-claude { background: hsl(var(--o-tint)); }
  .offer-tl-pair dt { font: 600 14px/20px var(--font); color: hsl(var(--o-em)); }
  .offer-tl-pair dd { margin: 0; font-size: 16px; line-height: 1.55; color: hsl(var(--o-text)); }

  /* A table (L3): ruled rows under a heavier rule, the row's name in bold, figures right-aligned in even digits. Wider than a phone, it
     scrolls in its own box, never the page; its line under it */
  .offer-table-box { margin-top: 40px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .offer-table-box:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; }
  .offer-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; color: hsl(var(--o-text)); }
  .offer-table.is-3 { min-width: 520px; }
  .offer-table.is-4 { min-width: 640px; }
  .offer-table.is-5 { min-width: 760px; }
  .offer-table :is(th, td) { padding: 18px 24px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid hsl(var(--o-rule)); }
  .offer-table :is(th, td):last-child { padding-right: 0; }
  .offer-table thead th { padding-top: 0; vertical-align: bottom; font: 600 14px/20px var(--font); color: hsl(var(--o-quiet)); border-bottom-color: hsl(var(--o-text)); }
  .offer-table tbody th { font-weight: 600; color: hsl(var(--o-text)); }
  /* A Chinese row name stays whole (接单做服务, never 接单做服 / 务): break-word, not anywhere, so its column keeps the name's width */
  :root:lang(zh) .offer-table tbody th { word-break: keep-all; overflow-wrap: break-word; }
  .offer-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .offer-table td.is-num { font-weight: 600; }
  .offer-table-note { max-width: 760px; margin-top: 16px; font-size: 14px; line-height: 1.55; color: hsl(var(--o-quiet)); }
  /* On a phone a table of three columns or more is a card a row (AI-118, AI-122): its first cell the card's heading, each other cell under
     it with its column's name (data-label), so no column hides past the screen's edge; two columns still fit as a table */
  @media (max-width: 640px) {
    .offer-table-box:has(.offer-table:not(.is-2)) { overflow: visible; mask-image: none; animation: none; padding-inline: 0; margin-inline: 0; }
    .offer-table:not(.is-2) { min-width: 0; }
    .offer-table:not(.is-2) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .offer-table:not(.is-2) tbody tr { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid hsl(var(--o-rule)); }
    .offer-table:not(.is-2) :is(th, td) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 0; border: 0; text-align: left; white-space: normal; }
    .offer-table:not(.is-2) tbody th { display: block; font-size: 17px; line-height: 1.4; }
    .offer-table:not(.is-2) td::before { content: attr(data-label); font-size: 14px; font-weight: 500; color: hsl(var(--o-quiet)); }
    .offer-table:not(.is-2) td.is-num { text-align: left; }
    .offer-table:not(.is-2) .offer-mult { justify-content: flex-start; }
  }
  /* A table that scrolls fades at the edge it hides, so a reader sees there is more (2026-11-08: at 390 px a three-column table cut its
     columns mid-word with nothing showing it scrolls). The fade follows the box's own scroll: none while the table fits, the right edge at
     the start, both in between, the left at the end. The mask would hide the focus ring outside the box, so the ring moves inside, into
     4 px of padding the margin gives back */
  @property --o-fade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
  @property --o-fade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
  @keyframes offer-table-edges {
    from { --o-fade-l: 0px; --o-fade-r: 48px; }
    8%, 92% { --o-fade-l: 48px; --o-fade-r: 48px; }
    to { --o-fade-l: 48px; --o-fade-r: 0px; }
  }
  @supports (animation-timeline: scroll()) {
    .offer-table-box { padding-inline: 4px; margin-inline: -4px; animation: offer-table-edges linear both; animation-timeline: scroll(self inline);
                       mask-image: linear-gradient(to right, transparent, black var(--o-fade-l), black calc(100% - var(--o-fade-r)), transparent); }
    .offer-table-box:focus-visible { outline-offset: -2px; }
  }

  /* Pictures (L4): a grid of cards, or a strip that scrolls in its own box, three across (two, then one and a peek, on narrower screens) */
  .offer-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px 28px; margin-top: 40px; }
  .offer-gal figure { display: grid; gap: 14px; align-content: start; min-width: 0; margin: 0; }
  .offer-gal img { display: block; width: 100%; height: auto; border-radius: 16px; background: hsl(var(--o-tint));
                   box-shadow: 0 0 0 1px hsl(var(--o-rule)), 0 24px 48px -30px rgb(0 0 0 / .45); }
  .offer-gal figcaption { font-size: 15px; line-height: 1.5; color: hsl(var(--o-quiet)); }
  .offer-gal.is-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 56px) / 3); padding-bottom: 20px;
                        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .offer-gal.is-strip figure { scroll-snap-align: start; }
  .offer-gal.is-strip:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; }

  /* Big numbers (L6, cards stats): each figure large under a rule, sized to its column, what it counts and its source under it */
  .offer-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin-top: 48px; }
  .offer-stats.is-1 { grid-template-columns: minmax(0, 1fr); }
  .offer-stats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer-stats > div { display: grid; gap: 12px; align-content: start; min-width: 0; padding-top: 24px; border-top: 1px solid hsl(var(--o-text)); container-type: inline-size; }
  .offer-stat-n { font: 700 clamp(44px, 5vw, 72px)/1 var(--font); font-size: clamp(44px, 22cqi, 96px); letter-spacing: -.05em;
                  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: hsl(var(--o-em)); }
  .offer-stat-what { font-size: 17px; line-height: 1.5; color: hsl(var(--o-text)); }
  .offer-stat-src { font-size: 14px; line-height: 1.5; color: hsl(var(--o-quiet)); }
  .offer-stat-src a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .offer-stat-src a:hover { color: hsl(var(--o-text)); }

  /* A brand with no SVG mark of its own (Higgsfield, HeyGen): its picture, whole, in the logo's box */
  .offer-logo img { width: 100%; height: 100%; object-fit: contain; }

  @media (max-width: 1023px) {
    .offer-pic { justify-self: start; max-width: 560px; }
    .offer-calc { grid-template-columns: minmax(0, 1fr); }
    .offer-calc.is-earnings { grid-template-areas: 'fields' 'out' 'chart'; }
    .calc-out { border-left: 0; border-top: 1px solid hsl(var(--o-rule)); }
    .offer-fit { grid-template-columns: minmax(0, 1fr); }
    .offer-video { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .offer-gal.is-strip { grid-auto-columns: calc((100% - 28px) / 2); }
    .offer-stats:is(.is-3, .is-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .offer-play { top: 30%; right: -120px; height: 440px; }
    .offer-pic { width: calc(100% - 44px); margin: 12px 0 28px; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
    .offer-pic::before { rotate: 4deg; translate: 2% -3%; }
    .offer-pic::after { rotate: 8deg; translate: 4% -5%; }
    .offer-film .vid-play { width: 64px; height: 46px; border-radius: 14px; }
    .offer-tl { --tl-pad: 28px; }
    .offer-tl > li { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
    .offer-tl.is-live > li { padding-left: 40px; }
    .offer-pic-stat { left: -12px; bottom: -28px; padding: 12px 16px 14px; border-radius: 14px; }
    .offer-pic.has-screen .offer-pic-stat { top: -32px; left: -12px; }
    .offer-squares { background-size: auto, auto, 10px 10px, 10px 10px;
                   background-image: radial-gradient(ellipse 80% 26% at 50% 20%, hsl(0 0% 54%) 40%, black 100%),
                                     radial-gradient(ellipse 60% 22% at 50% 72%, hsl(0 0% 42%) 30%, black 100%),
                                     linear-gradient(90deg, white, black 50%, white), linear-gradient(white, black 50%, white); }
    .offer-screen { gap: 12px; padding: 16px 18px 20px; }
    .offer-screen-n { font-size: 44px; }
    .offer-screen-bars { grid-template-columns: fit-content(8.5em) minmax(32px, 1fr) max-content; gap: 9px 10px; }
    .offer-pic.has-floats { margin-bottom: 28px; }
    .offer-pic.has-floats .offer-screen { padding-bottom: 20px; }
    .offer-floats { display: grid; gap: 10px; margin-top: 20px; }
    .offer-float { position: static; width: auto; max-width: none; translate: none; }
    .offer-pic-stat-n { font-size: 40px; }
    .offer-pic-stat-line { font-size: 13px; }
    .calc-form, .calc-out { padding: 24px 20px; }
    .calc-out { gap: 24px; }
    .is-earnings .calc-fields { padding: 24px 20px; }
    .calc-chart { padding: 24px 12px; }
    .calc-chart legend { margin-left: 8px; }
    .calc-bar { grid-template-columns: minmax(0, 1fr) 76px; grid-template-areas: 'name n' 'track track'; gap: 6px 12px; padding: 8px; }
    .calc-bar-name { grid-area: name; }
    .calc-bar-track { grid-area: track; height: 10px; }
    .calc-bar-n { grid-area: n; }
    .calc-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .calc-facts > div:last-child { grid-column: 1 / -1; }
    .offer-fit-card { padding: 24px 20px; }
    .offer-fit-card li { font-size: 16px; }
    .offer-tl-body h3 { font-size: 21px; }
    .offer-tl-pair { grid-auto-flow: row; }
    .offer-tl-pair > div + div { border-left: 0; border-top: 1px solid hsl(var(--o-rule)); }
    .offer-gal { gap: 32px; }
    .offer-gal.is-strip { grid-auto-columns: 84%; gap: 16px; }
    .offer-stats:is(.is-2, .is-3, .is-4) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .calc-run-bars { gap: 4px; height: 120px; }
    .calc-run-bars i:nth-child(3n):not(:nth-child(6n))[data-v]::after { content: none; }
  }

  /* The richer kinds' motion, as the rest of the page's (mindket-offer-css.ts): rows, figures and pictures rise one after another as
     their band comes into view, the red band opens from a rounded card, the hero's card settles and fans its deck, the mark drifts */
  .offer :is(.offer-tl, .offer-stats, .offer-gal) > :nth-child(2) { --i: 1; }
  .offer :is(.offer-tl, .offer-stats, .offer-gal) > :nth-child(3) { --i: 2; }
  .offer :is(.offer-tl, .offer-stats, .offer-gal) > :nth-child(4) { --i: 3; }
  .offer :is(.offer-tl, .offer-stats, .offer-gal) > :nth-child(5) { --i: 4; }
  .offer :is(.offer-tl, .offer-stats, .offer-gal) > :nth-child(n + 6) { --i: 5; }
  @keyframes offer-drift { from { translate: 0 56px; } to { translate: 0 -56px; } }
  @media (prefers-reduced-motion: no-preference) {
    .offer-pic { animation: offer-pic-in 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
    .offer-pic::before, .offer-pic::after { animation: offer-deck-in .9s var(--spring) .45s backwards; }
    .offer-screen-track i { animation: offer-bar-in 1.2s var(--spring) calc(.6s + var(--i, 0) * .12s) backwards; }
    .offer-float { animation: offer-float-in .8s var(--spring) .9s backwards; }
    .offer-float.is-2 { animation-delay: 1.05s; }
    .offer-float.is-3 { animation-delay: 1.2s; }
    @supports (animation-timeline: view()) {
      .offer-play:not(.is-ring) { animation: offer-drift linear both; animation-timeline: view(); }
    }
    .mk-motion .offer > section :is(.offer-tl, .offer-stats, .offer-gal) > * {
      --d: calc(var(--i, 0) * 90ms + 180ms); opacity: 0; translate: 0 32px; transition: opacity .8s var(--spring) var(--d), translate 1s var(--spring) var(--d); }
    .mk-motion .offer > section.is-in :is(.offer-tl, .offer-stats, .offer-gal) > * { opacity: 1; translate: none; }
    .mk-motion .offer > section .offer-mult i::after { width: 0; transition: width 1.1s var(--spring) .35s; }
    .mk-motion .offer > section.is-in .offer-mult i::after { width: var(--w); }
    .mk-motion .offer > :is(.offer-band, .offer-end).offer-red { clip-path: inset(5% 3% round 48px); transition: clip-path 1.3s var(--spring); }
    .mk-motion .offer > :is(.offer-band, .offer-end).offer-red.is-in { clip-path: inset(0 round 0); }
  }

  /* The morning before the steps (mindket-offer.ts morningStrip, version 8; the owner, 2026-11-09: "bring out the point like you are
     consuming and wait for the 5 hour reset example"): on the ink, one strip a way on one scale from the first message to the reset.
     The usual way works in the paper's grey up to the limit, then waits, hatched in red; the playbook way works in green to the end.
     The times stand under the strips, the limit's where it falls. A phone stacks each label over its strip */
  .ws-day { --bad: 4 78% 64%; --good: 145 55% 52%; display: grid; gap: 14px; margin: 8px 0 64px; }
  .ws-day-rows { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
  .ws-day-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; align-items: center; }
  .ws-day-label { display: grid; gap: 4px; }
  .ws-day-label strong { font-size: 17px; line-height: 1.3; color: hsl(var(--paper)); }
  .ws-day-label span { font-size: 14px; line-height: 1.45; color: hsl(var(--paper) / .7); }
  .ws-day-track { display: flex; min-height: 52px; overflow: hidden; border-radius: 14px; background: hsl(var(--paper) / .06); }
  .ws-day-track i { display: flex; align-items: center; min-width: 0; padding: 8px 14px; font: 600 13px/1.25 var(--font); font-style: normal; transform-origin: left; }
  .ws-day-track .is-work { flex: none; width: var(--w, 100%); background: hsl(var(--paper) / .2); color: hsl(var(--paper)); }
  .ws-day-row.is-lean .is-work { background: hsl(var(--good)); color: hsl(var(--accent-fill-foreground)); }
  .ws-day-track .is-wait { flex: 1; color: hsl(var(--paper));
                           background: repeating-linear-gradient(-45deg, hsl(var(--bad) / .34) 0 8px, hsl(var(--bad) / .14) 8px 16px); }
  .ws-day-axis { position: relative; display: flex; justify-content: space-between; min-height: 36px; margin: 0; }
  .ws-day-tick { display: grid; gap: 2px; font-size: 12px; line-height: 1.3; color: hsl(var(--paper) / .62); }
  .ws-day-tick b { font: 600 13px/1.2 var(--mono); color: hsl(var(--paper)); }
  .ws-day-tick.is-stop { position: absolute; top: 0; left: var(--at); translate: -50% 0; text-align: center; }
  .ws-day-tick.is-stop b { color: hsl(var(--bad)); }
  .ws-day-tick.is-end { text-align: right; }
  .ws-day-note { max-width: 860px; font-size: 14px; line-height: 1.6; color: hsl(var(--paper) / .6); }
  /* What Claude Code shows at the limit (mindket-offer.ts limitShot, version 10; the owner, 2026-11-10: "show the related print screen
     of the quote limit to user know the pain"): under the morning, the time large in red with what happens, beside Claude Code drawn as
     a print screen on the ink: the change made, the warning in amber, the ask stopped by the red blocking line, the box with a cursor
     and the wait counting down. A phone stacks the words over the screen */
  .ws-shot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; margin-top: 36px; }
  .ws-shot-copy { display: grid; gap: 12px; }
  .ws-shot-time { margin: 0; font: 700 clamp(36px, 4vw, 52px)/1 var(--mono); letter-spacing: -.02em; color: hsl(var(--bad)); }
  .ws-shot-copy h3 { margin: 0; font-size: 22px; line-height: 1.3; color: hsl(var(--paper)); }
  .ws-shot-copy p:not(.ws-shot-time) { margin: 0; font-size: 16px; line-height: 1.6; color: hsl(var(--paper) / .76); }
  .ws-shot-copy .ws-shot-note { font-size: 13px; color: hsl(var(--paper) / .52); }
  .ws-shot-win { box-shadow: 0 0 0 1px hsl(var(--bad) / .25), 0 40px 80px -30px hsl(var(--bad) / .45); }
  .ws-term { display: grid; gap: 8px; padding: 18px 20px 16px; font: 500 13px/1.5 var(--mono); color: hsl(var(--paper) / .8); }
  .ws-term p { margin: 0; overflow-wrap: anywhere; }
  .ws-term .is-you { color: hsl(var(--paper)); }
  .ws-term .is-done b { font-weight: 400; color: hsl(var(--good)); }
  .ws-term .is-sub { padding-left: 16px; color: hsl(var(--paper) / .5); }
  .ws-term .is-warn { justify-self: start; padding: 2px 10px; border-radius: 9999px; background: hsl(40 90% 55% / .16); font: 600 12px/1.5 var(--font); color: hsl(40 92% 64%); }
  .ws-term .is-stop { padding: 10px 12px; border: 1px solid hsl(var(--bad) / .6); border-radius: 10px; background: hsl(var(--bad) / .14); font-weight: 700; color: hsl(var(--bad)); }
  .ws-term .ws-term-box { display: flex; align-items: center; gap: 2px; margin-top: 6px; padding: 10px 12px; border: 1px solid hsl(var(--paper) / .16); border-radius: 10px; color: hsl(var(--paper) / .45); }
  .ws-term-box i { width: 7px; height: 15px; background: hsl(var(--paper) / .7); }
  .ws-term-foot { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; font: 500 12px/1.4 var(--font); color: hsl(var(--paper) / .55); }
  @keyframes ws-blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: no-preference) {
    .ws-term-box i { animation: ws-blink 1s steps(1) infinite; }
  }

  @media (max-width: 640px) {
    .ws-shot { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
    .ws-term { padding: 14px 14px 12px; font-size: 12px; }
    .ws-day { margin-bottom: 40px; }
    .ws-day-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .ws-day-foot > span:first-child { display: none; }
    .ws-day-track i { padding: 8px 10px; font-size: 12px; }
  }

  /* The launch deal (the cta kind's deal layout, mindket-product-page.ts deal; the owner, 2026-11-09: "like ecommecrec big deal sale
     section design"): one card on the band, cut like a coupon, the paper with the ink's type on any tone. The percent off on a round
     ink badge at its corner, the price large, what it saves, Get it now; past a dashed cut with a notch at each end, what comes free,
     each on a tick. Under 900 px the cut runs across; on a phone the badge stands above the words */
  .offer-deal-card { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: 32px;
                     background: hsl(var(--paper)); color: hsl(var(--accent-fill-foreground)); box-shadow: 0 40px 80px -40px rgb(20 20 19 / .55); }
  .offer-deal-card.is-solo { grid-template-columns: minmax(0, 1fr); }
  .offer-deal-main { position: relative; display: grid; align-content: start; justify-items: start; gap: 18px; padding: 56px; }
  .offer-deal-main > :is(.offer-deal-name, h2, .offer-sub) { max-width: calc(100% - 150px); }
  .offer-deal-card h2 { color: hsl(var(--accent-fill-foreground)); }
  .offer-deal-card h2 mark { background: linear-gradient(to top, hsl(var(--accent-fill) / .5) 0 42%, transparent 42%); }
  /* The badge says the percent off, and the lead says it in words: the price line's own chip would say it a third time */
  .offer-deal-card .offer-off { display: none; }
  .offer-deal-card :is(.offer-sub, .offer-price s, .offer-final) { color: hsl(var(--accent-fill-foreground) / .72); }
  .offer-deal-card .offer-price.is-big { justify-content: flex-start; }
  .offer-deal-card .btn-accent { background: hsl(var(--accent-fill-foreground)); color: hsl(var(--paper)); }
  .offer-deal-card .btn-accent:hover { background: hsl(var(--accent-fill-foreground) / .86); }
  .offer-deal-badge { position: absolute; top: 40px; right: 40px; display: grid; place-content: center; width: 128px; height: 128px; margin: 0;
                      border-radius: 50%; background: hsl(var(--accent-fill-foreground)); color: hsl(var(--paper)); text-align: center; rotate: 10deg;
                      box-shadow: 0 0 0 6px hsl(var(--accent-fill)), 0 18px 36px -12px rgb(20 20 19 / .5); }
  .offer-deal-badge b { font: 800 44px/.95 var(--font); letter-spacing: -.04em; }
  .offer-deal-badge span { font: 700 15px/1.3 var(--font); color: hsl(var(--accent-fill)); }
  /* In the page's own type and case: no tracked capitals (the owner, 2026-11-07), as every Mindket label */
  .offer-deal-name, .offer-deal-label { margin: 0; font: 700 14px/1.3 var(--font); }
  /* The card stays light in both themes, so its coloured words take the tone's fill darkened toward its ink, never --brand (light in dark mode) */
  .offer-deal-name { color: color-mix(in oklab, hsl(var(--accent-fill)) 65%, hsl(var(--accent-fill-foreground))); }
  .offer-deal-label { color: hsl(var(--accent-fill-foreground) / .62); }
  .offer-deal-save { margin: -6px 0 4px; font: 700 18px/1.3 var(--font); color: color-mix(in oklab, hsl(var(--accent-fill)) 65%, hsl(var(--accent-fill-foreground))); }
  .offer-deal-free { position: relative; display: grid; align-content: center; gap: 20px; padding: 56px 48px; border-left: 1px dashed hsl(var(--accent-fill-foreground) / .3); }
  .offer-deal-free::before, .offer-deal-free::after { content: ''; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--o-ground)); }
  .offer-deal-free::before { top: -14px; }
  .offer-deal-free::after { bottom: -14px; }
  .offer-deal-free ul { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
  .offer-deal-free li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; }
  .offer-deal-free li svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: hsl(var(--accent-fill)); color: hsl(var(--accent-fill-foreground)); stroke-width: 3; }
  .offer-deal-free li div { display: grid; gap: 2px; }
  .offer-deal-free strong { font-size: 17px; line-height: 1.35; }
  /* A thing that is a product (its picture in place of the tick; the owner, 2026-11-10: "show the product image with title"): the
     picture as a small card, the title a link to its page */
  .offer-deal-free li.is-pic { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .offer-deal-pic { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; box-shadow: 0 10px 24px -12px rgb(20 20 19 / .55); }
  .offer-deal-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .offer-deal-free strong a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

  /* The products this one opens free, beside the price card (mindket-product-page.ts gifts; the owner, 2026-11-10: "show the product
     with image title as card view beside the card"): each a card, its picture over Free with it, its name (a link to its page), its
     line and its own price struck with Free. Under 1,000 px under the price card, the picture beside the words; a phone stacks them */
  .offer-buy-pair { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 340px); justify-content: center; align-items: center; gap: 32px; margin-top: 32px; }
  .offer-buy-pair > .offer-buy { margin: 0; }
  .offer-gifts { display: grid; gap: 20px; }
  .offer-gift { display: grid; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: 20px; background: hsl(var(--card)); box-shadow: var(--shadow-md); }
  .offer-gift-pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
  /* FREE large on the picture's top-right corner, in the page's fill (the owner, 2026-11-11: "make the FREE word at the obvious part") */
  .offer-gift-free { position: absolute; top: 14px; right: 14px; padding: 10px 18px; border-radius: 9999px; rotate: 4deg;
                    background: hsl(var(--accent-fill)); color: hsl(var(--accent-fill-foreground)); font: 800 24px/1 var(--font);
                    box-shadow: 0 0 0 3px hsl(var(--card)), 0 12px 28px -10px rgb(0 0 0 / .55); }
  .offer-gift-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .4s var(--spring); }
  .offer-gift:hover .offer-gift-pic img { scale: 1.03; }
  .offer-gift-body { display: grid; gap: 10px; padding: 20px 22px 24px; text-align: left; }
  .offer-gift-label { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 0; padding: 4px 10px; border-radius: 9999px;
                      background: hsl(var(--accent-fill) / .16); font: 700 13px/1.3 var(--font); color: hsl(var(--foreground)); }
  .offer-gift-label svg { width: 14px; height: 14px; stroke-width: 3; }
  .offer-gift h3 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
  .offer-gift h3 a { color: inherit; text-decoration: none; }
  .offer-gift h3 a:hover { text-decoration: underline; }
  .offer-gift-line { display: -webkit-box; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.5; color: hsl(var(--muted-foreground)); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .offer-gift .offer-price { margin: 4px 0 0; }
  .offer-gift .offer-price s { font-size: 18px; }
  .offer-gift .offer-now { font-size: 28px; color: hsl(var(--foreground)); }
  @media (max-width: 1000px) {
    .offer-buy-pair { grid-template-columns: minmax(0, 620px); }
    .offer-gift { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .offer-gift-pic { aspect-ratio: auto; }
  }
  @media (max-width: 560px) {
    .offer-gift { grid-template-columns: minmax(0, 1fr); }
    .offer-gift-pic { aspect-ratio: 4 / 3; }
  }
  @media (prefers-reduced-motion: reduce) {
    .offer-gift-pic img { transition: none; }
  }
  .offer-deal-free li span { font-size: 15px; line-height: 1.5; color: hsl(var(--accent-fill-foreground) / .72); }
  @media (max-width: 900px) {
    .offer-deal-card { grid-template-columns: minmax(0, 1fr); }
    .offer-deal-main { padding: 44px 32px 40px; }
    .offer-deal-free { padding: 40px 32px 44px; border-top: 1px dashed hsl(var(--accent-fill-foreground) / .3); border-left: 0; }
    .offer-deal-free::before, .offer-deal-free::after { top: -15px; bottom: auto; }
    .offer-deal-free::after { right: -15px; left: auto; }
  }
  @media (max-width: 640px) {
    .offer-deal-card { border-radius: 24px; }
    .offer-deal-main { gap: 14px; padding: 28px 20px 32px; }
    .offer-deal-main > :is(.offer-deal-name, h2, .offer-sub) { max-width: none; }
    .offer-deal-badge { position: static; width: 92px; height: 92px; margin: 4px 0 6px 6px; }
    .offer-deal-badge b { font-size: 32px; }
    .offer-deal-badge span { font-size: 12px; }
    .offer-deal-free { padding: 32px 20px; }
    .offer-deal-card .btn { width: 100%; justify-content: center; }
  }
  @keyframes offer-deal-sway { 50% { rotate: 4deg; scale: 1.04; } }
  @media (prefers-reduced-motion: no-preference) {
    .offer-deal-badge { animation: offer-deal-sway 4s ease-in-out infinite; }
    .ws-day-track i { transition: transform 1.2s var(--spring) var(--d, 0s); }
    .ws-day-track .is-wait { --d: .5s; }
    .ws-day-row.is-lean i { --d: .25s; }
    .mk-motion .offer > section:not(.is-in) .ws-day-track i { transform: scaleX(0); }
  }

  /* The head: the title and one line */
  .plans-head .lead { max-width: 640px; font-size: 17px; line-height: 26px; }

  /* The group's chip: its letter in a ring, then its name; the sales page and the plan cards wear it */
  .group-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 4px; border-radius: 9999px; background: hsl(var(--secondary));
                color: hsl(var(--secondary-foreground)); font: 600 12px/16px var(--font); white-space: nowrap; }
  .group-chip b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: hsl(var(--foreground)); color: hsl(var(--background));
                  font: 700 11px/1 var(--font); }

  /* Just the ring, where the name stands beside it (a plan's rows, a group's head) */
  .group-chip.is-ring { width: 24px; padding: 0; justify-content: center; }

  /* The plans as one block (the owner, 2026-11-09: "should connect"): three columns sharing their borders with no gap, rounded at the
     block's corners only, the featured plan's border in the brand over its neighbours'. Each card is a column with its button on its
     bottom edge (margin-top: auto), so the three buttons sit on one line whatever the cards hold */
  .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; border-radius: calc(var(--radius) + 3px); box-shadow: var(--shadow); }
  .plan-grid > .plan-card { position: relative; border-radius: 0; box-shadow: none; }
  .plan-grid > .plan-card + .plan-card { margin-left: -1px; }
  .plan-grid > .plan-card:first-child { border-radius: calc(var(--radius) + 3px) 0 0 calc(var(--radius) + 3px); }
  .plan-grid > .plan-card:last-child { border-radius: 0 calc(var(--radius) + 3px) calc(var(--radius) + 3px) 0; }
  .plan-card.is-featured { z-index: 1; border-color: hsl(var(--brand)); box-shadow: 0 0 0 1px hsl(var(--brand)); }
  .plan-card { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
  .plan-top { display: grid; gap: 4px; }
  .plan-top h2 { font-size: 22px; }
  .plan-price { display: grid; gap: 4px; }
  .plan-cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-family: var(--font); }
  .plan-cost s { font-size: 18px; color: hsl(var(--muted-foreground)); text-decoration-thickness: 2px; }
  .plan-amount { font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
  .plan-per { font-size: 14px; color: hsl(var(--muted-foreground)); }
  .plan-first { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .plan-gets { padding-top: 16px; border-top: 1px solid hsl(var(--border)); }
  .plan-sub { font-size: 13px; line-height: 18px; font-weight: 600; color: hsl(var(--muted-foreground)); }
  /* What it gives: a plain tick and the line, in the page's text size */
  .plan-list { display: grid; gap: 8px; margin-top: 10px; font-size: 14px; line-height: 20px; }
  .plan-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 10px; }
  .plan-list strong { font-weight: 600; }
  .plan-check { display: grid; place-items: center; height: 20px; color: hsl(var(--primary)); }
  .plan-check svg { width: 16px; height: 16px; stroke-width: 2.25; }
  .plan-opens { display: grid; margin-top: 8px; }
  .plan-opens li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; line-height: 20px; }
  .plan-opens li:last-child { border-bottom: 0; }
  .plan-allow { text-align: right; font-weight: 600; }
  .plan-allow.is-none { font-weight: 400; color: hsl(var(--muted-foreground)); }
  /* AI-114: the products a group row opens, on a line of their own under its name; the first month's worth over the groups */
  .plan-names { grid-column: 2 / -1; margin-top: -6px; font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  .plan-names a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .plan-names a:hover { color: hsl(var(--foreground)); }
  .plan-worth { margin-top: 6px; font-size: 14px; line-height: 20px; font-weight: 600; }
  .plan-card .btn { margin-top: auto; width: 100%; }

  /* Under the block: the link to the table, then the note */
  .plans-under { display: grid; justify-items: center; gap: 8px; text-align: center; }
  .plans-jump a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: underline;
                  text-decoration-color: hsl(var(--border)); text-underline-offset: 3px; }
  .plans-jump a:hover { text-decoration-color: currentColor; }
  .plans-jump svg { width: 16px; height: 16px; }
  #plans-compare { scroll-margin-top: calc(var(--head-h) + 16px); }

  /* The plans side by side: a group's title on a muted row, values centred under each plan. The box does not scroll (a phone stacks
     the rows, below), so the plans' names stay under the header (--head-h) and their buttons (tfoot) at the screen's bottom while the
     table passes (the owner, 2026-11-09: "make the purcahse btm stick on btm"); a sticky cell's line is a shadow, as a collapsed border
     stays behind. relative: the ticks' hidden words (.sr-only, absolute) belong to the box, never past a phone's edge */
  .plans-table-box { position: relative; padding: 0; }
  .plans-table-box:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
  .plans-table { table-layout: fixed; }
  .plans-table :is(th, td) { padding: 12px 16px; vertical-align: middle; line-height: 20px; }
  .plans-table thead th { position: sticky; top: var(--head-h); z-index: 2; padding-top: 16px; padding-bottom: 16px; border-bottom: 0; background: hsl(var(--card));
                          box-shadow: inset 0 -1px 0 hsl(var(--border)); font: 600 16px/24px var(--font); color: hsl(var(--foreground)); text-align: center; }
  .plans-table thead th:first-child { border-top-left-radius: calc(var(--radius) + 2px); }
  .plans-table thead th:last-child { border-top-right-radius: calc(var(--radius) + 2px); }
  .plans-table thead th:first-child, .plans-table tbody th[scope="row"] { width: 34%; text-align: left; }
  .plans-table tbody th[scope="row"] { font-weight: 400; color: hsl(var(--foreground)); }
  .plans-table td { text-align: center; font-variant-numeric: tabular-nums; }
  .plans-table td.num { text-align: center; font-weight: 600; white-space: nowrap; }
  .plans-table .plans-group th { padding-top: 10px; padding-bottom: 10px; background: hsl(var(--muted)); font: 600 13px/18px var(--font); color: hsl(var(--muted-foreground)); text-align: left; }
  .plans-table tfoot td { position: sticky; bottom: 0; z-index: 2; padding-top: 12px; padding-bottom: 12px; border-bottom: 0; background: hsl(var(--card)); box-shadow: inset 0 1px 0 hsl(var(--border)); }
  .plans-table tfoot td:first-child { border-bottom-left-radius: calc(var(--radius) + 2px); }
  .plans-table tfoot td:last-child { border-bottom-right-radius: calc(var(--radius) + 2px); }
  .plans-table tfoot .btn { width: 100%; }
  .plans-table tbody:last-of-type tr:last-child :is(th, td) { border-bottom: 0; }
  .plans-table .is-none { color: hsl(var(--muted-foreground)); }
  .plans-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: hsl(var(--brand) / .12); color: hsl(var(--brand)); vertical-align: middle; }
  .plans-yes svg { width: 14px; height: 14px; stroke-width: 2.5; }
  .plans-table-note { max-width: 720px; margin-top: 12px; }

  /* The groups */
  .group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-content: start; }
  .group-card { align-content: start; }
  .group-card { display: grid; gap: 12px; padding: 24px; }
  .group-head { display: flex; align-items: center; gap: 10px; }
  .group-head h3 { font-size: 18px; line-height: 24px; }
  .group-head .group-chip { width: 28px; height: 28px; }
  .group-head .group-chip b { width: 20px; height: 20px; font-size: 12px; }
  .group-opens { font-size: 14px; line-height: 20px; }
  .group-opens strong { font-weight: 600; }
  .group-products { display: grid; border-top: 1px solid hsl(var(--border)); }
  .group-products li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; line-height: 20px; }
  .group-products a { font-weight: 500; }
  .group-products a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .group-products .meta { white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* A sales page's line under its bar: the group, and which plan opens the product */
  .offer-plan { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted)); }
  .offer-plan .container { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; line-height: 20px; }
  .offer-plan p { color: hsl(var(--muted-foreground)); }
  .offer-plan a { color: hsl(var(--foreground)); font-weight: 600; text-decoration: underline; text-decoration-color: hsl(var(--border)); text-underline-offset: 3px; }
  .offer-plan a:hover { text-decoration-color: currentColor; }

  @media (max-width: 1023px) { .group-grid { grid-template-columns: minmax(0, 1fr); } }
  /* Under 900 px the block stacks: the cards share their top and bottom borders, each button still on its card's bottom edge */
  @media (max-width: 900px) {
    .plan-grid { grid-template-columns: minmax(0, 1fr); }
    .plan-grid > .plan-card + .plan-card { margin-left: 0; margin-top: -1px; }
    .plan-grid > .plan-card:first-child { border-radius: calc(var(--radius) + 3px) calc(var(--radius) + 3px) 0 0; }
    .plan-grid > .plan-card:last-child { border-radius: 0 0 calc(var(--radius) + 3px) calc(var(--radius) + 3px); }
  }
  @media (max-width: 640px) { .plan-card, .group-card { padding: 20px; } .plan-amount { font-size: 32px; line-height: 36px; } }

  /* A phone: no sideways scroll; each row is its label over the three plans' values, the plans' names pinned under the header
     (--head-h) and their buttons at the screen's bottom while the table passes */
  @media (max-width: 640px) {
    .plans-table, .plans-table :is(thead, tbody, tfoot) { display: block; min-width: 0; }
    .plans-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .plans-table thead { position: sticky; top: var(--head-h); z-index: 2; border-radius: calc(var(--radius) + 2px) calc(var(--radius) + 2px) 0 0; background: hsl(var(--card)); }
    .plans-table thead th { position: static; padding: 12px 8px; box-shadow: none; font-size: 15px; }
    .plans-table thead th:first-child { display: none; }
    .plans-table .plans-group { display: block; }
    .plans-table .plans-group th { display: block; padding: 8px 12px; }
    .plans-table tbody th[scope="row"] { grid-column: 1 / -1; position: static; width: auto; padding: 12px 12px 4px; border-bottom: 0; font-weight: 600; }
    .plans-table td { padding: 4px 8px 12px; font-size: 13px; line-height: 18px; }
    .plans-table thead { box-shadow: inset 0 -1px 0 hsl(var(--border)); }
    .plans-table tfoot { position: sticky; bottom: 0; z-index: 2; border-radius: 0 0 calc(var(--radius) + 2px) calc(var(--radius) + 2px); background: hsl(var(--card));
                         box-shadow: inset 0 1px 0 hsl(var(--border)); }
    .plans-table tfoot tr { gap: 6px; padding: 8px; }
    .plans-table tfoot td { position: static; padding: 0; box-shadow: none; }
    .plans-table tfoot td:first-child { display: none; }
    .plans-table tfoot .btn { height: 36px; padding: 0 8px; font-size: 13px; }
  }

  .sd-head { max-width: 760px; }
  .sd-head .lead { margin-top: 8px; }
  .sd-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0 8px; }
  .sd-fig { padding: 16px; }
  .sd-fig dt { font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  .sd-fig dd { margin: 4px 0 0; font: 600 28px/34px var(--font); font-variant-numeric: tabular-nums; }
  .sd-fig dd.meta { margin-top: 2px; font: 400 13px/18px var(--font); color: hsl(var(--muted-foreground)); }
  .sd-group { margin-top: 32px; }
  .sd-group h2, .sd-moves h2, .sd-method h2 { font-size: 20px; line-height: 28px; margin-bottom: 8px; }
  .sd-table th[scope="row"] { color: hsl(var(--foreground)); font-weight: 500; }
  .sd-table .sd-n { margin-left: 6px; font-size: 12px; color: hsl(var(--muted-foreground)); }
  .sd-table tr.sd-all th, .sd-table tr.sd-all td { font-weight: 600; }
  .sd-pay > .meta { max-width: 760px; margin-bottom: 8px; }
  .sd-up { color: hsl(var(--success)); }
  .sd-down { color: hsl(var(--destructive)); }
  .sd-spark { display: block; width: 104px; height: 26px; color: hsl(var(--brand)); }
  .sd-spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .sd-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
  .sd-moves ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .sd-moves li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
  .sd-method { margin-top: 40px; max-width: 760px; display: grid; gap: 10px; font-size: 14px; line-height: 22px; }
  .sd-threads { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
  .sd-threads a { color: hsl(var(--muted-foreground)); }
  .sd-threads a:hover { color: hsl(var(--foreground)); text-decoration: underline; }
  .sd-door { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
  .sd-door p { margin: 4px 0 0; max-width: 620px; }
  .sd-wait { margin-top: 24px; display: grid; gap: 12px; }
  .sd-skel { height: 16px; border-radius: 6px; background: hsl(var(--muted)); animation: sd-pulse 1.4s ease-in-out infinite; }
  .sd-skel.is-wide { height: 72px; }
  @keyframes sd-pulse { 50% { opacity: .55; } }
  @media (prefers-reduced-motion: reduce) { .sd-skel { animation: none; } }
  @media (max-width: 900px) { .sd-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .sd-moves { grid-template-columns: minmax(0, 1fr); } .sd-table .sd-wide { display: none; } .sd-fig dd { font-size: 24px; line-height: 30px; } }

  /* My stack's toggle: on a card a quiet bookmark at the foot's end, above the card's own link; on a product page beside Like */
  .stack-pin { position: relative; z-index: 1; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px -6px -6px 0; padding: 0;
               border: 0; border-radius: 9999px; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; transition: background-color .15s, color .15s; }
  .stack-pin:hover, .stack-pin:focus-visible { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
  .stack-pin svg, .stack-btn svg { width: 16px; height: 16px; flex: none; }
  .stack-pin[data-tip]:hover::after, .stack-pin[data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
  /* Kept, the bookmark itself turns the site's yellow and the button keeps its own ground (the owner, 2026-11-11: "should be the icon
     yellow will do, bg color remain previous", after a gold fill on 2026-11-10's "show theme yellow after clicked"): a card's and the
     product page's the same */
  :is(.stack-pin, .stack-btn)[aria-pressed="true"] svg { color: hsl(var(--accent-fill)); }
  /* A press glides (the owner, 2026-11-10: "apply smooth animation when toggle"): the bookmark fills and its plus fades and shrinks
     away, the icon dips while held and pops once when the press lands (web/mindket-search.js popToggle, never a state a page paints) */
  :is(.stack-pin, .stack-btn) svg { transition: color .2s ease, transform .15s ease; }
  :is(.stack-pin, .stack-btn) .stack-mark { fill: currentColor; fill-opacity: 0; transition: fill-opacity .2s ease; }
  :is(.stack-pin, .stack-btn) .stack-plus { transform-box: fill-box; transform-origin: center; transition: opacity .15s ease, transform .2s ease; }
  :is(.stack-pin, .stack-btn)[aria-pressed="true"] .stack-mark { fill-opacity: 1; }
  :is(.stack-pin, .stack-btn)[aria-pressed="true"] .stack-plus { opacity: 0; transform: scale(.4); }
  :is(.stack-pin, .stack-btn):active svg { transform: scale(.88); }
  :is(.stack-pin, .stack-btn).is-popping svg { animation: mk-toggle-pop .34s cubic-bezier(.34, 1.56, .64, 1); }
  /* The product page's is the bookmark only, a square as tall as Like (.gh-btn) */
  .stack-btn { margin-left: 8px; width: 28px; padding: 0; justify-content: center; cursor: pointer; background: none; color: inherit; transition: border-color .2s ease, background-color .15s ease; }
  @media (prefers-reduced-motion: reduce) {
    .stack-btn, :is(.stack-pin, .stack-btn) :is(svg, .stack-mark, .stack-plus) { transition: none; }
    :is(.stack-pin, .stack-btn).is-popping svg { animation: none; }
  }

  /* The stack's page: the frame first, placeholders where the cards and the changes land, then the stack fading in */
  .stack-page .lead { margin-top: 8px; max-width: 760px; }
  /* Hidden means hidden: .gh-btn, .row, .btn and .card set a display of their own */
  :is(.stack-btn, .stack-import, .stack-copy, [data-stack-tools])[hidden] { display: none; }
  .stack-import { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
  .stack-import p { flex: 1 1 240px; margin: 0; }
  .stack-count-ghost { display: inline-block; width: 96px; height: 16px; border-radius: 6px; vertical-align: middle; }
  .stack-ghost { display: grid; gap: 12px; align-content: start; height: 180px; padding: 16px; }
  .stack-ghost .skeleton { height: 16px; border-radius: 6px; }
  .stack-ghost .skeleton:first-child { width: 60%; height: 20px; }
  .stack-ghost .skeleton:last-child { width: 80%; }
  .stack-gone { margin: 0 0 12px; }
  .stack-side-title { font-size: 15px; line-height: 20px; margin-bottom: 12px; }
  .stack-changes { list-style: none; margin: 0; padding: 0; }
  .stack-changes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid hsl(var(--border)); font-size: 14px; line-height: 20px; }
  .stack-changes li:first-child { padding-top: 0; border-top: 0; }
  .stack-changes time { grid-row: span 2; font-size: 12px; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
  .stack-changes a { font-weight: 600; color: inherit; overflow-wrap: anywhere; }
  .stack-changes .meta { grid-column: 2; }
  .stack-changes li.stack-none { display: block; }
  .stack-ghost-row .skeleton { display: block; grid-column: 1 / -1; height: 36px; border-radius: 6px; }
  .stack-how { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 20px; color: hsl(var(--muted-foreground)); }
  .stack-in { animation: stack-in .24s ease-out both; }
  .lcard.is-leaving { opacity: 0; transform: scale(.98); transition: opacity .2s, transform .2s; }
  @keyframes stack-in { from { opacity: 0; transform: translateY(4px); } }
  /* On a phone the products come first, the changes and How it works after them (a page's .side goes first there) */
  @media (max-width: 1023px) { .stack-body > .side { order: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .stack-in { animation: none; }
    .lcard.is-leaving, .stack-pin { transition: none; }
  }

  .hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 8px 24px; }
  .hist h1 { margin-top: -8px; }
  .hist-lead { max-width: 720px; font-size: 16px; line-height: 24px; }
  .hist-band { max-width: none; margin: 0; padding-top: 16px; }
  .hist-band dd { font-size: 24px; line-height: 28px; }
  .hist-tabs { justify-self: start; }
  .hist-card { overflow: hidden; }
  .hist-table th[scope="row"] { font-weight: 500; color: hsl(var(--foreground)); }
  .hist-table td, .hist-table th { padding-block: 10px; vertical-align: middle; }
  .hist-name { color: inherit; }
  .hist-name:hover { color: hsl(var(--brand)); }
  .hist-up { color: hsl(var(--success)); }
  .hist-down { color: hsl(var(--destructive)); }
  .hist-spark { display: block; color: hsl(var(--muted-foreground)); }
  .hist-wait { padding: 24px; color: hsl(var(--muted-foreground)); max-width: 720px; }
  .hist-method { max-width: 860px; }
  .hist-makers { max-width: 860px; margin-bottom: -8px; }
  .hist-badge-code { max-width: 860px; margin: 0; padding: 12px 16px; overflow-x: auto; border-radius: var(--radius); background: hsl(var(--muted)); font-size: 14px; line-height: 22px; }
  .hist-more h2 { font-size: 18px; line-height: 24px; margin-bottom: 4px; }
  .hist-more h2 a { color: inherit; }
  .hist-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .hist-chips .chip { font-size: 13px; padding: 4px 10px; }
  .hist-steps { display: flex; flex-wrap: wrap; gap: 8px; }
  .hist-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .hist-cols h2 { font-size: 18px; line-height: 24px; margin-bottom: 12px; }
  .hist-list { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
  @media (max-width: 640px) { .hist-cols { grid-template-columns: minmax(0, 1fr); } .hist-band dd { font-size: 20px; line-height: 24px; } }

  .pl-block { padding: 16px; display: grid; gap: 8px; scroll-margin-top: 80px; }
  .pl-block h2 { font-size: 18px; line-height: 24px; margin: 0; }
  .pl-block h2 .meta { font-weight: 400; margin-left: 4px; }
  .pl-block > .meta { max-width: 760px; margin: 0; }
  .pl-table caption { caption-side: top; text-align: left; padding: 0 0 4px; }
  .pl-table td.num, .pl-table th.num, .pl-table thead th, .pl-table time { white-space: nowrap; }
  .pl-from { display: block; }
  .pl-more summary { cursor: pointer; padding-block: 8px; color: hsl(var(--brand)); }
  .pl-more[open] summary { margin-bottom: 4px; }
  .pl-plans { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
  .pl-plans li { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .pl-method { max-width: 860px; }
  .pl-method h2 { font-size: 18px; line-height: 24px; }

  .free-block h2 { font-size: 18px; line-height: 24px; }
  .free-block .scroll, .free-block > .muted { margin-top: 12px; }
  .free-table th[scope="row"] { font-weight: 500; color: hsl(var(--foreground)); min-width: 120px; }
  .free-table :is(td, th) { vertical-align: top; }
  .free-table td:nth-child(2) { min-width: 220px; }
  .free-method { max-width: 860px; }
  @media (max-width: 640px) {
    .free-table thead { display: none; }
    .free-table, .free-table tbody, .free-table tr, .free-table :is(td, th) { display: block; width: auto; min-width: 0; }
    .free-table tr { padding: 12px 0; border-bottom: 1px solid hsl(var(--border)); }
    .free-table tr:last-child { border-bottom: 0; }
    .free-table :is(td, th) { padding: 4px 0; border: 0; }
    .free-table td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; line-height: 18px; color: hsl(var(--muted-foreground)); }
  }

  .setup-block h2 { font-size: 18px; line-height: 24px; }
  .setup-block > :is(ul, ol, p) { margin-top: 12px; }
  .setup-block ul, .setup-block ol { padding-left: 20px; }
  .setup-block ul { list-style: disc; }
  .setup-block ol { list-style: decimal; }
  .setup-block li + li { margin-top: 8px; }
  .setup-block ol li strong { display: block; font-weight: 500; color: hsl(var(--foreground)); }
  .setup-price { font-size: 24px; line-height: 32px; font-weight: 500; color: hsl(var(--foreground)); margin-top: 12px; }
  .setup-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
  .setup-for { margin-top: 8px; }
  .setup-block .meta { max-width: 860px; }

  .mk-door { display: grid; gap: 8px; justify-items: start; }
  .mk-door .eyebrow { margin: 0; }
  .mk-door-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: hsl(var(--foreground)); }
  .mk-door .meta { margin: 0; }
  .mk-door .btn { margin-top: 4px; }

  .offer-reviews h2 { margin-bottom: 24px; }
  .offer-reviews .rv-sec { margin-bottom: 0; }
  .rv-how { margin: 0; font-size: 14px; line-height: 1.5; color: hsl(var(--muted-foreground)); }

  .n8n-check .card { margin-top: 16px; }
  .check-kv { grid-template-columns: minmax(96px, max-content) 1fr; }
  .check-kv dd { text-align: left; }
  .check-note { margin-top: 12px; color: hsl(var(--muted-foreground)); }

  .wfc-block h2 { font-size: 18px; line-height: 24px; }
  .wfc-block > .meta, .wfc-block > .scroll, .wfc-block > .check-kv, .wfc-block > .ct-warn { margin-top: 12px; }
  .wfc-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .wfc-points h3 { font-size: 15px; line-height: 22px; font-weight: 600; }
  .wfc-points p { margin-top: 4px; font-size: 14px; line-height: 20px; }
  .wfc-form { display: grid; gap: 10px; }
  .wfc-box { display: block; width: 100%; height: auto; min-height: 280px; padding: 12px; font: 400 13px/18px "Geist Mono", ui-monospace, monospace; resize: vertical; white-space: pre; overflow: auto; }
  .wfc-form .btn { justify-self: start; }
  .wfc-table :is(td, th) { vertical-align: top; overflow-wrap: anywhere; }
  .wfc-table code { font: 400 13px/18px "Geist Mono", ui-monospace, monospace; }
  .wfc-fail { border-color: hsl(var(--price-high) / .4); }
  @media (max-width: 640px) { .wfc-points { grid-template-columns: minmax(0, 1fr); } }