/* ==========================================================================
   TAKUMIS — FORGE base
   The dark, product-first shell shared by the three Forge variants.
   Loaded after takumis-base.css, which supplies the Hello.Purple tokens.

   Inherited non-negotiables: cream is still the light ground (used here as a
   relief block), blocks are sharp, buttons are pills, there are no shadows,
   and Greycliff never goes above 600.
   ========================================================================== */

:root {
  --dk-surface:   #33234F;
  --dk-raised:    #3C2B5A;
  --dk-sunken:    #21153D;
  --dk-line:      #4A3A6B;
  --dk-line-soft: #3E2F5C;
  --dk-text:      #EFE9DC;
  --dk-muted:     #B9AFC9;
  --dk-subtle:    #9287A6;

  /* Chart steps re-picked for the berry surface — validated against it,
     never an automatic flip of the light set. */
  --chart-1-dk: #8B5CF6;
  --chart-2-dk: #D5713F;
  --chart-grid-dk: #4A3A6B;
}

body { background: var(--hp-midnight-berry); color: var(--dk-text); }
::selection { background: var(--hp-violet-500); color: var(--hp-cream-white); }

/* ==========================================================================
   Nav — one menu for the whole site.
   Identical markup on every page; only the current-page link differs.
   Under 900px it collapses into a disclosure panel rather than vanishing.
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(42, 27, 78, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dk-line-soft);
}
.nav-inner { display: flex; align-items: center; gap: var(--space-6); height: 66px; }

.nav-menu { margin-left: auto; display: flex; align-items: center; gap: var(--space-8); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--dk-muted); white-space: nowrap; }
.nav-links a:hover { color: var(--hp-cream-white); }
/* Plain text links (no class) lighten on hover on the dark ground; takumis-base darkens them,
   which is right only on cream. Buttons and nav links keep their own hovers. */
:where(main, .disclaimer) a:not([class]):hover { color: var(--hp-lavender-200); }
.nav-links a[aria-current="page"] { color: var(--hp-cream-white); }
.nav-cta { display: flex; align-items: center; gap: var(--space-3); }

/* Human / AI view switch (assets/ai-view.js shows it; hidden without JS). */
.view-switch { display: inline-flex; border: 1px solid var(--dk-line); border-radius: var(--radius-control); overflow: hidden; flex: none; }
.view-switch[hidden] { display: none; }
.view-switch button {
  font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); line-height: 1;
  padding: 10px 14px; background: transparent; color: var(--dk-muted); border: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.view-switch button + button { border-left: 1px solid var(--dk-line); }
.view-switch button:hover { color: var(--hp-cream-white); }
.view-switch button[aria-pressed="true"] { background: var(--hp-cream-white); color: var(--hp-midnight-berry); }
.view-switch button:focus-visible { outline: 2px solid var(--hp-violet-500); outline-offset: -2px; }

/* The AI view: the site as an agent reads it. */
.ai-view { padding: var(--space-16) 0 var(--space-20); }
.ai-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); flex-wrap: wrap;
  padding-bottom: var(--space-8); margin-bottom: var(--space-10); border-bottom: 1px solid var(--dk-line-soft); }
.ai-head > div { min-width: 0; max-width: 60ch; }
.ai-intro { color: var(--dk-muted); font-size: var(--fs-body-lg); margin: 0 0 var(--space-5); }
.ai-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--dk-subtle); }
.ai-files a { color: var(--hp-cream-white); text-decoration: underline dashed; text-underline-offset: 4px; }
.ai-files a:hover { color: var(--hp-lavender-200); }
.ai-md { margin: 0; max-width: 88ch; font-family: var(--font-mono); font-size: var(--fs-body-sm); line-height: 1.8;
  color: var(--dk-text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Hamburger */
.nav-toggle {
  display: none; margin-left: auto; width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--dk-line); border-radius: var(--radius-control);
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--dk-text); transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-inner { height: 60px; gap: var(--space-4); }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--hp-midnight-berry);
    border-bottom: 1px solid var(--dk-line);
    padding: var(--space-2) 0 var(--space-5);
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 15px var(--space-6); border-bottom: 1px solid var(--dk-line-soft); font-size: var(--fs-body); }
  .nav-cta { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-5) var(--space-6) 0; }
  .nav-cta .btn { width: 100%; }
  .view-switch { align-self: flex-start; margin: var(--space-5) var(--space-6) 0; }
}

