.story {
  --story-top: 5.5rem;
  --steel-black: #040506;
  --steel-deep: #0a0e13;
  --steel-line: rgba(200, 220, 240, .16);
  --cold-text: #e6ebef;
  --cold-body: #aab4bd;
  --cold-muted: #7f8a95;
  --cold-paper: #d3d9de;
  --cold-paper-top: #e1e6ea;
  --cold-edge: rgba(8, 12, 18, .5);
  --cold-ink: #0e151d;
  --alarm: #ff2e3a;
  --alarm-deep: #c3121d;
  --alarm-text: #ff6b72;
  --alarm-rgb: 255 46 58;
  --brand-red: #a31521;
  --night: #050f1b;
  --highlight: rgba(49, 94, 251, .2);
  --highlight-muted: rgba(16, 38, 59, .1);
  --story-ease: cubic-bezier(.2, .75, .2, 1);
  --story-pop: cubic-bezier(.3, 1.5, .5, 1);
  --display-size: clamp(2.5rem, 6vw, 5.4rem);
  --title-size: clamp(2.2rem, 4.2vw, 3.8rem);
  --line-size: clamp(1.05rem, 1.5vw, 1.3rem);
  position: relative;
  border-bottom: 1px solid var(--ink);
}

.story h2,
.story h3,
.story h4,
.story p,
.story ul,
.story ol,
.story dl,
.story dd { margin: 0; }

.story ul,
.story ol { padding: 0; list-style: none; }

.story-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter);
  overflow: hidden;
}

.story-scene--stack { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }

.story-scene--dark {
  color: var(--cold-text);
  background:
    radial-gradient(ellipse 60% 45% at 50% -8%, rgba(160, 190, 215, .18), transparent 70%),
    radial-gradient(ellipse 110% 90% at 50% 50%, #0f151c 0%, var(--steel-deep) 55%, var(--steel-black) 100%);
}

.story-scene--paper,
.story-lamp-scene {
  color: var(--ink);
  background: radial-gradient(ellipse 120% 90% at 50% 40%, var(--paper) 40%, #ece5d8 100%);
}

.story-copy { position: relative; z-index: 1; display: grid; gap: clamp(.9rem, 1.8vw, 1.5rem); max-width: 40rem; }
.story-scene--stack .story-copy { justify-items: center; max-width: 62rem; }

.story-kicker,
.story-folio,
.story-chapter { display: flex; align-items: center; gap: .8rem; font: 800 .72rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.story-kicker { color: var(--alarm-text); }
.story-lamp-scene .story-kicker { color: var(--blue-dark); }
.story-folio { color: var(--cold-muted); }
.story-chapter { color: var(--ink-soft); }
.story-chapter b { display: inline-flex; align-items: center; gap: .8rem; color: var(--blue); }
.story-chapter b::after { content: ""; width: 2.4rem; height: 1px; background: currentColor; }

.story-display { font: 400 var(--display-size)/.98 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.story-display em { font-style: italic; }
.story-scene--dark .story-display em { color: var(--alarm-text); }
.story-scene--paper .story-display em,
.story-lamp-scene .story-display em { color: var(--burgundy); }
.story-title { font: 400 var(--title-size)/1 var(--serif); letter-spacing: -.03em; }
.story-line { max-width: 32em; font: 400 var(--line-size)/1.5 var(--sans); text-wrap: pretty; }
.story-scene--dark .story-line { color: var(--cold-body); }
.story-scene--paper .story-line { color: var(--ink-soft); }
.story-punchline { max-width: 24em; padding-top: .9em; border-top: 2px solid var(--alarm); font: 700 var(--line-size)/1.35 var(--sans); color: var(--cold-text); }
.story-alarm { background: none; color: var(--alarm-text); font-weight: 700; }

.story-visual { position: relative; container: visual / inline-size; width: 100%; aspect-ratio: var(--ratio, 4 / 3); justify-self: center; }
.story-visual--case {
  --ratio: 4 / 3;
  --ratio-number: 1.3333;
  overflow: hidden;
  border: 1px solid var(--steel-line);
  border-radius: .4rem;
  background: linear-gradient(rgba(18, 25, 34, .55), rgba(6, 9, 13, .75));
}

.story-meta { font: 600 max(.52rem, 1.3cqw)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cold-muted); }
.story-file { font: 500 max(.5rem, 1.2cqw)/1.2 var(--mono); color: var(--cold-muted); }

.story-visual--chat { width: min(100%, 46rem); aspect-ratio: auto; }
.story-chat {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .55em .55em .55em .8em;
  border: 1px solid var(--steel-line);
  border-radius: 999px;
  background: linear-gradient(rgba(24, 32, 42, .96), rgba(14, 20, 28, .96));
  color: var(--cold-text);
  font: 400 max(.95rem, 3.4cqw)/1.2 var(--sans);
  box-shadow: 0 1.2em 2.6em rgba(0, 0, 0, .45);
  text-align: left;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.story-chat-plus { flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; border: 1px solid var(--steel-line); border-radius: 50%; color: var(--cold-muted); font-size: .8em; }
.story-chat-field { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.story-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: .08em; vertical-align: -.16em; background: currentColor; animation: story-caret 1.05s steps(1) infinite; }
.story-placeholder { display: none; color: var(--cold-muted); }
.story-typed:empty ~ .story-placeholder { display: inline; }
.story-chat-attachment { flex: none; padding: .25em .6em; border: 1px solid var(--steel-line); border-radius: .4em; color: var(--cold-body); font: 500 .62em/1.3 var(--mono); }
.story-chat-send { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--cold-text); color: var(--steel-black); font-size: .85em; font-weight: 700; }
.story-chat--case { position: absolute; left: 5%; right: 5%; bottom: 5%; z-index: 2; font-size: max(.72rem, 2.2cqw); }
.story-chat--blocked { border-color: var(--alarm); box-shadow: 0 0 0 .12em rgba(255, 46, 58, .35), 0 0 2.4em rgba(255, 46, 58, .3); }

@keyframes story-caret {
  50% { opacity: 0; }
}

.story-banner {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: .75em 1.2em;
  background: repeating-linear-gradient(-45deg, var(--alarm-deep) 0 1.2em, #a50f19 1.2em 2.4em);
  color: #fff;
  font: 600 max(.56rem, 1.45cqw)/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 0 3em rgba(255, 46, 58, .45);
}
.story-banner b { flex: none; font-size: 1.4em; letter-spacing: .16em; }

.story-stack { position: absolute; left: 7%; top: 21%; width: 38%; height: 50%; }
.story-sheet {
  position: absolute;
  left: calc(var(--i) * 1.1%);
  bottom: calc(var(--i) * 2.8%);
  width: 88%;
  height: 70%;
  border: 1px solid var(--cold-edge);
  border-radius: 2px;
  background: linear-gradient(var(--cold-paper-top), var(--cold-paper));
  box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .35);
}
.story-sheet:nth-child(1) { --i: 0; }
.story-sheet:nth-child(2) { --i: 1; }
.story-sheet:nth-child(3) { --i: 2; }
.story-sheet:nth-child(4) { --i: 3; }
.story-sheet:nth-child(5) { --i: 4; }
.story-sheet:nth-child(6) { --i: 5; }
.story-sheet:nth-child(7) { --i: 6; }
.story-sheet:nth-child(8) { --i: 7; }
.story-sheet:nth-child(9) { --i: 8; }
.story-sheet:nth-child(10) { --i: 9; }
.story-sheet--top { display: grid; align-content: start; gap: 7%; padding: 10% 10%; }
.story-sheet--top span { height: .45cqw; min-height: 2px; background: rgba(14, 21, 29, .26); }
.story-sheet--top span:nth-child(3n) { width: 55%; }
.story-stamp {
  position: absolute;
  left: 46%;
  top: 44%;
  padding: .3em .6em;
  border: .18em solid #d0101c;
  background: rgba(225, 230, 234, .82);
  color: #d0101c;
  font: 800 max(.6rem, 2.1cqw)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-12deg);
}
.story-counter { position: absolute; left: 56%; top: 20%; display: grid; justify-items: start; gap: .6cqw; }
.story-count { font: 400 max(2rem, 10cqw)/.9 var(--serif); letter-spacing: -.02em; color: var(--cold-text); font-variant-numeric: tabular-nums; }
.story-unit { margin-bottom: 1.4cqw; font: 400 max(.8rem, 2.2cqw)/1 var(--sans); color: var(--cold-body); }
.story-weekend { display: flex; gap: .5em; }
.story-weekend span { position: relative; padding: .35em .75em; border: 1px solid var(--steel-line); font: 600 max(.6rem, 1.6cqw)/1 var(--sans); color: var(--cold-body); }
.story-weekend span::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; background: var(--alarm); transform: rotate(-24deg); transition: transform .25s ease; }

.story-notes { position: absolute; left: 3%; top: 20%; width: 62%; height: 50%; }
.story-note {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  align-content: start;
  gap: .4em;
  width: 32%;
  height: 78%;
  padding: 4% 4%;
  border: 1px solid var(--cold-edge);
  border-radius: 2px;
  background: linear-gradient(var(--cold-paper-top), var(--cold-paper));
  color: var(--cold-ink);
  font: 500 max(.4rem, 1.15cqw)/1.25 var(--mono);
  box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .35);
  transform-origin: 50% 170%;
  transform: translateX(-50%) rotate(calc(var(--i) * 10deg));
}
.story-note b { font: 400 1.35em/1.1 var(--serif); }
.story-note em { font-style: normal; color: var(--alarm-deep); background: rgba(255, 46, 58, .16); }
.story-note:nth-child(1) { --i: -3; }
.story-note:nth-child(2) { --i: -2; }
.story-note:nth-child(3) { --i: -1; }
.story-note:nth-child(4) { --i: 0; }
.story-note:nth-child(5) { --i: 1; }
.story-note:nth-child(6) { --i: 2; }
.story-note:nth-child(7) { --i: 3; }
.story-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.story-route path { fill: none; stroke: var(--alarm); stroke-width: .45; stroke-dasharray: 1; stroke-dashoffset: 0; }
.story-destination,
.story-sent { position: absolute; right: 6%; font: 600 max(.52rem, 1.3cqw)/1.2 var(--mono); letter-spacing: .08em; color: var(--alarm-text); white-space: nowrap; }
.story-destination { top: 11%; }
.story-sent { top: 16%; text-transform: uppercase; }
.story-sent b { margin-right: .2em; font: 400 2.2em/1 var(--serif); }
.story-leaks { display: none; }
.story-callouts { position: absolute; right: 12%; top: 30%; display: grid; justify-items: end; gap: .6em; }
.story-callouts li {
  padding: .45em .8em;
  border: 1px solid var(--alarm);
  background: rgba(255, 46, 58, .12);
  color: var(--alarm-text);
  font: 700 max(.6rem, 1.8cqw)/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 1.6em rgba(255, 46, 58, .3);
}

