/* Intro: backdrop, language gate, Claude Code window (showcase, focus, agents, done), skip button. */

.intro {
  --cw-w: min(860px, max(620px, 54vw), calc(100vw - 32px));
  --cw-fs: .8125rem;
  --cw-prompt-fs: clamp(.95rem, .82rem + .38vw, 1.15rem);
  --cw-bar-h: 2.5rem;
  --cw-pad: 1.15rem;
  --cw-lift: 3.25rem;
  --cw-tilt-x: 0deg;
  --cw-tilt-y: 0deg;
  --cw-tilt-z: 0deg;
  --cw-scale: 1;
  --coral-text: #eb9b7e;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-sans);
}
.intro [hidden] { display: none !important; }

/* ---------- Backdrop: deep slate, a whisper of coral, a dot grid ---------- */

.intro-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(62% 52% at 50% 46%, rgba(217,119,87,.08), transparent 72%),
    radial-gradient(120% 90% at 50% 120%, rgba(9,11,15,.55), transparent 70%),
    var(--bg);
}
.intro-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(154,163,178,.26) 1px, transparent 1.4px);
  background-position: center;
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 46%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 46%, #000 10%, transparent 78%);
  opacity: .55;
}
.intro-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(9,11,15,.3), rgba(9,11,15,.78));
  opacity: 0;
  transition: opacity .9s var(--ease-out);
}
.intro.is-dimmed .intro-backdrop::after { opacity: 1; }

/* ---------- Skip button (top-right, above everything in the intro) ---------- */

.intro-skip {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + .75rem);
  right: calc(env(safe-area-inset-right, 0px) + .75rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 40px;
  padding: .45rem .9rem .45rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(27,31,39,.78);
  color: var(--text-dim);
  font: 500 .82rem/1.2 var(--font-sans);
  letter-spacing: .005em;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  animation: intro-fade .5s var(--ease-out) both;
}
.intro-skip svg { width: .95rem; height: .95rem; opacity: .8; transition: transform .25s var(--ease-out); }
@media (hover: hover) {
  .intro-skip:hover { border-color: rgba(255,255,255,.34); background: rgba(38,44,55,.9); color: var(--text); }
  .intro-skip:hover svg { transform: translateX(2px); }
}
@media (pointer: coarse) {
  .intro-skip { min-height: 44px; }
}

@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Language gate ---------- */

.intro-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(1.5rem, env(safe-area-inset-top, 0px)) clamp(1.25rem, 6vw, 4rem) max(1.5rem, env(safe-area-inset-bottom, 0px));
}
.gate-panel { width: min(100%, 46rem); }
.gate-panel > * { animation: intro-rise .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 100ms); }

.gate-kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(1.25rem, 3.4vh, 2.1rem);
  color: var(--muted);
  font: 500 .8rem/1.4 var(--font-mono);
  letter-spacing: .04em;
}
.gate-spark {
  display: inline-block;
  color: var(--claude);
  font-size: 1.15rem;
  line-height: 1;
  animation: gate-spin 14s linear infinite;
}
@keyframes gate-spin { to { transform: rotate(360deg); } }

