/* Ten — the get-started flow (/start/)
 *
 * Loads AFTER style.css and inherits its tokens wholesale: warm paper ground,
 * white surfaces floating on it, near-black pill CTAs, Helvetica Neue display +
 * Charter serif body, colour only inside contained surfaces.
 *
 * What's different here, and deliberately so: the landing page is a page you
 * scroll, this is a room you're standing in. Every screen fills the viewport,
 * one question at a time, nothing below the fold to hunt for. The marketing nav
 * is gone — the only two moves are back and exit.
 *
 * Screen shapes are varied on purpose. Two big picture-cards, then a
 * conversation, then a rail of phones, then a workspace — repeating one card
 * grid four times is what makes a wizard feel like a form. The talk screen and
 * the builder share the .bd-msg / .bd-composer vocabulary so the intake and
 * the workspace read as one product.
 */

:root {
  --st-bar-h: 64px;
  --r-in: 14px;              /* inputs + small surfaces */
}

.st-body { background: var(--bg); }
/* The builder owns the viewport exactly; nothing behind it should scroll. */
.st-body.is-builder { overflow: hidden; }

/* Several surfaces here set their own `display`, which beats the UA's
   [hidden] rule and leaves "hidden" elements visible. This is load-bearing:
   .st-drop (grid) and .st-view (block) are both toggled by the hidden
   attribute. */
[hidden] { display: none !important; }

