:root {
      /* PENCIL (owner 2026-08-30: "go through the whole frontend and change the
         design to our new style"). The landing has been drawn on paper since
         2026-08-29; this is the same palette lifted to the root so the signed-in
         app is the same sheet rather than a white page behind a paper door.

         Declared ONCE here and consumed through the app's existing token names
         below — the alternative was editing several hundred rules, and two
         palettes would have drifted the first time either was touched. */
      --paper: #f3efe4;
      --paper-2: #e7e1d2;
      --graphite: #33313d;      /* the lead itself — never pure black */
      --graphite-2: #615d6c;    /* a lighter pass, for secondary type */
      --graphite-3: #918d9c;    /* barely there */
      /* graphite laid down at three pressures: hard enough to fill (a button),
         a light pass (a chip), barely a smudge (a rule) */
      --gr-fill:
        repeating-linear-gradient(56deg,rgba(22,20,29,.95) 0 2.3px,rgba(22,20,29,.10) 2.3px 5.4px),
        repeating-linear-gradient(129deg,rgba(22,20,29,.66) 0 1.7px,rgba(22,20,29,0) 1.7px 6.4px),
        repeating-linear-gradient(8deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,0) 1px 9px),
        linear-gradient(168deg,rgba(96,91,110,.92),rgba(58,55,70,.96));
      --gr-wash:
        repeating-linear-gradient(56deg,rgba(64,60,74,.30) 0 1.3px,rgba(64,60,74,0) 1.3px 4.6px),
        repeating-linear-gradient(129deg,rgba(64,60,74,.16) 0 1.1px,rgba(64,60,74,0) 1.1px 6.2px);
      --gr-tint:
        repeating-linear-gradient(56deg,rgba(74,70,86,.14) 0 1.2px,rgba(74,70,86,0) 1.2px 6.5px);

      /* ── the app's own token names, now pointing at the palette above ── */
      --bg: var(--paper);
      --panel: rgba(51, 49, 61, 0.055);      /* a smudge on the sheet */
      --panel-2: rgba(51, 49, 61, 0.10);     /* raised / active */
      --line: rgba(51, 49, 61, 0.22);        /* hairline rim — cream needs more
                                                than white did to read at all */
      --line-2: rgba(51, 49, 61, 0.34);      /* stronger rim */
      --text: var(--graphite);
      --muted: var(--graphite-2);
      --neon: #2a2833;        /* the pencil CTA's own dark */
      --neon-dim: #16141d;
      --purple: #3d3a48;
      --purple-dim: #2a2833;
      /* accent fill. NOT the cross-hatch: --split has 128 consumers and one of
         them clips it to TEXT (.hh-name), where a repeating hatch at label size
         reads as noise. Buttons that should look filled in take --gr-fill by
         name instead. */
      --split: linear-gradient(120deg, var(--purple), var(--neon));
      --split-dim: linear-gradient(120deg, var(--purple-dim), var(--neon-dim));
      --on-accent: var(--paper);   /* paper-coloured ink on graphite */
      /* THE ONE GREEN IN THIS PALETTE, and it is a signal rather than a colour
         of the app: a start-screen wire is green exactly when the database at
         the top of the pair is wired to the thing that wire lands on.
         MEASURED, because the owner chose it against the alternative and the
         cost should not be a surprise later: on this cream, contrast falls as a
         green gets brighter — the graphite wire beside it scores 11.09, a muted
         forest 4.27, and this 1.95. It is the most vivid green the palette can
         take and the faintest 1.3px line on the page. Owner's call, from five
         rendered side by side (2026-09-09: "A, but the green color more live" →
         "G4"). */
      --wire-live: #00c853;
      --halo: linear-gradient(120deg, rgb(255,121,198), rgb(255,184,77)); /* kept brand gradient — chatbox only */
    }
    * { box-sizing: border-box; margin: 0; }
    html, body { height: 100%; }
    /* overflow:hidden clips the fixed `body::after` ambient glow (inset:-25%),
       which otherwise spills past the viewport and shows window scrollbars —
       body's own overflow:hidden can't clip a position:fixed pseudo-element. */
    /* The sheet. Grain is a background LAYER, not an overlay element, so it
       adds nothing to the stacking context and cannot end up over a control. */
    html {
      background-color: var(--paper);
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"),
        radial-gradient(120% 88% at 50% -6%,rgba(255,255,255,.62),transparent 58%),
        radial-gradient(76% 62% at 50% 116%,rgba(84,80,98,.16),transparent 62%);
      background-blend-mode: multiply, normal, normal;
      overflow: hidden;
    }
    body {
      font-family: 'Patrick Hand', 'Segoe Print', Inter, system-ui, sans-serif;
      color: var(--text);
      background: transparent;
      display: flex; flex-direction: column; overflow: hidden;
    }
    /* Slow-drifting yellow/purple glow that the glass panels catch. */
    body::after {
      content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
      background:
        radial-gradient(40% 36% at 22% 14%, rgba(0,0,0, .06), transparent 62%),
        radial-gradient(38% 34% at 84% 98%, rgba(0,0,0, .05), transparent 60%);
      animation: ambient-drift 26s ease-in-out infinite alternate;
      will-change: transform;
    }
    @keyframes ambient-drift {
      from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
      to { transform: translate3d(1.5%, 2%, 0) scale(1.07); }
    }
    button { font-family: inherit; }

    /* ── Micro-interactions (owner 2026-07-23): a gentle spring "press" on click
       for every control + smooth state transitions. Subtle; reduce-motion safe.
       Specificity (0,1,1)/(0,2,1) lets it ride over single-class rules while
       preserving their colour/shadow fades (all common props are included). ── */
    button:not([disabled]), [role="button"]:not([disabled]), a.st-publish, a.st-share, summary {
      transition: transform .17s cubic-bezier(.34, 1.5, .5, 1), box-shadow .18s ease,
        background-color .16s ease, border-color .16s ease, color .13s ease,
        filter .16s ease, opacity .18s ease;
    }
    button:not([disabled]):active, [role="button"]:not([disabled]):active,
    a.st-publish:active, a.st-share:active { transform: scale(.955); }
    /* icon-only / round controls press a touch deeper for a tactile feel */
    .st-icon:not([disabled]):active, .st-dev:not([disabled]):active,
    .st-plus:not([disabled]):active, .attach-btn:not([disabled]):active,
    .st-sendc:not([disabled]):active, .send:not([disabled]):active { transform: scale(.9); }
    @media (prefers-reduced-motion: reduce) {
      button:not([disabled]):active, [role="button"]:not([disabled]):active,
      a.st-publish:active, a.st-share:active,
      .st-icon:active, .st-dev:active, .st-plus:active, .st-sendc:active, .send:active { transform: none; }
    }

    /* ── More micro-interactions (owner 2026-07-24): view + builder-panel entrance
       transitions, a click ripple on primary buttons, and a spring pop on toasts.
       All reduce-motion safe. ── */
    @keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
    .view.active { animation: view-in .26s cubic-bezier(.2, .7, .3, 1) both; }
    /* builder Preview/Code/More/Data panels re-render on switch → animate each in */
    .st-frame, .st-code, .st-more, .st-datawrap, .st-building {
      animation: view-in .22s cubic-bezier(.2, .7, .3, 1) both;
    }
    /* click ripple — a white ink expands from the tap point on primary dark buttons */
    .send, .st-sendc, .st-publish, .crt-chatbox-send, .st-data-add, .st-data-save {
      position: relative; overflow: hidden;
    }
    .ripple-ink {
      position: absolute; border-radius: 50%; pointer-events: none;
      background: rgba(255, 255, 255, .5); transform: scale(0); opacity: .6;
      animation: ripple-go .55s cubic-bezier(.25, .6, .3, 1) forwards;
    }
    @keyframes ripple-go { to { transform: scale(2.4); opacity: 0; } }
    /* toast: spring pop-in (it already slides in via .show) */
    .sb-toast.show { animation: toast-pop .34s cubic-bezier(.2, 1.45, .4, 1); }
    @keyframes toast-pop { from { transform: translate(-50%, 14px) scale(.94); opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .view.active, .st-frame, .st-code, .st-more, .st-datawrap, .st-building,
      .sb-toast.show { animation: none; }
      .ripple-ink { display: none; }
    }

    /* ── Top bar ─────────────────────────────── */
    .topbar {
      display: flex; align-items: center; gap: 1.6rem;
      padding: 0 1.25rem; height: 58px; flex-shrink: 0;
      border-bottom: 1px solid var(--line);
    }
    .logo { display: flex; align-items: center; gap: .6rem; font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em; }
    .logo-mark {
      width: 34px; height: 34px; flex-shrink: 0;
      object-fit: contain; background: none;
    }
    /* ── Shell ───────────────────────────────── */
    .shell { display: flex; flex: 1; min-height: 0; overflow-x: clip; }

    /* Sidebar */
    .sidebar {
      width: 264px; flex-shrink: 0; padding: 1rem .85rem;
      border-right: 1px solid var(--line);
      display: flex; flex-direction: column; gap: .25rem;
      background: rgba(255, 255, 255, 0.035);
      backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    .side-label {
      font-size: .7rem; font-weight: 700; letter-spacing: .12em;
      color: var(--muted); text-transform: uppercase;
      padding: .9rem .55rem .45rem;
    }
    .side-item {
      display: flex; align-items: center; gap: .7rem;
      padding: .5rem .55rem; border-radius: 12px;
      font-size: .95rem; font-weight: 500; color: var(--text);
      cursor: pointer; border: 1px solid transparent;
    }
    .side-item:hover { background: var(--panel-2); }
    .side-item.active { background: var(--panel-2); border-color: var(--line); }
    .tile {
      width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
      display: grid; place-items: center; font-size: .95rem; font-weight: 800; color: var(--text);
    }
    .tile.home { background: linear-gradient(135deg, #e2e8f0, #94a3b8); }
    .new-chat {
      margin-top: .35rem; display: flex; align-items: center; gap: .7rem;
      padding: .5rem .55rem; border-radius: 12px; cursor: pointer;
      color: var(--muted); font-size: .95rem; border: 1px dashed var(--line-2); background: none; width: 100%;
      text-align: left;
    }
    .new-chat:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
    .new-chat .plus {
      width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
      background: var(--panel-2); border: 1px solid var(--line-2); font-size: 1.1rem; color: var(--text);
    }

    /* Main */
    .main {
      flex: 1; min-width: 0; position: relative;
      display: flex; flex-direction: column;
      /* The app never scrolls sideways. overflow-x: clip kills any stray
         horizontal scrollbar (a child a hair too wide, a scrollbar gutter)
         WITHOUT making a scroll container — so overflow-y stays visible and
         dropdowns/menus that open downward are not clipped. */
      overflow-x: clip;
      /* Vignette spotlight (owner's pick, 2026-07-16 — replaced the square
         grid): a soft glow high in the frame falling off into darkened
         corners. Pure gradients, no asset. */
      background-image:
        radial-gradient(115% 85% at 42% 18%, rgba(255,255,255,.05) 0%, rgba(255,255,255,.016) 42%, transparent 70%),
        radial-gradient(150% 130% at 50% 55%, transparent 58%, rgba(0,0,0,.5) 100%);
    }

    /* ── Chat view ───────────────────────────── */
    .chat { flex: 1; display: none; flex-direction: column; min-height: 0; }
    .chat.active { display: flex; }
    .thread {
      /* overflow-x hidden, y auto: a chat thread never scrolls sideways.
         Setting only overflow-y:auto makes overflow-x compute to auto too, which
         lets a full-width child (or the reserved vertical-scrollbar gutter on
         desktop classic scrollbars) show a stray horizontal scrollbar. */
      flex: 1; overflow: hidden auto; padding: 1.6rem 1.5rem;
      display: flex; flex-direction: column; gap: .7rem;
      position: relative;
    }
    /* Empty-state hero — greeting + starter chips over a breathing glow */
    .home-hero {
      position: absolute; inset: 0; z-index: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 0 26px;
    }
    .home-hero.gone { display: none; }
    .hh-amb {
      position: absolute; inset: 0; pointer-events: none;
      display: flex; align-items: center; justify-content: center;
      transition: transform .45s cubic-bezier(.2, .8, .3, 1); will-change: transform;
    }
    .hh-orb {
      position: absolute; width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(0,0,0, .1), rgba(0,0,0, .05) 45%, transparent 70%);
      filter: blur(30px);
      opacity: .9;
    }
    .hh-spark { position: absolute; }
    /* Fresh generations land with a soft gradient pulse */
    .msg.landed { animation: media-land 1.5s cubic-bezier(.2, .8, .3, 1) both; }
    @keyframes media-land {
      0% { opacity: 0; transform: scale(.965); box-shadow: 0 0 0 0 rgba(0,0,0, 0); }
      18% { opacity: 1; }
      45% { transform: scale(1); box-shadow: 0 0 0 4px rgba(0,0,0, .26), 0 0 52px 10px rgba(0, 0, 0, .3); }
      100% { box-shadow: 0 0 0 0 rgba(0,0,0, 0), 0 0 0 0 rgba(0, 0, 0, 0); }
    }
    .hh-spark.s1 { top: 22%; left: 26%; font-size: 1rem; color: rgba(0,0,0, .45); }
    .hh-spark.s2 { top: 30%; right: 24%; font-size: .75rem; color: rgba(0,0,0, .4); }
    .hh-spark.s3 { bottom: 26%; left: 33%; font-size: .65rem; color: rgba(237, 234, 243, .3); }
    .hh-title {
      position: relative; font-family: 'Space Grotesk', Inter, sans-serif;
      font-size: 2.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .65rem; line-height: 1.1;
      animation: hh-rise .6s cubic-bezier(.2, .8, .3, 1) both;
    }
    .hh-name { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .hh-sub {
      position: relative; color: var(--muted); font-size: .96rem; line-height: 1.55;
      max-width: 470px; margin: 0;
      animation: hh-rise .6s cubic-bezier(.2, .8, .3, 1) .1s both;
    }
    @keyframes hh-rise { from { opacity: 0; transform: translateY(16px); } }
    .thread-inner { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
    .msg {
      max-width: 78%; padding: .7rem 1rem; border-radius: 16px;
      font-size: .95rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
    }
    /* Bare-bar chat style — plain text with a pink→amber vertical accent bar on
       the outer edge (right for the user, left for Go Farther). Scoped to text
       bubbles so generated-media / loading cards keep their framed look. */
    .msg.user,
    .msg.agent:not(.image):not(.video):not(.audio):not(.gen-loading) {
      background: none; border: none; border-radius: 0; box-shadow: none;
      color: var(--text); padding: .15rem 0;
    }
    .msg.user {
      align-self: flex-end; text-align: right; font-weight: 500;
      padding-right: .95rem;
      border-right: 2px solid; border-image: linear-gradient(180deg, #1e1e22, #000000) 1;
    }
    /* No per-bubble backdrop blur — long chats would stack dozens of live
       blur layers; the big surfaces (composer, cards, menus) keep theirs. */
    .msg.agent:not(.image):not(.video):not(.audio):not(.gen-loading) {
      align-self: flex-start; padding-left: .95rem;
      border-left: 2px solid; border-image: linear-gradient(180deg, #1e1e22, #000000) 1;
    }
    /* Composer chip row: one @ImageN chip per attached reference — tap to
       insert the tag at the cursor. */
    .ref-chips { display: flex; gap: .35rem; flex-wrap: wrap; padding: .55rem .9rem 0; }
    .ref-chip {
      display: inline-flex; align-items: center; gap: .35rem;
      font: inherit; font-size: .72rem; font-weight: 600; color: var(--text);
      background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2);
      border-radius: 999px; padding: .16rem .55rem .16rem .18rem; cursor: pointer;
      transition: background .12s ease, border-color .12s ease;
    }
    .ref-chip:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
    .ref-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
    .ref-chip-glyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: .72rem; background: rgba(0,0,0, .16); }

    /* Reference strip under a user message: the images the sent @ImageN tags
       pointed at, right-aligned like the bubble it belongs to. */
    .msg-refs { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; align-self: flex-end; max-width: 78%; padding-right: .95rem; }
    .mr-slot { position: relative; width: 92px; height: 68px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
    .mr-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mr-tag {
      position: absolute; left: 3px; bottom: 3px; padding: .08rem .3rem;
      font-size: .58rem; font-weight: 700; letter-spacing: .02em;
      color: #fff; background: rgba(0, 0, 0, .72); border-radius: 5px;
      pointer-events: none;
    }
    .msg.typing { color: var(--muted); }
    .msg.typing .dots::after { content: '·'; animation: dots 1.2s steps(3, end) infinite; letter-spacing: 2px; }
    @keyframes dots { 33% { content: '··'; } 66% { content: '···'; } }

    /* ── Composer (shared) ───────────────────── */
    .composer-wrap { padding: 1rem 1.5rem 1.4rem; flex-shrink: 0; }
    .composer {
      display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem;
      width: 100%; max-width: 780px; margin: 0 auto;
      /* Above the attach panel (z2) so drop-up menus stay clickable when
         the panel sits directly over the composer on narrow screens. */
      position: relative; z-index: 3;
      background: var(--panel); border: 1px solid var(--line-2);
      border-radius: 24px; padding: 1.35rem 1.35rem 1.1rem 1.5rem;
      box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
      backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    }
    .composer #input, .composer #lpInput {
      flex: 1; background: none; border: none; outline: none;
      color: var(--text); font-size: .95rem; font-family: inherit; min-width: 0;
      padding: .45rem 0 1.2rem;
      resize: none; line-height: 1.5; max-height: 38vh; overflow-y: auto;
      display: block;
    }
    .composer-row {
      display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    }
    /* Below 1500px the mode-switch stays in the row (it goes vertical/absolute
       above that). Four wide controls won't fit 780px, so let them wrap and
       keep the send button pinned to the right of whatever line it lands on. */
    .composer-row .send { margin-left: auto; }
    .composer #input::placeholder, .composer #lpInput::placeholder { color: #5c5c66; }
    /* Home-page chatbox: the Builder composer's look, docked at the BOTTOM of
       the landing (owner's call). margin-top:auto pins it low on short pages;
       sticky keeps it in view while the preset grid scrolls behind it.
       Sending starts a fresh chat in the Builder with the message already sent. */
    .lp-compose { margin: auto auto 0; width: 100%; position: sticky; bottom: 0; padding-top: 1.4rem; }
    .lp-compose .composer { gap: .6rem; }
    .lp-compose-hint { color: var(--muted); font-size: .8rem; }
    /* Pinned preset chip (like "3D object generation ×") — amber pill in the
       composer row; × unpins it. */
    .lp-chip {
      display: inline-flex; align-items: center; gap: .4rem;
      background: rgba(0,0,0, .14); border: 1px solid rgba(0,0,0, .45);
      color: var(--text); border-radius: 999px; padding: .3rem .5rem .3rem .8rem;
      font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    }
    .lp-chip b { font-weight: 600; }
    .lp-chip-x {
      background: none; border: none; color: inherit; cursor: pointer;
      font-size: 1rem; line-height: 1; padding: 0 .15rem; opacity: .75;
    }
    .lp-chip-x:hover { opacity: 1; }
    .send {
      flex-shrink: 0; background: rgba(255, 255, 255, .05); color: var(--text);
      border: 1px solid var(--line-2); border-radius: 50%; width: 48px; height: 48px;
      display: grid; place-items: center; cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .send svg { display: block; }
    .send:hover { background: rgba(255, 255, 255, .09); border-color: rgba(237, 234, 243, .45); transform: translateY(-1px); }
    .send:disabled { opacity: .4; transform: none; cursor: default; box-shadow: none; }

    @media (max-width: 900px) {
      .sidebar { display: none; }
    }

/* ── Model picker (now lives in the composer) ── */
.model-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  padding: .4rem; display: none; z-index: 50;
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
  /* Long lists (15 durations, 16 voices) must never run off-screen. */
  max-height: min(48vh, 430px); overflow-y: auto;
}
.model-menu::-webkit-scrollbar { width: 6px; }
.model-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0, .4); border-radius: 999px; }
.model-menu::-webkit-scrollbar-track { background: transparent; }
.model-menu.open { display: block; }
.model-item {
  padding: .55rem .8rem; border-radius: 10px; font-size: .9rem;
  cursor: pointer; display: flex; justify-content: space-between; gap: 1rem;
}
.model-item:hover { background: var(--panel-2); }
.model-item .check { color: transparent; }
.model-item.selected .check { color: var(--neon); }
.model-item.disabled { color: var(--muted); cursor: default; font-size: .8rem; }
.model-item.disabled:hover { background: none; }

.msg.video { padding: .45rem; max-width: 68%; }
.msg.video video { display: block; width: 460px; max-width: 100%; border-radius: 12px; }

/* ── Audio / Image / Video mode switch ───── */
.mode-switch {
  display: flex; flex-direction: row; flex-shrink: 0; gap: 2px; padding: 3px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px;
}
.mode-btn { text-align: center; }
/* Wide screens: the switch stacks vertically INSIDE the box's left edge,
   vertically centered; the content shifts right to make room, so the
   chatbox keeps its height. Narrow screens keep the inline pill. */
/* The vertical mode-switch (tucked into the composer's left edge) frees the
   control row so the send button stays inline — apply it on laptops too, not
   just 24" desktops, so narrow screens don't have to wrap the send button. */
@media (min-width: 1100px) {
  .view-home .composer { position: relative; padding-left: 122px; }
  .view-home .composer-row .mode-switch {
    flex-direction: column;
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  }
  /* Nudge the builder conversation column a touch right of centre. */
  .view-home .thread-inner, .view-home .composer { transform: translateX(22px); }
  /* Nudge the empty-state greeting right by the same amount (more left padding
     shifts the centred content ~half of it), so it lines up with the chat. */
  .view-home .home-hero { padding-left: 70px; }
}
.mode-btn {
  background: none; border: none; color: var(--muted);
  font-weight: 600; font-size: .85rem; padding: .45rem .9rem;
  border-radius: 9px; cursor: pointer; text-align: center;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.active { background: var(--split); color: var(--on-accent); }
.msg.image { padding: .45rem; max-width: 68%; }
.msg.image img { display: block; width: 380px; max-width: 100%; border-radius: 12px; }
.msg.audio { max-width: 68%; }
.msg.audio audio { display: block; width: 320px; max-width: 100%; }
.msg.image img { cursor: zoom-in; }

/* ── Generated-media actions (full screen / download / delete) ──
   A vertical column sitting just OUTSIDE the media's right edge, as a flex
   sibling of the player — never an overlay, so it can't collide with the
   video's own controls (scrubber, volume, native PiP/full-screen), and it
   lands correctly for every aspect ratio and model (portrait, square,
   ultrawide) since it tracks the media's real rendered width. */
.msg.image, .msg.video, .msg.audio {
  position: relative;
  display: inline-flex; align-items: flex-start; gap: .5rem;
  align-self: flex-start; /* shrink-wrap to media + buttons, don't stretch */
}
/* The media element must be allowed to shrink on narrow screens so the button
   column always stays beside it (never pushed off / overlapping). */
.msg.video video, .msg.image img, .msg.audio audio { min-width: 0; }
/* A media message whose file is gone (expired temp link) collapses into a
   small note instead of a blank box; dead gallery files self-delete instead. */
.media-gone { display: inline-block; color: var(--muted); font-size: .85rem; padding: .55rem .8rem; border: 1px dashed var(--line-2); border-radius: 12px; }

.media-actions { display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }
.media-btn {
  width: 34px; height: 34px; border-radius: 9px; border: none;
  background: rgba(10, 10, 11, .72); color: var(--text); cursor: pointer;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  backdrop-filter: blur(4px); opacity: .9; transition: background .12s, opacity .12s;
}
.media-btn:hover { background: var(--neon); color: var(--on-accent); opacity: 1; }

/* ── Full-screen lightbox ── */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 2.5rem;
  background: rgba(0, 0, 0, .92);
}
.lightbox.open { display: flex; }
.lb-stage { display: flex; align-items: center; justify-content: center; position: relative; max-width: 94vw; max-height: 90vh; min-width: 120px; min-height: 120px; }
.lb-stage img, .lb-stage video { max-width: 94vw; max-height: 90vh; border-radius: 12px; display: block; }
.lb-loading {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--neon);
  animation: spin 1s linear infinite;
}
.lb-close, .lb-dl {
  position: fixed; top: 1.1rem; width: 44px; height: 44px; border-radius: 12px;
  border: none; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
}
.lb-close { right: 1.1rem; font-size: 1.6rem; }
.lb-dl { right: 4.2rem; font-size: 1.25rem; }
.lb-close:hover, .lb-dl:hover { background: var(--neon); color: var(--on-accent); }

/* ── Generation loading (animated) ──────── */
.gen-loading {
  align-self: flex-start; max-width: 70%;
  display: flex; flex-direction: column; gap: .65rem;
  background: none; border: none; padding: 0;
}
/* Dreaming frame: the scan-line loader plays inside the placeholder, a
   pink/amber aurora tint above it, a light sweep gliding across, and a
   softly breathing gradient border. */
.gen-shimmer {
  position: relative; overflow: hidden;
  width: 420px; max-width: 100%; border-radius: 12px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle, rgba(0, 0, 0, .05) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--panel-2);
}
/* one crisp gradient line sweeps top→bottom, scanning the frame into being */
.gen-scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  filter: blur(.3px);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.55) 35%, rgba(0,0,0,.4) 65%, transparent);
  box-shadow: 0 0 16px rgba(0, 0, 0, .55);
  animation: gen-scandown 2.4s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes gen-scandown {
  0%   { top: 6%;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}
/* tiny instrument readouts in the corners */
.gen-scan-tag {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: .5px; color: var(--muted);
}
.gen-scan-tag.tl { left: 12px; top: 10px; }
.gen-scan-tag.br { right: 12px; bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .gen-scanline { animation: none; top: 50%; } }
.gen-bars { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 .2rem; }
.gen-bars span {
  width: 5px; height: 22%; border-radius: 3px; background: var(--neon);
  animation: eq .9s ease-in-out infinite;
}
@keyframes eq { 0%, 100% { height: 18%; opacity: .55; } 50% { height: 92%; opacity: 1; } }
/* Free-tier on-screen mark over video players */
.msg.video, .msg.image { position: relative; }
.wm-badge {
  position: absolute; top: 10px; left: 12px; z-index: 2; pointer-events: none;
  font-family: 'Space Grotesk', Inter, sans-serif; font-size: .72rem; font-weight: 600;
  color: rgba(255, 255, 255, .78); text-shadow: 0 1px 8px rgba(0, 0, 0, .65);
  letter-spacing: .02em;
}
/* Full-screen playback keeps the mark readable. */
.lb-stage .wm-badge { font-size: 1rem; top: 16px; left: 18px; }
.gen-status { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .9rem; }
.gen-status-text.flip { animation: gen-flip .45s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes gen-flip { from { opacity: 0; transform: translateY(7px); } }
.gen-model {
  margin-left: auto; flex-shrink: 0; font-size: .7rem; font-weight: 600; color: rgba(237, 234, 243, .6);
  border: 1px solid var(--line); border-radius: 999px; padding: .16rem .55rem; white-space: nowrap;
}
.gen-model:empty { display: none; }
/* slim indeterminate bar between the frame and the status line */
.gen-prog { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: .5rem 0 .45rem; }
.gen-prog i {
  display: block; height: 100%; width: 34%; border-radius: 999px;
  background: var(--split);
  animation: gen-prog-sweep 1.7s cubic-bezier(.45, .15, .35, .9) infinite;
}
@keyframes gen-prog-sweep { from { transform: translateX(-120%); } to { transform: translateX(330%); } }
.gen-spinner {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--neon); border-right-color: var(--purple);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Director: A–D question card + prompt review ── */
.q-card, .review-card {
  align-self: flex-start; max-width: 82%;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 16px; border-bottom-left-radius: 5px;
  padding: 1.05rem 1.15rem; display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.q-intro, .review-label { color: var(--muted); font-size: .88rem; }
.opts { display: flex; flex-direction: column; gap: .45rem; }
.opt {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel);
  border-radius: 11px; padding: .6rem .7rem;
}
.opt:hover { border-color: var(--neon); }
.opt .key {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
  background: var(--line); color: var(--muted);
}
.opt .txt { flex: 1; min-width: 0; }
.opt .txt b { font-weight: 600; }
.opt .txt small { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }
.opt.sel { border-color: var(--neon); background: rgba(255, 214, 10, .09); }
.opt.sel .key { background: var(--split); color: var(--on-accent); }
.other-input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: .95rem;
  border-bottom: 1px solid var(--neon); padding: .15rem 0; margin-top: .15rem;
}
.other-input::placeholder { color: var(--muted); }
.review-prompt {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  padding: .8rem .9rem; line-height: 1.5; font-size: .95rem; white-space: pre-wrap;
}
/* Multi-shot breakdown (Kling shot-list) inside the review card. */
.review-shots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.review-shots li {
  background: var(--panel); border: 1px solid var(--line-2); border-left: 2px solid var(--purple);
  border-radius: 10px; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .2rem;
}
.review-shots .rs-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  background: var(--split);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.review-shots .rs-txt { color: var(--text); font-size: .88rem; line-height: 1.45; }
.review-actions { display: flex; gap: .6rem; }
.review-allow, .review-deny {
  border-radius: 12px; padding: .65rem 1.35rem; font-weight: 700;
  cursor: pointer; font-size: .92rem; font-family: inherit; border: none;
}
.review-allow { align-self: flex-start; background: var(--split); color: var(--on-accent); }
.review-allow:hover { background: var(--split-dim); }
.review-deny { background: none; border: 1px solid var(--line-2); color: var(--muted); }
.review-deny:hover { border-color: #6b4a4a; color: #e88; }

/* ── Attachment pickers ──────────────────── */
.composer-top { display: flex; align-items: flex-start; gap: 1rem; }
.composer-top input { padding-top: .55rem; }
.attach-group { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.attach-btn {
  background: none; border: 1px dashed var(--line-2); color: var(--muted);
  border-radius: 12px; padding: .75rem 1.15rem; font-size: .95rem;
  cursor: pointer; display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
}
.attach-btn small { color: #5c5c66; font-size: .75rem; }
.attach-btn:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.attach-btn.has { border-style: solid; border-color: var(--neon); color: var(--text); padding: .4rem .6rem; }
.attach-btn.has img { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; display: block; }
.attach-btn .audio-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--neon); font-weight: 600; padding: 0 .2rem;
}
.attach-btn .x { color: var(--muted); font-size: 1.15rem; padding: 0 .25rem; }
.attach-btn .x:hover { color: var(--text); }

/* ── Duration / ratio pickers ────────────── */
.opt-wrap { position: relative; }
.opt-btn {
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  border-radius: 12px; padding: .7rem .85rem; font-size: .9rem;
  cursor: pointer; display: flex; align-items: center; gap: .4rem;
  white-space: nowrap;
}
.opt-btn b { color: var(--text); font-weight: 600; }
.opt-btn:hover { border-color: rgba(0,0,0,.3); color: var(--text); }
.model-menu.drop-up { top: auto; bottom: calc(100% + 10px); right: auto; left: 0; min-width: 130px; }
/* Drops up over the composer, so keep it fully solid to read over the attach row. */
.model-menu.drop-up.model-drop { min-width: 250px; background: #ffffff; }

/* ── Prompt-help mode chip (top-right beside the textarea) ── */
.dir-wrap { flex-shrink: 0; display: flex; align-items: center; gap: .55rem; }
/* Orchestrator master switch — turns the Sonnet layer on/off; the Auto/Plan
   chip sits beside it and only shows while it's on. */
.orch-ctl { display: inline-flex; align-items: center; gap: .45rem; margin-top: .15rem; }
.orch-name { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .16s ease; }
.orch-ctl.on .orch-name { color: var(--text); }
/* Non-subscriber: switch is dimmed and the label carries a small lock; tapping
   opens the add-on upsell instead of toggling. */
.st-switch.locked { opacity: .5; }
.orch-ctl.locked .orch-name::after { content: " 🔒"; font-size: .72em; opacity: .8; }
.model-menu.drop-up.dir-menu { min-width: 300px; background: #ffffff; left: auto; right: 0; }
/* THE BUILDER AND EFFORT MENUS WERE 130px WIDE AND SEE-THROUGH.
   `.model-menu` sets `min-width: 250px` and a translucent panel; `.drop-up`
   above narrows that to 130px, and every other drop-up then re-widens itself and
   paints itself solid — `.model-drop` 250px, `.dir-menu` 300px, `.effort-menu`
   165px. `.build-menu` never did, so it inherited the 130px and the blur: the
   descriptions wrapped one or two words per line, the fifth effort ran off the
   bottom, and the chat showed through the menu. It has its own width now, wide
   enough for the longest line ("Multi-agent fan-out — nothing truncates") on two
   lines rather than six.
   Solid, like the other three, and for the reason already written above them:
   these drop UP over the composer and have to read against the attach row.
   THE SELECTOR NO LONGER NAMES `.drop-up` (2026-09-07), because the same chip is
   now drawn on the start screen and opens DOWNWARD there — over the sites grid,
   which needs the solid panel just as much as the attach row did. It still wins
   over `.drop-up`'s `min-width: 130px` on the composer's copy, and by SOURCE
   ORDER rather than by weight: both selectors are two classes, and this one is
   the later of the two. Moving it above line 658 would silently give the
   composer's menu back its 130px. */
.model-menu.build-menu { min-width: 270px; background: #ffffff; }
/* Dropping DOWN, it hangs under a chip on the LEFT of its row, so it opens
   rightwards from there — `.model-menu`'s own `right: 0` would push a 270px
   panel out past the left edge of the box it belongs to. `:not(.drop-up)` is
   what keeps this off the composer's copy, and it is the reason this can never
   collide with `.build-menu-end` below, which applies only when `.drop-up` is
   present. */
.model-menu.build-menu:not(.drop-up) { left: 0; right: auto; }
/* The rightmost chip in the composer row opens leftwards. `.drop-up` pins every
   menu to `left: 0`, which put this one 72px past the rail's right edge —
   measured against the real 450px `.st-rail`. Same answer `.dir-menu` already
   takes for the same reason. */
.model-menu.drop-up.build-menu-end { left: auto; right: 0; }
.dir-item, .build-item { padding: .6rem .8rem; }
.dir-item .txt small, .build-item .txt small { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; line-height: 1.35; }
/* The tick keeps its own column, so a description can never reflow around it or
   push it off the edge — `space-between` alone let the text claim the width. */
.build-item .txt { min-width: 0; }
.build-item .check { flex: none; }
/* Raw mode: the effort knob has nothing to control — greyed, not clickable. */
.effort-pick.locked .opt-btn { opacity: .35; cursor: default; }
.effort-pick.locked .opt-btn:hover { border-color: var(--line-2); color: var(--muted); }
.accept-chip {
  flex-shrink: 0; display: flex; align-items: center; gap: .45rem;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted);
  border-radius: 999px; padding: .5rem .9rem; font-size: .85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; margin-top: .15rem;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.accept-chip .ae-icon { font-weight: 700; font-size: .75rem; letter-spacing: -1px; }
.accept-chip:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.accept-chip:active { transform: scale(.96); }

/* ── Settings panel (grouped composer options) ── */
/* Fully solid so the chips read clearly over content (matches the model picker). */
/* Double-class beats .model-menu.drop-up's min-width:130px override. */
.model-menu.settings-panel { min-width: 380px; max-width: 430px; padding: .6rem; background: #ffffff; }
.set-section { padding: .55rem .45rem; }
.set-section + .set-section { border-top: 1px solid var(--line); }
.set-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .55rem; }
/* A section whose value the model fixes (Veo refs → 8s, extend → +7s): chips
   dim + go inert, the note under them says why. */
.set-note { display: none; font-size: .74rem; color: var(--muted); margin-top: .45rem; max-width: 320px; line-height: 1.35; }
.set-section.dur-locked .set-note { display: block; }
.set-section.dur-locked .set-chips { opacity: .35; pointer-events: none; }
.set-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.set-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--panel); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 10px; padding: .42rem .7rem; font-family: inherit; font-size: .85rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.set-chip:hover { border-color: rgba(0,0,0,.3); }
.set-chip.active {
  background: var(--split); color: var(--on-accent);
  border-color: transparent; font-weight: 700;
}
.set-voicebtn {
  width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center;
  font-size: .58rem; border: 1px solid var(--line-2); color: var(--muted); line-height: 1;
}
.set-voicebtn:hover { color: var(--neon); border-color: var(--neon); }
.set-voicebtn.playing { color: var(--neon); border-color: var(--neon); }
.set-chip.active .set-voicebtn { border-color: rgba(237, 234, 243, .35); color: var(--text); }
/* collapse long lists: show the first 6, reveal the rest on "View all" */
.set-section.collapsible:not(.expanded) .set-chip:nth-child(n+7) { display: none; }
.set-viewall {
  margin-top: .55rem; background: none; border: none; color: var(--neon);
  font-family: inherit; font-size: .8rem; cursor: pointer; padding: .1rem .2rem;
}
.set-viewall:hover { text-decoration: underline; }
#voiceMenu { min-width: 168px; max-height: 340px; overflow-y: auto; }

/* Per-voice preview (play) button in the voice menu */
.voice-right { display: inline-flex; align-items: center; gap: .5rem; }
.voice-test {
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  width: 24px; height: 24px; border-radius: 7px; font-size: .7rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.voice-test:hover { border-color: var(--neon); color: var(--neon); }
.voice-test.playing { border-color: var(--neon); color: var(--neon); }
.voice-test:disabled { opacity: .55; cursor: default; }


/* ── Auth gate ─────────────────────────────── */
/* ── Top-right account / profile menu ───────────────────────────────── */
.profile { position: fixed; top: 16px; right: 20px; z-index: 70; display: flex; align-items: center; gap: .6rem; }
/* Credits pill: balance + segmented meter (share of the highest balance seen) */
.cred-pill {
  display: none; align-items: center; gap: .6rem; cursor: pointer;
  background: rgba(10, 9, 14, .6); border: 1px solid var(--line-2); border-radius: 999px;
  padding: .44rem .9rem; color: var(--text);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: border-color .15s ease, transform .12s ease;
}
.cred-pill.show { display: inline-flex; }
.cred-pill .cr-arc { display: none; } /* owner 2026-07-16: no gauge on the pill — just the balance */
.cred-pill:hover { border-color: rgba(0, 0, 0, .5); transform: translateY(-1px); }
.cred-n { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: .88rem; line-height: 1; }
.cr-arc { width: 30px; height: 17px; flex: none; }
.cr-arc-bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3; stroke-linecap: round; }
.cr-arc-fg {
  fill: none; stroke: url(#crGrad); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 37.7; stroke-dashoffset: 37.7;
  transition: stroke-dashoffset .6s ease;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .5));
}
.pp-bal-row { display: flex; align-items: center; gap: .6rem; }
.pp-bal-row .cr-arc { margin-top: 2px; }
.profile-btn {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 2px;
  background: var(--split); border: none; display: grid; place-items: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  transition: transform .12s ease, box-shadow .12s ease;
}
.profile-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0, .35); }
.profile-btn:active { transform: scale(.95); }
.profile-av {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: var(--split); color: var(--on-accent); font-weight: 800; font-size: .95rem;
}
.profile-pop {
  position: absolute; top: calc(100% + 10px); right: 0; width: 316px; display: none;
  background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 16px;
  padding: .55rem; z-index: 71; transform-origin: top right;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
}
.profile-pop.open { display: block; animation: pp-in .16s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes pp-in { from { opacity: 0; transform: scale(.97) translateY(-4px); } }

/* Full-width top nav bar (icon-only): the views that used to live in the
   sidebar — Gallery / Products / Avatar / Media Agent. Spans the workspace
   end to end at the top of .main; a header strip that pushes content down.
   Right padding keeps the last tab clear of the fixed profile pill. */
.top-nav {
  flex-shrink: 0; height: 56px; display: flex; align-items: center; gap: .3rem;
  padding: 0 230px 0 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* Go Farther wordmark in the Website Builder top bar (the section tabs are hidden
   there) — clicking it returns to the landing. Shown only in sites mode. */
.st-home {
  display: none; align-items: center; gap: .5rem; cursor: pointer;
  font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 900;
  font-size: 1.15rem; letter-spacing: -.02em; color: var(--text);
  height: 40px; padding: 0 .5rem; border-radius: 11px;
  transition: opacity .12s ease, transform .12s ease;
}
.st-home .logo-mark { width: 28px; height: 28px; }
.st-home:hover { opacity: .82; }
.st-home:active { transform: scale(.97); }
body.in-sites .st-home { display: inline-flex; }

/* Back-to-Builder button — only shown while a section view is open. */
.top-back {
  display: none; align-items: center; gap: .35rem; cursor: pointer;
  height: 40px; padding: 0 .8rem 0 .55rem; margin-right: .3rem;
  border-radius: 11px; border: 1px solid var(--line-2); background: transparent;
  color: var(--text); font: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.top-back.show { display: inline-flex; }
.top-back svg { width: 19px; height: 19px; }
.top-back:hover { background: rgba(255, 255, 255, .07); border-color: rgba(0, 0, 0, .5); }
.top-back:active { transform: scale(.97); }
.top-tab {
  height: 40px; border-radius: 11px; cursor: pointer; padding: 0 .85rem;
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.top-tab svg { width: 20px; height: 20px; flex: 0 0 20px; }
.top-tab .tt-label { line-height: 1; }
.top-tab:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.top-tab:active { transform: scale(.97); }
.top-tab.active { color: var(--text); background: rgba(255, 255, 255, .07); border-color: rgba(237, 234, 243, .55); font-weight: 700; }
.pp-head { display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem .75rem; }
.pp-av {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-accent); font-weight: 800; font-size: 1rem; background: var(--split);
}
.pp-id { min-width: 0; flex: 1; }
.pp-name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.pp-email { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-plan-tag {
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: .2rem .5rem;
}
/* Balance card — quiet centerpiece; opens one-time top-ups */
.pp-bal {
  display: flex; align-items: center; gap: .6rem; margin: .1rem .1rem .4rem;
  padding: .68rem .85rem; border-radius: 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-2);
  transition: border-color .12s ease;
}
.pp-bal:hover { border-color: rgba(255, 255, 255, .24); }
.pp-bal-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-bal-lbl { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pp-bal-n { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 600; font-size: 1.18rem; line-height: 1.2; }
.pp-bal-cta {
  margin-left: auto; flex-shrink: 0; background: none; color: var(--text);
  font-weight: 600; font-size: .78rem; padding: .34rem .72rem; border-radius: 999px;
  border: 1px solid var(--line-2); transition: border-color .12s ease, background .12s ease;
}
.pp-bal:hover .pp-bal-cta { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24); }
/* Membership upgrade — restrained card, single gradient accent */
.pp-upgrade {
  width: 100%; display: flex; align-items: center; gap: .6rem; cursor: pointer;
  margin: 0 .1rem .4rem; padding: .68rem .85rem; border-radius: 12px; text-align: left;
  background: linear-gradient(120deg, rgba(0,0,0, .07), rgba(0,0,0, .05));
  border: 1px solid rgba(0, 0, 0, .26); color: var(--text);
  transition: border-color .12s ease;
}
.pp-upgrade:hover { border-color: rgba(0, 0, 0, .5); }
.pp-up-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-up-t { font-weight: 600; font-size: .88rem; white-space: nowrap; }
.pp-up-s { font-size: .72rem; color: var(--muted); }
.pp-up-cta {
  margin-left: auto; flex-shrink: 0; background: var(--split); color: var(--on-accent);
  font-weight: 700; font-size: .76rem; padding: .36rem .72rem; border-radius: 999px;
}
.pp-row {
  width: 100%; display: flex; align-items: center; gap: .7rem; text-align: left;
  background: none; border: none; color: var(--text); cursor: pointer;
  padding: .62rem .75rem; border-radius: 11px; font-size: .9rem;
  transition: background .12s ease;
}
.pp-row:hover { background: var(--panel-2); }
.pp-ico { width: 20px; display: flex; align-items: center; justify-content: center; opacity: .75; flex: 0 0 20px; }
.pp-ico svg { width: 15px; height: 15px; }
.pp-txt { flex: 1; }
.pp-out:hover { color: #ff6b8a; }
.pp-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); margin: .35rem .3rem; }
@media (max-width: 900px) { .profile { top: 12px; right: 12px; } }

/* Settings panel (profile → Settings) */
.st-sec {
  margin: 1rem .1rem .5rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.st-acct {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-2);
}
.st-av {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-accent); font-weight: 800; font-size: .95rem; background: var(--split);
}
.st-id { min-width: 0; }
.st-name { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.st-mail { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-form { display: flex; gap: .5rem; }
.st-in {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 11px; padding: .62rem .8rem; color: var(--text);
  font-family: inherit; font-size: .88rem; outline: none;
  transition: border-color .12s ease;
}
.st-in:focus { border-color: rgba(0, 0, 0, .5); }
.st-in::placeholder { color: var(--muted); }
.st-save {
  flex-shrink: 0; background: var(--split); color: var(--on-accent); border: none;
  border-radius: 11px; padding: .62rem 1.05rem; font-weight: 700; font-size: .86rem; cursor: pointer;
  transition: transform .12s ease;
}
.st-save:hover { transform: translateY(-1px); }
.st-box { max-height: 88vh; overflow-y: auto; }
.st-id { flex: 1; }
/* plan badge in the account row */
.st-plan {
  margin-left: auto; flex-shrink: 0; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px;
  color: var(--muted); border: 1px solid var(--line-2);
}
.st-plan.paid { color: var(--on-accent); background: var(--split); border-color: transparent; }
/* Credits & plan link */
.st-link {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: .5rem; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: .7rem .85rem; cursor: pointer; color: var(--text); font: inherit;
  transition: border-color .12s ease;
}
.st-link:hover { border-color: rgba(0, 0, 0, .45); }
.st-link-t { font-weight: 600; font-size: .9rem; }
.st-link-v { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--muted); font-weight: 600; }
.st-chev { font-size: 1.1rem; line-height: 1; opacity: .6; }
/* preference rows */
.st-row { display: flex; align-items: center; gap: .8rem; padding: .75rem .3rem; }
.st-row + .st-row { border-top: 1px solid var(--line); }
.st-row-col { flex-direction: column; align-items: stretch; gap: .6rem; }
.st-row-txt { flex: 1; min-width: 0; }
.st-row-t { font-weight: 600; font-size: .9rem; }
.st-row-s { font-size: .76rem; color: var(--muted); line-height: 1.4; margin-top: .12rem; }
/* toggle switch */
.st-switch {
  position: relative; flex: 0 0 42px; width: 42px; height: 24px; border-radius: 999px;
  background: var(--line-2); border: 1px solid var(--line); cursor: pointer; padding: 0;
  transition: background .16s ease, border-color .16s ease;
}
.st-switch.on { background: var(--split); border-color: transparent; }
.st-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); transition: transform .16s ease;
}
.st-switch.on .st-knob { transform: translateX(18px); }
.st-switch:focus-visible { outline: 2px solid rgba(0, 0, 0, .7); outline-offset: 2px; }
/* segmented control */
.st-seg { display: flex; gap: .3rem; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 3px; }
.st-seg-btn {
  flex: 1; padding: .5rem; border: none; background: none; color: var(--muted);
  font: inherit; font-size: .84rem; font-weight: 600; border-radius: 8px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.st-seg-btn:hover { color: var(--text); }
.st-seg-btn.on { background: var(--split); color: var(--on-accent); }
/* sign out */
.st-signout {
  width: 100%; margin-top: 1rem; padding: .65rem; border-radius: 11px;
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.st-signout:hover { color: #ff6b8a; border-color: rgba(255, 107, 138, .45); }

/* ── Settings page (plain grouped-list view) ── */
.view-settings.active {
  flex-direction: column; overflow-y: auto; padding: 2.2rem 2rem 3rem;
  /* Ambient warm→violet glow, pinned to the view: background-attachment stays
     with the border box on an overflow container, so it doesn't scroll and the
     page reads soft rather than flat-black. */
  background:
    radial-gradient(780px 520px at 6% -8%, rgba(0, 0, 0, .10), transparent 62%),
    radial-gradient(700px 640px at 110% 32%, rgba(150, 92, 210, .12), transparent 60%);
}
.settings-page { width: 100%; max-width: 560px; margin: 0 auto; }
.sp-title { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 2.05rem; font-weight: 500; letter-spacing: -.005em; margin-bottom: .35rem; }
.sp-sub { color: var(--muted); font-size: .95rem; line-height: 1.5; margin-bottom: 1.9rem; }
.sp-group { margin-bottom: 1.6rem; }
.sp-glabel {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 .2rem .55rem;
}
.sp-list { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--panel); }
.sp-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1rem; }
.sp-item + .sp-item { border-top: 1px solid var(--line); }
.sp-item-l { min-width: 0; }
.sp-item-t { display: block; font-weight: 600; font-size: .9rem; }
.sp-item-s { display: block; font-size: .78rem; color: var(--muted); margin-top: .12rem; line-height: 1.4; }
.sp-item-r { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; color: var(--muted); font-weight: 600; font-size: .88rem; }
.sp-acct-l { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.sp-tap { width: 100%; border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .12s ease; }
.sp-tap:hover { background: var(--panel-2); }
.sp-form { gap: .5rem; }
.sp-form[hidden] { display: none; }
.sp-chev { display: inline-block; transition: transform .15s ease; }
.sp-tap.open .sp-chev { transform: rotate(90deg); }
.sp-note { margin: .5rem .2rem 0; }
/* Integrations — connect-app rows: brand icon + label, Connect button on the right. */
.ig-item .sp-item-l { display: flex; align-items: center; gap: .8rem; }
.ig-txt { min-width: 0; }
.ig-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.ig-ico svg { width: 38px; height: 38px; display: block; }
.ig-connect {
  background: none; border: 1px solid var(--line-2); color: var(--text);
  font: inherit; font-weight: 600; font-size: .82rem; padding: .45rem .95rem;
  border-radius: 999px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.ig-connect:hover:not([disabled]) { border-color: #1e1e22; background: var(--panel-2); }
.ig-connect[disabled] { opacity: .6; cursor: default; }
.ig-connect.ig-dis:hover:not([disabled]) { border-color: rgba(255, 120, 120, .6); color: #ff9a9a; background: none; }
.sp-signout {
  width: 100%; margin-top: .3rem; padding: .8rem; border-radius: 12px;
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.sp-signout:hover { color: #ff6b8a; border-color: rgba(255, 107, 138, .4); }
.sp-signout-all {
  width: 100%; margin-top: .55rem; padding: .35rem; background: none; border: none;
  color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; opacity: .75;
  transition: opacity .12s ease, color .12s ease;
}
.sp-signout-all:hover { color: var(--text); opacity: 1; }
.sp-red { color: #ff6b8a; }
@media (max-width: 900px) { .view-settings.active { padding: 1.5rem 1rem 2.5rem; } }

/* Page-header pattern (born on the removed Products page; the Avatar page
   keeps using it): pr-head headline + "or" divider + white action button. */
.pr-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.pr-head p { color: var(--muted); font-size: .92rem; margin-top: .35rem; max-width: 460px; }
.pr-or { color: var(--muted); font-size: .9rem; }
.pr-manual { background: #fff; color: var(--text); border: 1px solid var(--line-2); border-radius: 11px; padding: .62rem 1.1rem; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: transform .12s ease; }
.pr-manual:hover { transform: translateY(-1px); }

/* ── Avatar page ── */
.view-avatar.active { flex-direction: column; overflow-y: auto; padding: 2.4rem 2rem 3rem; }
.av-page { width: 100%; }
/* Empty state = the Products page pattern (owner's pick, design 1): pr-head
   headline + one action row. */
.av-start { display: flex; align-items: center; gap: .85rem; margin: 1.6rem 0 1.9rem; flex-wrap: wrap; }
.av-start-gen {
  background: var(--split); color: var(--on-accent); border: none; border-radius: 11px;
  padding: .66rem 1.15rem; font: inherit; font-weight: 700; font-size: .9rem;
  cursor: pointer; transition: transform .12s ease;
}
.av-start-gen:hover { transform: translateY(-1px); }
.av-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.av-top h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.av-top-btns { display: flex; gap: .6rem; }
.av-mini {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font: inherit;
  font-weight: 600; font-size: .85rem; padding: .5rem .9rem; border-radius: 10px; cursor: pointer;
  transition: border-color .12s ease;
}
.av-mini:hover { border-color: rgba(0, 0, 0, .5); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.av-card { position: relative; }
.av-thumb { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line-2); }
.av-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-thumb-ph { display: grid; place-items: center; font-size: 2rem; opacity: .5; }
.av-name { margin-top: .5rem; font-size: .85rem; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(10, 9, 14, .6); backdrop-filter: blur(6px); color: #fff; font-size: .8rem; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.av-card:hover .av-del { opacity: 1; }
@media (max-width: 640px) { .view-avatar.active { padding: 1.5rem 1rem 2.5rem; } }

/* ── Media Agent (social connections) ── */
.view-media-agent.active { flex-direction: column; overflow-y: auto; padding: 2.4rem 2rem 3rem; }
/* Wide workspace on every tab (owner's call 2026-07-11): 1420px fits 4 YouTube
   video cards / 6 IG post cards per row at the same card sizes the old 720px
   panel had — grids gain columns, cards keep their size. */
.ma-page { width: 100%; }
.ma-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.ma-head p { color: var(--muted); font-size: .92rem; margin-top: .35rem; max-width: 520px; line-height: 1.5; }
.ma-msg {
  margin-top: 1.3rem; padding: .7rem .9rem; border-radius: 12px; font-size: .88rem; line-height: 1.45;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
}
.ma-msg a { color: #000000; }
.ma-msg-ok { border-color: rgba(120, 220, 150, .5); }
.ma-msg-warn { border-color: rgba(0, 0, 0, .5); }
.ma-conns { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.ma-note { color: var(--muted); font-size: .9rem; padding: 1.2rem 0; }
.ma-conn {
  display: flex; align-items: center; gap: 1rem;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 1rem 1.1rem;
}
.ma-conn-ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.ma-conn-ico svg { width: 24px; height: 24px; }
.ma-ico-instagram { background: linear-gradient(135deg, #feda75, #d62976 50%, #4f5bd5); }
.ma-ico-youtube { background: #ff0033; }
.ma-conn-info { flex: 1; min-width: 0; }
.ma-conn-name { font-size: 1rem; font-weight: 700; }
.ma-conn-sub { color: var(--muted); font-size: .82rem; margin-top: .12rem; }
.ma-pill {
  font-size: .74rem; font-weight: 700; padding: .32rem .6rem; border-radius: 999px;
  color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); white-space: nowrap;
}
.ma-pill.on { color: #7ee0a0; border-color: rgba(120, 220, 150, .5); }
.ma-pill.wait { color: #000000; border-color: rgba(0, 0, 0, .5); }
.ma-btn {
  font: inherit; font-weight: 700; font-size: .85rem; padding: .5rem .95rem; border-radius: 11px;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.ma-btn[disabled] { opacity: .6; cursor: default; }
.ma-btn-on { color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); }
.ma-btn-on:hover:not([disabled]) { filter: brightness(1.06); }
.ma-btn-off { color: var(--text); background: none; border-color: var(--line-2); }
.ma-btn-off:hover:not([disabled]) { border-color: rgba(255, 120, 120, .6); color: #ff9a9a; }
/* Media Agent app switcher — logo-only square tiles (linking lives in Integrations) */
.app-switch { margin-top: 1.5rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.app-tile {
  position: relative; width: 58px; height: 58px; border-radius: 16px;
  border: 1px solid var(--line-2); background: var(--panel); cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease;
}
.app-tile:hover { background: var(--panel-2); }
.app-tile.on { background: var(--panel-2); }
.app-tile.on::before {
  content: ''; position: absolute; inset: -1px; border-radius: 16px; padding: 2px;
  background: var(--split);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.app-tile-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.app-tile-ico svg { width: 22px; height: 22px; }
.app-tile .cdot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(237, 234, 243, .3); border: 2px solid var(--bg);
}
.app-tile .cdot.on { background: #7ee0a0; }
/* Media Agent per-app panel + section tabs */
.app-main { margin-top: 1.1rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); overflow: hidden; }
.app-empty { padding: 2.4rem 1.2rem; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: .92rem; }
.sec-tabs { display: flex; gap: .15rem; padding: .5rem .7rem 0; border-bottom: 1px solid var(--line-2); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.sec-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sec-tab { font: inherit; font-size: .88rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: .6rem .85rem .7rem; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.sec-tab:hover { color: var(--text); }
.sec-tab.on { color: var(--text); border-bottom-color: #1e1e22; }
.sec-body { padding: 1.2rem; }
.sec-loading { color: var(--muted); font-size: .9rem; padding: 1.4rem .2rem; }
.an-retry { font: inherit; font-size: .82rem; font-weight: 600; color: var(--neon); background: none; border: none; cursor: pointer; padding: 0 .2rem; }
.sec-soon { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.sec-soon-s { font-size: .82rem; margin-top: .3rem; opacity: .8; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.stat { border: 1px solid var(--line-2); border-radius: 13px; background: var(--panel); padding: .85rem .9rem; min-width: 0; display: flex; flex-direction: column; min-height: 90px; }
.stat-l { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; }
.stat-v { font-size: 1.4rem; font-weight: 800; margin-top: auto; padding-top: .3rem; letter-spacing: -.02em; }
.card { margin-top: 1.1rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); padding: 1rem 1.05rem 1.1rem; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .7rem; }
.card-t { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.card-legend { font-size: .78rem; color: var(--muted); }
.sec-sub { margin: 1.3rem 0 .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prow { display: flex; align-items: center; gap: .8rem; padding: .6rem .2rem; border-top: 1px solid var(--line); }
.prow:first-of-type { border-top: none; }
.pthumb { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: linear-gradient(135deg, rgba(0,0,0, .4), rgba(0,0,0, .4)); background-size: cover; background-position: center; }
.pmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps { font-size: .75rem; color: var(--muted); }
.pnum { font-size: .82rem; color: var(--muted); font-weight: 600; min-width: 60px; text-align: right; }
/* YouTube analytics */
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.pthumb-wide { width: 64px; flex-basis: 64px; height: 38px; border-radius: 7px; }
button.prow { width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; color: var(--text); font: inherit; }
button.prow:first-of-type { border-top: none; }
button.prow:hover { background: rgba(255, 255, 255, .03); }
.yt-chan { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.yt-chan-av { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,0,0, .4), rgba(0,0,0, .4)); background-size: cover; background-position: center; }
.yt-chan-meta { min-width: 0; display: flex; flex-direction: column; }
.yt-chan-t { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-chan-h { color: var(--muted); font-size: .82rem; }
/* 4 across in the wide panel = same ~332px card as the old 2-up/720px layout;
   step down columns on narrower windows so card size stays steady. */
.ytg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1460px) { .ytg { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .ytg { grid-template-columns: repeat(2, 1fr); } }
.ytv { display: flex; flex-direction: column; gap: .4rem; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.ytv-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 11px; border: 1px solid var(--line-2); background: linear-gradient(135deg, rgba(0,0,0, .35), rgba(0,0,0, .35)); background-size: cover; background-position: center; }
.ytv:hover .ytv-thumb { filter: brightness(1.07); }
.ytv-t { font-weight: 600; font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytv-m { font-size: .78rem; color: var(--muted); }
.ytv-thumb { position: relative; }
.ytv-pl { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .72); color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .45rem; border-radius: 6px; }
@media (max-width: 560px) { .ytg { grid-template-columns: 1fr; } }
/* Posts grid */
.posts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.posts-count { font-size: .86rem; color: var(--muted); font-weight: 600; }
.posts-sort { display: flex; gap: .35rem; }
.psort { font: inherit; font-size: .8rem; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 8px; padding: .35rem .7rem; cursor: pointer; }
.psort.on { color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border-color: transparent; }
.posts-ctrls { display: flex; align-items: center; gap: .5rem; }
.posts-add { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .12s ease, background .12s ease, color .12s ease; }
.posts-add:hover { background: linear-gradient(90deg, #1e1e22, #000000); color: var(--on-accent); border-color: transparent; transform: translateY(-1px); }
.ma-pub-back { background: none; border: none; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; padding: 0; }
.ma-pub-back:hover { color: var(--text); }
.pub-pick { display: flex; gap: .5rem; flex-wrap: wrap; }
.pub-pick-btn { font-size: .85rem; }
.pub-preview { display: none; }
.pub-preview.on { display: inline-block; position: relative; margin-bottom: .5rem; align-self: flex-start; width: max-content; }
.pub-preview img { max-width: 180px; max-height: 180px; border-radius: 11px; border: 1px solid var(--line-2); display: block; }
.pub-preview-load, .pub-preview-vid { font-size: .85rem; color: var(--muted); padding: .8rem 1rem; border: 1px dashed var(--line-2); border-radius: 11px; display: inline-block; }
.pub-preview-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .62); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .12s ease; }
.pub-preview-x:hover { background: rgba(0, 0, 0, .85); }
.gal-cell { position: relative; padding: 0; border: none; background: none; cursor: pointer; display: block; }
.gal-cell-k { position: absolute; top: 8px; right: 8px; font-size: .6rem; font-weight: 700; letter-spacing: .04em; background: rgba(0, 0, 0, .68); color: #fff; padding: .18rem .4rem; border-radius: 6px; }
/* 6 across in the wide panel = same ~215px tile as the old 3-up/720px layout. */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; }
@media (max-width: 1460px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.post { display: block; text-align: left; padding: 0; border: 1px solid var(--line-2); border-radius: 13px; overflow: hidden; background: var(--panel); cursor: pointer; font: inherit; color: var(--text); transition: filter .12s ease, border-color .12s ease; }
.post:hover { filter: brightness(1.06); border-color: var(--line-2); }
.post-media { display: flex; aspect-ratio: 1; align-items: flex-start; justify-content: flex-end; padding: .5rem; background: linear-gradient(135deg, rgba(0,0,0, .3), rgba(0,0,0, .3)); background-size: cover; background-position: center; }
.post-k { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: rgba(0, 0, 0, .5); border-radius: 6px; padding: .15rem .4rem; }
.post-nums { display: flex; justify-content: space-between; padding: .55rem .7rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } .grid { grid-template-columns: repeat(2, 1fr); } }
/* DMs tab: drop the standalone card chrome, list runs full-width in the panel */
.sec-body .ma-dm { margin-top: 0; border: none; border-radius: 0; background: none; }
.ma-dm-list-full { border-right: none; max-height: 62vh; }
/* Comments feed */
.cmt-list { display: flex; flex-direction: column; }
.cmt { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .2rem; border-top: 1px solid var(--line); }
.cmt:first-child { border-top: none; }
.cmt-av { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--on-accent); background: linear-gradient(135deg, #1e1e22, #000000); }
.cmt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.cmt-user { font-weight: 600; font-size: .86rem; }
.cmt-text { font-size: .9rem; line-height: 1.45; color: var(--text); word-wrap: break-word; }
.cmt-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--line-2); padding: 0; cursor: pointer; background-color: var(--panel); background-size: cover; background-position: center; }
button.cmt-thumb:hover { border-color: var(--line-2); filter: brightness(1.08); }
.cmt-reply-btn { align-self: flex-start; margin-top: .25rem; background: none; border: none; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; padding: 0; }
.cmt-reply-btn:hover { color: var(--text); }
.cmt-reply { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; width: 100%; }
.cmt-reply-in { flex: 1; min-width: 160px; font: inherit; font-size: .86rem; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 9px; padding: .5rem .7rem; }
.cmt-reply-in:focus { outline: none; border-color: rgba(0,0,0, .6); }
.cmt-reply-send { font-size: .82rem; padding: .45rem .9rem; }
.cmt-reply-status { font-size: .78rem; color: var(--muted); }
.cmt-reply-status.ok { color: #7ee0a0; }
.cmt-reply-status.warn { color: #ff9a9a; }
/* Auto reply config */
.ar-subtabs { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel); margin-bottom: 1.3rem; }
.ar-subtab { font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); background: none; border: none; border-radius: 8px; padding: .45rem 1.1rem; cursor: pointer; }
.ar-subtab.on { color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); }
.ar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--line-2); border-radius: 13px; background: var(--panel); }
.ar-row-t { font-weight: 700; font-size: .95rem; }
.ar-row-s { font-size: .8rem; color: var(--muted); margin-top: .15rem; line-height: 1.4; }
.ar-switch { position: relative; flex: 0 0 46px; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .06); cursor: pointer; transition: background .15s ease; }
.ar-switch.on { background: linear-gradient(90deg, #1e1e22, #000000); border-color: transparent; }
.ar-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.ar-switch.on .ar-knob { transform: translateX(20px); }
.ar-field { margin-top: 1.2rem; }
.ar-label { font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .5rem; }
.ar-hint { font-weight: 400; opacity: .8; }
.ar-prompt { width: 100%; min-height: 150px; resize: vertical; font: inherit; font-size: .92rem; line-height: 1.55; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 12px; padding: .8rem .9rem; }
.ar-prompt:focus { outline: none; border-color: rgba(0, 0, 0, .5); }
.ar-foot { margin-top: 1.1rem; display: flex; align-items: center; gap: .9rem; }
.ar-status { font-size: .85rem; font-weight: 600; color: var(--muted); }
.ar-status.ok { color: #7ee0a0; }
.ar-status.warn { color: #ff9a9a; }
/* Media Agent chat */
.ma-chat { margin-top: 2rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); overflow: hidden; }
.ma-chat-head {
  padding: .8rem 1.1rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line-2);
}
.ma-thread { min-height: 180px; max-height: 46vh; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.ma-bub { max-width: 82%; padding: .65rem .9rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; white-space: normal; word-wrap: break-word; }
.ma-bub-user { align-self: flex-end; background: linear-gradient(135deg, rgba(0,0,0, .22), rgba(0,0,0, .22)); border: 1px solid var(--line-2); }
.ma-bub-assistant { align-self: flex-start; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); }
.ma-bub b { font-weight: 700; }
.ma-empty-chat { color: var(--muted); font-size: .9rem; }
.ma-empty-chat p { margin-bottom: .7rem; }
.ma-suggests { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.ma-suggest {
  font: inherit; font-size: .85rem; text-align: left; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 11px; padding: .5rem .8rem;
}
.ma-suggest:hover { border-color: rgba(0, 0, 0, .5); }
.ma-typing { display: inline-flex; gap: 4px; align-items: center; }
.ma-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ma-blink 1.2s infinite both; }
.ma-typing span:nth-child(2) { animation-delay: .2s; }
.ma-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ma-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ma-composer { display: flex; gap: .6rem; padding: .8rem; border-top: 1px solid var(--line-2); }
.ma-input {
  flex: 1; min-width: 0; font: inherit; font-size: .92rem; color: var(--text);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 12px; padding: .6rem .9rem;
}
.ma-input:focus { outline: none; border-color: rgba(0, 0, 0, .5); }
.ma-send {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; border: none; cursor: pointer;
  color: var(--on-accent); font-size: 1.1rem; font-weight: 800; background: linear-gradient(135deg, #1e1e22, #000000);
}
.ma-send:hover { filter: brightness(1.06); }
/* Media Agent publish panel */
.ma-publish { margin-top: 1.6rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); overflow: hidden; }
.ma-pub-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.ma-pub-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ma-pub-tabs { display: flex; gap: .4rem; }
.ma-pub-tab {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 9px; padding: .35rem .8rem;
}
.ma-pub-tab.on { color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border-color: transparent; }
.ma-pub-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.ma-pub-l { font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: .5rem; }
.ma-pub-hint { font-weight: 400; opacity: .8; }
.ma-pub-in {
  font: inherit; font-size: .9rem; color: var(--text); width: 100%;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 11px; padding: .55rem .8rem;
}
.ma-pub-in:focus { outline: none; border-color: rgba(0, 0, 0, .5); }
.ma-pub-ta { min-height: 70px; resize: vertical; }
select.ma-pub-in { appearance: none; cursor: pointer; }
.ma-pub-foot { margin-top: 1rem; }
.ma-pub-submit { width: 100%; }
.ma-pub-confirm {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem .9rem; border-radius: 12px; font-size: .88rem;
  background: rgba(0, 0, 0, .1); border: 1px solid rgba(0, 0, 0, .45);
}
.ma-pub-cbtns { display: flex; gap: .5rem; }
.ma-pub-res { margin-top: .8rem; padding: .6rem .8rem; border-radius: 11px; font-size: .88rem; border: 1px solid var(--line-2); }
.ma-pub-res a { color: #000000; font-weight: 700; }
.ma-pub-res-ok { border-color: rgba(120, 220, 150, .5); }
.ma-pub-res-warn { border-color: rgba(0, 0, 0, .55); }
.ma-pub-res-busy { color: var(--muted); }
/* Schedule post (Instagram) — the "not published yet" flag + the queue cards */
.sch-flag { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #000000; border: 1px solid rgba(0, 0, 0, .45); border-radius: 999px; padding: .18rem .55rem; }
.sch-urlprev { padding: .8rem; color: var(--muted); font-size: .85rem; word-break: break-all; }
.sch-prev-k { position: absolute; left: .5rem; bottom: .5rem; font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border-radius: 6px; padding: .12rem .4rem; }
/* Schedule: two columns — composer left, calendar right */
.sch-wrap { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.sch-left { flex: 1 1 340px; min-width: 320px; }
.sch-left .ma-publish { margin-top: 0; }
.sch-right { flex: 1 1 420px; min-width: 340px; }
.scal { border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); padding: 1rem 1.1rem 1.1rem; }
.scal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.scal-title { font-size: .95rem; font-weight: 700; color: var(--text); }
.scal-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--text); font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.scal-nav:hover { border-color: rgba(0, 0, 0, .55); color: #000000; }
.scal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin-bottom: .35rem; }
.scal-dow { text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.scal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.scal-cell { min-height: 62px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, .02); padding: .3rem .35rem; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; cursor: pointer; overflow: hidden; text-align: left; transition: border-color .12s ease, background .12s ease; }
.scal-cell.scal-empty { border-color: transparent; background: none; cursor: default; }
.scal-cell:not(.scal-empty):hover { border-color: rgba(0, 0, 0, .5); }
.scal-cell.today { border-color: rgba(0, 0, 0, .55); }
.scal-cell.has { background: rgba(0, 0, 0, .07); }
.scal-cell.sel { border-color: transparent; box-shadow: 0 0 0 2px #1e1e22; background: rgba(0, 0, 0, .12); }
.scal-n { font-size: .78rem; font-weight: 600; color: var(--muted); }
.scal-cell.today .scal-n, .scal-cell.has .scal-n { color: var(--text); }
.scal-chips { display: flex; flex-direction: column; gap: .2rem; width: 100%; }
.scal-chip { display: flex; align-items: center; gap: .25rem; font-size: .62rem; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); border-radius: 6px; padding: .12rem .2rem; overflow: hidden; }
.scal-chip-th { flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, .08) center/cover no-repeat; display: grid; place-items: center; font-size: .62rem; }
.scal-chip-th-none { color: var(--muted); }
.scal-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scal-more { font-size: .6rem; color: var(--muted); padding-left: .1rem; }
.scal-day { margin-top: 1rem; border-top: 1px solid var(--line-2); padding-top: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.scal-day-h { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.scal-item { display: flex; align-items: center; gap: .7rem; }
.scal-thumb { flex-shrink: 0; width: 42px; height: 42px; border-radius: 9px; background: rgba(255, 255, 255, .05) center/cover no-repeat; display: grid; place-items: center; font-size: 1.15rem; color: var(--muted); }
.scal-item-meta { flex: 1; min-width: 0; }
.scal-item-cap { font-size: .88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scal-item-sub { font-size: .76rem; color: var(--muted); margin-top: .15rem; }
/* ── Websites — the standalone website builder (frontend preview) ── */
/* Its ONLY entrance is the landing's WEBSITE channel; while open, the studio
   chrome vanishes — no chats sidebar, no section tabs, no back arrow. */
body.in-sites .sidebar { display: none; }
body.in-sites .top-tab, body.in-sites .top-back { display: none !important; }
.view-sites.active { flex-direction: column; overflow-y: auto; padding: 2.4rem 2rem 3rem; }
.view-sites.ws-open { padding: .8rem 1rem 1rem; overflow: hidden; }
.st-page { width: 100%; max-width: 1080px; margin: 0 auto; }
/* Start screen: a centered hero (Lovable-style home) — big ask, input below. */
.st-hero { max-width: 720px; margin: 8.5vh auto 0; text-align: center; }
/* SITTING LOWER WHEN THE HERO IS THE WHOLE PAGE. At 8.5vh the composer ended
   around 44% down a 900px screen and left HALF the viewport empty under it,
   which is what reads as floating too high. Scoped to the no-sites state on
   purpose: with a grid below, the same offset pushes the first row of cards off
   the fold, so the state that looks better is not the state that matters.
   `:not(:has(.st-grid))` says that condition out loud — `:only-child` would do
   it too and would silently stop applying the day anything else is appended. */
.st-page:not(:has(.st-grid)) .st-hero { margin-top: min(26vh, 15rem); }
/* Glowing orb (mirrors the video-generator hero), with two drifting sparks. */
.st-hero h1 { font-size: clamp(2rem, 3.7vw, 3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.04; }
.st-grad { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-hero p { color: var(--muted); font-size: 1rem; margin-top: .7rem; line-height: 1.5; display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
/* Glass composer — one calm surface, no chrome inside; the panel is the border. */
.st-new { margin-top: 2rem; text-align: left; border: 1px solid var(--line-2); border-radius: 20px; background: var(--panel); padding: 1.1rem 1.15rem .8rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .42); transition: border-color .18s ease, box-shadow .18s ease; }
.st-new:focus-within { border-color: rgba(0, 0, 0, .42); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .07); }
.st-hero .st-in { width: 100%; font: inherit; font-size: 1.04rem; line-height: 1.5; color: var(--text); background: transparent; border: none; border-radius: 0; padding: .35rem .3rem; resize: none; min-height: 3.2rem; }
.st-hero .st-in:focus { outline: none; }
.st-new-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .55rem; flex-wrap: wrap; }
/* ONE AUTO MARGIN ON THIS ROW, AND IT IS THE SEND BUTTON'S. Three elements here
   each carry one of their own, written for the row each was designed in:
   `.st-attbtn` has `margin-right: auto` (line ~1933), `.st-buildsel-wrap` has
   `margin-right: auto` so that in the COMPOSER row it pushes the effort dial and
   the send button right, and `.st-gen` has `margin-left: auto`. Auto margins
   split the free space between them, so with two live the row read Attach —
   space — chip — space — ↑, the chip adrift in the middle looking like a third
   unrelated thing rather than one of the controls: measured 105.72px to each of
   the two before the builder chip was added here on 2026-09-07, and 70.48px to
   each of three after. Whichever way it divides, it is nobody's intent.
   `.st-gen`'s is the one that belongs to this row — the send button is the thing
   that must sit at the right — so everything before it gives its up and the
   controls group on the left: Attach · Builder ————— ↑
   `.stg-foot .st-attbtn` below does exactly this, for exactly this reason. */
.st-new-foot .st-attbtn, .st-new-foot .st-buildsel-wrap { margin-right: 0; }
.st-hint { color: var(--muted); font-size: .8rem; }
/* Send — round gradient button, mirroring the studio composer. */
.st-gen {
  width: 44px; height: 44px; border-radius: 50%; margin-left: auto; flex: none;
  display: grid; place-items: center; color: var(--on-accent); cursor: pointer;
  background: var(--split); border: none;
  box-shadow: 0 6px 20px -3px rgba(0,0,0, .5);
  transition: box-shadow .18s ease, transform .15s ease;
}
.st-gen:hover { transform: translateY(-1px); box-shadow: 0 9px 26px -4px rgba(0,0,0, .7); }
.st-gen svg { display: block; }
.st-price, .st-arrow { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.st-arrow { font-size: 1.05rem; }
.st-gen-sm { font-size: .85rem; padding: .55rem .95rem; align-self: flex-end; }
.st-grid-h { margin: 2rem 0 .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* THREE PAIRS ACROSS, NOT FOUR CARDS (owner, 2026-09-09: "instead of 4 , just 3
   horizontally , so one square with the site , and one wiht the mobile app").
   `auto-fill`/`minmax` filled the 1080px page with four 258px cards; each cell
   now holds a site and the mobile app beside it, so the count is stated rather
   than derived from a minimum width. The two breakpoints are what stop three
   pairs from putting a card under 200px on a laptop. */
/* THE TWO AXES ARE SET APART, and that is the point rather than a tidy-up
   (owner, 2026-09-09: "leave more space between every3" -> "i mean like floor
   one to floor 2"). At one `gap` for both, the space between a phone and the
   next site was 16px and the space INSIDE a pair was 16.8 — so six columns read
   as six columns, and a row ran straight into the one under it. The row gap is
   what says "that was a floor, this is the next one".
   WRITTEN AS TWO NAMED DECLARATIONS, never the `gap: <row> <column>` shorthand:
   `row-gap:` CONTAINS `gap:`, so a guard reading the column gap out of this rule
   would match whichever came first and silently take the wrong number into the
   card-width arithmetic below. Naming both removes the question. */
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1rem; row-gap: 6.5rem; }
@media (max-width: 1180px) { .st-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .st-grid { grid-template-columns: 1fr; } }
/* THE PHONE IS THE SITE SQUARE'S HEIGHT BY ARITHMETIC, NOT BY A NUMBER TYPED IN
   (owner: "the phone same height as the square"). Two ratios decide it and the
   column is their product:

     thumbnail   .st-card-prev  aspect-ratio: 16/10   -> tall as card_w x 10/16
     handset     .st-app-phone  aspect-ratio: 390/844 -> that tall is x 390/844 wide
     so the column is card_w x (10/16) x (390/844) = card_w x .2888

   Hence `1fr .2888fr`, with the phone at `width: 100%`. The two then line up at
   EVERY width rather than only at the size this was drawn at. MEASURED: phone
   162 against a 160 thumbnail at 1920 and at 1512, 239/238 at 1100 (two across),
   300/299 at 700 (one), tops within a pixel each time.
   THE HANDSET RATIO IS THE WORKSPACE PANEL'S OWN (`.st-mob-device`, 390/844), so
   the two phones this app draws are one shape rather than two near-misses — and
   `test/site-card-phone.test.mjs` recomputes this column from both ratios rather
   than pinning it, so moving either one goes red here instead of drifting.
   A FIXED px COLUMN WOULD LOOK RIGHT HERE AND BREAK AT THE BREAKPOINTS — the
   card widens to 382 and then 480, so a phone frozen at 75 would sit beside a
   thumbnail half as tall again as itself.
   AND THE GAP IS WHAT HOLDS THE CARD AT THE WIDTH IT HAS TODAY: a pair is 349.3
   at three across, and 258 + 258 x .2888 leaves 16.8 for it — `1.05rem`. The card
   measures 258, which is what it measured at four across before this. */
/* TWO ROWS: the database above, the site and its phone below. Row 2 is `1fr` so
   the card still stretches to the tallest pair in its grid row — `auto auto`
   would leave a short card floating in a tall row. The two axes are named
   separately here for the same reason they are on `.st-grid`: `row-gap:`
   contains `gap:`, and the card-width check reads the COLUMN gap out of this
   rule.
   THE ROW GAP IS THE ONE THING THAT CAN RAISE THE DATABASE, and that is a
   property of the layout rather than a preference: row 1 starts at the pair's
   own top edge, so the icon is ALREADY as high as it can go inside the pair —
   "higher" can only mean more air between it and the card, which is this
   number. .5rem when it shipped, then 1.25, 1.75 and 2.25rem across three "a bit
   higher" asks: measured 8px, 20px, 28px and 36px above the card. It moves
   NOTHING else — not the card's width, not the phone, not the columns, not the
   space between the rows of the grid — which is why it can be tuned freely and
   why no guard pins the amount.
   IT IS `--db-drop` BECAUSE THE WIRES FILL IT. That distance is now two things
   at once — the air above the card, and the height of the box the wires are
   drawn in — and they are one custom property so they cannot drift: a row gap
   larger than the wires leaves them hanging short of the card, smaller and they
   run over it. `--db-x` is where the database sits across the pair, and
   `siteWires` in chat.js computes the same number from the same two landings.
   Both live here, on the pair, because everything that reads them is inside it. */
.st-pair { --db-drop: 2.25rem; --db-x: 63.3%; display: grid; grid-template-columns: 1fr .2888fr; grid-template-rows: auto 1fr; column-gap: 1.05rem; row-gap: var(--db-drop); align-items: stretch; }
/* THE DATABASE IS HALF THE PAIR AND CENTRED OVER BOTH OF THEM (owner: "the
   width of the site and the mobile app together is 100 … the database has to be
   50 … outside the square but in the middle on top of each of them"). Spanning
   both columns is what makes "the middle" the middle of the PAIR rather than of
   the card, and `width: 50%` is the owner's own number, of the pair rather than
   of either half. MEASURED: pair 349, site 73.9%, phone 21.3%, database 50.0%,
   centred to the pixel.
   JUST THE ICON — no box, no label. The owner was shown a pill and a labelled
   bar and picked the bare glyph. The 50% is still real: it is the hit area, so
   the control is easy to hit without drawing a box around it.
   AND ITS CENTRE IS `--db-x`, NOT THE PAIR'S OWN HALFWAY MARK (owner,
   2026-09-09: "the database thing more to the right so its in the middle, no
   matter if its not 50 in the middle"). The pair's two halves are 74% and 21%
   wide, so the middle of the PAIR is not the middle of the two THINGS, and the
   wires are what made that visible. `margin-left` puts the box's own centre on
   `--db-x`: half of 50% is 25%, so the left edge goes a quarter of the pair to
   the left of it. Both percentages resolve against the wrapper, which spans the
   whole pair, so this holds at every width without a media query.
   THE WRAPPER EXISTS FOR THE WIRES: they hang below the icon with `top: 100%`,
   which needs something whose bottom edge IS the icon's bottom edge, and that
   is the one way to place them without typing the icon's height in. */
.st-dbwrap { grid-column: 1 / -1; position: relative; color: var(--text); }
.st-db {
  width: 50%; margin-left: calc(var(--db-x) - 25%);
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0;
  color: inherit; cursor: pointer;
}
/* THE WIRES FILL THE GAP THE ICON WAS RAISED BY, exactly — the stroke is the
   glyph's own 1.85 scaled by the 17/24 `ic()` draws it at, so a wire reads as
   the same pen as the thing it leaves from. `overflow: visible` because the
   round caps sit a hair outside the box. */
.st-wires {
  position: absolute; top: 100%; left: 0; width: 100%; height: var(--db-drop);
  fill: none; stroke: currentColor; stroke-width: 1.31;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; overflow: visible;
}
.st-wires path { vector-effect: non-scaling-stroke; }
/* A LIVE WIRE IS GREEN, AND AN IDLE ONE IS EXACTLY WHAT IT WAS. The base rule
   above keeps `currentColor`, so a site with no database draws the same two
   graphite curves it drew yesterday and this change is invisible on it. Only
   the marked path takes the token, which is what makes green mean one thing:
   the database at the top of this pair is wired to the thing this wire lands
   on. `.st-wires .live` (0,2,0) beats `.st-wires` inheriting to the path, so
   the stroke really moves — a bare `.live` would too, and is not used, because
   a class that loose is one somebody else's rule collides with. */
.st-wires .live { stroke: var(--wire-live); }
/* THE LINES ARE DARK IN BOTH STATES, ON THE OWNER'S OWN INSTRUCTION (2026-09-09:
   "ALSO PUT IT DARK THE LINES , NO MATTER IF ITSD ON IR OFF"). `--text` is
   `--graphite`, the palette's darkest lead.
   THIS IS A DELIBERATE EXCEPTION TO THIS APP'S OWN RULE, so it is written down
   rather than left to look like a drift: everything else here dims when it is
   disabled (`.st-card-act:disabled` one rule down, which a sweep once caught
   going missing), because a control that is inert and does not LOOK inert is
   the thing this repo keeps finding. The owner has overruled that for this one
   icon, so what a site with no database now has is a control that reads exactly
   like a live one — the tooltip and the dead press are what say otherwise.
   And with the ink already at the darkest lead there is nothing left for a
   hover or a transition to move, so both are GONE rather than kept as rules
   that do nothing. */
.st-db:disabled { cursor: default; }
.st-db:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
/* The mobile app, beside the site and not inside it. `align-content: start` is
   what keeps the phone level with the thumbnail while the card stretches to the
   tallest in its row. */
.st-app { min-width: 0; display: grid; align-content: start; gap: .12rem; }
/* THE BOX THE PHONE SITS IN, AND ITS RATIO IS FIXED ON PURPOSE (2026-09-09,
   owner: "THE SITE SQUARE THING MOVES , WHEN I TAP TO SWICTH").
   The two phones are different SHAPES, so a phone that took the column's width
   directly came out 4px taller on Android — and the pair's second row is `1fr`
   with stretched items, so that grew the tile, the card, and every other card in
   the same grid row. MEASURED before the fix: 3.9px at 1512, 5.8 at 1100, 7.4 at
   700, with the neighbouring card moving too.
   This box takes the column's width and NEVER changes shape, so the row's height
   is decided once. 390/844 is the ratio the column arithmetic was derived from,
   which is why the phone inside now stands exactly as tall as the thumbnail
   rather than within a couple of pixels of it. It must stay a literal: a
   `var(--os-ratio)` here would put the movement straight back. */
.st-app-screen { width: 100%; aspect-ratio: 390 / 844; display: flex; justify-content: center; }
.st-app-phone {
  /* HEIGHT-LED INSIDE THAT BOX — the workspace panel's own answer for the same
     problem, so the two phones this app draws are sized the same way. The RATIO
     comes from the shared `[data-os]` block beside the panel's device, so the
     two components cannot disagree about what an iPhone is; the fallback is the
     shape this tile had before the switch existed. A taller phone is NARROWER
     here rather than taller, which is what keeps the card still. */
  height: 100%; width: auto; max-width: 100%;
  aspect-ratio: var(--os-ratio, 390 / 844); position: relative;
  border: 1px solid var(--line-2); border-radius: 16px;
  /* THE CARD'S OWN GROUND, read from the same token rather than restated, so a
     palette change moves both and they cannot drift into two greys. */
  background: var(--panel-2);
}
/* THE CORNERS ARE A PERCENTAGE, NOT A PIXEL COUNT, and that is what makes the
   switch work at every column count. MEASURED: this phone is 74.5px wide at
   three across, 110.5 at two and 138.8 at one, so one px radius cannot be right
   at all three — where the panel's device, which is ~340px and only ever one
   size, can use px. The pair is `<horizontal> / <vertical>`, because a single
   percentage resolves against each axis in turn and a corner on a 0.46-ratio box
   would come out an ellipse: 46/393 across and 46/852 down is the same 46px
   corner the panel draws, said as fractions so it scales. Android: 28/412 and
   28/915. So the two radii are DERIVED from the panel's two numbers rather than
   invented, and a guard requires the tile and the panel to agree on which phone
   is the rounder of the two. */
.st-app-phone[data-os="ios"] { border-radius: 11.7% / 5.4%; }
.st-app-phone[data-os="android"] { border-radius: 6.8% / 3.06%; }
/* The camera — the tell everyone recognises, and at this size the ONLY one that
   reads: the two radii differ by about 3.6px on a 74px phone, which is real but
   quiet. Apple's Dynamic Island is a wide pill, Android's is a punch-hole. Sized
   in px rather than scaled, deliberately: at 74px a faithful 2px dot is invisible
   and the mark has to stay legible at the smallest column count, which is the one
   most people will look at. */
.st-app-phone:before {
  content: ""; position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 2px; background: var(--graphite); opacity: .3;
}
.st-app-phone[data-os="ios"]:before { width: 30%; height: 4px; border-radius: 999px; opacity: .34; }
.st-app-phone[data-os="android"]:before { width: 5px; height: 5px; border-radius: 50%; opacity: .34; }
/* THE SWITCH. Marks only, no words — the panel's own segments need 248px of
   content and this tile is 74.5px wide, measured. `MOBILE_LABELS` still supplies
   the name through `title` and `aria-label`, so there is one list of what these
   phones are called and a screen reader is told which is which. */
.st-app-os {
  justify-self: center; margin-top: .3rem;
  display: flex; gap: 1px; padding: 2px;
  border: 1px solid var(--line-2); border-radius: 999px;
}
.st-app-osbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 18px; padding: 0;
  border: none; border-radius: 999px; background: none;
  color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
/* A LIT SEGMENT LOOKS LIT, which is the `.st-card-act:disabled { opacity }`
   finding one control over: this screen has twice shipped a control whose state
   was in the markup and not in the paint, and every markup assertion stayed
   green both times. */
.st-app-osbtn.on { background: var(--split); color: var(--on-accent); }
.st-app-osbtn:hover:not(.on) { color: var(--text); }
.st-app-osbtn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* The words sit where the card's name and date sit, so the pair reads as one
   row. One deliberate margin above the pair of them; the grid's own small gap
   holds the two lines together. */
.st-app-t { margin-top: .45rem; font-size: .68rem; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2; }
.st-app-s { font-size: .65rem; color: var(--muted); opacity: .78; text-align: center; line-height: 1.2; }
/* `min-width: 0` is INERT TODAY and stays as the wall. MEASURED both ways with
   a site name that has no break opportunity at all: card 258 either way, no
   page overflow either way — because `.st-card-name` already carries
   `overflow: hidden`, which makes the card's min-content width 0 without any
   help. It becomes load-bearing the moment anything is added to the card that
   does NOT clip its own overflow, which is the ordinary way a grid item starts
   pushing past its column. Kept, said out loud, and NOT claimed to be covered
   by a guard — a sweep mutant that removes it correctly survives. */
.st-card { min-width: 0; position: relative; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel-2); overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.st-card:hover { border-color: rgba(0, 0, 0, .45); transform: translateY(-2px); }
.st-card-prev { aspect-ratio: 16/10; overflow: hidden; background: var(--bg); pointer-events: none; }
.st-card-prev iframe { width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; }
.st-card-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; padding: .7rem .85rem .8rem; }
.st-card-names { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
/* The card's actions — two since 2026-09-09, when the mobile-app icon came off
   and the phone beside the card took over saying it. `flex: 0 0 auto` so a long
   site name ellipsises against them rather than pushing them off the card. */
.st-card-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.st-card-act {
  width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.st-card-act:hover:not(:disabled) { background: var(--panel-2); color: var(--text); border-color: var(--line-2); }
.st-card-act:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* A site with no database keeps its button, greyed and explained by its own
   tooltip — the feature is there to ask for, and hiding the control is how a
   customer never learns that. */
.st-card-act:disabled { opacity: .38; cursor: default; }
.st-card-name { font-size: .92rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-card-sub { font-size: .75rem; color: var(--muted); }
/* The small round "remove" control — a site card's corner and a scheduled
   post's row. It had NO STYLES AT ALL: `.sch-del` appears twice in chat.js and
   nowhere in this file, so both call sites were rendering a browser DEFAULT
   button — default padding, default border, default font — with only a
   translucent black fill layered on. That is the grey box with a hairline rim
   that looked wrong on the card thumbnails. */
.sch-del {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg); color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sch-del:hover { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.sch-del:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }
/* Over a thumbnail it has to carry its own contrast: the page underneath is
   whatever the model built, so a panel-coloured chip can disappear into it. */
.st-card-del {
  position: absolute; top: 8px; right: 8px;
  background: rgba(10, 10, 10, .6); border-color: transparent; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.st-card-del:hover { background: rgba(10, 10, 10, .88); border-color: transparent; }
/* Workspace — mirrors Lovable's anatomy: top bar, slim chat rail, dominant
   preview card. Go Farther dark + pink→amber skin throughout. */
.st-ws.st-lv { display: flex; flex-direction: column; gap: .7rem; width: 100%; height: calc(100vh - 88px); min-height: 480px; }
.st-topbar { display: flex; align-items: center; gap: 1rem; padding: .35rem .35rem .35rem .2rem; }
.st-tb-left { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 0; }
.st-tb-names { display: flex; flex-direction: column; min-width: 0; }
.st-ws-name { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ws-sub { font-size: .72rem; color: var(--muted); }
/* THE VIEW TABS MUST NOT MOVE WHEN THE VIEW CHANGES.
   `.st-tb-left` and `.st-tb-right` are both `flex: 1 1 0`, so this element is
   centred by its TOTAL width — and the page picker plus the reload button used
   to sit in here, existing only in the Preview view. Switching to Code or More
   narrowed the group and slid the tabs 66px right; a multi-page site moved them
   another 8px, the picker being wider than the word "Homepage". Both measured.
   Holding nothing but the tabs, this is now the same width in every view. */
.st-tb-mid { display: flex; align-items: center; gap: .55rem; }
.st-pillbtn { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 650; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .34rem .8rem; }
.st-pillbtn.on { color: var(--text); background: linear-gradient(rgba(28, 21, 35, .92), rgba(28, 21, 35, .92)) padding-box, var(--split) border-box; border: 1px solid transparent; }
.st-tb-page { font-size: .84rem; font-weight: 600; color: var(--text); }
/* Multi-page picker in the workspace top bar */
.st-pagepick { position: relative; }
.st-pagebtn { font: inherit; font-size: .84rem; font-weight: 600; color: var(--text); background: transparent; border: 1px solid var(--line-2); border-radius: 9px; padding: .3rem .6rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.st-pagebtn:hover { border-color: rgba(0, 0, 0, .5); }
.st-pagebtn .st-cv { color: var(--muted); font-size: .7rem; }
/* The page menu. NEVER RESTYLED WHEN THE PLATFORM WENT BLACK-AND-WHITE, and it
   went unnoticed because the picker itself never rendered — a React build stored
   one page, so nothing above one ever opened this. Fixing that exposed three
   dark-theme leftovers at once: `var(--panel-2)` is a 7% black tint on white, so
   the menu was effectively TRANSPARENT and the URL chip read straight through
   it; the hover was white-on-white; and the selected row painted the near-black
   `--split` gradient as a hard slab.

   It matches `.model-menu` now — same surface, same radius, same shadow — so the
   two menus in this workspace read as one control rather than two eras. */
.st-pagemenu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 50; min-width: 210px; max-height: min(48vh, 430px); overflow-y: auto;
  background: #ffffff; border: 1px solid var(--line-2); border-radius: 14px; padding: .4rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16); display: flex; flex-direction: column; gap: 1px; }
.st-pagemenu[hidden] { display: none; }
.st-pageitem { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; font: inherit; background: transparent; border: 0;
  border-radius: 10px; padding: .5rem .65rem; cursor: pointer; color: var(--text); }
.st-pageitem:hover { background: var(--panel-2); }
/* The current page is marked by WEIGHT and a tick, not by a filled bar: this
   list sits on white and a solid row reads as a button somebody is about to
   press rather than as the state they are already in. */
.st-pageitem.on { background: var(--panel); }
.st-pageitem.on .st-pi-name::after { content: ' ✓'; color: var(--text); }
.st-pageitem:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.st-pi-name { font-weight: 600; font-size: .85rem; white-space: nowrap; }
.st-pi-path { font-size: .72rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace;
  white-space: nowrap; }
/* Form-submissions inbox modal */
.si-modal { position: fixed; inset: 0; z-index: 200; background: rgba(248, 248, 250, .84); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.si-card { width: min(560px, 96vw); max-height: 82vh; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .05); }
.si-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.si-head b { font-size: 1rem; }
.si-x { background: transparent; border: 0; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.si-x:hover { color: var(--text); }
.si-body { padding: .9rem 1.1rem 1.2rem; overflow-y: auto; }
.si-empty { color: var(--muted); font-size: .9rem; padding: 1.4rem .2rem; text-align: center; }
.si-count { font-size: .78rem; color: var(--dim, var(--muted)); margin-bottom: .7rem; letter-spacing: .02em; }
.si-item { border: 1px solid var(--line); border-radius: 11px; padding: .7rem .85rem; margin-bottom: .6rem; }
.si-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; }
/* Cloud Insights / Backups / Versions panels */
.si-panel-sub { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 .55rem; }
.si-panel-sub:first-child { margin-top: 0; }
.si-note { font-size: .76rem; color: var(--muted); margin-top: 1rem; line-height: 1.5; border-top: 1px solid var(--line); padding-top: .8rem; }
.si-stat-row { display: flex; gap: .6rem; margin-bottom: .4rem; }
.si-stat { flex: 1; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; }
.si-stat b { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.si-stat span { font-size: .68rem; color: var(--muted); line-height: 1.3; display: block; margin-top: .15rem; }
.si-bar { display: flex; align-items: center; gap: .6rem; padding: .28rem 0; font-size: .82rem; }
.si-bar-k { flex: 0 0 34%; color: var(--text, #edeaf3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-bar-t { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.si-bar-t i { display: block; height: 100%; background: var(--split); border-radius: 6px; }
.si-bar-v { flex: 0 0 auto; min-width: 30px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.si-body > .st-publish { width: 100%; margin-bottom: .4rem; }
.si-item > .st-hi-restore { margin-top: .1rem; }
.si-io { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.si-io select.st-in { flex: 1 1 120px; min-width: 110px; }
.si-io .st-gen2 { flex: 0 0 auto; cursor: pointer; }
.si-io label.st-gen2 { display: inline-flex; align-items: center; }
.si-form { font-weight: 700; font-size: .82rem; text-transform: capitalize; background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.si-when { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.si-row { display: flex; gap: .8rem; padding: .2rem 0; font-size: .86rem; }
.si-k { min-width: 96px; color: var(--muted); font-size: .78rem; text-transform: capitalize; }
.si-v { color: var(--text); word-break: break-word; }
.st-icon { font: inherit; font-size: .95rem; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.st-icon:hover:not([disabled]) { color: var(--text); border-color: rgba(0, 0, 0, .45); }
.st-icon[disabled] { opacity: .4; cursor: default; }
.st-tb-right { display: flex; align-items: center; gap: .5rem; flex: 1 1 0; justify-content: flex-end; }
/* The Preview-only controls (page picker + reload), moved OUT of `.st-tb-mid`
   so the view tabs stop moving when the view changes — see the note there.
   They live at the START of the right-hand group: this box begins exactly where
   the centred tabs end, so `margin-right: auto` parks them immediately to the
   tabs' right and leaves everything else flush right. Identical to where they
   have always appeared.
   IN FLOW, DELIBERATELY. The first fix positioned them absolutely off
   `.st-tb-mid`, which aligned the tabs perfectly and then ran the page name
   under the device toggles at 1024-1180px — measured, a 57-115px overlap. In
   flow they compress and push instead of colliding, which is the failure mode
   worth having. `min-width: 0` is what lets the picker ellipsise rather than
   refusing to shrink. */
.st-tb-pv { display: flex; align-items: center; gap: .55rem; margin-right: auto; min-width: 0; }
/* The end buttons never wrap. Reserving the picker's space below makes the bar
   tighter in the non-Preview views than it used to be, and the old "Live ↗"
   link broke onto a second line at 1180px, growing the whole toolbar — visible
   in a render, invisible to every position measurement. That link was removed
   on 2026-08-08, and the rule stays because `.st-publish` is still the Publish
   button and every modal's primary action. They are short labels; if the bar
   truly runs out of room the icon buttons beside them give way instead. */
.st-share, .st-publish { white-space: nowrap; flex: none; }
/* HIDDEN, NOT REMOVED, outside the Preview view — which is the whole fix, and
   three attempts were needed to get here. Both side groups are `flex: 1 1 0`, so
   they split the free space equally but only down to each one's MIN-CONTENT
   size: this block pushes `.st-tb-right`'s min-content past its fair share, the
   difference comes out of the left group, and the centre moves with it. Removing
   the block on a view change therefore moves the tabs at ANY width.
   Reserving the space instead means the two sides measure the same in every
   view, so the tabs cannot move — with no truncation and nothing out of flow.
   What was tried first, recorded because each looked right until it was
   rendered: taking it out of flow aligned the tabs and ran the page name under
   the device toggles at 1024-1180px; letting `.st-tb-right` shrink instead put
   the squeeze on the reload button, which the picker then overlapped; giving the
   name room to ellipsise cleanly reduced "Homepage" to "H". A measurement said
   0px spread through all three. Only looking at it did.
   `visibility: hidden` and not `display: none` — the space has to stay. It is
   already out of the tab order and the accessibility tree. */
.st-tb-pv-off { visibility: hidden; }
.st-share { font: inherit; font-size: .84rem; font-weight: 650; color: var(--text); background: none; border: 1px solid var(--line-2); border-radius: 11px; padding: .5rem .95rem; cursor: pointer; }
.st-share:hover { border-color: rgba(0, 0, 0, .45); }
.st-publish {
  font: inherit; font-size: .84rem; font-weight: 750; color: var(--on-accent); cursor: pointer; border-radius: 11px; padding: .5rem 1.05rem;
  background: var(--split);
  border: 1.5px solid transparent; box-shadow: 0 0 18px -6px rgba(0,0,0, .4);
}
.st-publish:hover:not([disabled]) { box-shadow: 0 0 26px -6px rgba(0,0,0, .6); }
.st-publish[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.st-devs { display: flex; gap: .3rem; }
.st-dev { font: inherit; font-size: .85rem; width: 34px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; }
.st-dev.on { color: var(--text); background: linear-gradient(rgba(28, 21, 35, .92), rgba(28, 21, 35, .92)) padding-box, var(--split) border-box; border: 1px solid transparent; }
/* `position: relative` is the mobile tab's containing block — it is absolutely
   positioned against THIS row's right edge, which with the panel closed is the
   stage's edge and with it open is the panel's. Nothing else here positions. */
.st-body { display: flex; gap: .8rem; flex: 1; min-height: 0; position: relative; }
.st-rail { flex: 0 0 450px; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel-2); overflow: hidden; }
/* Collapsible chat rail — hide it and let the preview stage take the full width. */
.st-ws.st-rail-hidden .st-rail { display: none; }
/* THE MOBILE APP COLUMN — the third column, on the right, closed by default.
   The exception class is `st-mob-open` where the rail's is `st-rail-hidden`,
   because the two default opposite ways: the chat is there until you hide it,
   this is away until you open it. Both are a class on `.st-ws`, so both toggles
   flip a class rather than re-render the workspace.
   Its width is CLAMPED, not fixed: at 1512px it is ~393px and the stage keeps
   room, at 1200px it comes down to ~312px rather than squeezing the preview
   between a 450px rail and a fixed column. */
/* THE WIDTH IS ONE CUSTOM PROPERTY (2026-09-09, owner: "that tab can be
   dragaable and open until the chatbox in the left"). The clamp is the fallback,
   so a panel nobody has dragged is exactly the measured default it always was
   and `--mob-w` only ever holds a width a person chose. The panel's basis, the
   tab's own offset and the container query all read this one value, which is
   what lets a drag move everything without a re-render — and therefore without
   reloading the preview beside it.
   `container-type: inline-size` makes the panel the query container for the
   one-phone / two-phone rule below. Its width is set explicitly, so the size
   containment it brings has nothing to compute against and changes no layout.

   AND IT OVERLAYS THE STAGE RATHER THAN TAKING ITS SPACE (2026-09-09, owner:
   "the stuff in the site shouldnt shrink"). It was `flex: 0 0 var(--mob-w)` —
   a real item in `.st-body` — so every pixel it gained came off `.st-stage`
   (`flex: 1`) and the site being previewed re-laid-out under the drag: at a
   wide panel the empty state was one word per line. Absolute against
   `.st-body` (already the containing block, for the tab) it floats over the
   preview instead, so the site keeps the width it had when the panel was shut
   and the drag changes nothing about it.
   THE IFRAME NEVER REFLOWS NOW, which is the half worth having beyond the
   look: a drag used to resize the frame continuously, so the site inside it
   re-rendered at every intermediate width. `right/top/bottom: 0` with the
   width the one dragged property; the shadow is what says it is ABOVE the
   stage rather than cut into it, biased left because that is the edge it
   floats over. `z-index` below the tab's 6, so the handle stays on top.

   AND THE GROUND HAD TO BECOME OPAQUE, which is not a colour change: the tint
   is composited over the paper it always sat on, so the panel resolves to the
   same colour it did as a flex item. `--panel-2` is `rgba(51,49,61,.10)` — a
   SMUDGE, meant to be laid on the sheet — and a smudge over a live website is
   a window: the first render of this overlay showed the preview's address bar
   straight through the panel's own heading. As an item in the row it only ever
   had the app's paper behind it and nobody could tell it was translucent; the
   moment it floats, what is behind it is the customer's site. Layering the
   same tint over `--paper` keeps the look and closes the window. The grain on
   `html` is the one thing lost, and it was never legible under a 10% wash. */
.st-mob { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; width: var(--mob-w, clamp(300px, 26vw, 420px)); container-type: inline-size; display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(var(--panel-2), var(--panel-2)), var(--paper); box-shadow: -18px 0 46px rgba(0, 0, 0, .14); overflow: hidden; padding: .7rem; }
.st-ws:not(.st-mob-open) .st-mob { display: none; }
/* AND THE WHOLE FEATURE IS THE PREVIEW'S (owner, 2026-09-09: "so i wanna to
   tell to only show it in the preview"). It showed on Code and More too — a
   phone frame beside a file tree, which is a column about nothing.
   BOTH CONTROLS GO TOGETHER, because a door to a room that is not there is the
   dead control this app has now found five times in its own chrome: the column
   and the edge tab that opens, closes and resizes it.
   IT WAS THREE, AND THE THIRD IS GONE (owner, 2026-09-09: "OPK YOU CAN DELETE
   THIS BUTTON SINCE WE HAVE THE DRAG THING"). The top bar's `#stMobile` toggle
   hid here too, on `visibility` rather than `display` so that leaving the flow
   could not shift the centred view tabs — the `.st-tb-pv-off` rule's own reason
   a few lines up, which still governs the picker and the reload button and is
   untouched. With no third control there is no third rule, and the split that
   paragraph explained no longer has two sides: the panel and the tab are both
   in `.st-body`, and giving their space back to the pane is the whole point.
   `siteMobileOpen` and `--mob-w` are untouched by any of this, so a panel
   dragged wide and left open is exactly that when you come back to Preview. */
.st-ws:not(.st-pv) .st-mob { display: none; }
.st-ws:not(.st-pv) .st-mob-tab { display: none; }
/* THE TAB ON THE EDGE (owner, 2026-09-09: "it gotta show it like a hidden
   sidebar tho, not like a button opens it"). It is the tucked-away half of
   `.st-mob`, so it takes that panel's border, radius and ground rather than
   inventing a second look — and DROPS the right border with the right half of
   the radius, which is the whole of what makes it read as something sticking
   out of the edge rather than a button parked near it.
   IT STAYS WHEN THE PANEL OPENS AND BECOMES THE DRAG HANDLE (2026-09-09). It
   shipped for one day hidden-when-open, on the argument that the panel is then
   its own affordance — true while the tab only opened. Now it also SIZES, and a
   handle you cannot reach once the panel is open is a handle for one gesture
   only. Open, it rides the panel's left edge by reading the same `--mob-w`, so
   it tracks the drag with nothing in JavaScript moving it.
   `cursor: ew-resize` while open, because the pointer is the only thing that
   says "this is draggable" before you try it; `touch-action: none` so a drag on
   a touch screen resizes instead of scrolling the page. */
.st-mob-tab { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 18px; height: 66px; padding: 0; border: 1px solid var(--line-2); border-right: none;
  border-radius: 10px 0 0 10px; background: var(--panel-2); color: var(--muted); cursor: pointer;
  touch-action: none; display: flex; align-items: center; justify-content: center;
  box-shadow: -2px 0 6px rgba(0, 0, 0, .05); }
.st-mob-tab:hover { color: var(--text); }
/* The offset is the panel's width and NOTHING ELSE. It was `+ .8rem` for the
   flex gap that used to sit between the stage and the panel; the panel overlays
   the stage now, so there is no gap and the tab sits flush on its left edge. */
.st-ws.st-mob-open .st-mob-tab { right: var(--mob-w, clamp(300px, 26vw, 420px)); cursor: ew-resize; }
/* AND IT KEEPS ITS STICKING-OUT EDGE WHEN OPEN (2026-09-09). It used to take
   its right border back and square up, on the argument that an open panel makes
   it "a seam between two panels rather than an edge on one" — which was true
   while a .8rem gap separated the two and false the moment the panel became an
   overlay the tab is flush against. Squared up it would draw its own right
   border against the panel's left one: a 2px double line where there is one
   edge. The recorded "a rule true because of a layer below it expires when that
   layer moves", so the rule goes rather than being adjusted — open and closed
   are now one look, the panel's own edge protruding left, which is what the tab
   has always been. */
.st-mob-head { display: flex; align-items: center; justify-content: space-between; padding: .1rem .2rem .1rem .35rem; }
.st-mob-title { font-weight: 700; font-size: .82rem; letter-spacing: .01em; }
/* iPhone / Android, a segmented control in the panel's own header. Its active
   half takes `--split` with `--on-accent` ink, which is the pair this palette
   documents for graphite-on-paper and the same one `.st-dev.on` resolves to. */
.st-mob-os { display: flex; gap: .15rem; border: 1px solid var(--line-2); border-radius: 10px; padding: 2px; }
/* Each half is its platform's mark and then its name. The mark is drawn in
   `currentColor` and takes no rule of its own, so it inherits the button's ink
   and flips with the lit state; `flex: none` keeps it its drawn size when the
   column is at its narrowest, since a squeezed mark is the one thing here that
   would stop reading as a logo. */
.st-mob-osbtn { font: inherit; font-size: .68rem; font-weight: 600; letter-spacing: .01em; padding: .18rem .5rem .18rem .42rem; border: none; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.st-mob-osbtn .st-svg { flex: none; }
.st-mob-osbtn.on { background: var(--split); color: var(--on-accent); }
.st-mob-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: .7rem; }
/* ONE PHONE OR TWO, DECIDED BY THE PANEL'S OWN WIDTH (owner, 2026-09-09: "it
   can show the two layouts one next to each other"). Both are always in the
   markup; this picks how many are on screen, which is what lets a drag change
   the answer without a re-render.
   Narrow: the switch's choice, and only that one. The selector carries the
   panel's `data-os` AND the phone's, so it is (0,4,0) — the widening rule below
   matches it exactly and wins on source order, which is deliberate: a looser
   selector there would lose to this one and the second phone would never
   appear however wide the panel got. */
/* A GRID, NOT A COLUMN FLEX, and that is a correction rather than a preference.
   Flexed first: the frame took `flex: 1` for its height, and MEASURED 227x742 —
   ratio 0.31 against the iPhone's 0.46. In a flex column the item's width is
   resolved from its CONTENT before flex stretches the height, so `aspect-ratio`
   had nothing definite to compute from and the frame came out as wide as its
   empty-state text. A `1fr` grid row is a definite height, so `height: 100%` on
   the frame resolves and the ratio computes the width — which is the same
   height-leads-width argument the frame's own rule makes, one box out. */
.st-mob-one { display: none; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: .4rem; min-width: 0; height: 100%; }
.st-mob[data-os] .st-mob-one[data-os] { display: none; }
.st-mob[data-os="ios"] .st-mob-one[data-os="ios"],
.st-mob[data-os="android"] .st-mob-one[data-os="android"] { display: grid; }
/* The caption is silent with one phone — the switch above already says which,
   and saying it twice is the same fact in two places. */
.st-mob-cap { display: none; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; color: var(--muted); }
.st-mob-cap .st-svg { flex: none; }
/* THE THRESHOLD IS PITCHED ABOVE A SINGLE PHONE'S WIDEST CLAMP (420px), so two
   phones are something you DRAG to and never something that happens to you at a
   window size. Below it nothing about the panel changes. */
/* The frame gives the caption its line and takes the rest. `flex: 1` in a column
   is a definite height, which is what lets `aspect-ratio` compute the width — the
   height-led sizing the entry below argues for, one box further in. */
.st-mob-one .st-mob-device { height: 100%; min-height: 0; }
@container (min-width: 620px) {
  .st-mob[data-os] .st-mob-one[data-os] { display: grid; }
  /* The switch decides nothing while both are shown, so it goes rather than
     sitting there inert — this repo's own dead-control finding, avoided. */
  .st-mob-os { display: none; }
  .st-mob-cap { display: inline-flex; }
}
/* THE HEIGHT LEADS AND THE WIDTH FOLLOWS, and that is a correction rather than a
   preference. Width-led with `max-height: 100%` was shipped first and MEASURED
   inert: the cap binds in an ordinary window, so the box came out 369x742
   whatever ratio it was given — six per cent squatter than a handset, and, once
   the two phones wanted different ratios, both of them identical. Two rules that
   look like they do something and do not.
   `height: 100%` alone overflowed the column sideways (also measured); with
   `width: auto` the ratio computes the width instead, and `max-width: 100%` is
   the wall for a window tall enough to make even that too wide — which needs a
   stage over ~800px and is where the ratio goes back to being approximate. */
.st-mob-device { position: relative; height: 100%; width: auto; max-width: 100%; aspect-ratio: var(--os-ratio, 390 / 844); border: 9px solid var(--graphite); border-radius: 34px; background: var(--panel); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); overflow: hidden; display: flex; flex-direction: column; }
/* THE TWO PHONES ARE NOT THE SAME PHONE, and that is what earns the switch its
   place beside a panel with no app in it. These are the real numbers: an iPhone
   15 Pro is 393x852 with corners that read much rounder than an Android's, and a
   Pixel 8 is 412x915 — wider for its height. The tell everyone recognises is at
   the top: Apple's Dynamic Island is a wide pill, Android's camera is a small
   punch-hole. Drawn with one `::before` whose shape differs, so the markup does
   not gain an element that means nothing.
   A guard asserts the two blocks DIFFER on ratio, radius and the mark: a switch
   whose halves look identical is a dead control wearing a coat, and this
   repository has now found that five times in its own chrome. */
/* THE PROPORTIONS ARE DECLARED ONCE AND READ TWICE (2026-09-09). Two components
   draw these phones now — this panel's device mock and the start screen's card
   tile — and a phone's aspect ratio is the one fact about it that is SCALE-FREE,
   so two copies of it would be two lists of the same thing with a silent drift:
   let them disagree and a card and the panel show different iPhones.
   The corners and the camera are NOT here, and that is deliberate rather than an
   omission — they are sizes, and these two draw at 340px and at 74.5px, so a
   46px radius that is right in the panel is a pill on a card. Each component
   carries its own, derived from the same source numbers, with a guard that they
   still describe the same two phones (rounder/squarer, pill/dot). */
[data-os="ios"] { --os-ratio: 393 / 852; }
[data-os="android"] { --os-ratio: 412 / 915; }
.st-mob-device[data-os="ios"] { border-radius: 46px; }
.st-mob-device[data-os="android"] { border-radius: 28px; }
.st-mob-device::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); background: var(--graphite); }
.st-mob-device[data-os="ios"]::before { width: 30%; height: 16px; border-radius: 999px; }
.st-mob-device[data-os="android"]::before { width: 11px; height: 11px; border-radius: 50%; }
.st-mob-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 1.2rem; text-align: center; }
.st-mob-empty h4 { font-size: .92rem; font-weight: 700; }
.st-mob-empty p { font-size: .76rem; color: var(--muted); line-height: 1.45; max-width: 22ch; }
.st-date { padding: .7rem 1rem .2rem; font-size: .72rem; color: var(--muted); text-align: center; }
.st-date-flag { color: #000000; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .66rem; }
.st-thread { flex: 1; overflow-y: auto; padding: .7rem .95rem .9rem; display: flex; flex-direction: column; gap: .7rem; }
.st-msg { font-size: .88rem; line-height: 1.5; }
.st-msg.u { align-self: flex-end; max-width: 88%; border-radius: 14px 14px 4px 14px; padding: .55rem .85rem; background: var(--split); border: 1px solid transparent; }
.st-msg.a { align-self: stretch; color: var(--text); padding: 0 .1rem; }
.st-msg.a .st-acts { display: block; margin-top: .35rem; }
/* What was READ for a build — a linked page, a web lookup, or a link we could
   not reach. Its own block, above the result, because a newline inside the
   message text collapses (there is no pre-wrap here) and the sentence that
   matters most is the one saying a link was NOT read. Muted and ruled rather
   than coloured: the platform is monochrome, and a caveat that depends on hue
   says nothing in greyscale. */
/* `white-space: pre-line` because the note is SEVERAL notes joined with "\n" —
   a link that could not be read, a token change, a photograph budget. Without
   it they collapse into one run-on line, which is the exact failure this
   element was split out of `.st-msg` to fix: it was fixed one level up and left
   in place one level down. `pre-line` and not `pre-wrap`, so the newlines
   survive while incidental indentation does not. */
.st-note { font-size: .8rem; color: var(--muted); line-height: 1.45; margin: 0 0 .45rem; padding-left: .6rem; border-left: 2px solid var(--line); white-space: pre-line; }
/* WHY A BUILD FAILED, in the compiler's own words.
   Monospace and `pre-wrap`: this carries file:line references and real source
   lines, where a collapsed newline turns four separate errors into one
   unreadable sentence and a lost indent changes what the line says. Scrolls on
   its own rather than widening the thread — a tsc line is longer than the
   column. Muted and small: it sits under the plain-English sentence, for the
   person who wants the detail, never instead of it. */
.st-why { font-size: .72rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); line-height: 1.5; margin: .45rem 0 0; padding: .5rem .6rem; border-left: 2px solid var(--line); background: var(--sunk, rgba(0,0,0,.03)); border-radius: 0 6px 6px 0; white-space: pre-wrap; overflow-x: auto; }
/* The answers to a question the builder asked before building (owner's pick,
   2026-08-08: the numbered treatment).

   ONE PER LINE rather than wrapped pills, and that is the layout decision the
   others lost on: these are short sentences the model writes, not chips we
   choose, so any row-based layout wraps unevenly on exactly the wording that
   turns up in practice. A column cannot degrade.

   Quiet by default — no fill, no border — because this appears inside a chat
   thread and three bordered boxes in a row would read as a form. The weight is
   in the hover instead, which is also where the affordance has to be: something
   clickable that looks like body text is something nobody clicks. */
.st-opts { display: flex; flex-direction: column; gap: .1rem; margin: .55rem 0 .2rem; align-items: flex-start; }
.st-opt { display: flex; align-items: baseline; gap: .6rem; width: 100%; font: inherit; font-size: .84rem;
  line-height: 1.35; text-align: left; cursor: pointer; padding: .34rem .4rem; border-radius: 7px;
  border: 1px solid transparent; background: none; color: var(--text); }
.st-opt:hover { background: var(--panel); border-color: var(--line); }
.st-opt:active { transform: translateY(1px); }
.st-opt:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* The key that really works. `flex: none` and a min-width so 1, 2 and esc all
   occupy the same column — ragged hints read as decoration, and these are not
   decoration. */
.st-opt kbd { font: 600 .68rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 4px; padding: .2rem .34rem;
  width: 2.6em; text-align: center; flex: none; }
.st-opt:hover kbd { color: var(--text); border-color: var(--line-2); }
.st-opt span { min-width: 0; }
/* The way out, deliberately QUIETER than the answers rather than hidden — one
   that reads as prominently invites a reflex click past a question worth
   answering, and one that cannot be found is the interrogation this feature
   exists to avoid. */
.st-opt-skip { color: var(--muted); }
.st-opt-skip:hover { color: var(--text); }
.st-act { font: inherit; font-size: .8rem; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; }
.st-act:hover { color: var(--text); }
.st-msg.st-busy { color: var(--muted); }
.st-msg.st-busy::after { content: '…'; animation: sbpulse .9s ease-in-out infinite alternate; }
.st-msg.st-busy:has(.st-livelog) { padding: 0; background: none; border: none; }
/* THE BUSY BUBBLE'S PULSING ELLIPSIS IS FOR A BUBBLE WITH NO LIVE DISPLAY OF
   ITS OWN. It was suppressed for the classic activity log and never for the
   step rail, so a muted, animated "…" sat under the dense log for the whole of
   every build — reading, at the left edge below the last row, as an empty code
   line. Both live displays are named here rather than one, because they are the
   two things this decoration is redundant beside. */
.st-msg.st-busy:has(.st-livelog)::after,
.st-msg.st-busy:has(.st-steps)::after { content: none; }
/* Live build activity log (Claude-Code-style running steps). Finished steps stay
   dim with a ✓; the active line pulses with a rotating dot. */
.st-livelog { display: flex; flex-direction: column; gap: .28rem; }
.st-livelog.st-livelog-stage { align-items: flex-start; gap: .4rem; max-width: 340px; margin: 0 auto; }
.st-ll { display: flex; align-items: center; gap: .5rem; font-size: .86rem; line-height: 1.3; }
.st-ll.done { color: var(--muted); }
.st-ll.done::before { content: '✓'; color: var(--acc, #1e1e22); font-weight: 700; font-size: .82rem; }
.st-ll.active { color: var(--text); }
.st-ll-dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(120deg, #1e1e22, #000000); flex: none; animation: sbpulse .9s ease-in-out infinite alternate; box-shadow: 0 0 8px rgba(0,0,0,.6); }
/* React builder — Claude-Code-style "what it did" step rows (live + finished). */
.st-busy-react { background: none !important; border: 0 !important; padding: 0 !important; }
/* TREATMENT E — A DENSE LOG (2026-09-07, owner picked it from six: "a dense
   log — line numbers, flush left, all monospace").
   What went: the three bordered boxes, the nested pane inside them, and the
   two glyphs drawn in CSS. The rail is one monospace column now, flush left,
   with a glyph column, a label and a right-hand clock — and the code hangs off
   it with the FILE'S OWN line numbers in a gutter.
   THE STATE CLASSES ARE UNCHANGED and still carry the four marks: the state is
   read by those names here, in chat.js and in the guards, and a rename would be
   silent on all three. */
.st-steps {
  display: flex; flex-direction: column; gap: 0; margin-top: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.st-step { border: 0; border-radius: 0; background: none; overflow: visible; }
.st-step-h { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: .78rem; color: var(--muted); }
.st-step:not(.st-step-nobody) .st-step-h { cursor: pointer; user-select: none; }
.st-step-chev { color: var(--graphite-3); font-size: .58rem; width: 8px; flex: none; transition: transform .18s; }
.st-step.open .st-step-chev { transform: rotate(90deg); }
/* THE GLYPH COLUMN — four characters on one baseline, sized and boxed alike so
   the labels start at the same x whatever the state. */
.st-step-run, .st-step-tick, .st-step-wait, .st-step-fail {
  flex: none; width: 10px; text-align: center; font-size: .72rem; line-height: 1;
  border: 0; border-radius: 0; height: auto; background: none; box-shadow: none;
}
.st-step-run { color: var(--text); animation: sbpulse .9s ease-in-out infinite alternate; }
.st-step-tick { color: #2f8f6b; }
.st-step-wait { color: var(--graphite-3); }
/* A STEP THAT FAILED. Carries a MARK as well as a colour — the tick and the
   cross differ in shape, so the outcome survives greyscale, print, and anyone
   who cannot tell the two hues apart. Same discipline the component kit uses
   for status throughout. */
.st-step-fail { color: #d1453b; font-weight: 600; }
.st-step:has(.st-step-fail) .st-step-lbl { color: var(--text, #ece9f5); }
/* LOWER CASE ON THE LABEL ONLY. The bodies carry the model's own words — an
   image prompt, a file name — and mangling those is a lie about what it said. */
.st-step-lbl { color: var(--muted); font-weight: 500; text-transform: lowercase; }
.st-step:has(.st-step-run) .st-step-lbl { color: var(--text, #ece9f5); font-weight: 600; }
.st-step-meta { margin-left: auto; color: var(--graphite-3); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.st-step-b { display: none; border: 0; background: none; }
.st-step.open .st-step-b { display: block; }
.st-lc { margin: 0; padding: 5px 0 9px; max-height: 260px; overflow: auto; font-family: inherit; font-size: .72rem; line-height: 1.62; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
/* THE GUTTER IS THE FILE'S OWN NUMBERING, never the window's — see stCodeBody.
   `user-select: none` so copying the pane copies code and not a column of
   numbers down its left edge. */
.st-lc-n { display: inline-block; width: 2.4em; padding-right: .9em; text-align: right; color: var(--graphite-3); user-select: none; }
.st-lc .kw { color: #1e1e22; } .st-lc .str { color: #000000; }
.st-lc-cur { display: inline-block; width: 6px; height: 11px; background: var(--graphite); vertical-align: -2px; animation: sbblink .9s steps(1) infinite; }
/* BEFORE ANYTHING IS KNOWN TO BE HAPPENING. The build steps used to paint the
   moment a message was sent, so typing "hey" claimed "Writing the code" for a
   build that never ran. This is what shows while the router decides; the steps
   appear only once it really is building. */
.st-think { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 600; color: var(--muted); padding: .1rem 0; }
.st-think i { width: 9px; height: 9px; border-radius: 50%; background: var(--text); flex: none; animation: stbreathe 1.6s ease-in-out infinite; }
@keyframes stbreathe { 0%, 100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }
/* Motion is the whole signal here, so with it off the dot has to stay legible
   rather than freezing mid-fade at 35% opacity. */
@media (prefers-reduced-motion: reduce) {
  .st-think i { animation: none; opacity: 1; transform: none; }
}
@keyframes sbblink { 50% { opacity: 0; } }
.st-fchips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 11px; }
.st-fchip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line, #211d30); border-radius: 6px; padding: 3px 7px; }
/* Multi-agent fan-out chips (one per parallel agent, with its model + running/done state). */
.st-agents { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 11px 2px; }
.st-agent { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line, #211d30); border-radius: 999px; padding: 3px 9px; }
.st-agent.done { color: var(--text); border-color: rgba(120,220,150,.35); }
.st-agent em { font-style: normal; opacity: .6; font-size: .62rem; }
.st-agent-run { width: 7px; height: 7px; border-radius: 50%; border: 2px solid rgba(0,0,0,.16); border-top-color: var(--text); animation: spin .7s linear infinite; display: inline-block; }
.st-ithumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 11px; }
.st-ithumb { position: relative; aspect-ratio: 4/3; border-radius: 7px; overflow: hidden; border: 1px solid var(--line, #211d30); background: var(--panel-2); }
.st-ithumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-ithumb em { position: absolute; left: 5px; right: 5px; bottom: 4px; font-size: .58rem; font-style: normal; line-height: 1.25; color: #f0ecf8; text-shadow: 0 1px 3px #000; max-height: 2.5em; overflow: hidden; }
/* Data / Users panel (React sites with a backend) */
/* min-width:0 on BOTH, or a wide table takes the whole panel with it. A schema
   with seven columns (an orders table) made .st-data-body size to its content
   instead of to the stage — measured 1610px in a 1468px slot — and .st-stage
   centres what it cannot fit and clips both edges, so the TABLE RAIL was
   clipped out of existence and there was no way back to another table.
   .st-data-main already has min-width:0 and overflow:auto: once these two stop
   growing, the grid scrolls, which is what was always intended. */
.st-datawrap { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.st-data-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line, #211d30); }
.st-data-title { font-weight: 600; font-size: .95rem; }
.st-data-count { color: var(--muted, #8b849e); font-size: .8rem; font-family: ui-monospace, Menlo, monospace; }
.st-data-head .st-icon { margin-left: auto; }
.st-data-body { flex: 1; min-width: 0; display: flex; min-height: 0; }
/* 240px is MEASURED, not chosen: the widest realistic pairing a schema produces
   is a 13-character table name beside SUBMISSIONS, which wants 220px of tab.
   At the old 190 even `bookings SUBMISSIONS` was one pixel over and spilled
   silently — invisible until the name was given an ellipsis to spill INTO. */
.st-data-side { width: 240px; flex: none; border-right: 1px solid var(--line, #211d30); padding: 10px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.st-data-tab { display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 11px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--text, #ece9f5); font-size: .85rem; cursor: pointer; }
.st-data-tab:hover { background: rgba(255,255,255,.04); }
.st-data-tab.on { background: rgba(255,255,255,.05); border-color: var(--line, #211d30); }
/* The table name is the part that gives, because the access label is a fixed
   vocabulary of five words and the name is whatever the schema designer chose.
   Without min-width:0 a flex item refuses to shrink below its content, so a
   long name pushed its own label out past the rail — measured at 184px of
   content in a 169px tab on `announcements`. */
.st-data-tn { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-data-acc { flex: none; margin-left: auto; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.st-data-main { flex: 1; min-width: 0; overflow: auto; padding: 14px 16px; }
.st-data-tablewrap { overflow-x: auto; border: 1px solid var(--line, #211d30); border-radius: 10px; }
.st-data-grid { border-collapse: collapse; width: 100%; font-size: .8rem; }
.st-data-grid th, .st-data-grid td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line, #211d30); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.st-data-grid th { color: var(--muted, #8b849e); font-weight: 600; font-family: ui-monospace, Menlo, monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; background: rgba(255,255,255,.02); position: sticky; top: 0; }
.st-data-grid td { color: var(--text); font-variant-numeric: tabular-nums; }
.st-data-grid tr:last-child td { border-bottom: 0; }
/* Owner content editor — add/edit row */
.st-data-add { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border: 0; border-radius: 8px; padding: 7px 13px; cursor: pointer; }
.st-data-head .st-data-add + .st-icon { margin-left: 8px; }
/* A whole spreadsheet in one go — the quiet sibling of "+ Add", offered on
   exactly the tables "+ Add" is. Secondary on purpose: adding one row is the
   everyday action, importing a file is the once. */
.st-data-import { margin-left: auto; font-size: .74rem; color: var(--muted, #8b849e); background: none; border: 1px solid var(--line, #211d30); border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.st-data-import:hover { color: var(--text, #ece9f5); }
.st-data-import:disabled { opacity: .55; cursor: default; }
.st-data-head .st-data-import + .st-data-add { margin-left: 8px; }
.st-data-form { border: 1px solid var(--line, #211d30); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: rgba(255,255,255,.02); }
.st-data-form-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.st-data-field { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; color: var(--muted, #8b849e); }
.st-data-field span { font-family: ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.st-data-in { background: var(--bg); border: 1px solid var(--line, #211d30); border-radius: 8px; padding: 8px 10px; color: var(--text, #ece9f5); font-size: .85rem; }
.st-data-in:focus { outline: none; border-color: #1e1e22; }
.st-data-form-actions { display: flex; gap: 8px; margin-top: 12px; }
/* Email-me-on-submit toggle, in the Data panel header. */
.st-data-notify { font-size: .72rem; color: var(--muted, #8b849e); background: none; border: 1px solid var(--line, #211d30); border-radius: 7px; padding: 4px 9px; cursor: pointer; margin-left: auto; }
.st-data-notify[data-on="1"] { color: var(--text, #ece9f5); }
.st-data-notify:disabled { opacity: .55; cursor: default; }
/* Picture field: a thumbnail of what is set, and a button to replace it. The
   value stored is still just a URL string — the column is plain text either
   way — so this is an editor convenience, not a new kind of field. */
.st-data-pic { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.st-data-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line, #211d30); background: var(--bg); }
.st-data-up { font-size: .74rem; color: var(--muted, #8b849e); background: none; border: 1px solid var(--line, #211d30); border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.st-data-up:hover:not(:disabled) { color: var(--text, #ece9f5); border-color: #33304a; }
.st-data-up:disabled { opacity: .55; cursor: default; }
.st-data-save { font-size: .82rem; font-weight: 600; color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border: 0; border-radius: 8px; padding: 8px 15px; cursor: pointer; }
.st-data-cancel { font-size: .82rem; color: var(--muted, #8b849e); background: none; border: 1px solid var(--line, #211d30); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.st-data-rowact { white-space: nowrap; text-align: right; }
.st-data-editbtn { font-size: .72rem; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line, #211d30); border-radius: 6px; padding: 4px 9px; cursor: pointer; margin-right: 5px; }
.st-data-rmrow { font-size: .95rem; line-height: 1; color: #8b849e; background: none; border: 0; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.st-data-rmrow:hover { color: #ff6b6b; background: rgba(255,107,107,.1); }
/* React build — stage compile placeholder */
.st-building { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted, #8b849e); background: var(--bg); }
.st-bring { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #211d30; border-top-color: #000000; animation: sbspin 1s linear infinite; }
.st-building-t { font-size: .9rem; }
/* ── B1: the build's own display (2026-09-07, owner: "OK B1") ────────────────
   The panel this sits in is the largest thing on the screen and for a
   seventeen-minute build it held a spinner and the word "Thinking…". The spinner
   (`.st-bring`) is gone from the react path; what replaces it says which stage
   the build is in, how long it has been going, and how far along it is.
   `.st-building` still centres it, and the legacy static-site path still renders
   the spinner through the same wrapper — which is why none of these rules
   repurpose an existing class. */
.st-b1 { width: 100%; max-width: 460px; text-align: center; padding: 4px 16px; }
.st-bchips { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.st-bchip { font-family: 'Space Grotesk', Inter, sans-serif; font-size: .69rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .65rem; }
/* THE DISPLAY FACE IS NAMED, NOT INHERITED. The app's `body` rule lives nested
   inside the `:root` block at the top of this file, which resolves as
   `:root body` — it applies in the app and did NOT apply in the headless render
   I checked this against, so what I drew and what shipped would have been two
   different typefaces. Naming it here makes the panel render the same wherever
   it is drawn, which is also what lets a screenshot of it be evidence. */
.st-b1 .st-building-t { font-family: 'Patrick Hand', 'Segoe Print', Inter, system-ui, sans-serif; font-size: 2rem; line-height: 1.1; color: var(--text); }
.st-bsub { font-size: .8rem; color: var(--muted); margin-top: .35rem; }
/* TABULAR FIGURES, because this redraws every 1.5s: proportional digits make a
   running clock jitter sideways on every tick, which reads as the page twitching
   rather than as time passing. */
.st-bclock { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 2.35rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 1rem 0 .9rem; color: var(--text); }
.st-brail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.st-brail i { display: block; height: 5px; border-radius: 999px; background: var(--panel-2); position: relative; overflow: hidden; }
/* The fill is a child rather than a width on the track, so an empty segment is
   still a visible track — four rails that vanish as they empty would read as the
   build going backwards. */
.st-brail i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0); border-radius: 999px; background: var(--graphite); transition: width .6s ease; }
.st-bleg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: .45rem; font-family: 'Space Grotesk', Inter, sans-serif; font-size: .64rem; color: var(--graphite-3); }
@media (prefers-reduced-motion: reduce) { .st-brail i::after { transition: none; } }
@keyframes sbspin { to { transform: rotate(360deg); } }
/* Composer — "Ask Go Farther…" card with a Build selector + round send. */
.st-comp { margin: .4rem .7rem .7rem; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(255, 255, 255, .03); padding: .6rem .7rem .55rem; }
.st-comp-in { width: 100%; font: inherit; font-size: .9rem; color: var(--text); background: none; border: none; resize: none; }
.st-comp-in:focus { outline: none; }
.st-comp-row { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; }
.st-plus { font: inherit; font-size: 1.05rem; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.st-buildsel-wrap { position: relative; margin-right: auto; display: inline-flex; }
.st-buildsel { font-size: .8rem; font-weight: 650; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .3rem .7rem; background: none; cursor: pointer; }
.st-buildsel:hover { color: var(--text); border-color: var(--text); }
.st-buildsel b { color: var(--text); font-weight: 700; }
.st-comp-price { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; font-size: .82rem; }
.st-sendc {
  font: inherit; font-size: 1rem; font-weight: 800; width: 34px; height: 34px; border-radius: 50%; color: var(--on-accent); cursor: pointer; display: grid; place-items: center;
  background: var(--split);
  border: 1.5px solid transparent; box-shadow: 0 0 16px -6px rgba(0,0,0, .45);
}
.st-sendc:hover { box-shadow: 0 0 24px -6px rgba(0,0,0, .65); }
/* Stop button — replaces Send while a build/revise runs. */
.st-stopc { font-size: .78rem; color: #fff; background: #e5484d; border-color: transparent; box-shadow: 0 0 16px -6px rgba(229, 72, 77, .6); animation: stPulse 1.4s ease-in-out infinite; }
.st-stopc:hover { box-shadow: 0 0 24px -5px rgba(255, 91, 122, .8); }
@keyframes stPulse { 0%,100% { opacity: 1; } 50% { opacity: .62; } }
/* Preview — the dominant rounded card. */
.st-stage { flex: 1; min-width: 0; display: flex; align-items: stretch; justify-content: center; overflow: hidden; position: relative; }
/* ── History rail ── */
.st-hist { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.st-hist-tabs { display: flex; gap: 4px; padding: .7rem .7rem 0; }
.st-htab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem; cursor: pointer; }
.st-htab.on { background: var(--panel-2); color: var(--text); border-color: var(--line-2); }
.st-hist-list { flex: 1; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.st-hitem { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: .6rem .7rem; }
.st-hi-ic { display: flex; color: var(--muted); margin-top: 1px; }
.st-hi-tx { min-width: 0; }
.st-hi-tx b { display: block; font-size: .84rem; font-weight: 500; line-height: 1.35; }
.st-hi-tx span { font-size: .7rem; color: var(--muted); }
.st-hi-empty { color: var(--muted); font-size: .85rem; padding: 1.4rem .4rem; text-align: center; }
/* ── "Try to fix" error card ── */
.st-errcard { position: absolute; right: 22px; bottom: 22px; width: 340px; max-width: calc(100% - 44px); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); z-index: 5; }
.st-err-h { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; }
.st-err-ic { display: flex; }
.st-err-b { color: var(--muted); font-size: .84rem; margin: .4rem 0 .9rem; line-height: 1.45; }
.st-err-row { display: flex; gap: .6rem; justify-content: flex-end; }
.st-err-logs { font: inherit; font-size: .82rem; color: var(--muted); background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; padding: .45rem .8rem; cursor: pointer; }
.st-err-fix { font: inherit; font-size: .82rem; font-weight: 700; color: var(--on-accent); background: var(--split); border: none; border-radius: 9px; padding: .45rem .9rem; cursor: pointer; }
/* Runtime-error "Fix with AI" chip — bottom-left of the preview (Lovable-style). */
.st-fixbar { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border: 1px solid rgba(255, 120, 120, .38); border-radius: 12px; padding: .5rem .5rem .5rem .8rem; box-shadow: 0 20px 48px rgba(0, 0, 0, .5); z-index: 5; max-width: calc(100% - 44px); }
.st-fixbar[hidden] { display: none; }
.st-fixbar-ic { display: flex; color: #c62828; flex: none; }
.st-fixbar-n { font-size: .84rem; font-weight: 600; color: #c62828; white-space: nowrap; }
.st-fixbar-btn { font: inherit; font-size: .82rem; font-weight: 700; color: var(--on-accent); background: var(--split); border: none; border-radius: 9px; padding: .42rem .85rem; cursor: pointer; flex: none; }
.st-fixbar-btn:hover { filter: brightness(1.06); }
.st-fixbar-x { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.st-fixbar-x:hover { color: var(--text); }
/* Builder image attach (composer) */
.st-attach { display: flex; flex-wrap: wrap; gap: .5rem; }
.st-attach:not(:empty) { margin: .6rem 0 .2rem; }
.st-att { position: relative; width: 56px; height: 56px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-2); flex: none; }
.st-att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-att-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .68); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.st-att-x:hover { background: #ff5b7a; }
.st-attbtn { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .8rem; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px; padding: .35rem .7rem; cursor: pointer; margin-right: auto; }
.st-attbtn:hover { color: var(--text, #e8e6ef); border-color: var(--amber, #000000); }
.st-attbtn svg { width: 15px; height: 15px; }
/* ── Attach source chooser + gallery picker ── */
.stac-opts { display: flex; flex-direction: column; gap: .6rem; }
.stac-opt { display: flex; align-items: center; gap: .8rem; text-align: left; font: inherit; color: var(--text, #e8e6ef); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; padding: .85rem 1rem; cursor: pointer; transition: border-color .15s, transform .15s; }
.stac-opt:hover { border-color: var(--amber, #000000); transform: translateY(-1px); }
.stac-opt svg { color: var(--amber, #000000); flex: none; }
.stac-opt span { display: flex; flex-direction: column; gap: .1rem; }
.stac-opt b { font-size: .92rem; }
.stac-opt small { color: var(--muted); font-size: .78rem; }
.stg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .55rem; }
.stg-empty { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; text-align: center; padding: 2.5rem 1rem; line-height: 1.5; }
.stg-cell { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--panel-2); }
.stg-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stg-cell.sel { border-color: var(--amber, #000000); }
.stg-check { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--split); color: var(--on-accent); font-size: .72rem; line-height: 1; display: none; place-items: center; }
.stg-cell.sel .stg-check { display: grid; }
.stg-foot { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-top: 1px solid var(--line); }
.stg-hint { color: var(--muted); font-size: .8rem; }
.stg-foot .st-attbtn { margin-right: 0; }
.stg-add { font: inherit; font-size: .82rem; font-weight: 600; color: var(--on-accent); background: var(--split); border: none; border-radius: 9px; padding: .4rem .9rem; cursor: pointer; }
.stg-add:disabled { opacity: .45; cursor: default; }
/* ── Publish panel ── */
.sp-intro { color: var(--muted); font-size: .88rem; line-height: 1.5; margin-bottom: 1rem; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.sp-k { font-size: .82rem; color: var(--muted); }
.sp-v { font-size: .86rem; }
.sp-vis { display: inline-flex; align-items: center; gap: .4rem; }
.sp-url { font-size: .86rem; color: var(--neon); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-url:hover { text-decoration: underline; }
.sp-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.sk-add { display: flex; gap: .5rem; margin-bottom: .8rem; }
.sk-add .st-in { flex: 1; min-width: 0; }
.sk-add .st-publish { flex: none; }
.sk-item { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: .6rem .8rem; margin-bottom: .5rem; }
/* The name is the part that gives: it is whatever the owner typed, while the
   hint and the mode are bounded. Without min-width:0 the name refuses to shrink
   below its content and pushes its own row's siblings out — the same flex
   failure as the Data rail, and this row just gained two more of them. */
.sk-name { font-family: ui-monospace, monospace; font-size: .85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The hint, never the value: a public Stripe prefix and the last four. */
.sk-hint { flex: none; font-family: ui-monospace, monospace; font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
/* Filled for live, outlined for test — the difference has to survive greyscale
   and anyone who cannot see colour, so it is carried by FILL and by the word,
   never by hue. This is the one badge on the platform where being wrong means
   an owner thinks they are taking money and is not. */
.sk-mode { flex: none; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 2px 7px; border: 1px solid var(--line-2); color: var(--muted); }
.sk-mode-live { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.sk-when { margin-left: auto; font-size: .74rem; color: var(--muted); flex: none; }
.sk-del { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.sk-del:hover { color: #c62828; border-color: rgba(255, 120, 120, .4); }
/* Edge-function cards (Cloud → Edge functions). */
.fn-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: .7rem .85rem; margin-bottom: .6rem; }
.fn-top { display: flex; align-items: center; gap: .55rem; }
.fn-ic { display: inline-flex; color: var(--muted); flex: none; }
.fn-name { font-family: ui-monospace, monospace; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-trig { flex: none; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .12rem .45rem; }
.fn-top .sk-del { margin-left: auto; }
.fn-top .st-badge-live, .fn-top .st-badge-soon { margin-left: 0; }
.fn-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .6rem; }
.fn-step { font-size: .74rem; color: var(--text, #e8e6ef); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: .18rem .5rem; }
.fn-arrow { color: var(--muted); font-size: .72rem; }
.fn-sch { display: inline-flex; align-items: center; gap: .25rem; flex: none; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--amber, #000000); border: 1px solid rgba(0,0,0, .35); border-radius: 999px; padding: .12rem .45rem; }
.fn-sch svg { width: 12px; height: 12px; }
/* The On/Paused switch on a scheduled job — a BUTTON wearing the badge's
   clothes, because the state and the control are the same thing here. Pushed
   to the row's right edge; the two states keep the badge pair's visual
   weight (filled = running, outline = paused) so the row reads at a glance
   in greyscale too. */
.fn-tgl { flex: none; margin-left: auto; cursor: pointer; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--on-accent); background: var(--split); border: 1px solid transparent; border-radius: 999px; padding: .12rem .5rem; }
.fn-tgl.fn-off { font-weight: 700; color: var(--muted); background: none; border-color: var(--line-2); }
/* Run now (2026-09-03): the quiet twin of the switch, beside it rather than pushed to the edge. */
.fn-tgl.fn-run { margin-left: .4rem; font-weight: 700; color: var(--muted); background: none; border-color: var(--line-2); }
.fn-tgl.fn-run:hover:not(:disabled) { color: var(--text); border-color: var(--text); filter: none; }
.fn-tgl:hover:not(:disabled) { filter: brightness(1.12); }
.fn-tgl.fn-off:hover:not(:disabled) { color: var(--text); border-color: var(--text); filter: none; }
.fn-tgl:disabled { opacity: .55; cursor: default; }
.fn-hook { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.fn-hook-label { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: none; }
/* FULL-STRENGTH INK. `--dim` is not defined anywhere, so this fell through to a
   hardcoded #a49fb5 — a dark-theme lavender-grey, left behind by the 2026-07-23
   move to the light theme. On the white surface it reads as PLACEHOLDER text,
   and this is the webhook URL: the one string on the card an owner is here to
   copy. Same fix and same reasoning as `.sd-rf code` in the Domains panel.
   (`.si-count` is the other `--dim` reference and is fine — it falls back to
   `var(--muted)`, which is a real token in this theme.) */
.fn-hook-url { font-family: ui-monospace, monospace; font-size: .74rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: .22rem .45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.fn-hook-copy { flex: none; font: inherit; font-size: .72rem; font-weight: 600; color: var(--text, #e8e6ef); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 7px; padding: .2rem .6rem; cursor: pointer; }
.fn-hook-copy:hover { border-color: var(--amber, #000000); color: #fff; }
/* Domains panel (Cloud → Domains) — the owner's own web address.
   Built from the same parts as .fn-item so the two panels read as one product;
   the only new shape is the RECORD, which is a thing to copy rather than read. */
.sd-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: .7rem .85rem; margin-bottom: .6rem; }
.sd-top { display: flex; align-items: center; gap: .55rem; }
.sd-top > svg { color: var(--muted); flex: none; }
.sd-host { font-family: ui-monospace, monospace; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-top .sk-del { margin-left: auto; }
.sd-visit { font-size: .72rem; font-weight: 600; color: var(--text); text-decoration: none; border: 1px solid var(--line-2); border-radius: 7px; padding: .2rem .55rem; flex: none; }
.sd-visit:hover { border-color: var(--ink, #000); }
/* NEEDS ATTENTION IS NOT "LIVE" AND NOT "SOON". It is the one state where the
   owner has to go and do something, and on a monochrome platform that cannot be
   carried by colour — so it is an outlined pill with its own words. */
.sd-bad { flex: none; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text); border: 1px solid var(--ink, #000); border-radius: 999px; padding: .12rem .45rem; }
.sd-err { font-size: .78rem; color: var(--muted); margin-top: .5rem; }
/* The live DNS reading. A LEFT RULE rather than a colour, because the three
   states have to be distinguishable in greyscale — and because `unknown` is our
   own resolver failing rather than anything about their domain, so it gets no
   rule at all and reads as an aside. */
.sd-dns { font-size: .78rem; color: var(--text); margin-top: .5rem; line-height: 1.5; }
.sd-dns-warn { border-left: 2px solid var(--ink, #000); padding-left: .55rem; }
.sd-dns-ok { border-left: 2px solid var(--line-2); padding-left: .55rem; color: var(--muted); }
/* Who holds the DNS, and the way in. A ROW rather than a sentence, because the
   link is the point — the words only exist to say which button this is. */
.sd-prov { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; font-size: .78rem; color: var(--muted); }
.sd-prov .sd-visit { flex: none; }
/* One-click setup. THE ONLY FILLED BUTTON IN THE PANEL — everything else here
   is an outline — because where this exists it is the whole answer and the
   copyable records below become a fallback nobody should need to read. */
.sd-auto { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .6rem; }
.sd-auto-go { flex: none; font-size: .8rem; font-weight: 700; color: var(--on-accent); background: var(--split); border-radius: 9px; padding: .42rem .8rem; text-decoration: none; }
.sd-auto-go:hover { opacity: .9; }
/* The reassurance carries real information — that they authenticate at their
   own provider and we never hold their credentials — so it is legible, not a
   footnote greyed to the edge of readability. */
.sd-auto-note { flex: 1; min-width: 12rem; font-size: .74rem; color: var(--muted); line-height: 1.45; }
/* Why there is no button. Quieter than the records it points at, because the
   records are the instruction here and this is only the explanation. */
.sd-auto-off { margin-top: .6rem; font-size: .74rem; color: var(--muted); line-height: 1.45; }
.sd-recs { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.sd-rec { display: grid; gap: .35rem; }
.sd-rt { justify-self: start; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .1rem .45rem; }
/* Name and value each get their own row and their own button: those are the two
   fields people mistype, and one "copy all" produces a blob that has to be taken
   apart again in the form they are pasting into. */
.sd-rf { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sd-rl { flex: none; width: 3.1rem; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* FULL-STRENGTH INK, not `--dim`. Copied from `.fn-hook-url`, these rendered in
   a dark-theme grey (#a49fb5) that on the white surface reads as PLACEHOLDER
   text — and these strings are the entire payload of the panel: the four values
   an owner has to retype into a form on another website. Caught by looking at
   the render; nothing in the markup says which colour a token resolves to. */
.sd-rf code { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .74rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: .22rem .45rem; overflow-x: auto; white-space: nowrap; }
.sd-note { font-size: .74rem; color: var(--muted); line-height: 1.45; }

/* Files panel (Cloud → Files) */
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; }
.fl-item { position: relative; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--panel); }
.fl-thumb { display: block; aspect-ratio: 1 / 1; background: var(--panel-2); }
.fl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-doc { width: 100%; height: 100%; display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: .8rem; letter-spacing: .1em; color: var(--muted); }
.fl-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; padding: .45rem .55rem; }
.fl-name { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-size { font-size: .66rem; color: var(--muted); flex: none; }
.fl-del { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; background: rgba(0,0,0,.62); }
.fl-del:hover { background: #ff5b7a; color: #fff; }
/* Emails setup guide */
.em-steps { display: flex; flex-direction: column; gap: .7rem; }
.em-step { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: .8rem .9rem; }
.em-n { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--on-accent); background: var(--split); }
.em-step b { display: block; font-size: .9rem; margin-bottom: .2rem; }
/* The BODY's bolds stay inline. `.em-step b` was written when a step's only bold
   was its title, so emphasis inside the description became a block and broke
   every sentence containing one onto three lines. */
.em-step span b { display: inline; font-size: inherit; margin-bottom: 0; }
.em-step span { color: var(--muted); font-size: .82rem; line-height: 1.5; }
/* `.em-n` is a span inside `.em-step`, so `.em-step span` (0,1,1) beat `.em-n`
   (0,1,0) and painted the step number near-black at 56% on a near-black
   gradient — invisible, in every panel using this markup. Measured, not
   guessed: computed color was rgba(11,11,14,.56). */
.em-step .em-n { color: var(--on-accent); }
.em-step code { font-family: ui-monospace, monospace; font-size: .78rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 .3rem; }
/* Browser frame around the live preview — just a URL chip, no window dots. */
.st-frame { display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--bg); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .8); }
.st-frame-bar { display: flex; align-items: center; padding: .5rem .7rem; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.st-frame-url { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .32rem .7rem; font-family: 'Inter', system-ui, sans-serif; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.st-frame iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.st-stage[data-dev="desktop"] .st-frame { width: 100%; }
.st-stage[data-dev="tablet"] .st-frame { width: 860px; max-width: 100%; }
.st-stage[data-dev="phone"] .st-frame { width: 412px; max-width: 100%; }
.st-empty { align-self: center; color: var(--muted); font-size: .95rem; padding: 2rem; text-align: center; }
/* ── Workspace view tabs (Preview / Code / More) ── */
.st-vtabs { display: flex; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.st-svg { display: block; }
.st-vtab { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); background: none; border: none; border-radius: 9px; padding: .4rem .8rem; cursor: pointer; white-space: nowrap; }
.st-vtab:hover { color: var(--text); }
.st-vtab.on { background: var(--split); border: 1px solid transparent; color: var(--text); }
/* ── Code view ── */
/* The Code tab's host, filled after the fetch — `.st-datawrap`'s job one tab
   over, and the same rule: it must fill its stage or the two-pane editor inside
   it collapses to its content and the file tree loses its scroll. */
.st-codewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.st-codewrap > * { flex: 1; min-height: 0; }
.st-code { display: flex; width: 100%; height: 100%; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--bg); }
.st-code-tree { flex: 0 0 210px; border-right: 1px solid var(--line); overflow-y: auto; padding: .6rem .5rem; background: var(--panel); }
.st-code-h { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .3rem .5rem .5rem; }
.st-file { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; font: inherit; font-size: .82rem; color: var(--muted); background: none; border: none; border-radius: 8px; padding: .45rem .55rem; cursor: pointer; }
.st-file:hover, .st-file.on { background: var(--panel-2); color: var(--text); }
.st-file-ic { display: flex; color: var(--muted); }
.st-file-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-code-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-code-bar { display: flex; align-items: center; justify-content: space-between; padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.st-code-fname { font-size: .8rem; color: var(--text); font-family: ui-monospace, monospace; }
.st-code-dl { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font: inherit; font-size: .78rem; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .32rem .6rem; cursor: pointer; }
.st-code-dl:hover { color: var(--text); }
.st-code-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.55; }
.st-code-gutter { padding: .8rem .4rem .8rem .8rem; color: rgba(0,0,0,.3); text-align: right; user-select: none; margin: 0; white-space: pre; }
.st-code-pre { padding: .8rem 1rem; margin: 0; color: var(--text); white-space: pre; }
/* ── More view (Analytics / Cloud / Security / SEO) ── */
.st-more { display: flex; width: 100%; height: 100%; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--panel); }
.st-mnav-col { flex: 0 0 210px; border-right: 1px solid var(--line); padding: .8rem .6rem; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.st-mnav { display: flex; align-items: center; gap: .6rem; font: inherit; font-size: .86rem; color: var(--muted); background: none; border: none; border-radius: 9px; padding: .55rem .65rem; cursor: pointer; text-align: left; }
.st-mnav:hover { background: var(--panel-2); color: var(--text); }
.st-mnav.on { background: var(--panel-2); color: var(--text); font-weight: 600; }
.st-mnav-ic { display: flex; align-items: center; justify-content: center; width: 1.15rem; }
.st-more-body { flex: 1; min-width: 0; overflow-y: auto; padding: 1.4rem 1.6rem; }
.st-panel { max-width: 760px; }
.st-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.st-panel-head h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.st-panel-sub { font-size: .95rem; font-weight: 700; margin: 1.6rem 0 .8rem; }
.st-chip-muted { font-size: .76rem; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .3rem .7rem; }
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.st-stat { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); padding: .8rem .9rem; }
.st-stat-l { display: block; font-size: .74rem; color: var(--muted); }
.st-stat-v { display: block; font-size: 1.5rem; font-weight: 700; margin-top: .2rem; font-family: 'Space Grotesk', sans-serif; }
.st-chart { margin-top: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); height: 220px; display: grid; place-items: center; }
.st-chart-empty { color: var(--muted); font-size: .88rem; max-width: 320px; text-align: center; }
.an-bars { display: flex; align-items: flex-end; gap: .5rem; width: 100%; height: 100%; padding: 1.1rem 1rem .6rem; }
.an-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .4rem; }
.an-bar-fill { width: 100%; max-width: 46px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--split); }
.an-bar-l { font-size: .66rem; color: var(--muted); white-space: nowrap; }
.st-hi-restore { margin-left: auto; align-self: center; flex: none; font: inherit; font-size: .74rem; font-weight: 600; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }
.st-hi-restore:hover { border-color: rgba(0, 0, 0, .5); }
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.st-cloudcard { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 1rem; }
.st-cloudcard.live { border-color: rgba(0, 0, 0, .28); }
.st-cc-ic { display: flex; color: var(--muted); margin-top: 1px; }
.st-cc-tx { min-width: 0; }
.st-cc-tx b { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.st-cc-tx span { display: block; color: var(--muted); font-size: .8rem; margin-top: .25rem; line-height: 1.4; }
.st-badge-live { font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--on-accent); background: var(--split); border-radius: 999px; padding: .12rem .45rem; }
.st-badge-soon { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .1rem .42rem; }
.st-sec-hero { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 1.1rem 1.2rem; }
.st-sec-hero .st-cc-tx { flex: 1; }
.st-sec-ic { display: flex; color: var(--muted); }
.st-sec-empty { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 2.4rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; margin-top: .3rem; }
.st-sec-ok { display: flex; color: var(--muted); opacity: .5; margin-bottom: .2rem; }
.st-sec-empty b { font-size: 1rem; }
.st-sec-empty span { color: var(--muted); font-size: .85rem; }
.st-cloudcard.st-clickable { cursor: pointer; }
.st-cloudcard.st-clickable:hover { border-color: rgba(0, 0, 0, .45); background: var(--panel); }
.sp-unpub { color: #c62828; border-color: rgba(255, 120, 120, .35); }
.sp-unpub:hover { background: rgba(255, 80, 80, .08); }
.st-sec-count { font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
.st-sec-issues { display: flex; flex-direction: column; gap: .7rem; }
.st-issue { border: 1px solid var(--line); border-left-width: 3px; border-radius: 11px; background: var(--panel-2); padding: .8rem .95rem; }
.st-issue-top { display: flex; align-items: center; gap: .6rem; }
.st-issue-top b { font-size: .92rem; }
.st-issue p { color: var(--muted); font-size: .84rem; line-height: 1.45; margin-top: .35rem; }
.st-issue-sev { font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 999px; color: var(--on-accent); }
.st-issue-pg { margin-left: auto; font-size: .72rem; color: var(--muted); }
.st-sev-critical { border-left-color: #ff5f6d; } .st-sev-critical .st-issue-sev { background: #ff5f6d; }
.st-sev-high { border-left-color: #ff9558; } .st-sev-high .st-issue-sev { background: #ff9558; }
.st-sev-medium { border-left-color: #000000; } .st-sev-medium .st-issue-sev { background: #000000; }
.st-sev-low { border-left-color: var(--line-2); } .st-sev-low .st-issue-sev { background: var(--muted); color: var(--bg); }
.st-gen2 { font: inherit; font-size: .82rem; font-weight: 600; color: var(--text); background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: .5rem .9rem; cursor: pointer; }
.st-gen2:disabled { opacity: .5; cursor: default; }
.st-field { margin-bottom: 1.1rem; }
.st-field label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .4rem; }
.st-inp { border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel-2); padding: .7rem .85rem; font-size: .9rem; color: var(--text); }
.st-inp-area { min-height: 4rem; color: var(--muted); }
.st-social { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.st-social-ph { width: 180px; height: 96px; border: 1px dashed var(--line-2); border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-size: .76rem; background: var(--panel-2); }
.st-social-btns { display: flex; flex-direction: column; gap: .5rem; }
/* Media Agent DM inbox */
.ma-dm { margin-top: 1.6rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); overflow: hidden; }
.ma-dm-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-2); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ma-dm-refresh { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; }
.ma-dm-refresh:hover { color: var(--text); }
.ma-dm-body { display: grid; grid-template-columns: 240px 1fr; min-height: 300px; }
.ma-dm-list { border-right: 1px solid var(--line-2); overflow-y: auto; max-height: 46vh; }
.ma-dm-empty { color: var(--muted); font-size: .86rem; padding: 1.1rem; line-height: 1.5; }
.ma-dm-conv { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line-2); padding: .7rem .9rem; cursor: pointer; color: var(--text); }
.ma-dm-conv:hover { background: rgba(255, 255, 255, .04); }
.ma-dm-conv.on { background: rgba(0,0,0, .1); }
.ma-dm-av { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--on-accent); background: linear-gradient(135deg, #1e1e22, #000000); }
.ma-dm-meta { min-width: 0; display: flex; flex-direction: column; }
.ma-dm-user { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-dm-prev { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-dm-thread { display: flex; flex-direction: column; min-width: 0; }
.ma-dm-tophead { padding: .7rem 1rem; border-bottom: 1px solid var(--line-2); font-size: .85rem; color: var(--muted); }
.ma-dm-tophead b { color: var(--text); }
.ma-dm-msgs { flex: 1; overflow-y: auto; max-height: 40vh; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.ma-dm-bub { max-width: 78%; padding: .5rem .8rem; border-radius: 13px; font-size: .88rem; line-height: 1.45; word-wrap: break-word; }
.ma-dm-bub.them { align-self: flex-start; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); }
.ma-dm-bub.mine { align-self: flex-end; background: linear-gradient(135deg, rgba(0,0,0, .25), rgba(0,0,0, .25)); border: 1px solid var(--line-2); }
.ma-dm-bub.pending { opacity: .6; }
.ma-dm-bub.failed { border-color: rgba(255, 120, 120, .6); }
.ma-dm-reply { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line-2); }
.ma-dm-note { padding: 0 1rem .6rem; font-size: .78rem; color: var(--muted); min-height: 1rem; }
@media (max-width: 640px) {
  .view-media-agent.active { padding: 1.5rem 1rem 2.5rem; }
  .ma-conn { flex-wrap: wrap; }
  .ma-dm-body { grid-template-columns: 1fr; }
  .ma-dm-list { border-right: none; border-bottom: 1px solid var(--line-2); max-height: 30vh; }
}

/* ── Avatar creator (preview in the middle, Builder panel on the right) ── */
.ac-page { width: 100%; max-width: 1120px; margin: 0 auto; }
.ac-back { background: none; border: 1px solid var(--line-2); color: var(--muted); font: inherit; font-size: .85rem; padding: .42rem .8rem; border-radius: 9px; cursor: pointer; margin-bottom: 1.3rem; transition: color .12s ease; }
.ac-back:hover { color: var(--text); }
.ac-main { display: flex; gap: 2rem; align-items: flex-start; }
.ac-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.ac-preview {
  width: 100%; max-width: 420px; aspect-ratio: 3 / 4; border-radius: 18px; position: relative;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .04), transparent 60%), var(--panel-2);
  border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; padding: 1.5rem;
}
.ac-ph-ico { font-size: 2rem; opacity: .5; }
.ac-ph-txt { color: var(--muted); font-size: .9rem; line-height: 1.5; max-width: 260px; }
.ac-tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; background: var(--panel); border: 1px solid var(--line-2); border-radius: 7px; padding: .2rem .55rem; color: var(--text); }
.ac-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--split); }
/* Empty state — "ghost silhouette" over a faint grid. */
.ac-preview.ac-empty {
  background:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .04), transparent 60%), var(--panel-2);
}
.ac-ghost { position: relative; width: 118px; height: 118px; display: grid; place-items: center; margin-bottom: .3rem; }
.ac-ghost-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .22); animation: acghost 16s linear infinite; }
@keyframes acghost { to { transform: rotate(360deg); } }
.ac-ghost-ico { width: 52px; height: 52px; color: rgba(255, 255, 255, .48); }
.ac-ph-h { font-size: 1.06rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.ac-ph-h .ac-accent { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Generated avatar shown in-place (Generate renders here, not in the chat). */
.ac-preview.ac-loading { padding: 1.5rem; }
.ac-preview .ac-result { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.ac-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: #0b0b0e; animation: acspin .8s linear infinite; }
@keyframes acspin { to { transform: rotate(360deg); } }
.ac-actions { display: flex; gap: .7rem; align-items: center; width: 100%; max-width: 420px; }
.ac-shuffle { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font-size: 1.2rem; cursor: pointer; transition: border-color .12s ease; }
.ac-shuffle:hover { border-color: rgba(0, 0, 0, .5); }
.ac-gen { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem; border-radius: 12px; background: var(--split); color: var(--on-accent); border: none; font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; transition: transform .12s ease; }
.ac-gen:hover { transform: translateY(-1px); }
.ac-gen:disabled { opacity: .7; cursor: default; transform: none; }
.ac-gen-cost { font-weight: 800; font-size: .82rem; background: rgba(0, 0, 0, .16); border-radius: 999px; padding: .12rem .5rem; }
.ac-model-note { width: 100%; max-width: 420px; text-align: center; color: var(--muted); font-size: .76rem; margin-top: -.4rem; }
/* Builder panel */
.ac-builder { width: 380px; flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 16px; padding: .9rem 1rem 1.1rem; max-height: calc(100vh - 150px); overflow-y: auto; }
.ab-top { display: flex; align-items: center; justify-content: space-between; padding: .2rem .2rem .7rem; }
.ab-top-t { font-size: 1rem; font-weight: 700; }
.ab-reset { background: none; border: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.ab-reset:hover { color: var(--text); }
.ab-sec { border-top: 1px solid var(--line); }
.ab-sec-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: none; border: none; color: var(--text); font: inherit; padding: .8rem .2rem; cursor: pointer; text-align: left; }
.ab-sec-t { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; }
.ab-sec-ico { opacity: .8; }
.ab-sec-cnt { color: var(--muted); font-weight: 500; }
.ab-chev { color: var(--muted); font-size: 1rem; transition: transform .15s ease; }
.ab-sec.open .ab-chev { transform: rotate(180deg); }
.ab-sec:not(.open) .ab-sec-body { display: none; }
.ab-sec-body { padding: .1rem .1rem .9rem; }
/* card options (gender / type / hair) */
.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ab-card { position: relative; aspect-ratio: 3 / 2; background: var(--panel); border: 1px solid var(--line-2); border-radius: 11px; cursor: pointer; padding: .5rem .6rem; text-align: left; color: var(--text); transition: border-color .12s ease; }
.ab-card:hover { border-color: rgba(0,0,0,.3); }
.ab-card.on { border-color: transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--split) border-box; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5) inset; }
.ab-card-l { font-size: .78rem; font-weight: 600; }
.ab-card-i { position: absolute; right: .5rem; bottom: .4rem; font-size: 1.05rem; opacity: .8; }
/* image options (ethnicity) */
.ab-imgs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ab-img { flex: 0 0 calc((100% - 1rem) / 3); position: relative; aspect-ratio: 3 / 4; border-radius: 11px; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel-2); cursor: pointer; padding: 0; transition: border-color .12s ease; }
.ab-img:hover { border-color: rgba(0,0,0,.3); }
.ab-img.on { border-color: transparent; box-shadow: 0 0 0 2px #0b0b0e inset; }
.ab-img.on::after { content: '✓'; position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--split); color: var(--on-accent); font-size: .72rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.ab-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-img-ph { position: absolute; inset: 0; }
.ab-img-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ab-ph0 { background: linear-gradient(160deg, rgba(0,0,0,.14), rgba(0,0,0,.05)); }
.ab-ph1 { background: linear-gradient(160deg, rgba(0,0,0,.14), rgba(0,0,0,.05)); }
.ab-ph2 { background: linear-gradient(160deg, rgba(0,0,0,.05), rgba(0,0,0,.16)); }
.ab-img-l { position: absolute; left: 6px; bottom: 5px; font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
/* swatch options (skin) */
.ab-swatches { display: grid; grid-template-columns: repeat(5, 34px); gap: .5rem; justify-content: start; }
.ab-swatch { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--line-2); cursor: pointer; padding: 0; transition: transform .1s ease, border-color .1s ease; }
.ab-swatch:hover { transform: scale(1.06); }
.ab-swatch.on { border-color: #0b0b0e; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
/* ruler-style slider (age) */
.ab-ruler { position: relative; padding: 2.4rem .5rem 1.4rem; }
.ab-ruler-lbl { position: absolute; top: .3rem; right: .5rem; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ab-ruler-bubble { position: absolute; top: -.1rem; left: .5rem; min-width: 2.2rem; padding: .18rem .55rem; border-radius: 8px; background: var(--split); color: var(--on-accent); font-size: 1.05rem; font-weight: 800; text-align: center; letter-spacing: -.01em; }
.ab-ruler-track { position: relative; height: 30px; }
.ab-ruler-ticks { position: absolute; inset: 0; border-radius: 4px; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px calc(100% / 40)); background-position: left center; background-repeat: repeat-x; background-size: 100% 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%); }
.ab-ruler-fill { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 999px; background: var(--split); pointer-events: none; }
.ab-ruler-thumb { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 999px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .55); pointer-events: none; }
.ab-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; outline: none; cursor: ew-resize; }
.ab-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 30px; background: transparent; cursor: ew-resize; }
.ab-range::-moz-range-thumb { width: 22px; height: 30px; background: transparent; border: none; cursor: ew-resize; }
.ab-range:focus-visible { outline: none; }
.ab-ruler:focus-within .ab-ruler-thumb { box-shadow: 0 0 14px rgba(0, 0, 0, .8); }
@media (max-width: 860px) {
  .ac-main { flex-direction: column; }
  .ac-builder { width: 100%; max-height: none; }
  .ac-stage { width: 100%; }
}

/* One-time welcome modal for fresh accounts (signup grant) */
.welcome-ov { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: up-fade .22s ease both; }
.wm-box {
  position: relative; overflow: hidden; width: min(92vw, 430px); text-align: center;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(0,0,0, .13), transparent 55%),
    radial-gradient(120% 90% at 85% 100%, rgba(0,0,0, .08), transparent 60%),
    var(--panel);
  border: 1px solid rgba(0, 0, 0, .32); border-radius: 24px;
  padding: 2.1rem 1.9rem 1.9rem;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: up-pop .34s cubic-bezier(.2, .9, .3, 1.1) both;
}
.wm-star {
  font-size: 2.1rem; line-height: 1;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 20px rgba(0,0,0, .45));
}
.wm-title { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; margin: .65rem 0 .15rem; }
.wm-grant {
  font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.05rem; font-weight: 700;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm-sub { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: .75rem auto 1.35rem; max-width: 330px; }
.wm-cta {
  width: 100%; background: var(--split); color: var(--on-accent); border: none; border-radius: 13px;
  padding: .8rem; font-weight: 800; font-size: .95rem; cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0, .28); transition: transform .12s ease;
}
.wm-cta:hover { transform: translateY(-1px); }
.wm-x {
  position: absolute; top: .8rem; right: .8rem; z-index: 1;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: .85rem; cursor: pointer; padding: 0;
}
.wm-x:hover { color: var(--text); border-color: var(--line-2); }

.side-foot { margin-top: auto; padding: .75rem .5rem .3rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; }
.side-user { display: flex; align-items: center; gap: .6rem; padding: 0 .2rem; }
.side-avatar {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: .9rem;
  background: var(--split);
}
.side-user-meta { min-width: 0; }
.side-name { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.side-email { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
/* Auth popup — a centered modal over the marketing landing (which stays
   visible, dimmed, behind the backdrop). Backdrop click / Esc / ✕ close it. */
.auth-gate {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: rgba(248, 248, 250, .84);
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.auth-gate .auth-card { position: relative; z-index: 1; animation: auth-pop .28s cubic-bezier(.2, .7, .3, 1.08); }
@keyframes auth-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .auth-gate .auth-card { animation: none; }
}
.auth-card {
  width: 100%; max-width: 380px; background: #ffffff; border: 1px solid var(--line);
  border-radius: 22px; padding: 2.1rem 1.9rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.05);
}
.auth-brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; }
.auth-brand .logo-mark {
  width: 38px; height: 38px; object-fit: contain; background: none;
}
.auth-title { font-size: 1.5rem; font-weight: 800; margin: 1.4rem 0 .35rem; }
.auth-sub { color: var(--muted); font-size: .95rem; margin-bottom: 1.3rem; }
.auth-form { display: flex; flex-direction: column; gap: .7rem; }
#authCode { letter-spacing: .35em; text-align: center; font-size: 1.15rem; font-weight: 600; }
.auth-form input {
  background: #ffffff; border: 1px solid var(--line-2); color: var(--text);
  border-radius: 12px; padding: .85rem 1rem; font-size: 1rem; font-family: inherit; outline: none;
}
.auth-form input:focus { border-color: var(--neon); }
.auth-form input::placeholder { color: #5c5c66; }
.auth-error {
  color: #ff9b9b; font-size: .86rem; line-height: 1.4; background: rgba(255,80,80,.08);
  border: 1px solid rgba(255,80,80,.25); border-radius: 10px; padding: .55rem .7rem;
}
.auth-submit {
  margin-top: .3rem; background: var(--split); color: var(--on-accent); border: none;
  border-radius: 12px; padding: .9rem; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.auth-submit:hover { background: var(--split-dim); }
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-links {
  margin-top: 1.2rem; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted);
}
.auth-switch { text-align: right; }
#authResend { align-self: center; margin-top: .2rem; }
.auth-link {
  background: none; border: none; color: var(--neon); font-weight: 600; cursor: pointer;
  font-family: inherit; font-size: .9rem; padding: 0 .2rem;
}
.auth-link:hover { text-decoration: underline; }

/* ── Motion & micro-interactions ───────────── */
/* Split-gradient buttons keep the full yellow→purple wash at rest; on hover
   the gradient zooms and slides so the colors flow toward purple. */
.review-allow, .auth-submit {
  transition: background-size .4s ease, background-position .4s ease, transform .16s ease, box-shadow .25s ease, filter .2s ease;
}
.review-allow:hover, .auth-submit:hover {
  background-image: var(--split); background-size: 145% 100%; background-position: 100% 50%;
  transform: translateY(-1px); filter: saturate(112%);
  box-shadow: 0 8px 26px rgba(168, 85, 247, .35);
}
.review-allow:active, .auth-submit:active, .btn-ghost:active,
.send:active, .mode-btn:active, .attach-btn:active, .opt-btn:active { transform: scale(.96); }

/* Send button: breathing glow at rest, gradient slide + arrow nudge on hover. */
.send {
  transition: transform .16s ease, box-shadow .25s ease, background .15s ease, border-color .15s ease;
}
.send:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.send svg { transition: transform .18s ease; }
.send:hover svg { transform: translateY(-2px); }
@keyframes send-breathe {
  0%, 100% { box-shadow: 0 6px 22px rgba(168, 85, 247, .22); }
  50% { box-shadow: 0 6px 28px rgba(168, 85, 247, .38), 0 2px 14px rgba(255, 214, 10, .16); }
}

/* Pills, chips and ghost buttons lift slightly. */
.btn-ghost, .attach-btn, .opt-btn, .mode-btn, .new-chat, .side-signout, .review-deny, .voice-test {
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .16s ease, box-shadow .2s ease;
}
.btn-ghost:hover, .attach-btn:hover, .opt-btn:hover, .new-chat:hover, .side-signout:hover { transform: translateY(-1px); }
.attach-btn.has { animation: pick-pop .3s cubic-bezier(.34, 1.56, .64, 1); }

/* Messages and director cards rise in. */
.msg, .q-card, .review-card { animation: rise-in .32s cubic-bezier(.21, .9, .35, 1) both; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* A–D options stagger in, glide on hover, pop when picked. */
.opt {
  transition: border-color .18s ease, background .18s ease, transform .16s ease;
  animation: rise-in .3s cubic-bezier(.21, .9, .35, 1) both;
}
.opts .opt:nth-child(1) { animation-delay: .03s; }
.opts .opt:nth-child(2) { animation-delay: .09s; }
.opts .opt:nth-child(3) { animation-delay: .15s; }
.opts .opt:nth-child(4) { animation-delay: .21s; }
.opt:hover { transform: translateX(4px); }
.opt.sel { animation: pick-pop .28s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pick-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* Menus pop open; items glide. */
.model-menu.open { animation: menu-pop .18s ease; }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.model-menu.drop-up.open { animation-name: menu-pop-up; }
@keyframes menu-pop-up { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.model-item { transition: background .15s ease, transform .15s ease; }
.model-item:hover { transform: translateX(3px); }
.side-item { transition: background .18s ease, transform .16s ease; }
.side-item:hover { transform: translateX(2px); }

/* Chatbox glows softly while you're typing in it. */
.composer { transition: border-color .25s ease, box-shadow .25s ease; }
.composer:focus-within {
  border-color: rgba(255, 255, 255, .26);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(255, 214, 10, .15), 0 0 24px rgba(168, 85, 247, .07);
}

/* Brand mark shimmers slowly. */
@keyframes logo-sheen { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* Auth card entrance + input focus glow. */
.auth-card { animation: card-in .45s cubic-bezier(.21, .9, .35, 1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.auth-form input { transition: border-color .2s ease, box-shadow .2s ease; }
.auth-form input:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(0, 0, 0, .09); }

/* Voice preview pulses while playing; lightbox fades in. */
.voice-test.playing { animation: play-pulse 1s ease-in-out infinite; }
@keyframes play-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.lightbox { animation: fade-in .22s ease; }
@keyframes fade-in { from { opacity: 0; } }

/* Accessibility: switch motion off for users who ask for it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Visible keyboard focus for every interactive control — including the divs
   that act as buttons (sidebar nav, menu options, chat/shot cards). */
:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
  border-radius: 6px;
}
[role="button"], .side-item, .side-logo { cursor: pointer; }

/* ── Chat history list ─────────────────────── */
.chat-list { margin-top: .4rem; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .55rem; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; color: var(--muted); font-size: .9rem;
  transition: background .15s ease, color .15s ease;
}
.chat-item:hover { background: var(--panel); color: var(--text); }
/* Active chat matches the workspace nav's active pill (warm pink→amber glow). */
.chat-item.active {
  background: linear-gradient(100deg, rgba(0,0,0, .16), rgba(0,0,0, .05) 52%, rgba(255, 255, 255, 0) 88%);
  border-color: rgba(0,0,0, .22);
  color: var(--text);
  box-shadow: 0 8px 24px -14px rgba(0,0,0, .5);
}
.chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .75rem; padding: .15rem .3rem; border-radius: 6px; opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.chat-item:hover .chat-del { opacity: .8; }
.chat-del:hover { color: #e88; }

/* ── Sidebar chat search ───────────────────── */
.chat-search {
  margin: .45rem 0 .1rem; width: 100%;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: .5rem .65rem; font-size: .88rem; font-family: inherit;
  outline: none; transition: border-color .2s ease;
}
.chat-search::placeholder { color: #5c5c66; }
.chat-search:focus { border-color: var(--line-2); }
.chat-empty { color: var(--muted); font-size: .85rem; padding: .6rem .55rem; }

/* ── Copy chip on text messages ────────────── */
.msg { position: relative; }
/* Floats just above the message's top-right corner so it never covers the
   text (the messages are bare now — no bubble to tuck into). */
.copy-btn {
  position: absolute; top: -26px; right: -4px;
  width: 26px; height: 26px; border-radius: 8px;
  background: #2a2a30; border: 1px solid var(--line-2); color: #cfc9d6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  cursor: pointer; opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
  display: grid; place-items: center;
}
.copy-btn svg { width: 13px; height: 13px; }
.msg:hover .copy-btn { opacity: .85; }
.copy-btn:hover { opacity: 1; background: #33333a; color: #fff; }

/* ── Workspace nav (sidebar on most views, topbar dropdown in Studio) ── */
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.tile.nav-proj, .tile.nav-gal { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font-size: 1rem; }
.tile.nav-studio { background: var(--split); color: var(--on-accent); font-size: 1rem; }
.nav-dd { position: relative; }
.nav-dd-btn {
  display: flex; align-items: center; gap: .5rem; background: var(--panel);
  border: 1px solid var(--line-2); color: var(--text); border-radius: 12px;
  padding: .45rem .85rem; font-family: inherit; font-size: .92rem; cursor: pointer;
}
.nav-dd-btn:hover { border-color: rgba(0,0,0,.3); }
.nav-dd-btn b { font-weight: 600; }
.nav-dd-icon { font-size: 1rem; color: var(--muted); }
.nav-dd-caret { color: var(--muted); font-size: .75rem; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 236px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: .4rem;
  display: none; z-index: 60; box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.nav-dd-menu.open { display: block; animation: menu-pop .16s ease; }
.nav-dd-item {
  display: flex; align-items: center; gap: .7rem; width: 100%; background: none;
  border: 1px solid transparent;
  color: var(--text); font-family: inherit; font-size: .95rem; font-weight: 500; padding: .5rem .55rem;
  border-radius: 12px; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease;
}
.nav-dd-item:hover { background: var(--panel-2); }
.nav-dd-item:hover .nav-ico { color: var(--text); }
.nav-dd-item.active {
  background: linear-gradient(100deg, rgba(0,0,0, .16), rgba(0,0,0, .05) 52%, rgba(255, 255, 255, 0) 88%);
  border-color: rgba(0,0,0, .22);
  color: var(--text); font-weight: 700;
  box-shadow: 0 8px 24px -14px rgba(0,0,0, .5);
}
.nav-dd-item.active .nav-ico { color: var(--text); }
.nav-dd-sep { height: 1px; background: var(--line); margin: .4rem .25rem; }
.nav-dd-account { padding: .35rem .3rem .1rem; }
.nav-dd-account .side-email { padding: 0 .35rem .45rem; }
#homeChats { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#homeChats .chat-list { flex: 1; min-height: 0; }

/* ── View switching ── */
.view { flex: 1; min-height: 0; display: none; }
.view.active { display: flex; }
.view-home.active { flex-direction: column; }
.view-studio.active { flex-direction: row; }
.view-empty.active { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-view { color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.empty-view .empty-icon { font-size: 2.6rem; opacity: .55; }
.empty-view h2 { color: var(--text); font-size: 1.5rem; margin: 0; letter-spacing: -.02em; }
.empty-view p { margin: 0; font-size: .95rem; max-width: 440px; line-height: 1.55; }
.empty-cta {
  margin-top: 1.1rem; padding: .62rem 1.4rem; border-radius: 999px;
  background: var(--split); color: var(--on-accent); border: none; font: inherit;
  font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .12s ease;
}
.empty-cta:hover { transform: translateY(-1px); }

/* ── Studio: chat + iMovie-style editor ── */
.studio-chat {
  flex: 0 0 35%; max-width: 500px; min-width: 360px;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.studio-chat-head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.studio-chat-head .tile { width: 34px; height: 34px; }
.studio-thread { flex: 1; min-height: 0; overflow: hidden auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; scrollbar-width: none; -ms-overflow-style: none; }
.studio-thread::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Transient editor toasts — incidental hints & export/save progress. They float
   over the editor and auto-dismiss, so the chat thread stays conversation-only. */
#sbToasts {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: .4rem; align-items: center; pointer-events: none;
  width: min(92vw, 520px);
}
.sb-toast {
  width: max-content; max-width: 100%;
  background: rgba(18, 16, 24, .97); border: 1px solid var(--line-2); color: var(--text);
  padding: .5rem .9rem; border-radius: 11px; font-size: .82rem; line-height: 1.35; text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.sb-toast.in { opacity: 1; transform: none; }
.sb-toast.prog { border-color: rgba(255, 214, 10, .4); color: var(--neon); }
.studio-composer { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem; border-top: 1px solid var(--line); }
.studio-composer textarea {
  flex: 1; resize: none; background: rgba(0, 0, 0, .28); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 14px; padding: .75rem .9rem; font-family: inherit; font-size: .95rem; outline: none;
  min-height: 88px; max-height: 40vh; line-height: 1.45;
}
.studio-composer textarea:focus { border-color: rgba(255, 214, 10, .4); }
/* Two-class selector so it beats the later single-class `.send` block that
   would otherwise stretch this into a 126×62 rectangle. */
.send.studio-send { width: 40px; height: 40px; min-width: 0; flex: none; border-radius: 50%; padding: 0; animation: none; }

.studio-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #08080a; }
.editor-top { flex: 1; min-height: 0; display: flex; }

/* media / import browser */
.editor-media { flex: 0 0 38%; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.media-tabs { display: flex; gap: .3rem; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.media-tab {
  background: none; border: none; color: var(--muted); font-family: inherit; font-size: .82rem;
  padding: .35rem .6rem; border-radius: 8px; cursor: pointer;
}
.media-tab:hover { color: var(--text); }
.media-tab.active { color: var(--on-accent); background: var(--split); font-weight: 600; }
.media-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-wrap: wrap; gap: .7rem; align-content: flex-start; }
.import-zone {
  width: 100%; min-height: 150px; border: 1.5px dashed var(--line-2); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  color: var(--muted); cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.import-zone:hover { border-color: var(--neon); color: var(--text); background: rgba(255, 214, 10, .04); }
.import-arrow {
  width: 52px; height: 52px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2);
  display: grid; place-items: center; font-size: 1.5rem;
}
.import-label { font-size: .9rem; font-weight: 500; }
.media-clip { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
.media-clip .mc-thumb { width: 46px; height: 30px; border-radius: 5px; background: linear-gradient(135deg, rgba(255,214,10,.3), rgba(168,85,247,.3)); flex: none; display: grid; place-items: center; font-size: .8rem; }
.media-clip .mc-name { font-size: .82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* viewer / preview */
.editor-preview { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .5rem .9rem 0; }
.preview-toolbar { display: flex; align-items: center; gap: .5rem; padding: 0 .1rem .4rem; }
.pt-title { font-size: .85rem; color: var(--muted); }
.pt-spacer { flex: 1; }
.pt-icon { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .95rem; padding: .2rem .4rem; border-radius: 7px; }
.pt-icon:hover { color: var(--text); background: var(--panel-2); }
.pt-icon.on { color: var(--on-accent); background: var(--split); }
/* Per-clip adjustment popover under the preview toolbar */
.adjust-panel {
  position: absolute; z-index: 8; top: 2.1rem; right: .9rem; width: min(300px, 70%);
  background: rgba(18, 16, 24, .96); border: 1px solid var(--line-2); border-radius: 12px;
  padding: .7rem .75rem; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
}
.adj-title { font-size: .74rem; color: var(--muted); font-weight: 600; margin-bottom: .55rem; }
.adj-title b { color: var(--neon); }
.adj-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.adj-f { display: flex; flex-direction: column; align-items: center; gap: .28rem; background: none; border: 1px solid transparent; border-radius: 9px; padding: .3rem .1rem; cursor: pointer; font: inherit; font-size: .62rem; color: var(--muted); }
.adj-f:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.adj-f.on { color: var(--text); border-color: rgba(0,0,0, .6); background: rgba(0,0,0, .08); }
.adj-fp { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; background: linear-gradient(135deg, rgba(0,0,0,.16), rgba(0,0,0,.06) 50%, rgba(0,0,0,.14)); }
.adj-speeds { display: flex; flex-wrap: wrap; gap: .4rem; }
.adj-s { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: .34rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
.adj-s:hover { border-color: rgba(0,0,0,.3); }
.adj-s.on { color: var(--on-accent); background: var(--split); border-color: transparent; font-weight: 700; }
.adj-vol { width: 100%; accent-color: var(--neon); cursor: pointer; }
.adj-row { margin-bottom: .55rem; }
.adj-row:last-child { margin-bottom: 0; }
.adj-row label { display: block; font-size: .68rem; color: var(--muted); margin-bottom: .22rem; }
.adj-row label b { color: var(--neon); }
.adj-r { width: 100%; accent-color: var(--neon); cursor: pointer; }
.adj-reset { float: right; background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 6px; font-size: .6rem; padding: .12rem .42rem; cursor: pointer; font-family: inherit; }
.adj-reset:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.adj-fill { display: block; width: 100%; text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 9px; padding: .4rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; margin-bottom: .55rem; }
.adj-fill.on { color: var(--neon); border-color: rgba(0,0,0, .5); background: rgba(0,0,0, .08); }
.adj-motion { display: flex; flex-wrap: wrap; gap: .4rem; }
.adj-m { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: .34rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; }
.adj-m:hover { border-color: rgba(0,0,0,.3); }
.adj-m.on { color: var(--on-accent); background: var(--split); border-color: transparent; font-weight: 700; }
/* Ken Burns preview loops — export is exact (sbSourceRect) */
@keyframes kb-zin { from { transform: scale(1); } to { transform: scale(1.22); } }
@keyframes kb-zout { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes kb-panr { from { transform: scale(1.18) translateX(-6%); } to { transform: scale(1.18) translateX(6%); } }
@keyframes kb-panl { from { transform: scale(1.18) translateX(6%); } to { transform: scale(1.18) translateX(-6%); } }
.preview-stage {
  position: relative;
  flex: 1; min-height: 0; border-radius: 12px; border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .04), transparent 60%), #000;
  display: grid; place-items: center; overflow: hidden;
}
.preview-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Live title text drawn over a clip (export mirrors this via sbPaintCaption) */
.preview-caption {
  position: absolute; left: 0; right: 0; z-index: 3; padding: 0 6%; text-align: center; pointer-events: none;
  color: #fff; font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; line-height: 1.15;
  font-size: clamp(1rem, 3.6vw, 2.1rem); text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.preview-caption.pos-upper { top: 12%; }
.preview-caption.pos-center { top: 50%; transform: translateY(-50%); }
.preview-caption.pos-lower { bottom: 12%; }
.adj-text { width: 100%; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: .42rem .5rem; font: inherit; font-size: .82rem; margin-bottom: .55rem; }
.adj-pos { display: flex; gap: .4rem; }
.adj-p { flex: 1; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: .36rem; font: inherit; font-size: .76rem; cursor: pointer; }
.adj-p.on { color: var(--on-accent); background: var(--split); border-color: transparent; font-weight: 700; }
.preview-empty { color: var(--muted); font-size: .9rem; text-align: center; padding: 1rem; }
.preview-controls { display: flex; align-items: center; gap: .5rem; padding: .5rem .1rem; }
.pc-btn { background: none; border: 1px solid var(--line-2); color: var(--text); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: .85rem; display: grid; place-items: center; }
.pc-btn:hover { border-color: rgba(0,0,0,.3); }
.pc-play { background: var(--panel-2); }
.timecode { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; color: var(--muted); margin-left: .5rem; }
.pc-spacer { flex: 1; }

/* timeline */
.editor-timeline { height: auto; min-height: 300px; max-height: 58vh; flex: none; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; }
.timeline-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.timeline-tools { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tl-tool { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 9px; padding: .4rem .75rem; font-size: .82rem; cursor: pointer; font-family: inherit; }
.tl-tool:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.tl-export { border-color: rgba(255, 214, 10, .4); color: var(--neon); }
.tl-right { display: flex; align-items: center; gap: .8rem; }
.tl-zoom { width: 110px; accent-color: var(--neon); }
.tl-settings { font-size: .82rem; color: var(--muted); }
.timeline-track {
  position: relative; flex: 1; min-height: 150px; margin: .6rem .9rem .9rem; border-radius: 12px;
  border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .015);
  display: grid; place-items: center; overflow: hidden;
}
/* Once there are clips it's a real track surface, not a drop hint. */
.timeline-track.has-shots { border-color: transparent; background: rgba(255, 255, 255, .022); }
.timeline-empty { color: var(--muted); font-size: .85rem; padding: 0 1rem; text-align: center; }
.clip-block {
  position: absolute; left: 14px; top: 12px; bottom: 12px; width: 55%;
  background: linear-gradient(135deg, rgba(255, 214, 10, .28), rgba(168, 85, 247, .28));
  border: 1px solid var(--line-2); border-radius: 8px; display: flex; align-items: center; padding: 0 .7rem;
  font-size: .8rem; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.playhead { position: absolute; top: 0; bottom: 0; left: 18px; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .55); pointer-events: none; z-index: 6; }
.playhead::before { content: ''; position: absolute; top: -2px; left: -5px; width: 12px; height: 9px; border-radius: 3px 3px 4px 4px; background: var(--neon); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
/* Skim magnifier: a hover line on the lanes + a floating frame loupe. */
.skimline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .5); pointer-events: none; z-index: 4; }
.sb-skim { position: fixed; z-index: 9999; transform: translate(-50%, -100%); pointer-events: none; background: #0b0b10; border: 1px solid rgba(237, 234, 243, .18); border-radius: 9px; padding: 4px 4px 2px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.sb-skim canvas { display: block; width: 240px; height: 135px; border-radius: 5px; background: #000; }
.sb-skim-tc { display: block; text-align: center; font: 600 11px/1.7 ui-monospace, "SF Mono", monospace; color: var(--neon); letter-spacing: .04em; }
.timeline-track.drop-here { border-color: rgba(255, 214, 10, .7); border-style: solid; background-color: rgba(255, 214, 10, .06); }
.timeline-track.has-shots { cursor: pointer; user-select: none; touch-action: none; }
/* Trim handles on each timeline clip */
.sb-trim { position: absolute; top: 0; bottom: 0; width: 12px; z-index: 3; cursor: ew-resize; opacity: 0; transition: opacity .12s; touch-action: none; }
.sb-trim.l { left: 0; }
.sb-trim.r { right: 0; }
.sb-trim::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 44%; border-radius: 2px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .6); }
.sb-trim.l { background: linear-gradient(90deg, rgba(255, 214, 10, .55), transparent); }
.sb-trim.r { background: linear-gradient(270deg, rgba(255, 214, 10, .55), transparent); }
.sb-block:hover .sb-trim, .sb-block.sel .sb-trim { opacity: 1; }
/* Music track bar under the timeline */
.timeline-music { display: none; align-items: center; gap: .6rem; padding: .35rem .9rem .5rem; }
.timeline-music.has-music { display: flex; }
.tm-ico { color: var(--neon); font-size: .95rem; }
.tm-name { font-size: .82rem; color: var(--text); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-vol { flex: 1; max-width: 220px; accent-color: var(--neon); cursor: pointer; }
.tm-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .2rem; }
.tm-x:hover { color: #f43f5e; }
.tm-chip { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 7px; font-size: .72rem; padding: .2rem .45rem; cursor: pointer; font-family: inherit; }
.tm-chip:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.tm-chip.on { color: var(--neon); border-color: rgba(255, 214, 10, .45); background: rgba(255, 214, 10, .08); }
/* Voiceover bar */
.timeline-voice { display: none; align-items: center; gap: .6rem; padding: .1rem .9rem .45rem; }
.timeline-voice.has-voice { display: flex; }
/* Extra timeline-bar controls */
.tl-sel { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 9px; padding: .38rem .5rem; font-size: .8rem; font-family: inherit; cursor: pointer; }
.tl-tool.on { color: var(--neon); border-color: rgba(255, 214, 10, .45); }
.tl-tool.recording { color: #f43f5e; border-color: rgba(244, 63, 94, .5); }
.tl-save { border-color: rgba(52, 211, 153, .4); color: #34d399; }
/* Per-clip mute toggle */
.sb-cmute { position: absolute; top: .28rem; right: .3rem; z-index: 3; background: rgba(0, 0, 0, .5); border: none; border-radius: 6px; font-size: .7rem; line-height: 1; padding: .15rem .28rem; cursor: pointer; opacity: 0; transition: opacity .12s; }
.sb-block:hover .sb-cmute, .sb-block.sel .sb-cmute { opacity: 1; }
/* Title cards */
.sb-title { display: flex; align-items: center; justify-content: center; }
.sb-titletext { color: #0b0b10; font-weight: 700; font-size: .78rem; padding: 0 .5rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; z-index: 2; }
.preview-title { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.preview-title span { color: #0b0b10; font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 2.2rem; text-align: center; padding: 0 8%; line-height: 1.15; }

@media (max-width: 900px) {
  .view-studio.active { flex-direction: column; }
  .studio-chat { flex: 0 0 auto; max-width: none; min-width: 0; width: auto; height: 38%; border-right: none; border-bottom: 1px solid var(--line); }
  .editor-media { flex: 0 0 40%; }
}

/* ═══════════ Studio-warm home redesign ═══════════ */

/* Logo moved to the top of the sidebar. */
.side-logo {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em;
  padding: .5rem .55rem 1rem;
}
.side-logo .logo-mark { width: 36px; height: 36px; font-size: 1rem; }

/* ── Collapsible sidebar ── the chevron collapses the chats sidebar to a slim
   rail (logo + expand + new chat); the choice persists per browser. */
.side-top { display: flex; align-items: center; justify-content: space-between; }
.side-collapse {
  width: 30px; height: 30px; flex: 0 0 30px; margin: -8px 2px 0 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  color: var(--muted); transition: background .12s ease, color .12s ease;
}
.side-collapse svg { width: 17px; height: 17px; transition: transform .2s ease; }
.side-collapse:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.sidebar { transition: width .22s cubic-bezier(.2, .8, .3, 1), padding .22s ease; }
.sidebar.collapsed { width: 64px; padding: 1rem .6rem; overflow: hidden; }
.sidebar.collapsed .side-top { flex-direction: column; gap: .5rem; }
.sidebar.collapsed .side-logo { padding: .2rem 0 .2rem; }
.sidebar.collapsed .side-logo span { display: none; }
.sidebar.collapsed .side-collapse { margin: 0; }
.sidebar.collapsed .side-collapse svg { transform: rotate(180deg); }
.sidebar.collapsed #homeChats { display: none; }
/* (The collapsed rail deliberately has NO new-chat + — owner 2026-07-16.) */

/* Outline nav icons + gold active state. */
.nav-ico { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; color: var(--muted); transition: color .15s ease; }
.nav-ico svg { width: 20px; height: 20px; }
.side-item:hover .nav-ico { color: var(--text); }
.side-item.active {
  background: linear-gradient(100deg, rgba(0,0,0, .16), rgba(0,0,0, .05) 52%, rgba(255, 255, 255, 0) 88%);
  border-color: rgba(0,0,0, .22);
  color: var(--text);
  box-shadow: 0 8px 24px -14px rgba(0,0,0, .5);
}
.side-item.active .nav-ico { color: var(--text); }

/* Message timestamps — tight caption under each bubble. */
.msg-time {
  font-size: .68rem; margin-top: -.35rem; padding: 0 .35rem;
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  letter-spacing: .01em; color: rgba(140, 162, 156, .55);
}
.msg-time.user { align-self: flex-end; }
.msg-time.agent { align-self: flex-start; display: flex; align-items: center; }
.msg-time.agent::before {
  content: ''; flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%;
  margin-right: 6px; background: currentColor;
  -webkit-mask: url('/logo.svg') center/contain no-repeat;
  mask: url('/logo.svg') center/contain no-repeat;
}

/* Space Grotesk on the wordmark + names, like the mockup. */
.side-logo, .logo, .chat-head .cname, .auth-brand, .auth-title { font-family: 'Space Grotesk', Inter, sans-serif; }

.view-home.active { position: relative; overflow: hidden; }

/* Composer catches the warm landing glow. */
.composer {
  border-color: rgba(0,0,0, .30);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 -8px 60px rgba(255,170,80,.10), 0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Send button → rounded square with the pink→amber gradient. */
.send {
  border-radius: 17px; width: auto; min-width: 126px; height: 62px; padding: 0 20px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.send:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
.send-spark { color: var(--muted); font-weight: 700; font-size: 1.05rem; }
/* Empty box on a prompt-required model: the arrow/spark grey out (no hover
   lift) but the count chip keeps its full color — it never goes muddy. */
.send:disabled, .send:disabled:hover { opacity: 1; box-shadow: none; transform: none; cursor: default; }
.send:disabled svg, .send:disabled .send-spark { opacity: .4; }
.send-price {
  background: var(--split); color: var(--on-accent); border-radius: 999px;
  padding: .3rem .66rem; font-weight: 800; font-size: .9rem;
  letter-spacing: .01em; white-space: nowrap;
}
.send-price:empty { display: none; }

/* Mode switch (owner mock 2026-07-16): rounded-rect stack; the active mode is
   a gradient pill flanked by ‹ › chevrons. */
.mode-switch { border-radius: 16px; }
.mode-btn.active::before { content: '‹'; margin-right: .5rem; font-weight: 700; opacity: .75; }
.mode-btn.active::after { content: '›'; margin-left: .5rem; font-weight: 700; opacity: .75; }
@media (min-width: 1100px) { .view-home .composer-row .mode-switch { border-radius: 20px; } }
.mode-btn { border-radius: 99px; padding: .45rem .9rem; }

/* ── Outline button language (owner pick 2026-07-18) ──
   The pink→amber gradient moves from FILLS to BORDERS: the send is a hollow
   button ringed in the gradient with a gradient-text credit count, and the
   active mode is outlined instead of filled. Colors untouched — only shape.
   (The two-layer background is the gradient-border trick: inner paint on
   padding-box, gradient on border-box. Placed late so it wins the earlier
   .send / .send:hover / .mode-btn.active fills.) */
.mode-btn { border: 1px solid transparent; } /* all modes carry the 1px so the active ring never shifts widths */
.send {
  background: linear-gradient(rgba(19, 14, 25, .88), rgba(19, 14, 25, .88)) padding-box,
              var(--split) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 22px -6px rgba(0,0,0, .4), 0 6px 24px rgba(0, 0, 0, .35);
}
.send:hover {
  background: linear-gradient(rgba(30, 22, 38, .92), rgba(30, 22, 38, .92)) padding-box,
              var(--split) border-box;
  border-color: transparent;
  box-shadow: 0 0 30px -6px rgba(0,0,0, .6), 0 8px 30px rgba(0, 0, 0, .45);
}
.send:disabled, .send:disabled:hover {
  background: linear-gradient(rgba(19, 14, 25, .88), rgba(19, 14, 25, .88)) padding-box,
              var(--split) border-box;
  border-color: transparent;
}
.send-price {
  background: var(--split);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .3rem 0; font-weight: 800;
}
.mode-btn.active {
  background: linear-gradient(rgba(28, 21, 35, .92), rgba(28, 21, 35, .92)) padding-box,
              var(--split) border-box;
  border: 1px solid transparent;
  color: var(--text);
}

/* Account avatar → dark chip (matches the mockup). */
.side-avatar { background: linear-gradient(140deg, #3a3344, #221d2b); border: 1px solid var(--line); color: var(--muted); }

/* ── Studio storyboard (shot-based) ─────────────── */
.sb-project { margin-left: auto; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); border-radius: 8px; font-size: .78rem; padding: .25rem .4rem; max-width: 46%; color-scheme: dark; }
/* Style the native option list so the open dropdown matches the dark theme
   instead of the OS default (bright-blue selected row on white). */
.sb-project option { background: #14121a; color: var(--text); }
.sb-project option:checked { background: #2a2533; color: #fff; }
.sb-actions { padding: .6rem; border-top: 1px solid var(--line); }
/* Asset browser — Shots · Transitions · Titles · Backgrounds */
.mb-tabs { display: flex; gap: .2rem; flex-wrap: wrap; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.mb-tab {
  background: transparent; border: none; color: var(--muted); font: inherit; font-weight: 600;
  font-size: .78rem; padding: .32rem .62rem; border-radius: 8px; cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.mb-tab:hover { color: var(--text); }
.mb-tab.active { color: var(--on-accent); background: var(--split); box-shadow: 0 3px 12px rgba(0,0,0, .28); }
.editor-media .media-body[hidden] { display: none; }
.mb-browser { display: block; overflow-y: auto; padding: .8rem; }
.mb-note { color: var(--muted); font-size: .72rem; margin-bottom: .7rem; }
.mb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.mb-item {
  display: flex; flex-direction: column; gap: .4rem; padding: .35rem; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 11px; font: inherit;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.mb-item:hover { background: rgba(255, 255, 255, .04); border-color: var(--line-2); transform: translateY(-2px); }
.mb-item.active { border-color: rgba(0,0,0, .6); background: rgba(0,0,0, .08); }
.mb-prev { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); }
.mb-prev b { font-size: .82rem; font-weight: 800; }
.mb-label { font-size: .74rem; font-weight: 600; color: var(--text); }
/* transition mini-previews (two panels + the transition zone) */
.mb-tr-cut { background: linear-gradient(90deg, #b57cf0 0 50%, #8ec5ff 50% 100%); }
.mb-tr-xfade { background: linear-gradient(90deg, #b57cf0 0 30%, #a9a2ea 50%, #8ec5ff 70% 100%); }
.mb-tr-dip { background: linear-gradient(90deg, #b57cf0 0 28%, #0b0b10 50%, #8ec5ff 72% 100%); }
.mb-tr-fade { background: linear-gradient(90deg, #0b0b10, #b57cf0 34%, #8ec5ff 66%, #0b0b10); }
.mb-item[draggable="true"] { cursor: grab; }
.mb-item.dragging { opacity: .5; }
.sb-btn { width: 100%; background: none; border: 1px dashed var(--line-2); color: var(--muted); border-radius: 10px; padding: .55rem; cursor: pointer; font-size: .85rem; }
.sb-btn:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.sb-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  z-index: 120; max-width: min(90vw, 460px); text-align: center;
  background: rgba(10, 9, 14, .92); color: var(--text); border: 1px solid var(--line-2);
  border-radius: 12px; padding: .7rem 1rem; font-size: .85rem; line-height: 1.4;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.sb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sb-empty { color: var(--muted); font-size: .85rem; padding: 1rem; line-height: 1.5; }
/* Media card = just the thumbnail tile. Add/remove buttons overlay on hover. */
.sb-card { position: relative; width: 122px; height: 68px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; cursor: pointer; background: #000; flex: none; }
.sb-card:hover { border-color: var(--line-2); }
.sb-card.sel { border-color: rgba(0,0,0, .9); box-shadow: 0 0 0 1px rgba(0,0,0, .45); }
.sb-thumb { width: 100%; height: 100%; object-fit: contain; background: #000; display: grid; place-items: center; }
.sb-thumb-photo { object-fit: contain; }
.sb-thumb-empty { font-size: 1.1rem; color: var(--muted); }
/* Subtle status cue without text/dots: pulse while working, red ring if missing. */
.sb-card.st-generating, .sb-card.st-editing, .sb-card.st-restoring { animation: sbpulse 1s infinite alternate; }
.sb-card.st-missing { border-color: rgba(244, 63, 94, .7); }
@keyframes sbpulse { from { opacity: .5; } to { opacity: 1; } }
.sb-tl, .sb-x { position: absolute; top: 4px; z-index: 3; opacity: 0; transition: opacity .12s; cursor: pointer; line-height: 1; display: grid; place-items: center; }
.sb-card:hover .sb-tl, .sb-card:hover .sb-x { opacity: 1; }
.sb-tl { right: 4px; width: 22px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .6); border: 1px solid var(--line-2); color: #fff; font-size: .82rem; }
.sb-tl:hover { border-color: var(--neon); }
.sb-tl.on { color: var(--neon); border-color: rgba(255, 214, 10, .6); background: rgba(255, 214, 10, .14); }
.sb-x { left: 4px; width: 20px; height: 20px; border-radius: 6px; background: rgba(0, 0, 0, .6); border: none; color: #eee; font-size: .95rem; }
.sb-x:hover { color: #f43f5e; }
.sb-block { position: relative; background-size: cover; background-position: center; background-color: #000; min-width: 34px; cursor: pointer; }
.sb-blocknum { position: absolute; z-index: 2; left: .4rem; top: .25rem; font-size: .7rem; color: #fff; text-shadow: 0 1px 2px #000; }
/* iMovie-style filmstrip: distinct frames laid edge-to-edge across the clip. */
.sb-strip { position: absolute; inset: 0; display: flex; z-index: 1; }
.sb-frame { flex: 1 1 0; min-width: 0; background-size: cover; background-position: center; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .35); }
.sb-frame:last-child { box-shadow: none; }
/* A photo clip: tile the WHOLE image across the strip at its real aspect ratio
   (height-fit, repeat across) so it reads as the actual picture, not a zoom-crop. */
.sb-photostrip { display: block; background-repeat: repeat-x; background-position: center; background-size: auto 100%; background-color: #000; }
/* Per-clip audio band (iMovie's blue strip): waveform PNG over a blue base. */
.sb-clipwave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; min-height: 14px; z-index: 2;
  background-repeat: no-repeat; background-size: 100% 100%; background-position: center;
  pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.sb-block.sel { outline: 2px solid rgba(0,0,0, .8); outline-offset: -1px; z-index: 4; }
.sb-block.st-draft { opacity: .45; }
.sb-block.st-generating { animation: sbpulse .9s infinite alternate; }
/* Stacked lanes: video row on top, audio waveform lanes beneath, one playhead. */
.timeline-track.has-shots { display: block; overflow-x: auto; overflow-y: auto; padding: 0; place-items: unset; }
.tl-inner { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-height: 100%; box-sizing: border-box; }
.tl-lane { position: relative; width: 100%; flex: none; }
.tl-video { height: 90px; }
.tl-ruler { position: relative; height: 15px; flex: none; margin-bottom: 1px; }
.tl-tick { position: absolute; top: 0; font-size: .58rem; color: var(--muted); line-height: 15px; white-space: nowrap; border-left: 1px solid var(--line-2); padding-left: 3px; }
.tl-tick:first-child { border-left: none; padding-left: 0; }
/* iMovie-style per-clip label bar: amber duration + name over a soft top scrim. */
/* iMovie-style: a small duration pill in the corner, not a full scrim bar. The
   clip name only appears when the clip is selected or hovered. */
.sb-cliplabel {
  position: absolute; z-index: 3; top: 5px; left: 5px; max-width: calc(100% - 10px);
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .34rem; font-size: .6rem; line-height: 1.3; color: #fff;
  background: rgba(0, 0, 0, .55); border-radius: 5px;
  white-space: nowrap; overflow: hidden; pointer-events: none;
}
.sb-cliplabel .cl-dur { font-weight: 700; color: #fff; flex: none; }
.sb-cliplabel .cl-name { display: none; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.sb-block:hover .sb-cliplabel .cl-name, .sb-block.sel .sb-cliplabel .cl-name { display: inline; }
.sb-title .sb-cliplabel { background: rgba(0, 0, 0, .32); }
.sb-title .sb-cliplabel .cl-dur { color: #fff; }
.tl-video .clip-block.sb-block { position: absolute; top: 0; bottom: 0; inset-inline: auto; height: auto; padding: 0; min-width: 8px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: filter .12s ease, box-shadow .12s ease; }
.tl-video .clip-block.sb-block:hover { filter: brightness(1.07); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.tl-video .clip-block.sb-block.sel { box-shadow: 0 2px 10px rgba(0,0,0, .28); }
.tl-video .clip-block.sb-block.dragging { opacity: .82; z-index: 7; cursor: grabbing; box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
/* Overlay (picture-in-picture) lane — clips that play ON TOP of the film.
   Calm by default; only glows as a dropzone while you're dragging onto it. */
.tl-overlay { height: 58px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.tl-overlay.drop-here { border-color: var(--neon); border-style: solid; background: rgba(255, 214, 10, .1); }
.tl-overlay-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .66rem; color: var(--muted); opacity: .7; white-space: nowrap; pointer-events: none; }
.tl-oclip {
  position: absolute; top: 3px; bottom: 3px; border-radius: 7px; overflow: visible; min-width: 24px;
  border: 1px solid rgba(255, 214, 10, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: grab; touch-action: none; background: #000;
}
/* Connector cue: a little amber stalk + dot linking the overlay to its point on
   the storyline above (iMovie's "attached clip" look). */
.tl-oclip::before {
  content: ''; position: absolute; top: -11px; left: 0; width: 2px; height: 11px;
  background: rgba(255, 214, 10, .65); border-radius: 1px;
}
.tl-oclip::after {
  content: ''; position: absolute; top: -13px; left: -2px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 0 2px rgba(8, 7, 12, .8);
}
.tl-oclip > .sb-strip, .tl-oclip > .sb-photostrip { border-radius: 6px; overflow: hidden; }
.tl-oclip.sel { outline: 2px solid rgba(0,0,0, .9); outline-offset: -1px; z-index: 4; }
.sb-ocorner {
  position: absolute; right: 22px; top: 3px; z-index: 5; width: 20px; height: 18px; border-radius: 5px;
  background: rgba(0, 0, 0, .58); border: 1px solid var(--line-2); color: var(--neon); font-size: .7rem;
  line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.sb-ocorner:hover { border-color: var(--neon); }
.sb-ox { position: absolute; right: 3px; top: 3px; z-index: 5; width: 18px; height: 18px; border-radius: 5px; background: rgba(0, 0, 0, .58); border: none; color: #ddd; font-size: .85rem; line-height: 1; cursor: pointer; padding: 0; }
.sb-ox:hover { color: #f43f5e; }
/* The live PiP inset over the preview stage (mirrors the export compositing). */
.sb-pip { position: absolute; z-index: 4; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 22px rgba(0, 0, 0, .6); border: 2px solid rgba(255, 255, 255, .9); background: #000; line-height: 0; }
.sb-pip-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-audio { height: 46px; }
/* iMovie audio clip: solid coloured body, darker waveform layer on top. */
.tl-aclip {
  position: absolute; left: 0; top: 0; bottom: 0; min-width: 30px; border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); cursor: grab; touch-action: none;
}
.tl-aclip.dragging { cursor: grabbing; z-index: 5; }
.tl-music .tl-aclip, .tl-voice .tl-aclip { background: linear-gradient(180deg, #46c568, #38a657); }
.tl-wave { position: absolute; inset: 0; z-index: 1; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
/* Audio clip trim edges */
.tl-atrim { position: absolute; top: 0; bottom: 0; width: 10px; z-index: 4; cursor: ew-resize; touch-action: none; }
.tl-atrim.l { left: 0; } .tl-atrim.r { right: 0; }
.tl-audio:hover .tl-atrim::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 46%; border-radius: 2px; background: rgba(255, 255, 255, .9); }
/* Fade fills (triangular gradient) + draggable corner dots */
.tl-fadefill { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; }
.tl-fadefill.l { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent); }
.tl-fadefill.r { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .55), transparent); }
.tl-fadedot { position: absolute; top: -3px; width: 11px; height: 11px; margin-left: -5px; margin-right: -5px; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .5); z-index: 5; cursor: ew-resize; opacity: 0; transition: opacity .12s; touch-action: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.tl-audio:hover .tl-fadedot { opacity: 1; }
.tl-alabel { position: absolute; left: .45rem; top: .28rem; z-index: 2; font-size: .68rem; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); white-space: nowrap; pointer-events: none; }
.tl-actrl { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; gap: .3rem; opacity: 0; transition: opacity .12s; }
.tl-audio:hover .tl-actrl { opacity: 1; }
.tl-avol { width: 76px; accent-color: var(--neon); cursor: pointer; }
.tl-achip { background: rgba(0, 0, 0, .5); border: 1px solid var(--line-2); color: #cfcfd6; border-radius: 6px; font-size: .66rem; padding: .12rem .32rem; cursor: pointer; }
.tl-achip.on { color: var(--neon); border-color: rgba(255, 214, 10, .5); }
.tl-ax { background: rgba(0, 0, 0, .5); border: none; color: #ddd; border-radius: 6px; font-size: .85rem; line-height: 1; padding: .05rem .3rem; cursor: pointer; }
.tl-ax:hover { color: #f43f5e; }

/* ── Effort chip: floats just right of the attach panel ── */
.effort-pick { position: absolute; top: 10px; left: 298px; z-index: 3; }
.effort-pick .opt-btn {
  border-radius: 99px; padding: .5rem .95rem; font-size: .84rem;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* Floats at the top, so the menu drops DOWN and hangs off the left edge. */
.model-menu.effort-menu { right: auto; left: 0; min-width: 165px; background: #ffffff; }
@media (max-width: 1399px) { .effort-pick { top: 14px; left: 14px; } }

/* ── Attach panel: accordion in the space between sidebar and messages ── */
.composer-wrap { position: relative; }

/* Clarifying questions pop up floating over the thread, anchored on top of
   the composer — nothing is there when no question is open, and the page
   never shifts. */
.q-dock {
  position: absolute; bottom: 100%; left: 0; right: 0;
  margin: 0 auto; max-width: 780px; z-index: 3;
}
.q-dock .q-card {
  max-width: 100%;
  border-bottom-left-radius: 16px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.q-card { position: relative; }
.q-skip {
  position: absolute; top: .55rem; right: .6rem;
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .88rem; line-height: 1; padding: .25rem .4rem; border-radius: 7px;
}
.q-skip:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.attach-panel {
  position: absolute; left: 14px; top: 10px; max-height: calc(100% - 24px); width: 272px;
  z-index: 2; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: .45rem;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.attach-panel::-webkit-scrollbar { width: 6px; }
.attach-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0, .4); border-radius: 999px; }
.ap-row { position: relative; }
.ap-row + .ap-row { border-top: 1px solid var(--line); }
.ap-head {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  background: none; border: none; color: var(--text);
  font-size: .92rem; font-weight: 600; text-align: left;
  padding: .7rem .6rem; border-radius: 12px; cursor: pointer;
}
.ap-head:hover { background: var(--panel-2); }
/* Leading glyph — gives each mode instant identity. */
.ap-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); transition: color .15s ease, border-color .15s ease;
}
.ap-ico svg { width: 17px; height: 17px; }
.ap-head:hover .ap-ico, .ap-row.open .ap-ico { color: var(--text); border-color: var(--line-2); }
.ap-label { display: inline-flex; align-items: baseline; }
/* Info lives on the title via a dotted underline — hover the word. */
.ap-title[data-info] {
  text-decoration: underline dotted; text-decoration-color: rgba(255,255,255,.3);
  text-underline-offset: 3px; cursor: help;
}
.ap-title[data-info]:hover { text-decoration-color: var(--text); }
.ap-count { color: var(--muted); font-weight: 600; margin-left: .45rem; font-size: .82rem; }
/* The row's actual limits (seconds · megabytes), sat after the n/cap count so
   they read before you attach rather than as an error afterwards. Lighter and
   smaller than the count — reference, not status. Empty on rows with no cap,
   and the :empty rule keeps the separator from showing on its own. */
.ap-cap { color: var(--muted); opacity: .72; font-weight: 500; margin-left: .4rem; font-size: .72rem; white-space: nowrap; }
.ap-cap:not(:empty)::before { content: '·'; margin-right: .4rem; opacity: .6; }
.ap-head > svg { margin-left: auto; color: var(--muted); transition: transform .22s ease; flex-shrink: 0; }
.ap-row.open .ap-head > svg { transform: rotate(180deg); }
.ap-body { display: none; padding: .15rem .5rem .85rem 3.3rem; }
.ap-row.open .ap-body { display: block; }
.ap-body .attach-btn { padding: .5rem .85rem; font-size: .85rem; }
/* Extra image slots (multi-image models, e.g. Seedance refs) */
.ap-extra { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.ap-extra .slot {
  position: relative; width: 58px; height: 44px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line-2);
}
.ap-extra img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-extra .x {
  position: absolute; top: 0; right: 4px; cursor: pointer;
  color: #fff; text-shadow: 0 0 5px #000; font-weight: 700;
}
/* @ImageN tag badge on reference thumbnails (tag-binding models only). */
.ap-extra .slot-tag {
  position: absolute; left: 3px; bottom: 3px; padding: .08rem .3rem;
  font-size: .58rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: rgba(0, 0, 0, .72); border-radius: 5px;
  pointer-events: none;
}
/* Position number on multi-image thumbnails (main = 1, extras 2,3,…), so the
   prompt can say "the first image / the second image" — Nano references by
   position, not by an @Image tag. The 44px badge gutter applies ONLY while
   the badges show (2+ images — .has-nums, toggled by renderExtraImages), and
   slots SHRINK by the gutter instead of being pushed past the panel edge —
   the old push made image 1 wider than the rest and scrolled the panel
   sideways (it also silently shoved the avatar/end/audio slots, which never
   have badges at all). */
#rowImage .ap-body.has-nums .attach-btn.has,
#rowImgref .ap-body.has-nums .ap-add,
#rowImgref .ap-body.has-nums #extraImages .slot { margin-left: 44px; width: calc(100% - 44px); }
/* The outside-left badge must not be clipped: these slots stop clipping and
   the image itself carries the rounding instead. */
#extraImages .slot { overflow: visible; }
#extraImages .slot img { border-radius: inherit; }
/* Position badge lane: the n/14 pill sits OUTSIDE the thumbnail, to its left
   (owner 2026-07-16) — the frame carrying it reserves the lane via margin. */
.slot-num {
  position: absolute; left: -44px; top: 6px; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; line-height: 1; color: var(--on-accent);
  background: var(--split); border-radius: 999px; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.ap-add { margin-top: .5rem; }
/* Not enough side room → the panel becomes a block above the composer. */
@media (max-width: 1399px) {
  .attach-panel {
    position: static; align-self: center; width: 100%; max-width: 780px;
    max-height: 220px; margin: 0 0 .5rem;
  }
}
/* Below 1100px the mode-switch can't tuck into the composer's left edge, so
   the four controls won't fit one line — drop the send to a full-width bar
   rather than orphaning it at the right edge. */
@media (max-width: 1099px) {
  .composer-row { row-gap: .7rem; }
  .composer-row .send { flex: 1 1 100%; margin-left: 0; min-width: 0; }
}

/* ── Chatbox lifted; arrow beneath slides down to the Presets screen ── */
/* Extra bottom padding floats the box ~1in off the bottom; the arrow lives
   in the freed space. */
.view-home .composer-wrap { padding-bottom: 1.4rem; }
.drawer-arrow {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  margin: .7rem auto 0;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted);
  cursor: pointer;
  transition: transform .28s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.drawer-arrow:hover { color: var(--text); border-color: rgba(0,0,0,.3); background: rgba(255,255,255,.09); }

/* Two full screens stacked vertically; the slide translates between them. */
.home-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1); will-change: transform;
}
.home-slide.show-presets { transform: translateY(-100%); }
.home-screen {
  height: 100%; flex: none; position: relative;
  display: flex; flex-direction: column; min-height: 0;
}
.presets-screen {
  position: relative; height: 100%; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1.1rem 1.5rem 1.5rem; overflow-y: auto;
}
/* Soft top-center glow behind the header. */
.presets-screen::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 900px; max-width: 100%; height: 340px; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%, rgba(0,0,0, .11), transparent 72%);
}
.presets-screen > * { position: relative; z-index: 1; }
.presets-screen .drawer-arrow { margin: 0 auto; }
.presets-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin-top: .2rem;
}
.presets-sub { color: var(--muted); font-size: .92rem; margin-bottom: .3rem; }
.presets-body { flex: none; width: 100%; max-width: 820px; }
/* Glass tab bar — one rounded rail holding the category pills. */
.pt-tabs {
  display: flex; gap: .15rem; justify-content: center; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin: .55rem auto 1.6rem;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pt-tab {
  background: transparent; border: none; color: var(--muted);
  font: inherit; font-weight: 600; font-size: .86rem; padding: .46rem 1.05rem;
  border-radius: 999px; cursor: pointer; transition: color .12s ease, background .12s ease;
}
.pt-tab:hover { color: var(--text); }
.pt-tab.active { background: var(--split); color: var(--on-accent); box-shadow: 0 4px 14px rgba(0,0,0, .3); }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
/* Glass preset card: framed gradient preview + a footer row. */
.pt-card {
  display: flex; flex-direction: column; padding: .55rem; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid var(--line-2); border-radius: 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  transition: border-color .13s ease, transform .13s ease, box-shadow .13s ease;
}
.pt-card:hover {
  border-color: rgba(0, 0, 0, .5); transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
.pt-prev {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 14px; background: var(--panel-2);
}
.pt-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-prev-ph::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(75% 65% at 30% 18%, rgba(255, 255, 255, .34), transparent 66%);
}
/* Soft neutral mesh — three light grey blobs on the B&W platform. */
.pt-ph0 { background:
  radial-gradient(100% 100% at 12% 10%, rgba(0,0,0,.10), transparent 55%),
  radial-gradient(110% 110% at 88% 28%, rgba(0,0,0,.06), transparent 58%),
  radial-gradient(120% 120% at 75% 92%, rgba(0,0,0,.09), transparent 55%), var(--panel-2); }
.pt-ph1 { background:
  radial-gradient(100% 100% at 15% 12%, #ffcfe2, transparent 58%),
  radial-gradient(110% 110% at 85% 25%, #d3c6f5, transparent 60%),
  radial-gradient(120% 120% at 72% 90%, #ffdcb6, transparent 58%), #e2d3f0; }
.pt-ph2 { background:
  radial-gradient(100% 100% at 12% 12%, #ffb6d4, transparent 54%),
  radial-gradient(110% 110% at 86% 30%, #bfa9f0, transparent 56%),
  radial-gradient(120% 120% at 74% 90%, #ffc79a, transparent 55%), #d6bce9; }
.pt-ph3 { background:
  radial-gradient(100% 100% at 14% 10%, #ffc2dd, transparent 55%),
  radial-gradient(110% 110% at 84% 26%, #c8b4f3, transparent 58%),
  radial-gradient(120% 120% at 76% 92%, #ffd0a0, transparent 55%), #dcc4ee; }
.pt-foot { display: flex; align-items: center; gap: .6rem; padding: .75rem .55rem .4rem; }
.pt-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--neon); }
.pt-ico svg { width: 20px; height: 20px; }
.pt-meta { flex: 1; min-width: 0; }
.pt-card-t { display: block; font-size: .95rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-card-s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: .78rem; color: var(--muted); overflow: hidden; line-height: 1.35; margin-top: .1rem;
}
.pt-try {
  flex: 0 0 auto; background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2); color: var(--text); font-weight: 700; font-size: .82rem;
  padding: .4rem .95rem; border-radius: 10px; transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.pt-card:hover .pt-try { background: var(--split); color: var(--on-accent); border-color: transparent; }
@media (max-width: 1040px) {
  .pt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pt-grid { grid-template-columns: 1fr; }
}

/* ── Home landing / dashboard ── */
.view-landing.active { flex-direction: column; overflow-y: auto; padding: 2.6rem 2rem 3rem; }
/* Flex column filling the view so the bottom-docked chatbox (.lp-compose,
   margin-top:auto) pins to the bottom even when the page content is short. */
.lp-page { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; flex: 1 0 auto; }
.lp-hero { margin-bottom: 1.8rem; }
.lp-hero h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.lp-hero p { color: var(--muted); font-size: .95rem; margin-top: .35rem; }
.lp-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 1.1rem 1.15rem;
  cursor: pointer; transition: border-color .12s ease, transform .12s ease;
}
.lp-card:hover { border-color: rgba(0, 0, 0, .5); transform: translateY(-2px); }
.lp-ico { font-size: 1.4rem; margin-bottom: .35rem; }
.lp-t { font-size: 1rem; font-weight: 600; color: var(--text); }
.lp-s { font-size: .8rem; color: var(--muted); }
.lp-sec { margin: 2.2rem 0 .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lp-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .8rem; }
.lp-rec {
  aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2);
  background: var(--panel-2); cursor: pointer; padding: 0; display: grid; place-items: center;
  transition: border-color .12s ease;
}
.lp-rec img, .lp-rec video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-rec-audio { font-size: 1.6rem; opacity: .7; }
.lp-rec:hover { border-color: rgba(0, 0, 0, .5); }
@media (max-width: 900px) { .view-landing.active { padding: 1.6rem 1rem 2.5rem; } }
/* Netflix-style model showcase rows */
.nf-row { margin-top: 2.1rem; }
.nf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.nf-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.nf-all {
  flex-shrink: 0; background: none; border: none; color: var(--muted); font: inherit;
  font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
  gap: .15rem; transition: color .12s ease;
}
.nf-all:hover { color: var(--text); }
.nf-all-c { font-size: 1.05rem; line-height: 1; }
.nf-track {
  display: flex; gap: .8rem; overflow-x: auto; overflow-y: hidden;
  padding-bottom: .6rem; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.nf-track::-webkit-scrollbar { height: 8px; }
.nf-track::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.nf-card {
  flex: 0 0 auto; width: 168px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden;
  position: relative; background: var(--panel-2); border: 1px solid var(--line-2); cursor: pointer;
  scroll-snap-align: start; transition: transform .14s ease, border-color .14s ease;
}
.nf-card:hover { transform: scale(1.045); border-color: rgba(0, 0, 0, .5); z-index: 1; }
.nf-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-ph { display: grid; place-items: center; }
.nf-ph0 { background: linear-gradient(160deg, rgba(0,0,0,.14), rgba(0,0,0,.05)); }
.nf-ph1 { background: linear-gradient(160deg, rgba(0,0,0,.14), rgba(0,0,0,.05)); }
.nf-ph2 { background: linear-gradient(160deg, rgba(0,0,0,.05), rgba(0,0,0,.16)); }
.nf-play { font-size: 1.4rem; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }

/* ── Chat column nudged right of center (box + thread text together) ── */
/* The wide "floating attach rail + shifted column" layout — the 24" desktop
   look — needs room for the rail on the left. It fits from ~1400px, so laptops
   that wide get it too; below that the panel becomes an inline card. */
@media (min-width: 1400px) {
  .thread-inner,
  .view-home .composer,
  .view-home .drawer-arrow { position: relative; left: 100px; }
  .view-home .q-dock { transform: translateX(100px); }
}

/* ── Image previews in the panel: big card (user-picked size) ── */
#rowImage .ap-body,
#rowAvatar .ap-body,
#rowEnd .ap-body { padding-left: .6rem; }
#rowImage .attach-btn.has,
#rowAvatar .attach-btn.has,
#rowEnd .attach-btn.has { display: block; width: 100%; padding: .3rem; position: relative; }
#rowImage .attach-btn.has img,
#rowAvatar .attach-btn.has img,
#rowEnd .attach-btn.has img,
#rowClip .attach-btn.has img, #srVidGroup .attach-btn.has img { width: 100%; height: 190px; object-fit: cover; border-radius: 10px; }
#rowImage .attach-btn.has .x,
#rowAvatar .attach-btn.has .x,
#rowEnd .attach-btn.has .x {
  position: absolute; top: 10px; right: 14px; font-size: 1.15rem;
  color: #fff; text-shadow: 0 0 6px #000;
}
.ap-extra .slot { width: 100%; height: 190px; border-radius: 10px; }
.ap-extra { gap: .5rem; }

/* Empty image slot: same size as the picture it will hold, plus centered */
#rowImage .attach-btn:not(.has),
#rowAvatar .attach-btn:not(.has),
#rowEnd .attach-btn:not(.has) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; width: 100%; height: 190px; padding: 0; border-radius: 10px;
}
#rowImage .plus-big, #rowAvatar .plus-big, #rowEnd .plus-big { font-size: 2.1rem; font-weight: 300; line-height: 1; }
#rowImage .slot-count, #rowAvatar .slot-count, #rowEnd .slot-count { font-size: .75rem; color: var(--muted); }

/* First & last frame + Reference to video: match the Image row's full-width
   dashed drop-zones so the three inputs read as one system. (NB: leave the
   body's display to the .ap-row.open toggle — forcing display here would pin
   the row permanently open.) */
#rowFlf .ap-body, #rowRef .ap-body, #rowEl .ap-body, #rowClip .ap-body, #srVidGroup .ap-body { padding-left: .6rem; }
#rowImgref .ap-body { padding-left: .6rem; position: relative; }
#rowFlf .attach-btn:not(.has),
#rowImgref .ap-add,
#rowClip .attach-btn:not(.has),
#srVidGroup .attach-btn:not(.has),
#rowRef .ap-add,
#rowEl .ap-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; width: 100%; height: 190px; padding: 0; border-radius: 10px;
}
#rowFlf .attach-btn + .attach-btn { margin-top: .55rem; }
#rowFlf .attach-btn.has { display: block; width: 100%; padding: .3rem; position: relative; }
#rowFlf .attach-btn.has img { width: 100%; height: 190px; object-fit: cover; border-radius: 10px; }
#rowFlf .attach-btn.has .x {
  position: absolute; top: 10px; right: 14px; font-size: 1.15rem;
  color: #fff; text-shadow: 0 0 6px #000;
}
#rowFlf .plus-big, #rowRef .plus-big, #rowEl .plus-big, #rowClip .plus-big, #rowImgref .plus-big, #srVidGroup .plus-big { font-size: 2.1rem; font-weight: 300; line-height: 1; }
#rowFlf .slot-lab, #rowFlf .slot-count, #rowRef .slot-count, #rowEl .slot-count, #rowClip .slot-lab, #rowImgref .slot-count, #srVidGroup .slot-lab { font-size: .75rem; color: var(--muted); }
#rowRef .ap-extra, #rowEl .ap-extra, #rowImgref .ap-extra { gap: .55rem; margin-bottom: .55rem; }
/* Attached clip: first-frame thumbnail card (same shape as the flf slots).
   While the thumb is still being captured the 🎬 chip centers in the box. */
#rowClip .attach-btn.has, #srVidGroup .attach-btn.has {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 96px; margin-left: 0; padding: .3rem;
  border-radius: 12px; position: relative;
}
#rowClip .attach-btn.has .x, #srVidGroup .attach-btn.has .x {
  position: absolute; top: 10px; right: 14px; font-size: 1.15rem;
  color: #fff; text-shadow: 0 0 6px #000;
}

/* Explainer popover — anchored under a title's dotted-underlined word on hover. */
#apInfoPop {
  position: fixed; z-index: 200; max-width: 244px; display: none;
  background: #ffffff; border: 1px solid var(--line-2); border-radius: 10px;
  padding: .6rem .7rem; font-size: .8rem; line-height: 1.42; color: var(--text);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
#apInfoPop.open { display: block; }
/* Caret pointing up to the ⓘ that opened it. */
#apInfoPop::before {
  content: ''; position: absolute; top: -6px; left: 16px; width: 10px; height: 10px;
  background: #14121b; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2);
  transform: rotate(45deg);
}
/* No header bar anymore — keep the first message clear of the floating chip. */
.view-home .thread { padding-top: 3.4rem; }

/* Jump-to-latest chevron: shown only when the thread is scrolled up (JS toggles
   .show), so autoscroll no longer has to yank the user down on every message. */
.scroll-down {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 200px; z-index: 40;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.scroll-down.show { opacity: 1; pointer-events: auto; }
.scroll-down:hover { border-color: var(--text); }

/* ── Audio slot: waveform bars (design B) ── */
#rowAudio .ap-body, #srAudGroup .ap-body { padding-left: .6rem; }
#rowAudio .attach-btn, #srAudGroup .attach-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 96px; padding: 0; border-radius: 12px; overflow: hidden;
}
#rowAudio .attach-btn.has, #srAudGroup .attach-btn.has { border-style: solid; border-color: var(--neon); }
.aw-bars {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 3px; padding: 0 14px; pointer-events: none;
}
.aw-bars i { width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--purple), var(--neon)); opacity: .3; }
.aw-bars.lit i { opacity: .85; }
#rowAudio .plus-big, #srAudGroup .plus-big { position: relative; z-index: 2; font-size: 1.9rem; font-weight: 300; line-height: 1; }
.aw-play {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: var(--split); color: var(--on-accent);
  display: grid; place-items: center; font-size: .72rem; cursor: pointer;
}
.aw-meta {
  position: absolute; left: 12px; bottom: 7px; z-index: 2;
  font-size: .72rem; font-weight: 600; color: var(--text); text-shadow: 0 0 4px #000;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#rowAudio .attach-btn .x, #srAudGroup .attach-btn .x {
  position: absolute; top: 2px; right: 9px; z-index: 3;
  color: #fff; text-shadow: 0 0 5px #000; font-weight: 700;
}
/* Bars ease between frames so the live dance looks fluid. */
.aw-bars i { transition: height .09s ease; }

/* ── Image source chooser + gallery picker ── */
#rowImage .ap-body { position: relative; }
.img-src-menu { top: 10px; left: 10px; right: auto; min-width: 170px; background: #ffffff; }
.img-src-menu .check { color: var(--muted); }
.gal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 7, 12, .6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
}
.gal-box {
  width: min(96vw, 1500px); height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #26262d, #1e1e24);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 26px;
  padding: 1.4rem 1.7rem 1.7rem;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.gal-box::-webkit-scrollbar { width: 9px; }
.gal-box::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 5px; }
.gal-box::-webkit-scrollbar-track { background: transparent; }

/* ── GPT inpainting: paint-the-edit-region button + editor ── */
.mask-btn {
  display: block; width: 100%; margin-top: .5rem; padding: .5rem .75rem;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text);
  background: var(--panel-2); border: 1px dashed var(--line-2); border-radius: 10px;
  cursor: pointer; text-align: center; transition: border-color .12s, background .12s;
}
.mask-btn:hover { border-color: var(--neon); }
.mask-btn.has-mask {
  border-style: solid; border-color: var(--neon); background: rgba(0,0,0, .08);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.mask-btn .mask-clear {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: .7rem; line-height: 1;
}
.mask-btn .mask-clear:hover { background: var(--neon); color: var(--on-accent); }
.mask-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(8, 7, 12, .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.mask-box {
  background: linear-gradient(180deg, #26262d, #1e1e24);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 20px;
  padding: 1.1rem 1.2rem 1.2rem; max-width: 94vw;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.mask-head { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .8rem; }
.mask-title { font-weight: 700; font-size: 1rem; }
.mask-sub { font-size: .78rem; color: var(--muted); }
.mask-stage { position: relative; border-radius: 12px; overflow: hidden; user-select: none; }
.mask-stage .mask-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mask-stage .mask-paint { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.mask-tools { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; flex-wrap: wrap; }
.mask-brush { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); }
.mask-brush input { accent-color: #1e1e22; }
.mask-clearall {
  padding: .4rem .8rem; font: inherit; font-size: .8rem; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px; cursor: pointer;
}
.mask-actions { margin-left: auto; display: flex; gap: .5rem; }
.mask-cancel {
  padding: .5rem .9rem; font: inherit; font-size: .82rem; color: var(--muted);
  background: none; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer;
}
.mask-save {
  padding: .5rem 1.1rem; font: inherit; font-size: .82rem; font-weight: 700; color: var(--on-accent);
  background: var(--split); border: none; border-radius: 10px; cursor: pointer;
}
.gal-head {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: 1.2rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.gal-title { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.gal-sub { color: var(--muted); font-size: .82rem; }
.gal-close {
  margin-left: auto; align-self: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: none; color: var(--muted);
  font-size: 1.15rem; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.gal-close:hover { color: var(--text); background: rgba(255, 255, 255, .14); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.gal-grid img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
.gal-grid img:hover {
  border-color: var(--neon); transform: translateY(-3px) scale(1.015);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0,0,0, .25);
}
.gal-empty { color: var(--muted); font-size: .9rem; padding: 1.4rem 0; text-align: center; }

/* ── Gallery view: everything ever generated, newest first ── */
.view-gallery.active { flex-direction: column; overflow-y: auto; padding: 1.5rem 2rem 2.5rem; }
.gallery-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem .8rem; margin-bottom: 1.3rem; }
.gallery-title { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; }
.gallery-sub { color: var(--muted); font-size: .85rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.g-item {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: #101016;
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
  /* Scroll perf (owner 2026-07-16: "laggy scrolling"): skip layout/paint/
     decode for off-screen cards — a page of <video> elements otherwise keeps
     every decoder + full-res original live at once. The intrinsic size keeps
     the scrollbar from jumping while cards are skipped. */
  content-visibility: auto;
  contain-intrinsic-size: 280px 190px;
}
.g-item:hover { border-color: var(--neon); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.g-item img, .g-item video { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; cursor: pointer; }
.g-item:has(.au-card) { align-self: start; }
/* Custom audio card (owner 2026-07-16: native <audio controls> read as
   broken): brand equalizer bars that dance while playing, gradient
   play/pause, seekable track, tabular time. */
.au-card { display: flex; flex-direction: column; gap: .8rem; padding: 1rem .95rem .85rem; }
.au-card audio { display: none; }
.au-viz { display: flex; align-items: flex-end; gap: 3px; height: 44px; padding: 0 .1rem; }
.au-viz i { flex: 1; height: 22%; border-radius: 2px; background: linear-gradient(180deg, #1e1e22, #000000); opacity: .3; transform-origin: bottom; transition: opacity .25s ease; }
.au-viz i:nth-child(2n) { height: 46%; }
.au-viz i:nth-child(3n) { height: 68%; }
.au-viz i:nth-child(4n) { height: 34%; }
.au-viz i:nth-child(5n) { height: 88%; }
.au-viz i:nth-child(7n) { height: 56%; }
.au-card.playing .au-viz i { opacity: .95; animation: auDance .9s ease-in-out infinite alternate; }
@keyframes auDance { from { transform: scaleY(.35); } to { transform: scaleY(1.12); } }
.au-row { display: flex; align-items: center; gap: .6rem; }
.au-play { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--split); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: transform .12s ease; }
.au-play:hover { transform: scale(1.07); }
.au-play svg { width: 15px; height: 15px; }
.au-ic-pause { display: none; }
.au-card.playing .au-ic-play { display: none; }
.au-card.playing .au-ic-pause { display: block; }
.au-track { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .1); cursor: pointer; }
.au-fill { height: 100%; width: 0%; border-radius: 99px; background: var(--split); }
.au-time { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-actions {
  position: absolute; top: 7px; right: 8px; display: flex; gap: .35rem;
  opacity: 0; transition: opacity .15s ease; z-index: 2;
}
.g-item:hover .g-actions { opacity: 1; }
.g-btn {
  background: rgba(0, 0, 0, .6); border: none; color: #fff; font-size: .85rem;
  border-radius: 8px; padding: .28rem .55rem; cursor: pointer; text-decoration: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.g-btn:hover { background: rgba(0, 0, 0, .8); }
.g-prompt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.4rem .75rem .5rem; font-size: .74rem; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-item:hover .g-prompt { opacity: 1; }
.gallery-empty { color: var(--muted); font-size: .95rem; padding: 3rem 0; text-align: center; }

/* Gallery controls: filter chips + sort — on their OWN row under the title,
   so they clear the fixed top-right credit pill / avatar instead of colliding. */
.gallery-controls { width: 100%; margin-top: .9rem; display: flex; align-items: center; gap: .7rem; }
/* Underline tabs: plain text, active gets a pink→amber underline. */
.g-filters { display: inline-flex; gap: 1.5rem; }
.g-chip {
  background: none; border: none; color: var(--muted);
  font-weight: 600; font-size: .92rem; padding: .2rem 0 .5rem;
  position: relative; cursor: pointer; transition: color .15s ease;
}
.g-chip:hover { color: var(--text); }
.g-chip.active { color: var(--text); }
.g-chip.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--split);
}
.g-sort { border-radius: 99px; padding: .45rem .9rem; font-size: .82rem; margin-left: auto; }
/* Import-from-link box + Import button (the product-page URL pattern, reborn
   in the gallery — owner's ask 2026-07-16). */
.gi-url { display: flex; align-items: center; gap: .5rem; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; padding: .15rem .15rem .15rem .7rem; min-width: 230px; max-width: 340px; flex: 1; }
.gi-url:focus-within { border-color: rgba(0, 0, 0, .5); }
.gi-ico { color: var(--muted); display: inline-flex; }
.gi-ico svg { width: 14px; height: 14px; }
.gi-url input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: .84rem; padding: .42rem 0; }
.gi-url input::placeholder { color: rgba(237, 234, 243, .4); }
/* A hair wider + the ✦3 shown up front (same call as the old product box): a
   walled page auto-falls-back to the paid AI lookup, so the button says the
   worst-case price. A clean fetch still charges nothing. */
.gi-go { flex-shrink: 0; height: 30px; border-radius: 9px; border: none; background: var(--split); color: var(--on-accent); font-size: .95rem; font-weight: 700; cursor: pointer; transition: transform .12s ease; display: flex; align-items: center; gap: .25rem; padding: 0 .55rem; }
.gi-go-cr { font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.gi-go:hover:not(:disabled) { transform: translateY(-1px); }
.gi-go:disabled { opacity: .6; cursor: default; }
.g-import { border-radius: 99px; padding: .45rem .9rem; font-size: .82rem; white-space: nowrap; }

/* Attached-clip slot: first-frame thumbnail + a small duration tag. */
.attach-btn .clip-tag {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(8, 7, 12, .72); color: #fff;
  font-size: .7rem; font-weight: 700; padding: .2rem .45rem;
  border-radius: 7px; backdrop-filter: blur(4px); pointer-events: none;
}

/* Kind-aware library picker tiles: video + audio entries in the gal-grid. */
.gal-grid video {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
.gal-grid video:hover { border-color: var(--neon); transform: translateY(-2px); }
.gal-grid video.sel, .gal-grid .gal-audio-tile.sel { border-color: #1e1e22; box-shadow: 0 0 0 2px rgba(0,0,0, .55); }
.gal-audio-tile {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 16/10; padding: .8rem; border-radius: 14px; cursor: pointer;
  background: var(--panel-2); border: 1px solid rgba(255, 255, 255, .14);
  color: var(--muted); font-size: .8rem; word-break: break-all;
  transition: border-color .15s ease, transform .18s ease;
}
.gal-audio-tile:hover { border-color: var(--neon); transform: translateY(-2px); color: var(--text); }

/* Bottom-center toast (sbToast) — import errors, storage warnings. */
.sb-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  background: #ffffff; border: 1px solid var(--line-2); color: var(--text);
  font-size: .88rem; padding: .65rem 1rem; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 400; max-width: min(520px, 90vw); text-align: center;
}
.sb-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Gallery storage usage bar ── */
.gallery-storage {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .85rem 1rem; margin-bottom: 1.3rem;
  background: var(--panel, rgba(255,255,255,.03));
  border: 1px solid var(--line, rgba(255,255,255,.075)); border-radius: 14px;
}
.gs-row { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.gs-label { font-size: .82rem; font-weight: 600; color: var(--text); }
.gs-label .gs-tier {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-accent); background: var(--split); padding: .12rem .5rem; border-radius: 99px; margin-left: .5rem;
}
.gs-usage { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gs-track { height: 7px; border-radius: 99px; background: rgba(0,0,0,.09); overflow: hidden; }
.gs-fill { height: 100%; border-radius: 99px; background: var(--split); transition: width .3s ease; }
.gs-fill.warn { background: linear-gradient(120deg, #ff9a4d, #ffd24d); }
.gs-fill.full { background: linear-gradient(120deg, #ff5d7a, #ff9a4d); }
.gs-note { font-size: .78rem; color: var(--muted); }
.gs-note a, .gs-cta {
  color: var(--neon); font-weight: 600; cursor: pointer; text-decoration: none;
  background: none; border: none; font: inherit; padding: 0;
}
.gs-cta:hover { text-decoration: underline; }

/* ── Model picker: logo rows with spec chips (Higgsfield-style) ── */
.model-menu.drop-up.model-drop { min-width: 345px; }
.m-search {
  width: 100%; box-sizing: border-box; display: block;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--text); font: inherit; font-size: .88rem;
  padding: .55rem .8rem; margin-bottom: .3rem; outline: none;
}
.m-search::placeholder { color: var(--muted); }
.m-search:focus { border-color: rgba(0,0,0,.3); }
.m-section {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; padding: .45rem .5rem .4rem;
  background: var(--split); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Each row carries its provider's brand colour in --prov, used for the icon
   tile, hover wash and selected accent so the list reads colourful, not flat. */
.model-item.m-row {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .5rem .55rem; overflow: hidden;
}
.model-item.m-row:hover {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--prov, #fff) 13%, transparent), transparent 62%);
}
.model-item.m-row.selected {
  background: linear-gradient(100deg, rgba(0,0,0, .12), rgba(0,0,0, .07));
}
.model-item.m-row.selected::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--split);
}
.m-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--prov, #8a8a92) 26%, transparent), transparent 70%),
    #17171d;
  border: 1px solid color-mix(in srgb, var(--prov, #8a8a92) 34%, var(--line));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--prov, #000) 18%, transparent);
  display: grid; place-items: center;
}
/* The real monochrome brand mark, rendered crisp near-white so each provider's
   actual logo reads clearly; the tile behind it carries the brand-colour glow. */
.m-logo {
  width: 22px; height: 22px; display: block;
  object-fit: contain;
}
.m-ico b { font-size: 1rem; color: var(--prov, var(--text)); font-weight: 800; }
.m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .32rem; }
.m-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; flex-wrap: wrap; }
.m-title .spk { font-size: .72rem; opacity: .85; }
.m-badge {
  font-size: .58rem; font-weight: 800; letter-spacing: .05em;
  padding: .16rem .42rem; border-radius: 5px;
  background: var(--split); color: var(--on-accent);
  box-shadow: 0 0 12px rgba(255, 150, 120, .35);
}
.m-tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2);
  padding: .13rem .4rem; border-radius: 5px;
}
.m-tag.cheap {
  color: #4ade80; border-color: rgba(74, 222, 128, .4);
  background: rgba(74, 222, 128, .12);
}
.m-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.m-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: .13rem .45rem;
}
.m-chip:first-child {
  color: color-mix(in srgb, var(--neon) 85%, #fff);
  border-color: rgba(0,0,0, .32);
  background: rgba(0,0,0, .1);
}

/* ── Collapsed family rows + hover flyout ─────────────────────────── */
/* A group row (Seedance, Kling) shows the family + which variant is active;
   hovering it opens .model-flyout to the side with the individual models. */
.m-group .m-caret {
  flex: 0 0 auto; color: var(--muted); font-size: 1.3rem; font-weight: 700;
  line-height: 1; padding-right: .1rem; transition: color .15s, transform .15s;
}
.m-group:hover .m-caret { color: var(--text); transform: translateX(2px); }
/* the "N models" count chip stays neutral (override the neon first-child chip) */
.m-chip.m-count {
  color: var(--muted); border-color: var(--line); background: var(--panel-2);
}
/* active variant pill shown on the collapsed parent when one is selected */
.m-active {
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  padding: .12rem .44rem; border-radius: 999px; color: var(--on-accent);
  background: var(--split);
}
.model-flyout {
  position: fixed; z-index: 210; display: none;
  min-width: 258px; max-width: 320px; padding: .3rem;
  background: #ffffff; border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
  animation: menu-pop .16s ease;
}
.model-flyout .m-row { padding: .45rem .5rem; }
.model-flyout .m-ico { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
.model-flyout .m-logo { width: 19px; height: 19px; }

/* Credit balance pill above the account row. */
.side-credits {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-weight: 700; font-size: .86rem; color: var(--text);
  background: linear-gradient(130deg, rgba(0,0,0, .14), rgba(0,0,0, .14));
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 99px; padding: .3rem .75rem; margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}

/* ── Get-credits overlay ── */
.credits-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 15, 18, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.cp-box {
  width: min(92vw, 460px);
  background: #ffffff; border: 1px solid var(--line-2); border-radius: 20px;
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.cp-head { display: flex; align-items: center; }
.cp-title { font-weight: 700; font-size: 1.05rem; }
.cp-close {
  margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: .2rem .45rem; border-radius: 7px;
}
.cp-close:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.cp-sub { color: var(--muted); font-size: .85rem; margin: .35rem 0 1rem; }
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cp-card {
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 14px;
  padding: .95rem .5rem; cursor: pointer; text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.cp-card:hover { transform: translateY(-2px); border-color: rgba(0, 0, 0, .45); }
.cp-credits { font-weight: 800; font-size: 1rem; color: var(--text); }
.cp-usd {
  margin-top: .35rem; font-weight: 700; font-size: .92rem;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cp-note { margin-top: .8rem; color: var(--muted); font-size: .82rem; min-height: 1.1em; }
.side-credits { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.side-credits:hover { border-color: rgba(0, 0, 0, .55); transform: translateY(-1px); }

/* Membership cards */
.cp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cp-plan { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.cp-per { font-size: .72rem; font-weight: 600; color: var(--muted); margin-left: 2px; }
.cp-card { position: relative; }
.cp-best { border-color: rgba(0, 0, 0, .5); }
.cp-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--split); color: var(--on-accent); border-radius: 99px; padding: .16rem .5rem; white-space: nowrap;
}

/* Top-up minis under the membership cards */
.cp-box { width: min(92vw, 540px); }
.cp-sec {
  margin: 1.1rem 0 .55rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
/* Top-ups-only view: quiet list (design E) */
.cp-box.cp-narrow { width: min(92vw, 440px); }
.cp-narrow .cp-list { margin-top: .3rem; }
.cp-lrow {
  width: 100%; display: flex; align-items: baseline; gap: 1rem; text-align: left;
  background: none; border: none; border-top: 1px solid var(--line-2);
  color: var(--text); font-family: inherit; cursor: pointer; padding: .85rem .2rem;
  transition: opacity .12s ease;
}
.cp-lrow:first-child { border-top: none; }
.cp-lrow:hover { opacity: .72; }
.cp-lcr { font-size: 1.02rem; font-weight: 600; }
.cp-lusd {
  margin-left: auto; font-size: 1.02rem; font-weight: 700;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cp-grid-5 { grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.cp-mini { padding: .6rem .3rem; border-radius: 11px; }
.cp-mini .cp-credits { font-size: .78rem; }
.cp-mini .cp-usd { font-size: .8rem; margin-top: .25rem; }
@media (max-width: 560px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Full "Upgrade your plan" pricing page (profile → Upgrade) ────────────── */
.up-overlay {
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 46px 20px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(0,0,0, .07), transparent 60%),
    rgba(15, 15, 18, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: up-fade .22s ease both;
}
@keyframes up-fade { from { opacity: 0; } }
.cp-box.cp-wide {
  width: min(94vw, 1040px); position: relative; padding: 1.7rem 1.8rem 2rem;
  background: #ffffff;
  border: 1px solid var(--line-2);
  box-shadow: 0 44px 120px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
  animation: up-pop .34s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes up-pop { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.up-close {
  position: absolute; top: 1rem; right: 1rem; margin-left: 0; z-index: 3;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  padding: 0;
}
.up-close:hover { border-color: var(--line-2); }

/* Hero */
.up-promo {
  position: relative; border-radius: 20px; overflow: hidden;
  padding: 1.7rem 1.9rem; margin-bottom: 1.9rem;
  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.02) 60%, rgba(0,0,0,.012));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.up-promo::after {
  content: ''; position: absolute; top: -45%; right: -8%; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(0,0,0, .2), transparent 70%);
  filter: blur(8px); pointer-events: none;
}
.up-tagrow { position: relative; z-index: 1; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.up-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--split); color: var(--on-accent); font-weight: 800; font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; padding: .3rem .64rem; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0, .3);
}
.up-count {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 600; color: rgba(11, 11, 14, .75);
  background: rgba(0, 0, 0, .05); border: 1px solid var(--line-2);
  border-radius: 999px; padding: .28rem .7rem;
}
.up-count b {
  font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; color: #111114;
  font-variant-numeric: tabular-nums;
}
.up-count i { width: 6px; height: 6px; border-radius: 999px; background: var(--purple); animation: up-pulse 1.6s ease-in-out infinite; }
@keyframes up-pulse { 50% { opacity: .3; } }
.up-promo-h {
  position: relative; z-index: 1; font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.95rem; font-weight: 700; margin: .75rem 0 .35rem; letter-spacing: -.02em; line-height: 1.05;
}
.up-grad { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-promo-p { position: relative; z-index: 1; color: rgba(11, 11, 14, .62); font-size: .92rem; margin: 0; max-width: 560px; line-height: 1.55; }
.up-models { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .95rem; }
.up-mchip {
  font-size: .72rem; font-weight: 600; color: rgba(11, 11, 14, .72);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-radius: 999px; padding: .28rem .62rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.up-hero-cta {
  position: relative; z-index: 1; display: inline-block; margin-top: 1.05rem;
  background: var(--split); color: var(--on-accent); border: none; border-radius: 12px;
  padding: .62rem 1.25rem; font-weight: 800; font-size: .88rem; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0, .28); transition: transform .13s ease;
}
.up-hero-cta:hover { transform: translateY(-1px); }
.up-spark { position: absolute; z-index: 0; pointer-events: none; }
.up-spark.s1 { top: 18%; right: 15%; font-size: 1.15rem; color: rgba(0,0,0, .5); animation: up-float 5.5s ease-in-out infinite alternate; }
.up-spark.s2 { top: 58%; right: 7%; font-size: .8rem; color: rgba(0,0,0, .45); animation: up-float 4.2s ease-in-out .8s infinite alternate-reverse; }
@keyframes up-float { from { transform: translateY(-5px) rotate(-8deg); } to { transform: translateY(6px) rotate(10deg); } }

/* Trimmed promo: just the launch-offer pill + a big segmented countdown. */
.up-promo-timer { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; text-align: center; }
.up-segs { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: .7rem; }
.up-seg {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: #111114; border: 1px solid var(--line-2); border-radius: 14px;
  padding: .75rem 1.05rem; min-width: 92px; box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.up-seg b {
  font-family: 'Space Grotesk', Inter, sans-serif; font-variant-numeric: tabular-nums;
  font-size: 2.9rem; font-weight: 700; line-height: 1; color: #fff;
}
.up-seg span { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.up-colon { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 2.2rem; font-weight: 700; color: rgba(0, 0, 0, .55); padding-bottom: 1.4rem; }
@media (max-width: 560px) {
  .up-seg { min-width: 68px; padding: .6rem .5rem; }
  .up-seg b { font-size: 2.1rem; }
  .up-colon { font-size: 1.6rem; padding-bottom: 1.15rem; }
}

/* Heading block (centered) */
.up-headwrap { text-align: center; margin-bottom: 1.7rem; }
.up-eyebrow {
  font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .55rem;
}
.up-h1 { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .45rem; }
.up-sub { color: var(--muted); font-size: .95rem; margin: 0 auto; max-width: 560px; line-height: 1.5; }

/* Cards — each tier carries its own color identity (Plus neutral, Pro amber, Max pink) */
.up-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-items: stretch; margin-top: .5rem; }
.up-card {
  position: relative; border-radius: 20px; padding: 1.35rem 1.3rem 1.3rem; cursor: pointer; text-align: left;
  color: var(--text); font-family: inherit; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,.015));
  border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: up-rise .55s cubic-bezier(.2, .8, .3, 1) both;
}
.up-card:nth-child(1) { animation-delay: .08s; }
.up-card:nth-child(2) { animation-delay: .16s; }
.up-card:nth-child(3) { animation-delay: .24s; }
@keyframes up-rise { from { opacity: 0; transform: translateY(22px); } }
.up-card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
.up-card.t-plus {
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .025) 55%, rgba(255, 255, 255, .02));
  border-color: rgba(0, 0, 0, .34);
}
.up-card.t-plus:hover { border-color: rgba(0, 0, 0, .55); }
.up-card.t-pro {
  background: linear-gradient(180deg, rgba(0,0,0, .12), rgba(0,0,0, .04) 60%, rgba(255, 255, 255, .02));
  border-color: transparent;
}
.up-card.t-pro::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.4px;
  background: var(--split); opacity: .8;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  transition: opacity .18s ease;
}
.up-card.t-pro:hover::before { opacity: 1; }
.up-card.t-max {
  background: linear-gradient(180deg, rgba(0,0,0, .14), rgba(0,0,0, .035) 55%, rgba(255, 255, 255, .02));
  border-color: rgba(0,0,0, .42);
}
.up-card.t-max:hover { border-color: rgba(0,0,0, .68); }
.up-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--split); color: var(--on-accent); font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: .26rem .66rem; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0, .35); z-index: 1;
}
.up-namerow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.up-pname { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.up-chip {
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .24rem .5rem; border-radius: 6px; white-space: nowrap;
}
.up-chip.off { background: #8a8a90; color: var(--on-accent); }
.t-pro .up-chip.off { background: var(--split); }
.t-max .up-chip.off { background: var(--neon); }
.up-chip.val { background: var(--split); color: var(--on-accent); }
.up-desc { color: var(--muted); font-size: .8rem; margin-top: .3rem; }
/* Inset credits box — what the credits actually buy */
.up-credbox {
  margin-top: .95rem; border-radius: 14px; padding: .85rem .95rem;
  background: rgba(0, 0, 0, .04); border: 1px solid var(--line);
}
.up-credmain { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.12rem; font-weight: 700; }
.up-star { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-credeq { color: var(--muted); font-size: .78rem; margin-top: .32rem; padding-left: .15rem; }
.up-credroll {
  margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--line);
  font-size: .75rem; color: #111114; text-align: center; font-weight: 600;
}
/* Price + CTA + savings strip */
.up-priceline { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 .75rem; }
.up-strike {
  font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.1rem; font-weight: 700;
  color: rgba(11, 11, 14, .35); text-decoration: line-through;
}
.t-plus .up-strike { color: rgba(0, 0, 0, .72); }
.t-pro .up-strike { color: rgba(0,0,0, .75); }
.t-max .up-strike { color: rgba(0,0,0, .78); }
.up-pprice { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.up-permo { font-size: .72rem; color: rgba(11, 11, 14, .62); }
.up-buy {
  width: 100%; text-align: center; border-radius: 12px; padding: .8rem;
  font-weight: 800; font-size: .95rem; background: var(--split); color: var(--on-accent);
  border: none; transition: filter .15s ease, transform .12s ease;
}
.up-card:hover .up-buy { transform: translateY(-1px); filter: brightness(1.07); }
.t-plus .up-buy { background: #1e1e22; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
.t-pro .up-buy { background: var(--split); box-shadow: 0 10px 28px rgba(0,0,0, .28); }
.t-max .up-buy { background: var(--neon); box-shadow: 0 10px 28px rgba(0,0,0, .24); }
.up-save {
  margin-top: .55rem; text-align: center; font-size: .74rem; font-weight: 600;
  color: rgba(11, 11, 14, .55); background: rgba(0, 0, 0, .04);
  border-radius: 9px; padding: .45rem .5rem;
}
/* Feature matrix — check what you get, cross what the next tier adds */
.up-feat { list-style: none; padding: 0; margin: 1.05rem 0; display: flex; flex-direction: column; gap: .55rem; }
.up-feat li { font-size: .82rem; display: flex; gap: .55rem; align-items: flex-start; line-height: 1.4; }
.up-feat li.ok { color: #17171b; }
.up-feat li.ok::before { content: '\2713'; flex: none; font-weight: 900; color: #111114; }
.up-feat li.no { color: rgba(11, 11, 14, .52); }
.up-feat li.no::before { content: '\2715'; flex: none; font-weight: 700; color: rgba(11, 11, 14, .5); }
/* Model access panel */
.up-modelbox {
  margin-top: auto; border-radius: 14px; padding: .8rem .95rem;
  background: rgba(0, 0, 0, .04); border: 1px solid var(--line);
}
.up-mtitle { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.up-mrow { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: #17171b; padding: .34rem 0; }
.up-mrow + .up-mrow { border-top: 1px solid var(--line); }
.up-full {
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(0, 0, 0, .14); color: #111114; padding: .2rem .45rem; border-radius: 6px;
}
.up-note { text-align: center; }
.up-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem;
  margin-top: 1.7rem; color: rgba(11, 11, 14, .46); font-size: .8rem;
}
.up-trust span { position: relative; }
.up-trust span:not(:first-child):before {
  content: ''; position: absolute; left: -.76rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 999px; background: linear-gradient(120deg, #1e1e22, #000000);
}
.up-topnote { margin-top: 1rem; text-align: center; color: var(--muted); font-size: .88rem; }
.up-topup-link {
  background: none; border: none; color: #111114; font-weight: 700; cursor: pointer;
  font-family: inherit; font-size: .88rem; padding: 0;
}
.up-topup-link:hover { text-decoration: underline; }

/* AI Orchestrator add-on band on the pricing page */
/* Membership add-ons — glowing ID-badge cards */
.addon-eyebrow {
  margin: 1.6rem 0 .8rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
/* Two separate badge "envelopes" — each ID badge hangs from its built-in lanyard
   and gently SWAYS like it's dangling from a cord (pendulum around the strap at
   the top). The floor reflection is faded out so it reads as hanging, not
   standing. name/price/Add below. */
.addon-env-row { display: flex; gap: 1.4rem; align-items: stretch; }
.addon-env {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem;
  padding: 1rem 1.15rem 1.15rem; border-radius: 18px;
  background: rgba(255, 255, 255, .022); border: 1px solid var(--line);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.addon-env:hover {
  transform: translateY(-3px); border-color: rgba(0,0,0, .28);
  box-shadow: 0 18px 44px -22px rgba(0,0,0, .5);
}
/* Real badge photo with its background keyed out to true transparency, so it
   sits on the card as part of it on any page background. It hangs from its
   lanyard and gently sways; the stage carries the pink→amber glow. */
.addon-env-badge {
  position: relative; display: grid; place-items: start center; margin-bottom: .35rem;
  padding: .1rem .5rem 1.2rem; border-radius: 16px; overflow: visible; cursor: pointer;
  background: none;
}
.apb {
  max-height: 260px; width: auto; display: block;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .45)) brightness(1.05);
  /* Swing from the top of the lanyard, like a real hanging badge. */
  transform-origin: 50% 2%;
  animation: apb-sway 5.2s ease-in-out infinite;
  will-change: transform;
}
/* The second badge swings on an offset + different period so the pair dangles
   independently instead of in lockstep. */
.apb.b { animation-delay: -2.7s; animation-duration: 5.8s; }
@keyframes apb-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
/* Click feedback: a damped pendulum "kick" that overrides the idle sway, then
   hands back to it on animationend. */
.apb.kick { animation: apb-kick .9s cubic-bezier(.3, .5, .2, 1) !important; }
@keyframes apb-kick {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(-17deg); }
  32%  { transform: rotate(12deg); }
  50%  { transform: rotate(-8deg); }
  68%  { transform: rotate(5deg); }
  84%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .apb, .apb.kick { animation: none !important; } }
.addon-badge-name {
  font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 1.06rem;
  letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem;
}
.addon-tag {
  font-family: Inter, sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .16rem .42rem; border-radius: 6px; white-space: nowrap; flex: none;
  background: rgba(0,0,0, .14); color: #000000; border: 1px solid rgba(0,0,0, .28);
}
.addon-badge-name { flex-wrap: wrap; }
.addon-tag.soon { background: rgba(255, 255, 255, .06); color: var(--muted); border-color: var(--line-2); }
.addon-badge-desc { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.addon-badge-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; gap: .6rem; }
.addon-badge-price { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.addon-badge-price small { color: var(--muted); font-weight: 600; font-size: .78rem; margin-left: .1rem; }
.addon-badge-buy {
  flex-shrink: 0; border: none; border-radius: 11px; padding: .58rem 1.05rem; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .9rem; color: var(--on-accent);
  background: linear-gradient(120deg, #1e1e22, #000000); transition: transform .12s ease, box-shadow .2s ease;
}
.addon-badge-buy:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(0,0,0, .55); }
@media (max-width: 640px) { .addon-env-row { flex-direction: column; } }

/* AI Orchestrator upsell modal */
.orch-up { text-align: left; padding-top: 1.6rem; }
.orch-up-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.orch-up-spark { font-size: 1.1rem;
  background: linear-gradient(120deg, #1e1e22, #000000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orch-up-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.orch-up-price { margin-left: auto; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(120deg, #1e1e22, #000000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orch-up-price span { font-size: .78rem; color: var(--muted); -webkit-text-fill-color: var(--muted); font-weight: 600; }
.orch-up-lead { font-size: .9rem; color: var(--ink-2, #b6afc1); line-height: 1.5; margin: 0 0 1rem; }
.orch-up-feat { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.orch-up-feat li { position: relative; padding-left: 1.5rem; font-size: .88rem; color: var(--text); }
.orch-up-feat li::before { content: "✓"; position: absolute; left: 0; font-weight: 800;
  background: linear-gradient(120deg, #1e1e22, #000000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orch-up-buy {
  width: 100%; border: none; border-radius: 12px; padding: .85rem; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: .98rem; color: var(--on-accent);
  background: linear-gradient(120deg, #1e1e22, #000000); transition: transform .12s ease;
}
.orch-up-buy:hover { transform: translateY(-1px); }
.orch-up-fine { font-size: .78rem; color: var(--muted); line-height: 1.45; margin: .9rem 0 0; }

@media (max-width: 820px) {
  .up-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* (Memory FAB + "space" page removed — universal taste-memory is backend-only.) */

/* ── Public marketing landing (#marketing) ─────────────────────────────────
   Shown to logged-out visitors before the auth gate. Self-contained .mkt-*.
   Morphic-style: dark cinematic, filmstrip of output, two-tone headings.
   Media slots: /mkt/f1…f14.jpg (filmstrip) · /mkt/p1…p8.jpg (presets). */
.mkt{position:fixed;inset:0;z-index:60;overflow-y:auto;overflow-x:hidden;
  background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;scroll-behavior:smooth}
.mkt *,.mkt *::before,.mkt *::after{box-sizing:border-box}
.mkt img{max-width:100%}
.mkt button{font-family:inherit}
.mkt a{color:inherit;text-decoration:none}

/* ---- shared type ---- */
.mkt-h2{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 .9rem}
.mkt-h2 b{display:block;font-weight:700;color:var(--text)}
.mkt-h2 span{display:block;font-weight:700;color:rgba(237,234,243,.38)}
.mkt-h2-sub{color:var(--muted);font-size:clamp(.95rem,1.4vw,1.08rem);max-width:34rem;margin:0}
.mkt-sec-head{margin-bottom:2.2rem}
.mkt-sec-head.mkt-center{text-align:center}
.mkt-sec-head.mkt-center .mkt-h2-sub{margin:0 auto}
.mkt-grad{background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- buttons ---- */
.mkt-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--split);color:#14060d;border:none;border-radius:999px;cursor:pointer;
  font-weight:700;font-size:.95rem;padding:.85rem 1.7rem;letter-spacing:.01em;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 8px 32px rgba(0,0,0,.28),0 2px 12px rgba(0,0,0,.22);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.mkt-cta:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 14px 44px rgba(0,0,0,.4),0 4px 18px rgba(0,0,0,.3)}
.mkt-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--panel);color:var(--text);border:1px solid var(--line-2);border-radius:999px;
  cursor:pointer;font-weight:600;font-size:.95rem;padding:.85rem 1.6rem;
  transition:border-color .25s,background .25s,transform .25s}
.mkt-ghost:hover{border-color:rgba(255,255,255,.28);background:var(--panel-2);transform:translateY(-2px)}
.mkt-big{font-size:1rem;padding:.95rem 1.9rem}

/* ==========================================================================
   Nav
   ========================================================================== */
.mkt-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:.85rem clamp(1.1rem,4vw,3rem);
  background:rgba(8,7,12,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.mkt-brand{display:flex;align-items:center;gap:.55rem;
  font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.mkt-brand .logo-mark{width:28px;height:28px;border-radius:8px}
.mkt-links{display:flex;align-items:center;gap:clamp(.8rem,2.2vw,1.6rem)}
.mkt-links a{color:var(--muted);font-size:.9rem;font-weight:500;transition:color .2s}
.mkt-links a:hover{color:var(--text)}
.mkt-signin{background:none;border:none;color:var(--muted);font-size:.9rem;font-weight:500;
  cursor:pointer;padding:.4rem .2rem;transition:color .2s}
.mkt-signin:hover{color:var(--text)}
.mkt-nav .mkt-cta{padding:.55rem 1.2rem;font-size:.86rem}

/* ==========================================================================
   Hero — compact, left-aligned, filmstrip right below (Morphic)
   ========================================================================== */
.mkt-hero{position:relative;isolation:isolate;
  padding:clamp(3.4rem,8vh,5.5rem) clamp(1.1rem,4vw,3rem) clamp(2rem,4vh,3rem)}
.mkt-hero::before{content:"";position:absolute;inset:-40% -10% auto;height:130%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 60% at 18% 30%,rgba(0,0,0,.13),transparent 70%),
    radial-gradient(40% 55% at 78% 16%,rgba(0,0,0,.09),transparent 70%)}
.mkt-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;max-width:1180px;margin:0 auto}
.mkt-badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.4rem;
  padding:.42rem 1rem;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(255,255,255,.03);
  font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--text)}
.mkt-badge b{color:var(--neon);font-weight:700}
.mkt-h1{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;margin:0;
  font-size:clamp(2.6rem,6.6vw,5.2rem);line-height:.98;letter-spacing:-.045em}
.mkt-h1 .mkt-grad{background:linear-gradient(115deg,var(--purple) 15%,var(--neon) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(0,0,0,.28))}
.mkt-hero-side{padding-bottom:.3rem}
.mkt-sub{margin:0 0 1.5rem;color:rgba(237,234,243,.72);
  font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.6;max-width:30rem}
.mkt-cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.mkt-free-note{color:var(--muted);font-size:.83rem;margin:0}
.mkt-free-note b{color:var(--neon);font-weight:600}

/* ==========================================================================
   Filmstrip — two drifting rows of output frames (media slots /mkt/f*.jpg)
   ========================================================================== */
.mkt-strip{padding:0 0 .4rem}
.mkt-strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  max-width:1180px;margin:0 auto .9rem;padding:0 clamp(1.1rem,4vw,3rem)}
.mkt-strip-lbl{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--text)}
.mkt-strip-note{font-size:.78rem;color:var(--muted)}
.mkt-strip-row{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mkt-strip-row + .mkt-strip-row{margin-top:.6rem}
.mkt-strip-track{display:flex;width:max-content;animation:mkt-drift 64s linear infinite}
.mkt-strip-row.mkt-rev .mkt-strip-track{animation:mkt-drift 74s linear infinite reverse}
.mkt-strip-row:hover .mkt-strip-track{animation-play-state:paused}
@keyframes mkt-drift{to{transform:translateX(-50%)}}
.mkt-cell{position:relative;flex:0 0 auto;width:min(268px,44vw);aspect-ratio:16/9;
  margin-right:.6rem;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:#100e16}
.mkt-cell::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;
  font-size:1rem;color:rgba(237,234,243,.14)}
.mkt-cell-img{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center}
/* a real AI-made clip playing among the stills (the first filmstrip cell) */
.mkt-cell-vid{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;display:block}
/* tap-to-unmute button, top-right of the video tile */
.mkt-vid-sound{position:absolute;top:7px;right:7px;z-index:4;width:26px;height:26px;padding:0;
  display:grid;place-items:center;cursor:pointer;color:#fff;border-radius:50%;
  background:rgba(10,8,14,.5);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .15s ease,transform .15s ease,color .15s ease}
.mkt-vid-sound:hover{background:rgba(10,8,14,.82);transform:scale(1.08)}
.mkt-vid-sound svg{display:block}
.mkt-vid-sound .ico-on{display:none}
.mkt-vid-sound.on{color:var(--on-accent);background:var(--split);border-color:transparent}
.mkt-vid-sound.on .ico-on{display:block}
.mkt-vid-sound.on .ico-off{display:none}
/* placeholder duotones — covered the moment a real frame lands in /mkt/ */
.mkt-c1{background:radial-gradient(120% 130% at 20% 0%,rgba(0,0,0,.24),rgba(139,92,246,.14) 50%,#141021 85%)}
.mkt-c2{background:radial-gradient(120% 130% at 80% 10%,rgba(0,0,0,.2),rgba(200,90,50,.1) 50%,#181119 85%)}
.mkt-c3{background:radial-gradient(120% 140% at 50% 110%,rgba(90,140,255,.18),rgba(60,80,160,.1) 45%,#0f1220 85%)}
.mkt-c4{background:radial-gradient(130% 120% at 10% 90%,rgba(80,200,170,.14),rgba(40,110,110,.08) 50%,#0e1618 85%)}
.mkt-c5{background:radial-gradient(120% 130% at 90% 90%,rgba(255,90,110,.18),rgba(160,50,90,.1) 50%,#190f16 85%)}
.mkt-c6{background:radial-gradient(120% 140% at 30% 20%,rgba(190,160,255,.18),rgba(110,80,200,.1) 50%,#131022 85%)}
.mkt-c7{background:radial-gradient(130% 120% at 70% 0%,rgba(255,210,120,.18),rgba(190,120,50,.1) 50%,#171208 85%)}
.mkt-c8{background:radial-gradient(120% 130% at 15% 15%,rgba(120,220,255,.16),rgba(60,130,180,.09) 50%,#0d151d 85%)}
.mkt-c9{background:radial-gradient(120% 130% at 85% 20%,rgba(0,0,0,.2),rgba(0,0,0,.1) 55%,#170f18 85%)}
.mkt-c10{background:radial-gradient(130% 130% at 50% 0%,rgba(140,255,170,.12),rgba(60,140,90,.08) 50%,#0e1712 85%)}
.mkt-c11{background:radial-gradient(120% 140% at 25% 100%,rgba(255,150,80,.18),rgba(190,80,60,.1) 50%,#1a1210 85%)}
.mkt-c12{background:radial-gradient(120% 130% at 75% 100%,rgba(150,120,255,.18),rgba(90,70,190,.1) 50%,#120f1f 85%)}
.mkt-c13{background:radial-gradient(130% 120% at 90% 50%,rgba(255,220,160,.14),rgba(180,140,80,.08) 50%,#171408 85%)}
.mkt-c14{background:radial-gradient(120% 130% at 10% 40%,rgba(255,110,160,.18),rgba(170,60,120,.1) 50%,#180e15 85%)}

/* ==========================================================================
   Lead hero — chatbox + chips on the left; the picked kind's output on the
   right (vertical filmstrip for video/image, live demos for website).
   ========================================================================== */
.mkt-lead{position:relative;isolation:isolate;display:flex;align-items:center;
  gap:clamp(1.5rem,4vw,3rem);min-height:min(90vh,900px);overflow:hidden;
  padding-left:clamp(1.2rem,6vw,5rem)}
.mkt-lead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 52% at 22% 40%,rgba(0,0,0,.14),transparent 70%),
    radial-gradient(46% 52% at 80% 58%,rgba(0,0,0,.1),transparent 72%)}
.mkt-lead-copy{flex:0 0 clamp(360px,38%,500px);padding:4.5rem 0 2rem}
.mkt-lead-h1{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(2.3rem,4.6vw,3.7rem);margin:.35rem 0 0}
.mkt-lead-h1 em{font-style:normal;background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-lead-sub{color:rgba(237,234,243,.72);font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.6;
  max-width:30rem;margin:1rem 0 0}
/* the lead composer — the straight chatbox, full column width, wrapping text.
   Shorter top/bottom than the app composer (same width). */
.mkt-composer-lead{margin:0;max-width:none;padding:0}
.mkt-composer-lead .composer{padding:.9rem 1rem .75rem 1.3rem;gap:.5rem}
.mkt-composer-lead .mkt-fauxinput{white-space:normal;overflow:visible;align-items:flex-start;
  padding:.25rem 0 .35rem;font-size:1rem;line-height:1.5;font-weight:500}
.mkt-composer-lead .mkt-typebox-caret{align-self:flex-start;margin-top:.15rem}
/* output pickers — small rounded-square tiles fanned in a gentle arc over the
   chatbox (per the owner's sketch). Icon squircle + small label; active tile
   lifts and fills with the gradient. Game/Music are SOON teasers. */
/* a true semicircle over the chatbox: tiles positioned on a half-circle
   (x = R·cosθ, y = −R·sinθ at 180/135/90/45/0°), centered on the column so the
   dome sits symmetric over the box below. */
.mkt-picks{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:.7rem;margin:3.9rem 0 -1.7rem}
.mkt-pick{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:64px;flex:0 0 auto;
  background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font-family:inherit}
.mkt-pick .pk{position:relative;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--muted);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .3s cubic-bezier(.34,1.45,.5,1),box-shadow .3s ease,
    border-color .3s ease,background .3s ease,color .3s ease}
.mkt-pick .pk svg{width:21px;height:21px}
.mkt-pick .pl{font-size:.58rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;transition:color .3s ease}
.mkt-pick:hover .pk{transform:translateY(-4px);border-color:rgba(255,255,255,.32);color:var(--text)}
.mkt-pick:focus-visible{outline:none}
.mkt-pick:focus-visible .pk{border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.mkt-pick.mkt-on{color:var(--text)}
.mkt-pick.mkt-on .pk{border-color:transparent;color:#14060d;background:var(--split);
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 16px 36px rgba(0,0,0,.32),0 5px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5)}
/* coming-soon tiles — visible but quiet */
.mkt-pick.mkt-soon{cursor:default;opacity:.42}
.mkt-pick.mkt-soon:hover .pk{transform:none;border-color:var(--line-2);color:var(--muted)}
.pk-soon{position:absolute;top:-7px;right:-10px;padding:.11rem .34rem;border-radius:999px;
  font-size:.44rem;font-weight:800;letter-spacing:.08em;font-style:normal;color:#14060d;
  background:var(--split)}
.mkt-lead-copy .mkt-free-note{margin-top:1.2rem}

/* stage — panels stacked, one visible at a time */
.mkt-lead-stage{flex:1;position:relative;align-self:stretch;overflow:hidden}
.lp-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease}
.lp-panel.mkt-on{opacity:1;visibility:visible}

/* vertical filmstrip (video/image) — reuses .mkt-cell/.mkt-cN, drifting slowly */
.lp-film{display:flex;gap:1rem;justify-content:center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
/* Spacing lives on each cell's bottom margin (not container gap) so the doubled
   content is an exact 2x and translateY(-50%) wraps seamlessly — the tiles
   (video included) cycle around endlessly with no jump at the loop point. */
.lp-col{display:flex;flex-direction:column;flex:0 0 auto;will-change:transform}
.lp-col.lp-up{animation:mkt-vdrift 12.8s linear infinite}
.lp-col.lp-down{animation:mkt-vdrift 14.8s linear infinite reverse}
/* --vdrift is set in JS to the EXACT pixel height of one copy (measured), so the
   wrap lands perfectly on the seam — a plain -50% is off by the uncounted last
   margin and jumps. Falls back to -50% before JS measures. */
@keyframes mkt-vdrift{to{transform:translateY(var(--vdrift,-50%))}}
/* pause-on-hover is driven from JS via the Web Animations API (initCrtStage) so
   it reliably stops on the compositor thread too — a CSS :hover play-state pause
   can leave a GPU-composited animation still painting on some laptops. */
.lp-col .mkt-cell{margin:0 0 .7rem;width:min(268px,25vw)}
.lp-badge{position:absolute;top:.4rem;left:.4rem;z-index:2;display:none;align-items:center;gap:.25rem;
  padding:.16rem .5rem;border-radius:999px;font-size:.6rem;font-weight:700;color:#14060d;
  background:linear-gradient(120deg,#ffce8a,var(--neon))}
.mkt-lead-stage.cat-video .lp-badge{display:inline-flex}

/* website — live demos, cascaded + bigger */
.lp-web{display:flex;align-items:center;justify-content:center;padding:1rem}
.mb-cascade-lead{--sc:.64}

/* voice placeholder */
.lp-voice{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.1rem;color:var(--muted)}
.lp-wave{display:flex;align-items:center;gap:5px;height:120px}
.lp-wave i{display:block;width:6px;border-radius:4px;background:var(--split);animation:mkt-vwav 1s ease-in-out infinite alternate}
@keyframes mkt-vwav{from{height:16%}to{height:80%}}
.lp-voice-note{font-size:.85rem;letter-spacing:.02em}

@media (max-width:900px){
  .mkt-lead{flex-direction:column;align-items:stretch;min-height:0;padding:5.5rem clamp(1.1rem,4vw,2rem) 2rem}
  .mkt-lead-copy{flex:auto;padding:0}
  .mkt-lead-stage{width:100%;min-height:440px;margin-top:1.6rem}
  .mb-cascade-lead{--sc:.42}
}

/* ==========================================================================
   Model marquee
   ========================================================================== */
.mkt-marquee-wrap{padding:2.6rem 0 .6rem;text-align:center}
.mkt-marquee-lbl{font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin:0 1rem 1rem}
.mkt-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mkt-marquee-track{display:flex;width:max-content;align-items:center;
  animation:mkt-scroll 46s linear infinite;padding:1rem 0}
.mkt-marquee-track span{font-family:'Space Grotesk',Inter,sans-serif;font-weight:600;
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,234,243,.5);
  white-space:nowrap;padding:0 1.1rem}
.mkt-marquee-track i{font-style:normal;background:var(--split);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-size:.8rem}
@keyframes mkt-scroll{to{transform:translateX(-50%)}}

/* ==========================================================================
   How it works (zigzag steps) + trust trio — between the hero and pricing.
   Steps: floating gradient tile with a mini UI mock on one side, numbered
   copy on the other, sides alternating. Trio: soft glow orbs, airy + centered.
   ========================================================================== */
.mkt-how,.mkt-trust{max-width:1160px;margin:0 auto;
  padding:clamp(3.6rem,9vh,6.5rem) clamp(1.1rem,4vw,2rem) 0}
.mkt-how-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  row-gap:clamp(2.4rem,5vh,3.6rem);column-gap:clamp(1rem,2.6vw,2rem);margin-top:2.2rem;align-items:start}
/* connector cord — sits behind the tiles so it tucks under them and shows in the gaps */
.mkt-cord{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.mkt-cord-path{fill:none;stroke:url(#mktCordGrad);stroke-width:2;stroke-linecap:round;
  opacity:.55;filter:drop-shadow(0 0 6px rgba(0,0,0,.35))}
@media (prefers-reduced-motion: no-preference){
  .mkt-cord-path{stroke-dasharray:7 9;animation:mkt-cord-flow 26s linear infinite}
}
@keyframes mkt-cord-flow{to{stroke-dashoffset:-320}}
/* each step is a vertical card: tile on top, number + phrase wheel below */
.mkt-step{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.2rem;text-align:left}
.mkt-step-copy{max-width:none}
/* tiles — soft gradient washes, media-like rounded slabs */
.mkt-step-tile{position:relative;border-radius:26px;min-height:248px;display:flex;
  align-items:center;justify-content:center;padding:2.2rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16)}
/* vivid, saturated sunset/aurora gradient washes — Liftoff-style */
.mkt-tile-a{background:radial-gradient(115% 125% at 8% 12%,rgba(0,0,0,.85),transparent 50%),
  radial-gradient(120% 135% at 96% 94%,rgba(255,150,74,.72),transparent 52%),
  radial-gradient(90% 110% at 60% 45%,rgba(255,90,160,.35),transparent 60%),linear-gradient(150deg,#2c1526,#150b16)}
.mkt-tile-b{background:radial-gradient(115% 125% at 94% 8%,rgba(151,120,255,.8),transparent 50%),
  radial-gradient(125% 135% at 6% 96%,rgba(0,0,0,.62),transparent 52%),
  radial-gradient(90% 110% at 45% 55%,rgba(120,110,255,.32),transparent 60%),linear-gradient(150deg,#1e1433,#110b1b)}
.mkt-tile-c{background:radial-gradient(115% 130% at 10% 92%,rgba(255,172,66,.85),transparent 50%),
  radial-gradient(120% 130% at 92% 8%,rgba(255,108,150,.66),transparent 52%),
  radial-gradient(90% 110% at 55% 45%,rgba(255,140,80,.34),transparent 60%),linear-gradient(150deg,#2c1b10,#150d0a)}
/* rotating frames — 3 stacked visuals per tile; smooth blur-cross-fade */
.mkt-frames{position:relative;width:min(100%,346px);min-height:150px;display:grid}
.mkt-frames>.mkt-frame{grid-area:1/1;opacity:0;transform:translateY(10px) scale(.975);filter:blur(7px);
  pointer-events:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.25,1),filter .9s ease}
.mkt-frames>.mkt-frame.on{opacity:1;transform:none;filter:none}
/* side phrase wheel — 3 phrases stacked vertically, active one centered & sharp,
   the two neighbours above/below blurred; the next slides up into the middle.
   Positions/opacity/blur are driven per-item by JS (initMktRotate). */
.mkt-wheel{position:relative;height:7.2rem;width:22rem;max-width:100%;margin:.2rem 0 .8rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.mkt-step-flip .mkt-wheel{margin-left:auto}
.mkt-wheel-item{position:absolute;left:0;right:0;top:50%;height:2.4rem;margin-top:-1.2rem;
  display:flex;align-items:center;
  font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.3vw,1.55rem);line-height:1.1;white-space:nowrap;color:var(--text);
  transition:transform .8s cubic-bezier(.2,.8,.25,1),opacity .8s ease,filter .8s ease}
.mkt-step-flip .mkt-wheel-item{justify-content:flex-end}
@media (prefers-reduced-motion: reduce){
  .mkt-frames>.mkt-frame{transition:opacity .25s ease;transform:none;filter:none}
  .mkt-wheel-item{transition:opacity .25s ease}
}
/* mini mocks — frosted glass panels that float off the vivid gradient */
.mkt-mock{width:min(100%,346px);display:flex;flex-direction:column;gap:.7rem}
.mkt-mock-input,.mkt-mock-line,.mkt-mock-media,.mkt-mock-saved,.mkt-mock-attach,.mkt-mock-wave{
  border:1px solid rgba(255,255,255,.16);background:rgba(14,10,20,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 22px 48px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.mkt-mock-input{position:relative;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.95);
  padding:.95rem 3rem .95rem 1.05rem;border-radius:15px}
.mkt-mock-send{position:absolute;right:.6rem;bottom:.6rem;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--split);color:#14060d;
  font-weight:800;font-size:.85rem;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.mkt-mock-line{font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.95);
  padding:.9rem 1.05rem;border-radius:15px}
.mkt-mock-tags{display:flex;gap:.45rem;flex-wrap:wrap}
.mkt-mock-tags b,.mkt-mock-tags span{font-size:.7rem;font-weight:600;padding:.34rem .68rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(14,10,20,.5);color:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mkt-mock-tags b{color:#14060d;background:var(--split);border-color:transparent;font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.mkt-mock-media{aspect-ratio:16/9;border-radius:15px;
  display:flex;align-items:center;justify-content:center}
.mkt-mock-play{width:0;height:0;border-left:17px solid rgba(255,255,255,.95);
  border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.mkt-mock-saved{align-self:center;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.92);
  padding:.42rem .9rem;border-radius:999px}
/* extra mock variants used by the rotating frames */
.mkt-mock-attach{align-self:flex-start;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.85);
  padding:.36rem .7rem;border-radius:10px}
.mkt-mock-link{color:rgba(255,255,255,.72)}
.mkt-mock-search{color:rgba(255,255,255,.7);font-weight:600}
.mkt-mock-img{background:
  radial-gradient(65% 75% at 30% 30%,rgba(0,0,0,.55),transparent 65%),
  radial-gradient(65% 80% at 78% 72%,rgba(120,110,255,.5),transparent 65%),#0c0912}
.mkt-mock-wave{aspect-ratio:16/9;border-radius:15px;padding:1rem 1.1rem;
  display:flex;align-items:center;gap:4px}
.mkt-mock-wave i{flex:1;max-width:6px;border-radius:3px;background:linear-gradient(180deg,#1e1e22,#000000);
  transform-origin:center;animation:mkt-wave 1.4s ease-in-out infinite}
.mkt-mock-wave i:nth-child(2n){animation-delay:.15s}
.mkt-mock-wave i:nth-child(3n){animation-delay:.3s}
.mkt-mock-wave i:nth-child(4n){animation-delay:.45s}
.mkt-mock-wave i:nth-child(5n){animation-delay:.6s}
.mkt-mock-wave i:nth-child(odd){height:42%}
.mkt-mock-wave i:nth-child(even){height:74%}
.mkt-mock-wave i:nth-child(3n){height:92%}
.mkt-mock-wave i:nth-child(5n){height:30%}
@keyframes mkt-wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){ .mkt-mock-wave i{animation:none} }
/* copy side */
.mkt-step-copy{max-width:24rem}
.mkt-step-n{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--split);color:#14060d;font-weight:800;font-size:.85rem;margin-bottom:.9rem}
.mkt-step-h{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 .55rem}
.mkt-step-p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}
/* trust trio — soft glow orbs, centered, lots of air */
.mkt-safe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);
  margin-top:1.6rem;text-align:center}
.mkt-safe-item{display:flex;flex-direction:column;align-items:center;gap:.55rem;border:none}
.mkt-orb{width:72px;height:72px;border-radius:50%;margin-bottom:.4rem;filter:blur(7px);opacity:.95}
.mkt-orb-a{background:radial-gradient(circle at 42% 38%,rgba(255,217,238,.95),rgba(0,0,0,.65) 42%,rgba(0,0,0,0) 68%);
  box-shadow:0 0 56px rgba(0,0,0,.45)}
.mkt-orb-b{background:radial-gradient(circle at 42% 38%,rgba(228,220,255,.95),rgba(151,120,255,.62) 42%,rgba(151,120,255,0) 68%);
  box-shadow:0 0 56px rgba(151,120,255,.45)}
.mkt-orb-c{background:radial-gradient(circle at 42% 38%,rgba(255,233,201,.95),rgba(0,0,0,.62) 42%,rgba(0,0,0,0) 68%);
  box-shadow:0 0 56px rgba(0,0,0,.45)}
.mkt-safe-h{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.02rem;margin:0}
.mkt-safe-p{color:var(--muted);font-size:.88rem;line-height:1.55;max-width:16rem;margin:0}
/* reveal: drift up on scroll (JS adds .mkt-in; stagger via inline delay) */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.32,1)}
[data-reveal].mkt-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}
@media (max-width: 860px){
  /* stack the 3-across row back into a single column on narrow screens */
  .mkt-how-steps{grid-template-columns:1fr;gap:clamp(3rem,8vh,5rem)}
  .mkt-safe{grid-template-columns:1fr;gap:2.4rem}
}

/* ==========================================================================
   The app — home replica in the spotlight
   ========================================================================== */
.mkt-studio{max-width:1360px;margin:0 auto;overflow:hidden;
  padding:clamp(3.2rem,8vh,6rem) clamp(1.1rem,4vw,3rem) 0}
.mkt-stage{position:relative;max-width:1240px;margin:0 auto;perspective:1500px;text-align:left}
.mkt-stage::before{/* floor glow */
  content:"";position:absolute;left:8%;right:8%;bottom:-6%;height:40%;z-index:-1;
  background:radial-gradient(50% 60% at 50% 100%,rgba(0,0,0,.2),rgba(0,0,0,.1) 45%,transparent 75%);
  filter:blur(30px)}
.mkt-screen{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,#121017,#0b0a10);
  box-shadow:0 -1px 0 rgba(255,255,255,.12) inset,0 40px 90px rgba(0,0,0,.65),
    0 18px 60px rgba(0,0,0,.12),0 6px 30px rgba(0,0,0,.08);
  transform:rotateX(7deg) scale(.99);transform-origin:50% 20%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s ease}
.mkt-screen:hover,.mkt-screen:focus-visible{transform:rotateX(1deg) scale(1);
  box-shadow:0 -1px 0 rgba(255,255,255,.12) inset,0 50px 110px rgba(0,0,0,.7),
    0 22px 80px rgba(0,0,0,.18),0 8px 36px rgba(0,0,0,.12)}
.mkt-screen::after{/* glass glare */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 24%,transparent 42%)}
.mkt-screen:focus-visible{outline:2px solid var(--neon);outline-offset:4px}

.mkt-chrome{display:flex;align-items:center;gap:.45rem;padding:.65rem .95rem;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.028)}
.mkt-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.mkt-dot.mkt-r{background:#ff5f57}.mkt-dot.mkt-y{background:#febc2e}.mkt-dot.mkt-g{background:#28c840}
.mkt-url{margin:0 auto;padding:.22rem 1.4rem;border-radius:7px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-size:.74rem;color:var(--muted);letter-spacing:.04em}
.mkt-chrome i{width:41px}

.mkt-appwrap{display:flex;min-height:500px}

/* sidebar of the replica */
.mkt-side{flex:0 0 190px;padding:1rem .9rem;border-right:1px solid var(--line);
  background:rgba(255,255,255,.018);display:flex;flex-direction:column;gap:.15rem;font-size:.82rem}
.mkt-side-logo{display:flex;align-items:center;gap:.5rem;font-family:'Space Grotesk',Inter,sans-serif;
  font-weight:700;font-size:1rem;margin-bottom:1.1rem}
.mkt-side-logo .logo-mark{width:22px;height:22px;border-radius:6px}
.mkt-side-lbl{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:.5rem 0 .4rem;opacity:.8}
.mkt-side-item{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:8px;
  color:var(--muted);font-weight:500;white-space:nowrap}
.mkt-side-item i{width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;opacity:.75;flex:0 0 auto}
.mkt-side-item.mkt-on{color:var(--text);background:var(--panel-2);
  box-shadow:0 0 0 1px var(--line) inset}
.mkt-side-item.mkt-on i{border-color:var(--neon);background:linear-gradient(120deg,rgba(0,0,0,.4),rgba(0,0,0,.4))}
.mkt-side-new{margin-top:.2rem;padding:.42rem .55rem;border:1px dashed var(--line-2);border-radius:8px;
  color:var(--muted);font-size:.78rem}
.mkt-side-chat{padding:.36rem .55rem;color:var(--muted);opacity:.7;font-size:.76rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* home pane of the replica */
.mkt-home{flex:1;min-width:0;display:flex;flex-direction:column;padding:1.6rem 1.7rem 1.4rem}
.mkt-greet{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.6vw,1.9rem)}
.mkt-greet em{font-style:normal;background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-greet-sub{color:var(--muted);font-size:.88rem;margin:.15rem 0 1.1rem}
.mkt-tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1rem;font-size:.8rem;font-weight:600}
.mkt-tabs span,.mkt-tabs b{padding:.34rem .8rem;border-radius:999px;color:var(--muted);font-weight:600}
.mkt-tabs b{background:var(--split);color:#14060d}
.mkt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:auto}
.mkt-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);
  transition:transform .3s,border-color .3s}
.mkt-screen:hover .mkt-card:nth-child(1){transform:translateY(-3px);border-color:var(--line-2)}
.mkt-thumb{position:relative;height:96px;overflow:hidden}
.mkt-thumb .mkt-play{position:absolute;right:.5rem;bottom:.5rem;width:22px;height:22px;border-radius:50%;
  background:rgba(8,7,12,.55);border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center}
.mkt-thumb .mkt-play::before{content:"";margin-left:2px;border-left:7px solid #fff;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
/* t0 — dark studio, amber product bottle */
.mkt-thumb.mkt-t0{background:radial-gradient(90% 120% at 50% 115%,rgba(0,0,0,.4),rgba(0,0,0,.14) 45%,#17131e 78%)}
.mkt-thumb.mkt-t0::before{content:"";position:absolute;left:50%;bottom:14%;width:22px;height:52px;
  transform:translateX(-50%);border-radius:6px 6px 4px 4px;
  background:linear-gradient(105deg,#3a2a1c,#c98a3d 45%,#ffd9a0 52%,#c98a3d 60%,#3a2a1c);
  box-shadow:0 10px 18px rgba(0,0,0,.55)}
.mkt-thumb.mkt-t0::after{content:"";position:absolute;left:50%;bottom:66%;width:9px;height:9px;
  transform:translateX(-50%);border-radius:2px 2px 0 0;background:#20180f}
/* t1 — vertical UGC phone */
.mkt-thumb.mkt-t1{background:radial-gradient(120% 130% at 20% 0%,rgba(0,0,0,.4),rgba(139,92,246,.28) 45%,#171126 80%)}
.mkt-thumb.mkt-t1::before{content:"";position:absolute;left:50%;top:50%;width:38px;height:72px;
  transform:translate(-50%,-50%);border-radius:8px;border:1.5px solid rgba(255,255,255,.4);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02))}
.mkt-thumb.mkt-t1::after{content:"";position:absolute;left:50%;top:42%;width:16px;height:16px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd9a0,#e88ab0)}
/* t2 — paste a URL */
.mkt-thumb.mkt-t2{background:radial-gradient(110% 130% at 80% 0%,rgba(0,0,0,.32),rgba(0,0,0,.16) 50%,#1a1420 82%);
  display:flex;align-items:center;justify-content:center}
.mkt-thumb.mkt-t2 .mkt-urlpill{font-size:.62rem;color:var(--text);opacity:.9;letter-spacing:.02em;
  padding:.3rem .55rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(8,7,12,.5);max-width:86%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-card-t{font-weight:600;font-size:.84rem;padding:.55rem .7rem .05rem}
.mkt-card-s{color:var(--muted);font-size:.72rem;padding:0 .7rem .6rem}

.mkt-chatbox{display:flex;align-items:center;gap:.6rem;margin-top:1rem;
  padding:.65rem .65rem .65rem .8rem;border-radius:14px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.045);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.mkt-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border-radius:999px;font-size:.76rem;font-weight:700;color:#14060d;
  background:linear-gradient(120deg,#ffce8a,var(--neon))}
.mkt-chip i{font-style:normal;font-weight:600;opacity:.75}
.mkt-ph{flex:1;min-width:0;color:var(--muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-caret{flex:0 0 2px;height:1.1rem;background:var(--neon);margin-left:-.5rem;
  animation:mkt-blink 1.1s steps(1) infinite}
@keyframes mkt-blink{50%{opacity:0}}
.mkt-send{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--split);color:#14060d;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.mkt-stage-hint{text-align:center;color:var(--muted);font-size:.82rem;margin:.9rem 0 0;letter-spacing:.02em}
.mkt-stage-hint b{color:var(--text);font-weight:600}

.mkt-eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);opacity:.8;margin-bottom:1.1rem}

/* "Type your idea" chatbox under the filmstrip — a faithful mock of the real
   Go Farther composer (reuses .composer/.composer-row/.mode-switch/.send). Clicking
   a filmstrip clip pastes its prompt in; the box itself starts sign-up. */
.mkt-composer{margin:clamp(3.2rem,7vh,5.5rem) auto 0;max-width:780px;padding:0 1.1rem}
/* laurel crest above the composer */
.mkt-crest{display:flex;align-items:center;justify-content:center;gap:.55rem;margin:0 0 1rem}
.mkt-laurel{width:58px;height:84px;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.mkt-laurel-r{transform:scaleX(-1)}
.mkt-crest-txt{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-composer .composer{cursor:pointer}
.mkt-composer .composer:hover{border-color:rgba(0,0,0,.5);
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 26px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.1)}
/* premium send button — refined circular gradient with depth, not the flat app pill */
.mkt-composer .send{width:48px;height:48px;min-width:0;padding:0;border:0;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1a0a12;
  background:linear-gradient(135deg,#ffd695 0%,#ff9ec4 52%,#1e1e22 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.mkt-composer .send:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.04);
  box-shadow:0 14px 30px rgba(0,0,0,.44),0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.mkt-composer .send:active{transform:translateY(0) scale(.98)}
.mkt-composer .send svg{width:19px;height:19px}
.mkt-fauxinput{flex:1;min-width:0;display:flex;align-items:center;color:var(--text);
  font-size:.98rem;line-height:1.5;padding:.45rem 0 1.2rem;white-space:nowrap;overflow:hidden}
.mkt-fauxinput #mktTypeText:empty::before{content:"Message Go Farther — say anything…";color:#5c5c66}
.mkt-typebox-caret{display:inline-block;width:2px;height:1.15em;margin-left:1px;flex:0 0 auto;
  background:var(--neon);animation:mkt-blink 1.1s steps(1) infinite}
/* mock controls are non-interactive (whole box → sign-up) but read as the real UI */
.mkt-composer .mode-btn,.mkt-optghost{cursor:pointer}
.mkt-optghost{display:inline-flex;align-items:center}
/* pulse the box when a preset clip is pasted in */
.mkt-typebox-flash{animation:mkt-tb-flash .6s ease}
@keyframes mkt-tb-flash{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,.5),0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
  100%{box-shadow:0 0 0 16px rgba(0,0,0,0),0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}}
/* filmstrip clips read as clickable presets */
.mkt-cell-pick{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.mkt-cell-pick:hover{transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.45),0 0 22px rgba(0,0,0,.22)}
/* website-builder hook — the one-line prompt that built the front demo, on the
   left of the split. Styled like something you typed; swapped by
   initDemoCarousel as the front card changes. */
.mkt-builtfrom{margin:1.6rem 0}
.mkt-builtfrom-lbl{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:.85;margin-bottom:.7rem}
.mkt-builtfrom-line{position:relative;margin:0;color:var(--text);font-weight:600;
  font-size:clamp(1.1rem,1.7vw,1.42rem);line-height:1.42;letter-spacing:-.01em;
  transition:opacity .28s ease,transform .28s ease,filter .28s ease}
.mkt-builtfrom-line::before,.mkt-builtfrom-line::after{font-weight:700;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-builtfrom-line::before{content:"\201C"}
.mkt-builtfrom-line::after{content:"\201D"}
.mkt-builtfrom-line.mkt-bf-swap{opacity:0;transform:translateY(8px);filter:blur(5px)}
/* the prompt shown inside a composer mock matching the top video-generator box,
   but sized for the split's left column and allowed to wrap. */
.mkt-composer-demo{margin:.9rem 0 1.5rem;max-width:none;padding:0}
.mkt-composer-demo .mkt-fauxinput{white-space:normal;overflow:visible;align-items:flex-start;
  padding:.35rem 0 1.15rem;font-size:1.02rem;line-height:1.5;font-weight:600;color:var(--text)}
.mkt-composer-demo .mkt-typebox-caret{align-self:center}

/* three captions under the replica (Morphic) */
.mkt-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  max-width:1080px;margin:2.6rem auto 0}
.mkt-trio-item{font-size:.88rem;color:var(--muted);line-height:1.55;
  padding-top:.9rem;border-top:1px solid var(--line)}
.mkt-trio-item b{display:block;color:var(--text);font-weight:600;margin-bottom:.2rem}

/* ===== Split: copy + one-line prompt on the left, a diagonal cascade of three
   SHRUNK live demos on the right. ===== */
.mkt-split{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
  max-width:1240px;margin:clamp(3rem,9vh,6.5rem) auto 0;padding:0 clamp(1.1rem,4vw,3rem)}
.mkt-split-copy{flex:0 0 40%;max-width:430px}
.mkt-split-copy .mkt-h2{margin:.4rem 0 0}
.mkt-split-copy .mkt-cta{margin-top:.4rem}
.mkt-split-demo{flex:1;min-width:0;display:flex;justify-content:center}

/* The cascade. Each card's iframe renders at a fixed DESKTOP width (--fw) then
   scales down by --sc, so the site keeps its full layout instead of collapsing
   to a phone view. Card visual width = --fw * --sc; body height follows 16:9. */
.mb-cascade{--fw:1200px;--sc:.5;position:relative;
  width:calc(var(--fw) * var(--sc) + 128px);height:calc(var(--fw) * var(--sc) * 9 / 16 + 150px);
  max-width:100%;margin:0 auto}
.mb-slot{position:absolute;width:calc(var(--fw) * var(--sc));border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2);background:#0d0b12;box-shadow:0 24px 60px rgba(0,0,0,.6);
  transition:transform .6s cubic-bezier(.34,1.32,.5,1),opacity .5s ease,filter .5s ease,box-shadow .5s ease;
  will-change:transform,opacity,filter}
/* shrink the chrome too, so the whole card reads as a small website */
.mb-slot .mkt-chrome{padding:.34rem .55rem;gap:.32rem}
.mb-slot .mkt-dot{width:8px;height:8px}
.mb-slot .mkt-url{font-size:.56rem;padding:.14rem .8rem;letter-spacing:.02em}
.mb-slot .mkt-chrome i{width:24px}
.mb-body{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0d0b12}
.mb-demo{position:absolute;top:0;left:0;border:0;
  width:var(--fw);height:calc(var(--fw) * 9 / 16);
  transform:scale(var(--sc));transform-origin:top left}
.mb-grab{position:absolute;inset:0;border:0;padding:0;margin:0;background:transparent}
/* cascade positions — scale adds depth (front comes toward you); the springy
   easing gives the switch a little settle. front (p1) interactive, p2/p3 back. */
.mb-slot.mb-p1{left:128px;top:150px;z-index:3;opacity:1;transform:scale(1) rotate(0deg);
  box-shadow:0 -1px 0 rgba(255,255,255,.1) inset,0 34px 80px rgba(0,0,0,.66),0 14px 44px rgba(0,0,0,.14)}
.mb-slot.mb-p2{left:64px;top:75px;z-index:2;opacity:.82;filter:saturate(.9) brightness(.78);transform:scale(.95) rotate(-2deg)}
.mb-slot.mb-p3{left:0;top:0;z-index:1;opacity:.48;filter:saturate(.72) brightness(.55);transform:scale(.9) rotate(-4deg)}
.mb-slot.mb-p4{left:0;top:0;z-index:0;opacity:.32;filter:saturate(.62) brightness(.42);transform:scale(.86) rotate(-6deg)}
.mb-slot.mb-p5{left:0;top:0;z-index:0;opacity:.22;filter:saturate(.55) brightness(.34);transform:scale(.82) rotate(-8deg)}
.mb-slot.mb-p1 .mb-grab{pointer-events:none}
.mb-slot.mb-p2 .mb-grab,.mb-slot.mb-p3 .mb-grab,.mb-slot.mb-p4 .mb-grab,.mb-slot.mb-p5 .mb-grab{pointer-events:auto;cursor:pointer}
.mb-slot.mb-p2:hover,.mb-slot.mb-p3:hover,.mb-slot.mb-p4:hover,.mb-slot.mb-p5:hover{opacity:.94;filter:none}
@media (max-width:900px){
  /* stack: copy on top, cascade below (a touch smaller) */
  .mkt-split{flex-direction:column;align-items:stretch}
  .mkt-split-copy{flex:auto;max-width:none}
  .mb-cascade{--sc:.42}
}
@media (max-width:460px){ .mb-cascade{--fw:1100px;--sc:.32} }
.mkt-hint-cta{border:none;padding:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-hint-cta:hover{filter:brightness(1.15)}

/* ==========================================================================
   Presets — horizontal rail (media slots /mkt/p*.jpg)
   ========================================================================== */
.mkt-presets{max-width:1180px;margin:0 auto;
  padding:clamp(3.2rem,8vh,6rem) clamp(1.1rem,4vw,3rem) 0}
.mkt-rail{display:flex;gap:.9rem;overflow-x:auto;padding:.2rem .2rem 1rem;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
  mask-image:linear-gradient(90deg,#000 92%,transparent)}
.mkt-rail::-webkit-scrollbar{display:none}
.mkt-pcard{flex:0 0 232px;scroll-snap-align:start;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
  transition:transform .3s,border-color .3s,box-shadow .3s}
.mkt-pcard:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 8px 26px rgba(0,0,0,.08)}
.mkt-pcard:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.mkt-pthumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.mkt-pthumb::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;
  font-size:.95rem;color:rgba(237,234,243,.16)}
.mkt-pthumb .mkt-cell-img{z-index:1}
.mkt-g1{background:radial-gradient(100% 120% at 50% 115%,rgba(0,0,0,.36),rgba(0,0,0,.14) 45%,#17131e 80%)}
.mkt-g2{background:radial-gradient(110% 130% at 80% 0%,rgba(0,0,0,.28),rgba(0,0,0,.14) 50%,#1a1420 82%)}
.mkt-g3{background:radial-gradient(120% 130% at 20% 0%,rgba(0,0,0,.36),rgba(139,92,246,.24) 45%,#171126 80%)}
.mkt-g4{background:radial-gradient(120% 130% at 50% 0%,rgba(120,200,255,.2),rgba(70,110,200,.12) 50%,#0f1424 82%)}
.mkt-g5{background:radial-gradient(120% 140% at 80% 100%,rgba(255,90,110,.22),rgba(150,50,90,.12) 50%,#190f16 82%)}
.mkt-g6{background:radial-gradient(120% 130% at 30% 100%,rgba(190,160,255,.24),rgba(110,80,200,.14) 50%,#131022 82%)}
.mkt-g7{background:radial-gradient(120% 130% at 70% 20%,rgba(255,210,160,.22),rgba(190,120,80,.12) 50%,#171108 82%)}
.mkt-g8{background:radial-gradient(120% 130% at 50% 50%,rgba(0,0,0,.22),rgba(0,0,0,.12) 55%,#150f18 82%)}
.mkt-pmeta{padding:.7rem .85rem .8rem}
.mkt-pkind{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.25rem}
.mkt-pname{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.mkt-pdesc{color:var(--muted);font-size:.76rem;margin-top:.1rem}

/* ==========================================================================
   Pricing
   ========================================================================== */
.mkt-pricing{max-width:1100px;margin:0 auto;
  padding:clamp(3.2rem,8vh,6rem) clamp(1.1rem,4vw,3rem) 0;text-align:center}
.mkt-pricing .mkt-sec-head{margin-bottom:0}
.mkt-free-badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  padding:.5rem 1.1rem;border-radius:999px;border:1px solid rgba(0,0,0,.35);
  background:rgba(0,0,0,.07);color:var(--neon);font-size:.85rem;font-weight:600}
.mkt-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem;align-items:stretch}
.mkt-plan{position:relative;display:flex;flex-direction:column;gap:.2rem;text-align:left;
  padding:1.7rem 1.6rem 1.5rem;border-radius:18px;border:1px solid var(--line);background:var(--panel);
  transition:transform .3s,border-color .3s,box-shadow .3s}
.mkt-plan:hover{transform:translateY(-4px);border-color:var(--line-2)}
.mkt-plan-hot{border:1px solid transparent;
  background:linear-gradient(180deg,#151019,#0e0b13) padding-box,var(--split) border-box;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 10px 44px rgba(0,0,0,.16)}
.mkt-plan-hot:hover{box-shadow:0 30px 70px rgba(0,0,0,.55),0 14px 54px rgba(0,0,0,.24)}
.mkt-plan-tag{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);
  padding:.28rem .9rem;border-radius:999px;background:var(--split);color:#14060d;
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mkt-plan-n{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.mkt-plan-p{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:2.5rem;letter-spacing:-.03em;margin:.2rem 0 .1rem}
.mkt-plan-p small{font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0}
.mkt-plan-d{color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.mkt-plan-list{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.88rem}
.mkt-plan-list li{display:flex;gap:.55rem;align-items:baseline;color:rgba(237,234,243,.85)}
.mkt-plan-list li::before{content:"✦";flex:0 0 auto;font-size:.7rem;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-plan-cta{margin-top:auto;width:100%}

/* ==========================================================================
   Final CTA + footer (giant ghost wordmark)
   ========================================================================== */
.mkt-final{position:relative;overflow:hidden;text-align:center;
  padding:clamp(4rem,10vh,7rem) clamp(1.1rem,4vw,3rem) clamp(3.5rem,8vh,5.5rem)}
.mkt-final::before{content:"";position:absolute;left:50%;top:-40%;width:120vw;height:150%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(46% 55% at 50% 42%,rgba(0,0,0,.13),rgba(0,0,0,.06) 45%,transparent 72%)}
.mkt-final-h{position:relative;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;
  font-size:clamp(2.2rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 1rem}
.mkt-final-s{position:relative;color:var(--muted);font-size:clamp(.95rem,1.5vw,1.12rem);margin:0 0 2.2rem}
.mkt-final .mkt-cta-row{position:relative;justify-content:center;margin-bottom:0}

/* Footer — ember inverse: stays near-black, structured by a thick gradient
   rule up top + an ember wash rising from the bottom edge. Statement in
   gradient-clipped Space Grotesk, warm off-white link columns, amber hover,
   giant ghost wordmark bleeding off the bottom. */
.mkt-foot{position:relative;overflow:hidden;padding:0}
.mkt-foot::before{/* thick gradient rule — the footer's top edge */
  content:"";display:block;height:3px;background:var(--split);
  box-shadow:0 0 26px rgba(0,0,0,.5),0 2px 44px rgba(0,0,0,.3)}
.mkt-foot::after{/* ember wash rising from the bottom edge */
  content:"";position:absolute;left:50%;bottom:-32%;width:132%;height:80%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(52% 68% at 50% 100%,rgba(0,0,0,.12),rgba(0,0,0,.05) 46%,transparent 76%)}

.mkt-foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(1.8rem,4.5vw,4.5rem);align-items:start;max-width:1180px;margin:0 auto;
  padding:clamp(2.8rem,7vh,4.4rem) clamp(1.1rem,4vw,3rem) clamp(2rem,5vh,3rem)}
.mkt-foot-h{margin:0 0 1.7rem;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;
  text-transform:uppercase;font-size:clamp(1.45rem,2.7vw,2.3rem);line-height:1.1;letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--purple) 8%,var(--neon) 82%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px rgba(0,0,0,.22))}

.mkt-foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 1.2rem;padding-top:.3rem}
.mkt-foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.mkt-foot-hd{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.3rem}
.mkt-foot-hd2{margin-top:1.1rem}
.mkt-foot-col a,.mkt-foot-col button{/* links + link-styled buttons, one voice */
  background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;text-align:left;
  font-size:.86rem;line-height:1.35;color:rgba(243,236,229,.78);transition:color .2s}
.mkt-foot-col a:hover,.mkt-foot-col button:hover{color:var(--neon)}
.mkt-foot-col a:focus-visible,.mkt-foot-col button:focus-visible{color:var(--neon);
  outline:1px solid rgba(0,0,0,.5);outline-offset:3px;border-radius:2px}

.mkt-foot-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:1180px;margin:0 auto;border-top:1px solid var(--line);
  padding:1.15rem clamp(1.1rem,4vw,3rem) .4rem}
.mkt-foot .mkt-brand{font-size:1.05rem}
.mkt-foot .mkt-brand .logo-mark{width:22px;height:22px}
.mkt-foot-links{display:flex;align-items:center;gap:1.4rem;font-size:.85rem;color:var(--muted)}
.mkt-foot-links a{color:var(--muted);transition:color .2s}
.mkt-foot-links a:hover{color:var(--neon)}

.mkt-ghostword{margin-top:.5rem;text-align:center;user-select:none;pointer-events:none;
  font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.05em;
  font-size:clamp(6rem,24vw,21rem);line-height:.72;transform:translateY(18%);
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.1) 46%,transparent 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .mkt-hero-grid{grid-template-columns:1fr;align-items:start;gap:1.6rem}
  .mkt-trio{grid-template-columns:1fr;gap:1rem}
  .mkt-foot-grid{grid-template-columns:1fr;gap:2.2rem}
  .mkt-foot-h{max-width:26ch}
  .mkt-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1.4rem;padding-top:0}
}
@media (max-width:880px){
  .mkt-side{display:none}
  .mkt-appwrap{min-height:0}
  .mkt-price-grid{grid-template-columns:1fr;max-width:26rem;margin-left:auto;margin-right:auto}
  .mkt-plan-hot{order:-1}
}
@media (max-width:640px){
  .mkt-links a{display:none}
  .mkt-screen{transform:none}
  .mkt-screen:hover{transform:none}
  .mkt-cards{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .mkt-card:nth-child(3){display:none}
  .mkt-home{padding:1.2rem 1rem 1rem}
  .mkt-thumb{height:82px}
  .mkt-chatbox{gap:.45rem;padding:.55rem .55rem .55rem .65rem}
  .mkt-ph{font-size:.78rem}
  .mkt-marquee-track span{font-size:.9rem;padding:0 .8rem}
  .mkt-cell{width:46vw}
  .mkt-pcard{flex-basis:200px}
  .mkt-foot-cols{gap:1.6rem 1rem}
  .mkt-foot-col a,.mkt-foot-col button{font-size:.9rem;padding:.12rem 0}
  .mkt-foot-row{justify-content:center;text-align:center}
}
@media (max-width:420px){
  .mkt-hero{padding-top:2.6rem}
  .mkt-big{width:100%}
  .mkt-cta-row{flex-direction:column;align-items:stretch}
}

@media (prefers-reduced-motion:reduce){
  .mkt *,.mkt *::before,.mkt *::after{animation:none !important;transition:none !important}
  .mkt-screen{transform:none}
  .mkt-marquee-track{width:auto;flex-wrap:wrap;justify-content:center}
}

/* Auth popup: close (✕) button */
.auth-home{position:absolute;top:.8rem;right:.8rem;width:32px;height:32px;display:grid;place-items:center;
  background:none;border:none;border-radius:50%;color:var(--muted);font:inherit;font-size:1rem;line-height:1;cursor:pointer;
  transition:color .15s,background .15s}
.auth-home:hover{color:var(--text);background:rgba(255,255,255,.07)}

/* ==========================================================================
   Post-sign-in CRT channel selector (#crtSelect) — a retro television set,
   brand-tinted (pink→amber phosphor). Shown by enterCrt(); ↑↓/click tune,
   Enter/click selects. Live channels enter the workspace; others flash NO
   SIGNAL. Monospace HUD, wood frame, brass control panel.
   ========================================================================== */
.crt{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4rem;padding:clamp(1rem,4vw,2.5rem);
  background:
    radial-gradient(58% 52% at 50% 42%,rgba(255,121,160,.11),transparent 62%),
    radial-gradient(90% 70% at 50% 118%,rgba(255,150,80,.08),transparent 60%),
    radial-gradient(70% 60% at 50% -10%,rgba(151,120,255,.06),transparent 55%),
    #07060a;
  font-family:ui-monospace,"SFMono-Regular",Menlo,"Roboto Mono",monospace}
/* the set: wood cabinet holding just the screen */
.crt-set{display:flex;gap:clamp(.8rem,2vw,1.4rem);width:min(840px,100%);
  padding:clamp(.9rem,2vw,1.5rem);border-radius:26px;
  background:
    repeating-linear-gradient(91deg,rgba(0,0,0,.22) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(89deg,rgba(255,220,170,.05) 0 1px,transparent 1px 11px),
    linear-gradient(158deg,#7a5433,#513521 52%,#38240f);
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,200,140,.18) inset,
    0 2px 0 rgba(255,225,185,.2) inset,0 -20px 60px rgba(90,55,25,.25) inset}
/* screen */
.crt-screen{position:relative;flex:1;min-height:clamp(300px,52vh,460px);
  border-radius:16px;padding:clamp(1.2rem,3vw,2rem);overflow:hidden;
  background:radial-gradient(52% 55% at 24% 28%,rgba(0,0,0,.11),transparent 62%),
    radial-gradient(50% 55% at 82% 74%,rgba(0,0,0,.08),transparent 64%),
    radial-gradient(120% 130% at 50% 45%,#100b16,#08070c 80%);
  box-shadow:0 0 0 3px #14100e,0 0 0 5px #3a2620,inset 0 0 70px rgba(0,0,0,.88),
    inset 0 0 30px rgba(0,0,0,.05)}
.crt-glass{position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:radial-gradient(80% 55% at 50% 12%,rgba(255,220,190,.08),transparent 60%)}
.crt-scan{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
  animation:crt-flicker 5s steps(60) infinite}
@keyframes crt-flicker{0%,97%,100%{opacity:.5}98%{opacity:.36}99%{opacity:.56}}
.crt-hud{position:absolute;top:clamp(.9rem,2.4vw,1.5rem);left:clamp(1.2rem,3vw,2rem);
  right:clamp(1.2rem,3vw,2rem);display:flex;justify-content:space-between;
  font-size:.72rem;letter-spacing:.28em;color:rgba(0,0,0,.62)}
.crt-rec{display:flex;align-items:center;gap:.5rem}
.crt-rec i{width:8px;height:8px;border-radius:50%;background:#ff5a7a;
  box-shadow:0 0 10px #ff5a7a;animation:crt-blink 1.4s steps(1) infinite}
@keyframes crt-blink{50%{opacity:.15}}
/* the 5 channels hug the left edge of the screen (pull past the screen padding) */
.crt-menu{list-style:none;margin:0 0 0 calc(.25rem - clamp(1.2rem,3vw,2rem));
  padding:clamp(1.4rem,4vh,2.6rem) 0 0;outline:none;
  display:flex;flex-direction:column;gap:clamp(.35rem,1.4vh,.7rem)}
.crt-opt{position:relative;display:flex;align-items:center;gap:.55rem;cursor:pointer;
  font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:700;letter-spacing:.06em;line-height:1.05;
  color:rgba(255,176,120,.34);transition:color .25s,opacity .25s}
.crt-caret{flex:0 0 auto;width:.85em;opacity:0;color:#000000;transition:opacity .2s;
  filter:drop-shadow(0 0 8px rgba(255,150,90,.7))}
.crt-txt{transition:filter .25s}
.crt-opt.on{color:#ffce9a}
.crt-opt.on .crt-caret{opacity:1}
.crt-opt.on .crt-txt{background:var(--split);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 0 20px rgba(255,140,90,.6))}
.crt-opt:hover{color:rgba(255,200,150,.7)}
.crt-foot{position:absolute;bottom:clamp(1rem,2.6vw,1.7rem);left:clamp(1.2rem,3vw,2rem);
  right:clamp(1.2rem,3vw,2rem);font-size:.72rem;letter-spacing:.24em;color:rgba(0,0,0,.5)}
/* NO SIGNAL flash for coming-soon channels */
.crt-screen.crt-nosig{animation:crt-shake .3s 2}
.crt-screen.crt-nosig .crt-scan{opacity:.85;animation:crt-flicker .18s steps(30) infinite}
.crt-screen.crt-nosig .crt-menu{opacity:.35}
.crt-foot.crt-foot-nosig{color:#ff7a6a;letter-spacing:.2em}
@keyframes crt-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
/* control panel */
.crt-panel{flex:0 0 clamp(150px,20%,210px);display:flex;flex-direction:column;align-items:center;
  gap:clamp(.9rem,2.4vh,1.5rem);padding:clamp(1rem,2.4vw,1.6rem) clamp(.6rem,1.6vw,1rem);
  border-radius:14px;background:linear-gradient(160deg,#efe3cb,#d9c7a3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -18px 30px rgba(140,110,70,.28),
    0 10px 30px rgba(0,0,0,.4)}
.crt-plate{width:100%;text-align:center;padding:.5rem;border-radius:8px;line-height:1.15;
  background:linear-gradient(180deg,#3a2a12,#241a0c);border:1px solid rgba(255,200,120,.35);
  box-shadow:inset 0 0 14px rgba(255,170,80,.25)}
.crt-plate span{display:block;font-size:.62rem;letter-spacing:.42em;color:rgba(255,190,120,.75)}
.crt-plate b{display:block;font-size:.82rem;letter-spacing:.16em;color:#ffcf8f;
  filter:drop-shadow(0 0 6px rgba(255,160,80,.5))}
.crt-dial{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.crt-dial-row{display:flex;gap:clamp(.8rem,2vw,1.4rem);justify-content:center}
.crt-dial-lbl{font-size:.58rem;letter-spacing:.2em;color:#6b543099;text-align:center;line-height:1.4;color:#7a5c34}
.crt-dial-lbl i{display:block;font-style:normal;font-size:.5rem;opacity:.7}
.crt-knob{position:relative;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:
    radial-gradient(circle at 38% 30%,#fbe9c4,#c9a25e 46%,#6d4c26 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -6px 10px rgba(80,50,15,.6);transform:rotate(var(--rot,0deg));
  transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.crt-knob-lg{width:70px;height:70px}
.crt-knob-sm{width:44px;height:44px}
.crt-knob-mark{position:absolute;top:6px;left:50%;width:3px;height:34%;border-radius:2px;
  margin-left:-1.5px;background:linear-gradient(#3a2510,#7a5426)}
.crt-knob-sm .crt-knob-mark{height:30%}
.crt-knob-lg:hover{filter:brightness(1.06)}
.crt-knob-lg:focus-visible{outline:2px solid #ff9a4d;outline-offset:3px}
.crt-power{margin-top:.2rem;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#7a5c34;
  background:radial-gradient(circle at 40% 32%,#fdf0d4,#d9bd8b 60%,#b0925f);
  border:1px solid rgba(120,90,50,.4);box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.6)}
.crt-power:hover{color:#ff7a3a}
.crt-power svg{width:20px;height:20px}
.crt-brand{display:flex;align-items:center;gap:.6rem;font-size:.68rem;letter-spacing:.3em;
  color:rgba(0,0,0,.4)}
.crt-brand svg{width:16px;height:16px}
@media (max-width:720px){
  .crt-set{flex-direction:column}
  .crt-panel{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;flex-basis:auto}
  .crt-plate{width:auto;flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .crt-scan,.crt-rec i,.crt-knob{animation:none;transition:none}
}

/* ==========================================================================
   CRT landing (production) — the CRT is the whole landing: nav on top, the TV
   centered, a chatbox docked at the bottom. Reuses the .crt-* screen visuals.
   ========================================================================== */
.mkt.mkt-crt{display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(46% 60% at 18% 30%,rgba(0,0,0,.13),transparent 70%),
    radial-gradient(40% 55% at 82% 16%,rgba(0,0,0,.09),transparent 70%),var(--bg)}
.mkt-crt .crtl-stage{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;
  padding:clamp(.4rem,1.2vh,.9rem) clamp(.5rem,1.5vw,1rem)}
/* no TV frame — the wood cabinet + screen bezel are removed; content sits on
   the page background (scanlines/glass kept for the CRT feel) */
.mkt-crt .crtl-stage .crt-set{width:100%;max-width:1640px;margin:0 auto;
  background:none;padding:0;border-radius:0;box-shadow:none}
.mkt-crt .crt-screen{flex:1;min-height:clamp(360px,70vh,1040px);
  background:transparent;box-shadow:none;border-radius:0}
/* nav lives INSIDE the screen, on the top bar (below the tiny REC/CH hud) */
.crt-topbar {position:absolute;top:clamp(2.4rem,5vh,3.1rem);left:0;right:0;z-index: 6;
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.5rem,3.2vw,2.4rem)
  /* Above .crt-crest, which is also z-index 3 and comes LATER in the DOM —
     so at equal z-index the headline painted OVER the AI models dropdown,
     straight through the middle of it. The nav belongs above a decorative
     headline regardless. .crt-stage is 2, .crt-crest is 3. */
}
.crt-topbar .mkt-brand{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;gap:.5rem;color:var(--text)}
.crt-topbar .mkt-brand .logo-mark{width:26px;height:26px}
.crt-topbar .mkt-links{display:flex;align-items:center;gap:1.4rem}
/* channels start below the in-screen nav */
.mkt-crt .crt-menu{padding-top:clamp(5.5rem,12vh,7.5rem)}
/* chatbox lives inside the screen, docked bottom-centre */
.crt-inbox{position:absolute;left:0;right:0;bottom:clamp(1.4rem,4vh,2.8rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0 clamp(1.4rem,4vw,3rem)}
/* The two doors above the landing chatbox. The container is a plain row —
   the buttons themselves reuse .mkt-cta / .mkt-ghost, so they stay in step with
   the rest of the landing rather than being a third button style. */
/* The security log's rows. Deliberately plain — it is a list somebody scans
   when they are worried, so the only colour carries meaning: a failure and an
   action the owner took are the two things worth picking out of a wall of
   ordinary sign-ins. */
.sec-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.3fr) auto auto;gap:.6rem;align-items:baseline;
  padding:.5rem .1rem;border-bottom:1px solid var(--line);font-size:.86rem}
.sec-row:last-child{border-bottom:none}
.sec-who{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-what{color:var(--muted)}
.sec-when,.sec-where{color:var(--muted);opacity:.75;font-size:.8rem;white-space:nowrap}
.sec-bad .sec-what{color:#ff9b9b}
.sec-own .sec-what{color:var(--neon)}
.crt-doors{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.crt-doors .mkt-cta,.crt-doors .mkt-ghost{padding:.7rem 1.9rem;font-size:.92rem}
.crt-chatbox{width:min(560px,88%);display:flex;align-items:stretch;gap:.9rem;cursor:text;
  padding:1.1rem 1rem 1.1rem 1.4rem;border-radius:20px;border:1px solid var(--line-2);background:var(--panel);
  box-shadow:0 28px 70px rgba(0,0,0,.55);transition:border-color .25s}
.crt-chatbox:hover{border-color:rgba(0,0,0,.45)}
/* textarea: text starts top-left and the box grows DOWN (wraps, never scrolls sideways) */
.crt-chatbox-in{flex:1;min-width:0;color:var(--text);font-family:inherit;font-size:1.06rem;line-height:1.45;
  background:transparent;border:0;outline:0;padding:0;margin:0;resize:none;overflow-x:hidden;overflow-y:auto;
  min-height:4.4rem;max-height:9em;appearance:none}
.crt-chatbox-in::placeholder{color:var(--muted);opacity:1}
.crt-chatbox-send{flex:0 0 auto;align-self:center;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;background:var(--split);color:#14060d;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .15s}
.crt-chatbox-send:hover{transform:translateY(-1px) scale(1.04)}
.crt-chatbox-send:active{transform:scale(.96)}
/* coming-soon channel: the chatbox is inert (Enter does nothing) */
.crt-chatbox.crt-chatbox-soon{opacity:.5;filter:saturate(.5);cursor:not-allowed}
.crt-chatbox.crt-chatbox-soon .crt-chatbox-send{pointer-events:none}
.crtl-note{color:var(--muted);font-size:.85rem;text-align:center}
.crtl-note b{color:var(--neon)}
.crtl-note.crt-foot-nosig{color:#ff7a6a;letter-spacing:.14em;font-family:ui-monospace,Menlo,monospace;font-size:.78rem}
@media (max-width:640px){ .mkt-crt .crtl-stage{padding-top:4.5rem} }

/* ── Minimal landing (owner 2026-07-23): drop the channel list + media wall,
   leaving just the headline and chatbox centered in the screen. Markup is kept
   in the DOM (hidden) so the channels/demos can be brought back if wanted. ── */
.mkt-crt .crt-menu,
.mkt-crt .crt-stage{display:none}
/* Centred, then nudged down by half the row the doors added. The crest above is
   positioned independently, so a stack that grows from its middle grows INTO it
   — measured at 11px of overlap before this. */
.mkt-crt .crt-inbox{top:50%;bottom:auto;transform:translateY(calc(-50% + 1.6rem))}
.mkt-crt .crt-crest{top:calc(50% - 10.6rem)}

/* ── Gradient Halo chatbox (owner 2026-07-23): the ONE colored element on the
   black-and-white platform. Pinned to the old dark glass + pink→amber halo so it
   reads as a deliberate island (owner: "leave that chatbox like that"). The ring
   is a masked ::before (padding-box XOR border-box); the halo is the box-shadow. ── */
.mkt-crt .crt-chatbox{position:relative;flex-direction:column;align-items:stretch;gap:.55rem;
  width:min(620px,92%);padding:1.15rem 1.2rem 1rem;border:0;background:rgba(18,15,24,.94);
  box-shadow:0 28px 70px rgba(0,0,0,.28),0 0 24px rgba(255,121,198,.34),0 0 62px rgba(255,121,198,.16)}
.mkt-crt .crt-chatbox::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;
  background:var(--halo);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.mkt-crt .crt-chatbox-in{min-height:2.6rem;font-size:1.08rem;color:#f4f1f8}
.mkt-crt .crt-chatbox-in::placeholder{color:rgba(244,241,248,.5)}
.crt-chatbox-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.crt-chatbox-tools{display:flex;align-items:center;gap:.5rem}
.crt-chatbox-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line-2)}
.crt-chatbox-ico svg{width:17px;height:17px}
/* dark-island overrides so the chatbox stays legible on its dark glass */
.mkt-crt .crt-chatbox-ico{color:rgba(244,241,248,.62);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.mkt-crt .crt-chatbox-send{background:var(--halo)}
.mkt-crt .crt-scan{opacity:.05}

/* ---- CRT landing: crest (laurel + headline), preview stage, legal ---- */
.crt-crest{position:absolute;top:clamp(4.6rem,9vh,6.2rem);left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:.7rem;pointer-events:none}
.crt-laurel{width:clamp(34px,4vw,50px);height:auto;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.crt-laurel-r{transform:scaleX(-1)}
.crt-crest-h{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;text-align:center;color:var(--text);margin:0;white-space:nowrap}
.crt-crest-h .mkt-grad{background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
/* preview stage — right half of the screen, morphs per channel */
.crt-stage{position:absolute;z-index:2;right:clamp(.5rem,.6vw,.9rem);
  top:clamp(6.4rem,13.5vh,9rem);bottom:clamp(6.6rem,12vh,9rem);
  width:clamp(440px,62vw,960px);border-radius:16px;overflow:hidden}
/* website cascade: front demo pinned to the right edge, back demos fan out to
   the LEFT so each shows a wide clickable strip you can grab to switch */
.crt-stage .lp-web{padding:0;justify-content:flex-end;align-items:center}
.crt-stage .mb-cascade{width:100%;max-width:none;margin:0}
.crt-stage .mb-cascade-lead{--sc:.72}
.crt-stage .mb-slot.mb-p1{left:auto;right:16px;top:60px}
.crt-stage .mb-slot.mb-p2{left:auto;right:70px;top:45px}
.crt-stage .mb-slot.mb-p3{left:auto;right:124px;top:30px}
.crt-stage .mb-slot.mb-p4{left:auto;right:178px;top:15px}
.crt-stage .mb-slot.mb-p5{left:auto;right:232px;top:0}
@media (max-width:1500px){
  .crt-stage .mb-cascade-lead{--sc:.54}
  .crt-stage .mb-slot.mb-p1{right:10px;top:48px}
  .crt-stage .mb-slot.mb-p2{right:50px;top:36px}
  .crt-stage .mb-slot.mb-p3{right:90px;top:24px}
  .crt-stage .mb-slot.mb-p4{right:130px;top:12px}
  .crt-stage .mb-slot.mb-p5{right:170px;top:0}
}
.crt-stage .lp-film{background:transparent}
.crt-stage .lp-voice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.crt-stage .lp-voice-note{color:var(--muted);font-size:.8rem;letter-spacing:.06em}
/* NO SIGNAL panel (music / game) */
.lp-nosig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  background:radial-gradient(60% 60% at 50% 45%,rgba(255,121,140,.06),transparent 70%),#0a0806}
.lp-nosig-static{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px);
  animation:crt-flicker .2s steps(24) infinite}
.lp-nosig-txt{position:relative;z-index:1;font-family:ui-monospace,Menlo,monospace;font-weight:700;
  letter-spacing:.18em;color:#ff7a6a;text-align:center;font-size:1rem}
.lp-nosig-txt small{display:block;margin-top:.4rem;font-size:.62rem;letter-spacing:.24em;color:var(--muted)}
/* GAME channel preview — live games Go Farther built, playing in mini arcade frames */
.lp-game{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1rem;
  background:radial-gradient(70% 60% at 50% 40%,rgba(0,0,0,.07),transparent 70%),#0a0812}
.lp-arcade{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;max-width:440px}
.lp-arc-slot{grid-column:auto;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  background:#0a0812;box-shadow:0 12px 34px rgba(0,0,0,.45);transition:border-color .2s,transform .2s}
.lp-arc-slot:first-child{grid-column:1 / -1}
.lp-arc-slot:hover{border-color:rgba(0,0,0,.5);transform:translateY(-2px)}
.mkt-chrome-game .mkt-url{color:#000000}
/* neon-gradient fallback shows through if a showcase game ever 404s (never a black void) */
.lp-arc-body{position:relative;width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(0,0,0,.16),rgba(0,0,0,.12)),#0a0812}
.lp-arc-frame{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.lp-arc-tag{position:absolute;right:8px;bottom:8px;z-index:1;font-size:.56rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#0a0812;background:linear-gradient(90deg,var(--split-1,#1e1e22),var(--split-2,#000000));
  padding:3px 9px;border-radius:999px}
.lp-arc-cap{font-size:.74rem;line-height:1.4;color:var(--muted);text-align:center;max-width:440px}
.lp-arc-cap b{color:var(--text)}
/* legal footer, bottom-right on the frame */
.crt-legal{position:absolute;right:clamp(1.4rem,3vw,2.4rem);bottom:clamp(1rem,2.4vh,1.6rem);z-index:3;
  display:flex;align-items:center;gap:1.1rem;font-family:Inter,system-ui,sans-serif;
  font-size:.78rem;letter-spacing:.01em;color:var(--muted)}
.crt-legal a{color:inherit;text-decoration:none;transition:color .2s}
.crt-legal a:hover{color:var(--text)}
/* channels clear the crest */
.mkt-crt .crt-menu{padding-top:clamp(10rem,22vh,14rem)}
@media (max-width:820px){
  .crt-stage{display:none}
  .crt-crest-h{font-size:clamp(1.3rem,5vw,1.8rem)}
}


/* ── Scrollbars, everywhere (owner mock: peach hairline · minimal) ──
   Thin amber thumb on a transparent track; containers use overflow:auto, so a
   bar only exists when the content actually overflows. */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0, .45) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0, .4); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0, .75); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Images appear whole (no top-down progressive paint): hidden until decoded. */
.img-fade { opacity: 0; transition: opacity .22s ease; }
.img-fade.img-ready { opacity: 1; }

/* The chat box itself never shows a scrollbar (owner's call, 2026-07-16) —
   a two-line placeholder or long input scrolls fine, just without the bar. */
#input { scrollbar-width: none; }
#input::-webkit-scrollbar { display: none; }

/* While a big image is still downloading, its frame shows a live shimmer —
   a silent blank reads as broken (owner, 2026-07-16). Scoped to chat +
   gallery, whose error handlers remove/replace the img, so a dead link can't
   leave a shimmer running forever. */
.msg.image:has(> img.img-fade:not(.img-ready)) { min-height: 220px; min-width: 260px; position: relative; }
.g-item:has(> img.img-fade:not(.img-ready)) { position: relative; min-height: 120px; }
.msg.image:has(> img.img-fade:not(.img-ready))::after,
.g-item:has(> img.img-fade:not(.img-ready))::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.04) 40%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.04) 60%);
  background-size: 200% 100%;
  animation: media-shimmer 1.3s linear infinite;
}
@keyframes media-shimmer { to { background-position: -200% 0; } }

/* Multi-select in the image-source picker (gallery/avatar/product) — same as
   picking several files from the device. Selected thumbs get the accent ring;
   the footer bar confirms. */
.gal-grid img.sel {
  border-color: var(--neon);
  box-shadow: 0 0 0 2px rgba(0,0,0, .65), 0 10px 28px rgba(0, 0, 0, .45);
  transform: scale(.97);
}
.gal-foot {
  display: flex; align-items: center; gap: .9rem; justify-content: flex-end;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .09);
  position: sticky; bottom: 0; background: inherit;
}
.gal-count { color: var(--muted); font-size: .84rem; }
.gal-add {
  background: var(--split); color: var(--on-accent); border: none; border-radius: 11px;
  padding: .6rem 1.2rem; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.gal-add:hover { transform: translateY(-1px); }
.gal-add:disabled { opacity: .4; cursor: default; transform: none; }

/* Seedance extra reference slots (@Video2-3 / @Audio2-3): text chips instead
   of thumbnails — a clip/audio slot shows its glyph + rounded duration. */
.vx-extra { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.vx-extra .slot {
  width: auto; min-width: 86px; height: 44px; padding: 0 1.4rem 0 .55rem;
  display: flex; align-items: center; background: rgba(255, 255, 255, .04);
}
.vx-extra .slot-vid { font-size: .78rem; color: var(--ink-2, #cfcfd6); white-space: nowrap; }
.vx-extra .slot-tag { position: static; margin-left: .45rem; }

/* ── Tiered model rows (owner's reference design 2026-07-17): a gold max-res
   badge + a colored PREMIUM/CLASSIC/BASIC pill under the model name. ── */
.m-restier {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: #000000; border: 1px solid rgba(0,0,0, .55);
  background: rgba(0,0,0, .07);
}
.m-restier svg { display: block; }
.m-tier {
  display: inline-flex; align-items: center;
  padding: .18rem .7rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
}
.m-tier-premium { color: #b9a5ff; border: 1px solid rgba(167, 139, 250, .6); background: rgba(124, 91, 255, .12); }
.m-tier-classic { color: #6db2ff; border: 1px solid rgba(96, 165, 250, .6); background: rgba(59, 130, 246, .10); }
.m-tier-basic   { color: #3fd9c4; border: 1px solid rgba(45, 212, 191, .55); background: rgba(45, 212, 191, .09); }

/* Merged Image-to-video row: the optional End frame slot sits under the
   start slot; filled state shows the frame with an "End" tag. */
#btnImgEnd { margin-top: .4rem; }
#btnImgEnd .slot-lab { font-size: .8rem; opacity: .8; }
#btnImgEnd.has { min-height: 96px; padding: .3rem; }
#btnImgEnd.has img { max-width: 190px; border-radius: 8px; display: block; }

/* Seedance combined Reference row: 3-icon modality switcher (image / video /
   audio) — one group visible at a time; active tab gets the split accent. */
.sr-tabs { display: flex; gap: .35rem; margin-bottom: .55rem; }
.sr-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .42rem 0; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2, rgba(255,255,255,.08));
  color: var(--muted, #9a97a3);
}
.sr-tab svg { width: 15px; height: 15px; }
.sr-tab b { font-size: .64rem; font-weight: 700; letter-spacing: .02em; }
.sr-tab.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(#17141d, #17141d) padding-box,
    var(--split, linear-gradient(90deg, #1e1e22, #000000)) border-box;
}
#srVidGroup, #srAudGroup { display: flex; flex-direction: column; gap: .35rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Claude Focus — empty new-chat layout (owner pick 2026-07-21)
   In the empty Builder home state (#viewHome.home-empty, toggled in
   toggleHomeHero), the greeting + composer read as ONE centered stack instead
   of a bottom-docked bar shifted right past a floating attach rail. The moment
   a message exists the class drops and the normal chat layout returns, so this
   only restyles the empty state. Scoped to .home-empty; nothing else changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* Center the whole greeting→composer column in the viewport. */
.view-home.home-empty .home-screen { justify-content: center; }
.view-home.home-empty .chat { flex: 0 0 auto; }
.view-home.home-empty .thread {
  flex: 0 0 auto; overflow: visible; padding: 0 1.5rem;
}
/* Greeting flows in normal order directly above the composer (was absolute). */
.view-home.home-empty .home-hero {
  position: static; inset: auto; padding: 0 26px 1.6rem;
}
.view-home.home-empty .hh-title { font-size: 2.5rem; margin: 0; }
/* Keep the ambient orb centered behind the whole stack, not just the greeting box. */
.view-home.home-empty .hh-amb {
  position: fixed; inset: 0; z-index: 0;
}
.view-home.home-empty .composer-wrap { padding: 0 1.5rem; }

/* Undo the wide-screen right-shift + vertical mode-switch: the composer is
   centered and its controls sit on one horizontal row (Claude Focus). */
.view-home.home-empty .composer {
  max-width: 720px;
  padding: 1.35rem 1.35rem 1.1rem 1.5rem !important;
  transform: none !important; left: 0 !important;
}
.view-home.home-empty .thread-inner { transform: none !important; left: 0 !important; }
.view-home.home-empty .composer-row .mode-switch {
  position: static !important; flex-direction: row !important;
  transform: none !important; top: auto !important; left: auto !important;
}

/* Tuck the advanced effort pill + the contextual attach rail into the centered
   stack (max-width matched, centered) instead of floating them top-left/right. */
.view-home.home-empty .effort-pick {
  position: static !important; top: auto !important; left: auto !important;
  max-width: 720px; margin: 0 auto .5rem; width: 100%;
  display: flex; justify-content: flex-end; padding: 0 1.5rem;
}
.view-home.home-empty .attach-panel {
  position: static !important; max-width: 720px; margin: 0 auto .6rem;
  width: 100%; padding: 0 1.5rem; transform: none !important;
}

/* Keep the whole control row (mode · model · settings · send) on one line under
   the prompt: compact the send and tighten gaps so it doesn't orphan a row. */
.view-home.home-empty .composer-row { gap: .6rem; flex-wrap: nowrap; }
.view-home.home-empty .composer-row .send { min-width: 0; padding: 0 16px; height: 54px; }
.view-home.home-empty .composer-row .mode-switch,
.view-home.home-empty .composer-row .opt-wrap { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Game Studio — its own screen (owner 2026-07-22), like the Website Builder.
   Entered from the landing GAME channel → showView('games'). Chrome hidden while
   open (mirrors body.in-sites); NOT part of the media composer.
   ══════════════════════════════════════════════════════════════════════════ */
body.in-games .sidebar { display: none; }
body.in-games .top-tab, body.in-games .top-back { display: none !important; }

#viewGames.active { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.gs-top { display: flex; align-items: center; gap: 14px; padding: 16px 26px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.gs-brand { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.02rem; }
.gs-brand b { font-weight: 600; }
.gs-back { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 9px; padding: 7px 13px; font: inherit; font-size: .86rem; cursor: pointer; }
.gs-back:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.gs-open { font-size: .86rem; font-weight: 600; text-decoration: none; background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-new { background: var(--split); color: var(--on-accent); border: none; border-radius: 10px; padding: 8px 15px; font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; }

/* Compose (empty) state */
.gs-compose { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 6vh 24px 60px; text-align: center; }
.gs-h1 { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 600; font-size: 2.7rem; letter-spacing: -.02em; margin-bottom: 12px; }
.gs-grad { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-sub { color: var(--muted); font-size: 1.02rem; max-width: 520px; margin-bottom: 26px; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 18px; }
.gs-chip { background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); border-radius: 999px; padding: 8px 15px; font: inherit; font-size: .84rem; cursor: pointer; transition: border-color .12s, color .12s; }
.gs-chip:hover { color: var(--text); border-color: rgba(0,0,0,.5); }
.gs-box { width: 100%; max-width: 640px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.45); backdrop-filter: blur(24px); }
.gs-box textarea { width: 100%; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 1rem; resize: none; line-height: 1.5; padding: 6px 6px 12px; }
.gs-box textarea::placeholder { color: #5c5c66; }
.gs-box-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.gs-status { flex: 1; text-align: left; color: var(--muted); font-size: .84rem; min-height: 1.2em; }
.gs-build { background: var(--split); color: var(--on-accent); border: none; border-radius: 12px; padding: 12px 22px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.gs-build:disabled { opacity: .7; cursor: default; }

/* Recent games grid */
.gs-recent { width: 100%; max-width: 900px; margin-top: 46px; }
.gs-recent-lab { text-align: left; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gs-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; text-align: left; transition: border-color .12s, transform .12s; }
.gs-card:hover { border-color: rgba(0,0,0,.5); transform: translateY(-2px); }
.gs-card-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #0a0812; overflow: hidden; pointer-events: none; }
.gs-card-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.gs-card-t { display: block; padding: 10px 12px; font-size: .88rem; font-weight: 600; color: var(--text); text-transform: capitalize; }
.gs-card { position: relative; }
.gs-card-del { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(255,90,120,.32); background: rgba(10,8,16,.72); color: #ff9db0; cursor: pointer; opacity: 0; transform: translateY(-3px); transition: opacity .12s, transform .12s, background .12s, color .12s, border-color .12s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gs-card:hover .gs-card-del, .gs-card:focus-within .gs-card-del { opacity: 1; transform: none; }
.gs-card-del:hover { background: rgba(255,64,96,.92); color: #fff; border-color: transparent; }
.gs-card-del:focus-visible { opacity: 1; transform: none; outline: 2px solid #1e1e22; outline-offset: 2px; }

/* Preview (a game open) */
.gs-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 26px; }
.gs-frame-wrap { width: 100%; max-width: 1000px; }
.gs-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a0812; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 90px -30px #000; }
.gs-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.gs-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 14px; }
.gs-meta b { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.1rem; text-transform: capitalize; }
.gs-meta span { color: var(--muted); font-size: .84rem; }

/* Revise bar under an open game (Game Studio iterate loop) */
.gs-revise { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.gs-revise input { flex: 1; min-width: 240px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; color: var(--text); font: inherit; font-size: .92rem; padding: 11px 14px; outline: none; }
.gs-revise input:focus { border-color: rgba(0,0,0,.5); }
.gs-revise input::placeholder { color: #5c5c66; }
.gs-revise .gs-status { flex-basis: 100%; text-align: left; }

/* Live code stream during a build (Game Studio) */
.gs-code { width: 100%; max-width: 640px; margin: 14px auto 0; max-height: 230px; overflow-y: auto;
  background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem; line-height: 1.55;
  color: rgba(237,234,243,.72); white-space: pre-wrap; word-break: break-word; text-align: left; }
.gs-code::-webkit-scrollbar { width: 6px; }
.gs-code::-webkit-scrollbar-thumb { background: rgba(0,0,0,.4); border-radius: 999px; }

/* Preview/Code tabs + code view (Game Studio) */
.gs-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line-2); border-radius: 11px; background: rgba(0,0,0,.25); margin-right: 6px; }
.gs-tab { background: none; border: none; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.gs-tab.on { background: var(--split); color: var(--on-accent); }
.gs-codeview { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 26px 60px; max-width: 1000px; margin: 0 auto; width: 100%; }
.gs-code-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gs-code-head span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.gs-dl { background: var(--panel); border: 1px solid var(--line-2); color: var(--text); font: inherit; font-size: .84rem; font-weight: 600; padding: 8px 15px; border-radius: 10px; cursor: pointer; }
.gs-dl:hover { border-color: rgba(0,0,0,.5); }
.gs-code-load { color: var(--muted); font-size: .92rem; padding: 30px 0; text-align: center; }
.gs-file { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gs-file-h { padding: 9px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .78rem; color: var(--neon); background: rgba(0,0,0,.03); border-bottom: 1px solid var(--line); }
.gs-code-static { max-height: none; margin: 0; border: 0; border-radius: 0; background: rgba(0,0,0,.04); color: var(--text); }

/* AI-art toggle (Game Studio, Phase 6) */
.gs-toggles { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 18px; }
.gs-toggles .gs-arttoggle { margin: 0; }
.gs-beta { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #000000; border: 1px solid rgba(0,0,0,.5); border-radius: 5px; padding: 1px 4px; margin-left: 2px; }
.gs-arttoggle { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.gs-artbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; padding: 7px 14px 7px 8px; border-radius: 999px; cursor: pointer; }
.gs-artbtn.on { background: linear-gradient(120deg, rgba(0,0,0,.18), rgba(0,0,0,.18)); border-color: rgba(0,0,0,.5); color: var(--text); }
.gs-artknob { width: 30px; height: 18px; border-radius: 999px; background: rgba(0,0,0,.14); position: relative; transition: background .15s; flex-shrink: 0; }
.gs-artknob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .15s; }
.gs-artbtn.on .gs-artknob { background: var(--split); }
.gs-artbtn.on .gs-artknob::after { transform: translateX(12px); }
.gs-arthint { color: var(--muted); font-size: .82rem; }

/* ===== Black-and-white theme — accent-ink fixups (owner 2026-07-23) =========
   The 2026-07-18 "dark fill + gradient-border" button language reads as solid
   black on the light theme, so every such control needs white ink. Appended
   last so it wins the earlier per-component fills. The pink→amber gradient now
   lives ONLY on the landing chatbox (see --halo). ========================== */
.mkt-cta{color:var(--on-accent)}
.send{color:var(--on-accent)}
.send-spark{color:rgba(255,255,255,.72)}
.send-price{-webkit-text-fill-color:var(--on-accent);color:var(--on-accent)}
/* `.st-pageitem.on` was in this list and is deliberately NOT any more. Everything
   left here is a control with a near-black FILL — a toolbar toggle, a view tab,
   the user's own message bubble — where white text is the only readable choice.
   A page-menu row is not one of those: it sits on white inside a dropdown, and
   marking the current page by filling its row black reads as a button about to
   be pressed rather than the state you are already in. It is marked by weight
   and a tick, the way the model menu marks its selection. Leaving it in the list
   after changing its background is what made the label render white-on-white. */
.mode-btn.active,
.st-pillbtn.on,.st-dev.on,.st-vtab.on,.st-msg.u{color:var(--on-accent)}
/* clean light landing — drop the CRT scanline texture */
.mkt-crt .crt-scan{display:none}

/* Payments panel — the setup checklist and the one URL an owner must move by
   hand. Monochrome like the rest: state is carried by fill and by a word, never
   by hue alone, so it survives greyscale and anyone who cannot see colour. */
.em-step.em-done .em-n { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.pay-ok, .pay-warn { border: 1px solid var(--line-2); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .9rem; font-size: .85rem; }
/* A live shop reads as settled; a test key reads as unfinished. The filled rule
   on the left is the difference, not a colour. */
.pay-ok { border-left: 3px solid #0a0a0a; }
.pay-warn { border-left: 3px solid #0a0a0a; background: rgba(10, 10, 10, .04); }
.pay-hook { margin-top: 1rem; }
.pay-hook label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem; }
.pay-hook-row { display: flex; align-items: center; gap: .5rem; }
/* min-width:0 so the URL ellipsizes instead of pushing Copy off the card —
   the same flex failure as the Data rail, which this session hit twice. */
.pay-hook-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; font-size: .78rem; background: var(--panel-2); }
.pay-hook-row .st-publish { flex: none; }

/* ── Cloud → Export data, and Cloud → Files ──────────────────────────────────
   Both panels were dark until 2026-08-07: Export offered snapshot/restore/import
   against routes deleted in July, and Files pointed at /api/site/files, gone the
   same day. Only the two that have real routes were wired; the rest still say
   plainly that they are off. */
.bk-rows{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bk-row{display:flex;align-items:center;gap:1rem;padding:.7rem .9rem;background:var(--bg);min-width:0}
.bk-tx{display:flex;flex-direction:column;min-width:0}
.bk-tx b{font-size:.88rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-tx span{font-size:.75rem;color:var(--muted)}
.bk-btns{margin-left:auto;display:flex;gap:.4rem;flex:0 0 auto}
.bk-dl{border:1px solid var(--line-2);background:var(--bg);color:var(--text);border-radius:8px;
  padding:.3rem .6rem;font-size:.74rem;font-weight:600;cursor:pointer}
.bk-dl:hover{background:var(--panel)}
/* The two halves of Backups & export — the nightly whole-site copies above,
   the per-table export below. A heading each, so neither reads as the other. */
.bk-sec{margin-bottom:1.1rem}
/* An error message is a sentence, not a filename — it wraps rather than being
   cut to an ellipsis that hides the part naming the fault. */
.er-row .bk-tx b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.bk-h{display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 .45rem}

.fl-bar{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .75rem;font-size:.8rem;color:var(--text)}
.fl-bar span{margin-left:auto;color:var(--muted);font-size:.75rem}
/* auto-fill, not auto-fit: one picture stays one tile rather than stretching
   across the whole modal. */
.fl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.7rem}
.fl-item{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);min-width:0}
.fl-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--panel)}
.fl-item figcaption{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;min-width:0}
.fl-nm{font-size:.72rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fl-sz{font-size:.68rem;color:var(--muted);flex:0 0 auto}
.fl-del{margin-left:auto;flex:0 0 auto;border:0;background:none;color:var(--muted);
  font-size:1rem;line-height:1;cursor:pointer;padding:0 .1rem}
.fl-del:hover{color:var(--text)}
.fl-del:disabled{opacity:.4;cursor:default}
/* THE LINK-PREVIEW TOGGLE. A full-width row under the caption rather than a
   chip beside the filename: the tile is ~128px and the caption row is already
   name + size + delete, so a fourth inline item ellipsises the one thing the
   tile exists to say. The active state is a FILLED row as well as the check —
   colour alone does not survive greyscale, the kit's own status discipline. */
.fl-share{display:block;width:100%;border:0;border-top:1px solid var(--line);
  background:none;color:var(--muted);font-size:.66rem;line-height:1;
  padding:.42rem .5rem;cursor:pointer;text-align:center}
.fl-share:hover{color:var(--text);background:var(--panel)}
.fl-share:disabled{opacity:.4;cursor:default}
.fl-share-on{background:var(--text);color:var(--bg);font-weight:600}
.fl-share-on:hover{background:var(--text);color:var(--bg)}
/* A file whose thumbnail would not load. The tile keeps its size so the grid
   does not reflow, and says which one is missing instead of showing a torn-page
   icon that reads as a broken panel. */
.fl-item.fl-gone a{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;background:var(--panel);font-size:.7rem;color:var(--muted)}
.fl-item.fl-gone a::after{content:"not found"}
/* The add row, above the grid. */
.fl-add{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;flex-wrap:wrap}
.fl-hint{font-size:.7rem;color:var(--muted)}
/* A DOCUMENT'S FACE IS ITS FORMAT, not a thumbnail. A PDF has no picture to
   show, and an <img> pointed at one paints the browser's torn-page icon on
   every card — which reads as a broken panel rather than as a working file.
   Same tile, same aspect ratio, so the grid does not reflow around it.

   THE ANCHOR HAS TO BE A BLOCK, and this was measured rather than reasoned. An
   <a> is inline, so the badge inside it had no definite width to derive its
   height from: `aspect-ratio:1` lost, the badge came out 180px tall in a 153px
   square, and `overflow:hidden` on the tile CUT THE FILENAME AND SIZE OFF
   ENTIRELY — a document tile that said nothing but "PDF". Every test passed.
   Found by looking at a render, which is the only thing that could have. */
.fl-item a{display:block;text-decoration:none;color:inherit}
.fl-doc{display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;background:var(--panel);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}

/* An attachment with no picture — a PDF, a text file. The thumbnail tile would
   render `<img src="undefined">` and paint a broken-image icon, which reads as
   "your file failed" for one that is about to be used.

   WIDTH IS THE WHOLE POINT. `.st-att` is a fixed 56px square, which is right
   for a thumbnail and useless for a name: the first render came out as
   "spri…" and "pric…", so the one piece of information the chip carries was
   the one piece it cut off. Auto width with a ceiling, and the name is padded
   clear of the remove button so a long one does not run underneath it. */
.st-att-doc { width: auto; height: 56px; display: inline-flex; align-items: center; padding: 0 1.4rem 0 .6rem; background: var(--split); color: var(--on-accent); }
.st-att-doc .st-att-name { font-size: .72rem; font-weight: 600; line-height: 1.25; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Search-engine verification, inside the Domains panel — the other half of
   "my own address". Somebody who has just pointed a domain at their site is
   exactly the person about to ask why Google cannot find it. */
.sv-block{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1.1rem}
.sv-h{margin:0 0 .35rem;font-size:.85rem;font-weight:600;color:var(--text)}
.sv-row{display:grid;grid-template-columns:1fr;gap:.25rem;margin:0 0 .7rem}
.sv-lb{font-size:.75rem;font-weight:600;color:var(--text)}
/* THE HINT IS THE FEATURE, not decoration: a provider's page shows several
   strings and only one of them is the token, so naming the exact screen is
   what stops somebody pasting the wrong one and concluding this is broken. */
.sv-hint{font-size:.68rem;color:var(--muted)}
.sv-in{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem}
.sv-save{display:flex;align-items:center;gap:.7rem;margin-top:.2rem;flex-wrap:wrap}
.sv-msg{font-size:.72rem;color:var(--muted);flex:1 1 12rem;min-width:0}

/* ==========================================================================
   Pencil landing (owner 2026-08-29) — the landing is DRAWN, not rendered:
   paper ground, graphite type, every control sketched and shaded in by hand.

   The fonts do not change. Owner: "keep the same fonts just the colors of it,
   do it like if it was filled with pencil" — so Inter and Space Grotesk stay
   exactly as they are and only colour, fill and edge are new.

   Two mechanisms carry the whole look, and everything below is one of them:

     · SHADING is a cross-hatch of repeating-linear-gradients — one recipe at
       three densities. --gr-fill is a pencil pressed hard (a filled button),
       --gr-wash is a light pass (a chip), --gr-tint is barely a smudge (the
       chatbox paper).

     · An EDGE is a bordered ::before pushed through the #pencilRough
       displacement filter, so the LINE wobbles and the text inside does not.
       Filtering the element itself would smear the type, which is the one
       thing we were told to leave alone. Every sketched outline here is a
       pseudo-element for that reason — if you add another, do the same.

   Scoped to .mkt-crt throughout: the signed-in app shell is untouched.
   ========================================================================== */
/* The palette lives at :root now (2026-08-30) — the whole app is drawn on the
   same sheet, so a second copy here would be two lists of the same thing and
   would drift the first time either was touched. What stays is the landing's
   own SURFACE: #marketing is its own scrolling box and paints its own paper. */
.mkt.mkt-crt{
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(120% 88% at 50% -6%,rgba(255,255,255,.62),transparent 58%),
    radial-gradient(76% 62% at 50% 116%,rgba(84,80,98,.16),transparent 62%),
    radial-gradient(52% 44% at 8% 88%,rgba(84,80,98,.09),transparent 70%);
  background-blend-mode:multiply,normal,normal,normal;
  color:var(--graphite)}
/* a CRT's scanlines and glass are the one thing paper cannot be */
.mkt-crt .crt-scan,.mkt-crt .crt-glass{display:none}

/* ---- type: same faces, graphite ink ---- */
.mkt-crt .crt-crest-h{color:var(--graphite)}
/* the accent word was the pink→amber gradient; on paper it is the word you
   went back over and underlined. Underline is a ::after so it can be roughed
   up without touching the letterforms. */
.mkt-crt .crt-crest-h .mkt-grad{position:relative;display:inline-block;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--graphite);-webkit-text-fill-color:var(--graphite)}
.mkt-crt .crt-crest-h .mkt-grad::after{content:"";position:absolute;
  left:-.06em;right:-.06em;bottom:-.12em;height:.075em;border-radius:2px;
  background:var(--graphite);opacity:.85;filter:url(#pencilRough2)}
.mkt-crt .crt-topbar .mkt-brand{color:var(--graphite)}
.mkt-crt .mkt-signin{color:var(--graphite-2)}
.mkt-crt .mkt-signin:hover{color:var(--graphite)}
/* the mark is inline SVG now, so it takes the ink colour and can be sketched */
/* The mark is inline SVG so it takes the ink colour — and so it can be drawn
   the way the rest of the page is: twice, each pass roughed by its own filter
   and the second offset a hair, which is what a hand does when it goes back
   over a line. The viewBox is padded (-6) so a displaced stroke has room to
   wander outside the artwork instead of being clipped flat against it. */
.mkt-crt .crt-topbar .mkt-brand .logo-mark{color:var(--graphite);overflow:visible;
  width:34px;height:34px}
.mkt-crt .logo-mark .gf-pass{transform-origin:50% 50%;transform-box:fill-box}
.mkt-crt .logo-mark .gf-pass-a{filter:url(#pencilLead);opacity:.94}
.mkt-crt .logo-mark .gf-pass-b{filter:url(#pencilLead2);opacity:.36;
  transform:translate(14px,-10px) rotate(.8deg)}

/* ---- buttons: one filled with pencil, one drawn empty ---- */
.mkt-crt .mkt-cta{background:var(--gr-fill);background-color:#2a2833;
  color:var(--paper);border:0;box-shadow:none;position:relative;isolation:isolate}
.mkt-crt .mkt-cta::before{content:"";position:absolute;inset:-1px;z-index:-1;
  border-radius:inherit;border:1.7px solid var(--graphite);
  filter:url(#pencilRough);pointer-events:none}
.mkt-crt .mkt-cta:hover{filter:none;transform:translateY(-2px);
  box-shadow:0 7px 16px -10px rgba(51,49,61,.75)}
.mkt-crt .mkt-ghost{background:var(--gr-tint);background-color:transparent;
  color:var(--graphite);border:0;position:relative}
.mkt-crt .mkt-ghost::before{content:"";position:absolute;inset:0;
  border-radius:inherit;border:1.7px solid var(--graphite-2);
  filter:url(#pencilRough);pointer-events:none}
/* the second, slightly-off pass you make when one line did not look right */
.mkt-crt .mkt-ghost::after{content:"";position:absolute;inset:1px 0 -1px 1px;
  border-radius:inherit;border:1.3px solid var(--graphite-2);opacity:.42;
  filter:url(#pencilRough2);pointer-events:none}
.mkt-crt .mkt-ghost:hover{background:var(--gr-wash);transform:translateY(-2px)}

/* ---- the chatbox: a box ruled on the page, shaded lightly inside ---- */
.mkt-crt .crt-chatbox{background:var(--gr-tint);background-color:rgba(255,253,247,.72);
  box-shadow:0 18px 34px -26px rgba(51,49,61,.6);border-radius:14px}
/* was the pink halo ring — now the ruled edge, drawn twice like a real one */
.mkt-crt .crt-chatbox::before{inset:0;padding:0;border-radius:inherit;
  background:none;border:1.9px solid var(--graphite);
  -webkit-mask:none;mask:none;filter:url(#pencilRough)}
.mkt-crt .crt-chatbox::after{content:"";position:absolute;inset:2px -1px -2px 2px;
  border-radius:inherit;border:1.2px solid var(--graphite-2);opacity:.38;
  filter:url(#pencilRough2);pointer-events:none}
.mkt-crt .crt-chatbox:hover::before{border-color:#22202b}
.mkt-crt .crt-chatbox-in{color:var(--graphite)}
.mkt-crt .crt-chatbox-in::placeholder{color:var(--graphite-3)}
.mkt-crt .crt-chatbox-ico{color:var(--graphite-2);background:var(--gr-wash);
  background-color:transparent;border:0;position:relative;border-radius:9px}
.mkt-crt .crt-chatbox-ico::before{content:"";position:absolute;inset:0;
  border-radius:inherit;border:1.5px solid var(--graphite-2);
  filter:url(#pencilRough2);pointer-events:none}
.mkt-crt .crt-chatbox-send{background:var(--gr-fill);background-color:#2a2833;
  color:var(--paper);box-shadow:none;position:relative;isolation:isolate}
.mkt-crt .crt-chatbox-send::before{content:"";position:absolute;inset:-1px;z-index:-1;
  border-radius:50%;border:1.7px solid var(--graphite);
  filter:url(#pencilRough);pointer-events:none}
/* the filter defs are markup, not furniture — keep them out of layout */
.pencil-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ---- the hand (owner 2026-08-29): the page is written, so it is written in
   a hand. Caveat carries the display line, Patrick Hand does the working type
   — nav, buttons, the prompt, the footer. Scoped to .mkt-crt, so the app the
   customer works in keeps Inter and stays a tool rather than a note.
   Both are pencil-plausible AND upright enough to read at 14px, which is the
   whole reason they are these two and not a novelty face. ---- */
.mkt.mkt-crt{font-family:'Patrick Hand','Segoe Print',Inter,system-ui,sans-serif;
  font-size:17px;letter-spacing:.005em}
.mkt-crt .crt-crest-h{font-family:'Caveat','Patrick Hand',cursive;font-weight:700;
  font-size:clamp(2.3rem,4.8vw,3.7rem);letter-spacing:.005em;line-height:1.06}
/* Caveat sits small in its em box, so the underline rides up to meet it */
.mkt-crt .crt-crest-h .mkt-grad::after{bottom:.04em;height:.055em}
.mkt-crt .crt-topbar .mkt-brand{font-family:'Caveat','Patrick Hand',cursive;
  font-weight:700;font-size:1.62rem;letter-spacing:.01em}
.mkt-crt .mkt-signin,.mkt-crt .mkt-cta,.mkt-crt .mkt-ghost{
  font-family:inherit;font-weight:400;letter-spacing:.02em}
.mkt-crt .mkt-signin{font-size:1.02rem}
.mkt-crt .crt-doors .mkt-cta,.mkt-crt .crt-doors .mkt-ghost{font-size:1.06rem}
.mkt-crt .crt-topbar .mkt-cta{font-size:1rem}
.mkt-crt .crt-chatbox-in,.mkt-crt .crt-chatbox-in::placeholder{
  font-family:inherit;font-size:1.14rem}

/* ---- the page extends (owner 2026-08-29): the landing was ONE fixed screen
   with overflow hidden, so anything added below it was simply invisible. The
   hero keeps a full viewport of its own and the footer follows underneath.
   ---- */
.mkt.mkt-crt{overflow-y:auto;overflow-x:hidden}
.mkt-crt .crtl-stage{flex:0 0 auto;min-height:100vh}
.mkt-crt .mkt-foot{flex:0 0 auto}

/* ---- the footer, ruled and written on the same sheet. The dark-theme footer
   underneath this is built out of a gradient bar, an ember wash and
   gradient-clipped uppercase Space Grotesk — three screen effects that have no
   meaning on paper, so each is answered here rather than left to show through.
   ---- */
.mkt-crt .mkt-foot{background:none}
.mkt-crt .mkt-foot::before{height:2px;background:var(--graphite);opacity:.72;
  box-shadow:none;filter:url(#pencilRough)}
.mkt-crt .mkt-foot::after{display:none}
.mkt-crt .mkt-foot-h{font-family:'Caveat','Patrick Hand',cursive;font-weight:700;
  text-transform:none;letter-spacing:.005em;font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1.12;max-width:14ch;background:none;filter:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  color:var(--graphite);-webkit-text-fill-color:var(--graphite)}
.mkt-crt .mkt-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.mkt-crt .mkt-foot-hd{color:var(--graphite-3);font-weight:400;font-size:.8rem;letter-spacing:.16em}
.mkt-crt .mkt-foot-col a,.mkt-crt .mkt-foot-col button{color:var(--graphite-2);font-size:1.02rem}
.mkt-crt .mkt-foot-col a:hover,.mkt-crt .mkt-foot-col button:hover{color:var(--graphite)}
.mkt-crt .mkt-foot-col a:focus-visible,.mkt-crt .mkt-foot-col button:focus-visible{
  color:var(--graphite);outline:1px solid var(--graphite-3)}
/* the rule above the sign-off is drawn, not bordered */
.mkt-crt .mkt-foot-row{border-top:0;position:relative}
.mkt-crt .mkt-foot-row::before{content:"";position:absolute;top:0;
  left:clamp(1.1rem,4vw,3rem);right:clamp(1.1rem,4vw,3rem);height:1.4px;
  background:var(--graphite-3);opacity:.75;filter:url(#pencilRough2)}
.mkt-crt .mkt-foot .mkt-brand{font-family:'Caveat','Patrick Hand',cursive;
  font-weight:700;font-size:1.35rem;color:var(--graphite)}
.mkt-crt .mkt-foot .mkt-brand .logo-mark{width:26px;height:26px;overflow:visible}
.mkt-crt .mkt-foot-links,.mkt-crt .mkt-foot-links span{color:var(--graphite-3);font-size:.95rem}

/* ---- The reel (owner 2026-08-29): "like a video that it moves, not 5 static
   switch stuff, just like CSS moving."

   So it is a MARQUEE, not a carousel. There is no current slide, no step, no
   dots and no arrows — the track drifts left forever at a constant rate and
   the frames simply pass by. A carousel that snaps between five positions is
   the thing this replaced; it read as a slideshow because it WAS one.

   The seam is handled by running the five slides twice. The animation travels
   exactly -50% — one full pass — so the moment it wraps, pass two is sitting
   precisely where pass one began and nothing jumps. This is why the keyframe
   distance and the number of passes are one fact: change the passes and -50%
   is wrong, and the loop will visibly stutter once per cycle.

   FIVE sites, and it must stay five. A published game is served with
   `frame-ancestors 'none'` and cannot go in a frame at all — that is why an
   earlier version of this section showed broken cards live. Only /mkt/demo*
   carries `frame-ancestors 'self'`. Read the headers before adding anything.

   Motion is CSS, not a timer: a JS-stepped transform competes with the
   compositor and shows as jitter, and it keeps running when the tab is hidden.
   An animation is handed to the compositor and paused by the browser for free.
   ---- */
.mkt-crt .gf-reel-sec{flex:0 0 auto;
  padding:clamp(2.4rem,6vh,4rem) clamp(1rem,3vw,2.4rem) clamp(3rem,7vh,4.5rem)}

/* ---- The panel (owner 2026-08-29): "put it in a background, with moving CSS
   in the background, just something light, nothing too crazy, same background
   colour as we have now… make it look like it's separate, with shadows in the
   borders so it looks like it's not from there, and make the background move."

   Same paper as the page, deliberately — what separates it is the LIGHT, not a
   different colour: a lifted drop shadow underneath, a bright top edge, and a
   soft darkening around the inside of the border so the sheet reads as sitting
   on the page rather than being part of it.

   The movement is one pseudo-element carrying two soft washes, drifting on a
   40s loop. It is transform-only, so it composites and costs nothing per
   frame; animating background-position would repaint the whole panel instead.
   It sits at z-index 0 with the content above it, and is inert to the pointer,
   so it cannot come between a visitor and a card. ---- */
.mkt-crt .gf-reel-panel{position:relative;isolation:isolate;overflow:hidden;
  /* the row's right column is already the two thirds, with the pipeline in the
     third beside it — so the panel simply fills its column */
  width:100%;
  border-radius:clamp(26px,3vw,44px);
  background:var(--paper);
  padding:clamp(1.1rem,2.6vh,1.7rem) 0;
  box-shadow:
    0 38px 80px -54px rgba(51,49,61,.62),
    0 3px 10px -6px rgba(51,49,61,.18),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 60px -14px rgba(51,49,61,.16)}
.mkt-crt .gf-reel-panel::before{content:"";position:absolute;inset:-25%;z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 44% at 26% 30%,rgba(120,112,150,.16),transparent 66%),
    radial-gradient(34% 40% at 74% 66%,rgba(168,140,110,.16),transparent 64%),
    radial-gradient(30% 34% at 58% 14%,rgba(96,110,140,.10),transparent 68%);
  animation:gf-panel-drift 40s ease-in-out infinite}
@keyframes gf-panel-drift{
  0%,100%{transform:translate3d(-2.5%,-1.5%,0) scale(1.04)}
  50%    {transform:translate3d(2.5%,1.5%,0) scale(1.12)}
}
@media (prefers-reduced-motion:reduce){
  .mkt-crt .gf-reel-panel::before{animation:none}
}
/* the panel's own grain, so it is the same sheet and not a flat plate.
   border-radius:inherit is not decoration: this covers the panel's box EXACTLY
   (inset:0) with a hard-edged fill, and mix-blend-mode composites it onto its
   own layer. It was relying entirely on the parent's clip to get its corners,
   and an overlay that exactly covers a rounded box should carry that box's
   radius on its own — Safari clips a composited child to the RECTANGLE, so
   there the grain's four square corners landed precisely on top of the four
   rounded ones and the surface read as pointy and round at the same time.
   Chromium clips it correctly, which is why nothing here ever showed it. */
.mkt-crt .gf-reel-panel::after{content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;
  pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E")}
/* everything real sits above the wash */
.mkt-crt .gf-reel-head,.mkt-crt .gf-reel-swwrap,.mkt-crt .gf-reel{position:relative;z-index:1}
.mkt-crt .gf-reel-head{width:100%;margin:0 0 .2rem;padding:0;
  display:flex;flex-direction:column;align-items:center}
.mkt-crt .gf-reel-h{font-family:'Caveat','Patrick Hand',cursive;font-weight:700;
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.1;margin:0 0 .35rem;
  color:var(--graphite);text-align:center}
.mkt-crt .gf-reel-sub{margin:0 0 2.4rem;max-width:52ch;text-align:center;
  color:var(--graphite-2);font-size:1.06rem;line-height:1.5}
/* Two thirds of the screen, centred (owner 2026-08-29: "instead of it taking
   the whole screen, or the whole width, let it only take 2/3 of the screen,
   especially the right side"). Bounded, so a frame enters and leaves inside
   the box instead of off the page edge — which is what stopped it reading as
   content running out of the window on the right. The edges are faded so it
   arrives and leaves rather than being chopped at a hard line. */
/* THE RADIUS HAS TO BE HERE, not only on the panel. The track inside this box
   animates transform and declares will-change, so WebKit composites it — and it
   then clips a composited layer to the ancestor's RECTANGLE, not its rounded
   rectangle. The card's straight top edge therefore ran out past the panel's
   curve into the paper: the corner read as round with a pointy one poking
   through it, at top-left and bottom-right, which is where a card happens to
   sit. Clipping at the box that directly contains the track is what WebKit
   honours. Reproduced and each candidate fix tested in real WebKit — promoting
   the PANEL to its own layer (translateZ) does NOT fix it, which is why the
   first attempt at this was wrong. */
.mkt-crt .gf-reel{position:relative;width:100%;overflow:hidden;padding:0;
  border-radius:inherit;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 88%,transparent)}
/* min-height:inherit, so a track shorter than the box is CENTRED in it rather
   than parked at the top. It inherits .gf-reel's own min-height rather than
   restating the number — the app cards are 400 in a 412 box and never showed
   this, the clips are ~300 and left a band of empty paper underneath. */
.mkt-crt .gf-reel-track{display:flex;align-items:center;width:max-content;
  min-height:inherit;
  gap:clamp(1.4rem,3vw,2.4rem);
  animation:gf-reel-drift 32s linear infinite;will-change:transform}
/* the gap is part of the pass, so the wrap lands mid-gap and stays even */
@keyframes gf-reel-drift{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - clamp(1.4rem,3vw,2.4rem) / 2))}
}
.mkt-crt .gf-reel:hover .gf-reel-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .mkt-crt .gf-reel-track{animation:none}
}
/* One declaration per line, deliberately: landing-models.test.mjs collects
   defined tokens with a LINE-ANCHORED regex, so a token declared mid-line is
   invisible to it and reads as undefined. */
/* Every item is the SAME HEIGHT — 400px, measured — and that is the reason the
   strip stopped looking like a pile of odds and ends. A browser card is
   chrome + a 16:10 body; the phone is the demo's 380x800 device cropped to that
   same 400, which decides its width and its scale rather than the other way
   round.
   Change one and recompute the other, or they go back to not lining up. */
.mkt-crt .gf-reel-slide{position:relative;flex:0 0 auto;width:min(568px,70vw);
  border-radius:14px;overflow:hidden;background:rgba(255,253,247,.7);
  box-shadow:0 14px 34px -22px rgba(51,49,61,.55);
  --fw:908px;
  --sc:.625}
.mkt-crt .gf-reel-slide::before{content:"";position:absolute;inset:0;z-index:3;
  border-radius:inherit;border:1.9px solid var(--graphite);
  filter:url(#pencilRough);pointer-events:none}
.mkt-crt .gf-reel .mkt-chrome{background:none;border-bottom:0;padding:.55rem .85rem;position:relative}
.mkt-crt .gf-reel .mkt-chrome::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:0;
  height:1.2px;background:var(--graphite-3);opacity:.7;filter:url(#pencilRough2)}
.mkt-crt .gf-reel .mkt-dot{width:10px;height:10px;background:none;border:1.4px solid var(--graphite-3)}
.mkt-crt .gf-reel .mkt-url{background:none;color:var(--graphite-2);font-size:.88rem;
  padding:.12rem .9rem;border:1.2px solid rgba(145,141,156,.5);border-radius:6px}
.mkt-crt .gf-reel .mkt-chrome i{width:30px}
.mkt-crt .gf-reel-body{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--paper)}
.mkt-crt .gf-reel-frame{position:absolute;top:0;left:0;border:0;
  width:var(--fw);height:calc(var(--fw) * 10 / 16);
  transform:scale(var(--sc));transform-origin:top left}
/* The frames are INERT (owner 2026-08-29: "don't allow clicking in the demo
   sites, nvm"). They are moving pictures of real pages — nothing in them takes
   a click, a wheel or a focus, so the wheel passes straight through to the page
   and a visitor can never end up interacting with a site inside a strip that is
   sliding past them.

   This also means the crops cannot drift: nothing can scroll a framed page, so
   the phone's pixel-measured crop holds without any guard inside the demo. */
.mkt-crt .gf-reel-frame{pointer-events:none}

/* ---- The phone one (owner 2026-08-29): "on the ones that look like mobile,
   delete the background, and just put like the phone."

   /mkt/demo4/ is a whole dark page with a phone mockup standing in the middle
   of it. Nothing is hidden here and the page is not touched — the frame is
   simply positioned so the phone's own body fills the slide, and the page
   around it falls outside the crop. The chrome bar is dropped too: a browser
   window drawn around a phone was the thing that looked wrong.

   THE OFFSETS ARE READ FROM THE PAGE, not guessed at pixels. /mkt/demo4/ is a
   whole page with a phone standing in it; the frame is positioned so the
   device fills the slide and everything around it falls outside the crop.

   The numbers came from asking the page: the device is `.phone`, a fixed
   380x800 in the demo's own CSS, and at a 1200x1400 frame its
   getBoundingClientRect is x=745 y=139. Three pixel-measuring attempts before
   that all disagreed with each other and with the CSS — the page's headline,
   its section text and the screen's own 42px corner radius each defeated a
   different threshold. An element that knows its own box should be asked for
   it.

   Still size-bound: the page centres itself, so the device MOVES if the frame
   is resized. That is why the frame is pinned at 1200x1400 rather than
   inheriting --fw like the browser slides. Re-read the rect if either moves;
   do not scale these. */
.mkt-crt .gf-reel-slide.gf-phone{width:190px;border-radius:27px;background:none;
  box-shadow:0 16px 36px -22px rgba(51,49,61,.6)}
.mkt-crt .gf-reel-slide.gf-phone::before{border-radius:34px;border-width:1.7px}
.mkt-crt .gf-phone .gf-reel-body{aspect-ratio:380 / 800;background:none}
.mkt-crt .gf-phone .gf-reel-frame{
  width:1200px;
  height:1400px;
  /* translate first, then scale: the phone's top-left corner lands on the
     slide's. .5 is not a taste: 800 x .5 = 400, and 400 is the height of a
     browser card in this strip — chrome plus a 16:10 body. The width follows
     from it (380 x .5 = 190). Recompute both if the card or the device moves. */
  transform:scale(.5) translate(-745px,-139px)}

/* ---- The Video / App switch (owner 2026-08-29): "on top of this thing make
   like a switch to switch from video to app type thing."

   App is the drifting strip of built sites. Video is ONE screen, not a strip:
   there is exactly one real reel in the repo, and looping a marquee over a
   single clip would show the same fourteen seconds twice side by side and read
   as a bug. One asset gets presented as one thing. Drop more mp4s beside
   /mkt/reel1.mp4 and this becomes a strip like the other side. ---- */
/* the switch sits over the STRIP, not over the page — same 66% box, same edge,
   so it stays with the thing it controls however wide the window is */
.mkt-crt .gf-reel-swwrap{width:100%;display:flex;justify-content:center}
.mkt-crt .gf-reel-switch{display:flex;align-items:center;gap:.35rem;margin:0 0 1.4rem;
  padding:.28rem;border-radius:999px;position:relative;width:max-content}
.mkt-crt .gf-reel-switch::before{content:"";position:absolute;inset:0;border-radius:999px;
  border:1.6px solid var(--graphite-2);filter:url(#pencilRough2);pointer-events:none}
.mkt-crt .gf-sw{position:relative;border:0;background:none;cursor:pointer;font:inherit;
  font-size:1rem;color:var(--graphite-2);padding:.34rem 1.15rem;border-radius:999px;
  transition:color .2s}
.mkt-crt .gf-sw:hover{color:var(--graphite)}
.mkt-crt .gf-sw.on{color:var(--paper)}
/* the selected half is filled with pencil, the same shading the buttons use */
.mkt-crt .gf-sw.on::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
  background:var(--gr-fill);background-color:#2a2833}
.mkt-crt .gf-sw.on::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:999px;
  border:1.6px solid var(--graphite);filter:url(#pencilRough)}
.mkt-crt .gf-sw{isolation:isolate}
/* the two panes share one box, so switching cannot jolt the page height */
.mkt-crt .gf-reel{min-height:412px}
.mkt-crt .gf-reel-track[hidden]{display:none}
/* ---- The clips (owner 2026-08-29: "instead of one big video, there gonna be
   like a bunch of smaller rectangles just moving, like the one in app, and each
   rectangle would have its own video").

   A generated reel is not one shape — some are landscape, some vertical, some
   square — so the cards are not one shape either. What they DO share is a
   height, and the width follows from the shape: that is the same rule the app
   strip is built on, and it is why a mixed row lines up instead of reading as a
   pile of odds and ends. Set the height here and every card follows; there is
   no per-shape width to keep in step, because there isn't one. */
.mkt-crt .gf-clip{width:auto;height:clamp(220px,30vh,300px);
  border-radius:14px;background:var(--paper)}
/* One rule per shape and NO default: a shape whose rule was forgotten must
   render wrong enough to notice, not quietly inherit 16:9 and look plausible.
   test/landing-reel.test.mjs derives these names against REEL_CLIPS in both
   directions, so neither list can grow a member the other has never heard of. */
.mkt-crt .gf-clip .gf-reel-body{height:100%;width:auto}
.mkt-crt .gf-clip.gf-wide .gf-reel-body{aspect-ratio:16 / 9}
.mkt-crt .gf-clip.gf-sq   .gf-reel-body{aspect-ratio:1 / 1}
.mkt-crt .gf-clip.gf-tall .gf-reel-body{aspect-ratio:9 / 16}
/* object-fit:cover, so a clip whose own shape is not the card's is cropped to
   fill rather than letterboxed into it */
.mkt-crt .gf-reel-vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;display:block}

/* ---- The pipeline (owner 2026-08-29, picked option A): a literal pipe drawn
   down the left of the showcase, a valve at every stage, explaining how a site
   actually gets built.

   THE PIPE WALLS ARE ONE ELEMENT behind the whole list; each step draws only
   its valve. The obvious way round — stations at fixed coordinates in one SVG
   and labels at matching offsets in HTML — is two lists of the same positions,
   and they drift the moment a line of text wraps. Here the wall cannot drift
   from the stations because it does not know where they are. ---- */
.mkt-crt .gf-reel-row{display:flex;align-items:flex-start;
  gap:clamp(1rem,2.5vw,2.2rem);width:100%}
/* The pipe is now much taller than the showcase — twenty models against a
   459px panel left 574px of blank paper beside the lower half. The showcase
   rides along instead: it sticks while the model list scrolls past it, so the
   right side is never empty and the two halves are read together rather than
   one after the other.
   Only where there is room for it. On a short viewport a sticky block taller
   than the screen can never fully scroll into view, which is worse than the
   gap it fixes. */
.mkt-crt .gf-reel-right{flex:1 1 auto;min-width:0}
@media (min-height:720px){
  .mkt-crt .gf-reel-right{position:sticky;top:clamp(1rem,5vh,2.6rem);align-self:flex-start}
}
.mkt-crt .gf-pipe{flex:0 0 clamp(280px,31%,420px);position:relative;
  padding-top:.5rem}
.mkt-crt .gf-pipe-h{font-family:'Caveat','Patrick Hand',cursive;font-weight:700;
  font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1;margin:0 0 1.1rem .2rem;
  color:var(--graphite)}
.mkt-crt .gf-pipe-list{list-style:none;margin:0;padding:0;position:relative}
/* the pipe itself: two ruled walls with graphite wash between them, running the
   full height of however many steps there are */
.mkt-crt .gf-pipe-list::before{content:"";position:absolute;z-index:0;
  left:9px;top:6px;bottom:0;width:40px;
  border-left:2.2px solid var(--graphite);border-right:2.2px solid var(--graphite);
  background:var(--gr-tint);filter:url(#pencilRough)}
/* capped at the top only: the bottom is where the run elbows away, so a cap
   there would weld the pipe shut and then carry on out of it anyway */
.mkt-crt .gf-pipe-list::after{content:"";position:absolute;z-index:1;
  left:2px;right:auto;top:0;width:54px;height:100%;pointer-events:none;
  border-top:2.6px solid var(--graphite);
  filter:url(#pencilRough2)}
.mkt-crt .gf-pipe-step{position:relative;z-index:2;display:flex;align-items:center;
  gap:.85rem;min-height:clamp(46px,5.4vh,56px)}
.mkt-crt .gf-pipe-valve{flex:0 0 58px;color:var(--graphite);display:block;
  margin-left:-1px;filter:url(#pencilRough2)}
.mkt-crt .gf-pipe-valve svg{display:block;width:58px;height:34px}
.mkt-crt .gf-pipe-txt{min-width:0}
/* The name is a link to that model's own page (/models/<slug>, built from the
   label in chat.js). inline-flex, not flex, so the box — and therefore the
   hover underline — is the width of the name rather than the width of the
   column. The underline is drawn rather than declared: text-decoration on a
   flex container is inconsistent across engines and would not take the pencil
   filter, so it is a ruled ::after that wobbles like every other line here. */
.mkt-crt .gf-pipe-txt .gf-pipe-name{position:relative;
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:400;font-size:1.06rem;color:var(--graphite);line-height:1.2}
.mkt-crt .gf-pipe-name::after{content:"";position:absolute;
  left:0;right:0;bottom:-3px;height:0;
  border-bottom:1.6px solid var(--graphite);
  opacity:0;transition:opacity .12s ease;filter:url(#pencilRough2)}
.mkt-crt .gf-pipe-name:hover::after,
.mkt-crt .gf-pipe-name:focus-visible::after{opacity:.9}
@media (prefers-reduced-motion:reduce){
  .mkt-crt .gf-pipe-name::after{transition:none}
}
/* the provider's own mark sits where the step number used to. Painted as a
   MASK, not an <img>: everything in /logos is monochrome white and would
   disappear on cream paper, whereas a mask takes currentColor and comes out in
   graphite like the rest of the drawing. */
.mkt-crt .gf-pipe-mark{width:15px;height:15px;flex:0 0 auto;background:currentColor;
  display:block;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.mkt-crt .gf-pipe-txt small{display:block;font-size:.88rem;line-height:1.35;
  color:var(--graphite-3);margin-top:.05rem}
@media (max-width:900px){
  .mkt-crt .gf-reel-row{flex-direction:column}
  .mkt-crt .gf-pipe{flex:1 1 auto;width:100%;max-width:420px}
}

/* ---- Which model runs at which step (owner 2026-08-29). Read out of the
   code, not decided here: Route is claude-haiku-4-5 in worker.js, and Design
   and Generate are BUILD_MODELS[picker], which is grok-4.6 by default.

   Only three of the eight steps call a model at all — compiling, checking,
   salvaging and publishing are a container and a bucket. The gaps are the
   honest part of this drawing and are worth leaving visible.

   The marks are the providers' own files from /logos, which are monochrome, so
   they are painted with a MASK rather than an <img>: the artwork becomes the
   alpha and currentColor supplies the graphite. An <img> would drop a white
   logo onto paper and vanish. ---- */
.mkt-crt .gf-pipe-model{display:inline-flex;align-items:center;gap:.34rem;
  margin-left:.5rem;padding:.08rem .48rem .1rem;border-radius:999px;
  font-size:.76rem;line-height:1.5;color:var(--graphite-2);white-space:nowrap;
  position:relative}
.mkt-crt .gf-pipe-model::before{content:"";position:absolute;inset:0;
  border-radius:inherit;border:1.2px solid var(--graphite-3);opacity:.85;
  filter:url(#pencilRough2)}
.mkt-crt .gf-pipe-model i{width:12px;height:12px;flex:0 0 auto;
  background:currentColor;display:block}
.mkt-crt .gf-m-grok i{
  -webkit-mask:url(/logos/grok.svg) center/contain no-repeat;
  mask:url(/logos/grok.svg) center/contain no-repeat}
/* Claude's mark was missing from /logos and is now fetched from the same place
   the other thirteen came from — @lobehub/icons-static-svg. Proven rather than
   assumed: upstream grok.svg has byte-identical path data to ours and differs
   only in the fill, so this is the same set, not a lookalike. */
.mkt-crt .gf-m-anthropic i{
  -webkit-mask:url(/logos/claude.svg) center/contain no-repeat;
  mask:url(/logos/claude.svg) center/contain no-repeat}

/* ---- The horizontal run (owner 2026-08-29: "on the very bottom of the
   pipeline, make a horizontal one attached to that one, make that one covers
   most of the page horizontally"). Option A of the four rendered: the vertical
   pipe's own valve vocabulary turned on its side, five stations, five words.

   The corner is the only part drawn in SVG, because a CSS box cannot turn.
   Its two arcs are CONCENTRIC BY CONSTRUCTION rather than by eye — they share
   one centre and their radii differ by exactly the bore, so the walls cannot
   drift apart round the bend. Every number in that path is the CENTRELINE of a
   wall this stylesheet already draws: the vertical pipe is left:9px width:40px
   with 2.2px borders, so its wall centrelines are 10.1 and 47.9, and the band
   below repeats that box on its side (top:56px height:40px, centrelines 57.1
   and 94.9). Change the pipe's box and the elbow must be re-derived with it.

   The run is a sibling of .gf-reel-row, not a child of the aside: the aside is
   a third of the width and the run has to cross the whole page. Both sit in
   .gf-reel-sec's padding box, so x=0 is the same x=0 for each and the elbow
   lands on the pipe without a magic offset. ---- */
/* The band under the run is deliberately empty for now (owner 2026-08-30:
   "make a space under it") — whatever hangs off the horizontal pipeline goes
   here. It is margin rather than an empty element on purpose: a placeholder div
   with nothing in it is markup that reads as a feature somebody forgot to
   finish, and it would sit in the DOM being announced to a screen reader. When
   the content arrives it goes after .gf-run and this margin becomes the gap
   above it. */
.mkt-crt .gf-run{position:relative;height:150px;color:var(--graphite);
  margin:0 0 clamp(380px,55vh,620px)}
.mkt-crt .gf-run-elbow{position:absolute;left:0;top:0;display:block;
  filter:url(#pencilRough)}
/* the straight length. It starts UNDER the elbow's flat tails (which run to
   x=106) by more than the roughen filter's 3.4px throw, so the join cannot
   open up on a wobble. */
.mkt-crt .gf-run-pipe{position:absolute;left:96px;right:0;top:56px;height:40px;
  border-top:2.2px solid var(--graphite);border-bottom:2.2px solid var(--graphite);
  background:var(--gr-tint);filter:url(#pencilRough)}
.mkt-crt .gf-run-list{position:absolute;left:106px;right:0;top:56px;height:40px;
  margin:0;padding:0;list-style:none;
  display:flex;align-items:center;justify-content:space-around}
.mkt-crt .gf-run-step{position:relative;display:block}
.mkt-crt .gf-run-valve{display:block;color:var(--graphite);filter:url(#pencilRough2)}
/* the same 76x44 valve the vertical steps draw, transposed: two flange lines
   across the flow and a handwheel on the centreline. It overhangs the 40px
   bore by ~9px each side exactly as the vertical one overhangs the pipe's
   width, which is what makes the two read as one drawing. */
.mkt-crt .gf-run-valve svg{display:block;width:34px;height:58px}
.mkt-crt .gf-run-txt{position:absolute;left:50%;top:calc(100% + 12px);
  transform:translateX(-50%);white-space:nowrap;text-align:center;
  font-weight:400;font-size:1.02rem;line-height:1.2;color:var(--graphite)}
/* the note under an agent's name, the same second line the vertical pipe's
   steps carry — one weight down and one shade back, so the name reads first */
.mkt-crt .gf-run-txt small{display:block;margin-top:.15rem;
  font-size:.88rem;line-height:1.35;color:var(--graphite-3)}
/* Below 900px the row stacks, so the pipe's bottom is no longer the row's
   bottom and the elbow would hang off nothing. Desktop-first here as
   everywhere else on this page: drop the run rather than draw it detached. */
@media (max-width:900px){
  .mkt-crt .gf-run{display:none}
}