.scene { container-type: inline-size; }

/* ---------- Chapter 0 · Opening (2a) and you press Enter ---------- */
.s0 { position: absolute; inset: 0; }
.s0-hook, .s0-split, .s0-map { position: absolute; inset: 0; }

/* Hook: the three surprises */
.s0-hook { display: grid; align-content: center; gap: clamp(16px, 3cqw, 40px); }
.s0-title { margin: 0; font: 560 clamp(34px, 6.4cqw, 96px)/1.02 var(--f-serif); letter-spacing: -.02em; }
.s0-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2cqw, 28px); }
.s0-q { display: grid; gap: 12px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3); padding: clamp(12px, 2cqw, 28px); box-shadow: var(--card-shadow); }
.s0-q p { margin: 0; font: 450 var(--scene-body)/1.3 var(--f-serif); }
.s0-tag { justify-self: start; font: 650 var(--scene-meta)/1 var(--f-sans); color: var(--model-strong); background: var(--model-soft); padding: 7px 10px; border-radius: 8px; }

/* Split: you see a chat, the model sees one long document */
.s0-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: clamp(14px, 4cqw, 56px); row-gap: clamp(10px, 1.6cqw, 22px); align-content: center; }
/* The stage caption now says "you see a chat" / "the model sees one long document"; the scene keeps only the pictures. */
.s0-head { display: none; }
.s0-chat {
  align-self: start; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-3); box-shadow: var(--card-shadow); overflow: hidden; display: grid; grid-template-rows: auto minmax(60px, auto) auto;
}
.s0-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 600 var(--scene-meta)/1 var(--f-sans); color: var(--text-muted); }
.s0-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.s0-bar span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s0-body { padding: 12px 14px; display: grid; align-content: start; gap: 10px; }
.s0-sent { justify-self: end; max-width: 92%; background: var(--you-soft); border-radius: 12px; padding: 10px 12px; font: 400 var(--scene-meta)/1.4 var(--f-sans); }
.s0-sent:empty { display: none; }
.s0-typing { display: flex; gap: 6px; padding: 10px 12px; background: var(--model-soft); border-radius: 12px; justify-self: start; }
.s0-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--model); animation: s0-bounce 1.2s infinite var(--ease-in-out); }
.s0-typing i:nth-child(2) { animation-delay: .15s; } .s0-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes s0-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.s0-input { position: relative; margin: 0 12px 12px; padding: 12px 14px; border: 2px solid var(--text); border-radius: 14px; min-height: 64px; }
.s0-placeholder { position: absolute; left: 14px; top: 12px; font: 400 var(--scene-label)/1.3 var(--f-serif); color: var(--text-faint); }
.s0-text { position: relative; margin: 0; font: 450 var(--scene-label)/1.3 var(--f-serif); }
.s0-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--you); animation: s0-blink 1s steps(1) infinite; }
@keyframes s0-blink { 50% { opacity: 0; } }
.s0-doc { align-self: start; display: grid; gap: 6px; }
.s0-part { border-left: 5px solid var(--line-strong); background: var(--app-soft); padding: 10px 14px; border-radius: 8px; font: 650 var(--scene-label)/1.2 var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s0-part.k-files { background: var(--model-soft); border-left-color: var(--model); padding-block: clamp(18px, 3.4cqw, 44px); }
.s0-part.k-hist { background: var(--cached-soft); border-left-color: var(--cached); padding-block: clamp(12px, 1.8cqw, 24px); }
.s0-part.k-you { background: var(--you-soft); border-left-color: var(--you); }
.s0-foot { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: clamp(4px, 1cqw, 16px); }
.s0-foot:empty { display: none; }
.s0-key {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 12px; background: var(--surface); border: 2px solid var(--text);
  box-shadow: 0 6px 0 var(--text); font: 650 var(--scene-label)/1 var(--f-sans);
}
.s0-key b { font-size: 1.3em; color: var(--you); }
.s0-key.is-down { box-shadow: 0 1px 0 var(--text); translate: 0 5px; }
.s0-map { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 899px) and (orientation: portrait) {
  /* Short stage: the message stays in the input (no send bubble) and is clamped, so the chat never outgrows the stage. */
  .s0-body { display: none; }
  .s0-chat { grid-template-rows: auto; }
  .s0-input { margin: 8px; padding: 10px; min-height: 0; }
  .s0-text { transform: none !important; opacity: 1 !important; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--scene-meta); }
  .s0-quotes { grid-template-columns: 1fr; gap: 8px; }
  .s0-q { grid-auto-flow: column; justify-content: space-between; align-items: center; padding: 10px 12px; }
  .s0-q p { font-size: var(--scene-meta); }
  .s0-bar { display: none; }
  .s0-doc { gap: 4px; }
  .s0-part { padding: 6px 10px; font-size: var(--scene-meta); }
  .s0-part.k-files { padding-block: 14px; }
  .s0-part.k-hist { padding-block: 8px; }
}
.s0-route { fill: none; stroke: var(--text); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.s0-back { fill: none; stroke: var(--you); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; opacity: .7; }
.s0-start { font: 650 28px var(--f-sans); fill: var(--you); }
.s0-station circle { fill: var(--surface); stroke: var(--text); stroke-width: 3; }
.s0-station .num { font: 650 24px var(--f-sans); fill: var(--text); }
.s0-station .lbl { font: 600 25px var(--f-sans); fill: var(--text-muted); }
.s0-station.k-in circle { fill: var(--model-soft); stroke: var(--model); }
.s0-station.k-ctx circle { fill: var(--you-soft); stroke: var(--you); }
.s0-dot { fill: none; stroke: var(--you); stroke-width: 4; }

/* ---------- Chapter 1 · More than your message goes in ---------- */
.s1 { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
.s1-doc {
  --merge: 0; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-3);
  box-shadow: var(--card-shadow); padding: clamp(14px, 2cqw, 28px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; min-height: 0;
}
.s1-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.s1-title { font: 650 var(--scene-meta)/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.s1-total { font: 560 var(--scene-figure)/1 var(--f-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.s1-stack { display: flex; flex-direction: column; gap: calc((1 - var(--merge)) * 8px); min-height: 0; overflow: hidden; }
.s1-part {
  flex: none; overflow: hidden; border-radius: calc((1 - var(--merge)) * 10px); padding: 10px 16px 0;
  display: grid; align-content: start; gap: 4px;
  border-left: 5px solid var(--line-strong); background: var(--app-soft);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.s1-part.is-off { padding-top: 0; }
.s1-doc.is-interactive .s1-part { transition: height var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.s1-meta { display: flex; align-items: baseline; gap: 12px; font: 650 var(--scene-label)/1.2 var(--f-sans); white-space: nowrap; }
.s1-meta b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.s1-count { flex: none; margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.s1-note { font: 500 var(--scene-meta)/1.2 var(--f-sans); color: var(--text-faint); }
.s1-text { font: 400 var(--scene-body)/1.35 var(--f-serif); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s1-list { margin: 4px 0 0; padding-left: 22px; columns: 3; column-gap: 20px; font: 400 var(--scene-meta)/1.5 var(--f-sans); color: var(--text-faint); }
.s1-part.k-you { background: var(--you-soft); border-left-color: var(--you); }
.s1-part.k-you .s1-text { color: var(--text); }
.s1-part.k-files { background: var(--model-soft); border-left-color: var(--model); }
.s1-part.k-hist { background: var(--cached-soft); border-left-color: var(--cached); }
.s1-foot { display: flex; align-items: center; justify-content: flex-start; gap: 24px; min-height: 44px; }
.s1-merged { opacity: 0; background: var(--text); color: var(--surface); padding: 10px 18px; border-radius: var(--radius-pill); font: 600 var(--scene-label)/1.2 var(--f-sans); }
.s1-share { opacity: 0; font: 560 var(--scene-figure)/1 var(--f-serif); color: var(--you-strong); }

/* ---------- Chapter 8 · The round trip ---------- */
.s8 { position: absolute; inset: 0; display: grid; grid-template-columns: 31% 31% 5% 1fr; grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(10px, 1.6cqw, 24px); row-gap: clamp(12px, 2cqw, 28px); }
.s8-col { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; }
.s8-head { font: 650 var(--scene-meta)/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.s8-msgs { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; min-height: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px); mask-image: linear-gradient(to bottom, transparent, #000 56px); }
.s8-msg { flex: none; font: 400 var(--scene-meta)/1.4 var(--f-sans); padding: 10px 12px; border-radius: 12px; display: grid; gap: 4px; }
.s8-msg .who { font: 700 12px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; }
.s8-msg .w { border-radius: 3px; }
.s8-msg .w.is-chip { background: var(--surface); box-shadow: inset 0 -3px 0 var(--you-mid); }
.s8-msg.is-you { background: var(--you-soft); margin-left: 8%; }
.s8-msg.is-you .who { color: var(--you-strong); }
.s8-msg.is-model { background: var(--model-soft); margin-right: 8%; }
.s8-msg.is-model .who { color: var(--model-strong); }
.s8-msg.is-summary { background: none; border: 2px dashed var(--you); font-style: italic; color: var(--text-muted); }
.s8-msg.is-summary .who { color: var(--you-strong); font-style: normal; }
.s8-stack { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden; }
.s8-block {
  flex: none; overflow: hidden; border-radius: 6px; padding: 0 12px; white-space: nowrap;
  display: flex; align-items: center; gap: 8px; font: 650 var(--scene-label)/1.1 var(--f-sans);
  background: var(--surface-sunk); border-left: 5px solid var(--line-strong);
}
.s8-block .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.s8-block .tok { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 550; }
.s8-block .tag { display: none; font: 700 clamp(12px, 1.05cqw, 15px)/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--surface); background: var(--cached); padding: 4px 6px; border-radius: 4px; }
.s8-block.is-cached .tag { display: inline-block; }
.s8-block.is-new { background: var(--you-soft); border-left-color: var(--you); }
.s8-block.is-cached { background: repeating-linear-gradient(135deg, var(--cached-soft) 0 7px, var(--surface) 7px 14px); border-left-color: var(--cached); color: var(--text-muted); }
.s8-block.is-output { background: var(--model-soft); border-left-color: var(--model); }
.s8-block.is-summary { background: var(--surface); border: 2px dashed var(--you); border-left: 5px solid var(--you); }
.s8-block.is-mute > * { visibility: hidden; }
.s8-wire { align-self: center; width: 100%; height: 30%; overflow: visible; }
.s8-wire-line { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.s8-dot { fill: var(--you); }
.s8-model { grid-template-rows: auto minmax(0, 1fr) auto; }
.s8-box { border: 2px solid var(--text); border-radius: 14px; background: var(--surface); display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; transition: box-shadow var(--dur-3) var(--ease-out); }
.s8-box.is-busy { box-shadow: 0 0 0 5px var(--model-soft), 0 14px 40px -14px rgba(31,72,196,.5); }
.s8-layers { display: flex; flex-direction: column; justify-content: space-evenly; padding: 14px 16px; min-height: 0; }
.s8-layers i { --glow: 0; display: block; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--model) calc(var(--glow) * 100%), var(--c-paper-200)); transform: scaleX(calc(.82 + var(--glow) * .18)); transform-origin: left; }
.s8-cache { border-top: 2px dashed var(--line-strong); padding: 10px 16px 12px; display: grid; gap: 2px; transition: opacity var(--dur-2), background var(--dur-2); }
.s8-cache.is-empty p, .s8-cache.is-empty b { color: var(--text-faint); }
.s8-cache.is-hot { background: var(--cached-soft); }
.s8-cache p { font: 650 var(--scene-meta)/1.2 var(--f-sans); color: var(--cached); }
.s8-cache b { font: 560 var(--scene-figure)/1 var(--f-serif); color: var(--cached); font-variant-numeric: tabular-nums; }
.s8-note { font: 500 var(--scene-meta)/1.3 var(--f-sans); color: var(--text-muted); }
.s8-meter { grid-column: 1 / -1; display: grid; gap: 10px; }
.s8-bar { position: relative; height: 14px; background: var(--surface-sunk); border-radius: 8px; overflow: hidden; }
.s8-fill { position: absolute; inset: 0 auto 0 0; background: var(--text); border-radius: 8px; }
/* The cached share is credited in one go by the model; the bar grows over half a second instead of jumping. */
.s8-cachefill { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(135deg, var(--cached) 0 6px, var(--cached-mid) 6px 12px); border-radius: 8px 0 0 8px; transition: width 520ms var(--ease-out); }
.s8-meter.is-high .s8-fill { background: var(--you); }
.s8-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font: 500 var(--scene-label)/1.2 var(--f-sans); color: var(--text-muted); }
.s8-count b { font: 560 var(--scene-figure)/1 var(--f-serif); color: var(--text); font-variant-numeric: tabular-nums; }
.s8-count em { margin-left: auto; font: 500 var(--scene-meta)/1.2 var(--f-sans); color: var(--text-faint); }

@media (max-width: 899px) and (orientation: portrait) {
  /* Phones: chat and context side by side; the model box is left out, cached blocks keep their stripes. */
  .s8 { grid-template-columns: 44% 1fr; }
  .s8-wire, .s8-model { display: none; }
  .s8-count em { display: none; }
  /* Narrow columns: the stripes alone mark cached blocks, so labels keep their room. */
  .s8-block.is-cached .tag { display: none; }
  /* Narrow parts: the word count wraps under the label instead of being cut off; the file-list texture is left out. */
  .s1-meta { flex-wrap: wrap; row-gap: 2px; }
  .s1-meta b { white-space: normal; }
  .s1-count { margin-left: 0; }
  .s1-list { display: none; }
}