.gate-title {
  display: grid;
  gap: .08em;
  margin-bottom: clamp(1.75rem, 5vh, 3rem);
  font: 600 clamp(1.6rem, 1rem + 3.3vw, 3.6rem)/1.06 var(--font-sans);
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* The highlighted language lights its own line up; the other one steps back to a quiet grey. */
.gate-line { color: #6f7684; transition: color .35s ease; }
.gate-line.is-lit { color: var(--text); }
.gate-line[data-lang="en"] {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
}
.gate-line[data-lang="en"].is-lit { color: var(--accent); }

.gate-options {
  --gap: .5rem;
  position: relative;
  display: grid;
  gap: var(--gap);
  font: 500 clamp(1.15rem, .95rem + 1vw, 1.5rem)/1.2 var(--font-sans);
}
.gate-cursor {
  position: absolute;
  inset: 0 0 auto;
  height: calc((100% - (var(--n, 2) - 1) * var(--gap)) / var(--n, 2));
  border: 1px solid rgba(255,229,46,.3);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(255,229,46,.11), rgba(255,229,46,.035) 55%, rgba(255,229,46,0));
  box-shadow: 0 18px 40px -26px rgba(255,229,46,.45);
  pointer-events: none;
  transform: translateY(calc(var(--sel, 0) * (100% + var(--gap))));
  transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .3s ease, background-color .3s ease;
}
.gate-cursor > span {
  position: absolute;
  top: 50%;
  left: 1.05rem;
  font: 700 1em/1 var(--font-mono);
  transition: opacity .25s ease, transform .35s var(--ease-spring);
}
.gate-chevron { color: var(--accent); transform: translateY(-50%); }
.gate-check { color: var(--ok); opacity: 0; transform: translateY(-50%) scale(.3); }
.gate-options:has(.gate-option:focus-visible) .gate-cursor { border-color: rgba(255,229,46,.85); }

.gate-option {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  width: 100%;
  min-height: 4.1rem;
  padding: .8rem 1.1rem .8rem calc(1.05rem + 1.9em);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: left;
  transition: color .25s ease, opacity .3s ease;
}
.gate-option:focus-visible { outline: none; }
.gate-option.is-selected { color: var(--text); }
.gate-code {
  display: inline-grid;
  place-items: center;
  min-width: 2.7em;
  height: 1.8em;
  padding: 0 .5em;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text-dim);
  font: 700 .6em/1 var(--font-mono);
  letter-spacing: .1em;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.gate-option.is-selected .gate-code { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.gate-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-key {
  display: inline-grid;
  place-items: center;
  min-width: 1.85em;
  height: 1.85em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  color: var(--muted);
  font: 600 .55em/1 var(--font-mono);
}
.gate-option.is-selected .gate-key { color: var(--text-dim); border-color: rgba(255,255,255,.28); }
/* Touch-only devices: no keyboard, so no keyboard hints (intro.js drops the spinner's one too). */
@media (hover: none) and (pointer: coarse) {
  .gate-key, .gate-hint-text { display: none; }
  .cw-coach [data-text="sendKey"], .cw-hints > [data-text="shortcuts"] { display: none; }
  .cw-mode { margin-left: auto; }
}
@media (hover: hover) {
  .gate-option:not(.is-selected):hover { color: var(--text-dim); }
}

.gate-hint {
  display: flex;
  align-items: center;
  gap: .6ch;
  min-height: 1.5em;
  margin-top: 1.35rem;
  padding-left: 1.1rem;
  color: var(--muted);
  font: 500 .8rem/1.5 var(--font-mono);
  letter-spacing: .02em;
}
.gate-caret {
  display: inline-block;
  flex: none;
  width: .6em;
  height: 1.15em;
  background: var(--accent);
  animation: intro-blink 1.1s steps(1, end) infinite;
}
@keyframes intro-blink { 50% { opacity: 0; } }

/* Confirmation: the chevron becomes a check, the choice glows, the rest steps back. */
.intro-gate.is-confirmed .gate-cursor {
  border-color: rgba(127,212,139,.5);
  background: linear-gradient(90deg, rgba(127,212,139,.16), rgba(127,212,139,.04) 60%, rgba(127,212,139,0));
}
.intro-gate.is-confirmed .gate-chevron { opacity: 0; transform: translateY(-50%) scale(.3); }
.intro-gate.is-confirmed .gate-check { opacity: 1; transform: translateY(-50%) scale(1); }
.intro-gate.is-confirmed .gate-option:not(.is-selected) { opacity: .28; }
.intro-gate.is-confirmed .gate-caret { animation: none; opacity: 0; }
.intro-gate.is-leaving .gate-panel { animation: gate-out .4s var(--ease-in-out) forwards; }
@keyframes gate-out { to { opacity: 0; transform: translateY(-18px) scale(.985); } }

/* ---------- Claude section: layout ---------- */

.intro-claude {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.cw-layout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 4rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 4rem);
  scrollbar-width: none;
}
.cw-layout::-webkit-scrollbar { display: none; }

/* The anchor is centred; the CTA hangs under it, so the window never jumps when the CTA leaves. */
.cw-anchor {
  position: relative;
  flex: none;
  width: var(--cw-w);
  margin-block: auto;
  transform: translateY(calc(-1 * var(--cw-lift)));
  transition: transform .95s var(--ease-in-out);
}
.cw-float { position: relative; }
.cw-tilt {
  position: relative;
  transform: perspective(1500px) rotateX(var(--cw-tilt-x)) rotateY(var(--cw-tilt-y)) rotateZ(var(--cw-tilt-z)) scale(var(--cw-scale));
  transform-origin: 50% 50%;
  transition: transform 1.05s var(--ease-in-out);
}
/* Soft coral glow under the window (opacity only). */
.cw-tilt::before {
  content: '';
  position: absolute;
  inset: 12% 4% -10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217,119,87,.36), rgba(217,119,87,.12) 55%, transparent);
  opacity: .75;
  pointer-events: none;
  transition: opacity .8s ease;
}