.story-retrieval,
.story-answer,
.story-clause { position: absolute; display: grid; gap: .45em; padding: 2.4% 2.8%; }
.story-retrieval { left: 5%; top: 14%; width: 46%; border: 1px dashed rgba(200, 220, 240, .3); background: rgba(18, 25, 34, .9); color: var(--cold-body); font: 400 max(.62rem, 1.55cqw)/1.35 var(--serif); }
.story-retrieval mark { padding: 0 .1em; background: rgba(255, 210, 90, .22); color: #ffd98a; }
.story-answer { left: 5%; top: 46%; width: 38%; border: 1px solid var(--alarm); border-radius: .5em; background: rgba(18, 25, 34, .96); box-shadow: 0 0 2.4em rgba(255, 46, 58, .25); }
.story-answer-value { position: relative; width: fit-content; font: 400 max(1.4rem, 5.6cqw)/1 var(--serif); color: var(--cold-text); }
.story-strike { position: absolute; left: -4%; right: -4%; top: 52%; height: .07em; background: var(--alarm); transform-origin: left center; transition: transform .25s ease; }
.story-answer-note { font: 600 max(.48rem, 1.15cqw)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--alarm-text); }
.story-clause { right: 5%; top: 30%; width: 44%; border-radius: 2px; background: linear-gradient(#f6f0e2, #ece3cf); color: var(--ink); font: 400 max(.64rem, 1.65cqw)/1.4 var(--serif); box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .45); }
.story-clause .story-file { color: var(--ink-soft); }
.story-clause mark { padding: 0 .15em; background: var(--highlight); color: var(--blue-dark); font-weight: 700; }

.story-verdict { align-content: center; }
.story-alerts { display: flex; flex-wrap: wrap; justify-content: center; gap: .7em; }
.story-alerts li { padding: .5em .9em; border: 1px solid var(--alarm); background: rgba(255, 46, 58, .1); color: var(--alarm-text); font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.story-verdict .story-display { max-width: 16em; font-size: calc(var(--display-size) * .82); }
.story-turn { font: italic 400 calc(var(--display-size) * .55)/1.2 var(--serif); color: var(--cold-body); }
.story-dim,
.story-lamp { display: none; }

.story-visual--library { --ratio: 5 / 4; --ratio-number: 1.25; }
.story-boundary { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.story-boundary rect { fill: rgba(49, 94, 251, .05); stroke: var(--ink); stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: 0; }
.story-boundary line { stroke: var(--burgundy); stroke-width: .45; stroke-dasharray: 1; stroke-dashoffset: 0; }
.story-dial { position: absolute; left: 50%; top: 4%; width: max-content; display: flex; align-items: center; gap: .8em; color: var(--ink-soft); font: 600 max(.5rem, 1.25cqw)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
.story-dial .story-meta { color: var(--ink-soft); font: inherit; }
.story-dial-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); background: var(--paper-light); }
.story-dial-mode { position: relative; z-index: 1; padding: .55em .9em; text-align: center; transition: color .2s ease; }
.story-dial-thumb { position: absolute; inset: 0 auto 0 0; width: calc(100% / 3); background: var(--ink); transition: transform .35s var(--story-pop); }
.story-mode-locked { color: var(--paper-light); }
.story-docs { position: absolute; left: 14.4%; top: 22%; width: 71.2%; height: 57%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.8cqw; }
.story-docs li {
  position: relative;
  display: grid;
  align-content: start;
  gap: .5em;
  padding: 9% 9%;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(transparent 0 .9cqw, rgba(16, 38, 59, .08) .9cqw calc(.9cqw + 1px)) 0 100% / 100% 45% no-repeat,
    var(--paper-light);
  color: var(--ink);
  box-shadow: 0 .4cqw 1.1cqw rgba(16, 38, 59, .08);
}
.story-docs b { padding-right: 1.3em; font: 400 max(.58rem, 1.6cqw)/1.15 var(--serif); overflow-wrap: anywhere; hyphens: auto; }
.story-docs span { font: 500 max(.42rem, 1cqw)/1.2 var(--mono); color: var(--ink-soft); overflow-wrap: anywhere; }
.story-docs li::after { content: "✓"; position: absolute; right: 6%; top: 6%; display: grid; place-items: center; width: max(14px, 2.4cqw); height: max(14px, 2.4cqw); background: var(--blue); color: #fff; font: 700 max(.5rem, 1.3cqw)/1 var(--sans); }
.story-docs li:nth-child(1) { --i: 0; }
.story-docs li:nth-child(2) { --i: 1; }
.story-docs li:nth-child(3) { --i: 2; }
.story-docs li:nth-child(4) { --i: 3; }
.story-docs li:nth-child(5) { --i: 4; }
.story-docs li:nth-child(6) { --i: 5; }
.story-docs li:nth-child(7) { --i: 6; }
.story-docs li:nth-child(8) { --i: 7; }
.story-excluded { position: absolute; left: 14.4%; right: 14.4%; bottom: 1.5%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6em; }
.story-excluded li { padding: .4em .7em; border: 1px dashed rgba(125, 46, 60, .5); background: rgba(125, 46, 60, .05); color: var(--burgundy); font: 500 max(.44rem, 1.05cqw)/1.2 var(--mono); text-decoration: line-through; opacity: .7; }
.story-route-label { position: absolute; color: var(--burgundy); font: 600 max(.44rem, 1.05cqw)/1.2 var(--mono); letter-spacing: .06em; white-space: nowrap; }
.story-route-label--model { left: 0; top: 63%; }
.story-route-label--host { right: 0; top: 0; }
.story-route-label--search { right: 0; top: 92%; }
.story-denied { position: absolute; z-index: 2; padding: .38em .6em; background: var(--burgundy); color: #fff; font: 700 max(.48rem, 1.2cqw)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%); transition: opacity .2s ease, transform .35s var(--story-pop); }
.story-denied--model { left: 11.2%; top: 50%; }
.story-denied--host { left: 78.4%; top: 17%; }
.story-denied--search { left: 88.8%; top: 70%; }
.story-boundary-label { position: absolute; left: 11.2%; top: 84.5%; color: var(--ink-soft); font: 600 max(.44rem, 1.05cqw)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.story-visual--sources,
.story-visual--rules,
.story-visual--proof { --ratio: 4 / 3; --ratio-number: 1.3333; }
.story-page { position: absolute; display: grid; align-content: start; gap: .6em; padding: 3.4% 3.8%; border: 1px solid var(--line); background: var(--paper-light); color: var(--ink); box-shadow: 0 1cqw 2.6cqw rgba(16, 38, 59, .12); }
.story-page--back { left: 53%; top: 3%; width: 45%; height: 78%; transform: rotate(2deg); }
.story-page--front { left: 2%; top: 13%; width: 52%; height: 84%; transform: rotate(-1deg); }
.story-page-head { display: flex; justify-content: space-between; gap: 1em; color: var(--ink-soft); font: 500 max(.44rem, 1.05cqw)/1.2 var(--mono); }
.story-page-head b { color: var(--blue-dark); font-weight: 600; }
.story-page h4 { font: 400 max(.9rem, 2.6cqw)/1.1 var(--serif); }
.story-page-meta { color: var(--ink-soft); font: 500 max(.44rem, 1.05cqw)/1.2 var(--sans); }
.story-bars { display: grid; gap: .7cqw; }
.story-bars span { height: max(2px, .5cqw); background: rgba(16, 38, 59, .12); }
.story-bars span:nth-child(3n) { width: 58%; }
.story-clause-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8em; padding: .4em 0 .4em .8em; border-left: 2px solid var(--blue); font: 400 max(.6rem, 1.45cqw)/1.55 var(--serif); }
.story-clause-text b { color: var(--blue-dark); font: 600 .85em/1.8 var(--mono); }
.story-highlight { background-image: linear-gradient(var(--highlight), var(--highlight)); background-repeat: no-repeat; background-size: 100% 100%; }
.story-highlight--muted { background-image: linear-gradient(var(--highlight-muted), var(--highlight-muted)); }

.story-segments { position: absolute; left: 6%; right: 6%; top: 10%; height: 22%; display: grid; grid-template-columns: 1fr 1fr; }
.story-segment { display: grid; align-content: end; gap: .35em; padding: 0 1em .9em; border-bottom: max(4px, .8cqw) solid rgba(16, 38, 59, .28); }
.story-segment--later { border-bottom-color: var(--blue); }
.story-segment b { font: 400 max(1.1rem, 4.2cqw)/1 var(--serif); }
.story-segment--later b { color: var(--blue-dark); }
.story-segment span { color: var(--ink-soft); font: 500 max(.42rem, 1.05cqw)/1.2 var(--mono); }
.story-timeline { position: absolute; left: 6%; right: 6%; top: 36%; height: 16%; }
.story-axis { position: absolute; inset: 0 0 auto; height: 2px; background: var(--ink); transform-origin: left center; }
.story-months { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); color: var(--ink-soft); font: 600 max(.4rem, 1cqw)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.story-months li { padding: .8em 0 0 .3em; border-left: 1px solid var(--line-strong); }
.story-months li:nth-child(1) { --i: 0; }
.story-months li:nth-child(2) { --i: 1; }
.story-months li:nth-child(3) { --i: 2; }
.story-months li:nth-child(4) { --i: 3; }
.story-months li:nth-child(5) { --i: 4; }
.story-months li:nth-child(6) { --i: 5; }
.story-months li:nth-child(7) { --i: 6; }
.story-months li:nth-child(8) { --i: 7; }
.story-months li:nth-child(9) { --i: 8; }
.story-months li:nth-child(10) { --i: 9; }
.story-months li:nth-child(11) { --i: 10; }
.story-months li:nth-child(12) { --i: 11; }
.story-year { position: absolute; right: 0; top: -1.8em; color: var(--ink-soft); font: 700 max(.44rem, 1.05cqw)/1 var(--mono); }
.story-effective { position: absolute; left: 50%; top: -40%; bottom: -30%; width: 2px; background: var(--blue); transform-origin: center top; transition: transform .35s var(--story-pop); }
.story-effective span { position: absolute; left: .7em; bottom: 0; color: var(--blue-dark); font: 700 max(.44rem, 1.05cqw)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.story-rules { position: absolute; left: 6%; right: 6%; top: 60%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3%; }
.story-rule { display: grid; gap: .7em; padding: 4% 5%; border: 1px solid var(--line-strong); background: var(--paper-light); color: var(--ink); font: 400 max(.64rem, 1.6cqw)/1.35 var(--serif); box-shadow: 0 .6cqw 1.6cqw rgba(16, 38, 59, .1); transition: opacity .15s ease, transform .3s var(--story-pop); }
.story-rule > span { display: flex; justify-content: space-between; align-items: center; color: var(--burgundy); font: 700 max(.5rem, 1.2cqw)/1 var(--mono); }
.story-rule em { padding: .35em .55em; background: var(--blue); color: #fff; font: 700 .85em/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }

.story-window { position: absolute; left: 0; top: 8%; width: 68%; padding-bottom: 1.4em; display: grid; align-content: start; gap: .55em; border: 1px solid var(--line-strong); background: var(--paper-light); color: var(--ink); font-size: max(.6rem, 1.45cqw); box-shadow: 0 1.4cqw 3cqw rgba(16, 38, 59, .14); }
.story-window > :not(.story-window-bar) { margin: 0 2.2cqw; }
.story-window-bar { display: flex; align-items: center; gap: 1em; padding: .9em 2.2cqw; border-bottom: 1px solid var(--line); font: 500 .9em/1 var(--sans); }
.story-window-bar b { font-weight: 700; }
.story-window-bar span { color: var(--ink-soft); }
.story-window-bar em { margin-left: auto; padding: .35em .6em; border: 1px solid var(--line-strong); font: 600 .8em/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.story-label { padding-top: .8em; color: var(--blue-dark); font: 700 .74em/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.story-label--cited { color: var(--burgundy); }
.story-question { font: 400 1.65em/1.2 var(--serif); white-space: nowrap; }
.story-answer-text { font: 400 1.4em/1.45 var(--serif); }
.story-answer-text mark { padding: 0 .1em; background: var(--highlight); color: var(--ink); font-weight: 700; transition: background-color .3s ease; }
.story-answer-text sup { padding: .15em .3em; background: rgba(49, 94, 251, .12); color: var(--blue); font: 700 .55em/1 var(--sans); transition: opacity .2s ease, transform .3s var(--story-pop); display: inline-block; }
.story-sources { display: flex; flex-wrap: wrap; gap: .6em; padding-top: .4em; }
.story-sources li { display: flex; align-items: center; gap: .5em; padding: .45em .7em; border: 1px solid var(--line-strong); font: 500 .78em/1 var(--mono); }
.story-sources b { color: var(--blue); }
.story-sources span { color: var(--ink-soft); }
.story-receipt { position: absolute; right: 0; top: 17%; width: 36%; display: grid; align-content: start; gap: .55em; padding: 3.2% 3%; background: var(--ink); color: var(--paper-light); font-size: max(.54rem, 1.3cqw); box-shadow: 1.4cqw 1.4cqw 0 rgba(16, 38, 59, .18); }
.story-receipt-title { font: 700 .95em/1.1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.story-receipt-sub,
.story-receipt-foot { color: #9fb3ff; font: 500 .8em/1.3 var(--mono); }
.story-receipt dl { display: grid; gap: .4em; padding: .7em 0; border-block: 1px solid rgba(255, 255, 255, .2); }
.story-receipt dl div { display: flex; justify-content: space-between; gap: 1em; font: 500 .88em/1.2 var(--mono); }
.story-receipt dt { color: #b9c8ff; }
.story-receipt dd { font-weight: 700; }
.story-receipt-verdict { font: 700 .95em/1.2 var(--sans); transition: opacity .3s ease; }

.story-close { --end: calc(min(100vw, 100svh) / 1080); align-content: center; gap: 0; }
.story-lockup { display: flex; align-items: center; gap: calc(30 * var(--end)); color: var(--ink); }
.story-lockup-mark { display: block; width: calc(188 * var(--end)); height: calc(188 * var(--end)); }
.story-wordmark { font: 700 calc(124 * var(--end))/1 var(--serif); letter-spacing: -.025em; }
.story-close .story-endcard { gap: 0; }
.story-close .story-end-lead { margin-top: calc(58 * var(--end)); color: var(--ink-soft); font: 400 max(1rem, calc(40 * var(--end)))/1.1 var(--serif); letter-spacing: -.02em; }
.story-close .story-end-promise { margin-top: calc(8 * var(--end)); padding: 0 .12em .16em; color: var(--burgundy); font: italic 400 calc(112 * var(--end))/1 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
.story-end-rule { display: block; width: calc(132 * var(--end)); height: max(2px, calc(3 * var(--end))); margin-top: calc(24 * var(--end)); background: var(--brand-red); }
.story-close .story-pillars { margin-top: calc(30 * var(--end)); color: var(--ink-soft); font: 400 max(1rem, calc(30 * var(--end)))/1.2 var(--serif); letter-spacing: -.01em; }
.story-pillars em { color: var(--blue-dark); }
.story-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; }
.story-close .story-actions { margin-top: calc(56 * var(--end)); }
.story-action { display: inline-flex; gap: .6rem; padding: 1rem 1.4rem; background: var(--ink); color: var(--paper-light); font-weight: 700; text-decoration: none; }
.story-actions a:not(.story-action) { font-weight: 700; }

.story-rail { display: none; }

@container visual (width < 520px) {
  .story-banner span,
  .story-excluded li span { display: none; }
  .story-docs b,
  .story-docs span { display: none; }
  .story-excluded { justify-content: center; }
  .story-retrieval { left: 4%; top: 13%; width: 62%; }
  .story-retrieval .story-file { display: none; }
  .story-clause { right: 4%; top: 33%; width: 60%; }
  .story-answer { left: 4%; top: 55%; width: 46%; }
  .story-notes { left: 1%; width: 56%; }
  .story-callouts { right: 10%; }
  .story-window { width: 100%; }
  .story-receipt { top: 66%; width: 58%; }
  .story-receipt dl,
  .story-answer-note { display: none; }
  .story-sources { display: none; }
}

@media (max-width: 980px) {
  .story { --story-top: 4.7rem; }
}

@media (max-width: 820px) {
  .story-scene { grid-template-columns: minmax(0, 1fr); }
}

.story.is-live {
  --display-size: clamp(1.8rem, 7cqmin, 5.8rem);
  --title-size: clamp(1.6rem, 5.4cqmin, 4.2rem);
  --line-size: clamp(.95rem, 2.2cqmin, 1.35rem);
  --visual-height: 76cqh;
}
.story.is-live .story-track { height: calc(var(--story-scroll, 1000vh) + 100svh - var(--story-top)); }
.story.is-live .story-stage { position: sticky; top: var(--story-top); z-index: 21; height: calc(100svh - var(--story-top)); overflow: hidden; container: story / size; background: var(--steel-black); }
.story.is-live .story-scene {
  position: absolute;
  inset: 0;
  align-content: center;
  gap: 3cqmin 5cqw;
  padding: 5cqh 6cqw 10cqh;
  visibility: hidden;
  opacity: var(--presence, 0);
  transform: translateY(calc((1 - var(--presence, 0)) * 2.5cqh));
}
.story.is-live .story-scene[data-active] { visibility: visible; }
.story.is-live .story-copy { gap: 2.2cqmin; }
.story.is-live .story-visual:not(.story-visual--chat) { width: min(100%, calc(var(--visual-height) * var(--ratio-number))); }
.story.is-live .story-visual--chat { width: min(100%, 92cqw, 46rem); }
.story.is-live .story-lamp-scene { color: var(--ink); background: var(--night); }

.story.is-live [data-at] { opacity: var(--reveal, 0); transform: translateY(calc((1 - var(--reveal, 0)) * .6em)); }
.story.is-live [data-read] .story-word {
  --shown: clamp(0, calc((var(--reveal, 0) - var(--at, 0)) / var(--word-fade, .14)), 1);
  display: inline-block;
  opacity: var(--shown);
  transform: translateY(calc((1 - var(--shown)) * .35em));
}
.story.is-live .story-alarm { transition: color .45s ease; }
.story.is-live .story-alarm:not(.is-on) { color: var(--cold-text); }
.story.is-live .story-punchline { border-top-color: rgb(var(--alarm-rgb) / var(--reveal, 0)); }

.story.is-live .story-chat--blocked:not(.is-on) { border-color: var(--steel-line); box-shadow: 0 1.2em 2.6em rgba(0, 0, 0, .45); }
.story.is-live .story-banner { transition: opacity .2s ease, transform .45s var(--story-pop); }
.story.is-live .story-banner:not(.is-on) { opacity: 0; transform: translateY(-110%); }

.story.is-live .story-sheet { --dropped: clamp(0, calc(var(--beat, 0) * 10 - var(--i)), 1); opacity: var(--dropped); transform: translateY(calc((1 - var(--dropped)) * -40%)); }
.story.is-live .story-stamp { transition: opacity .12s ease, transform .3s var(--story-pop); }
.story.is-live .story-stamp:not(.is-on) { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.9); }
.story.is-live .story-weekend:not(.is-on) span::after { transform: rotate(-24deg) scaleX(0); }

.story.is-live .story-notes .story-note { transform: translateX(-50%) rotate(calc(var(--i) * 10deg * var(--beat, 0))); opacity: calc(.2 + var(--beat, 0) * .8); }
.story.is-live .story-notes:not(.is-on) .story-note em { background: none; color: inherit; }
.story.is-live .story-route path { stroke-dashoffset: calc(1 - var(--beat, 0)); }
.story.is-live .story-leaks { position: absolute; inset: 0; display: block; pointer-events: none; }
.story.is-live .story-leak {
  --t: clamp(0, calc(var(--beat, 0) * 2 - var(--i) * .25), 1);
  position: absolute;
  left: calc(88% + var(--t) * 5%);
  top: calc(84% - var(--t) * 70%);
  padding: .25em .6em;
  border: 1px solid var(--alarm);
  background: rgba(255, 46, 58, .16);
  color: var(--alarm-text);
  font: 600 max(.5rem, 1.25cqw)/1 var(--mono);
  white-space: nowrap;
  opacity: min(calc(var(--t) * 6), calc((1 - var(--t)) * 6), 1);
  transform: translate(-100%, -50%);
}
.story.is-live .story-leak:nth-child(1) { --i: 0; }
.story.is-live .story-leak:nth-child(2) { --i: 1; }
.story.is-live .story-leak:nth-child(3) { --i: 2; }
.story.is-live .story-leak:nth-child(4) { --i: 3; }
.story.is-live .story-leak:nth-child(5) { --i: 4; }
.story.is-live .story-sent { transition: opacity .3s ease; }
.story.is-live .story-sent:not(.is-on) { opacity: 0; }
.story.is-live .story-callouts li { transition: opacity .15s ease, transform .35s var(--story-pop); }
.story.is-live .story-callouts li:not(.is-on) { opacity: 0; transform: scale(.6); }

.story.is-live .story-retrieval { opacity: var(--beat, 0); transform: translateY(calc((1 - var(--beat, 0)) * 1.4em)); }
.story.is-live .story-answer { opacity: var(--beat, 0); transform: translateY(calc((1 - var(--beat, 0)) * 1.4em)); transition: border-color .3s ease, box-shadow .3s ease; }
.story.is-live .story-answer:not(.is-on) { border-color: var(--steel-line); box-shadow: none; }
.story.is-live .story-answer:not(.is-on) .story-strike { transform: scaleX(0); }
.story.is-live .story-clause { opacity: var(--beat, 0); transform: translateX(calc((1 - var(--beat, 0)) * 18%)); }

.story.is-live .story-alerts { opacity: calc(var(--beat, 0) * .85); }
.story.is-live .story-dim { position: absolute; inset: 0; z-index: 2; display: block; background: var(--steel-black); opacity: var(--beat, 0); pointer-events: none; }
.story.is-live .story-turn-copy { position: absolute; inset: 0; z-index: 3; max-width: none; place-content: center; padding: 0 6cqw 6cqh; }
.story.is-live .story-lamp {
  position: absolute;
  inset: 0;
  display: block;
  background: radial-gradient(circle at 76% 12%, #fffbee 0, var(--paper) calc(var(--beat, 0) * 115%), rgba(244, 239, 229, 0) calc(var(--beat, 0) * 115% + 20%));
}

.story.is-live .story-boundary rect { stroke-dashoffset: calc(1 - var(--beat, 0)); fill-opacity: var(--beat, 0); }
.story.is-live .story-boundary line { stroke-dashoffset: calc(1 - var(--beat, 0)); }
.story.is-live .story-dial[data-state="controlled"] .story-dial-thumb { transform: translateX(100%); }
.story.is-live .story-dial[data-state="connected"] .story-dial-thumb { transform: translateX(200%); }
.story.is-live .story-dial:not([data-state="locked"]) .story-mode-locked { color: inherit; }
.story.is-live .story-dial[data-state="controlled"] .story-mode-controlled,
.story.is-live .story-dial[data-state="connected"] .story-mode-connected { color: var(--paper-light); }
.story.is-live .story-docs li { --picked: clamp(0, calc(var(--beat, 0) * 8 - var(--i)), 1); opacity: calc(.35 + var(--picked) * .65); }
.story.is-live .story-docs li::after { transform: scale(var(--picked)); }
.story.is-live .story-excluded li { opacity: calc(1 - var(--beat, 0) * .3); transform: translateY(calc(var(--beat, 0) * 25%)); text-decoration-color: rgba(125, 46, 60, var(--beat, 0)); }
.story.is-live .story-route-label { opacity: var(--beat, 0); }
.story.is-live .story-denied:not(.is-on) { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
.story.is-live .story-boundary-label { transition: opacity .3s ease; }
.story.is-live .story-boundary-label:not(.is-on) { opacity: 0; }

.story.is-live .story-highlight { background-size: calc(var(--beat, 0) * 100%) 100%; }

.story.is-live .story-segments { opacity: var(--beat, 0); transform: translateY(calc((1 - var(--beat, 0)) * 1em)); }
.story.is-live .story-axis { transform: scaleX(var(--beat, 0)); }
.story.is-live .story-months li { opacity: clamp(0, calc(var(--beat, 0) * 12 - var(--i)), 1); }
.story.is-live .story-year { opacity: var(--beat, 0); }
.story.is-live .story-effective:not(.is-on) { transform: scaleY(0); }
.story.is-live .story-rule:not(.is-on) { opacity: 0; transform: scale(1.12); }

.story.is-live .story-label--cited:not(.is-on) { opacity: 0; }
.story.is-live .story-answer-text { opacity: var(--beat, 0); transform: translateY(calc((1 - var(--beat, 0)) * .8em)); }
.story.is-live .story-answer-text mark:not(.is-on) { background-color: transparent; }
.story.is-live .story-answer-text sup:not(.is-on) { opacity: 0; transform: scale(.4); }
.story.is-live .story-sources { transition: opacity .3s ease, transform .3s ease; }
.story.is-live .story-sources:not(.is-on) { opacity: 0; transform: translateY(.6em); }
.story.is-live .story-receipt { clip-path: inset(0 0 calc((1 - var(--beat, 0)) * 100%) 0); }
.story.is-live .story-receipt-verdict:not(.is-on) { opacity: .2; }

.story.is-live .story-close { --end: calc(100cqmin / 1080); gap: 0; }
.story.is-live .story-close .story-endcard { gap: 0; }
.story.is-live .story-end-rule { transform: scaleX(var(--beat, 0)); }
.story.is-live .story-lockup {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: calc((1 - var(--beat, 0)) * 100%) 0;
  mask-position: calc((1 - var(--beat, 0)) * 100%) 0;
}

.story.is-live .story-rail {
  position: absolute;
  z-index: 5;
  left: 6cqw;
  right: 6cqw;
  bottom: 3.4cqh;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .6rem;
  font: 700 max(.55rem, 1.15cqmin)/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.story.is-live .story-rail li { padding-top: .75em; border-top: 2px solid rgba(127, 138, 149, .35); color: rgba(127, 138, 149, .85); transition: color .3s ease, border-color .3s ease; }
.story.is-live .story-rail li[data-current] { border-color: var(--blue); color: var(--blue); }
.story.is-live .story-rail li[data-chapter-ref="problem"][data-current] { border-color: var(--alarm); color: var(--alarm-text); }

@container story (orientation: portrait) {
  .story-scene { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .story-scene:not(.story-scene--stack) { --visual-height: 42cqh; }
  .story-rail li { padding-top: 0; font-size: 0; }
}