/* The same compact bar above 900px, whenever the full bar doesn't fit: longer
   labels (Japanese), wider fonts (Hiragino on a Mac) or browser zoom. nav.js
   measures the bar and sets .is-compact; the media query above still covers
   phones without JavaScript and before the script runs. Keep the two blocks,
   and the two pairs below, in step (site.test.ts checks they match). */
.nav.is-compact .nav-inner { height: 60px; gap: var(--space-4); }
.nav.is-compact .nav-toggle { display: flex; }
.nav.is-compact .nav-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0; margin: 0;
  background: var(--hp-midnight-berry);
  border-bottom: 1px solid var(--dk-line);
  padding: var(--space-2) 0 var(--space-5);
  display: none;
}
.nav.is-compact .nav-menu.open { display: flex; }
.nav.is-compact .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
.nav.is-compact .nav-links a { padding: 15px var(--space-6); border-bottom: 1px solid var(--dk-line-soft); font-size: var(--fs-body); }
.nav.is-compact .nav-cta { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-5) var(--space-6) 0; }
.nav.is-compact .nav-cta .btn { width: 100%; }
.nav.is-compact .view-switch { align-self: flex-start; margin: var(--space-5) var(--space-6) 0; }

/* ==========================================================================
   Theme switch
   A pill, because pills are the only round things here besides the dot. Icon
   only — the label is on the button, not next to it, so it stays quiet enough
   to sit beside the CTA without competing with it. It shows the theme you
   would get by pressing it: a sun on the dark site, a moon on the light one.

   Order is set explicitly rather than left to source order: on desktop it has
   to land after the nav menu, on mobile between the logo and the hamburger,
   and it is one element in both cases rather than two that can drift apart.
   ========================================================================== */