/* ---------- The window ---------- */

.claude-window {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--term-line);
  border-radius: var(--radius);
  background: var(--term-bg);
  color: var(--term-text);
  font: 400 var(--cw-fs)/1.6 var(--font-mono);
  font-variant-emoji: text;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 1px 0 rgba(0,0,0,.4),
    0 60px 110px -50px rgba(0,0,0,.9),
    0 30px 60px -40px rgba(0,0,0,.7);
  transition: border-color .7s ease;
}
.claude-window:focus { outline: none; }
.cw-inner { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; border-radius: inherit; }
/* Copy of the report's card content, shown inside the window while it flies into that card. */
.cw-ghost { position: absolute; left: 0; color: var(--term-text); transform-origin: 0 0; pointer-events: none; }

.cw-bar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: var(--cw-bar-h);
  padding: 0 4.6rem;
  border-bottom: 1px solid var(--term-line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--term-bar);
}
.cw-dots { position: absolute; top: 50%; left: .95rem; display: flex; gap: 7px; transform: translateY(-50%); }
.cw-dots i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.cw-dots i:nth-child(2) { background: #febc2e; }
.cw-dots i:nth-child(3) { background: #28c840; }
.cw-title {
  overflow: hidden;
  color: var(--term-dim);
  font-size: .72rem;
  letter-spacing: .01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cw-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: var(--cw-pad) var(--cw-pad) calc(var(--cw-pad) - .2rem);
}

/* Welcome box, as printed by the CLI. */
.cw-welcome { flex: none; }
.cw-welcome-box {
  padding: .75rem 1rem .85rem;
  border: 1px solid var(--claude);
  border-radius: 10px;
}
.cw-welcome-title { color: var(--term-text); font-weight: 600; }
.cw-spark { display: inline-block; margin-right: .9ch; color: var(--claude); }
.cw-welcome-line { padding-left: 2ch; color: var(--term-dim); overflow-wrap: anywhere; }
.cw-welcome-title + .cw-welcome-line { margin-top: .55rem; }
.cw-tip { margin-top: .75rem; padding-left: 1.1ch; color: var(--term-dim); overflow-wrap: anywhere; }

/* Transcript (role=log) and the thinking line under it. Only shown once the window is compact. */
.cw-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #343b48 transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 .9rem);
  mask-image: linear-gradient(to bottom, transparent, #000 .9rem);
  padding-top: .55rem;
}
.cw-row {
  display: grid;
  grid-template-columns: 2.2ch minmax(0, 1fr);
  align-items: baseline;
  animation: cw-row-in .42s var(--ease-out) both;
}
.cw-row + .cw-row { margin-top: .62rem; }
.cw-row.is-task + .cw-row.is-task { margin-top: .32rem; }
@keyframes cw-row-in { from { opacity: 0; transform: translateY(6px); } }

.cw-g { color: var(--term-dim); text-align: left; }
.cw-dot {
  display: inline-block;
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-.04em);
}
.cw-text { min-width: 0; overflow-wrap: anywhere; }

.cw-row.is-user {
  padding: .5rem .7rem;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: var(--term-text);
}
.cw-row.is-say .cw-g { color: var(--term-text); }
.cw-row.is-say .cw-text { color: var(--term-text); }

.cw-row.is-task .cw-g { color: var(--agent, var(--claude)); }
.cw-row.is-task:not(.is-done) .cw-dot { animation: cw-pulse 1.1s ease-in-out infinite; }
@keyframes cw-pulse { 50% { opacity: .25; } }
.cw-row.is-task.is-done .cw-g { color: var(--ok); }
.cw-check { display: inline-block; font-weight: 700; animation: cw-pop .4s var(--ease-spring) both; }
@keyframes cw-pop { from { opacity: 0; transform: scale(.3); } }
.cw-task { display: flex; align-items: baseline; gap: 1.4ch; min-width: 0; }
.cw-task-name { flex: none; color: var(--term-text); font-weight: 600; white-space: nowrap; }
.cw-name-short { display: none; }
.cw-task-sub { display: flex; align-items: baseline; gap: 1ch; min-width: 0; color: var(--term-dim); }
.cw-task-sub:empty { display: none; }
.cw-elbow { flex: none; color: #5d6573; }
.cw-task-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cw-row.is-done .cw-task-text { color: var(--text-dim); }
.cw-swap { animation: intro-fade .35s ease both; }

.cw-row.is-finish .cw-g { color: var(--ok); }
.cw-row.is-finish .cw-text { color: var(--term-text); font-weight: 600; }
.cw-stats { display: flex; grid-column: 2; gap: 1ch; margin-top: .2rem; color: var(--term-dim); }

/* Thinking line: cycling coral glyph, verb, elapsed time and the interrupt hint. */
.cw-spinner {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 1ch;
  min-width: 0;
  margin-top: .7rem;
  color: var(--claude);
  white-space: nowrap;
}
.cw-spin-glyph { display: inline-block; flex: none; width: 1.4ch; text-align: center; }
.cw-spin-verb { flex: none; color: var(--coral-text); }
.cw-spin-meta { overflow: hidden; min-width: 0; color: var(--term-dim); text-overflow: ellipsis; }

/* ---------- Prompt input + send button ---------- */

.cw-prompt { position: relative; flex: none; margin-top: 1rem; }
.cw-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  column-gap: .85rem;
  padding: .75rem .7rem .7rem 1rem;
  border: 1px solid var(--term-line);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  transition: border-color .5s ease, background-color .5s ease;
}
.cw-chevron {
  align-self: start;
  color: var(--term-dim);
  font-size: var(--cw-prompt-fs);
  line-height: 1.55;
}
.cw-field {
  --lines: 2;
  align-self: start;
  min-height: calc(var(--lines) * 1.55em);
  color: var(--term-text);
  font-size: var(--cw-prompt-fs);
  line-height: 1.55;
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
}
.cw-cursor {
  display: inline-block;
  width: .58em;
  height: 1.18em;
  margin-left: .05em;
  vertical-align: -.2em;
  background: var(--term-text);
  animation: intro-blink 1.06s steps(1, end) infinite;
}
.cw-field.is-typing .cw-cursor { animation: none; }
.cw-placeholder { display: none; margin-left: .35ch; color: var(--term-dim); }
.cw-field.is-empty .cw-placeholder { display: inline; }

.cw-send {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background: #313744;
  color: #858c98;
  transition: background-color .35s ease, color .35s ease, transform .2s var(--ease-out);
}
.cw-send::before { content: ''; position: absolute; inset: -.4rem; }
.cw-send svg { width: 1.05rem; height: 1.05rem; }
.cw-send .cw-stop-icon { display: none; }
.cw-send.is-armed { background: var(--claude); color: #fff; cursor: pointer; }
.cw-send.is-armed::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--claude);
  border-radius: inherit;
  pointer-events: none;
  animation: cw-ring 1.7s var(--ease-out) infinite;
}
@keyframes cw-ring { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
.cw-send.is-armed:active { transform: scale(.94); }
.cw-send:focus-visible { outline-color: var(--text); outline-offset: 3px; }
@media (hover: hover) {
  .cw-send.is-armed:hover { background: #e3896b; }
}
.cw-send.is-running { background: #3a404c; color: var(--term-text); }
.cw-send.is-running .cw-arrow-icon { display: none; }
.cw-send.is-running .cw-stop-icon { display: block; }

.cw-hints {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding: 0 .35rem;
  color: var(--term-dim);
  font-size: .72rem;
  white-space: nowrap;
}
.cw-hints > span { overflow: hidden; min-width: 0; text-overflow: ellipsis; }
.cw-mode { flex: none; color: var(--claude); }

/* ---------- Coach bubble pointing at the send arrow ---------- */

.cw-coach {
  position: absolute;
  top: calc(100% + var(--cw-pad) + 1.15rem);
  right: -.35rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: min(27rem, calc(100vw - 2rem));
  padding: .62rem 1rem .62rem .62rem;
  border-radius: 12px;
  background: var(--text);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.08);
  animation: cw-coach-in .55s var(--ease-out) both, cw-bob 2.6s ease-in-out .55s infinite;
}
.cw-coach::before {
  content: '';
  position: absolute;
  top: -6px;
  right: calc(.35rem + .7rem + 1px + 1rem - 6px);
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}
.cw-coach-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background: var(--claude);
  color: #fff;
}
.cw-coach-icon svg { width: 1rem; height: 1rem; }
.cw-coach-text { display: grid; gap: .05rem; min-width: 0; }
.cw-coach-text strong { font-size: .9rem; font-weight: 650; line-height: 1.3; letter-spacing: -.005em; }
.cw-coach-text span { color: #4a515e; font-size: .78rem; line-height: 1.35; }
@keyframes cw-coach-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes cw-bob { 50% { transform: translateY(3px); } }

/* ---------- "Start" CTA under the window ---------- */

.cw-cta {
  position: absolute;
  top: calc(100% + clamp(1.4rem, 4vh, 2.4rem));
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .9rem;
  width: min(31rem, calc(100vw - 2rem));
  text-align: center;
  translate: -50% 0;
  transition: opacity .35s ease, transform .45s var(--ease-out), visibility 0s linear 0s;
}
.cw-start { gap: .95rem; min-height: 52px; padding: .75rem .8rem .75rem 1.5rem; font-size: 1rem; }
.cw-start:focus-visible { outline-color: var(--text); outline-offset: 4px; }
.cw-enter {
  display: grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.9rem;
  border-radius: 7px;
  background: rgba(27,31,39,.12);
  font: 700 1rem/1 var(--font-mono);
}
.cw-caption { max-width: 28rem; color: var(--muted); font-size: .9rem; line-height: 1.5; text-wrap: balance; }

/* ---------- Modes ---------- */

/* Showcase & focus: no transcript yet, just the welcome screen and the prompt. */
.intro-claude:is([data-mode="showcase"], [data-mode="focus"]) .cw-scroll { display: none; }

@media (min-width: 900px) {
  /* A gentle tilt, and a still text layer: only the glow under the window breathes, so the glyphs stay crisp. */
  .intro-claude[data-mode="showcase"] { --cw-tilt-x: 7deg; --cw-tilt-y: 4deg; --cw-tilt-z: 0deg; }
  .intro-claude[data-mode="showcase"] .cw-tilt::before { animation: cw-glow 7s ease-in-out infinite; }
}
@keyframes cw-glow { 50% { transform: translateY(10px) scale(.96); } }

.intro-claude[data-mode="focus"] { --cw-lift: 0px; }
.intro-claude[data-mode="focus"] .claude-window { border-color: rgba(217,119,87,.5); }
.intro-claude[data-mode="focus"] .cw-input { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.03); }
.intro-claude[data-mode="focus"] .cw-tilt::before { opacity: 1; }
.intro-claude[data-mode="focus"] .cw-cta {
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s linear .4s;
}

/* Agents & done: a compact window that leaves room for the robots. */
.intro-claude:is([data-mode="agents"], [data-mode="done"]) {
  --cw-lift: 0px;
  --cw-fs: .78rem;
  --cw-pad: .95rem;
  --cw-prompt-fs: .84rem;
}
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-anchor {
  width: min(520px, 42vw);
  height: min(440px, 58vh);
  transform: none;
  transition: none;
}
.intro-claude:is([data-mode="agents"], [data-mode="done"]) :is(.cw-float, .cw-tilt) {
  height: 100%;
  transform: none;
  animation: none;
  transition: none;
}
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .claude-window { height: 100%; }
.intro-claude:is([data-mode="agents"], [data-mode="done"]) :is(.cw-welcome, .cw-cta, .cw-coach) { display: none; }
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-field { --lines: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-prompt { margin-top: .8rem; }
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-input { padding: .55rem .55rem .55rem .85rem; }
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-send { width: 1.75rem; height: 1.75rem; border-radius: 8px; }
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-send svg { width: .9rem; height: .9rem; }
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-tilt::before { opacity: .3; }
/* The log scrolls under a taller fade, so no row is ever seen sliced by the title bar. */
.intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-scroll {
  padding-top: 1.6rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.25) .55rem, #000 1.6rem);
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.25) .55rem, #000 1.6rem);
}
.claude-window.is-finished { border-color: rgba(127,212,139,.38); }
.intro-claude.is-morphing .cw-tilt::before { opacity: 0; transition-duration: .5s; }
.intro-claude:is(.is-morphing, .is-flipping) .claude-window { overflow: hidden; }