/* ================================ BAR ================================ */
.st-bar {
  position: sticky; top: 0; z-index: 40;
  height: var(--st-bar-h);
  padding: 0 20px 0 14px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px;
  background: rgba(246, 244, 240, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.st-bar.is-edge { border-bottom-color: var(--rule); }
.st-bar-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.st-bar-r { display: flex; align-items: center; justify-content: flex-end; }

.st-back {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent;
  color: var(--ink); cursor: pointer;
  transition: background 140ms var(--ease);
}
.st-back:hover { background: rgba(17, 18, 19, 0.06); }
.st-back:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.st-back svg { width: 17px; height: 17px; }
.st-back[hidden] { display: none; }

.st-bar .mark { padding: 0 6px; }

.st-exit {
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 500;
  color: var(--mute); text-decoration: none;
  padding: 8px 12px; border-radius: 999px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.st-exit:hover { background: rgba(17, 18, 19, 0.055); color: var(--ink); }

/* The whole progress affordance. No step count: the path length isn't known
   until the second answer, and a total that jumps 3 → 4 reads as a bug. */
.st-prog {
  width: min(180px, 28vw); height: 3px;
  border-radius: 999px; background: var(--panel-deep);
  overflow: hidden;
  transition: opacity 260ms var(--ease);
}
.st-prog i {
  display: block; height: 100%; width: 0%;
  border-radius: 999px; background: var(--ink);
  transition: width 520ms var(--ease-out);
}
.st-prog.is-off { opacity: 0; }

/* ============================== SCREENS ============================== */
.st-main {
  min-height: calc(100dvh - var(--st-bar-h));
  display: grid;
}
.st-screen { display: none; }
.st-screen.is-on {
  display: grid; align-items: center; justify-items: center;
  padding: 40px var(--pad-x) 72px;
}
/* Vertically centred, but never so low the heading falls under the fold on a
   short laptop viewport — the min() is what keeps it honest. */
.st-screen.is-on > .st-in { animation: st-in 460ms var(--ease-out) both; }
@keyframes st-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.st-in { width: 100%; max-width: 880px; }
.st-in--narrow { max-width: 520px; }

.st-h {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  letter-spacing: -0.03em; line-height: 1.06;
  margin: 0 0 34px; outline: none;
  text-wrap: balance;
}
.st-in--narrow .st-h { margin-bottom: 28px; }
.st-lede { color: var(--mute); font-size: 1.06rem; margin: 0 0 22px; }
.st-quiet {
  display: inline-block;
  font-family: var(--font-display); font-size: 0.9rem; color: var(--mute);
  text-decoration: none; border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.st-quiet:hover { color: var(--ink); border-bottom-color: var(--mute); }

.st-err {
  font-family: var(--font-display); font-size: 0.87rem; color: var(--down);
  margin: 12px 0 0;
}
.st-fine {
  font-family: var(--font-display); font-size: 0.82rem; color: var(--mute-soft);
  margin: 16px 0 0; text-align: center;
}

/* ============================ 1 · THE FORK ============================ */
.st-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.st-pick {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding: 0; overflow: hidden;
  text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(17, 18, 19, 0.03), 0 18px 40px -34px rgba(17, 18, 19, 0.5);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease);
}
.st-pick:hover, .st-pick:focus-visible {
  transform: translateY(-3px);
  border-color: var(--indigo-line);
  box-shadow: 0 2px 4px rgba(17, 18, 19, 0.04), 0 28px 56px -34px rgba(17, 18, 19, 0.55);
  outline: none;
}
.st-pick:focus-visible { border-color: var(--indigo); }
.st-pick:active { transform: translateY(-1px); }

.st-pick-art {
  display: block; position: relative; height: 172px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.st-pick-txt { display: block; padding: 20px 22px 22px; }
.st-pick-t {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.06rem; letter-spacing: -0.015em; color: var(--ink);
}
.st-pick-d {
  display: block; margin-top: 5px;
  font-family: var(--font-display); font-size: 0.9rem; color: var(--mute);
}

/* — art A: a project that already exists — */
.pa-win {
  position: absolute; left: 30px; right: -18px; top: 30px; bottom: -22px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px 0 0 0; border-right: 0; border-bottom: 0;
  box-shadow: -14px -8px 40px -30px rgba(17, 18, 19, 0.6);
  overflow: hidden;
}
.pa-bar {
  display: flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px;
  border-bottom: 1px solid var(--rule);
}
.pa-bar i { width: 6px; height: 6px; border-radius: 50%; background: #E2DFD8; }
.pa-body { display: block; padding: 14px 14px 0; }
.pa-line {
  display: block; height: 7px; border-radius: 4px;
  background: var(--panel-deep); margin-bottom: 9px;
  transform-origin: left;
  transition: background 260ms var(--ease);
}
.pa-line.w45 { width: 45%; }
.pa-line.w70 { width: 70%; }
.pa-line.w80 { width: 80%; }
.pa-line.w90 { width: 90%; }
.st-pick:hover .pa-line:nth-child(1) { background: var(--indigo-line); }
.st-pick:hover .pa-line:nth-child(3) { background: var(--indigo-line); }

/* — art B: a cursor waiting — */
.pa-blank { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 26px; }
.pa-field {
  width: 100%; height: 46px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--rule);
  display: flex; align-items: center; gap: 2px; padding: 0 18px;
  box-shadow: 0 1px 2px rgba(17, 18, 19, 0.04);
}
.pa-typed {
  font-family: var(--font-display); font-size: 0.9rem; color: var(--mute);
  white-space: nowrap; overflow: hidden;
}
.pa-caret {
  width: 1.5px; height: 16px; flex: 0 0 auto;
  background: var(--indigo);
  animation: st-blink 1.05s steps(1) infinite;
}
@keyframes st-blink { 50% { opacity: 0; } }

/* ============================ 2 · TALK ============================
   The conversation owns the viewport the way the builder does: the log is the
   room, the composer is the floor. Messages reuse the builder's .bd-msg
   vocabulary on purpose — the intake and the workspace must read as one
   product, not two chat UIs that disagree. */
.st-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.st-body.is-room { overflow: hidden; }
.st-screen--talk.is-on { padding: 0; align-items: stretch; justify-items: stretch; }
.tk {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--st-bar-h));
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 0 var(--pad-x);
}
.tk-main {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  flex: 1 1 auto; min-height: 0;
}

/* — the live brief. Phone: a collapsed strip ABOVE the thread (order:-1),
   tap to expand. Desktop (≥981px): an always-open rail beside it. — */
.tk-doc {
  order: -1; flex: 0 0 auto;
  margin: 12px 0 0;
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
  overflow: hidden;
}
.tk-doc-head {
  width: 100%; display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; border: none; background: none; cursor: pointer;
  text-align: left;
}
.tk-doc-head:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.tk-doc-kicker {
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute);
  flex: 0 0 auto;
}
.tk-doc-title {
  font-family: var(--font-display); font-size: 0.92rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.tk-doc-count {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--font-display); font-size: 0.78rem; color: var(--mute-soft);
  font-variant-numeric: tabular-nums;
}
.tk-doc-body { display: none; padding: 2px 14px 14px; }
.tk-doc.is-open .tk-doc-body { display: block; }
.tk-doc-rows { display: grid; gap: 8px; }
.tk-doc-rows div { display: flex; gap: 12px; align-items: baseline; }
.tk-doc-rows .k {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute);
  width: 66px; flex: 0 0 auto;
}
.tk-doc-rows .v {
  font-family: var(--font-display); font-size: 0.88rem; color: var(--ink);
  line-height: 1.45; min-width: 0;
  animation: st-fade 320ms var(--ease-out) both;
}
.tk-doc-finish { width: 100%; justify-content: center; margin-top: 14px; }
.tk-doc-fine {
  font-family: var(--font-display); font-size: 0.76rem; color: var(--mute-soft);
  margin: 10px 0 0; text-align: center;
}
@media (min-width: 981px) {
  .tk {
    display: grid; grid-template-columns: minmax(0, 1fr) 276px;
    grid-template-rows: minmax(0, 1fr); gap: 26px;
    max-width: 1024px;
  }
  .tk-main { flex: none; }
  .tk-doc {
    order: 0; align-self: start; margin-top: 30px;
    max-height: calc(100% - 60px); overflow-y: auto; scrollbar-width: thin;
  }
  .tk-doc-head { cursor: default; }
  .tk-doc-body { display: block; }
}

/* the agent-voice toggle: revealed once the visitor speaks; muted state */
#tk-spk[aria-pressed="false"] { opacity: 0.4; }
.tk-log {
  overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  padding: 30px 4px 8px; scrollbar-width: thin;
}
/* anchors the thread to the floor without the justify-content:flex-end
   scroll bug — a short thread sits by the composer, a long one scrolls */
.tk-log > :first-child { margin-top: auto; }
.tk-foot { padding: 6px 0 max(18px, env(safe-area-inset-bottom)); }
.tk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 10px; }
.tk-chips:empty { display: none; }
.tk-composer { margin: 0; }
.tk-hint {
  min-height: 1.2em; margin: 8px 6px 0;
  font-family: var(--font-display); font-size: 0.8rem; color: var(--mute-soft);
}

/* the mic — rendered only when SpeechRecognition actually exists */
.st-mic {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--mute);
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.st-mic svg { width: 16px; height: 16px; }
.st-mic:hover { background: rgba(17, 18, 19, 0.06); color: var(--ink); }
.st-mic:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.st-mic.is-live {
  color: var(--down); background: rgba(196, 68, 79, 0.1);
  animation: st-pulse 1.5s var(--ease) infinite;
}

