/* ──────────────────────────────────────────────
   story.css — index.html (story-type top page)
   Story Hero, the Theater hand-off, Carat Discovery.
   Uses shared.css tokens; v3.css still styles the
   section heads, Functions in Motion and the closing.
   ────────────────────────────────────────────── */

/* ── Hero tokens: a calm, low-saturation office; teal arrives with the product ── */
.story-hero {
  --sw: 560px;                         /* office scene width (its height follows) */
  --sh: calc(var(--sw) * 0.7143);      /* 560 × 400 scene */
  --st-line: rgba(30, 41, 59, 0.16);
  --st-desk: #e2e8f0;
  --st-desk-edge: #cbd5e1;
  --st-bezel: #334155;
  --st-screen: #ffffff;
  --st-ink: #e2e8f0;                   /* placeholder text bars on the screen */
  --st-chair: #cbd5e1;
  --st-skin: #e9d3bf;
  --st-hair: #3f4a5a;
  --st-top: #8b9bb0;
  --st-top2: #7a8aa0;
  --st-mug: #94a3b8;
  --st-dot: #94a3b8;
  --st-quiet: #94a3b8;                 /* boundary lines before the product */
  /* the pseudo app on the monitor (theme/core.css values, as in theater.css) */
  --sa-accent: #0d9488;
  --sa-surface: #f8fafc;
  --sa-raised: #ffffff;
  --sa-border: #e2e8f0;
  --sa-text: #0f172a;
  --sa-muted: #64748b;
  position: relative;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .story-hero {
    --st-line: rgba(226, 232, 240, 0.14);
    --st-desk: #1e293b;
    --st-desk-edge: #334155;
    --st-bezel: #3b4a60;
    --st-screen: #0b1220;
    --st-ink: #1f2a3b;
    --st-chair: #273449;
    --st-skin: #c9ab92;
    --st-hair: #0b1220;
    --st-top: #475569;
    --st-top2: #3e4c60;
    --st-mug: #475569;
    --st-dot: #64748b;
    --st-quiet: #64748b;
    --sa-accent: #2dd4bf;
    --sa-surface: #0f172a;
    --sa-raised: #1e293b;
    --sa-border: #334155;
    --sa-text: #e2e8f0;
    --sa-muted: #94a3b8;
  }
}

.story main { padding-top: 0; }

/* a soft teal light behind the stage once the product appears */
.story-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 52% at 50% 52%, var(--accent-light), transparent 72%);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}

.story-hero.st-brand::before { opacity: 0.85; }

/* ══ Stage ══ */

.story-stage {
  position: relative;
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 22px;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 10px;
}

/* head: message, title and lede share one cell, so the space is reserved once (no CLS) */
.story-head {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: center;
  min-height: 150px;
}

.story-head > * { grid-area: 1 / 1; margin: 0; }