/* ---------- Responsive ---------- */

/* Large screens: everything grows a little, so the scene keeps its presence. */
@media (min-width: 1800px) {
  .intro { --cw-w: min(1000px, 48vw); --cw-fs: .9rem; --cw-prompt-fs: 1.25rem; --cw-bar-h: 2.65rem; }
  .gate-panel { width: min(100%, 54rem); }
  .gate-title { font-size: clamp(3.6rem, 2.7vw, 4.9rem); }
  .gate-options { font-size: 1.7rem; }
  .gate-kicker, .gate-hint { font-size: .9rem; }
  .cw-title { font-size: .78rem; }
  .cw-hints { font-size: .78rem; }
  .cw-start { min-height: 58px; padding-left: 1.75rem; font-size: 1.1rem; }
  .cw-caption { max-width: 32rem; font-size: 1rem; }
  .cw-coach { max-width: 30rem; }
  .cw-coach-text strong { font-size: 1rem; }
  .cw-coach-text span { font-size: .85rem; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) { --cw-fs: .84rem; --cw-prompt-fs: .9rem; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-anchor { width: min(600px, 40vw); height: min(500px, 58vh); }
}
@media (min-width: 2200px) {
  .intro { --cw-w: 1100px; --cw-fs: .98rem; --cw-prompt-fs: 1.38rem; --cw-bar-h: 2.8rem; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) { --cw-fs: .9rem; --cw-prompt-fs: .96rem; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-anchor { width: min(660px, 36vw); height: min(560px, 56vh); }
}

/* Tablet: the compact window sits near the top, the robots gather around and below it. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-layout { padding-top: 9vh; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-anchor {
    width: min(520px, 76vw);
    height: min(400px, 42vh);
    margin-block: 0;
  }
}

/* Mobile: full-width window; once compact it is pinned under the skip button. */
@media (max-width: 599.98px) {
  .intro { --cw-w: calc(100vw - 24px); --cw-fs: .75rem; --cw-pad: .9rem; --cw-lift: 3.4rem; --cw-prompt-fs: .95rem; }
  .cw-layout { padding-inline: 12px; }
  .cw-bar { padding: 0 3.9rem 0 4.4rem; }
  .cw-field { --lines: 3; }
  .cw-hints { font-size: .68rem; }
  .cw-coach { right: -.2rem; }
  .cw-coach::before { right: calc(.2rem + .7rem + 1px + 1rem - 6px); }
  .gate-option { min-height: 3.75rem; column-gap: .8rem; }

  .intro-claude:is([data-mode="agents"], [data-mode="done"]) { --cw-fs: .72rem; --cw-pad: .8rem; --cw-prompt-fs: .8rem; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-layout { padding: calc(env(safe-area-inset-top, 0px) + 64px) 12px 0; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-anchor { width: 100%; height: max(240px, 40vh); margin-block: 0; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-hints { display: none; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-prompt { margin-top: .6rem; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-name-long { display: none; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-name-short { display: inline; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-task { gap: 1ch; }
}

@media (max-width: 379.98px) {
  .cw-hints > span:first-child { display: none; }
  .cw-mode { margin-left: auto; }
}

/* Small phones: the coach bubble needs room under the window. */
@media (max-width: 599.98px) {
  .intro-claude[data-mode="focus"] { --cw-lift: 2.25rem; }
}
@media (max-width: 599.98px) and (max-height: 700px) {
  .cw-tip { display: none; }
  .cw-welcome-title + .cw-welcome-line { margin-top: .35rem; }
}

/* Short screens (landscape phones): keep the prompt and the CTA in view. */
@media (max-height: 560px) {
  .cw-layout { padding-block: calc(env(safe-area-inset-top, 0px) + 3.5rem) 1rem; }
  .intro-claude:is([data-mode="showcase"], [data-mode="focus"]) .cw-welcome { display: none; }
  .intro-claude:is([data-mode="showcase"], [data-mode="focus"]) .cw-prompt { margin-top: 0; }
  .cw-field { --lines: 1; }
  .cw-caption { display: none; }
  .cw-cta { top: calc(100% + 1.1rem); }
  /* The coach bubble goes above the input, pointing down at the arrow, so it stays on screen. */
  .intro-claude[data-mode="focus"] .cw-coach { top: auto; bottom: calc(100% + .9rem); animation-name: cw-coach-in-up, cw-bob; }
  .intro-claude[data-mode="focus"] .cw-coach::before { top: auto; bottom: -6px; }
}
@keyframes cw-coach-in-up { from { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* Short and wide screens (landscape phones, laptops at high zoom): the compact window takes the full
   height in the middle and the robots stand in columns on both sides (agents.js, 'columns' layout). */
@media (max-height: 520px) and (min-width: 600px) {
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) { --cw-fs: .72rem; --cw-pad: .75rem; --cw-prompt-fs: .78rem; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-layout {
    justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-anchor { width: min(44vw, 420px); height: 100%; margin-block: 0; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) :is(.cw-welcome, .cw-tip, .cw-hints) { display: none; }
  .intro-claude:is([data-mode="agents"], [data-mode="done"]) .cw-prompt { margin-top: .5rem; }
}

/* ---------- Preferences ---------- */

@media (forced-colors: active) {
  .gate-cursor { border-color: Highlight; }
  .gate-caret, .cw-cursor { background: CanvasText; }
  .claude-window, .cw-input, .cw-welcome-box { border-color: CanvasText; }
  .cw-send { border: 1px solid ButtonText; }
  .cw-send.is-armed { background: Highlight; color: HighlightText; }
  .cw-coach { border: 1px solid CanvasText; }
}