/* First-run onboarding mockups — shared styles.
   Tokens copied from dashboard/app/app.css (:root + .dark, 2026-11-02). Shell geometry from
   site-shell/top-bar.tsx, site-sidebar.tsx, sub-nav.tsx, app-shell.tsx. Fonts vendored locally (no CDN). */

@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: block; }

:root {
  --background:#faf9f7; --foreground:#1c1917; --card:#ffffff; --popover:#ffffff; --muted:#f4f3f0; --muted-foreground:#6f6760;
  --secondary:#efeeea; --secondary-foreground:#292524; --accent:#efeeea; --border:#e8e6e2; --input:#e1dfda;
  --destructive:#bb342a; --success:#4f7d5b; --success-muted:#eaf1ec; --success-muted-foreground:#3f6a4b;
  --warning-muted:#f6efe2; --warning-muted-foreground:#856023; --meter-track:#eeece8;
  --plan-gold:#8a6500; --plan-gold-ring:#e0b400;
  --publish:#1c1917; --publish-foreground:#ffffff; --publish-hover:#36312d;
  --primary:#ffcb05; --primary-foreground:#1c1917; --ring:#a67c00;
  --primary-15:rgba(255,203,5,.15); --primary-35:rgba(255,203,5,.35);
  --dotsy-yellow:#ffc700; --dotsy-ink:#17150f; --dotsy-pink:#eeb7c3; --dotsy-ground:#e8e2d6; --dotsy-slot:#f1eee7; --dotsy-frame:#e3ddd0; --dotsy-spark:#e0a800;
  --radius:.625rem; --topbar-row:48px; --sidebar-width:232px; --tabs-row:54px;
  --shadow-lg:0 10px 15px -3px rgba(28,25,23,.08),0 4px 6px -4px rgba(28,25,23,.08);
  --scrim:rgba(28,25,23,.30);
}
.dark {
  --background:#0a0a0b; --foreground:#ededed; --card:#141416; --popover:#161618; --muted:#1a1a1d; --muted-foreground:#8f8f96;
  --secondary:#202023; --secondary-foreground:#ededed; --accent:#202023; --border:#27272a; --input:#2c2c30;
  --destructive:#cf3f3f; --success:#6fae82; --success-muted:#16241b; --success-muted-foreground:#86c79a;
  --warning-muted:#241d10; --warning-muted-foreground:#d9b677; --meter-track:#27272a;
  --plan-gold:#f0cf6a; --plan-gold-ring:#c9a10a;
  --publish:#ededed; --publish-foreground:#0a0a0b; --publish-hover:#ffffff;
  --primary-15:rgba(255,203,5,.13); --primary-35:rgba(255,203,5,.30);
  --dotsy-yellow:#ffcb05; --dotsy-ink:#17150f; --dotsy-pink:#c49aa3; --dotsy-ground:#1d1d20; --dotsy-slot:#141416; --dotsy-frame:#2c2c30; --dotsy-spark:#ffcb05;
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.4);
  --scrim:rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--background); color: var(--foreground); font: 14px/1.5 "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.s14 { width: 14px; height: 14px; } .ic.s18 { width: 18px; height: 18px; } .ic.s20 { width: 20px; height: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted-foreground); }
.xs { font-size: 12px; line-height: 16px; } .sm { font-size: 14px; line-height: 20px; }
.row { display: flex; align-items: center; gap: 8px; } .grow { flex: 1; min-width: 0; } .wrap { flex-wrap: wrap; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }

/* ---------- stage: the mockup canvas (desktop fills the window; phone is a 375px column) ---------- */
.stage { min-height: 100vh; padding-bottom: 56px; }
body.shot .stage { padding-bottom: 0; }
.stage.phone { background: var(--muted); }
.stage.phone .app { width: 375px; margin: 0 auto; min-height: 100vh; border-inline: 1px solid var(--border); background: var(--background); }
.app { container-type: inline-size; container-name: app; min-height: calc(100vh - 56px); display: flex; flex-direction: column; }
body.shot .app { min-height: 100vh; }

/* ---------- top bar (48px, card, hairline) ---------- */
.topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-row); display: flex; align-items: center; gap: 4px;
  background: var(--card); border-bottom: 1px solid var(--border); padding: 0 16px; }
