/* ===========================================================================
   Steam Data API — homepage. WARM MINIMAL MONO edition.
   The homepage carries its own stylesheet on purpose: the redesign (2026-08)
   moved / to a calm, warm, editorial look while docs/pricing/blog still run
   on site.css. Variable NAMES are kept identical to site.css so the shared
   scripts (theme.js, explore widget, plan cards) and their inline styles work
   unchanged — only the values differ.

   Principles: one typeface (mono), hairline borders, NO offset shadows, no
   marquees, one warm accent. Every section is a quiet fieldset box — same
   rhythm top to bottom. Toggle via html[data-theme] exactly like site.css.
   =========================================================================== */
:root {
  /* NEUTRAL base (user call 2026-08-12: the brown-tinted canvas read as "a
     yellow filter") — all warmth now lives in the accent alone. */
  --bg: #0a0a0a;
  --bg-2: #101010;
  --panel: #0e0e0e;
  --panel-2: #181818;
  --code-bg: #0c0c0c;
  --code-head: #161616;
  --ink: #e8e8e8;
  --ink-2: #c9c9c9;
  --head: #f6f6f6;
  --muted: #9a9a9a;
  --muted-2: #646464;
  --line: #1e1e1e;
  --line-2: #343434;
  /* the one accent: warm amber */
  --accent: #ef9243;
  --accent-2: #f6a75f;
  --accent-contrast: #1b1005;
  --accent-soft: rgba(239, 146, 67, .09);
  /* status only */
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --shadow: none;
  --shadow-sm: none;
  --glow: 0 0 0 1px var(--accent);
  --scanline: transparent;
  --mono: "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --maxw: 1080px;
  --radius: 6px;
}
html[data-theme="light"] {
  --bg: #fbfbfa;
  --bg-2: #f3f3f1;
  --panel: #ffffff;
  --panel-2: #f1f1ef;
  --code-bg: #121212;
  --code-head: #1c1c1c;
  --ink: #262626;
  --ink-2: #454545;
  --head: #101010;
  --muted: #767676;
  --muted-2: #a0a0a0;
  --line: #e9e9e6;
  --line-2: #cfcfcb;
  --accent: #c95f08;
  --accent-2: #b05205;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(201, 95, 8, .07);
  --green: #16a34a;
  --amber: #b45309;
  --red: #dc2626;
  --glow: 0 0 0 1px var(--accent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
::selection { background: var(--accent); color: var(--accent-contrast); }
body {
  margin: 0;
  font-family: var(--mono);
  color: var(--ink);
  line-height: 1.7;
  font-size: 15px;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted-2); }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
code, kbd, pre { font-family: var(--mono); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--muted); }
.center { text-align: center; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.3px; line-height: 1.25; color: var(--head); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Blinking terminal cursor (brand mark) */
.blk, .cursor { display: inline-block; width: .55ch; height: 1em; background: var(--accent); margin-left: 3px; transform: translateY(1px); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%,50% { opacity: 1 } 50.01%,100% { opacity: 0 } }

/* ── Announcement bar ─────────────────────────────────── */
.announce { background: var(--bg-2); color: var(--ink-2); font-size: 13px; text-align: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.announce .tag { color: var(--accent-contrast); background: var(--accent); font-weight: 700; margin-right: 6px; padding: 1px 7px; border-radius: 3px; }
.announce a { color: var(--head); }

/* ── Nav ──────────────────────────────────────────────── */
header.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 22px; height: 60px; }
.brand { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 700; font-size: 17px; color: var(--head); letter-spacing: -.5px; text-decoration: none; }
.brand:hover { color: var(--head); text-decoration: none; }
.brand .dim { color: var(--muted); }
.nav .links { display: flex; gap: 20px; margin-left: 10px; }
.nav .links a { color: var(--muted); font-size: 14px; text-decoration: none; }
.nav .links a:hover { color: var(--ink); text-decoration: none; }
.nav .spacer { flex: 1; }
.nav .nav-right { display: flex; align-items: center; gap: 14px; }
.nav .nav-right a.text { color: var(--muted); font-size: 14px; text-decoration: none; white-space: nowrap; }
.nav .nav-right a.text:hover { color: var(--ink); text-decoration: none; }
.theme-toggle {
  background: transparent; color: var(--muted); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 5px 10px; font-family: var(--mono); font-size: 12.5px;
  cursor: pointer; line-height: 1.4; white-space: nowrap;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
.nav .nav-right a.nav-ic { display: inline-flex; align-items: center; justify-content: center; height: 30px; flex-shrink: 0; color: var(--muted); text-decoration: none; }
.nav .nav-right a.nav-ic svg { display: block; }
.nav .nav-right a.nav-ic:hover { color: #5865f2; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius); font-weight: 700; font-size: 14px;
  font-family: var(--mono); border: 1px solid var(--line-2); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s; white-space: nowrap;
  text-decoration: none; line-height: 1;
}
.btn-primary, .btn-accent { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.btn-primary:hover, .btn-accent:hover { background: var(--accent-2); color: var(--accent-contrast); border-color: var(--accent-2); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-lg { padding: 13px 24px; font-size: 15px; }

/* ── Fieldset boxes — THE section container ───────────── */
fieldset.box {
  position: relative; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--panel); padding: 26px 28px 26px; margin: 0;
}
fieldset.box > legend {
  font-size: 12.5px; color: var(--accent); padding: 0 9px; margin-left: 4px;
  font-weight: 700; letter-spacing: .08em; text-transform: lowercase;
}
.box-lead { color: var(--muted); font-size: 14px; margin: 0 0 22px; max-width: 74ch; }
.box-lead b, .box-lead strong { color: var(--ink); }

/* Sections: one box per section, even vertical rhythm. */
main section { padding: 22px 0 0; }
main section:first-of-type { padding-top: 0; }
main section:last-of-type { padding-bottom: 26px; }

/* ── Hero ─────────────────────────────────────────────── */
.hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; background: var(--bg); }
.hero-inner { padding: 72px 0 58px; max-width: 820px; }
.hero h1 { font-size: clamp(30px, 4.6vw, 50px); margin: 0 0 20px; letter-spacing: -1.4px; }
.hero h1 .hl { color: var(--accent); }
.hero p.sub { font-size: clamp(15px, 1.8vw, 16.5px); color: var(--muted); max-width: 62ch; margin: 0 0 30px; }
.hero p.sub b { color: var(--ink); font-weight: 600; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 30px; font-size: 12.5px; color: var(--muted-2); }
.hero-meta b { color: var(--accent); font-weight: 700; }
.hero-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.hero-note b { color: var(--ink); font-weight: 600; }

/* ── About box ────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; align-items: start; }
.about-grid > div > p { margin: 0 0 16px; color: var(--ink-2); font-size: 14.5px; }
.about-grid b { color: var(--head); }
.ab-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ab-bullets li { position: relative; padding-left: 22px; font-size: 14px; color: var(--muted); }
.ab-bullets li::before { content: "+"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }
.ab-bullets li b { color: var(--ink); font-weight: 600; }
/* "start free" side card */
.try-card { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-2); padding: 22px; }
.try-card h3 { margin: 0 0 8px; font-size: 15px; }
.try-card p { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
.try-card .btn { width: 100%; }
.try-card .alt { display: block; margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ── Live indicator ───────────────────────────────────── */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); animation: pulse 1.8s ease-in-out infinite; vertical-align: 1px; margin-right: 6px; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

/* ── Explore widget (live market board) ───────────────── */
.explore-games { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.egame { background: transparent; color: var(--muted); border: none; border-right: 1px solid var(--line-2); padding: 6px 15px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.egame:last-child { border-right: none; }
.egame.active { background: var(--accent); color: var(--accent-contrast); }

.ex-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.ex-title { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 200px; }
.ex-thumb { width: 68px; height: 51px; object-fit: contain; flex: 0 0 auto; }
.ex-title-txt { min-width: 0; }
.explore-label { font-size: 11px; color: var(--muted-2); text-transform: lowercase; letter-spacing: .03em; }
.explore-name { font-size: 17px; font-weight: 700; color: var(--head); margin-top: 2px; letter-spacing: -.3px; }

.ex-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 12px; }
.ex-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; background: var(--bg-2); }
.ex-card.best { border-color: var(--accent); }
.ex-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ex-src { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ex-best { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: var(--accent-contrast); padding: 2px 6px; border-radius: 3px; }
.ex-ask { font-size: 22px; font-weight: 700; letter-spacing: -.6px; color: var(--head); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ex-ask .na { font-size: 15px; color: var(--muted-2); }
.ex-bar { height: 3px; background: var(--line); border-radius: 2px; margin: 10px 0 8px; overflow: hidden; }
.ex-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; opacity: .75; }
.ex-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ex-meta .na { color: var(--muted-2); }
.ex-upd { font-size: 10.5px; color: var(--muted-2); margin-top: 7px; }
.ex-phases { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.ex-phases-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ex-phases-cap { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ex-phases-note { font-size: 11.5px; color: var(--muted-2); }
.ex-phases-note b { color: var(--ink); }
.ex-phase-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; }
.ex-phase { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--bg-2); font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; transition: border-color .12s; }
.ex-phase:hover { border-color: var(--muted-2); }
.ex-phase.on { border-color: var(--accent); box-shadow: var(--glow); }
.ex-phase-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.ex-phase-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(128, 128, 128, .4); }
.ex-phase-name { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.ex-phase-x { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; background: var(--accent); color: var(--accent-contrast); padding: 1px 5px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.ex-phase-price { font-size: 15px; font-weight: 700; color: var(--head); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.ex-phase-meta { margin-top: 4px; font-size: 10.5px; color: var(--muted-2); }
.ex-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 13px; }
.ex-foot b { color: var(--accent); }
.na { color: var(--muted-2); }

/* Price-history chart */
.ex-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ex-chart-cap { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); }
.ex-chart-cap b { color: var(--ink); }
.ex-range { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.ex-range button { background: transparent; color: var(--muted); border: 0; padding: 5px 12px; font: 600 12px/1 var(--mono, inherit); cursor: pointer; letter-spacing: .02em; }
.ex-range button + button { border-left: 1px solid var(--line-2); }
.ex-range button:hover { color: var(--ink); background: var(--accent-soft); }
.ex-range button.on { background: var(--accent); color: var(--accent-contrast); }
.ex-chart { margin: 0 0 20px; }
.ex-chart-plot { position: relative; }
.ex-chart-svg { width: 100%; height: auto; display: block; }
.exg-grid { stroke: var(--line); stroke-width: 1; }
.exg-ylab { fill: var(--muted-2); font-size: 10px; font-family: var(--mono, monospace); }
.exh-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; transition: opacity .08s; }
.exh-dot { pointer-events: none; }
.ex-tip { position: absolute; top: 4px; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 10px; font-size: 12px; min-width: 128px; transition: opacity .1s; z-index: 3; }
.ex-tip-d { font-size: 11px; color: var(--muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.ex-tip-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 0; }
.ex-tip-row span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ex-tip-row i { width: 9px; height: 3px; border-radius: 2px; display: inline-block; }
.ex-tip-row b { color: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-leg { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.ex-leg-i { display: inline-flex; align-items: center; gap: 7px; }
.ex-leg-i i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.ex-leg-i b { color: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.ex-chart-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ex-chart-load { padding: 60px 0; text-align: center; font-size: 13px; }

/* ── What we do best (three highlight cards) ──────────── */
.best-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.best-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 18px; display: flex; flex-direction: column; }
.best-card h3 { font-size: 14.5px; margin: 16px 0 6px; }
.best-card p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.best-card p b { color: var(--ink); font-weight: 600; }
.best-link { margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.best-link:hover { color: var(--accent-2); text-decoration: underline; }
/* the visual panel every card leads with — fixed height so the row lines up */
.best-viz { height: 132px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: grid; place-items: center; padding: 12px; overflow: hidden; }
/* marketplaces: real favicons */
.bv-mkts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; max-width: 240px; }
.bv-mkts img { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; }
.bv-more { font-size: 11px; font-weight: 700; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 6px; padding: 6px 8px; }
/* doppler phases: four renders with phase-coloured prices */
.bv-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.bv-phases figure { margin: 0; text-align: center; }
.bv-phases img { width: 100%; max-width: 64px; height: 52px; object-fit: contain; display: block; margin: 0 auto; }
.bv-phases figcaption { margin-top: 5px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); padding-top: 5px; }
/* inventory: mini portfolio — endpoint line, two priced rows, bold total */
.bv-inv { width: 100%; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; }
.bv-id { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--muted-2); letter-spacing: .03em; }
.bv-id .m { color: var(--accent-contrast); background: var(--accent); font-size: 8.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: .04em; }
.bv-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bv-row img { width: 28px; height: 22px; object-fit: contain; flex: none; }
.bv-row .bv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.bv-float { flex: none; font-size: 9px; color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.bv-float.ph { color: #5b8fe0; border-color: color-mix(in srgb, #5b8fe0 40%, transparent); }
.bv-row b { color: var(--head); flex: none; margin-left: auto; }
.bv-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line-2); padding-top: 9px; color: var(--muted); }
.bv-total b { color: var(--accent); font-size: 14.5px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
@media (max-width: 880px) {
  .best-grid { grid-template-columns: 1fr; }
}

/* ── Supported marketplaces ───────────────────────────── */
.mkt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 26px; }
.mkt-head { display: flex; align-items: center; gap: 13px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.mkt-game-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-2); }
.mkt-game-ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mkt-game-txt { min-width: 0; }
.mkt-game-txt h3 { margin: 0; font-size: 15.5px; color: var(--head); }
.mkt-sub { display: block; font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.mkt-count { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.mkt-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mkt-item { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); transition: border-color .14s ease; }
.mkt-item:hover { border-color: var(--accent); }
.mkt-ico { display: block; width: 26px; height: 26px; object-fit: contain; border-radius: 5px; opacity: .92; transition: opacity .14s ease; }
.mkt-item:hover .mkt-ico { opacity: 1; }
.mkt-name { font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.3; transition: color .14s ease; }
a.mkt-name { text-decoration: none; }
a.mkt-name:hover { text-decoration: none; }
.mkt-item:hover .mkt-name { color: var(--ink); }
.mkt-foot { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.mkt-foot b { color: var(--ink); }
@media (max-width: 560px) {
  .mkt-cards { grid-template-columns: 1fr; }
  .mkt-item { padding: 12px 6px; }
  .mkt-name { font-size: 11px; }
}

/* ── Quick start (terminal) ───────────────────────────── */
.term { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--code-bg); overflow: hidden; }
.term .bar { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: var(--code-head); border-bottom: 1px solid rgba(255,255,255,.06); }
.term .bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #333333; }
.term .bar .dot:first-child { background: var(--accent); opacity: .8; }
.term .bar .name { margin-left: 8px; color: #8a8a8a; font-size: 12px; }
.term pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.75; color: #e4e4e4; }
/* token colors on the always-dark code panel — neutral grays, orange strings */
.tok-c { color: #6a6a6a; }            /* comment */
.tok-k { color: #c2c2c2; }            /* key */
.tok-s { color: #e8a262; }            /* string */
.tok-n { color: #f2f2f2; font-weight: 700; }  /* number / emphasis */
.qs-tabs { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.qs-steps { display: flex; flex-direction: column; gap: 14px; margin: 0 0 20px; padding: 0 0 0 2px; list-style: none; counter-reset: qs; }
.qs-steps li { position: relative; padding-left: 34px; font-size: 14px; color: var(--muted); counter-increment: qs; }
.qs-steps li::before { content: counter(qs, decimal-leading-zero); position: absolute; left: 0; top: 1px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.qs-steps li b { color: var(--ink); font-weight: 600; }
.qs-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px; align-items: start; }
/* min-width:0 kills the grid-item auto-min-width: a wide code line must make
   the <pre> SCROLL, never stretch its column and squeeze the steps. A fixed
   pre height keeps the box from jumping when tabs swap content. */
.qs-grid > * { min-width: 0; }
#qsPre { height: 440px; overflow: auto; }

/* ── What people build ────────────────────────────────── */
.use-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.use-row { display: flex; flex-direction: column; gap: 4px; padding: 15px 2px; border-bottom: 1px dashed var(--line); }
.use-row h3 { margin: 0; font-size: 14px; display: flex; align-items: baseline; gap: 10px; }
.use-row h3 .idx { color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
.use-row p { margin: 0; font-size: 13px; color: var(--muted); }
.use-row p b { color: var(--ink); font-weight: 600; }
.use-ep { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11.5px; color: var(--muted-2); }
.use-ep .m { color: var(--accent-contrast); background: var(--accent); font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; letter-spacing: .04em; }
@media (min-width: 821px) {
  /* last row of each column loses its divider */
  .use-list .use-row:nth-last-child(-n+2) { border-bottom: none; }
}

/* ── Pricing ──────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 980px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .price-grid { grid-template-columns: 1fr; } }
.plan { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 22px; display: flex; flex-direction: column; }
.plan.popular { border-color: var(--accent); }
.plan .tag-popular { position: absolute; top: -11px; left: 16px; background: var(--accent); color: var(--accent-contrast); font-size: 10.5px; font-weight: 700; padding: 2px 10px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; }
.plan .pname { font-size: 15.5px; font-weight: 700; color: var(--head); }
.plan .price { font-size: 32px; font-weight: 700; letter-spacing: -1.5px; margin: 12px 0 4px; color: var(--head); }
.plan .price span { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 14px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.plan li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-2); }
.plan li .ok { color: var(--green); font-weight: 700; }
.plan li b { color: var(--head); }
.plan li.dim { color: var(--muted-2); }
.plan li.dim .na { color: var(--muted-2); font-weight: 700; }
.plan .btn { width: 100%; margin-top: auto; }
.price-foot { margin-top: 20px; text-align: center; }

/* ── FAQ ──────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px dashed var(--line); }
.faq details:last-child { border-bottom: none; }
.faq summary { cursor: pointer; font-weight: 700; padding: 15px 4px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--ink); font-size: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "[+]"; color: var(--muted-2); font-size: 13px; font-weight: 700; flex: none; }
.faq details[open] summary { color: var(--head); }
.faq details[open] summary::after { content: "[-]"; color: var(--accent); }
.faq p { color: var(--muted); margin: 0 4px 16px; font-size: 13.5px; }
.faq p b, .faq p strong { color: var(--ink); }

/* ── CTA band ─────────────────────────────────────────── */
.cta-band { border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); padding: 44px 30px; text-align: center; }
.cta-band h2 { font-size: clamp(22px, 3.4vw, 30px); margin: 0 0 10px; letter-spacing: -.8px; }
.cta-band h2 .hl { color: var(--accent); }
.cta-band p { color: var(--muted); margin: 0 0 22px; font-size: 14.5px; }

/* ── Footer ───────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 34px; }
footer.site .wrap { padding-top: 38px; padding-bottom: 30px; }
/* One grid row, no wrap-orphans: the brand gets a wide first column, the
   10-link marketplaces column flows in TWO columns so it can't stretch the
   whole footer's height (the old flex layout wrapped Account onto its own
   row and left a field of dead space under the short columns). */
.foot-grid { display: grid; grid-template-columns: 1.9fr 1fr 1.45fr 1.05fr .9fr; gap: 30px 36px; }
.foot-brand { max-width: 280px; }
.foot-brand .brand-logo { height: 24px; }
.foot-tagline { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 14px 0 0; max-width: 230px; }
.foot-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.foot-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); margin: 2px 0 12px; }
.foot-col a { display: block; color: var(--muted); font-size: 13px; padding: 4px 0; text-decoration: none; transition: color .12s; }
.foot-col a:hover { color: var(--accent); text-decoration: none; }
.foot-bottom { color: var(--muted-2); font-size: 12.5px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* One quiet line: label left, card marks right — not a stand-alone band. */
.pay-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 36px; }
.pay-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.pay-icons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-ic { height: 22px; width: auto; display: block; border-radius: 4px; opacity: .8; transition: opacity .15s; }
.pay-chip { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; background: #fff; border-radius: 4px; opacity: .8; transition: opacity .15s; }
.pay-chip img { height: 12px; width: auto; display: block; }
.pay-row:hover .pay-ic, .pay-row:hover .pay-chip { opacity: 1; }
.foot-links { display: inline-flex; align-items: center; gap: 18px; margin-left: auto; }
.foot-links a { color: var(--muted); text-decoration: none; transition: color .12s; }
.foot-links a:hover { color: var(--accent); text-decoration: none; }
.foot-links .foot-ic { display: inline-flex; color: var(--muted-2); }
.foot-links .foot-ic:hover { color: var(--accent); }
.foot-links svg { display: block; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 820px) {
  .nav .links { display: none; }
  .hero-inner { padding: 52px 0 46px; }
  .about-grid, .qs-grid { grid-template-columns: 1fr; gap: 24px; }
  .use-list { grid-template-columns: 1fr; }
  .use-list .use-row:last-child { border-bottom: none; }
  fieldset.box { padding: 20px 18px; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-brand, .foot-wide { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .pay-label { width: 100%; }
}
@media (max-width: 700px) {
  /* Keep the top bar to ONE row on phones: the Discord icon moves to the
     footer-only, everything else tightens. */
  .nav .nav-right a.nav-ic { display: none; }
  .nav-inner { gap: 12px; }
  .nav .nav-right { gap: 9px; }
  .brand { font-size: 15.5px; }
  .theme-toggle { padding: 5px 8px; }
  .nav .btn-sm { padding: 7px 10px; }
}

/* ── Hero: floating price card over a ghost catalog ───── */
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 34px; align-items: center; max-width: none; }
.skinstage { position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center; perspective: 1100px; }
.skinstage::before { /* soft warm glow behind the card */
  content: ""; position: absolute; width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%); pointer-events: none;
}

/* The tilted plane both the skeleton grid and the data card live on — sharing
   one rotation is what makes the card read as a grid cell brought forward. The
   card sits strictly INSIDE the grid bounds (cells visible on all four sides),
   so it pops out OF the catalog rather than hovering on top of it. */
.stage-plane { position: relative; transform: rotateX(16deg) rotateZ(-7deg); transform-style: preserve-3d; }
.skel-grid { display: grid; grid-template-columns: repeat(4, 118px); gap: 11px; }
.skel { height: 116px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); padding: 9px; display: flex; flex-direction: column; gap: 7px; opacity: .6; }
.skel .sk-img { flex: 1; display: grid; place-items: center; min-height: 0; }
.skel .sk-img img { width: 78%; height: auto; max-height: 100%; object-fit: contain; opacity: .35; filter: saturate(.6); }
/* skeleton loading bars — a very slow, low-contrast shimmer */
.sk-line { height: 6px; border-radius: 3px; flex: none;
  background: linear-gradient(90deg, var(--line) 25%, var(--line-2) 50%, var(--line) 75%);
  background-size: 200% 100%; animation: skShimmer 3.2s linear infinite; }
.sk-line.short { width: 55%; }
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.skincard {
  position: absolute; z-index: 1; left: 112px; top: 64px; width: 292px; padding: 14px 16px 12px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 97%, transparent);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .8);
  /* lifted off the plane toward the viewer; the bob lives in the keyframes
     because `animation` owns `transform`. */
  animation: scFloat3d 9s ease-in-out infinite;
}
html[data-theme="light"] .skincard { box-shadow: 0 30px 60px -30px rgba(60, 35, 5, .45); }
.sc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sc-name { font-weight: 700; font-size: 14.5px; color: var(--head); letter-spacing: -.2px; }
.sc-skin { color: var(--muted); font-weight: 600; }
.sc-wear { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 8px; }
.sc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green); }
.sc-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: scPulse 2s ease-in-out infinite; }
.sc-weap { position: relative; width: 84%; margin: 4px auto 0; }
/* Warm rim-light traced on the sprite's own silhouette via drop-shadows. */
.sc-knife {
  display: block; width: 100%; height: auto; position: relative;
  filter: drop-shadow(0 0 12px rgba(239, 146, 67, .22)) drop-shadow(0 0 34px rgba(239, 146, 67, .10)) drop-shadow(0 22px 26px rgba(0, 0, 0, .45));
  animation: knifeFloat 9s ease-in-out infinite;
}
html[data-theme="light"] .sc-knife {
  filter: drop-shadow(0 0 12px rgba(120, 60, 5, .14)) drop-shadow(0 16px 20px rgba(60, 35, 5, .25));
}
.sc-price { display: flex; flex-direction: column; margin-top: 2px; }
.sc-plabel { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); }
.sc-price b { font-size: 30px; font-weight: 700; letter-spacing: -1px; color: var(--head); line-height: 1.15; }
.sc-spark { display: block; width: 100%; height: 40px; margin-top: 8px; color: var(--accent); }
.sc-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 10px; color: var(--muted-2); }

/* Detached stat chips bobbing around the card at offset phases. */
.fchip {
  position: absolute; z-index: 2; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 11px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .6);
  animation: scFloat 8s ease-in-out infinite;
}
.fchip b { font-size: 13px; letter-spacing: 0; color: var(--head); }
.fc-a { top: 7%; right: -2%; animation-delay: -1.6s; }
.fc-b { bottom: 4%; left: -3%; animation-delay: -3.1s; }
.fc-c { top: 40%; left: -6%; animation-delay: -4.6s; border-color: var(--accent); color: var(--accent); }
.fc-c b { color: var(--accent); }