.theme-toggle {
  order: 3; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; cursor: pointer;
  border: 1px solid var(--dk-line); border-radius: var(--radius-pill);
  color: var(--dk-muted);
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.theme-toggle:hover { color: var(--hp-cream-white); border-color: var(--hp-violet-500); background: rgba(139,92,246,.14); }
.theme-toggle:active { transform: translateY(1px); }   /* press is 1px, never a lift */
.theme-toggle svg { display: block; }
.theme-toggle .i-sun  { display: block; }
.theme-toggle .i-moon { display: none; }

@media (max-width: 900px) {
  /* Stays outside the disclosure panel: changing the theme should not cost a
     tap on the hamburger first. */
  .theme-toggle { order: 2; margin-left: auto; }
  .nav-toggle { order: 3; margin-left: 0; }
}
.nav.is-compact .theme-toggle { order: 2; margin-left: auto; }
.nav.is-compact .nav-toggle { order: 3; margin-left: 0; }

/* ==========================================================================
   Language switch
   A chip-sized pill right after the theme switch (40px tall, forge-line
   border, muted 13px label, the theme switch's hover), linking to this page
   in the other language. It is in the markup twice: in the bar, and in the
   disclosure panel for phones under 360px, where the bar has no room left.

   Every rule that moves something else keys off `:not([hidden])`, so a
   switch given `hidden` (a new language held back before its launch) leaves
   the nav laid out exactly as it was without one.
   ========================================================================== */
.lang-switch {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 var(--space-3);
  border: 1px solid var(--dk-line); border-radius: var(--radius-pill);
  color: var(--dk-muted);
  font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1; white-space: nowrap;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.lang-switch:hover { color: var(--hp-cream-white); border-color: var(--hp-violet-500); background: rgba(139,92,246,.14); }
.lang-switch:active { transform: translateY(1px); }   /* press is 1px, never a lift */
/* Ordered like the theme switch, and 8px from it rather than the bar's 24px:
   one pair of controls. */
.nav-inner > .lang-switch { order: 3; margin-left: calc(var(--space-2) - var(--space-6)); }
.nav-menu .lang-switch { display: none; }
.nav .lang-switch[hidden] { display: none; }

/* Just above the breakpoint the bar is full. While the switch shows, the
   links, the Human / AI switch and the call to action close up to make room. */
@media (900px < width < 1000px) {
  .lang-switch:not([hidden]) ~ .nav-menu { gap: var(--space-6); margin-right: calc(var(--space-4) - var(--space-6)); }
  .lang-switch:not([hidden]) ~ .nav-menu .nav-links { gap: var(--space-4); }
}

@media (max-width: 900px) {
  /* Logo · theme · language · hamburger, 8px apart on the right. */
  .nav-inner > .lang-switch { order: 2; margin: 0 calc(var(--space-2) - var(--space-4)); }
}
.nav.is-compact .nav-inner > .lang-switch { order: 2; margin: 0 calc(var(--space-2) - var(--space-4)); }

/* Japanese labels are longer (閲覧版（人間）, Takumisでできること), so the
   full Japanese bar spaces its items 16px apart instead of 24–32px. That fits
   it in the widest container (1200px) even with full-width kana (Hiragino on
   a Mac); below that, nav.js switches to the compact bar. The language switch
   keeps its 8px from the theme switch. */
@media (min-width: 901px) {
  :root:lang(ja) .nav:not(.is-compact) .nav-inner,
  :root:lang(ja) .nav:not(.is-compact) .nav-menu,
  :root:lang(ja) .nav:not(.is-compact) .nav-links { gap: var(--space-4); }
  :root:lang(ja) .nav:not(.is-compact) .nav-inner > .lang-switch { margin-left: calc(var(--space-2) - var(--space-4)); }
}

/* Under 360px the bar holds the logo, the theme switch and the hamburger and
   nothing more, so the switch moves to the foot of the panel. */
@media (width < 360px) {
  .nav-inner > .lang-switch { display: none; }
  .nav-menu .lang-switch { display: inline-flex; align-self: flex-start; margin: var(--space-5) var(--space-6) 0; }
}

/* One beat of cross-fade while the grounds swap, added by theme.js only for
   the length of the switch. Scoped to no-preference so it cannot outrank the
   reduced-motion rule in takumis-base.css, which is also !important but loads
   earlier and would otherwise lose. */
@media (prefers-reduced-motion: no-preference) {
  .theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
    transition: background-color var(--dur-slow) var(--ease-standard),
                border-color     var(--dur-slow) var(--ease-standard),
                color            var(--dur-slow) var(--ease-standard) !important;
  }
}

/* Dark-ground button variants */
.btn-ghost-dk { background: transparent; color: var(--dk-muted); }
.btn-ghost-dk:hover { background: rgba(253,248,232,.07); color: var(--hp-cream-white); }

/* ==========================================================================
   Grid wash — the graph-paper module, faded so it never competes
   ========================================================================== */
.wash { position: relative; overflow: hidden; }
.wash::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(145,142,244,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(145,142,244,.13) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
  mask-image: radial-gradient(ellipse 64% 58% at 50% 26%, #000 4%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 64% 58% at 50% 26%, #000 4%, transparent 74%);
}
.wash > * { position: relative; }

/* ==========================================================================
   Section headers
   ========================================================================== */
.sec-head { max-width: 64ch; margin-bottom: var(--space-12); }
.sec-head h2 {
  font-size: var(--fs-section); letter-spacing: var(--ls-display);
  line-height: var(--lh-snug); color: var(--hp-cream-white);
}
.sec-head p { color: var(--dk-muted); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); margin: 0; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }

/* ==========================================================================
   Composer — the prompt box
   It only plays example questions (assets/prompt-examples.js); its bottom bar
   holds the Sign in and Register links to the app.
   ========================================================================== */
.composer { background: var(--dk-surface); border: 1px solid var(--dk-line); text-align: left; }
.composer:focus-within { border-color: var(--hp-violet-500); }
.composer-field {
  width: 100%; background: transparent; border: 0; resize: none;
  font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: 1.6;
  color: var(--dk-text); padding: var(--space-6) var(--space-6) var(--space-3);
  min-height: 116px;
}
.composer-field::placeholder { color: var(--dk-muted); }
.composer-field:focus { outline: none; box-shadow: none; }
/* The box only shows example questions; it cannot be typed in or clicked into. */
.composer-field[readonly] { cursor: default; pointer-events: none; user-select: none; }
.composer-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4) var(--space-6);
  border-top: 1px solid var(--dk-line-soft);
}
.composer-meta { font-size: var(--fs-caption); color: var(--dk-subtle); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.composer-meta span { display: inline-flex; align-items: center; gap: 6px; }
.composer-meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--hp-tropical-indigo); }