.glyph-link { display: flex; padding: 3px; border-radius: 6px; }
.glyph { width: 30px; height: 30px; display: block; }
.glyph rect { fill: var(--primary); }
.slash { width: 16px; height: 16px; stroke: var(--input); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; background: none; border-radius: 6px;
  font-size: 14px; font-weight: 500; cursor: pointer; }
.crumb:hover { background: var(--accent); }
.itile { width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; letter-spacing: .02em; background: var(--foreground); color: var(--background); }
.jump { margin-left: 12px; display: inline-flex; align-items: center; gap: 8px; height: 30px; width: 224px; padding: 0 6px 0 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--muted-foreground); font-size: 13px; cursor: pointer; }
.jump span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--card); font: 11px "JetBrains Mono", monospace; }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted-foreground); cursor: pointer; position: relative; }
.iconbtn:hover { background: var(--accent); color: var(--foreground); }
.menu-btn { display: none; }

/* ---------- body: sidebar + page column ---------- */
.shell { display: flex; flex: 1; min-height: 0; }
.sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: var(--topbar-row); height: calc(100vh - var(--topbar-row) - 56px); }
body.shot .sidebar { position: relative; top: 0; height: auto; min-height: calc(100vh - var(--topbar-row)); align-self: stretch; }
.sidebar nav { flex: 1; display: flex; flex-direction: column; padding: 8px; gap: 2px; }
.nav { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-radius: 6px; font-size: 14px; font-weight: 500;
  letter-spacing: -.01em; color: var(--muted-foreground); text-decoration: none; }