.story-message {
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.story-message.is-out { opacity: 0; transform: translateY(6px); }

/* "ローカルAIでも、ここまでできる。" — the first peak: larger, still below the title size */
.story-message.is-peak { font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: 0.02em; }

.story-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.story-product {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.story-sub {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted);
  transition: opacity 0.8s ease 0.5s;
}

.st-title .story-title { opacity: 1; transform: none; }
.story-hero:not(.st-title) .story-sub { opacity: 0; }

.story-lede { display: none; }

/* still summary: title and lede stacked */
.st-static .story-lede {
  display: block;
  grid-area: 2 / 1;
  margin-top: 12px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
}

.st-static .story-head { min-height: 0; }

/* ══ Body: thought cards around the office scene ══ */

.story-body {
  position: relative;
  height: calc(var(--sh) + 44px);   /* 44px above the scene: the internet boundary */
}

.story-scene {
  position: absolute;
  inset: 0;
}

.office-scene {
  position: absolute;
  left: calc(50% - var(--sw) / 2);
  top: 44px;
  width: var(--sw);
  height: var(--sh);
  container-type: inline-size;
  transform-origin: 63% 44%;          /* the monitor */
  transition: transform 1.5s cubic-bezier(0.45, 0, 0.2, 1);
}

.office-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.o-wall { stroke: var(--st-line); }
.o-shelf rect { fill: var(--st-line); }
.o-desk { fill: var(--st-desk); }
.o-desk-edge { fill: var(--st-desk-edge); }
.o-bezel { fill: var(--st-bezel); }
.o-screen { fill: var(--st-screen); }
.o-mug { fill: var(--st-mug); }
.o-mug-handle { stroke: var(--st-mug); }
.o-chair { fill: var(--st-chair); }
.o-top { fill: var(--st-top); }
.o-sleeve { fill: var(--st-top2); }
.o-skin { fill: var(--st-skin); }
.o-hair { fill: var(--st-hair); }

.office-svg g, .office-svg rect, .office-svg path, .office-svg ellipse { transition: opacity 0.9s ease, fill 0.9s ease; }

/* the person steps back with lighter fills (not opacity, so the desk never shows through) */
.st-zoom .o-person,
.st-recede .o-person {
  --st-chair: #e2e8f0;
  --st-top: #cdd5df;
  --st-top2: #c3ccd8;
  --st-skin: #f1e4d8;
  --st-hair: #9aa6b6;
}

@media (prefers-color-scheme: dark) {
  .st-zoom .o-person,
  .st-recede .o-person {
    --st-chair: #1c2738;
    --st-top: #2c3a4e;
    --st-top2: #283547;
    --st-skin: #6f6359;
    --st-hair: #1a2433;
  }
}

/* quiet moment / zoom into the PC: the room steps back */
.st-hush .o-wall, .st-hush .o-shelf, .st-hush .o-mug, .st-hush .o-mug-handle { opacity: 0.6; }
.st-quiet .o-wall, .st-quiet .o-shelf, .st-quiet .o-mug, .st-quiet .o-mug-handle { opacity: 0.45; }
/* one continuous view: office → the monitor → inside the PC; later the app steps forward */
.st-lean .office-scene { transform: scale(1.05); }
.st-zoom .office-scene { transform: scale(1.14); }
.st-forward .office-scene { transform: translateY(-28px) scale(1.15); }
/* stepping forward, the desk's legs would reach into the CTA: cut at the scene's foot */
.st-forward .story-scene { clip-path: inset(-400px -400px 0 -400px); }
.st-zoom .o-wall, .st-zoom .o-shelf { opacity: 0.3; }

/* ── Monitor screen (HTML over the SVG screen rect 204,96 300×156 — the Theater's 1.92 : 1) ── */
.monitor-screen {
  position: absolute;
  left: 36.43%;
  top: 24%;
  width: 53.57%;
  height: 39%;
  border-radius: 3px;
  overflow: hidden;
  container-type: size;
  background: var(--st-screen);
}

.monitor-screen > div {
  position: absolute;
  inset: 0;
  transition: opacity 0.7s ease;
}

/* an ordinary work screen */
.scr-generic {
  display: flex;
  flex-direction: column;
  gap: 5.5cqh;
  padding: 0 7cqw;
}

.scr-bar {
  height: 9cqh;
  margin: 0 -7cqw 3cqh;
  background: var(--st-ink);
  opacity: 0.7;
}

.scr-line {
  position: relative;
  width: var(--w);
  height: 4.5cqh;
  border-radius: 2px;
  background: var(--st-ink);
}

.scr-caret {
  position: absolute;
  left: calc(100% + 1.4cqw);
  top: -1.5cqh;
  width: 1.5px;
  height: 7.5cqh;
  background: var(--muted);
  animation: st-blink 1.06s steps(1) infinite;
}

@keyframes st-blink { 50% { opacity: 0; } }

/* local AI in general: one transformation at a time */
.scr-cap { opacity: 0; }
.st-cap .scr-cap { opacity: 1; }
.st-cap .scr-generic { opacity: 0; }

.cap-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.5cqw;
  font-size: 6.4cqw;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3cqh);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.cap-item.is-on { opacity: 1; transform: none; transition-duration: 0.2s; }
.cap-item.is-past { opacity: 0; transform: translateY(-3cqh); }

.cap-from, .cap-to {
  padding: 1.6cqh 3.2cqw;
  border-radius: 1.6cqw;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
}

.cap-to { color: var(--text); border-color: var(--muted); }
.cap-arrow {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 6cqw;
  color: var(--muted);
}

.cap-proc { position: absolute; display: flex; gap: 1cqw; }

.cap-proc i {
  width: 1.3cqw;
  height: 1.3cqw;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0;
}