/* Motion is deliberately subtle (user call 2026-08-12: "moves too much"): the
   plane tilt stays CONSTANT — only a slow, small lift along the plane normal.
   No rotation deltas, that's what read as wobble. */
@keyframes scFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes scFloat3d {
  0%, 100% { transform: translateZ(40px); }
  50% { transform: translateZ(54px); }
}
@keyframes knifeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes scPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .skinstage { min-height: 0; margin-top: 40px; }
}
@media (max-width: 600px) {
  .fchip { display: none; }
  /* 3×4 plane so grid + card fit a phone width, card still inside the grid */
  .skel-grid { grid-template-columns: repeat(3, 92px); gap: 9px; }
  .skel { height: 100px; }
  .skel:nth-child(n+13) { display: none; }
  .skincard { left: 14px; top: 34px; width: min(264px, 92%); padding: 12px 13px 10px; }
  .sc-price b { font-size: 24px; }
  .sc-foot span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blk, .cursor, .live-dot, .sc-live i, .sk-line { animation: none; }
  .skincard, .sc-knife, .fchip { animation: none; }
  .skincard { transform: translate(-50%, -52%) translateZ(46px); }
  html { scroll-behavior: auto; }
}

/* ── Sitewide promo — a GREEN coupon ticket, deliberately distinct from the
   amber accent so a sale reads as its own event: dashed cut-out border,
   punched perforation notches, and a slow light sweep. ─────────────────── */
.promo-banner {
  position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px dashed var(--green); border-radius: 8px;
  background:
    linear-gradient(110deg, transparent 32%, color-mix(in srgb, var(--green) 14%, transparent) 50%, transparent 68%) no-repeat,
    color-mix(in srgb, var(--green) 8%, transparent);
  background-size: 250% 100%, auto;
  animation: promoSweep 6s linear infinite;
  padding: 12px 24px; margin: 0 0 18px; font-size: 13.5px;
}
@keyframes promoSweep { from { background-position: 230% 0, 0 0; } to { background-position: -130% 0, 0 0; } }
/* coupon perforation: two punched notches on the ticket edges */
.promo-banner::before, .promo-banner::after {
  content: ""; position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 1px dashed var(--green); transform: translateY(-50%);
}
.promo-banner::before { left: -8px; }
.promo-banner::after { right: -8px; }
.promo-banner .tag { background: var(--green); color: #04230f; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 3px; letter-spacing: .06em; }
html[data-theme="light"] .promo-banner .tag { color: #ffffff; }
.promo-banner b { color: var(--green); }
.promo-banner .pcode { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.price .cut { color: var(--muted-2); text-decoration: line-through; font-size: .52em; font-weight: 600; margin-right: 8px; letter-spacing: 0; }
.promo-note { font-size: 11.5px; color: var(--green); font-weight: 600; margin: 2px 0 4px; }
@media (prefers-reduced-motion: reduce) { .promo-banner { animation: none; } }

/* ── 2026 brand logo (LOGO_1 light / LOGO_2 dark) ─────────────────── */
.brand-logo { display: block; height: 27px; width: auto; }
.brand-logo-light { display: none; }
html[data-theme="light"] .brand-logo-dark { display: none; }
html[data-theme="light"] .brand-logo-light { display: block; }