.nav:hover { background: var(--accent); color: var(--foreground); }
.nav.on { background: var(--primary-15); color: var(--foreground); }
.nav .trail { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.nav-bottom { margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.side-foot { border-top: 1px solid var(--border); padding: 8px; display: flex; align-items: center; gap: 8px; }
.acct { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; min-width: 0; }
.avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--secondary); color: var(--secondary-foreground);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.acct b { display: block; font-size: 13px; font-weight: 500; line-height: 16px; } .acct small { display: block; font-size: 12px; color: var(--muted-foreground); line-height: 16px; }

.main { flex: 1; min-width: 0; padding: 0 32px 48px; }
.col { max-width: 1272px; margin: 0 auto; }
.tabs-row { position: sticky; top: var(--topbar-row); z-index: 20; background: var(--background); min-height: var(--tabs-row);
  display: flex; align-items: flex-end; gap: 16px; padding-top: 8px; }
.tabs-row h1 { position: relative; margin: 0; padding-bottom: 10px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.tabs-row h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 16px; height: 3px; border-radius: 2px; background: var(--primary); }
.intro { margin: 8px 0 24px; font-size: 14px; color: var(--muted-foreground); }

/* ---------- primitives: buttons, cards, badges ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 6px;
  font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: background-color .15s, opacity .15s, transform .15s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--primary); color: var(--primary-foreground); }
.btn.primary:hover { opacity: .9; }
.btn.publish { background: var(--publish); color: var(--publish-foreground); }
.btn.secondary { background: var(--card); border-color: var(--border); color: var(--foreground); }
.btn.secondary:hover, .btn.ghost:hover { background: var(--accent); }
.btn.ghost { background: transparent; color: var(--foreground); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.xs { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.link { background: none; border: 0; padding: 0; color: var(--muted-foreground); font-size: 13px; cursor: pointer; text-decoration: none; border-radius: 3px; }
.link:hover { color: var(--foreground); text-decoration: underline; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--secondary); color: var(--secondary-foreground); white-space: nowrap; }
.badge.ok { background: var(--success-muted); color: var(--success-muted-foreground); }
.badge.core { background: transparent; color: var(--plan-gold); box-shadow: inset 0 0 0 1px var(--plan-gold-ring); }
.h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.015em; }
.h3 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; }
code.url { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--muted); font: 12.5px "JetBrains Mono", monospace; color: var(--foreground); word-break: break-all; }

/* ---------- client tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, background-color .15s, transform .15s; }
.tile-btn:hover { border-color: var(--input); background: var(--muted); }
.tile-btn:active { transform: scale(.98); }
.tile-btn.on { border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); }
.tile-ico { width: 36px; height: 36px; border-radius: 8px; background: var(--muted); display: inline-flex; align-items: center; justify-content: center; color: var(--foreground); }
.tile-btn:hover .tile-ico { background: var(--card); }
.tile-btn b { display: block; font-size: 14px; font-weight: 600; line-height: 20px; }
.tile-btn small { display: block; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* ---------- prompt cards ---------- */
.prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prompt { display: flex; flex-direction: column; gap: 8px; padding: 14px; text-align: left; cursor: pointer; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, background-color .15s; }
.prompt:hover { border-color: var(--input); background: var(--muted); }
.prompt .pt { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prompt .eyebrow { font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.prompt q { quotes: "“" "”"; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--foreground); flex: 1; }
.prompt .act { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.prompt.copied { border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
.prompt.copied .act { color: var(--success-muted-foreground); }
.prompts.quiet .prompt { min-height: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
.chip:hover { background: var(--muted); border-color: var(--input); }
.chip .ic { color: var(--muted-foreground); }
.chip.copied { border-color: var(--success); color: var(--success-muted-foreground); }

/* ---------- stepper (option A) ---------- */
.gs { padding: 0; overflow: hidden; }
.gs-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.gs-head p { margin: 2px 0 0; font-size: 14px; color: var(--muted-foreground); }
.steps { list-style: none; margin: 0; padding: 8px 24px 24px; }
.step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; padding-top: 16px; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 13.5px; top: 48px; bottom: -14px; width: 1px; background: var(--border); }
.num { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  border: 1px solid var(--input); color: var(--muted-foreground); background: var(--card); position: relative; z-index: 1; }
.step.active .num { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.step.done .num { background: var(--success); color: var(--card); border-color: var(--success); }
.step-title { display: flex; align-items: center; gap: 10px; min-height: 28px; flex-wrap: wrap; }
.step-title .h3 { font-size: 15px; }
.step.upcoming .step-title .h3 { color: var(--muted-foreground); }
.step-desc { margin: 2px 0 14px; font-size: 14px; color: var(--muted-foreground); }
.step.done .step-desc { margin-bottom: 4px; }
.step-body { padding-bottom: 4px; }

.url-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted-foreground); }

/* waiting panel */
.waitbox { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--muted); }
.waitbox .mascot-wrap { flex-shrink: 0; }
.waitbox ol { margin: 10px 0 12px; padding-left: 20px; font-size: 13px; color: var(--muted-foreground); }
.waitbox ol li { margin: 3px 0; } .waitbox ol b { color: var(--foreground); font-weight: 500; }
.waiting-line { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--muted-foreground); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

/* connected chip line */
.okline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.okdot { width: 20px; height: 20px; border-radius: 999px; background: var(--success); color: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.okdot .ic { width: 12px; height: 12px; stroke-width: 3; }

/* paste guide */
.guide { border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.guide-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--muted); }
.guide-body { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.guide ol { margin: 0; padding-left: 20px; font-size: 13.5px; } .guide li { margin: 0 0 8px; } .guide li span { color: var(--muted-foreground); }
pre.json { margin: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--muted); font: 12.5px/1.6 "JetBrains Mono", monospace; overflow: auto; }
.json-wrap { position: relative; }
.json-wrap .btn { position: absolute; top: 8px; right: 8px; }

/* slot + site card */
.slot { border: 1px dashed var(--input); border-radius: 12px; background: var(--card); display: flex; align-items: center; gap: 16px; padding: 16px; }
.slot .ghost-card { width: 168px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; background: var(--card); }
.ghost-card .gp { aspect-ratio: 16/9; background: var(--muted); }
.ghost-card .gl { height: 8px; margin: 10px 10px 0; border-radius: 4px; background: var(--muted); width: 60%; }
.ghost-card .gl.s { width: 80%; margin-bottom: 10px; height: 6px; }
.slot.live .gp, .slot.live .gl { animation: shimmer 1.6s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.sitecard { width: 288px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; display: block; }
.sitecard:hover { border-color: var(--input); }
.sc-prev { position: relative; aspect-ratio: 16/9; background: var(--muted); border-bottom: 1px solid var(--border); overflow: hidden; box-shadow: inset 0 0 0 1px var(--primary-35); }
.sc-prev svg.thumb { width: 100%; height: 100%; display: block; opacity: .9; }
.sc-badge { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); font-size: 12px; font-weight: 600; }
.sc-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.sc-meta .t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.hollow { width: 10px; height: 10px; border-radius: 999px; border: 1px solid var(--muted-foreground); background: var(--background); flex-shrink: 0; }
.sc-meta .h { font: 12px "JetBrains Mono", monospace; color: var(--muted-foreground); }
.slide-in { animation: slidein .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes slidein { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.celebrate { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.celebrate-copy { flex: 1; min-width: 240px; }
.celebrate-copy h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.celebrate-copy p { margin: 4px 0 16px; color: var(--muted-foreground); }

/* checklist */
.check { padding: 0; margin-bottom: 32px; }
.check-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; }
.meter { height: 6px; border-radius: 999px; background: var(--meter-track); overflow: hidden; width: 120px; }
.meter i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.check ul { list-style: none; margin: 0; padding: 0 8px 8px; }
.check li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border); min-height: 56px; }
.check li:first-child { border-top: 0; }
.tick { width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--input); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.tick.on { background: var(--success); border-color: var(--success); color: var(--card); }
.tick.on .ic { width: 12px; height: 12px; stroke-width: 3; }
.check li .what { flex: 1; min-width: 0; }
.check li .what b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.check li.done .what b { color: var(--muted-foreground); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--input); }
.check li .what small { display: block; font-size: 13px; color: var(--muted-foreground); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid .sitecard { width: auto; }
.section-h { margin: 0 0 16px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }

/* empty state (components/empty-state.tsx) */
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; background: var(--card); }
.empty .ic { width: 32px; height: 32px; color: var(--muted-foreground); stroke-width: 1.5; }
.empty h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.empty p { margin: 4px auto 0; max-width: 384px; font-size: 14px; color: var(--muted-foreground); }
.empty.compact { padding: 28px 24px; flex-direction: row; justify-content: center; text-align: left; }
.empty.compact .ic { width: 24px; height: 24px; }

/* toast (components/ui/toast.tsx) */
.toast { position: fixed; right: 20px; bottom: 76px; z-index: 70; display: flex; align-items: center; gap: 12px; width: 360px; max-width: calc(100vw - 32px);
  padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--popover); box-shadow: var(--shadow-lg); animation: toastin .25s ease-out both; }
body.shot .toast { bottom: 20px; }
body.shot.phone-shot .toast { display: none; }
.toast .tb { width: 28px; height: 28px; border-radius: 999px; background: var(--success-muted); color: var(--success-muted-foreground); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.toast p { margin: 0; } .toast .tt { font-size: 14px; font-weight: 500; } .toast .td { font-size: 12px; color: var(--muted-foreground); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- mascot (geometry copied from components/dotsy/dotsy-mascot.tsx; colours from app.css) ---------- */
.mascot { display: block; overflow: visible; }
.mascot * { transform-box: view-box; }
.m-body, .m-tile { fill: var(--dotsy-yellow); }
.m-eye, .m-smile { fill: var(--dotsy-ink); }
.m-shadow, .m-ground { fill: var(--dotsy-ground); }
.m-slot { fill: var(--dotsy-slot); }
.m-frame { fill: none; stroke: var(--dotsy-frame); stroke-width: 3; }
.m-sparks { fill: none; stroke: var(--dotsy-spark); stroke-width: 5; stroke-linecap: round; }
.pose-idle .m-actor { animation: hop 1.9s cubic-bezier(.3, .7, .4, 1) infinite; transform-origin: 130px 197px; }
.pose-look .m-actor { animation: bob 2.4s ease-in-out infinite; transform-origin: 130px 197px; }
.pose-look .m-eye { animation: glance 3.2s ease-in-out infinite; }
.pose-celebrate .m-actor { animation: jumpup .9s cubic-bezier(.3, .7, .4, 1) both; transform-origin: 130px 197px; }
.pose-celebrate .m-sparks { animation: spark .7s .35s ease-out both; transform-origin: 130px 132px; }
.pose-celebrate .m-conf { animation: conf .9s .3s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes hop { 0%, 55%, 100% { transform: none; } 20% { transform: translateY(-14px) scaleY(1.03); } 40% { transform: translateY(0) scale(1.05, .94); } }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes glance { 0%, 40% { transform: translate(13px, -8px); } 50%, 90% { transform: translate(15px, -3px); } 100% { transform: translate(13px, -8px); } }
@keyframes jumpup { 0% { transform: translateY(0) scale(1.06, .92); } 35% { transform: translateY(-34px) scale(.97, 1.04); } 70% { transform: translateY(0) scale(1.06, .93); } 100% { transform: none; } }
@keyframes spark { from { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes conf { from { opacity: 0; transform: translate(0, 40px) scale(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body.shot *, body.shot *::before, body.shot *::after { animation-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }

/* ---------- mockup control bar (not product UI) ---------- */
.ctl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; height: 56px; display: flex; align-items: center; gap: 6px; padding: 0 16px;
  background: #111113; color: #ededed; font: 12.5px "Inter", system-ui, sans-serif; overflow-x: auto; border-top: 1px solid #2c2c30; }
.ctl .lbl { font-weight: 600; margin-right: 8px; white-space: nowrap; }
.ctl .lbl a { color: #a8a8b0; text-decoration: none; font-weight: 500; margin-right: 6px; }
.ctl button { height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid #2c2c30; background: #1a1a1d; color: #ededed; cursor: pointer; white-space: nowrap; font: 500 12.5px "Inter", sans-serif; }
.ctl button[aria-pressed="true"] { background: #ffcb05; color: #1c1917; border-color: #ffcb05; }
.ctl .sep { width: 1px; height: 24px; background: #2c2c30; margin: 0 6px; flex-shrink: 0; }
body.shot .ctl { display: none; }

/* ---------- option B: full-screen wizard ---------- */
.wz { min-height: calc(100vh - 56px); display: flex; flex-direction: column; background: var(--background); }
body.shot .wz { min-height: 100vh; }
.wz-top { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 24px; }
.wz-top > :first-child, .wz-top > :last-child { width: 104px; flex-shrink: 0; }
.wz-top > :last-child { text-align: right; }
.wz-progress { flex: 1; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.wz-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wz-seg i { height: 4px; border-radius: 999px; background: var(--meter-track); }
.wz-seg i.on { background: var(--primary); }
.wz-seg i.done { background: var(--foreground); }
.wz-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 12px; color: var(--muted-foreground); }
.wz-labels .cur { color: var(--foreground); font-weight: 600; }
.wz-main { flex: 1; display: flex; justify-content: center; padding: 32px 24px 48px; }
.wz-col { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: stretch; }
.wz-col > .mascot-wrap { align-self: center; margin-bottom: 8px; }
.wz h1 { margin: 0; text-align: center; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.025em; }
.wz .lead { margin: 8px auto 28px; max-width: 460px; text-align: center; font-size: 16px; line-height: 24px; color: var(--muted-foreground); }
.wz .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wz .tile-btn { flex-direction: row; align-items: center; padding: 16px; }
.wz .prompts { grid-template-columns: 1fr; }
.wz .prompt { min-height: 0; flex-direction: row; align-items: center; gap: 14px; }
.wz .prompt .pt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wz-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; }
.wz .center { text-align: center; }
.wz .url-row { justify-content: center; }

/* ---------- option C: compact ---------- */
.cc { display: flex; gap: 28px; align-items: center; padding: 24px 28px; }
.cc-copy { flex: 1; min-width: 0; }
.cc-copy h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.cc-copy > p { margin: 4px 0 16px; color: var(--muted-foreground); max-width: 520px; }
.cc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.okbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.then { margin: 20px 0 10px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }

/* ---------- phone layout (container query: works in the 375px phone column and in a 375px viewport) ---------- */
@container app (max-width: 767px) {
  .sidebar, .jump span, .jump kbd, .slash { display: none; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 8px 0 4px; }
  .jump { width: 32px; height: 32px; padding: 0; justify-content: center; border: 0; background: transparent; margin-left: 0; }
  .main { padding: 0 16px 32px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .prompts { grid-template-columns: 1fr; }
  .prompt { min-height: 0; }
  .gs-head { padding: 16px; } .gs-head .mascot-wrap { display: none; }
  .steps { padding: 4px 16px 16px; }
  .step { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; }
  .num { width: 24px; height: 24px; font-size: 12px; }
  .step:not(:last-child)::before { left: 11.5px; top: 44px; }
  .slot { flex-direction: column; align-items: flex-start; } .slot .ghost-card { width: 100%; }
  .sitecard { width: 100%; }
  .guide-body { grid-template-columns: 1fr; }
  .waitbox { flex-direction: column; gap: 8px; }
  .grid { grid-template-columns: 1fr; }
  .check li { flex-wrap: wrap; } .check li .btn { margin-left: 34px; }
  .check-head .meter { display: none; }
  .toast { right: 8px; left: 8px; width: auto; }
  .wz-top { padding: 0 12px; height: 56px; gap: 10px; } .wz-labels { display: none; }
  .wz-main { padding: 16px 16px 32px; }
  .wz h1 { font-size: 24px; line-height: 32px; } .wz .lead { font-size: 15px; margin-bottom: 20px; }
  .wz .tiles { grid-template-columns: 1fr; }
  .cc { flex-direction: column-reverse; align-items: flex-start; padding: 20px; gap: 8px; }
  .cc .mascot-wrap { align-self: center; }
  .cc .mascot { width: 180px; height: auto; }
  .cc-btns .btn { flex: 1 1 calc(50% - 4px); }
  .celebrate { gap: 12px; }
  .empty.compact { flex-direction: column; text-align: center; }
}
body.phone-shot .toast { right: calc(50% - 179px); left: auto; width: 358px; max-width: none; }

/* ---------- revision 2: welcome questions (W-welcome.html) ---------- */
.wz.w .wz-top > :first-child, .wz.w .wz-top > :last-child { width: 200px; }
.wz-dots { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; }
.wz-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--meter-track); transition: width .2s, background-color .2s; }
.wz-dots i.done { background: var(--foreground); }
.wz-dots i.on { width: 24px; background: var(--primary); }
.wz .eyebrow-q { margin: 0 0 8px; text-align: center; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.wz .hello { margin: 0 0 4px; text-align: center; font-size: 15px; font-weight: 500; }
.qtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qtiles.one { grid-template-columns: 1fr; }
.qtiles .wide { grid-column: 1 / -1; }
.qtile { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, background-color .15s, transform .15s; }
.qtile:hover { border-color: var(--input); background: var(--muted); }
.qtile:active { transform: scale(.98); }
.qtile .tile-ico { flex-shrink: 0; }
.qtile b { display: block; font-size: 14px; font-weight: 600; line-height: 20px; }
.qtile small { display: block; font-size: 12.5px; line-height: 16px; color: var(--muted-foreground); }
.qtile.on { border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); }
.qtile.on .tile-ico { background: var(--primary); color: var(--primary-foreground); }
.qtile.quiet { border-style: dashed; background: transparent; }
.qtile.quiet.on { border-style: solid; background: var(--card); }
.field { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--muted-foreground); }
.input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--input); border-radius: 6px; background: var(--background);
  font: 14px "Inter", sans-serif; color: var(--foreground); }
.input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--primary-35); }
.field .help { margin: 6px 0 0; font-size: 12.5px; color: var(--muted-foreground); display: flex; gap: 6px; align-items: center; }
.field-row { display: flex; gap: 8px; align-items: center; }
.field-row .input { flex: 1; min-width: 0; }
.wz-foot.q { margin-top: 24px; }
.wz-foot .ghost-space { width: 1px; }

/* ---------- revision 2: option A reacts to answers ---------- */
.prompt .eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 500;
  background: var(--primary-15); color: var(--foreground); }
.tag .ic { width: 11px; height: 11px; }
.prompt.filled { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary-35); }
.tile-btn .your { display: inline-flex; margin-top: 4px; }
.said { display: inline-flex; align-items: center; gap: 6px; }
.getai { display: flex; flex-direction: column; gap: 12px; }
.getai .why { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--muted); font-size: 13.5px; color: var(--foreground); }
.getai .why b { font-weight: 600; }
.aipick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aicard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.aicard.rec { border-color: var(--foreground); box-shadow: inset 0 0 0 1px var(--foreground); }
.aicard .top { display: flex; align-items: center; gap: 10px; }
.aicard p { margin: 0; font-size: 13px; color: var(--muted-foreground); flex: 1; }
.aicard .btn { align-self: flex-start; }
.then-steps { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--muted-foreground); }
.then-steps li { margin: 2px 0; } .then-steps b { color: var(--foreground); font-weight: 500; }
.notify { display: flex; align-items: flex-start; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); cursor: pointer; }
.notify input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--foreground); flex-shrink: 0; }
.notify b { display: block; font-size: 13.5px; font-weight: 500; } .notify small { display: block; font-size: 12.5px; color: var(--muted-foreground); }
.ctl .ans { color: #a8a8b0; white-space: nowrap; margin-right: 2px; }

@container app (max-width: 767px) {
  .wz.w .wz-top > :first-child { width: auto; }
  .wz.w .wz-top > :last-child { width: auto; }
  .qtiles { grid-template-columns: 1fr; }
  .aipick { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; align-items: stretch; }
}
.step-title + .step-body { margin-top: 12px; }
@container app (max-width: 767px) { .check li .what { flex: 1 1 calc(100% - 34px); } .check li .what b { flex-wrap: wrap; } }