.cap-arr, .cap-to { opacity: 0; }
.cap-item.is-on .cap-proc i { animation: cap-dot 0.42s ease both; }
.cap-item.is-on .cap-proc i:nth-child(2) { animation-delay: 0.07s; }
.cap-item.is-on .cap-proc i:nth-child(3) { animation-delay: 0.14s; }
.cap-item.is-on .cap-arr { animation: cap-in 0.2s ease 0.4s both; }
.cap-item.is-on .cap-to { animation: cap-in 0.26s ease 0.44s both; }

@keyframes cap-dot {
  0% { opacity: 0; }
  45% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes cap-in {
  from { opacity: 0; transform: translateX(-3px); }
  to { opacity: 1; transform: none; }
}

/* OnecaratEditor Core: the screen turns into the app (wipes in from the top) */
.scr-app {
  display: flex;
  flex-direction: column;
  background: var(--sa-surface);
  color: var(--sa-text);
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.4s ease;
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}

.st-app .scr-app { opacity: 1; clip-path: inset(0 0 0 0); }
.st-app .scr-generic, .st-app .scr-cap { opacity: 0; transition-delay: 0.5s; }

.sa-menubar {
  padding: 1.4cqh 3cqw;
  font-size: 3.1cqw;
  white-space: pre;
  background: var(--sa-raised);
  border-bottom: 1px solid var(--sa-border);
}

.sa-tabbar {
  display: flex;
  background: var(--sa-raised);
  border-bottom: 1px solid var(--sa-border);
}

.sa-tab {
  padding: 1.2cqh 3.4cqw;
  font-size: 3cqw;
  background: var(--sa-surface);
  box-shadow: inset 0 -2px 0 var(--sa-accent);
}

.sa-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.6cqh;
  padding: 4cqh 4cqw;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 3.6cqw;
  white-space: nowrap;
  overflow: hidden;
}

.sa-status {
  display: flex;
  justify-content: space-between;
  padding: 1cqh 3cqw;
  font-size: 2.7cqw;
  color: var(--sa-muted);
  background: var(--sa-raised);
  border-top: 1px solid var(--sa-border);
}

.sa-llm { color: var(--sa-text); }

/* ── Small light near the person: the idea (no bulb) ── */
.story-spark {
  position: absolute;
  left: 26.5%;
  top: 30%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff7d6;
  box-shadow: 0 0 0 3px rgba(253, 230, 138, 0.35), 0 0 18px 6px rgba(253, 230, 138, 0.45);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.st-spark .story-spark { opacity: 1; transform: none; }

/* ── YOUR PC boundary (first clearly drawn in state 6) ── */
.pc-boundary {
  position: absolute;
  left: 31.5%;
  top: 16%;
  width: 64%;
  height: 65%;
  border: 1.5px dashed var(--st-quiet);
  border-radius: 18px;
  opacity: 0;
  transition: opacity 0.8s ease, border-color 1.2s ease;
  pointer-events: none;
}

.st-pc .pc-boundary { opacity: 1; }
.st-brand .pc-boundary { border-color: var(--accent); }

.pc-label,
.pc-engine {
  position: absolute;
  padding: 0 8px;
  font-size: max(10px, 1.9cqw);
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--muted);
  background: var(--bg);
  white-space: nowrap;
  transition: color 1.2s ease;
}

.pc-label { left: 18px; top: -0.85em; }

.pc-engine {
  left: 50%;
  bottom: -0.85em;
  transform: translateX(-50%);
  letter-spacing: 0.08em;
  border: 1px solid var(--st-quiet);
  border-radius: 999px;
  transition: color 1.2s ease, border-color 1.2s ease;
}

.st-brand .pc-label,
.st-brand .pc-engine { color: var(--accent-dark); }
.st-brand .pc-engine { border-color: var(--accent); }

/* ── The person's small speech bubble ── */
.story-bubble {
  position: absolute;
  left: 0;
  top: 4%;
  max-width: 40%;
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: max(12px, 2.45cqw);
  font-weight: 600;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.story-bubble::after {
  content: "";
  position: absolute;
  left: 58%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

.st-bubble .story-bubble { opacity: 1; transform: none; }

.story-bubble .b1, .story-bubble .b2 { display: block; }
.story-bubble .b2 { opacity: 0; transition: opacity 0.5s ease; }
.st-bubble2 .story-bubble .b2 { opacity: 1; }

/* ── Outside the PC: the internet above it, and data that stops short of it ── */
.story-net {
  position: absolute;
  left: calc(50% - var(--sw) * 0.2);
  width: calc(var(--sw) * 0.66);
  top: 0;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.st-net .story-net { opacity: 1; }

.net-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1.5px dashed var(--st-quiet);
  transition: border-color 0.8s ease;
}

/* the boundary only firms up a little — no alarm colors */
.st-flow .net-line { border-top-color: var(--muted); }

.net-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.net-cloud { width: 28px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; }

.story-flow {
  position: absolute;
  left: calc(50% + var(--sw) * (0.13 - 0.17));   /* centred over the monitor */
  top: 46px;
  width: calc(var(--sw) * 0.34);
  height: calc(var(--sh) * 0.3);
  pointer-events: none;
}

.story-flow i {
  --gap: 0px;               /* how far below the line this one stops */
  position: absolute;
  bottom: 0;
  left: 8%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-dot);
  opacity: 0;
}

.story-flow i:nth-child(2) { left: 30%; --gap: 5px; }
.story-flow i:nth-child(3) { left: 50%; --gap: 1px; }
.story-flow i:nth-child(4) { left: 70%; --gap: 7px; }
.story-flow i:nth-child(5) { left: 90%; --gap: 3px; }

.st-flow .story-flow i { animation: st-flow-y 2.2s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.st-flow .story-flow i:nth-child(2) { animation-delay: 0.18s; }
.st-flow .story-flow i:nth-child(3) { animation-delay: 0.36s; }
.st-flow .story-flow i:nth-child(4) { animation-delay: 0.54s; }
.st-flow .story-flow i:nth-child(5) { animation-delay: 0.72s; }

/* ── Thought cards: UI card × speech bubble, slots reserved (no CLS) ── */
.story-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.task-thought {
  position: absolute;
  width: 238px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* small tail toward the scene: left cards point right, right cards point left */
.task-thought::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  background: var(--surface);
  transform: rotate(45deg);
}

.task-thought:nth-child(odd)::after {
  right: -5px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.task-thought:nth-child(even)::after {
  left: -5px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

/* internal information: a small lock (shown from the Security state on) */
.task-thought[data-lock] { padding-right: 36px; }

.task-thought[data-lock]::before {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 7.2V5.1a3.4 3.4 0 0 1 6.8 0v2.1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='2.6' y='7' width='10.8' height='7.6' rx='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 7.2V5.1a3.4 3.4 0 0 1 6.8 0v2.1' fill='none' stroke='black' stroke-width='1.7'/%3E%3Crect x='2.6' y='7' width='10.8' height='7.6' rx='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.st-locks .task-thought[data-lock]::before { opacity: 1; transform: none; }
.st-locks .task-thought[data-lock] { border-color: var(--muted); }

/* desktop slots: alternate left / right of the scene */
.task-thought:nth-child(odd)  { right: calc(50% + var(--sw) / 2 + 22px); }
.task-thought:nth-child(even) { left: calc(50% + var(--sw) / 2 + 22px); }
.task-thought:nth-child(1) { top: 9%; }
.task-thought:nth-child(2) { top: 13%; }
.task-thought:nth-child(3) { top: 38%; margin-right: 26px; }
.task-thought:nth-child(4) { top: 42%; margin-left: 26px; }
.task-thought:nth-child(5) { top: 67%; }
.task-thought:nth-child(6) { top: 71%; }

.st-cards .task-thought.is-shown { opacity: 1; transform: none; }
/* "AIを使えば…": the cards settle down; with the locks, the locked ones come back up */
.st-cards-dim .task-thought.is-shown { opacity: 0.72; }
.st-locks .task-thought.is-shown { opacity: 0.55; }
.st-locks .task-thought[data-lock].is-shown { opacity: 0.95; }
.task-thought { transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.5s ease; }

/* still summary: all the tasks, quietly */
.st-static .task-thought { opacity: 0.6; transform: none; }

/* ══ Foot: CTA + quiet controls ══ */

.story-foot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
}

.story-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
}

.st-cta .story-ctas {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s;
}

.story-controls {
  position: absolute;
  left: calc(50% + var(--sw) / 2 + 16px);
  top: -40px;               /* level with the foot of the desk */
  display: flex;
  gap: 8px;
}

.story-controls .theater-toggle { position: static; transform: none; }
.story-controls .theater-toggle[hidden] { display: none; }
.story-replay-icon { font-size: 0.95rem; line-height: 1; }

/* paused: frozen CSS motion too */
.story-hero.is-paused *,
.story-hero.is-paused *::before,
.story-hero.is-paused *::after { animation-play-state: paused !important; }

/* ══ 02 Theater: the monitor's screen grows into the demo ══ */

/* room between the Hero's CTA and the next heading */
.story .story-theater { padding-top: 80px; }

.story-theater .theater {
  transform-origin: 50% 0;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.8s ease;
}
.story-js .story-theater .theater.is-waiting { transform: scale(0.62); opacity: 0.35; }

.story-voice {
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 650;
  line-height: 1.6;
  color: var(--text);
}

.story-voice::before {
  /* the same person, as a small head-and-shoulders mark */
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  background:
    radial-gradient(circle at 50% 36%, var(--muted) 0 5px, transparent 5.5px),
    radial-gradient(ellipse 11px 8px at 50% 100%, var(--muted) 0 99%, transparent 100%);
  opacity: 0.55;
}

.story-after {
  margin-top: 30px;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.story-js .story-after.is-waiting { opacity: 0; transform: translateY(6px); }

/* the context menu while a scene heads for "AIテキスト処理...": the other items
   stay where they are, only quieter (theater.js marks them .is-quiet) */
.story-theater .d-ctx-item { transition: opacity 0.25s ease; }
.story-theater .d-ctx-item.is-quiet { opacity: 0.38; }
/* the pointer passing over another item on its way: only a faint trace */
.story-theater .d-ctx-item.is-quiet.is-focused { background: rgba(127, 127, 127, 0.14); color: var(--a-text); }
.story-theater .d-ctx-item.is-quiet.is-focused .d-ctx-short { color: var(--a-muted); opacity: 1; }
.story-theater .d-ctx-item.is-lead:not(.is-focused) { box-shadow: inset 0 0 0 1px var(--a-accent); }

/* ══ 03 Carat Discovery: one wide description, then one stage ══ */

/* close to the Theater's "へぇ…", so the two lines read as one change of mind */
.story .story-carat { padding-top: 40px; }
.story-carat .story-ask { margin-bottom: 56px; transition: opacity 0.9s ease, transform 0.9s ease; }
.story-js .story-ask.is-waiting { opacity: 0; transform: translateY(6px); }

.carat-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 56px;
  align-items: end;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.carat-intro .v3-eyebrow { grid-column: 1 / -1; }
.carat-intro .v3-eyebrow .v3-preview { letter-spacing: 0.1em; }

.carat-lead {
  margin: 0;
  word-break: auto-phrase;   /* ja: break between phrases, not inside a word */
  text-wrap: balance;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.45;
}

.carat-text p { margin: 0; color: var(--muted); line-height: 1.75; }
.carat-text p + p { margin-top: 6px; color: var(--text); }

/* the three demos: tabs (role="tablist") */
.carat-tabs {
  display: flex;
  gap: 10px;
  margin: 26px 0 14px;
}

.carat-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ct-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.72rem;
}

.carat-tab .v3-preview { font-size: 0.6rem; }
.carat-tab:hover { color: var(--text); border-color: var(--muted); }
.carat-tab:active { transform: translateY(1px); }
.carat-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.carat-tab[aria-selected="true"] {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-light);
}

.carat-tab[aria-selected="true"] .ct-num {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .carat-tab[aria-selected="true"] .ct-num { color: #042f2e; }
}

/* one stage; the demos are stacked in its one cell (story.js also pins the
   min-height to the tallest of email / SQL / Studio) */
.carat-stage {
  display: grid;
  min-height: 440px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.84rem;
  line-height: 1.6;
}

.carat-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.carat-stage > .carat-demo,
.carat-stage > .carat-studio {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity 0.35s ease, visibility 0s;
}

.carat-stage[data-ex="2"] > .carat-demo,
.carat-stage:not([data-ex="2"]) > .carat-studio {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.carat-stage:not([data-ex="0"]) .cs-sr0,
.carat-stage:not([data-ex="1"]) .cs-sr1,
.carat-stage:not([data-ex="2"]) .cs-sr2 { display: none; }

/* email / SQL: Coashi → the code → RUN → the result, left to right */
.carat-demo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: stretch;
}

.carat-demo[data-ex="0"] .cd-ex1,
.carat-demo[data-ex="1"] .cd-ex0 { display: none; }

.cd-pane {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

/* small arrows between the panes */
.cd-ask::after, .cd-code::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -17px;
  margin-top: -0.7em;
  color: var(--muted);
  font-size: 0.9rem;
  opacity: 0.7;
}

.cd-title { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.cd-title .fx-initial { width: 24px; height: 24px; font-size: 0.72rem; }

.cd-req {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  min-height: 3.4em;
}

.cd-row { display: flex; justify-content: flex-end; }
/* the run pane carries the height; the first two stay as tall as their content */
.cd-ask, .cd-code { align-self: start; }
.cd-cap { font-size: 0.74rem; color: var(--muted); }

.cd-pre {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-family: Consolas, "Cascadia Code", monospace;
  font-size: 0.76rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.cd-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.cd-tab {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  background: var(--surface);
}

.cd-tab.is-on, .cd-newtab { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.cd-runbtn { margin-left: auto; }

.cd-doc {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  word-break: break-word;
}

.cd-doc > span { white-space: pre-line; }

.cd-doc .fx-mono { white-space: pre-wrap; font-size: 0.74rem; }
.cd-sel { background: rgba(13, 148, 136, 0.16); border-radius: 2px; }

@media (prefers-color-scheme: dark) {
  .cd-sel { background: rgba(45, 212, 191, 0.18); }
}

.cd-out { border-color: var(--accent); }

.cd-toast {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 0.76rem;
  font-weight: 600;
}

.cd-note { margin: 0; font-size: 0.76rem; color: var(--muted); }

/* steps: only hidden while the demo is playing */
.carat-demo [data-step], .carat-studio [data-step] { transition: opacity 0.45s ease, transform 0.45s ease; }
.carat-demo.is-playing [data-step]:not(.is-shown) { opacity: 0; transform: translateY(4px); }
.carat-demo.is-playing .cd-pane.is-now { border-color: var(--accent); }

/* ── Carat Studio: run → stop → the variables → one line ──
   toolbar states from toolbarState.ts: idle = RUN; running = PAUSE / STOP;
   stopped = RESUME + STEP (STEP only shows while stopped) */
.carat-studio { display: flex; flex-direction: column; gap: 12px; }

.cs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cs-title { font-weight: 700; }
.cs-lead { color: var(--muted); font-size: 0.86rem; }
.cs-file { margin-left: auto; color: var(--muted); font-size: 0.74rem; }

.carat-studio .cs-bar { gap: 5px; }
.carat-studio .cs-bar .fx-sbtn { font-size: 0.7rem; padding: 3px 9px; transition: opacity 0.3s ease; }

.cs-b-run { background: var(--accent); border-color: var(--accent) !important; color: #fff !important; }
.cs-b-bg { color: var(--accent-dark) !important; border-color: var(--accent) !important; }
.cs-b-resume, .cs-b-step { display: none; }

@media (prefers-color-scheme: dark) {
  .cs-b-run { color: #042f2e !important; }
}

.carat-studio:not([data-at="0"]) .cs-b-run { background: none; color: var(--muted) !important; border-color: var(--border) !important; opacity: 0.45; }
.carat-studio[data-at="0"] .cs-b-pause,
.carat-studio[data-at="0"] .cs-b-stop { opacity: 0.45; }
.carat-studio[data-at="2"] .cs-b-pause,
.carat-studio[data-at="3"] .cs-b-pause,
.carat-studio[data-at="4"] .cs-b-pause { display: none; }
.carat-studio[data-at="2"] .cs-b-resume, .carat-studio[data-at="2"] .cs-b-step,
.carat-studio[data-at="3"] .cs-b-resume, .carat-studio[data-at="3"] .cs-b-step,
.carat-studio[data-at="4"] .cs-b-resume, .carat-studio[data-at="4"] .cs-b-step { display: inline-block; }

/* the button that was just pressed */
.carat-studio.is-playing[data-at="1"] .cs-b-pause,
.carat-studio.is-playing[data-at="4"] .cs-b-step { animation: cs-press 0.7s ease; }

.cs-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.carat-studio .cs-code { counter-reset: ln 4; font-size: 0.78rem; padding: 8px 0; }
.carat-studio .cs-code li { min-height: 1.95em; transition: background 0.3s ease; }
.carat-studio .cs-code .fx-src-line { white-space: pre; }

/* the line it is stopped on */
.carat-studio[data-at="2"] .cs-l10,
.carat-studio[data-at="3"] .cs-l10,
.carat-studio[data-at="4"] .cs-l11 { background: rgba(217, 119, 6, 0.16); }

.cs-vars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.cs-vars p { margin: 0; }
.cs-vars-msg { color: var(--muted); font-size: 0.78rem; }
.cs-vars-head { color: var(--warn); font-size: 0.78rem; }
.cs-var { gap: 12px; font-size: 0.8rem; align-items: baseline; }
.cs-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; }

.cs-vars > .cs-at0, .cs-vars > .cs-at1, .cs-vars > .cs-at2,
.cs-vars > .cs-at3, .cs-vars > .cs-at4 { display: none; }
.carat-studio[data-at="0"] .cs-at0,
.carat-studio[data-at="1"] .cs-at1,
.carat-studio[data-at="2"] .cs-at2,
.carat-studio[data-at="3"] .cs-at2,
.carat-studio[data-at="4"] p.cs-at4 { display: block; }
.carat-studio[data-at="3"] .cs-at3,
.carat-studio[data-at="4"] .cs-at3,
.carat-studio[data-at="4"] .cs-var.cs-at4 { display: flex; }
.carat-studio.is-playing .cs-vars > * { animation: cs-in 0.4s ease; }

/* the four beats, the current one marked while it plays */
.cs-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--text);
}

.cs-steps li + li::before { content: "→"; margin: 0 10px; color: var(--muted); opacity: 0.7; }
.carat-studio.is-playing .cs-steps li { color: var(--muted); transition: color 0.3s ease; }
.carat-studio.is-playing[data-at="1"] .cs-s1,
.carat-studio.is-playing[data-at="2"] .cs-s2,
.carat-studio.is-playing[data-at="3"] .cs-s3,
.carat-studio.is-playing[data-at="4"] .cs-s4 { color: var(--accent-dark); font-weight: 650; }

.story-carat .v3-fim-under { margin-top: 14px; }
.story .story-carat .v3-fim-under .theater-demo-tag { position: static; transform: none; }

@keyframes cs-press {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  35% { box-shadow: 0 0 0 3px var(--accent-light); }
}

@keyframes cs-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* ══ 04 Functions in motion: the visitor picks a card ══ */

.story .story-fim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story .story-fim-grid .fim-card { grid-column: auto; position: relative; }

/* the card is one button (the name's button covers the whole card) */
.fim-play {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fim-play::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.fim-play:focus-visible { outline: none; }
.fim-play:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }

/* small play mark, top right */
.fim-play-ico {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.fim-play-ico::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -3px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--muted);
}

.story .story-fim-grid .fim-card { transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease; }
.story .story-fim-grid .fim-card:hover { border-color: var(--muted); }
.story .story-fim-grid .fim-card:hover .fim-play-ico,
.fim-play:focus-visible .fim-play-ico { border-color: var(--accent); }
.story .story-fim-grid .fim-card:active { transform: translateY(1px); }
.story .story-fim-grid .fim-card.is-active { border-color: var(--accent); }
.fim-card.is-active .fim-play-ico { border-color: var(--accent); background: var(--accent); }
.fim-card.is-active .fim-play-ico::before { border-left-color: #fff; }
.story .story-fim-grid .fim-head { padding-right: 36px; }

.story .v3-fim .v3-fim-under { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.fim-hint {
  font-size: 0.84rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.fim-hint.is-shown { opacity: 1; }

/* ══ 05 Try: where the visitor decides to give it a go ══ */

.story .story-closing { padding-bottom: 120px; }
.closing-voice { margin: 0 0 6px; color: var(--muted); font-size: 1.05rem; font-weight: 600; }

/* "詳しく知る": a few quiet paths onward, not a table of documents */
.story .v3-more ul { border-top: 0; display: grid; gap: 4px; }
.story .v3-more li { border-bottom: 0; }

.story .v3-more a {
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.story .v3-more a:hover { background: var(--surface); }
.story .v3-more b { min-width: 0; }
.story .v3-more span { line-height: 1.6; }

/* ══ Responsive ══ */

/* ~1024: the cards move to a strip above the scene instead of crowding it.
   The head shares the strip's space: the message sits above the cards, and the
   title (shown after the cards are gone) is centred over both rows. */
@media (max-width: 1199px) {
  .story-hero { --sw: 470px; }
  .story-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(100px, auto) auto auto auto;
    row-gap: 16px;
  }
  .story-body { display: contents; }
  /* every row item in the one column, so the head may overlap the cards' row */
  .story-head, .story-cards, .story-scene, .story-foot { grid-column: 1; }
  .story-head { grid-row: 1; min-height: 0; }
  .story-cards { grid-row: 2; }
  .story-scene { grid-row: 3; }
  .story-foot { grid-row: 4; }
  .story-hero:not(.st-static) .story-head { grid-row: 1 / 3; }
  .story-hero:not(.st-static) .story-message { align-self: start; padding-top: 6px; }
  .story-cards {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
  }
  .task-thought,
  .task-thought:nth-child(n) {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0;
    padding: 9px 14px;
    font-size: 0.88rem;
  }
  .task-thought[data-lock]:nth-child(n) { padding-right: 32px; }
  .task-thought[data-lock]::before { right: 11px; }
  /* tails point down to the scene below the strip */
  .task-thought:nth-child(n)::after {
    top: auto;
    bottom: -5px;
    left: 50%;
    right: auto;
    margin: 0 0 0 -5px;
    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .story-scene { position: relative; height: calc(var(--sh) + 44px); }
}

@media (max-width: 1023px) {
  .story .story-fim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carat-intro { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  /* Coashi and the code on the left, the run on the right */
  .carat-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .cd-ask { grid-column: 1; grid-row: 1; }
  .cd-code { grid-column: 1; grid-row: 2; }
  .cd-run { grid-column: 2; grid-row: 1 / span 2; }
  .cd-ask::after, .cd-code::after { display: none; }
}

/* phones: re-composed top to bottom — person → thoughts → can't go out → local AI → product */
@media (max-width: 640px) {
  .story-hero { --sw: min(calc(100vw - 32px), 420px); }
  .story-stage {
    width: calc(100% - 32px);
    min-height: 0;
    padding: 16px 0 12px;
    grid-template-rows: auto auto minmax(92px, auto) auto;
    row-gap: 12px;
  }
  .story-scene { grid-row: 1; }
  .story-cards { grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .story-head { grid-row: 3; }
  .story-foot { grid-row: 4; flex-direction: column; gap: 10px; }
  /* message under the cards; the title later takes the cards' place */
  .story-hero:not(.st-static) .story-head { grid-row: 2 / 4; }
  .story-hero:not(.st-static) .story-message { align-self: end; padding-top: 0; }
  .task-thought:nth-child(n) { font-size: 0.82rem; padding: 8px 11px; }
  .task-thought[data-lock]:nth-child(n) { padding-right: 28px; }
  .task-thought[data-lock]::before { right: 9px; width: 11px; height: 11px; margin-top: -6px; }
  .task-thought:nth-child(n + 5) { display: none; }
  .story-message { font-size: 1.3rem; }
  .story-message.is-peak { font-size: 1.55rem; }
  .st-lean .office-scene, .st-forward .office-scene { transform: scale(1.03); }
  .st-zoom .office-scene { transform: scale(1.08); }

  .story-net { left: 6%; width: 88%; }
  .net-tag { font-size: 0.74rem; }
  .net-cloud { width: 26px; height: 17px; }

  .story-controls { position: static; }
  .story-bubble { max-width: 46%; padding: 6px 10px; }
  .story .story-fim-grid { grid-template-columns: minmax(0, 1fr); }
  .carat-demo { grid-template-columns: minmax(0, 1fr); }
  .cd-ask, .cd-code, .cd-run { grid-column: 1; grid-row: auto; align-self: stretch; }
  /* the three tabs scroll sideways instead of shrinking */
  .carat-tabs { overflow-x: auto; margin-right: -16px; padding: 2px 16px 4px 2px; scrollbar-width: none; }
  .carat-stage { padding: 12px; }
  .cs-body { grid-template-columns: minmax(0, 1fr); }
  .cs-file { display: none; }
  .story .v3-fim .v3-fim-under { flex-direction: column; align-items: flex-start; }
}

@keyframes st-flow-y {
  0%   { bottom: 0; opacity: 0; }
  15%  { opacity: 0.9; }
  62%  { bottom: calc(100% - 6px - var(--gap)); opacity: 0.9; }
  100% { bottom: calc(100% - 6px - var(--gap)); opacity: 0.6; }
}

/* reduced motion: shared.css turns transitions/animations off; the still summary shows */
@media (prefers-reduced-motion: reduce) {
  .story-js .story-theater .theater.is-waiting { transform: none; opacity: 1; }
  .story-js .story-after.is-waiting,
  .story-js .story-ask.is-waiting { opacity: 1; transform: none; }
}