/* A link to a section with a box ("#join") lands below the sticky nav, not under it. */
.composer { scroll-margin-top: 96px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips.center { justify-content: center; }
.chip {
  font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  min-height: 40px; padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--dk-line); background: transparent; color: var(--dk-muted);
  cursor: pointer; transition: all var(--dur-base) var(--ease-standard);
}
.chip:hover { border-color: var(--hp-violet-500); color: var(--hp-cream-white); background: rgba(139,92,246,.12); }

/* ==========================================================================
   Build stream
   ========================================================================== */
.stream { border: 1px solid var(--dk-line); background: var(--dk-sunken); text-align: left; }
.stream-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--dk-line-soft);
}
.stream-head .mono { color: var(--dk-subtle); }
.stream-head .tag { margin-left: auto; border-color: var(--hp-violet-500); background: rgba(139,92,246,.16); color: #CDBCFB; }
.stream ol { list-style: none; margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); }
.stream li {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--dk-subtle);
  padding: 7px 0; opacity: .3;
  transition: opacity var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard);
}
.stream li.on { opacity: 1; color: var(--dk-muted); }
.stream li .mark {
  width: 8px; height: 8px; border-radius: 50%; background: var(--dk-line); flex: none;
  transition: background var(--dur-slow) var(--ease-standard);
}
.stream li.on .mark   { background: var(--hp-tropical-indigo); }
.stream li.done .mark { background: var(--hp-violet-500); }
.stream li .t { margin-left: auto; color: var(--dk-subtle); }

/* ==========================================================================
   Code
   ========================================================================== */
