/*
 * The onboarding Studio (workspaces/studio, layout "studio"): Balzac reads the
 * visitor's website, finds competitors and keywords, plans articles and writes
 * the first one live. Always dark, in the "Night" look of hirebalzac.ai.
 *
 * Every rule is scoped under .studio / .studio-body because Propshaft links all
 * stylesheets on every page. Colors are local tokens, not the gray palette, so
 * dark-mode.css doesn't touch them. The tokens are shared with the sign-in
 * pages (.auth, auth.css), the step between hirebalzac.ai and the Studio.
 */

.studio-body, .auth-body { background: #0b0910; margin: 0; }

.studio, .auth {
  --night-0: #0b0910;
  --night-1: #110d18;
  --night-2: #19141f;
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);
  --fg: #ffffff;
  --fg-2: rgba(240, 232, 248, 0.72);
  --fg-3: rgba(240, 232, 248, 0.46);
  --ember: #ff5a3c;
  --amber: #ffa552;
  --gold: #ffe0b5;
  --ok: #34d399;
  --sheen: linear-gradient(95deg, #ffe0b5 0%, #ffa552 42%, #ff5a3c 100%);
  --paper: #ffffff;
  --ink: #16121c;
  --ink-2: #5d5667;
  --ink-3: #958d9f;
  --brand: #ff5a3c;
  --f-display: 'Wix Madefor Display', 'Inter', system-ui, sans-serif;
  --f-body: 'Wix Madefor Text', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.studio {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 0 clamp(16px, 2.4vw, 32px) 20px;
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  color-scheme: dark;
}
@media (min-width: 1100px) { .studio { height: 100dvh; } }
.studio [hidden] { display: none !important; }
:where(.studio) a { color: inherit; text-decoration: none; }
.studio img { max-width: 100%; }
.studio ::selection { background: var(--ember); color: #fff; }
.studio :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 8px; }

.studio .sheen, .auth .sheen {
  background: var(--sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.st-glow {
  position: absolute; inset: -20% -10% auto; height: 80%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 45% at 30% 20%, rgba(255, 106, 61, 0.16), transparent 70%),
    radial-gradient(35% 40% at 80% 10%, rgba(255, 165, 82, 0.10), transparent 70%);
  animation: st-breathe 9s ease-in-out infinite alternate;
}
.st-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.studio > *:not(.st-glow):not(.st-grain) { position: relative; z-index: 1; }
.studio > .st-glow { opacity: 0.5; }

/* ── Top bar ── */
.st-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 56px; }
.st-logo { justify-self: start; display: flex; color: #fff; opacity: 0.92; }
.st-site { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.st-site img { border-radius: 4px; }
.st-domain { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-auto { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--hair-2); font-size: 12.5px; color: var(--fg-3); white-space: nowrap; }
.st-auto i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); animation: st-ping 2.4s ease-out infinite; }
.st-clock { justify-self: end; display: flex; align-items: baseline; gap: 12px; }
.st-time { font-family: var(--f-mono); font-size: 13.5px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.st-clock small { font-size: 12.5px; color: var(--fg-3); }

/* ── Steps: a slim segmented bar, results under each finished step ── */
.st-steps { list-style: none; margin: 2px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.st-steps li { display: grid; gap: 7px; min-width: 0; }
.st-steps .seg { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.st-steps .seg i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--ember); transition: width 0.8s var(--ease); }
.st-steps li.ok .seg i { width: 100%; background: linear-gradient(90deg, #ff7a52, var(--amber)); }
.st-steps li.live .seg i { width: 38%; background: linear-gradient(90deg, transparent, var(--ember), transparent); animation: st-indet 1.5s ease-in-out infinite; }
.st-steps li.live.err .seg i { width: 100%; background: #f87171; opacity: 0.75; animation: none; }
.st-steps .lbl, .st-steps .res { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-steps .lbl { font-size: 12.5px; font-weight: 550; color: var(--fg-3); transition: color 0.4s; }
.st-steps li.ok .lbl { color: var(--fg-2); }
.st-steps li.live .lbl { color: #fff; }
.st-steps .res { min-height: 1.3em; margin-top: -4px; font-style: normal; font-family: var(--f-mono); font-size: 11.5px; color: var(--fg-3); }
.st-steps li.ok .res { color: var(--amber); }

/* ── Main ── */
.st-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; min-height: 0; }
.st-stage {
  position: relative; min-height: 540px; overflow: hidden; border-radius: 20px;
  background: rgba(255, 255, 255, 0.022); border: 1px solid var(--hair);
}
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 24px 28px 56px; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px); filter: blur(4px);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), filter 0.7s var(--ease), visibility 0s 0.8s;
}
.scene.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; filter: none; transition-delay: 0.15s, 0.15s, 0.15s, 0s; }
.scene.is-gone { transform: translateY(-10px); }
.sc-head { flex: none; }
.sc-kick { margin: 0 0 6px; font-family: var(--f-mono); font-size: 12px; color: var(--fg-3); }
.sc-title {
  margin: 0; font-family: var(--f-display); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15;
  font-size: clamp(20px, 1.7vw, 26px); text-wrap: balance; overflow-wrap: anywhere;
}

.st-next {
  position: absolute; left: 28px; bottom: 18px; right: 28px; margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12.5px; color: var(--fg-3);
  transition: opacity 0.4s;
}
.st-next.is-quiet { opacity: 0; }
.st-next.is-error { color: #fca5a5; }
.st-next.is-error .spin { border-top-color: #f87171; }
.spin {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14); border-top-color: var(--ember);
  animation: st-spin 0.8s linear infinite;
}

/* ── 1. Scan ── */
.browser {
  flex: 1; min-height: 0; margin-top: 22px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: #14101a; border: 1px solid var(--hair-2);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.br-bar { flex: none; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--hair); }
.br-bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.br-url {
  display: flex; align-items: center; gap: 7px; margin: 0 auto; padding: 4px 14px; min-width: 40%;
  border-radius: 8px; background: rgba(255, 255, 255, 0.06); font-family: var(--f-mono); font-size: 12.5px; color: var(--fg-2);
}
.br-url svg { width: 12px; height: 12px; color: var(--ok); flex: none; }
.br-url span::after { content: ''; display: inline-block; width: 1px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--amber); animation: st-blink 1s steps(2) infinite; }
.br-view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0f0c14; }
.br-skel { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; transition: opacity 0.6s; }
.br-fav { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 10px; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.03), 0 0 60px rgba(255, 106, 61, 0.45); animation: st-float 3s ease-in-out infinite; }
.br-skel span { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.12), rgba(255,255,255,0.05)); background-size: 200% 100%; animation: st-shimmer 1.6s linear infinite; }
.br-skel span:nth-of-type(1) { width: 280px; height: 16px; }
.br-skel span:nth-of-type(2) { width: 220px; }
.br-skel span:nth-of-type(3) { width: 250px; }
.br-skel span:nth-of-type(4) { width: 160px; }
.br-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; filter: blur(18px) saturate(1.3); transform: scale(1.04);
  transition: opacity 1.2s var(--ease), filter 1.6s var(--ease), transform 2s var(--ease);
}
.br-shot.on { opacity: 1; filter: none; transform: none; }
.br-view.has-shot .br-skel { opacity: 0; }
.br-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: linear-gradient(rgba(255, 140, 100, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 140, 100, 0.09) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.br-beam {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(255, 90, 60, 0.10) 46%, rgba(255, 165, 82, 0.42) 49.5%, #ffe0b5 50%, transparent 50.25%, transparent 100%);
  background-size: 100% 200%;
  animation: st-beam 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.studio.is-calm .br-beam { animation-duration: 5s; opacity: 0.6; }
.br-tags { position: absolute; inset: 0; pointer-events: none; }
.br-tag {
  position: absolute; display: flex; align-items: center; gap: 7px; max-width: 46%;
  padding: 7px 11px 7px 9px; border-radius: 11px;
  background: rgba(17, 13, 24, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.85);
  font-size: 12.5px; font-weight: 550; color: #fff;
  opacity: 0; transform: translate(-50%, -50%) scale(0.6);
  animation: st-pop 0.6s var(--pop) forwards;
}
.br-tag i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.br-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-tag small { font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--amber); margin-right: 2px; }

/* ── 2. Understand ── */
.biz { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; align-content: start; }
.biz-card {
  padding: 22px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--hair-2);
}
.biz-id { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.biz-id img { border-radius: 12px; background: #fff; padding: 4px; }
.biz-id strong { display: block; font-family: var(--f-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow-wrap: anywhere; }
.biz-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-2); }
.pill { display: inline-flex; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--gold); background: rgba(255, 106, 61, 0.14); border: 1px solid rgba(255, 140, 100, 0.3); }
.pill:empty { display: none; }
.swatch { display: grid; justify-items: center; gap: 4px; animation: st-pop-in 0.6s var(--pop) both; }
.swatch i { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 0 26px var(--brand); }
.swatch span { font-family: var(--f-mono); font-size: 11px; color: var(--fg-2); }
.biz-desc { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg-2); min-height: 3em; }
.biz-aud { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--fg-2); }
.biz-aud b { display: block; margin-bottom: 2px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.biz-cols { display: grid; gap: 18px; align-content: start; min-height: 0; overflow: hidden; mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.biz-cols h3 { margin: 0 0 10px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  max-width: 100%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; color: #fff;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair-2);
  animation: st-chip 0.6s var(--ease) both;
}
.chips-pain li { border-color: rgba(255, 106, 61, 0.35); background: rgba(255, 90, 60, 0.07); }

/* ── 3. Competitors ── */
.radar {
  position: relative; flex: 1; min-height: 0; max-height: 460px; align-self: center; aspect-ratio: 1; max-width: 100%; margin: auto 0;
}
.radar .ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--hair-2); transform: translate(-50%, -50%); }
.radar .r1 { width: 36%; height: 36%; }
.radar .r2 { width: 68%; height: 68%; border-style: dashed; }
.radar .r3 { width: 100%; height: 100%; }
.radar .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 90, 60, 0.16), rgba(255, 90, 60, 0.0) 60deg, transparent 360deg);
  mask-image: radial-gradient(circle, #000 0 69%, transparent 70%);
  animation: st-spin 4.5s linear infinite;
}
.radar .you {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px;
}
.radar .you img { width: 56px; height: 56px; padding: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 106, 61, 0.18), 0 0 26px rgba(255, 106, 61, 0.35); }
.radar .you b { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--ember); }
.rival { position: absolute; display: grid; justify-items: center; gap: 5px; width: 140px; transform: translate(-50%, -50%); text-align: center; animation: st-pop-in 0.7s var(--pop) both; }
.rival img { width: 40px; height: 40px; padding: 7px; border-radius: 50%; background: #fff; box-shadow: 0 8px 26px -8px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(255, 255, 255, 0.06); }
.rival strong { font-size: 13px; font-weight: 700; line-height: 1.2; }
.rival span { font-family: var(--f-mono); font-size: 11px; color: var(--fg-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rival-line { position: absolute; left: 50%; top: 50%; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 165, 82, 0.6), rgba(255, 165, 82, 0.05)); animation: st-grow 0.8s var(--ease) both; }
.radar-empty { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); margin: 0; text-align: center; font-size: 15px; color: var(--fg-2); white-space: nowrap; }