/* the contact card — the one form in the conversation, so autofill still works */
.tk-card {
  align-self: flex-start; width: min(100%, 400px);
  background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
  padding: 18px; animation: st-fade 340ms var(--ease-out) both;
}
.tk-card .st-field { margin-bottom: 14px; }
.tk-card .btn { width: 100%; justify-content: center; }
.tk-card .st-fine { text-align: left; margin-top: 12px; }
.tk-card.is-sent { opacity: 0.55; pointer-events: none; }

/* ============================ 3a · IMPORT ============================ */
.st-panel {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 18, 19, 0.03), 0 24px 60px -46px rgba(17, 18, 19, 0.6);
}
.st-methods {
  display: flex; gap: 4px; padding: 10px;
  border-bottom: 1px solid var(--rule); background: var(--panel);
}
.st-method {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px; border: none; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--mute);
  font-family: var(--font-display); font-size: 0.91rem; font-weight: 500;
  letter-spacing: -0.008em;
  transition: background 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.st-method svg { width: 15px; height: 15px; flex: 0 0 auto; }
.st-method:hover { color: var(--ink); }
.st-method.is-on {
  background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(17, 18, 19, 0.08);
}
.st-method:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }

/* One height for all three views so switching method never resizes the panel
   and never moves the Continue button. */
.st-method-body { padding: 26px; min-height: 200px; display: grid; align-content: start; }
.st-view { display: none; animation: st-fade 280ms var(--ease-out) both; }
.st-view.is-on { display: block; }
@keyframes st-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.st-field {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 52px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-in);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  cursor: text;
}
.st-field:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(105, 90, 210, 0.1);
}
.st-field.is-bad { border-color: var(--down); box-shadow: 0 0 0 3px rgba(196, 68, 79, 0.09); }
.st-field-ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--mute-soft); }
.st-field input {
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none; background: none; padding: 0;
  font-family: var(--font-display); font-size: 1rem; color: var(--ink);
  letter-spacing: -0.008em;
}
.st-field input::placeholder { color: #9C9990; }

.st-note {
  font-family: var(--font-display); font-size: 0.85rem; color: var(--mute-soft);
  margin: 12px 0 0;
}
.st-gh { justify-content: center; }
.st-or {
  display: flex; align-items: center; gap: 14px; margin: 18px 0;
  font-family: var(--font-display); font-size: 0.82rem; color: var(--mute-soft);
}
.st-or::before, .st-or::after { content: ''; flex: 1 1 0; height: 1px; background: var(--rule); }

/* — drop zone — */
.st-drop {
  display: grid; place-items: center; gap: 2px;
  padding: 38px 20px; cursor: pointer;
  border: 1px dashed #D8D3C8; border-radius: var(--r-in);
  background: var(--panel);
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.st-drop:hover, .st-drop:focus-visible { border-color: var(--indigo-line); outline: none; }
.st-drop.is-over {
  border-color: var(--indigo); background: var(--indigo-soft);
}
.st-drop-ic { width: 24px; height: 24px; color: var(--mute-soft); margin-bottom: 8px; }
.st-drop.is-over .st-drop-ic { color: var(--indigo); }
.st-drop-t { font-family: var(--font-display); font-size: 0.98rem; font-weight: 500; color: var(--ink); margin: 0; }
.st-drop-d { font-family: var(--font-display); font-size: 0.88rem; color: var(--mute); margin: 0; }
.st-drop-link { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }

/* — what we actually read out of the folder — */
.st-found { animation: st-fade 320ms var(--ease-out) both; }
.st-found-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.st-found-name {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-found-clear {
  border: none; background: none; cursor: pointer; padding: 0;
  font-family: var(--font-display); font-size: 0.85rem; color: var(--mute);
}
.st-found-clear:hover { color: var(--ink); text-decoration: underline; }
.st-found-rows { display: grid; }
.st-frow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  opacity: 0; transform: translateY(5px);
  animation: st-fade 320ms var(--ease-out) forwards;
}
.st-frow:last-child { border-bottom: 0; }
.st-frow .k {
  font-family: var(--font-display); font-size: 0.85rem; color: var(--mute);
  width: 98px; flex: 0 0 auto;
}
.st-frow .v {
  font-family: var(--font-mono); font-size: 0.81rem; color: var(--ink);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-frow .tag {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px;
  background: var(--up-soft); color: var(--up); flex: 0 0 auto;
}
.st-frow .tag.warn { background: var(--warn-soft); color: var(--warn); }

.st-actions { margin-top: 26px; }
.st-actions .btn:disabled { opacity: 0.34; pointer-events: none; }

/* ---------- the painted stage (Nikhil, 2026-08-14) ----------
   The import screen is the only place in the flow that spends colour. Same
   painted dusk as the landing page's showcase, so the two read as one product,
   and nowhere else — the flat paper ground is the reason the rest of the flow
   feels calm, and colour on every screen would spend that. */
.st-stage {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;                  /* keeps the grain's blend off the page */
  box-shadow: 0 2px 8px rgba(24, 20, 56, 0.10), 0 40px 90px -50px rgba(24, 20, 56, 0.65);
}
/* The art is deliberately BIGGER than the frame it shows through. At inset:0
   the visible band is the painting's top edge, where the gold and rose stops
   live, and 22px of that reads as a rainbow border rather than a surface.
   Oversized, what shows is the painting's middle: deep dusk, with the warm
   notes only glowing in from the corners. */
.st-stage-art {
  position: absolute; inset: -38% -12% -14%; z-index: -1;
  /* identical stops to .showcase-art in style.css — if that painting is ever
     re-mixed, re-mix this with it or the two surfaces drift apart */
  background:
    radial-gradient(96% 74% at 14% 2%,    rgba(255, 198, 126, 0.95) 0%, rgba(255, 198, 126, 0) 50%),
    radial-gradient(78% 66% at 88% 2%,    rgba(228, 124, 160, 0.88) 0%, rgba(228, 124, 160, 0) 54%),
    radial-gradient(140% 118% at 64% 110%, rgba(20, 16, 58, 0.98) 0%, rgba(20, 16, 58, 0) 56%),
    radial-gradient(118% 100% at -4% 104%, rgba(56, 36, 122, 0.94) 0%, rgba(56, 36, 122, 0) 54%),
    linear-gradient(158deg, #5A4FC4 0%, #8A5FB0 26%, #C97C74 50%, #6A4A9E 74%, #221C58 100%);
}
.st-stage-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.20; mix-blend-mode: overlay;
}
.st-stage-art::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 30%, transparent 40%, rgba(26, 22, 58, 0.38) 100%);
}
/* on the paint the panel needs a real shadow, not the paper-ground hairline */
.st-stage .st-panel {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 2px 6px rgba(24, 20, 56, 0.16),
    0 26px 60px -26px rgba(24, 20, 56, 0.6);
}

.st-works {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  margin-top: 30px;
}
.st-works-l {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mute-soft);
}
.st-works-list {
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
/* inside the stage the row sits ON the paint: the label goes light, and each
   builder becomes a white chip so it reads as an object on a surface */
.st-stage .st-works { margin: 22px 4px 2px; gap: 10px 12px; }
.st-stage .st-works-l { color: rgba(255, 255, 255, 0.74); }
.st-stage .st-works-list { gap: 8px; }
.cred--chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 15px;
  background: rgba(255, 255, 255, 0.95); border-radius: 999px;
  font-family: var(--font-display); font-size: 0.84rem; font-weight: 500;
  letter-spacing: -0.006em; color: var(--ink-soft); line-height: 1;
  box-shadow: 0 1px 2px rgba(20, 16, 58, 0.2);
}
/* the swapped-in state: a real mark, capped so tall and wide logos share a
   baseline inside a 32px chip */
.cred--chip img { height: 14px; width: auto; max-width: 76px; display: block; opacity: 1; }

/* the quick-answer chips under the conversation */
.st-chip {
  font-family: var(--font-display); font-size: 0.87rem; color: var(--mute);
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  padding: 8px 14px; cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.st-chip:hover { color: var(--ink); border-color: var(--mute-soft); }
.st-chip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

/* ============================ 3b · OPTIONS ============================
   The creator wizard's options moment, rebuilt in this design system: a rail
   of real coded looks, one hero at a time, name and one line under it. The
   five looks are ONE markup restyled by [data-look] custom properties, and
   the same properties restyle the builder's live preview afterwards. */
.st-kicker {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute);
  margin: 0 0 14px;
}
.st-in--look { max-width: 880px; text-align: center; }
.st-in--look .st-h { margin-bottom: 6px; }

.lk { margin-top: 30px; --lk-w: 204px; }
.lk-gallery { position: relative; overflow: hidden; outline: none; border-radius: 20px; }
.lk-gallery:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.lk-stage { position: relative; height: calc(var(--lk-w) * 2.14); }

.lk-card {
  position: absolute; top: 4px; left: 50%; width: var(--lk-w);
  transform: translateX(calc(-50% + var(--x, 0px))) scale(var(--sc, 1));
  opacity: var(--op, 1);
  transition: transform 460ms var(--ease-out), opacity 460ms var(--ease-out);
  cursor: pointer;
}
.lk-card.is-hero { cursor: default; z-index: 2; }
.lk-card.is-gone { opacity: 0; pointer-events: none; }

.lk-phone {
  border-radius: 30px; padding: 6px; background: #0E0F11;
  box-shadow:
    0 0 0 1px rgba(17, 18, 19, 0.1),
    0 30px 60px -34px rgba(17, 18, 19, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.lk-screen {
  position: relative; border-radius: 24px; overflow: hidden;
  aspect-ratio: 298 / 620;
  background: var(--lv-bg);
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
}

/* the scaffold, miniature — same content the builder preview resolves to */
.lp { padding: 24px 13px 8px; display: grid; align-content: start; gap: 9px; overflow: hidden; }
.lp-h {
  font-family: var(--lv-font, var(--font-display)); font-weight: 600;
  font-size: 0.86rem; letter-spacing: -0.02em; color: var(--lv-ink); margin: 0;
}
.lp-sub { font-family: var(--font-display); font-size: 0.6rem; color: var(--lv-mute); margin: -5px 0 2px; }
.lp-card { border: 1px solid var(--lv-rule); border-radius: var(--lv-r); padding: 10px 11px; background: var(--lv-card); text-align: left; }
.lp-card.lp-acc { background: var(--lv-acc); border-color: transparent; color: var(--lv-acc-ink); }
.lp-k { display: block; font-family: var(--font-display); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lv-mute); }
.lp-acc .lp-k { color: var(--lv-acc-ink); opacity: 0.72; }
.lp-v {
  display: block; font-family: var(--lv-font, var(--font-display));
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.03em; margin-top: 2px;
}
.lp-line { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 0.62rem; color: var(--lv-ink); }
.lp-line + .lp-line { margin-top: 7px; }
.lp-tick { width: 11px; height: 11px; border-radius: 50%; border: 1.2px solid var(--lv-rule); flex: 0 0 auto; }
.lp-tick.on { background: var(--lv-acc); border-color: var(--lv-acc); }
.lp-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 8px; }
.lp-bars i { flex: 1 1 0; border-radius: 2px 2px 0 0; background: var(--lv-acc-soft); }
.lp-bars i:last-child { background: var(--lv-acc); }
.lp-tabbar {
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 18px 12px; border-top: 1px solid var(--lv-rule); background: var(--lv-card);
}
.lp-tabbar i { width: 10px; height: 10px; border-radius: 4px; background: var(--lv-rule); }
.lp-tabbar i.on { background: var(--lv-acc); }

.lk-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.lk-nav {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease-out), opacity 140ms var(--ease);
}
.lk-nav svg { width: 16px; height: 16px; }
.lk-nav:hover { border-color: var(--mute-soft); }
.lk-nav:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.lk-nav:disabled { opacity: 0.28; pointer-events: none; }
.lk-cap { min-width: 220px; }
.lk-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.lk-desc { font-family: var(--font-display); font-size: 0.85rem; color: var(--mute); margin-top: 2px; }

.st-actions--look { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; }
.st-skip {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 0.9rem; color: var(--mute);
  padding: 0 0 1px; border-bottom: 1px solid var(--rule);
}
.st-skip:hover { color: var(--ink); border-bottom-color: var(--mute); }
.st-skip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.lk-fine {
  font-family: var(--font-display); font-size: 0.82rem; color: var(--mute-soft);
  margin: 18px 0 0;
}

/* ------------------------- the five looks -------------------------
   One markup, five property sets. These also restyle the builder preview:
   ENTER.builder stamps the chosen id onto .phone-screen[data-look]. Colour
   in here is contained-surface colour (the ops-dashboard exception), not a
   break of the page's one-source-of-colour rule. */
[data-look="paper"] {
  --lv-bg: #F6F4F0; --lv-card: #FFFFFF; --lv-ink: #111213; --lv-mute: #8A8478;
  --lv-rule: #E9E5DD; --lv-acc: #695AD2; --lv-acc-ink: #FFFFFF;
  --lv-acc-soft: rgba(105, 90, 210, 0.16); --lv-r: 13px;
}
[data-look="carbon"] {
  --lv-bg: #101114; --lv-card: #191B1F; --lv-ink: #F1EFE9; --lv-mute: #83868D;
  --lv-rule: #262931; --lv-acc: #7EE8B8; --lv-acc-ink: #0C2A1C;
  --lv-acc-soft: rgba(126, 232, 184, 0.2); --lv-r: 13px;
}
[data-look="signal"] {
  --lv-bg: #F1F0EB; --lv-card: #FFFFFF; --lv-ink: #16171A; --lv-mute: #85837B;
  --lv-rule: #E3E1D8; --lv-acc: #2447F5; --lv-acc-ink: #FFFFFF;
  --lv-acc-soft: rgba(36, 71, 245, 0.14); --lv-r: 8px;
}
[data-look="linen"] {
  --lv-bg: #F8F5EE; --lv-card: #FDFBF6; --lv-ink: #3A382F; --lv-mute: #97927F;
  --lv-rule: #EAE4D4; --lv-acc: #6C8A5E; --lv-acc-ink: #F8F5EE;
  --lv-acc-soft: rgba(108, 138, 94, 0.18); --lv-r: 18px;
}
[data-look="terminal"] {
  --lv-bg: #FBFAF7; --lv-card: #FFFFFF; --lv-ink: #1C1D1E; --lv-mute: #8E8B82;
  --lv-rule: #DEDAD0; --lv-acc: #B95C28; --lv-acc-ink: #FFFFFF;
  --lv-acc-soft: rgba(185, 92, 40, 0.14); --lv-r: 4px; --lv-font: var(--font-mono);
}
/* per-look accents beyond the variables */
[data-look="signal"] .lp-v { font-size: 1.4rem; font-weight: 600; }
[data-look="signal"] .ph-card-v { font-size: 1.55rem; font-weight: 600; }

/* ============================ 3c · BRIDGE ============================ */
.st-screen--mid.is-on { align-content: center; }
.st-spin {
  display: block; width: 26px; height: 26px; margin: 0 auto 24px;
  border-radius: 50%;
  border: 2px solid var(--panel-deep); border-top-color: var(--ink);
  animation: st-spin 780ms linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ============================ 4 · DETAILS ============================ */
.st-form { display: block; }
.st-label {
  display: block; margin: 0 0 7px;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute);
}
.st-form .st-field { margin-bottom: 18px; }
.st-form .btn { margin-top: 8px; }

/* ============================ 5b · HANDED ============================ */
.st-tick {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 22px;
  border-radius: 50%; background: var(--up-soft); color: var(--up);
}
.st-tick svg { width: 20px; height: 20px; }
.st-next { list-style: none; margin: 0 0 30px; padding: 0; display: grid; }
.st-next li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 15px 0; margin: 0; border-bottom: 1px solid var(--rule);
  font-size: 1rem;
}
.st-next li:first-child { border-top: 1px solid var(--rule); }
.st-next b {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute);
  width: 74px; flex: 0 0 auto;
}
.st-next span { font-family: var(--font-body); color: var(--ink-soft); line-height: 1.5; }