.code {
  background: var(--hp-berry-900); color: #D9D2EC; padding: var(--space-6);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75;
  overflow: auto; white-space: pre;
}
.code .k { color: #B9A6F7; }
.code .s { color: var(--hp-pastel-orange); }
.code .c { color: #6F6191; }
.code .n { color: #F2C9A8; }
.code .t { color: #8FE3D0; }
.code .add { color: #8FE3D0; }

/* ==========================================================================
   Conversation
   ========================================================================== */
.msg { margin-bottom: var(--space-5); }
.msg-role {
  font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-overline);
  text-transform: var(--label-case); color: var(--dk-subtle); margin-bottom: 7px;
}
.msg-user p {
  background: rgba(139,92,246,.14); border-left: 2px solid var(--hp-violet-500);
  padding: var(--space-4); margin: 0; font-size: var(--fs-body-sm); color: var(--dk-text);
}
.msg-ai p { margin: 0 0 var(--space-3); font-size: var(--fs-body-sm); color: var(--dk-muted); }
.note {
  border-left: 2px solid var(--hp-pastel-orange); padding-left: var(--space-4);
  font-size: var(--fs-body-sm); color: #E8C7AE;
}

/* ==========================================================================
   Workspace
   ========================================================================== */
.workspace { border: 1px solid var(--dk-line); background: var(--dk-sunken); }
.ws-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--dk-line-soft); flex-wrap: wrap; }
.ws-tab {
  font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  padding: 7px 15px; border-radius: var(--radius-pill); border: 1px solid transparent;
  background: transparent; color: var(--dk-subtle); cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
}
.ws-tab:hover { color: var(--hp-cream-white); }
.ws-tab[aria-selected="true"] { background: var(--hp-violet-500); color: var(--hp-cream-white); }
.ws-bar .mono { margin-left: auto; color: var(--dk-subtle); }
.ws-pane[hidden] { display: none; }

/* ==========================================================================
   Chart
   ========================================================================== */
.chart-wrap { position: relative; }
.chart-title { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--hp-cream-white); margin-bottom: 2px; }
.chart-sub { font-size: var(--fs-caption); color: var(--dk-subtle); margin-bottom: var(--space-5); }
.chart-legend { display: flex; gap: var(--space-5); margin-bottom: var(--space-3); }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--dk-muted); }
.chart-legend i { width: 14px; height: 2px; display: block; }
.tooltip {
  position: absolute; pointer-events: none; opacity: 0; z-index: 5;
  background: var(--hp-cream-white); color: var(--hp-midnight-berry);
  padding: 10px 12px; font-size: var(--fs-caption); line-height: 1.5;
  white-space: nowrap; transition: opacity var(--dur-fast) var(--ease-standard);
}
.tooltip .row { display: flex; align-items: center; gap: 7px; }
.tooltip .row i { width: 8px; height: 8px; border-radius: 50%; display: block; }

