/* Quicksite Pro templates. One component system, eight art directions (.theme-*).
   Fonts are self-hosted Latin subsets (SIL OFL, see /assets/fonts/LICENSES.md);
   Chinese falls back to the visitor's system fonts. */

@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Mono"; src: url("/assets/fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "DM Mono"; src: url("/assets/fonts/dm-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }

/* ---------- tokens ---------- */
.pro {
  --cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --cjk-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", STSong, "SimSun", serif;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, var(--cjk);
  --display: var(--font);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bg: #ffffff; --bg-2: #f6f6f4; --surface: #ffffff; --surface-2: #f3f3f0;
  --ink: #111214; --ink-2: #2b2d31; --muted: #62666e; --faint: #8a8f98;
  --line: rgba(17, 18, 20, .1); --line-2: rgba(17, 18, 20, .18);
  --accent: #2b59ff; --accent-ink: #ffffff; --accent-2: var(--accent);
  --good: #15803d; --bad: #c2261c; --warn: #b45309;
  --code-bg: #0c1018; --code-ink: #e5e9f0; --code-line: rgba(255, 255, 255, .08);
  --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --pill: 999px;
  --shadow: 0 1px 2px rgba(10, 12, 20, .04), 0 10px 30px -12px rgba(10, 12, 20, .12);
  --shadow-lg: 0 2px 6px rgba(10, 12, 20, .05), 0 30px 70px -30px rgba(10, 12, 20, .25);
  --h1: clamp(2.5rem, 1.55rem + 4.1vw, 4.75rem);
  --h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --sec: clamp(56px, 6.5vw, 96px);
  --wrap: 1200px; --gutter: clamp(20px, 4vw, 40px);
  --display-weight: 650; --display-track: -0.035em; --display-lh: 1.02;
}
.pro *, .pro *::before, .pro *::after { box-sizing: border-box; }
html:has(body.pro) { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html:has(body.pro) { scroll-behavior: auto; } .pro *, .pro *::before, .pro *::after { animation: none !important; transition: none !important; } }
body.pro { margin: 0; background: var(--bg); color: var(--ink); font: 400 16.5px/1.65 var(--font); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
.pro :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre) { margin: 0; }
.pro :where(ul, ol) { padding: 0; list-style: none; }
.pro img { display: block; max-width: 100%; height: auto; }
.pro :where(a) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
.pro :where(a):hover { text-decoration-color: currentColor; }
.pro :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.pro ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.pro code, .pro pre, .pro kbd { font-family: var(--mono); font-size: .9em; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.pro :not(pre) > code { padding: .1em .38em; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-size: .86em; }
.pro-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pro-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.pro-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pro-i-sm { width: 16px; height: 16px; }
.pro-i-xs { width: 13px; height: 13px; stroke-width: 2; }
.pro-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: var(--radius-sm); }
.pro-skip:focus { top: 12px; }
:lang(zh) .pro-hero h1, :lang(zh) .pro-sh h2, :lang(zh) .pro-cta h2 { letter-spacing: 0; line-height: 1.18; }
:lang(zh) body.pro { line-height: 1.8; }

/* ---------- header ---------- */
.pro-top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.pro-top.is-scrolled { border-bottom-color: var(--line); }
.pro-top-in { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.pro-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.pro-brand .qs-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.pro-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 700 14px/1 var(--display); letter-spacing: 0; }
.pro-nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pro-nav::-webkit-scrollbar { display: none; }
.pro-nav a { padding: 6px 12px; border-radius: var(--pill); color: var(--muted); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.pro-nav a:hover { color: var(--ink); background: var(--surface-2); }
.pro-nav a[aria-current] { color: var(--ink); background: var(--surface-2); }
.pro-top-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pro-langs { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--pill); }
.pro-langs a { padding: 3px 10px; border-radius: var(--pill); font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.pro-langs a[aria-current] { background: var(--ink); color: var(--bg); }

/* ---------- buttons, chips, badges ---------- */
.pro-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1px solid var(--accent); border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font: 600 15px/1 var(--font); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, color .2s; white-space: nowrap; }
.pro-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.pro-btn:active { transform: translateY(0); }
.pro-btn.is-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.pro-btn.is-ghost:hover { background: var(--surface-2); box-shadow: none; border-color: var(--ink); }
.pro-btn.is-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.pro-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; text-decoration: none; }
.pro-link:hover { text-decoration: underline; }
.pro-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pro-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--surface); color: var(--ink-2); font: 500 13.5px/1 var(--font); cursor: pointer; transition: all .15s; }
.pro-chip:hover { border-color: var(--ink); color: var(--ink); }
.pro-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pro-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--pill); background: color-mix(in srgb, var(--accent) 12%, transparent); color: color-mix(in srgb, var(--accent) 70%, var(--ink)); font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.pro-stamp { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.pro-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font: 500 12.5px/1 var(--font); cursor: pointer; transition: all .15s; }
.pro-copy:hover { border-color: var(--ink); color: var(--ink); }
.pro-copy.is-done { border-color: var(--good); color: var(--good); }
.pro-fine { margin-top: 18px; color: var(--muted); font-size: 13.5px; }
.pro-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--accent); font: 600 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pro-sources { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pro-sources a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; text-decoration: none; }
.pro-sources a:hover { color: var(--ink); text-decoration: underline; }
.pro-ticks { display: grid; gap: 10px; }
.pro-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.pro-ticks .pro-i { margin-top: .3em; color: var(--good); }

/* ---------- hero ---------- */
.pro-hero { position: relative; padding: clamp(56px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); overflow: hidden; isolation: isolate; }
.pro-hero.is-inner { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); }
.pro-hero-in { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.pro-hero.has-aside .pro-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.pro-hero-copy { max-width: 760px; }
.pro-hero:not(.has-aside) .pro-hero-copy { max-width: 900px; }
.pro-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px 6px 10px; border: 1px solid var(--line-2); border-radius: var(--pill); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.pro-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.pro-hero h1 { font: var(--display-weight) var(--h1)/var(--display-lh) var(--display); letter-spacing: var(--display-track); text-wrap: balance; }
.pro-hero.is-inner h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); }
.pro-hero.has-aside h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); }
.pro-hero h1 em { font-style: normal; color: var(--accent); }
:lang(zh) .pro-hero h1, :lang(zh) .pro-sh h2, :lang(zh) .pro-cta h2 { word-break: keep-all; overflow-wrap: anywhere; }
.pro-lead { margin-top: 22px; max-width: 640px; color: var(--muted); font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }
.pro-hero .pro-actions { margin-top: 32px; }
.pro-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; color: var(--muted); font-size: 14px; }
.pro-chips li { display: inline-flex; align-items: center; gap: 7px; }
.pro-chips .pro-i { color: var(--good); }
.pro-note { margin-top: 18px; color: var(--faint); font-size: 13px; }
.pro-hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.pro-aside-card { position: relative; }