.st-recap {
  background: var(--panel); border-radius: var(--r-in);
  padding: 16px 18px; margin-bottom: 26px;
  display: grid; gap: 8px;
}
.st-recap div { display: flex; gap: 12px; align-items: baseline; }
.st-recap .k {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mute); width: 74px; flex: 0 0 auto;
}
.st-recap .v {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* ============================ 5a · BUILDER ============================
   Ten Sandbox's shape: conversation left, live preview right, one product
   between them. It's the only screen that owns the full viewport. */
.st-screen--full.is-on { padding: 0; align-items: stretch; justify-items: stretch; }
.st-screen--full.is-on > .bd { animation: st-fade 420ms var(--ease-out) both; }

.bd {
  display: grid; grid-template-rows: auto 1fr;
  height: calc(100dvh - var(--st-bar-h));
  min-height: 520px;
}
/* Flex, not a 1fr/auto/1fr grid: .bd-tabs is display:none above 900px, which
   removes it as a GRID ITEM and slides the status pill into the middle column.
   With flex the two 1-flex ends still push apart when the middle is gone. */
.bd-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; height: 54px;
  border-bottom: 1px solid var(--rule); background: var(--card);
}
.bd-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
.bd-head-r { display: flex; justify-content: flex-end; flex: 1 1 0; }
.bd-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
}
.bd-title {
  font-family: var(--font-display); font-size: 0.98rem; font-weight: 600;
  letter-spacing: -0.012em; margin: 0; outline: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-state {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 0.82rem; color: var(--mute);
  padding: 6px 12px; border-radius: 999px; background: var(--panel);
}
.bd-state i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--warn);
  animation: st-pulse 1.5s var(--ease) infinite;
}
.bd-state.is-ready i { background: var(--up); animation: none; }
@keyframes st-pulse { 50% { opacity: 0.3; } }

/* The pane tabs only exist below 900px; above it both panes are visible. */
.bd-tabs { display: none; gap: 3px; padding: 3px; background: var(--panel); border-radius: 999px; }
.bd-tab {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; color: var(--mute);
  padding: 7px 16px; border-radius: 999px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.bd-tab.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 18, 19, 0.08); }

.bd-panes {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr);
  min-height: 0;
}

/* — conversation — */
.bd-chat {
  display: grid; grid-template-rows: 1fr auto; min-height: 0;
  background: var(--card); border-right: 1px solid var(--rule);
}
.bd-log {
  overflow-y: auto; padding: 28px 28px 8px;
  display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin;
}
.bd-msg { max-width: 62ch; animation: st-fade 340ms var(--ease-out) both; }
.bd-msg.user {
  align-self: flex-end;
  background: var(--panel); border-radius: 16px 16px 4px 16px;
  padding: 12px 16px;
}
.bd-msg.user p { margin: 0; font-family: var(--font-display); font-size: 0.96rem; line-height: 1.5; }
.bd-msg.bot p {
  margin: 0 0 10px; font-family: var(--font-display); font-size: 0.96rem;
  line-height: 1.55; color: var(--ink-soft);
}
.bd-msg.bot p:last-child { margin-bottom: 0; }

.bd-plan { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.bd-plan li {
  display: flex; align-items: center; gap: 11px; margin: 0;
  font-family: var(--font-display); font-size: 0.92rem; color: var(--mute);
  transition: color 260ms var(--ease);
}
.bd-plan li b {
  width: 17px; height: 17px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--rule);
  font-size: 0.62rem; color: transparent;
  transition: background 260ms var(--ease), border-color 260ms var(--ease), color 260ms var(--ease);
}
.bd-plan li.is-run b { border-color: var(--indigo); animation: st-pulse 1.3s var(--ease) infinite; }
.bd-plan li.is-run { color: var(--ink); }
.bd-plan li.is-done b { background: var(--ink); border-color: var(--ink); color: #FFF; }
.bd-plan li.is-done { color: var(--ink); }

/* the brief, read back at the top of the build */
.bd-brief {
  display: grid; gap: 7px; margin: 12px 0 14px;
  padding: 12px 14px; background: var(--panel); border-radius: 12px;
}
.bd-brief div { display: flex; gap: 12px; align-items: baseline; }
.bd-brief .k {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute);
  width: 64px; flex: 0 0 auto;
}
.bd-brief .v { font-family: var(--font-display); font-size: 0.9rem; color: var(--ink); min-width: 0; }

.bd-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.bd-typing i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--mute-soft);
  animation: st-bob 1.1s var(--ease) infinite;
}
.bd-typing i:nth-child(2) { animation-delay: 140ms; }
.bd-typing i:nth-child(3) { animation-delay: 280ms; }
@keyframes st-bob { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.bd-composer {
  display: flex; align-items: flex-end; gap: 10px;
  margin: 12px 20px 20px; padding: 12px 12px 12px 16px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.bd-composer:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(105, 90, 210, 0.1);
}
.bd-composer textarea {
  flex: 1 1 auto; min-width: 0; max-height: 140px;
  border: none; outline: none; background: none; resize: none;
  font-family: var(--font-display); font-size: 0.96rem; line-height: 1.5; color: var(--ink);
  padding: 6px 0;
}
.bd-composer textarea::placeholder { color: #9C9990; }
.bd-send {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--ink); color: #FFF;
  transition: background 140ms var(--ease), opacity 140ms var(--ease);
}
.bd-send svg { width: 15px; height: 15px; }
.bd-send:hover { background: var(--ink-soft); }
.bd-send:disabled { opacity: 0.22; pointer-events: none; }

/* — live preview — */
.bd-preview {
  display: grid; grid-template-rows: auto 1fr; min-height: 0;
  background: var(--bg);
}
.bd-preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 20px; height: 52px;
}
.bd-eyebrow {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--mute-soft);
}
.bd-sizes { display: flex; gap: 2px; padding: 3px; background: var(--panel); border-radius: 999px; }
.bd-size {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; color: var(--mute);
  padding: 6px 13px; border-radius: 999px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.bd-size.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 18, 19, 0.08); }

.bd-stage {
  display: grid; place-items: center; padding: 0 24px 32px;
  min-height: 0; overflow: hidden;
}

/* — the device — */
.phone {
  position: relative;
  width: min(298px, 100%);
  height: min(620px, 100%);
  aspect-ratio: 298 / 620;
  background: #0E0F11;
  border-radius: 44px;
  padding: 9px;
  box-shadow:
    0 0 0 1px rgba(17, 18, 19, 0.1),
    0 40px 80px -40px rgba(17, 18, 19, 0.55),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
  transition: width 420ms var(--ease-out), height 420ms var(--ease-out),
              border-radius 420ms var(--ease-out), aspect-ratio 420ms var(--ease-out),
              padding 420ms var(--ease-out);
}
.phone-island {
  position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 22px; border-radius: 999px; background: #0E0F11;
  z-index: 3; transition: opacity 200ms var(--ease);
}
/* the screen reads the chosen look's custom properties; without a data-look
   attribute every var() falls back to the site's own tokens */
.phone-screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 36px; background: var(--lv-bg, var(--card));
  display: grid; grid-template-rows: auto 1fr auto;
  transition: border-radius 420ms var(--ease-out);
}

/* desktop mode: the same app in a browser window */
.bd-stage.is-desktop .phone {
  width: min(100%, 720px); height: auto; aspect-ratio: 16 / 10;
  border-radius: 12px; padding: 6px;
}
.bd-stage.is-desktop .phone-island { opacity: 0; }
.bd-stage.is-desktop .phone-screen { border-radius: 8px; }
.bd-stage.is-desktop .ph-status { display: none; }
.bd-stage.is-desktop .ph-chrome { display: flex; }
.bd-stage.is-desktop .ph-tabbar { display: none; }
/* Not the phone layout stretched wide — a 16:10 frame is shorter than it is
   tall in phone terms, so a single column of full-width cards overflows and
   the last one gets guillotined. Two columns, header spanning. */
.bd-stage.is-desktop .ph-app {
  padding: 22px 26px; grid-template-columns: 1fr 1fr; gap: 14px;
}
.bd-stage.is-desktop .ph-h,
.bd-stage.is-desktop .ph-sub,
.bd-stage.is-desktop .ph-card.accent { grid-column: 1 / -1; }
.bd-stage.is-desktop .ph-card.accent { display: flex; align-items: baseline; gap: 14px; }
.bd-stage.is-desktop .ph-card.accent .ph-card-v { margin-top: 0; }

.ph-chrome {
  display: none; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-bottom: 1px solid var(--rule); background: var(--panel);
}
.ph-chrome i { width: 7px; height: 7px; border-radius: 50%; background: #DAD6CD; }
.ph-chrome span {
  margin-left: 10px; padding: 3px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--mute-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}

.ph-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 26px 6px;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; color: var(--lv-ink, var(--ink));
}
.ph-status-r { display: inline-flex; align-items: center; gap: 5px; }
.ph-sig, .ph-wifi, .ph-bat { display: block; background: var(--lv-ink, var(--ink)); border-radius: 1px; }
.ph-sig { width: 13px; height: 8px; clip-path: polygon(0 70%, 25% 70%, 25% 100%, 0 100%, 0 70%, 37% 45%, 62% 45%, 62% 100%, 37% 100%, 37% 45%, 75% 15%, 100% 15%, 100% 100%, 75% 100%); }
.ph-wifi { width: 10px; height: 8px; border-radius: 2px 2px 0 0; }
.ph-bat { width: 16px; height: 8px; border-radius: 2px; }

.ph-app {
  overflow: hidden; padding: 14px 18px;
  display: grid; align-content: start; gap: 12px;
}
.ph-boot {
  align-self: center; justify-self: center; text-align: center;
  display: grid; gap: 14px; place-items: center;
  grid-column: 1 / -1;
}
.ph-boot p {
  margin: 0; font-family: var(--font-display); font-size: 0.82rem; color: var(--mute);
}
.ph-boot-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  animation: st-breathe 1.7s var(--ease) infinite;
}
@keyframes st-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.88); opacity: 0.7; }
}

/* the scaffold the preview resolves to — every colour rides the look vars,
   falling back to the site's own tokens when no look is stamped */
.ph-h {
  font-family: var(--lv-font, var(--font-display)); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -0.02em; margin: 4px 0 0; color: var(--lv-ink, var(--ink));
  animation: st-fade 400ms var(--ease-out) both;
}
.ph-sub {
  font-family: var(--font-display); font-size: 0.74rem; color: var(--lv-mute, var(--mute));
  margin: -8px 0 2px;
  animation: st-fade 400ms 60ms var(--ease-out) both;
}
.ph-card {
  border: 1px solid var(--lv-rule, var(--rule)); border-radius: var(--lv-r, 13px); padding: 13px 14px;
  background: var(--lv-card, var(--card));
  animation: st-fade 460ms var(--ease-out) both;
}
.ph-card.accent {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  border-color: transparent; color: #FFF;
}
[data-look] .ph-card.accent { background: var(--lv-acc); color: var(--lv-acc-ink); }
.ph-card-k {
  font-family: var(--font-display); font-size: 0.63rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lv-mute, var(--mute-soft)); display: block;
}
.ph-card.accent .ph-card-k { color: rgba(255, 255, 255, 0.72); }
[data-look] .ph-card.accent .ph-card-k { color: var(--lv-acc-ink); opacity: 0.72; }
.ph-card-v {
  font-family: var(--lv-font, var(--font-display)); font-size: 1.32rem; font-weight: 500;
  letter-spacing: -0.03em; display: block; margin-top: 3px;
}
.ph-card-line { display: flex; align-items: center; gap: 9px; }
.ph-card-line + .ph-card-line { margin-top: 10px; }
.ph-tick {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--lv-rule, var(--rule));
}
.ph-tick.on { background: var(--lv-acc, var(--ink)); border-color: var(--lv-acc, var(--ink)); }
.ph-card-t { font-family: var(--font-display); font-size: 0.8rem; color: var(--lv-ink, var(--ink)); }
.ph-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: 10px; }
.ph-bars i {
  flex: 1 1 0; border-radius: 3px 3px 0 0; background: var(--lv-acc-soft, var(--indigo-soft));
  transform-origin: bottom; animation: st-grow 620ms var(--ease-out) both;
}
.ph-bars i:last-child { background: var(--lv-acc, var(--indigo)); }
@keyframes st-grow { from { transform: scaleY(0.05); } to { transform: scaleY(1); } }

.ph-tabbar {
  display: flex; align-items: center; justify-content: space-around;
  padding: 9px 0 16px; border-top: 1px solid var(--lv-rule, var(--rule)); background: var(--lv-card, var(--card));
}
.ph-tab {
  display: grid; justify-items: center; gap: 4px;
  font-family: var(--font-display); font-size: 0.6rem; color: var(--lv-mute, var(--mute-soft));
}
.ph-tab i { width: 15px; height: 15px; border-radius: 5px; background: var(--lv-rule, var(--panel-deep)); display: block; }
.ph-tab.is-on { color: var(--lv-ink, var(--ink)); }
.ph-tab.is-on i { background: var(--lv-acc, var(--ink)); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) {
  .bd-panes { grid-template-columns: 1fr; }
  .bd-tabs { display: flex; }
  .bd-chat { border-right: 0; }
  /* one pane at a time; the other is not just hidden but out of the tab order */
  .bd[data-pane="chat"] .bd-preview,
  .bd[data-pane="preview"] .bd-chat { display: none; }
  .bd-stage { padding-bottom: 24px; }
}
@media (max-width: 760px) {
  .st-fork { grid-template-columns: 1fr; gap: 14px; }
  .lk { --lk-w: 176px; }
  .st-in--look { text-align: left; }
  .st-actions--look, .lk-controls { justify-content: flex-start; }
  /* the art shrinks rather than the copy: on a phone the picture is the thing
     you scan, but it can't eat the whole screen or the second option falls
     below the fold and the fork stops reading as a fork */
  .st-pick-art { height: 118px; }
  .pa-win { left: 22px; top: 20px; }
  /* :not() is load-bearing — .st-screen--full.is-on has the same specificity as
     .st-screen.is-on, so an unqualified rule here wins on source order and
     re-pads the builder away from the viewport edges. */
  .st-screen.is-on:not(.st-screen--full) { padding: 28px var(--pad-x) 56px; align-items: start; }
  .st-h { margin-bottom: 26px; }
}
@media (max-width: 560px) {
  /* Three across doesn't fit a phone: at 44% basis the third tab orphans onto
     its own row, and hiding the labels to make them fit leaves three unlabelled
     icons on the most important choice on the screen. Stack them as full-width
     rows instead — same idiom as the fork's rows, and every label survives. */
  .st-methods { flex-direction: column; gap: 2px; padding: 8px; }
  .st-method { flex: 1 1 auto; justify-content: flex-start; padding: 12px 14px; }
  .st-method-body { padding: 20px; min-height: 0; }
  .st-stage { padding: 12px 12px 16px; border-radius: 22px; }
  .st-stage .st-works { margin: 16px 2px 2px; }
  /* the wordmark and the fill track were touching at 390px */
  .st-bar { padding-right: 14px; }
  .st-bar .mark-word { display: none; }
  .bd-head { padding: 0 12px; }
  .bd-head-r { display: none; }
  .bd-log { padding: 20px 18px 4px; }
  .bd-composer { margin: 10px 14px 14px; }
  .tk-composer { margin: 0; }
  .tk-log { padding-top: 20px; }
  .st-works { gap: 6px 12px; }
  .lk { --lk-w: 152px; }
  .lk-controls { gap: 10px; }
  .lk-cap { min-width: 0; flex: 1 1 auto; text-align: left; }
  .st-actions--look { flex-wrap: wrap; gap: 14px; }
}
/* (the ≤400px rule that hid .st-method labels was removed 2026-08-14 — the
   stacked strip above keeps every label at every width) */

/* ============================== A11Y ============================== */
@media (prefers-reduced-motion: reduce) {
  .st-screen.is-on > .st-in,
  .st-screen--full.is-on > .bd,
  .st-view, .st-found, .st-frow, .bd-msg, .tk-card,
  .ph-h, .ph-sub, .ph-card, .ph-bars i { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pa-caret, .bd-state i, .bd-plan li.is-run b, .ph-boot-mark, .st-spin, .bd-typing i, .st-mic.is-live { animation: none !important; }
  .st-pick, .phone, .st-prog i { transition-duration: 1ms !important; }
  .lk-card { transition-duration: 1ms !important; }
}

/* =====================================================================
   MOBILE PASS — 2026-08-14. Phone-only, additive.
   The composers are the important one: iOS Safari ZOOMS the whole page when
   a focused input is under 16px, and it does not zoom back out. That turns
   the first tap of the conversation into a broken-feeling page.
   ===================================================================== */
@media (max-width: 860px) {
  .bd-composer textarea,
  .tk-composer textarea,
  .st-prompt textarea,
  .st-field input { font-size: 16px; }

  /* both measured under 44px on the short side */
  .st-exit { min-height: 44px; display: inline-flex; align-items: center; }
  /* the wordmark is hidden below 560px, which left the logo a 36px-wide
     target — pad it back out rather than bring the word back */
  .st-bar .mark { min-height: 44px; align-items: center; padding: 0 10px; }
}