.bt-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--dk-line-soft); border: 1px solid var(--dk-line-soft); }
.bt-stats > div { background: var(--dk-sunken); padding: var(--space-4); }
.bt-stats .l { font-size: var(--fs-label-sm); letter-spacing: calc(.1em * var(--tracking)); text-transform: var(--label-case); color: var(--dk-subtle); margin-bottom: 4px; }
.bt-stats .v { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--hp-cream-white); letter-spacing: var(--ls-display); }
@media (max-width: 760px) { .bt-stats { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Cream relief block
   ========================================================================== */
.cream { background: var(--hp-cream-white); color: var(--text-body); }
.cream h2, .cream h3, .cream h4 { color: var(--text-strong); }
.cream p { color: var(--text-muted); }
.cream .eyebrow { color: var(--text-muted); }
.cream .eyebrow::before { background: var(--hp-blue-violet); }

/* ==========================================================================
   Stat bar
   ========================================================================== */
.statbar { border-top: 1px solid var(--dk-line-soft); border-bottom: 1px solid var(--dk-line-soft); }
.statbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.statbar-item { padding: var(--space-8) var(--space-6); border-right: 1px solid var(--dk-line-soft); }
.statbar-item:last-child { border-right: 0; }
.statbar-item .v { font-size: clamp(26px, 2.6vw, 34px); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); color: var(--hp-cream-white); line-height: 1; margin-bottom: var(--space-2); }
.statbar-item .v.warm { color: var(--hp-pastel-orange); }
.statbar-item .l { font-size: var(--fs-caption); color: var(--dk-subtle); }
@media (max-width: 820px) {
  .statbar-inner { grid-template-columns: 1fr 1fr; }
  .statbar-item:nth-child(2n) { border-right: 0; }
  .statbar-item:nth-child(-n+2) { border-bottom: 1px solid var(--dk-line-soft); }
}

/* ==========================================================================
   Community gallery
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.gcard { border: 1px solid var(--dk-line-soft); background: var(--dk-surface); padding: var(--space-6); transition: border-color var(--dur-base) var(--ease-standard); }
.gcard:hover { border-color: var(--hp-violet-500); }
.gcard-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.gcard-top .stage { font-size: var(--fs-label-sm); letter-spacing: calc(.12em * var(--tracking)); text-transform: var(--label-case); color: var(--hp-tropical-indigo); }
.gcard-top .forks { margin-left: auto; font-size: var(--fs-caption); color: var(--dk-subtle); }
.gcard h4 { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--hp-cream-white); margin: 0 0 var(--space-3); font-weight: 500; }
.gcard p { font-size: var(--fs-body-sm); color: var(--dk-muted); margin: 0 0 var(--space-5); min-height: 62px; }
.spark { display: block; width: 100%; height: 38px; margin-bottom: var(--space-4); }
.gcard-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: var(--dk-subtle); border-top: 1px solid var(--dk-line-soft); padding-top: var(--space-3); }
@media (max-width: 940px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pricing — one model, no tiers.
   $10 of credit on sign-up, then prepaid top-ups. Nothing recurring, so there
   are no plan cards to compare: two panels and a price list.
   ========================================================================== */
.credit { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dk-line-soft); border: 1px solid var(--dk-line-soft); }
.credit > div { background: var(--dk-surface); padding: var(--space-10); display: flex; flex-direction: column; }
.credit .free { background: var(--hp-blue-violet); }
.credit .ct-l { font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: var(--label-case); color: var(--dk-subtle); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.credit .free .ct-l { color: rgba(253,248,232,.78); }
.credit .ct-v { font-size: clamp(38px, 4.6vw, 56px); font-weight: var(--fw-semibold); letter-spacing: var(--ls-hero); line-height: 1; color: var(--hp-cream-white); margin-bottom: var(--space-5); }
.credit p { font-size: var(--fs-body); color: var(--dk-muted); margin: 0 0 var(--space-6); }
.credit .free p { color: rgba(253,248,232,.88); }
.credit .btn { margin-top: auto; align-self: flex-start; }

.topups { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.topup {
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  min-height: 44px; padding: 9px 20px; border-radius: var(--radius-pill);
  border: 1px solid var(--dk-line); color: var(--hp-cream-white);
  background: transparent; cursor: pointer; font-family: var(--font-sans);
  transition: all var(--dur-base) var(--ease-standard);
}
.topup:hover { border-color: var(--hp-violet-500); background: rgba(139,92,246,.14); }
.topup.any { color: var(--dk-subtle); border-style: dashed; }

.costs { border: 1px solid var(--dk-line-soft); border-top: 0; }
.costs .row {
  display: flex; align-items: baseline; gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--dk-line-soft);
  font-size: var(--fs-body-sm); color: var(--dk-muted);
}
.costs .row .v { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--hp-cream-white); white-space: nowrap; }
.costs .row .v.free { color: var(--hp-pastel-orange); }
.costs .row.head { background: var(--dk-sunken); color: var(--dk-subtle); font-size: var(--fs-label-sm); letter-spacing: var(--ls-label); text-transform: var(--label-case); font-weight: var(--fw-semibold); }
.costs .row.head .v { color: var(--dk-subtle); letter-spacing: var(--ls-label); }