/* ── 4. Keywords ── */
.kw { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 18px; }
.kw-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 16px; }
.kw-big strong { font-family: var(--f-display); font-size: clamp(30px, 2.8vw, 42px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--sheen); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.kw-big span { font-size: 14.5px; color: var(--fg-2); }
.kw-big b { color: #fff; }
.kw-head, .kw-list li { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.5fr) 100px 110px; align-items: center; gap: 14px; }
.kw-head { padding: 0 4px 8px; border-bottom: 1px solid var(--hair); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.kw-list { list-style: none; margin: 0; padding: 0; overflow: hidden; mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.kw-list li { padding: 10px 4px; border-bottom: 1px solid var(--hair); animation: st-row 0.55s var(--ease) both; }
.kw-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-vol { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.kw-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.kw-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--sheen); box-shadow: 0 0 12px rgba(255, 106, 61, 0.6); transition: width 1.2s var(--ease) 0.2s; }
.kw-vol b, .kw-cpc { font-family: var(--f-mono); font-size: 13px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.kw-cpc { color: var(--gold); }
.kd { justify-self: start; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.kd-easy { color: #6ee7b7; background: rgba(52, 211, 153, 0.12); }
.kd-medium { color: #fcd34d; background: rgba(252, 211, 77, 0.12); }
.kd-hard { color: #fdba74; background: rgba(251, 146, 60, 0.14); }
.kd-vhard { color: #fca5a5; background: rgba(248, 113, 113, 0.14); }
.kd-na { color: var(--fg-3); background: rgba(255, 255, 255, 0.05); }

/* ── 5. Ideas ── */
.ideas { flex: 1; min-height: 0; margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: min-content; gap: 12px; overflow: hidden; align-content: start; padding: 6px 4px; mask-image: linear-gradient(to bottom, #000 85%, transparent); }
.idea {
  position: relative; display: grid; align-content: start; gap: 8px; min-height: 128px; padding: 15px 16px;
  border-radius: 16px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--hair-2);
  animation: st-drop 0.7s var(--pop) both;
  transition: transform 0.6s var(--pop), border-color 0.4s, box-shadow 0.4s, opacity 0.6s;
}
.idea .type { justify-self: start; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.idea strong { font-size: 15px; font-weight: 650; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idea .on-kw { font-family: var(--f-mono); font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ideas.has-pick .idea:not(.picked) { opacity: 0.38; }
.idea.picked { transform: scale(1.04); border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 18px 50px -12px rgba(255, 90, 60, 0.7); background: rgba(255, 90, 60, 0.1); z-index: 2; }
.idea.picked::after {
  content: 'Writing this one first'; position: absolute; top: -11px; right: 12px; padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; background: var(--ember); color: #fff; animation: st-pop-in 0.5s var(--pop) both;
}

/* ── 6. Write ── */
.write { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; margin-top: 18px; }
.doc-wrap {
  min-height: 0; overflow-y: auto; border-radius: 18px; background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.3);
  scrollbar-width: thin; scrollbar-color: #d9d3dd transparent;
}
.doc { padding-bottom: 48px; }
.doc-cover { position: relative; aspect-ratio: 16 / 5; overflow: hidden; background: #1b1520; }
.cover-paint {
  position: absolute; inset: -40%;
  background:
    radial-gradient(30% 40% at 30% 40%, color-mix(in srgb, var(--brand) 85%, #fff 15%), transparent 70%),
    radial-gradient(35% 45% at 70% 60%, color-mix(in srgb, var(--brand) 60%, #ffa552 40%), transparent 70%),
    radial-gradient(40% 40% at 50% 20%, rgba(255, 224, 181, 0.55), transparent 70%),
    #2a1f2e;
  filter: blur(30px) saturate(0.9); opacity: 0.75;
  animation: st-paint 7s ease-in-out infinite alternate;
}
.doc-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: blur(26px) saturate(1.5); transform: scale(1.1);
  transition: opacity 1.4s var(--ease), filter 2.2s var(--ease), transform 2.6s var(--ease);
}
.doc-cover img.on { opacity: 1; filter: none; transform: none; }
.cover-note {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 6px 12px; border-radius: 99px; font-family: var(--f-mono); font-size: 12px; color: #fff;
  background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap;
  transition: opacity 0.5s;
}
.doc-cover.is-painting .cover-note::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ember); animation: st-ping 1.4s ease-out infinite; }
.doc-cover.is-done .cover-note { opacity: 0; }
.doc-kw { margin: 22px 36px 0; min-height: 1.2em; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #d9472d; }
.doc-title { margin: 6px 36px 0; font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); min-height: 1.2em; }
.doc-title.typing::after, .w.cur::after {
  content: ''; display: inline-block; width: 2px; height: 0.95em; margin-left: 2px; vertical-align: -0.1em; background: var(--ember); animation: st-blink 0.9s steps(2) infinite;
}
.ph { display: block; height: 0.8em; width: 70%; margin-top: 0.2em; border-radius: 8px; background: linear-gradient(90deg, #efebe8, #f8f6f4, #efebe8); background-size: 200% 100%; animation: st-shimmer 1.4s linear infinite; }
.doc-desc { margin: 12px 36px 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); min-height: 1em; }
.doc-desc:not(:empty) { padding-left: 14px; border-left: 3px solid #f3c9bd; }
.doc-body { margin: 18px 36px 0; font-size: 16px; line-height: 1.72; color: #2b2531; }
.doc-body .sec { margin-top: 22px; }
.doc-body .sec > h3 { margin: 0 0 8px; font-family: var(--f-display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); transition: color 0.4s; }
.doc-body .sec.pending > h3 { color: #c4bcc9; }
.doc-body .sec.pending .lines { display: grid; gap: 8px; margin-top: 4px; }
.doc-body .sec.pending .lines i { display: block; height: 10px; border-radius: 6px; background: #f1edef; }
.doc-body .sec.pending .lines i:nth-child(2) { width: 92%; }
.doc-body .sec.pending .lines i:nth-child(3) { width: 64%; }
.doc-body .sec.next .lines i { background: linear-gradient(90deg, #f1edef, #fde4dc, #f1edef); background-size: 200% 100%; animation: st-shimmer 1.2s linear infinite; }
.doc-body p, .doc-body li { margin: 0 0 12px; }
.doc-body h2, .doc-body h3:not(:first-child), .doc-body h4 { margin: 18px 0 8px; font-family: var(--f-display); font-weight: 800; color: var(--ink); line-height: 1.3; }
.doc-body h2 { font-size: 19px; } .doc-body h3:not(:first-child) { font-size: 17.5px; } .doc-body h4 { font-size: 16px; }
.doc-body ul, .doc-body ol { margin: 0 0 12px; padding-left: 22px; }
.doc-body ul { list-style: disc; } .doc-body ol { list-style: decimal; }
.doc-body a { color: #d9472d; text-decoration: underline; text-underline-offset: 2px; }
.doc-body strong, .doc-body b { font-weight: 700; color: var(--ink); }
.doc-body table { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 14px; }
.doc-body th, .doc-body td { padding: 7px 9px; border: 1px solid #ece7ee; text-align: left; }
.doc-body blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid #f3c9bd; color: var(--ink-2); }
.doc-body li:not(:has(.w.on))::marker { color: transparent; }
.w { opacity: 0; }
.w.on { opacity: 1; animation: st-ink 0.7s ease both; }
.checks { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.words { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--hair); }
.words strong { display: block; font-family: var(--f-display); font-size: 24px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.words span { font-size: 13px; color: var(--fg-3); }
.checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.checks li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 7px 2px; font-size: 13px; color: var(--fg-3); border-bottom: 1px solid var(--hair); transition: color 0.4s;
}
.checks li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--hair-2); box-sizing: border-box; }
.checks li em { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); }
.checks li.live { color: #fff; }
.checks li.live::before { border-color: rgba(255, 255, 255, 0.15); border-top-color: var(--ember); animation: st-spin 0.8s linear infinite; }
.checks li.ok { color: #fff; }
.checks li.ok::before {
  border: 0; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23062b1d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  animation: st-pop-in 0.45s var(--pop) both;
}

/* ── Done ── */
.done { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: 0 8px; }
.done-title { margin: 0; font-family: var(--f-display); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; font-size: clamp(26px, 2.4vw, 34px); }
.done-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 24px; }
.done-stats div { display: flex; align-items: baseline; gap: 6px; animation: st-chip 0.6s var(--ease) both; }
.done-stats strong { font-family: var(--f-display); font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.done-stats span { font-size: 13px; color: var(--fg-3); }
.done-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.done-auto { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-3); }
.done-auto b { color: #fff; }
.done-auto a { color: var(--amber); font-weight: 700; }
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px;
  font-size: 14.5px; font-weight: 650; white-space: nowrap; transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s;
}
.st-btn-ember { background: var(--ember); color: #fff; box-shadow: 0 8px 22px -10px rgba(255, 90, 60, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.st-btn-ember:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(255, 90, 60, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.st-btn-glass { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--hair-2); color: #fff; }
.st-btn-glass:hover { background: rgba(255, 255, 255, 0.12); }
.done-card {
  display: flex; flex-direction: column; width: min(440px, 100%); justify-self: center; overflow: hidden; border-radius: 16px; background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.3s var(--ease);
  animation: st-card 0.8s var(--ease) 0.2s both;
}
.done-card:hover { transform: translateY(-2px); }
.dc-cover { display: block; aspect-ratio: 16 / 9; background: #2a1f2e; overflow: hidden; }
.dc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-body { display: grid; gap: 6px; padding: 18px 20px 22px; }
.dc-kw { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #d9472d; }
.dc-body strong { font-family: var(--f-display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.dc-desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Failed ── */
.failed { margin: auto; max-width: 560px; display: grid; justify-items: center; gap: 16px; text-align: center; }
.failed img { border-radius: 14px; background: #fff; padding: 6px; }
.failed p { margin: 0; color: var(--fg-2); }

/* ── Side: live log ── */
.st-side { display: flex; flex-direction: column; min-height: 0; }
.term { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; border: 1px solid var(--hair); }
.term-bar { flex: none; display: flex; align-items: center; gap: 7px; margin: 0; padding: 14px 16px 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.term-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.term-log {
  flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
  padding: 10px 16px 16px; font-family: var(--f-mono); font-size: 12px; line-height: 1.55; color: var(--fg-3);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
.term-log p { margin: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; animation: st-line 0.45s var(--ease) both; }
.term-log time { color: rgba(240, 232, 248, 0.3); }
.term-log b { color: var(--fg-2); font-weight: 500; }
.term-log p.ok span::before { content: '✓ '; color: var(--ok); }
.term-log p.err span { color: #fca5a5; }
.term-log p.err span::before { content: '✗ '; color: #f87171; }

/* ── Motion ── */
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-indet { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
@keyframes st-blink { 50% { opacity: 0; } }
@keyframes st-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.6); } 100% { box-shadow: 0 0 0 9px rgba(255, 90, 60, 0); } }
@keyframes st-breathe { from { opacity: 0.75; transform: translateY(0); } to { opacity: 1; transform: translateY(3%); } }
@keyframes st-float { 50% { transform: translateY(-6px); } }
@keyframes st-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes st-beam { from { background-position: 0 100%; } to { background-position: 0 0%; } }
@keyframes st-pop { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes st-pop-in { from { opacity: 0; transform: scale(0.5); } }
.rival { animation-name: st-rival; }
@keyframes st-rival { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes st-grow { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes st-chip { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
@keyframes st-row { from { opacity: 0; transform: translateX(-16px); } }
@keyframes st-drop { from { opacity: 0; transform: translateY(-26px) rotate(-3deg) scale(0.96); } }
@keyframes st-line { from { opacity: 0; transform: translateY(8px); } }
@keyframes st-ink { from { opacity: 0; color: #ff5a3c; filter: blur(3px); } 60% { color: #ff5a3c; filter: none; } }
@keyframes st-paint { from { transform: rotate(0deg) scale(1); } to { transform: rotate(14deg) scale(1.15); } }
@keyframes st-card { from { opacity: 0; transform: translateY(40px) rotate(6deg) scale(0.92); } }

@media (prefers-reduced-motion: reduce) {
  .studio *, .studio *::before, .studio *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .br-beam, .radar .sweep { display: none; }
}

/* ── Smaller screens ── */
@media (max-width: 1099px) {
  .st-main { grid-template-columns: minmax(0, 1fr); }
  .st-side { display: none; }
  .st-stage { min-height: 640px; }
}
@media (max-width: 760px) {
  .studio { padding-bottom: 16px; }
  .st-top { grid-template-columns: auto minmax(0, 1fr) auto; height: 52px; }
  .st-auto, .st-clock small { display: none; }
  .st-site { justify-self: center; }
  .st-steps { gap: 4px; margin-bottom: 14px; }
  .st-steps .lbl, .st-steps .res { display: none; }
  .st-stage { min-height: 78dvh; border-radius: 18px; }
  .scene { padding: 20px 18px 56px; }
  .st-next { left: 18px; right: 18px; bottom: 16px; font-size: 12px; }
  .biz { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; }
  .biz-cols { overflow: visible; mask-image: none; }
  .biz-card { padding: 16px; }
  .biz-id strong { font-size: 21px; }
  .biz-desc { font-size: 14.5px; min-height: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .biz-aud { display: none; }
  .chips li { font-size: 13px; padding: 7px 10px; }
  .kw-head, .kw-list li { grid-template-columns: minmax(0, 1fr) 120px; }
  .kw-head span:nth-child(n+3), .kw-list li > :nth-child(n+3) { display: none; }
  .kw-vol { grid-template-columns: minmax(0, 1fr) 56px; }
  .ideas { grid-template-columns: minmax(0, 1fr); }
  .write { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .checks { order: -1; flex-direction: row; align-items: center; }
  .checks ul { display: none; }
  .words { flex: 1; padding: 10px 14px; display: flex; align-items: baseline; gap: 8px; }
  .words strong { font-size: 26px; }
  .doc-kw, .doc-title, .doc-desc, .doc-body { margin-left: 20px; margin-right: 20px; }
  .done { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; overflow-y: auto; }
  .rival { width: 96px; }
  .rival span { display: none; }
}

/* ── Website step (workspaces/start) ── */
.studio-start { grid-template-rows: auto minmax(0, 1fr); }
.start-out { justify-self: end; font-size: 13px; color: var(--fg-3); }
.start-out:hover { color: #fff; }
.start { align-self: center; justify-self: center; width: min(600px, 100%); display: grid; justify-items: center; text-align: center; padding: 4vh 0 12vh; }
.start-title { margin: 4px 0 0; font-family: var(--f-display); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; font-size: clamp(28px, 3.2vw, 38px); }
.start-lede { margin: 10px 0 0; max-width: 440px; font-size: 15.5px; color: var(--fg-2); }
.start-form { width: 100%; margin-top: 26px; }
.start-field {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 8px 8px 20px; border-radius: 20px; color: var(--fg-3);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.start-field:focus-within { border-color: rgba(255, 165, 82, 0.6); box-shadow: 0 0 0 3px rgba(255, 165, 82, 0.12); }
.start-field svg { width: 18px; height: 18px; flex: none; }
.start-field input {
  flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; box-shadow: none; padding: 0;
  color: #fff; font: 500 16px var(--f-body);
}
.start-field input::placeholder { color: rgba(240, 232, 248, 0.4); }
.start-field input:focus { outline: none; box-shadow: none; }
.start-field .st-btn { height: 42px; padding: 0 18px; }
.start-field .st-btn:disabled { opacity: 0.75; cursor: progress; }
.start-error { margin: 12px 0 0; font-size: 14px; color: #fca5a5; }
.start-steps { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 13px; color: var(--fg-3); }
.start-steps li { display: inline-flex; align-items: center; gap: 8px; }
.start-steps b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--gold); background: rgba(255, 106, 61, 0.14); border: 1px solid rgba(255, 140, 100, 0.3); }
.start-skip { margin-top: 28px; }
.start-skip button { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--fg-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.start-skip button:hover { color: #fff; }
@media (max-width: 760px) {
  .start-field { flex-wrap: wrap; padding: 10px; }
  .start-field input { height: 44px; }
  .start-field .st-btn { width: 100%; }
}