/* glance card */
.pro-glance { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.pro-glance-h { padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pro-glance dl { display: grid; }
.pro-glance dl > div { display: grid; grid-template-columns: 42% 1fr; gap: 16px; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.pro-glance dl > div:last-child { border-bottom: 0; }
.pro-glance dt { color: var(--muted); font-size: 13.5px; }
.pro-glance dd { font-weight: 600; font-size: 14.5px; }

/* ---------- sections ---------- */
.pro-sec { padding: var(--sec) 0; }
.pro-sec + .pro-sec { padding-top: 0; }
.pro-sec.is-band, .pro-sec.is-band + .pro-sec { padding-top: var(--sec); }
.pro-hero + .pro-sec:not(.is-band) { padding-top: calc(var(--sec) * .55); }
.pro-sec.is-band { background: var(--bg-2); }
.pro-sh { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.pro-sh h2 { font: var(--display-weight) var(--h2)/1.1 var(--display); letter-spacing: calc(var(--display-track) * .7); text-wrap: balance; }
.pro-sh > p:not(.pro-kicker):not(.pro-stamp) { margin-top: 14px; color: var(--muted); font-size: 1.08rem; text-wrap: pretty; }
.pro-sh .pro-stamp { margin-top: 12px; }
.pro-prose { max-width: 720px; display: grid; gap: 18px; color: var(--ink-2); font-size: 1.06rem; }

/* features */
.pro-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.pro-features li { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s, transform .2s; }
.pro-features li:hover { border-color: var(--line-2); transform: translateY(-2px); }
.pro-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.pro-features h3 { font: 620 1.12rem/1.3 var(--display); letter-spacing: -.01em; }
.pro-features p { margin-top: 8px; color: var(--muted); font-size: .98rem; }

/* steps */
.pro-steps { display: grid; gap: 0; counter-reset: s; }
.pro-steps > li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding-bottom: 36px; }
.pro-steps > li:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 52px; bottom: 8px; width: 1px; background: var(--line-2); }
.pro-step-n { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); font: 600 15px/1 var(--mono); color: var(--accent); }
.pro-step-body { padding-top: 12px; min-width: 0; }
.pro-step-body h3 { font: 620 1.2rem/1.3 var(--display); letter-spacing: -.01em; }
.pro-step-body > p { margin-top: 8px; color: var(--muted); max-width: 680px; }
.pro-step-body .pro-codeblock { margin-top: 16px; }
.pro-step-note { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); color: var(--ink-2); font-size: .95rem; }
.pro-step-note .pro-i { margin-top: .25em; color: var(--warn); }
main > .pro-sec .pro-steps:not(:has(.pro-codeblock)) { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
main > .pro-sec .pro-steps:not(:has(.pro-codeblock)) > li { display: block; padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
main > .pro-sec .pro-steps:not(:has(.pro-codeblock)) > li::before { display: none; }
main > .pro-sec .pro-steps:not(:has(.pro-codeblock)) .pro-step-n { width: 40px; height: 40px; font-size: 13px; }
main > .pro-sec .pro-steps:not(:has(.pro-codeblock)) .pro-step-body { padding-top: 18px; }

/* code */
.pro-codeblock, .pro-codetabs { position: relative; border-radius: var(--radius); background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-line); overflow: hidden; box-shadow: var(--shadow); }
.pro-code-bar { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--code-line); background: color-mix(in srgb, var(--code-bg) 92%, white); }
.pro-dots { display: inline-flex; gap: 6px; }
.pro-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.pro-code-lang { color: rgba(255, 255, 255, .5); font: 500 12px/1 var(--mono); text-transform: lowercase; }
.pro-code-bar .pro-copy { margin-left: auto; background: transparent; border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75); }
.pro-code-bar .pro-copy:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.pro-code-bar .pro-copy.is-done { border-color: #4ade80; color: #4ade80; }
.pro-tablist { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pro-copy { flex: none; white-space: nowrap; }
.pro-tablist button { padding: 7px 12px; border: 0; border-radius: 7px; background: transparent; color: rgba(255, 255, 255, .55); font: 500 13px/1 var(--mono); cursor: pointer; white-space: nowrap; }
.pro-tablist button:hover { color: #fff; }
.pro-tablist button[aria-selected="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
.pro-codeblock pre, .pro-tabpanel pre { padding: 18px 20px; overflow-x: auto; font-size: 13.5px; line-height: 1.7; tab-size: 2; }
.pro-codeblock code, .pro-tabpanel code { font-size: inherit; background: none; border: 0; padding: 0; color: inherit; }
.tk-c { color: #7d8799; font-style: italic; }
.tk-s { color: #a5e3a1; }
.tk-k { color: #8fc7ff; }
.tk-n { color: #f5b97c; }
.tk-w { color: #d6a3ff; }

/* answer */
.pro-answer { position: relative; padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.pro-answer::before { content: ""; position: absolute; left: -1px; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: var(--accent); }
.pro-answer-label { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font: 600 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pro-answer h2 { margin-top: 14px; font: var(--display-weight) clamp(1.45rem, 1.15rem + 1vw, 2rem)/1.2 var(--display); letter-spacing: calc(var(--display-track) * .5); text-wrap: balance; }
.pro-answer-body { display: grid; gap: 14px; margin-top: 16px; max-width: 820px; color: var(--ink-2); font-size: 1.05rem; }
.pro-answer-body .pro-ticks { margin-top: 4px; }
.pro-answer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--line-2); }

/* facts */
.pro-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.pro-facts > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 18px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.pro-facts > div:nth-child(odd) { padding-right: 28px; }
.pro-facts > div:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--line); }
.pro-facts dt { color: var(--muted); font-size: 14px; }
.pro-facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pro-fact-v { font-weight: 600; }
.pro-facts small { width: 100%; color: var(--muted); font-size: 13px; }
.pro-fact-src { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12.5px; text-decoration: none; }
.pro-fact-src:hover { color: var(--accent); }

/* comparison */
.pro-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pro-table table { width: 100%; min-width: calc(var(--cols, 5) * 124px); border-collapse: collapse; font-size: 15px; }
.pro-table th, .pro-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pro-table tr:last-child > * { border-bottom: 0; }
.pro-table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--ink); font-size: 13.5px; font-weight: 650; }
.pro-table tbody th { color: var(--ink-2); font-weight: 600; width: 26%; }
.pro-table td { color: var(--ink-2); }
.pro-table .is-hl { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pro-table thead .is-hl { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: color-mix(in srgb, var(--accent) 60%, var(--ink)); }
.pro-tok { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.pro-tok.is-yes { color: var(--good); }
.pro-tok.is-no { color: var(--bad); }
.pro-tok.is-partial { color: var(--warn); }

/* checklist */
.pro-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pro-check-group { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pro-check-group h3 { display: flex; align-items: center; gap: 10px; font: 650 1.05rem/1.3 var(--display); }
.pro-check-group h3 .pro-i { padding: 4px; width: 26px; height: 26px; border-radius: 50%; }
.pro-check-group.is-yes h3 .pro-i { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.pro-check-group.is-no h3 .pro-i { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); }
.pro-check-group.is-maybe h3 .pro-i { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.pro-check-group ul { display: grid; gap: 10px; margin-top: 16px; }
.pro-check-group li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: .98rem; }
.pro-check-group li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }

/* callout */
.pro-callout { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px 24px; border-radius: var(--radius-lg); border: 1px solid; }
.pro-callout-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; }
.pro-callout h2 { font: 650 1.1rem/1.35 var(--display); letter-spacing: -.005em; }
.pro-callout p { margin-top: 6px; color: var(--ink-2); }
.pro-callout .pro-link { margin-top: 10px; }
.pro-callout.is-tip { background: color-mix(in srgb, var(--good) 6%, var(--surface)); border-color: color-mix(in srgb, var(--good) 22%, transparent); }
.pro-callout.is-tip .pro-callout-ic { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.pro-callout.is-note { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.pro-callout.is-note .pro-callout-ic { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pro-callout.is-warning { background: color-mix(in srgb, var(--warn) 7%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.pro-callout.is-warning .pro-callout-ic { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }

/* timeline */
.pro-timeline { position: relative; display: grid; gap: 0; }
.pro-timeline > li { position: relative; display: grid; grid-template-columns: 150px 28px minmax(0, 1fr); gap: 18px; padding-bottom: 34px; }
.pro-timeline > li::before { content: ""; position: absolute; left: calc(150px + 18px + 13px); top: 22px; bottom: -6px; width: 2px; background: var(--line); }
.pro-timeline > li:last-child::before { display: none; }
.pro-timeline > li.is-next::before, .pro-timeline > li.is-rumor::before { background: repeating-linear-gradient(to bottom, var(--line-2) 0 5px, transparent 5px 10px); }
.pro-timeline time { padding-top: 2px; color: var(--muted); font: 600 13.5px/1.4 var(--mono); text-align: right; }
.pro-tl-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--bg); }
.is-done .pro-tl-dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 5px var(--bg); }
.is-now .pro-tl-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 0 5px var(--bg); }
.is-next .pro-tl-dot { border-style: dashed; }
.is-rumor .pro-tl-dot { border-style: dotted; border-color: var(--faint); }
.pro-tl-state { color: var(--faint); font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.is-now .pro-tl-state { color: var(--accent); }
.pro-tl-body h3 { margin-top: 6px; font: 650 1.15rem/1.35 var(--display); }
.pro-tl-body p:not(.pro-tl-state) { margin-top: 6px; color: var(--muted); }
.pro-tl-body .pro-link { margin-top: 8px; font-size: 14px; }

/* status */
.pro-status { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-lg); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); overflow: hidden; }
.pro-status-label { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: var(--pill); background: color-mix(in srgb, var(--bg) 12%, transparent); font: 650 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.pro-pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--state, #22c55e); }
.pro-pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--state, #22c55e); opacity: 0; animation: pro-pulse 2s ease-out infinite; }
@keyframes pro-pulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.pro-status.is-live { --state: #22c55e; }
.pro-status.is-rolling { --state: #38bdf8; }
.pro-status.is-announced { --state: #facc15; }
.pro-status.is-rumored { --state: #c084fc; }
.pro-status.is-delayed { --state: #f97316; }
.pro-status.is-paused { --state: #94a3b8; }
.pro-status-date { display: grid; gap: 6px; margin-top: 26px; }
.pro-status-date small { color: color-mix(in srgb, var(--bg) 60%, transparent); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.pro-status-date strong { font: 650 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1.05 var(--display); letter-spacing: -.02em; }
.pro-status-detail { margin-top: 18px; color: color-mix(in srgb, var(--bg) 78%, transparent); }
.pro-status-foot { display: grid; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent); }
.pro-status .pro-stamp, .pro-status .pro-sources a { color: color-mix(in srgb, var(--bg) 68%, transparent); }
.pro-status .pro-sources a:hover { color: var(--bg); }

/* prompts */
.pro-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 26px; }
.pro-chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; max-width: 340px; margin-left: auto; }
.pro-search .pro-i { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.pro-search input { width: 100%; min-height: 40px; padding: 0 14px 0 40px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; }
.pro-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pro-count { width: 100%; order: 3; color: var(--muted); font-size: 13.5px; }
.pro-empty { padding: 40px; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); color: var(--muted); text-align: center; }
.pro-prompts { columns: 3 300px; column-gap: 18px; }
.pro-prompt { break-inside: avoid; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.pro-prompt:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.pro-prompt[hidden] { display: none; }
.pro-prompt figure { background: var(--surface-2); }
.pro-prompt figure img { width: 100%; height: auto; }
.pro-swatch { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; background: radial-gradient(120% 120% at 15% 10%, hsl(var(--h) 85% 72%) 0%, transparent 55%), radial-gradient(90% 110% at 90% 90%, hsl(calc(var(--h) + 70) 80% 62%) 0%, transparent 60%), hsl(calc(var(--h) + 30) 45% 86%); overflow: hidden; }
.pro-swatch b { color: rgba(255, 255, 255, .92); font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--display); letter-spacing: -.02em; mix-blend-mode: soft-light; }
.pro-prompt-body { padding: 20px 22px 22px; }
.pro-prompt-ratio { font: 500 11.5px/1 var(--mono); letter-spacing: .04em; margin-left: auto; padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--muted); }
.pro-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.pro-prompt h3 { margin-top: 12px; font: 640 1.08rem/1.3 var(--display); }
.pro-prompt-text { margin-top: 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.6; white-space: pre-line; }
.pro-prompt-note { margin-top: 10px; color: var(--muted); font-size: 13.5px; }
.pro-prompt .pro-copy { margin-top: 14px; }

/* versus */
.pro-versus { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.pro-vs-card { position: relative; padding: clamp(26px, 3.5vw, 40px); border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); }
.pro-vs-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--vs); }
.pro-vs-card.is-a { --vs: var(--a, var(--accent)); }
.pro-vs-card.is-b { --vs: var(--b, var(--ink)); }
.pro-vs-tag { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vs); color: #fff; font: 700 14px/1 var(--display); }
.pro-vs-card h3 { margin-top: 18px; font: var(--display-weight) clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.05 var(--display); letter-spacing: var(--display-track); }
.pro-vs-maker { margin-top: 6px; color: var(--muted); font-size: 14px; }
.pro-vs-line { margin-top: 14px; color: var(--ink-2); font-size: 1.05rem; }
.pro-vs-for { margin: 22px 0 12px; color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pro-vs-card .pro-ticks .pro-i { color: var(--vs); }
.pro-vs-card .pro-link { margin-top: 22px; color: var(--ink); }
.pro-vs-badge { align-self: center; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 -14px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 800 18px/1 var(--display); letter-spacing: .02em; box-shadow: 0 0 0 8px var(--bg); }
.pro-verdict { display: grid; grid-template-columns: auto 1fr; gap: 18px; margin-top: 22px; padding: 22px 26px; border-radius: var(--radius-lg); background: var(--ink); color: var(--bg); font-size: 1.05rem; }
.pro-verdict strong { font: 600 12px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 60%, transparent); }

/* pricing plans */
.pro-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.pro-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pro-plan.is-hl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg); }
.pro-plan-badge { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.pro-plan h3 { font: 650 1.05rem/1.3 var(--display); color: var(--ink-2); }
.pro-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.pro-price strong { font: 700 clamp(2rem, 1.6rem + 1.4vw, 2.6rem)/1 var(--display); letter-spacing: -.03em; }
.pro-price span { color: var(--muted); font-size: 14px; }
.pro-plan-desc { color: var(--muted); font-size: .96rem; }
.pro-plan .pro-ticks { font-size: .95rem; color: var(--ink-2); padding-top: 14px; border-top: 1px solid var(--line); }
.pro-plan .pro-btn { margin-top: auto; }

/* calculator */
.pro-calc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.pro-calc-presets { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.pro-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.pro-aside-card .pro-calc-grid { grid-template-columns: 1fr; }
.pro-calc-fields { display: grid; gap: 16px; padding: 22px; }
.pro-field { display: grid; gap: 8px; }
.pro-field-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-weight: 600; font-size: 14px; }
.pro-field-label small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.pro-field-input { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); transition: border-color .15s, box-shadow .15s; }
.pro-field-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pro-field-input input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: 500 16px/1 var(--mono); outline: none; -moz-appearance: textfield; }
.pro-field-input input::-webkit-inner-spin-button { opacity: .4; }
.pro-unit { padding: 0 14px; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.pro-calc-out { display: grid; align-content: start; gap: 1px; background: var(--line); }
.pro-out { padding: 18px 22px; background: var(--surface-2); }
.pro-out p { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.pro-out output { display: block; margin-top: 4px; font: 600 1.5rem/1.15 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pro-out small { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.pro-out.is-main { background: var(--ink); color: var(--bg); }
.pro-out.is-main p, .pro-out.is-main small { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.pro-out.is-main output { font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3rem); }
.pro-out output.is-tick { animation: pro-tick .35s ease-out; }
@keyframes pro-tick { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.pro-calc > .pro-fine { margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); }

/* ranked */
.pro-ranked { display: grid; gap: 16px; }
.pro-rank { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 28px 30px 28px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.pro-rank:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.pro-rank[hidden] { display: none; }
.pro-rank-n { font: 800 2.6rem/1 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--line-2); text-align: center; }
.pro-rank:first-child .pro-rank-n { -webkit-text-stroke-color: var(--accent); }
.pro-rank-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pro-rank-head > div { flex: 1; min-width: 200px; }
.pro-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, hsl(var(--h) 75% 58%), hsl(calc(var(--h) + 50) 70% 46%)); color: #fff; font: 750 17px/1 var(--display); letter-spacing: -.01em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pro-rank h3 { font: 700 1.35rem/1.2 var(--display); letter-spacing: -.02em; }
.pro-rank-line { margin-top: 4px; color: var(--muted); }
.pro-rank-main > p { margin-top: 16px; color: var(--ink-2); max-width: 820px; }
.pro-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 18px; }
.pro-proscons ul { display: grid; gap: 8px; font-size: .96rem; }
.pro-proscons li { display: flex; gap: 8px; }
.pro-proscons .pro-i { margin-top: .3em; }
.pro-proscons .is-pro .pro-i { color: var(--good); }
.pro-proscons .is-con .pro-i { color: var(--bad); }
.pro-rank-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.pro-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-tags span { padding: 3px 10px; border-radius: var(--pill); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.pro-rank-for { color: var(--muted); font-size: 14px; }
.pro-rank-for strong { color: var(--ink); font-weight: 650; }
.pro-rank-foot .pro-link { margin-left: auto; }

/* showcase */
.pro-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.pro-show { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.pro-show figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pro-show-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.pro-show h3 { margin-top: 12px; font: 640 1.1rem/1.3 var(--display); }
.pro-show-k { margin-top: 16px; color: var(--faint); font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.pro-show-in { margin-top: 8px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); font-size: 14.5px; }
.pro-show-out { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--accent); color: var(--ink-2); font-size: 14.5px; white-space: pre-line; }
.pro-show .pro-btn { align-self: flex-start; margin-top: auto; }
.pro-show-out + .pro-btn { margin-top: 20px; }

/* resources + gallery */
.pro-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pro-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s; }
.pro-card:hover { border-color: var(--line-2); }
.pro-card[hidden] { display: none; }
.pro-card h3 { margin-top: 10px; font: 640 1.05rem/1.35 var(--display); }
.pro-card h3 a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pro-card h3 a:hover { color: var(--accent); }
.pro-card p:last-child { margin-top: 6px; color: var(--muted); font-size: .95rem; }
.pro-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.pro-gallery a { text-decoration: none; }
.pro-gallery img, .pro-gallery .pro-swatch { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); object-fit: cover; }
.pro-gallery h3 { margin-top: 14px; font: 640 1.05rem/1.3 var(--display); }
.pro-gallery p { margin-top: 4px; color: var(--muted); font-size: .95rem; }

/* tool (model form from qs.mjs) */
.pro-tool-shell { position: relative; border: 1px solid var(--line-2); border-radius: calc(var(--radius-lg) + 2px); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.pro-tool-shell.is-wide { max-width: 880px; margin: 0 auto; }
.pro-tool-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pro-tool-top .pro-dots i { background: var(--line-2); }
.pro-tool-name { font: 500 13px/1 var(--mono); color: var(--muted); }
.pro-live { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--good); font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pro-live .pro-pulse { --state: var(--good); width: 7px; height: 7px; }
.pro .tool { padding: 20px; }
.pro .tool form { display: grid; gap: 14px; }
.pro .tool label { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.pro .tool textarea { width: 100%; min-height: 150px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg); color: var(--ink); font: 15px/1.6 var(--font); resize: vertical; transition: border-color .15s, box-shadow .15s; }
.pro .tool textarea::placeholder { color: var(--faint); }
.pro .tool textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pro .tool .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pro .tool .chips > span { color: var(--muted); font-size: 13px; margin-right: 2px; }
.pro .tool .chip { min-height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--pill); background: transparent; color: var(--ink-2); font: 500 13px/1 var(--font); cursor: pointer; transition: all .15s; }
.pro .tool .chip:hover { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pro .tool .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pro .tool .primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 0; border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font: 650 15px/1 var(--font); cursor: pointer; transition: transform .15s, box-shadow .2s, opacity .2s; }
.pro .tool .primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.pro .tool .primary:disabled { opacity: .6; cursor: progress; transform: none; }
.pro .tool .wallet { color: var(--muted); font-size: 13px; }
.pro .tool .price { color: var(--muted); font-size: 13px; }
.pro .tool .out { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pro .tool .out h2 { display: inline-block; margin-right: 10px; color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pro .tool .out .pro-copy { float: right; margin-top: -6px; }
.pro .tool .out pre { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); white-space: pre-wrap; word-break: break-word; font-size: 13.5px; }
.pro .tool .out pre.is-hidden { display: none; }
.pro-md { clear: both; display: grid; gap: 10px; margin-top: 14px; color: var(--ink-2); font-size: 15px; }
.pro-md:empty { display: none; }
.pro-md h3, .pro-md h4 { margin-top: 6px; font: 650 1.02rem/1.35 var(--display); color: var(--ink); }
.pro-md ul, .pro-md ol { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.pro-md ol { list-style: decimal; }
.pro-md pre { padding: 14px 16px; border-radius: var(--radius); background: var(--code-bg); color: var(--code-ink); overflow-x: auto; font-size: 13px; }

/* cta */
.pro-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(32px, 5vw, 60px); border-radius: calc(var(--radius-lg) + 8px); background: var(--ink); color: var(--bg); overflow: hidden; isolation: isolate; }
.pro-cta::before { content: ""; position: absolute; inset: -40% -10% auto auto; z-index: -1; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); opacity: .7; }
.pro-cta > div:first-child { max-width: 620px; }
.pro-cta h2 { font: var(--display-weight) clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem)/1.08 var(--display); letter-spacing: var(--display-track); text-wrap: balance; }
.pro-cta p:not(.pro-kicker) { margin-top: 12px; color: color-mix(in srgb, var(--bg) 72%, transparent); font-size: 1.05rem; }
.pro-cta .pro-btn.is-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); }
.pro-cta .pro-btn.is-ghost:hover { background: color-mix(in srgb, var(--bg) 10%, transparent); border-color: var(--bg); }

/* faq */
.pro-faq-list { border-top: 1px solid var(--line-2); max-width: 900px; }
.pro-faq details { border-bottom: 1px solid var(--line); }
.pro-faq summary { display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 12px; padding: 22px 0; cursor: pointer; list-style: none; }
.pro-faq summary::-webkit-details-marker { display: none; }
.pro-faq-n { color: var(--faint); font: 500 13px/1 var(--mono); }
.pro-faq-q { font: 620 1.1rem/1.4 var(--display); letter-spacing: -.005em; }
.pro-faq-x { position: relative; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 50%; }
.pro-faq-x::before, .pro-faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .2s; }
.pro-faq-x::after { transform: translate(-50%, -50%) rotate(90deg); }
.pro-faq details[open] .pro-faq-x::after { transform: translate(-50%, -50%) rotate(0); }
.pro-faq summary:hover .pro-faq-q { color: var(--accent); }
.pro-faq-a { padding: 0 36px 24px 56px; color: var(--ink-2); max-width: 760px; }

/* doc layout */
.pro-doc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: var(--sec); }
.pro-toc { position: sticky; top: 88px; }
.pro-toc p { margin-bottom: 12px; color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pro-toc ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.pro-toc a { display: flex; gap: 10px; margin-left: -1px; padding: 7px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.4; text-decoration: none; }
.pro-toc a span { color: var(--faint); font: 500 12px/1.6 var(--mono); }
.pro-toc a:hover { color: var(--ink); }
.pro-toc a[aria-current] { border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.pro-doc-main { min-width: 0; max-width: 820px; }
.pro-doc-main > .pro-sec { padding: 0 0 56px; }
.pro-doc-main > .pro-sec + .pro-sec { padding-top: 0; }
.pro-doc-main .pro-sh { margin-bottom: 24px; }
.pro-doc-main .pro-sh h2 { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); }
.pro-doc-main .pro-faq { padding: 0; }

/* footer */
.pro-foot { margin-top: var(--sec); padding: 56px 0 40px; border-top: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: 14.5px; }
.pro-sec.is-band:last-of-type + .pro-foot, .pro-faq + .pro-foot { margin-top: 0; }
.pro-foot-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.pro-foot-brand .pro-brand { color: var(--ink); }
.pro-foot-brand p { margin-top: 14px; max-width: 420px; }
.pro-foot-col { display: grid; align-content: start; gap: 10px; }
.pro-foot-col p { margin-bottom: 4px; color: var(--ink); font-weight: 650; font-size: 13.5px; }
.pro-foot-col a { color: var(--muted); text-decoration: none; }
.pro-foot-col a:hover { color: var(--ink); }
.pro-foot-base { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; }

/* ======================================================================
   THEMES
   ====================================================================== */

/* 1. playground: night lab, chartreuse signal */
.theme-playground {
  --font: "Geist", var(--cjk); --display: "Geist", var(--cjk); --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --bg: #07080a; --bg-2: #0c0e12; --surface: #111317; --surface-2: #171a20;
  --ink: #f2f4f7; --ink-2: #cfd5de; --muted: #8b93a1; --faint: #5f6673;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --accent: #c6ff3d; --accent-ink: #0b0e05; --accent-2: #4ff0d0;
  --good: #7ee787; --bad: #ff7b72; --warn: #f2cc60;
  --code-bg: #0a0c0f; --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -24px rgba(0, 0, 0, .8);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 120px -40px rgba(198, 255, 61, .18), 0 30px 60px -30px rgba(0, 0, 0, .9);
  --display-weight: 620; --display-track: -0.045em; --radius-lg: 18px;
  color-scheme: dark;
}
.theme-playground .pro-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 12% 0%, rgba(198, 255, 61, .16), transparent 70%), radial-gradient(45% 50% at 95% 20%, rgba(79, 240, 208, .12), transparent 70%); }
.theme-playground .pro-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 85%); mask-image: linear-gradient(to bottom, #000 20%, transparent 85%); }
.theme-playground .pro-hero h1 em { background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-playground .pro-eyebrow { background: rgba(255, 255, 255, .03); }
.theme-playground .pro-mark { background: var(--accent); color: var(--accent-ink); }
.theme-playground .pro-langs a[aria-current] { background: var(--ink); color: var(--bg); }
.theme-playground .pro-tool-shell { background: linear-gradient(180deg, #15181e, #0f1115); border-color: rgba(255, 255, 255, .12); }
.theme-playground .pro-tool-shell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(198, 255, 61, .55), transparent 35%, transparent 65%, rgba(79, 240, 208, .4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.theme-playground .pro-tool-top { background: rgba(255, 255, 255, .02); }
.theme-playground .tool textarea { background: #0a0b0e; }
.theme-playground .pro-features li, .theme-playground .pro-show, .theme-playground .pro-table, .theme-playground .pro-answer { background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .01)); }
.theme-playground .pro-ic { background: rgba(198, 255, 61, .1); color: var(--accent); }
.theme-playground .pro-step-n { background: var(--bg); }
.theme-playground .pro-cta { background: linear-gradient(120deg, #c6ff3d, #4ff0d0); color: #07080a; }
.theme-playground .pro-cta::before { display: none; }
.theme-playground .pro-cta p:not(.pro-kicker) { color: rgba(7, 8, 10, .72); }
.theme-playground .pro-cta .pro-kicker { color: rgba(7, 8, 10, .7); }
.theme-playground .pro-cta .pro-btn:not(.is-ghost) { background: #07080a; border-color: #07080a; color: var(--accent); }
.theme-playground .pro-cta .pro-btn.is-ghost { color: #07080a; border-color: rgba(7, 8, 10, .3); }
.theme-playground .pro-table thead th { background: #14171c; }
.theme-playground .pro-foot { background: #050607; }
.theme-playground .pro-show-out { border-left-color: var(--accent-2); }

/* 2. model-hub: technical spec sheet, cobalt on paper */
.theme-model-hub {
  --font: "IBM Plex Sans", var(--cjk); --display: "IBM Plex Sans", var(--cjk); --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --bg: #f6f6f2; --bg-2: #eeeee8; --surface: #ffffff; --surface-2: #f3f3ee;
  --ink: #0d1015; --ink-2: #2a2f38; --muted: #5a616e; --faint: #8c919b;
  --line: #e0e0d8; --line-2: #c9c9bf; --accent: #2448ff; --accent-ink: #fff;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --pill: 6px;
  --display-weight: 600; --display-track: -0.03em; --display-lh: 1.04;
  --code-bg: #0e1424;
}
.theme-model-hub .pro-hero { border-bottom: 1px solid var(--line); }
.theme-model-hub .pro-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(70% 80% at 80% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 80% 30%, #000, transparent 75%); opacity: .7; }
.theme-model-hub .pro-eyebrow { border-radius: 4px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
.theme-model-hub .pro-dot { border-radius: 2px; }
.theme-model-hub .pro-glance { border-top: 3px solid var(--accent); }
.theme-model-hub .pro-glance dd { font-family: var(--mono); font-weight: 500; font-size: 14px; }
.theme-model-hub .pro-kicker::before { content: "§"; font-size: 1.1em; }
.theme-model-hub .pro-sec:not(.pro-faq) { border-bottom: 1px solid var(--line); }
.theme-model-hub { --sec: clamp(44px, 5vw, 72px); }
.theme-model-hub .pro-sec + .pro-sec { padding-top: var(--sec); }
.theme-model-hub .pro-fact-v { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.theme-model-hub .pro-facts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.theme-model-hub .pro-facts > div { padding: 16px 22px; }
.theme-model-hub .pro-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.theme-model-hub .pro-facts dt { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.theme-model-hub .pro-answer::before { display: none; }
.theme-model-hub .pro-answer { border-left: 3px solid var(--accent); }
.theme-model-hub .pro-mark { background: var(--accent); }
.theme-model-hub .pro-btn { border-radius: 6px; }
.theme-model-hub .pro-cta { border-radius: 10px; background: #0d1015; }
.theme-model-hub .pro-timeline time { color: var(--ink-2); }
.theme-model-hub .pro-card { border-radius: 6px; }

/* 3. versus: loud editorial split, red-orange against blue */
.theme-versus {
  --font: "Inter", var(--cjk); --display: "Bricolage Grotesque", var(--cjk); --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #faf8f4; --bg-2: #f1ede5; --surface: #ffffff; --surface-2: #f4f1ea;
  --ink: #121212; --ink-2: #2c2c2c; --muted: #616161; --faint: #8f8f8f;
  --line: #e6e1d7; --line-2: #cfc8ba; --accent: #121212; --accent-ink: #fff;
  --a: #ff4f1a; --b: #1f55ff;
  --display-weight: 780; --display-track: -0.04em; --display-lh: .98;
}
.theme-versus .pro-hero { text-align: center; }
.theme-versus .pro-hero-copy { margin: 0 auto; }
.theme-versus .pro-lead { margin-inline: auto; }
.theme-versus .pro-hero .pro-actions, .theme-versus .pro-chips { justify-content: center; }
.theme-versus .pro-hero h1 { font-size: clamp(2.8rem, 1.6rem + 5.4vw, 6rem); }
.theme-versus .pro-hero h1 em { padding: 0 .12em; background: linear-gradient(90deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-versus .pro-dot { background: var(--a); box-shadow: 10px 0 0 var(--b); margin-right: 10px; }
.theme-versus .pro-kicker { color: var(--a); }
.theme-versus .pro-hero + .pro-sec-versus { padding-top: 0; }
.theme-versus .pro-vs-card { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--vs); }
.theme-versus .pro-vs-card::before { display: none; }
.theme-versus .pro-vs-card h3 { color: var(--vs); }
.theme-versus .pro-table { border: 2px solid var(--ink); }
.theme-versus .pro-table thead th { background: var(--ink); color: #fff; }
.theme-versus .pro-table thead th:nth-child(2) { color: #ffb59c; }
.theme-versus .pro-table thead th:nth-child(3) { color: #a9bfff; }
.theme-versus .pro-mark { background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); }
.theme-versus .pro-check-group { border: 2px solid var(--ink); }
.theme-versus .pro-cta { background: linear-gradient(110deg, var(--a), #c2187a 50%, var(--b)); }
.theme-versus .pro-cta::before { display: none; }
.theme-versus .pro-cta .pro-btn:not(.is-ghost) { background: #fff; border-color: #fff; color: var(--ink); }

/* 4. prompts: gallery of copyable ideas, warm paper and serif */
.theme-prompts {
  --font: "Inter", var(--cjk); --display: "Instrument Serif", var(--cjk-serif); --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #f4efe7; --bg-2: #ece5d9; --surface: #fffcf7; --surface-2: #f5efe5;
  --ink: #1e1915; --ink-2: #3a322b; --muted: #73685d; --faint: #9c9083;
  --line: #e4dacb; --line-2: #cfc1ad; --accent: #2d1b3d; --accent-ink: #fff6e8; --accent-2: #d4572a;
  --display-weight: 400; --display-track: -0.02em; --display-lh: .95; --radius-lg: 22px;
}
.theme-prompts .pro-hero { text-align: center; }
.theme-prompts .pro-hero-copy { margin: 0 auto; }
.theme-prompts .pro-lead { margin-inline: auto; }
.theme-prompts .pro-hero .pro-actions, .theme-prompts .pro-chips { justify-content: center; }
.theme-prompts .pro-hero h1 { font-size: clamp(3.2rem, 1.8rem + 6vw, 7rem); }
.theme-prompts .pro-hero h1 em { font-style: italic; color: var(--accent-2); }
:lang(zh) .theme-prompts .pro-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem); font-weight: 700; line-height: 1.12; }
:lang(zh) .theme-prompts .pro-hero h1 em, :lang(zh) .theme-prompts h2 { font-style: normal; }
:lang(zh) .theme-prompts .pro-sh h2, :lang(zh) .theme-prompts .pro-cta h2 { font-weight: 700; }
.theme-prompts .pro-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 30px; width: min(900px, 120%); aspect-ratio: 2.2; transform: translateX(-50%); background: radial-gradient(40% 60% at 30% 50%, rgba(212, 87, 42, .18), transparent 70%), radial-gradient(40% 60% at 70% 50%, rgba(120, 72, 160, .16), transparent 70%); filter: blur(10px); }
.theme-prompts .pro-sh h2 { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1; }
.theme-prompts .pro-kicker { color: var(--accent-2); font-family: var(--font); letter-spacing: .14em; }
.theme-prompts .pro-prompt h3 { font: 400 1.55rem/1.1 var(--display); letter-spacing: -.01em; }
:lang(zh) .theme-prompts .pro-prompt h3 { font: 650 1.12rem/1.35 var(--font); }
.theme-prompts .pro-prompt-text { font-family: var(--mono); font-size: 13.5px; background: #f6efe3; border: 1px solid var(--line); }
.theme-prompts .pro-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.theme-prompts .pro-badge { background: rgba(212, 87, 42, .12); color: #a8401c; }
.theme-prompts .pro-mark { background: var(--accent-2); color: #fff; font-family: var(--display); font-size: 18px; font-style: italic; font-weight: 400; }
.theme-prompts .pro-step-n, .theme-prompts .pro-faq-n { color: var(--accent-2); }
.theme-prompts .pro-faq-q { font-family: var(--font); font-weight: 600; }
.theme-prompts .pro-cta { background: var(--accent); }
.theme-prompts .pro-cta::before { background: radial-gradient(closest-side, rgba(212, 87, 42, .6), transparent); }
.theme-prompts .pro-cta h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); }
.theme-prompts .pro-cta .pro-btn:not(.is-ghost) { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.theme-prompts .pro-callout h2, .theme-prompts .pro-features h3, .theme-prompts .pro-step-body h3 { font-family: var(--font); font-weight: 650; }

/* 5. setup-guide: documentation, emerald on white, terminal code */
.theme-setup-guide {
  --font: "Inter", var(--cjk); --display: "Inter", var(--cjk); --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --bg: #ffffff; --bg-2: #f8fafc; --surface: #ffffff; --surface-2: #f4f6f9;
  --ink: #0f172a; --ink-2: #273449; --muted: #64748b; --faint: #94a3b8;
  --line: #e5e9f0; --line-2: #cfd6e1; --accent: #059669; --accent-ink: #fff;
  --code-bg: #0b1220; --radius-lg: 14px;
  --display-weight: 700; --display-track: -0.035em; --h1: clamp(2.3rem, 1.5rem + 3.2vw, 3.9rem);
}
.theme-setup-guide .pro-hero { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #f3fbf7, #fff 70%); margin-bottom: clamp(36px, 5vw, 64px); }
.theme-setup-guide .pro-eyebrow { font-family: var(--mono); font-size: 12.5px; }
.theme-setup-guide .pro-chips { gap: 8px; }
.theme-setup-guide .pro-chips li { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; color: var(--ink-2); font-size: 13px; }
.theme-setup-guide .pro-mark { background: var(--accent); }
.theme-setup-guide .pro-step-n { background: var(--accent); border-color: var(--accent); color: #fff; width: 40px; height: 40px; font-size: 13px; }
.theme-setup-guide .pro-steps > li { grid-template-columns: 40px minmax(0, 1fr); }
.theme-setup-guide .pro-steps > li:not(:last-child)::before { left: 19px; top: 46px; }
.theme-setup-guide .pro-step-body { padding-top: 6px; }
.theme-setup-guide .pro-check-group { background: var(--bg-2); }
.theme-setup-guide .pro-faq summary { padding: 18px 0; }
.theme-setup-guide .pro-faq-q { font-size: 1.02rem; }
.theme-setup-guide .pro-cta { background: #0b1220; }

/* 6. pricing-calculator: fintech clarity, navy and money green */
.theme-pricing-calculator {
  --font: "Manrope", var(--cjk); --display: "Manrope", var(--cjk); --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --bg: #f2f4f8; --bg-2: #e9edf4; --surface: #ffffff; --surface-2: #f5f7fb;
  --ink: #0a1a33; --ink-2: #22324d; --muted: #5a6a84; --faint: #8a97ad;
  --line: #dfe5ee; --line-2: #c9d2df; --accent: #00875a; --accent-ink: #fff;
  --display-weight: 750; --display-track: -0.04em; --radius-lg: 18px;
}
.theme-pricing-calculator .pro-hero::before { content: ""; position: absolute; inset: 0 0 30% 40%; z-index: -1; background: radial-gradient(50% 60% at 60% 40%, rgba(0, 135, 90, .12), transparent 70%); }
.theme-pricing-calculator .pro-hero h1 em { color: var(--accent); }
.theme-pricing-calculator .pro-mark { background: var(--accent); }
.theme-pricing-calculator .pro-out.is-main { background: #0a1a33; }
.theme-pricing-calculator .pro-out.is-main output { color: #5ff0b2; }
.theme-pricing-calculator .pro-plan.is-hl { background: #0a1a33; color: #fff; border-color: #0a1a33; box-shadow: var(--shadow-lg); }
.theme-pricing-calculator .pro-plan.is-hl h3, .theme-pricing-calculator .pro-plan.is-hl .pro-plan-desc, .theme-pricing-calculator .pro-plan.is-hl .pro-price span, .theme-pricing-calculator .pro-plan.is-hl .pro-ticks { color: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .14); }
.theme-pricing-calculator .pro-plan.is-hl .pro-ticks .pro-i { color: #5ff0b2; }
.theme-pricing-calculator .pro-price strong { font-family: var(--mono); font-weight: 500; letter-spacing: -.04em; }
.theme-pricing-calculator .pro-table td { font-family: var(--mono); font-size: 14px; }
.theme-pricing-calculator .pro-table td .pro-tok { font-family: var(--font); }
.theme-pricing-calculator .pro-answer::before { background: linear-gradient(#00875a, #5ff0b2); }
.theme-pricing-calculator .pro-cta { background: #0a1a33; }

/* 7. release-tracker: newsroom, paper, serif, breaking red */
.theme-release-tracker {
  --font: "Inter", var(--cjk); --display: "Newsreader", var(--cjk-serif); --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #f2eee5; --bg-2: #e9e3d6; --surface: #fbf9f4; --surface-2: #f1ece2;
  --ink: #141210; --ink-2: #2f2b26; --muted: #625b51; --faint: #908779;
  --line: #d9d1c2; --line-2: #bfb5a2; --accent: #d1221a; --accent-ink: #fff;
  --display-weight: 560; --display-track: -0.025em; --display-lh: 1; --radius: 6px; --radius-lg: 10px;
  --h1: clamp(2.7rem, 1.6rem + 4.6vw, 5.4rem);
}
.theme-release-tracker .pro-top { border-bottom: 3px double var(--ink); background: var(--bg); }
.theme-release-tracker .pro-brand { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.theme-release-tracker .pro-mark { border-radius: 50%; background: var(--accent); font-family: var(--font); }
.theme-release-tracker .pro-eyebrow { padding: 0; border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.theme-release-tracker .pro-dot { animation: pro-blink 1.4s ease-in-out infinite; }
@keyframes pro-blink { 50% { opacity: .25; } }
.theme-release-tracker .pro-hero h1 em { font-style: italic; color: var(--accent); }
:lang(zh) .theme-release-tracker .pro-hero h1 { font-weight: 800; }
:lang(zh) .theme-release-tracker .pro-hero h1 em { font-style: normal; }
.theme-release-tracker .pro-hero-in { border-bottom: 1px solid var(--line-2); padding-bottom: clamp(40px, 5vw, 64px); }
.theme-release-tracker .pro-hero { padding-bottom: 0; }
.theme-release-tracker .pro-status { background: #141210; transform: rotate(.6deg); }
.theme-release-tracker .pro-status::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(209, 34, 26, .45), transparent); }
.theme-release-tracker .pro-kicker { color: var(--accent); font-family: var(--font); font-weight: 700; letter-spacing: .14em; }
.theme-release-tracker .pro-sh h2 { font-weight: 600; }
.theme-release-tracker .pro-timeline time { font-family: var(--font); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.theme-release-tracker .pro-tl-body h3 { font-family: var(--display); font-size: 1.45rem; font-weight: 560; letter-spacing: -.01em; }
:lang(zh) .theme-release-tracker .pro-tl-body h3 { font-family: var(--font); font-size: 1.15rem; font-weight: 700; }
.theme-release-tracker .pro-check-group { background: var(--surface); border-radius: 4px; border-top: 4px solid var(--ink); }
.theme-release-tracker .pro-check-group.is-no, .theme-release-tracker .pro-check-group.is-maybe { border-top-color: var(--accent); }
.theme-release-tracker .pro-facts { border-top: 2px solid var(--ink); }
.theme-release-tracker .pro-faq-q { font-family: var(--font); font-weight: 650; font-size: 1.05rem; }
.theme-release-tracker .pro-cta { border-radius: 6px; }
.theme-release-tracker .pro-btn { border-radius: 4px; }

/* 8. alternatives: ranked shortlist, friendly and bright */
.theme-alternatives {
  --font: "Plus Jakarta Sans", var(--cjk); --display: "Plus Jakarta Sans", var(--cjk); --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #ffffff; --bg-2: #f5f6fa; --surface: #ffffff; --surface-2: #f4f5f9;
  --ink: #14161c; --ink-2: #2d313b; --muted: #5f6573; --faint: #959aa6;
  --line: #e8e9ef; --line-2: #d3d6df; --accent: #6b4dff; --accent-ink: #fff; --accent-2: #ffb020;
  --display-weight: 800; --display-track: -0.045em; --radius-lg: 20px;
}
.theme-alternatives .pro-hero { background: radial-gradient(60% 80% at 50% 0%, #f1edff, transparent 70%); text-align: center; }
.theme-alternatives .pro-hero-copy { margin: 0 auto; }
.theme-alternatives .pro-lead { margin-inline: auto; }
.theme-alternatives .pro-hero .pro-actions, .theme-alternatives .pro-chips { justify-content: center; }
.theme-alternatives .pro-hero h1 em { color: var(--accent); }
.theme-alternatives .pro-mark { background: linear-gradient(135deg, var(--accent), #a855f7); }
.theme-alternatives .pro-rank:first-child { border: 2px solid var(--accent); box-shadow: 0 20px 50px -30px rgba(107, 77, 255, .5); position: relative; }
.theme-alternatives .pro-rank:first-child::after { content: "Top pick"; position: absolute; top: -13px; right: 26px; padding: 4px 12px; border-radius: var(--pill); background: var(--accent-2); color: #1d1300; font-size: 12px; font-weight: 800; }
:lang(zh) .theme-alternatives .pro-rank:first-child::after { content: "首选"; }
.theme-alternatives .pro-rank-n { -webkit-text-stroke-color: #c9c3ef; }
.theme-alternatives .pro-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.theme-alternatives .pro-table thead .is-hl { background: var(--accent); color: #fff; }
.theme-alternatives .pro-cta { background: linear-gradient(120deg, #2a1f73, #6b4dff); }
.theme-alternatives .pro-cta::before { background: radial-gradient(closest-side, rgba(255, 176, 32, .5), transparent); }
.theme-alternatives .pro-cta .pro-btn:not(.is-ghost) { background: var(--accent-2); border-color: var(--accent-2); color: #1d1300; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .pro-hero.has-aside .pro-hero-in { grid-template-columns: 1fr; }
  .pro-hero.has-aside .pro-hero-copy { max-width: 760px; }
  .pro-doc { grid-template-columns: 1fr; }
  .pro-toc { position: static; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); }
  .pro-toc ol { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-left: 0; }
  .pro-toc a { border-left: 0; padding: 6px 0; }
  .pro-calc-grid { grid-template-columns: 1fr; }
  .pro-foot-top { grid-template-columns: 1fr 1fr; }
  .pro-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body.pro { font-size: 16px; }
  .pro-top-in { gap: 12px; min-height: 58px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .pro-nav { order: 3; width: 100%; margin: 0 -6px; }
  .pro-nav:has(> a:only-child) { display: none; }
  .pro-code-bar .pro-dots { display: none; }
  .pro-code-bar { gap: 8px; padding-left: 8px; }
  .pro-table table { min-width: calc(var(--cols, 5) * 108px); font-size: 14px; }
  .pro-table th, .pro-table td { padding: 12px 12px; }
  .pro-top-end { gap: 8px; }
  .pro-top-end .pro-btn { display: none; }
  .pro-facts { grid-template-columns: 1fr; }
  .pro-facts > div, .pro-facts > div:nth-child(odd), .pro-facts > div:nth-child(even) { padding-left: 4px; padding-right: 4px; border-left: 0; }
  .theme-model-hub .pro-facts > div, .theme-model-hub .pro-facts > div:nth-child(even) { padding: 14px 18px; }
  .theme-model-hub .pro-facts > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .pro-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .pro-timeline > li { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; }
  .pro-timeline > li::before { left: 13px; }
  .pro-timeline time { grid-column: 2; grid-row: 1; text-align: left; }
  .pro-tl-dot { grid-column: 1; grid-row: 1 / span 2; }
  .pro-tl-body { grid-column: 2; }
  .pro-versus { grid-template-columns: 1fr; }
  .pro-vs-badge { justify-self: center; margin: -14px 0; }
  .theme-versus .pro-vs-card { box-shadow: 4px 4px 0 var(--vs); }
  .pro-verdict { grid-template-columns: 1fr; gap: 6px; }
  .pro-rank { grid-template-columns: 1fr; padding: 22px; }
  .pro-rank-n { text-align: left; font-size: 2rem; }
  .pro-proscons { grid-template-columns: 1fr; }
  .pro-rank-foot .pro-link { margin-left: 0; }
  .pro-faq summary { grid-template-columns: 30px 1fr 24px; }
  .pro-faq-a { padding: 0 0 22px 42px; }
  .pro-search { max-width: none; margin-left: 0; }
  .pro-steps > li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .pro-step-n { width: 44px; height: 44px; }
  .pro-steps > li:not(:last-child)::before { left: 21px; top: 50px; }
  .pro-foot-top { grid-template-columns: 1fr; gap: 28px; }
  .pro-cta { padding: 28px 24px; }
  .pro .tool { padding: 16px; }
  .pro-callout { grid-template-columns: 1fr; }
  .theme-release-tracker .pro-status { transform: none; }
}