@media (max-width: 820px) {
  .credit { grid-template-columns: 1fr; }
  .credit > div { padding: var(--space-8); }
  .costs .row { flex-wrap: wrap; gap: var(--space-2); }
  .costs .row .v { margin-left: 0; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq details { border-bottom: 1px solid var(--dk-line-soft); }
.faq details:first-child { border-top: 1px solid var(--dk-line-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--space-6) 0;
  font-size: var(--fs-title); font-weight: var(--fw-medium); color: var(--hp-cream-white);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--hp-tropical-indigo); }
.faq summary::after { content: "+"; font-size: 22px; color: var(--hp-tropical-indigo); font-weight: 300; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { font-size: var(--fs-body); color: var(--dk-muted); max-width: 72ch; padding-bottom: var(--space-6); margin: 0; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { text-align: center; border-top: 1px solid var(--dk-line-soft); }
.cta h2 { font-size: var(--fs-closing); letter-spacing: var(--ls-display); color: var(--hp-cream-white); max-width: calc(18 * var(--char)); margin: 0 auto var(--space-5); }
.cta p { color: var(--dk-muted); max-width: 52ch; margin: 0 auto var(--space-8); font-size: var(--fs-body-lg); }

/* ==========================================================================
   Mobile
   Grid and flex children default to min-width:auto, which lets a <pre>-style
   code block push the whole page sideways. Everything that can hold code is
   explicitly allowed to shrink, and scrolls inside itself instead.
   ========================================================================== */
.ws-body > *, .ws-pane, .demo-pane, .right-col > *,
.annot > *, .code-pane, .chart-pane, .pane-body { min-width: 0; }
.code { max-width: 100%; }

@media (max-width: 900px) {
  .section { padding: var(--space-16) 0; }
  .section-sm { padding: var(--space-12) 0; }
  .sec-head { margin-bottom: var(--space-8); }
  .sec-head h2 { font-size: var(--fs-section-sm); }
  .sec-head p { font-size: var(--fs-body); }
}

@media (max-width: 760px) {
  .container { padding: 0 var(--space-5); }
  .code { font-size: 11.5px; padding: var(--space-5); line-height: 1.7; }
  .faq summary { font-size: var(--fs-body); padding: var(--space-5) 0; gap: var(--space-4); }
  .faq details p { font-size: var(--fs-body-sm); padding-bottom: var(--space-5); }
  .cta h2 { font-size: var(--fs-closing-sm); }
  .cta p { font-size: var(--fs-body); }
  .ws-bar { gap: 4px; padding: var(--space-3); }
  .ws-tab { padding: 6px 11px; font-size: 11.5px; }
  .ws-bar .mono { width: 100%; margin-left: 0; padding-top: 2px; }
  .statbar-item { padding: var(--space-6) var(--space-5); }
  .gcard p { min-height: 0; }
  .footer { padding: var(--space-12) 0 var(--space-8); }
  .footer-grid { gap: var(--space-8); margin-bottom: var(--space-8); }
  .footer-base { flex-direction: column; gap: var(--space-2); }
  .composer-field { font-size: var(--fs-body); min-height: 108px; padding: var(--space-5) var(--space-5) var(--space-3); }
  .composer-bar { flex-wrap: wrap; padding: var(--space-3) var(--space-4) var(--space-4) var(--space-5); gap: var(--space-4); }
  /* The two links share the row, each half of it. */
  .composer-bar .btn { flex: 1 1 0; min-width: 0; }
  .composer-meta { font-size: 11.5px; gap: var(--space-3); }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .credit .ct-v { font-size: 40px; }
  .topup { padding: 8px 16px; font-size: var(--fs-caption); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid var(--dk-line-soft); padding: var(--space-16) 0 var(--space-10); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: var(--space-10); margin-bottom: var(--space-12); }
.footer h5 { font-size: var(--fs-overline); letter-spacing: var(--ls-overline); text-transform: var(--label-case); color: var(--dk-subtle); font-weight: var(--fw-semibold); margin: 0 0 var(--space-4); }
.footer ul { display: grid; gap: var(--space-3); }
.footer li a { font-size: var(--fs-body-sm); color: var(--dk-muted); }
.footer li a:hover { color: var(--hp-tropical-indigo); }
.footer-brand p { font-size: var(--fs-body-sm); color: var(--dk-muted); max-width: 34ch; margin: var(--space-4) 0 0; }
.disclaimer { border-top: 1px solid var(--dk-line-soft); padding-top: var(--space-8); }
.disclaimer p { font-size: var(--fs-caption); color: var(--dk-subtle); line-height: 1.7; }
.footer-base { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; font-size: var(--fs-caption); color: var(--dk-subtle); padding-top: var(--space-6); }
/* Machine-readable files for AI agents, same three on every page. */
.footer-files { display: flex; gap: var(--space-5); flex-wrap: wrap; font-family: var(--font-mono); }
.footer-files a { color: var(--dk-subtle); }
.footer-files a:hover { color: var(--hp-cream-white); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }