:root {
  --ink: #05070a;
  --ink-2: #0b0f14;
  --paper: #f4f1e8;
  --muted: #929aa6;
  --line: #27303a;
  --lime: #b8ff36;
  --cyan: #5bdcff;
  --amber: #ffbe45;
  --coral: #ff6f61;
  --violet: #a992ff;
  --title-subtitle-gap: 13px;
  --title-content-gap: 32px;
  --box-copy-size: .36em;
  --box-detail-size: .32em;
  --token-return-duration: 3s;
  --font-display: 'JetBrains Mono', ui-monospace, monospace;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

[data-viz].viz-resetting,
[data-viz].viz-resetting * {
  animation: none !important;
  transition: none !important;
}

.reveal-viewport {
  background:
    radial-gradient(circle at 82% 12%, rgba(91,220,255,.07), transparent 26%),
    radial-gradient(circle at 12% 88%, rgba(184,255,54,.05), transparent 28%),
    var(--ink);
}

.reveal {
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 31px;
  font-weight: 400;
}

.reveal .slides { text-align: left; }
.reveal .slides > section { height: 100%; }

.reveal .stage {
  padding: 38px 56px 34px;
  overflow: hidden;
  isolation: isolate;
}

.reveal .stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.reveal h1, .reveal h2, .reveal h3 {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .98;
  text-transform: none;
}

.reveal h1 { font-size: 2.58em; }
.reveal h2 { font-size: 1.72em; max-width: 1020px; }
.reveal h2 em, .reveal h1 span { color: var(--lime); font-style: normal; }
.reveal p { margin: 0; line-height: 1.35; }
.reveal strong { color: inherit; }
.reveal a { color: inherit; text-decoration: none; }

.overline {
  color: var(--lime);
  font: 600 .42em/1 var(--font-display);
  letter-spacing: .18em;
  margin-bottom: 20px !important;
  text-transform: uppercase;
}
.overline span { display: inline-grid; place-items: center; width: 2em; height: 2em; margin-right: .7em; color: var(--ink); background: var(--lime); border-radius: 50%; letter-spacing: 0; }

.corner-mark {
  position: absolute;
  right: 56px;
  bottom: 28px;
  color: #68717d;
  font: 500 .34em/1 var(--font-display);
  letter-spacing: .1em;
}

.source {
  position: absolute;
  left: 56px;
  bottom: 26px;
  max-width: 1000px;
  color: #717b88;
  font: 400 .31em/1.3 var(--font-display);
}
.source a { border-bottom: 1px solid #36404b; }

.statement {
  margin-top: 20px !important;
  color: var(--paper);
  font: 500 .72em/1.25 var(--font-display);
}
.danger { color: var(--coral); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Title */
.title-stage { display: flex !important; flex-direction: column; justify-content: center; }
.title-stage::before { background-image: linear-gradient(120deg, transparent 52%, rgba(184,255,54,.035) 52% 53%, transparent 53%); mask-image: none; }
.title-stage h1 { max-width: 980px; }
.title-stage .dek { max-width: 620px; margin-top: 30px; color: var(--muted); font-size: .72em; }
.speaker-line { margin-top: 45px; color: var(--paper); font: 500 .39em/1 var(--font-display); letter-spacing: .04em; }
.speaker-line i { display: inline-block; width: 28px; height: 1px; margin: 0 12px 4px; background: var(--line); }

/* Media */
.media-stage h2 { position: relative; z-index: 2; max-width: 1050px; }
.demo-split { position: relative; width: 100%; margin-top: var(--title-content-gap); display: grid; grid-template-columns: minmax(0, 800px) 1fr; gap: 28px; align-items: stretch; }
.cinema { position: relative; width: 100%; height: 450px; margin: 0; border: 1px solid #303a45; border-radius: 8px; background: #101419; overflow: hidden; box-shadow: 0 35px 90px rgba(0,0,0,.55); }
.cinema video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cinema::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.demo-cues { position: relative; min-width: 0; border-left: 1px solid var(--line); padding-left: 25px; }
.demo-cue { opacity: 0; transform: translateY(13px); transition: opacity .35s ease, transform .35s ease; }
.demo-cue > span { display: block; margin-bottom: 10px; color: var(--muted); font: 600 .28em/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.demo-cue strong { display: block; font: 600 .76em/1.05 var(--font-display); letter-spacing: -.045em; }
.cue-fast strong { color: var(--lime); }
.demo-cue strong em { color: inherit; font-style: normal; }
.cue-fast strong::before { content: '✓'; display: inline-block; margin-right: .22em; color: var(--lime); font-size: 1em; vertical-align: .02em; }
.demo-cue small { display: block; margin-top: 10px; color: var(--muted); font: 500 .35em/1.25 var(--font-display); }
.demo-cue small b { color: var(--paper); }
.cue-slow { position: absolute; left: 25px; right: 0; top: 235px; padding-top: 20px; border-top: 1px solid var(--line); }
.cue-slow strong { color: var(--coral); font-size: .63em; }
.cue-slow strong::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .45em; border: .11em solid rgba(255,111,97,.28); border-top-color: var(--coral); border-radius: 50%; vertical-align: -.02em; animation: cue-spin .8s linear infinite; }
.done-copy { display: none; }
.media-stage.video-finished .cue-slow strong { color: var(--coral); }
.media-stage.video-finished .cue-slow strong::before { content: '✓'; width: auto; height: auto; margin-right: .22em; color: var(--coral); border: 0; border-radius: 0; font-size: 1em; vertical-align: .02em; animation: none; }
.media-stage.video-finished .working-copy,
.media-stage.video-finished .working-detail { display: none; }
.media-stage.video-finished .done-copy { display: inline; }
@keyframes cue-spin { to { transform: rotate(360deg); } }
.media-stage.cue-fast-visible .cue-fast,
.media-stage.cue-slow-visible .cue-slow { opacity: 1; transform: none; }

/* Thesis */
.thesis-stage { display: flex !important; flex-direction: column; justify-content: center; }
.thesis-lockup { margin-top: 16px; }
.thesis-lockup p { color: var(--paper); font: 500 1.4em/1.25 var(--font-display); letter-spacing: -.055em; white-space: nowrap; }
.thesis-lockup p + p { margin-top: 10px; }
.thesis-lockup strong { color: var(--lime); }

/* Request path */
.request-title { max-width: none !important; font-size: 1.55em !important; white-space: nowrap; }
.request-journey { position: relative; margin: var(--title-content-gap) 0 0; }
.journey-ownership { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-bottom: 10px; }
.journey-ownership span { padding-bottom: 9px; color: var(--muted); border-bottom: 1px solid var(--line); font: 600 .32em/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.journey-ownership span:first-child { grid-column: 1; color: var(--violet); }
.journey-ownership span:last-child { grid-column: 2 / -1; color: var(--cyan); }
.journey-line { position: absolute; top: 47px; left: 2.5%; right: 2.5%; height: 2px; background: #27323c; }
.journey-line::after { content: ''; position: absolute; right: -1px; top: -4px; border-width: 5px 0 5px 8px; border-style: solid; border-color: transparent transparent transparent #4f5b67; }
.journey-line i { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 6px rgba(184,255,54,.1), 0 0 22px rgba(184,255,54,.8); opacity: 0; }
.viz-active .journey-line i { animation: journey-pulse 8.2s .2s cubic-bezier(.3,.05,.2,1) both; }
.journey-stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }
.journey-stage { --stage-color: var(--cyan); position: relative; min-width: 0; height: 276px; padding: 18px 15px 15px; overflow: visible; background: rgba(15,20,26,.9); border: 1px solid #28323d; border-top: 4px solid var(--stage-color); opacity: .3; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease, background-color .35s ease, box-shadow .35s ease; }
.journey-stage::after { content: '→'; position: absolute; z-index: 2; top: 102px; right: -14px; color: #64707c; font: 500 .72em/1 var(--font-display); }
.journey-stage:last-child::after { content: none; }
.viz-active .journey-stage { opacity: 1; transform: none; animation: journey-highlight 8.2s ease both; }
.viz-active .journey-stage:nth-child(1) { transition-delay: .15s; animation-delay: .15s; }
.viz-active .journey-stage:nth-child(2) { transition-delay: .75s; animation-delay: .75s; }
.viz-active .journey-stage:nth-child(3) { transition-delay: 1.35s; animation-delay: 1.35s; }
.viz-active .journey-stage:nth-child(4) { transition-delay: 1.95s; animation-delay: 1.95s; }
.viz-active .journey-stage:nth-child(5) { transition-delay: 2.55s; animation-delay: 2.55s; }
.viz-active .journey-stage:nth-child(6) { transition-delay: 3.15s; animation-delay: 3.15s; }
.journey-stage.application { --stage-color: var(--violet); }
.journey-stage:not(.application) { --stage-color: var(--cyan); }
.journey-stage b { display: block; min-height: 46px; font: 600 .52em/1.08 var(--font-display); letter-spacing: -.045em; }
.journey-stage small { display: block; min-height: 38px; margin-top: 7px; color: var(--muted); font: 500 var(--box-copy-size)/1.2 var(--font-display); }
.journey-stage ul { display: grid; gap: 6px; margin: 11px 0 0; padding: 11px 0 0; border-top: 1px solid #26303a; list-style: none; }
.journey-stage li { color: #c4cad1; font: 400 var(--box-copy-size)/1.15 var(--font-display); }
.journey-stage li::before { content: '·'; margin-right: 6px; color: var(--stage-color); }
.journey-return { position: relative; height: 34px; margin: 13px 20px 0; border-bottom: 1px solid #394550; opacity: 0; transition: opacity .4s ease 3.8s; }
.journey-return::before { content: ''; position: absolute; left: -1px; bottom: -5px; border-width: 5px 8px 5px 0; border-style: solid; border-color: transparent #596673 transparent transparent; }
.journey-return i { position: absolute; right: 0; bottom: -6px; width: 12px; height: 12px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 6px rgba(184,255,54,.1), 0 0 22px rgba(184,255,54,.8); opacity: 0; }
.journey-return span { position: absolute; right: 0; bottom: 8px; color: var(--muted); font: 500 .31em/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.viz-active .journey-return { opacity: 1; }
.viz-active .journey-return i { animation: journey-return-pulse 8.2s .2s cubic-bezier(.3,.05,.2,1) both; }
@keyframes journey-pulse {
  0% { left: 0; opacity: 0; }
  3% { opacity: 1; }
  53% { left: calc(100% - 12px); opacity: 1; }
  56%, 100% { left: calc(100% - 12px); opacity: 0; }
}
@keyframes journey-return-pulse {
  0%, 57% { right: 0; opacity: 0; }
  60% { opacity: 1; }
  96% { right: calc(100% - 12px); opacity: 1; }
  99%, 100% { right: calc(100% - 12px); opacity: 0; }
}
@keyframes journey-highlight {
  0%, 10%, 100% { background: rgba(15,20,26,.9); box-shadow: none; }
  5% { background: color-mix(in srgb, var(--stage-color) 11%, #0f141a); box-shadow: 0 0 0 1px color-mix(in srgb, var(--stage-color) 45%, transparent), 0 16px 36px rgba(0,0,0,.28); }
}

/* Machinery */
.machinery { margin: var(--title-content-gap) 0 0; }
.provider-boundary { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 28px 18px 18px; border: 1px solid #33404c; background: rgba(15,20,26,.8); }
.boundary-label { position: absolute; top: -9px; left: 18px; padding: 0 10px; color: var(--cyan); background: var(--ink); font: 600 .3em var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.machine { position: relative; min-height: 154px; padding: 17px 18px 15px 70px; border-left: 1px solid var(--line); }
.machine i { position: absolute; left: 17px; top: 17px; display: grid; place-items: center; width: 35px; height: 35px; color: var(--ink); background: var(--cyan); border-radius: 50%; font: 700 .34em var(--font-display); }
.machine b { display: block; font: 600 .57em/1.05 var(--font-display); }
.machine small { display: block; margin-top: 18px; color: var(--muted); font: 400 .34em/1.2 var(--font-display); }
.control-strip { display: grid; grid-template-columns: 1.2fr repeat(3,1fr); align-items: center; gap: 8px; margin-top: 10px; }
.control-strip span, .control-strip b { padding: 13px 16px; font: 500 .35em/1.1 var(--font-display); }
.control-strip span { color: var(--lime); text-transform: uppercase; letter-spacing: .1em; }
.control-strip b { border-bottom: 2px solid var(--lime); background: rgba(184,255,54,.07); }

/* Measurement */
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: var(--title-content-gap) 0 0; }
.metric-card { --metric-color: var(--cyan); min-height: 152px; padding: 17px 19px 16px; background: rgba(15,20,26,.9); border: 1px solid #2b3540; border-top: 4px solid var(--metric-color); opacity: 0; transform: translateY(9px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.75,.25,1); }
.metric-card.metric-ttft { --metric-color: var(--lime); }
.metric-card.metric-speed { --metric-color: var(--amber); }
.metric-card.metric-api { --metric-color: var(--cyan); }
.metric-card.metric-app { --metric-color: var(--violet); }
.metric-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.metric-card header b { color: var(--metric-color); font: 650 .48em/1 var(--font-display); letter-spacing: -.035em; }
.metric-card header span { color: var(--muted); font: 500 .34em/1 var(--font-display); letter-spacing: .07em; text-transform: uppercase; }
.metric-card p { margin: 14px 0 0 !important; color: var(--paper); font: 450 .4em/1.25 var(--font-display); }
.metric-card p i { color: var(--metric-color); font-style: normal; }
.metric-card strong { display: block; margin-top: 12px; color: var(--muted); font: 500 var(--box-copy-size)/1.15 var(--font-display); }
.viz-active .metric-card { opacity: 1; transform: none; }
.viz-active .metric-card:nth-of-type(2) { transition-delay: .18s; }
.viz-active .metric-card:nth-of-type(3) { transition-delay: .36s; }
.viz-active .metric-card:nth-of-type(4) { transition-delay: .54s; }

.metric-journey { margin: var(--title-content-gap) 0 0; }
.metric-path { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding-top: 13px; }
.metric-path::before { content: ''; position: absolute; left: 2.5%; right: 2.5%; top: 18px; height: 2px; background: #303b46; }
.metric-path::after { content: ''; position: absolute; right: 2%; top: 14px; border-width: 5px 0 5px 8px; border-style: solid; border-color: transparent transparent transparent #596673; }
.metric-stage { --stage-color: var(--cyan); position: relative; z-index: 1; min-width: 0; min-height: 94px; padding: 17px 12px 11px; background: rgba(15,20,26,.94); border: 1px solid #29343e; border-top: 3px solid var(--stage-color); opacity: .22; transform: translateY(9px); transition: opacity .35s ease, transform .35s ease; }
.metric-stage.app-stage { --stage-color: var(--violet); }
.metric-stage b { display: block; font: 600 .39em/1.08 var(--font-display); letter-spacing: -.025em; }
.metric-stage small { display: block; margin-top: 8px; color: var(--muted); font: 450 var(--box-detail-size)/1.15 var(--font-display); }
.metric-stage em { display: block; margin-top: 7px; color: var(--violet); font: 550 var(--box-detail-size)/1.15 var(--font-display); font-style: normal; opacity: 0; }
.request-pulse { position: absolute; z-index: 3; top: 13px; left: 2.5%; width: 11px; height: 11px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 5px rgba(184,255,54,.1), 0 0 18px rgba(184,255,54,.8); opacity: 0; }
.viz-active .metric-stage { opacity: 1; transform: none; }
.viz-active .metric-stage:nth-of-type(2) { transition-delay: .55s; }
.viz-active .metric-stage:nth-of-type(3) { transition-delay: 1.05s; }
.viz-active .metric-stage:nth-of-type(4) { transition-delay: 1.55s; }
.viz-active .metric-stage:nth-of-type(5) { transition-delay: 2.05s; }
.viz-active .metric-stage:nth-of-type(6) { transition-delay: 2.55s; }
.viz-active .request-pulse { animation: metric-request-pulse 4.2s .2s cubic-bezier(.3,.05,.2,1) both; }
.viz-active .metric-stage em { animation: metric-app-finish .4s 9.95s ease both; }

.token-return { position: relative; height: 32px; margin: 5px 20px 0; border-bottom: 1px solid #3b4854; }
.token-return::before { content: ''; position: absolute; left: -1px; bottom: -5px; border-width: 5px 8px 5px 0; border-style: solid; border-color: transparent #596673 transparent transparent; }
.token-return > span { position: absolute; right: 0; bottom: 7px; color: var(--muted); font: 500 .28em/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.token-return i { position: absolute; right: 0; bottom: -5px; width: 10px; height: 10px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 12px rgba(184,255,54,.7); opacity: 0; }
.viz-active .token-return i { animation: metric-token-return var(--token-return-duration) var(--token-delay) ease-in-out both; }

.metric-example-note { margin: 20px 0 0 !important; color: var(--muted); font: 500 .29em/1 var(--font-display); letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.metric-readouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; }
.metric-readout { --readout-color: var(--cyan); position: relative; min-width: 0; min-height: 118px; padding: 14px 15px 12px; background: rgba(15,20,26,.94); border: 1px solid #2b3540; border-top: 3px solid var(--readout-color); opacity: 0; transform: translateY(7px); }
.readout-ttft { --readout-color: var(--lime); }
.readout-speed { --readout-color: var(--amber); }
.readout-api { --readout-color: var(--cyan); }
.readout-app { --readout-color: var(--violet); }
.metric-readout > span { display: block; color: var(--readout-color); font: 650 .36em/1 var(--font-display); }
.metric-readout > strong { display: block; margin-top: 25px; color: var(--paper); font: 650 .58em/1 var(--font-display); letter-spacing: -.04em; }
.metric-readout > strong small { color: var(--muted); font: 500 .5em/1 var(--font-display); letter-spacing: 0; }
.speedometer { position: absolute; left: 15px; bottom: 6px; width: 125px; height: 74px; }
.speedometer svg { width: 100%; height: 100%; overflow: visible; }
.gauge-track, .gauge-range { fill: none; stroke-width: 7; stroke-linecap: round; }
.gauge-track { stroke: #35404a; }
.gauge-range { stroke: var(--amber); opacity: .68; }
.speedometer text { fill: var(--muted); font: 500 10px var(--font-display); }
.gauge-needle { transform: rotate(54deg); transform-origin: 60px 58px; }
.gauge-needle line { stroke: var(--paper); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,190,69,.9)); }
.gauge-needle circle { fill: var(--paper); }
.metric-readout .gauge-final { position: absolute; right: 15px; top: 50px; margin: 0; font-size: .58em; opacity: 0; }
.metric-readout .gauge-final small { font-size: .5em; }
.viz-active .readout-ttft { animation: metric-reading .35s 6.75s ease both; }
.viz-active .readout-speed { animation: metric-reading .35s 7.05s ease both; }
.viz-active .gauge-needle { animation: gauge-sweep 1.85s 7.05s ease-in-out both; }
.viz-active .gauge-final { animation: metric-reading .3s 8.95s ease both; }
.viz-active .readout-api { animation: metric-reading .35s 8.95s ease both; }
.viz-active .readout-app { animation: metric-reading .35s 9.95s ease both; }

@keyframes metric-request-pulse {
  0% { left: 2.5%; opacity: 0; }
  4% { opacity: 1; }
  88% { left: calc(97.5% - 11px); opacity: 1; }
  93%, 100% { left: calc(97.5% - 11px); opacity: 0; }
}
@keyframes metric-token-return {
  0% { right: 0; opacity: 0; }
  8% { opacity: 1; }
  84% { right: calc(100% - 10px); opacity: 1; }
  100% { right: calc(100% - 10px); opacity: 0; }
}
@keyframes metric-reading { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes metric-app-finish { from { opacity: 0; } to { opacity: 1; } }
@keyframes gauge-sweep {
  0% { transform: rotate(54deg); }
  22% { transform: rotate(84deg); }
  43% { transform: rotate(61deg); }
  64% { transform: rotate(90deg); }
  82% { transform: rotate(65deg); }
  100% { transform: rotate(72deg); }
}

.percentile-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(270px, .85fr); gap: 34px; align-items: center; margin-top: var(--title-content-gap); }
.distribution { margin: 0; }
.distribution svg { width: 100%; height: 270px; overflow: visible; }
.dist-fill { fill: rgba(91,220,255,.1); opacity: 0; transition: opacity .7s ease .2s; }
.dist-line { fill: none; stroke: var(--cyan); stroke-width: 4; stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.75,.25,1); }
.dist-baseline { stroke: #34414c; stroke-width: 2; }
.marker { opacity: 0; transform: translateY(7px); transition: opacity .35s ease, transform .35s ease; }
.marker line { stroke: #707b86; stroke-width: 2; stroke-dasharray: 5 7; }
.marker circle { fill: var(--paper); }
.marker text { fill: var(--paper); font: 650 23px var(--font-display); text-anchor: middle; }
.marker .marker-detail { fill: var(--muted); font: 500 16px var(--font-display); }
.marker.p95 text, .marker.p95 line { fill: var(--amber); stroke: var(--amber); }
.marker.p95 circle { fill: var(--amber); }
.marker.p99 text, .marker.p99 line { fill: var(--coral); stroke: var(--coral); }
.marker.p99 circle { fill: var(--coral); }
.marker.p95 .marker-detail, .marker.p99 .marker-detail { fill: var(--muted); }
.latency-axis-label { fill: var(--muted); font: 500 16px var(--font-display); text-anchor: end; }
.viz-active .dist-fill { opacity: 1; }
.viz-active .dist-line { stroke-dashoffset: 0; }
.viz-active .marker { opacity: 1; transform: none; }
.viz-active .marker.p50 { transition-delay: .7s; }
.viz-active .marker.p95 { transition-delay: 1s; }
.viz-active .marker.p99 { transition-delay: 1.3s; }
.percentile-points { display: grid; gap: 22px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.percentile-points li { --point-color: var(--paper); position: relative; padding-left: 24px; opacity: 0; transform: translateX(7px); transition: opacity .35s ease, transform .35s ease; }
.percentile-points li::marker { content: ''; }
.percentile-points li::before { content: ''; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: var(--point-color); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--point-color) 14%, transparent); }
.percentile-points .point-p95 { --point-color: var(--amber); }
.percentile-points .point-p99 { --point-color: var(--coral); }
.percentile-points b { display: block; color: var(--point-color); font: 650 .43em/1 var(--font-display); }
.percentile-points span { display: block; margin-top: 7px; color: var(--muted); font: 450 var(--box-copy-size)/1.3 var(--font-display); }
.viz-active .percentile-points li { opacity: 1; transform: none; }
.viz-active .percentile-points li:nth-child(1) { transition-delay: .7s; }
.viz-active .percentile-points li:nth-child(2) { transition-delay: 1s; }
.viz-active .percentile-points li:nth-child(3) { transition-delay: 1.3s; }

/* Playbook */
.playbook-stage h2 { max-width: 900px; }
.lever-ribbon { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin: var(--title-content-gap) 0 0 !important; padding: 0 !important; list-style: none !important; }
.lever-ribbon li { min-height: 170px; padding: 22px; border-top: 3px solid var(--lime); background: #10151b; opacity: 0; transform: translateY(9px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.75,.25,1); }
.lever-ribbon li::marker { content: ''; }
.lever-ribbon i { color: var(--lime); font: 600 .36em var(--font-display); font-style: normal; }
.lever-ribbon b { display: block; margin-top: 34px; font: 600 .53em/1.15 var(--font-display); }
.lever-ribbon.viz-active li { opacity: 1; transform: none; }
.lever-ribbon.viz-active li:nth-child(2) { transition-delay: .18s; }
.lever-ribbon.viz-active li:nth-child(3) { transition-delay: .36s; }
.lever-ribbon.viz-active li:nth-child(4) { transition-delay: .54s; }
.lever-ribbon.viz-active li:nth-child(5) { transition-delay: .72s; }

/* Model benchmark decision */
.route-subhead { margin-top: var(--title-subtitle-gap) !important; color: var(--muted); font: 500 .5em/1.3 var(--font-display); }
.benchmark-choice { width: 100%; margin: var(--title-content-gap) 0 0; }
.benchmark-choice svg { display: block; width: 100%; height: 335px; overflow: visible; }
.benchmark-grid line { stroke: #26313b; stroke-width: 1.5; }
.benchmark-ticks text { fill: #707a86; font: 500 15px var(--font-display); text-anchor: end; }
.benchmark-ticks text:nth-child(n+5) { text-anchor: middle; }
.benchmark-axis { fill: var(--muted); font: 500 16px var(--font-display); text-anchor: middle; }
.quality-zone { fill: rgba(184,255,54,.045); opacity: 0; transition: opacity .45s ease 1.65s; }
.quality-bar { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 8 7; stroke-dashoffset: 307; opacity: 0; transition: stroke-dashoffset .6s ease 1.65s, opacity .2s ease 1.65s; }
.quality-label { fill: var(--lime); font: 600 15px var(--font-display); opacity: 0; transition: opacity .35s ease 1.95s; }
.quality-speed-fit { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .85s ease .98s, opacity .2s ease .98s; }
.benchmark-point { opacity: 0; transition: opacity .35s ease var(--delay); }
.benchmark-point circle { fill: var(--cyan); stroke: var(--ink); stroke-width: 3; }
.benchmark-point text { fill: var(--paper); font: 500 16px var(--font-display); }
.benchmark-point.below-bar circle { fill: #4b5865; }
.benchmark-point.below-bar text { fill: #77828e; }
.benchmark-point.qualifying-choice > circle:not(.choice-ring) { fill: var(--lime); }
.benchmark-point .choice-ring { fill: none; stroke: var(--lime); stroke-width: 3; opacity: 0; transform: scale(.55); transform-box: fill-box; transform-origin: center; transition: opacity .3s ease 2.25s, transform .35s ease 2.25s; }
.choice-callout { opacity: 0; transition: opacity .35s ease 2.39s; }
.choice-callout path { fill: none; stroke: var(--lime); stroke-width: 2; }
.choice-callout text { fill: var(--lime); font-weight: 600; }
.benchmark-choice.viz-active .quality-zone,
.benchmark-choice.viz-active .quality-label,
.benchmark-choice.viz-active .benchmark-point,
.benchmark-choice.viz-active .choice-callout { opacity: 1; }
.benchmark-choice.viz-active .quality-bar { opacity: 1; stroke-dashoffset: 0; }
.benchmark-choice.viz-active .quality-speed-fit { opacity: 1; stroke-dashoffset: 0; }
.benchmark-choice.viz-active .choice-ring { opacity: 1; transform: scale(1); }
.decision-stage .benchmark-point,
.decision-stage .quality-speed-fit { opacity: 1; transition: none; }
.decision-stage .quality-speed-fit { stroke-dashoffset: 0; }
.decision-stage .quality-zone { transition-delay: 1s; }
.decision-stage .quality-bar { transition: stroke-dashoffset .6s ease 1s, opacity .2s ease 1s; }
.decision-stage .quality-label { transition-delay: 1.3s; }
.decision-stage .quality-speed-fit.excluded-fit { stroke: #56616d; opacity: 0; stroke-dashoffset: 0; transition: opacity .35s ease 1.58s; }
.decision-stage .benchmark-point.below-bar circle { fill: var(--cyan); transition: fill .35s ease 1.58s; }
.decision-stage .benchmark-point.below-bar text { fill: var(--paper); transition: fill .35s ease 1.58s; }
.decision-stage .benchmark-point.qualifying-choice > circle:not(.choice-ring) { fill: var(--cyan); transition: fill .35s ease 1.58s; }
.decision-stage .benchmark-point .choice-ring { transition: opacity .3s ease 1.58s, transform .35s ease 1.58s; }
.decision-stage .choice-callout { transition-delay: 1.74s; }
.decision-stage .benchmark-choice.viz-active .quality-speed-fit.excluded-fit { opacity: 1; }
.decision-stage .benchmark-choice.viz-active .benchmark-point.below-bar circle { fill: #4b5865; }
.decision-stage .benchmark-choice.viz-active .benchmark-point.below-bar text { fill: #77828e; }
.decision-stage .benchmark-choice.viz-active .benchmark-point.qualifying-choice > circle:not(.choice-ring) { fill: var(--lime); }
.benchmark-note { position: absolute; right: 56px; bottom: 48px; color: var(--muted); font: 500 .31em/1.3 var(--font-display); }
.benchmark-note strong { color: var(--lime); }

/* Agentic compounding */
.agent-compound-chart { margin: var(--title-content-gap) 0 0; }
.agent-assumptions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.agent-assumptions span { padding: 13px 14px; color: var(--muted); border: 1px solid var(--line); background: rgba(15,20,26,.92); font: 500 .32em/1.2 var(--font-display); }
.agent-assumptions b { margin-right: 8px; color: var(--paper); font-size: 1.28em; }
.duration-axis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 17px 140px 2px 290px; color: #707a86; font: 500 .28em/1 var(--font-display); }
.duration-axis span:last-child { text-align: right; }
.duration-row { display: grid; grid-template-columns: 275px 1fr 125px; align-items: center; gap: 15px; min-height: 68px; border-top: 1px solid #202832; }
.duration-row > div b, .duration-row > div small { display: block; font-family: var(--font-display); }
.duration-row > div b { font-size: .4em; }
.duration-row > div small { margin-top: 6px; color: var(--muted); font-size: var(--box-detail-size); }
.duration-track { height: 36px; background-image: linear-gradient(90deg, #2c3641 1px, transparent 1px); background-size: 33.333% 100%; background-color: rgba(255,255,255,.018); }
.duration-track i { display: block; width: 0; height: 100%; overflow: hidden; background: var(--lime); transition: width .85s cubic-bezier(.2,.75,.2,1) .25s; }
.duration-total { color: var(--paper); font: 700 .38em/1 var(--font-display); opacity: 0; transition: opacity .25s ease .95s; }
.slow-model .duration-track i { background: var(--amber); transition-delay: .5s; }
.slow-model .duration-total { transition-delay: 1.2s; }
.agent-compound-chart.viz-active .duration-track i { width: max(var(--bar-width), 12px); }
.agent-compound-chart.viz-active .duration-total { opacity: 1; }
.compound-delta { display: flex; flex-direction: column; align-items: flex-end; margin-top: 12px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease 1.38s, transform .35s ease 1.38s; }
.compound-delta strong { color: var(--lime); font: 700 .86em/1 var(--font-display); }
.compound-delta span { margin-top: 10px; color: var(--paper); font: 700 .52em/1 var(--font-display); letter-spacing: -.025em; }
.agent-compound-chart.viz-active .compound-delta { opacity: 1; transform: none; }

/* Wire optimization */
.wire-stage h2, .compression-stage h2 { max-width: none; font-size: 1.36em; white-space: nowrap; }
.wire-subhead { margin-top: var(--title-subtitle-gap) !important; color: var(--muted); font: 500 .5em/1.3 var(--font-display); }
.wire-optimization { margin: var(--title-content-gap) 0 0; }
.wire-primary { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
.client-lifecycle { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.client-code { min-width: 0; height: 156px; padding: 14px 15px; background: rgba(15,20,26,.94); border: 1px solid var(--line); border-top: 3px solid var(--coral); opacity: 0; transform: translateY(8px); transition: opacity .35s ease .08s, transform .35s ease .08s; }
.client-code-good { border-top-color: var(--lime); transition-delay: .32s; }
.client-code header { color: var(--coral); font: 600 var(--box-detail-size)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.client-code-good header { color: var(--lime); }
.client-code header i { margin-right: 5px; font-style: normal; }
.client-code pre { width: auto; margin: 15px 0 0; box-shadow: none; }
.client-code code { max-height: none; padding: 0; color: var(--paper); background: transparent; font: 500 .33em/1.48 var(--font-display); white-space: pre; }
.client-code code b { color: var(--coral); font-weight: 600; }
.client-code-good code b { color: var(--lime); }
.client-lifecycle > p { grid-column: 1 / -1; margin-top: 1px; color: var(--paper); font: 600 .43em/1 var(--font-display); opacity: 0; transform: translateY(7px); transition: opacity .35s ease .52s, transform .35s ease .52s; }
.connection-math { padding: 14px 16px; background: rgba(15,20,26,.94); border: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity .4s ease .58s, transform .4s ease .58s; }
.setup-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1.12fr; align-items: center; gap: 7px; }
.setup-equation > span { min-width: 0; }
.setup-equation small { display: block; color: var(--muted); font: 500 var(--box-detail-size)/1.2 var(--font-display); }
.setup-equation small b { color: var(--cyan); font-weight: 500; }
.setup-equation strong { display: block; margin-top: 7px; color: var(--cyan); font: 700 .58em/1 var(--font-display); }
.setup-equation > i { color: #64707c; font: 400 .42em/1 var(--font-display); font-style: normal; }
.setup-equation .setup-total { padding: 10px 12px; background: rgba(184,255,54,.07); border-left: 3px solid var(--lime); }
.setup-equation .setup-total strong { color: var(--lime); }
.connection-math > p { margin-top: 13px; color: var(--muted); font: 500 var(--box-detail-size)/1.3 var(--font-display); }
.connection-math > p b { color: var(--paper); }
.rtt-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 11px 0 0 !important; padding: 0 !important; list-style: none !important; }
.rtt-scenarios li { padding: 7px 8px; background: #11171d; border: 1px solid #27313b; opacity: 0; transform: translateY(5px); transition: opacity .28s ease, transform .28s ease; }
.rtt-scenarios li::marker { content: ''; }
.rtt-scenarios span, .rtt-scenarios small { display: block; color: var(--muted); font: 500 var(--box-detail-size)/1.15 var(--font-display); }
.rtt-scenarios b { display: block; margin: 5px 0 3px; color: var(--paper); font: 650 .4em/1 var(--font-display); }
.rtt-scenarios .featured { border-color: rgba(184,255,54,.45); }
.rtt-scenarios .featured b { color: var(--lime); }
.transport-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 15px 0 0 !important; padding: 0 !important; list-style: none !important; }
.transport-actions li { position: relative; min-height: 91px; padding: 13px 15px; overflow: hidden; background: #11171d; border-top: 3px solid var(--cyan); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.transport-actions li::marker { content: ''; }
.transport-actions li:nth-child(1) { transition-delay: 1.22s; }
.transport-actions li:nth-child(2) { transition-delay: 1.4s; }
.transport-actions li:nth-child(3) { transition-delay: 1.58s; }
.transport-actions b { display: block; color: var(--cyan); font: 600 .39em/1.1 var(--font-display); }
.transport-actions span { display: block; max-width: 315px; margin-top: 7px; color: var(--muted); font: 500 var(--box-detail-size)/1.25 var(--font-display); }
.http2-action span { max-width: 265px; }
.multiplex { position: absolute; right: 13px; top: 15px; width: 64px; height: 55px; }
.multiplex i { position: absolute; left: 0; width: 48px; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.multiplex i:nth-child(1) { top: 8px; transition-delay: 1.68s; }
.multiplex i:nth-child(2) { top: 25px; transition-delay: 1.78s; }
.multiplex i:nth-child(3) { top: 42px; transition-delay: 1.88s; }
.multiplex strong { position: absolute; right: 0; top: 2px; width: 5px; height: 47px; background: var(--lime); }
.wire-optimization.viz-active .client-code,
.wire-optimization.viz-active .client-lifecycle > p,
.wire-optimization.viz-active .connection-math,
.wire-optimization.viz-active .rtt-scenarios li,
.wire-optimization.viz-active .transport-actions li { opacity: 1; transform: none; }
.wire-optimization.viz-active .rtt-scenarios li:nth-child(1) { transition-delay: .88s; }
.wire-optimization.viz-active .rtt-scenarios li:nth-child(2) { transition-delay: .98s; }
.wire-optimization.viz-active .rtt-scenarios li:nth-child(3) { transition-delay: 1.08s; }
.wire-optimization.viz-active .multiplex i { transform: scaleX(1); }

/* Connection waterfall */
.waterfall-context { display: flex; align-items: center; gap: 17px; opacity: 0; transform: translateY(6px); transition: opacity .3s ease .06s, transform .3s ease .06s; }
.waterfall-context > span { color: var(--muted); font: 600 var(--box-detail-size)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.waterfall-context b { display: flex; align-items: center; gap: 7px; color: var(--paper); font: 600 .32em/1 var(--font-display); }
.waterfall-context b i { width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 12px rgba(91,220,255,.55); }
.waterfall-lane { position: relative; margin-top: 11px; }
.waterfall-lane header { display: flex; align-items: baseline; gap: 13px; margin-bottom: 7px; opacity: 0; transform: translateY(6px); transition: opacity .3s ease .16s, transform .3s ease .16s; }
.waterfall-lane header b { color: var(--paper); font: 650 .36em/1 var(--font-display); }
.waterfall-lane header span { color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); }
.waterfall-steps { display: grid; grid-template-columns: .8fr 1.08fr 1.08fr 1.7fr; gap: 7px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.waterfall-steps li { position: relative; min-width: 0; min-height: 119px; padding: 14px 15px 12px; overflow: hidden; background: rgba(15,20,26,.94); border: 1px solid #2a3540; border-top: 4px solid var(--cyan); opacity: 0; transform: translateX(-12px); transition: opacity .34s ease, transform .34s ease; }
.waterfall-steps li::marker { content: ''; }
.waterfall-steps li::after { content: ''; position: absolute; top: 0; right: 0; width: 34%; height: 100%; background: linear-gradient(90deg, transparent, rgba(91,220,255,.035)); pointer-events: none; }
.waterfall-steps li:nth-child(1) { transition-delay: .28s; border-top-color: #7f8b96; }
.waterfall-steps li:nth-child(2) { transition-delay: .52s; }
.waterfall-steps li:nth-child(3) { transition-delay: .76s; }
.waterfall-steps li:nth-child(4) { transition-delay: 1s; border-top-color: var(--lime); }
.waterfall-steps small, .waterfall-steps strong, .waterfall-steps span { position: relative; z-index: 1; display: block; font-family: var(--font-display); }
.waterfall-steps small { color: var(--paper); font-size: .34em; font-weight: 600; line-height: 1; }
.waterfall-steps strong { margin-top: 12px; color: var(--cyan); font-size: .62em; line-height: 1; }
.waterfall-steps .dns-step strong { color: #b1bbc4; }
.waterfall-steps .upload-step strong { color: var(--lime); }
.waterfall-steps span { margin-top: 10px; color: var(--muted); font-size: var(--box-detail-size); line-height: 1.25; }
.waterfall-steps span b { color: #78848f; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.waterfall-steps span i { color: var(--muted); font-style: normal; }
.fresh-cost { display: flex; align-items: center; justify-content: space-between; width: 44%; margin: 8px 0 0 17%; padding-top: 7px; border-top: 2px solid rgba(91,220,255,.56); opacity: 0; transition: opacity .3s ease 1.22s; }
.fresh-cost span { color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); }
.fresh-cost b { color: var(--paper); font: 600 .32em/1 var(--font-display); }
.fresh-cost b i { color: var(--cyan); font-style: normal; }
.warm-waterfall { display: grid; grid-template-columns: 295px 1fr; align-items: center; gap: 14px; margin-top: 11px; padding: 10px 13px; background: rgba(184,255,54,.045); border: 1px solid rgba(184,255,54,.25); opacity: 0; transform: translateY(7px); transition: opacity .4s ease 1.42s, transform .4s ease 1.42s; }
.warm-waterfall header { display: block; margin: 0; opacity: 1; transform: none; transition: none; }
.warm-waterfall header b, .warm-waterfall header span { display: block; }
.warm-waterfall header b { color: var(--lime); }
.warm-waterfall header span { margin-top: 6px; }
.warm-upload { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 9px 15px; background: rgba(184,255,54,.07); border-left: 4px solid var(--lime); }
.warm-upload small { color: var(--paper); font: 600 .34em/1 var(--font-display); }
.warm-upload strong { color: var(--lime); font: 700 .48em/1 var(--font-display); }
.waterfall-takeaway { margin-top: 11px !important; color: var(--paper); font: 600 .44em/1 var(--font-display); opacity: 0; transform: translateY(6px); transition: opacity .35s ease 1.72s, transform .35s ease 1.72s; }
.waterfall-takeaway span { color: var(--lime); }
.wire-optimization.viz-active .waterfall-context,
.wire-optimization.viz-active .waterfall-lane header,
.wire-optimization.viz-active .waterfall-steps li,
.wire-optimization.viz-active .fresh-cost,
.wire-optimization.viz-active .warm-waterfall,
.wire-optimization.viz-active .waterfall-takeaway { opacity: 1; transform: none; }

/* DevTools-style request timeline */
.devtools-waterfall { margin-top: 11px; background: rgba(12,17,22,.76); border: 1px solid #29333d; }
.waterfall-axis, .waterfall-rows li, .warm-waterfall-row { display: grid; grid-template-columns: 255px 1fr; }
.waterfall-axis { min-height: 36px; align-items: end; border-bottom: 1px solid #303a44; opacity: 0; transition: opacity .3s ease .16s; }
.waterfall-axis > span { padding: 0 13px 8px; color: var(--paper); font: 650 .34em/1 var(--font-display); }
.waterfall-scale { position: relative; height: 35px; border-left: 1px solid #39444f; }
.waterfall-scale::after { content: ''; position: absolute; left: 72%; top: 0; bottom: 0; border-left: 1px dashed rgba(184,255,54,.45); }
.waterfall-scale i { position: absolute; left: var(--tick); bottom: 7px; color: #74808b; font: 500 var(--box-detail-size)/1 var(--font-display); font-style: normal; transform: translateX(-50%); }
.waterfall-scale i:first-child { transform: none; }
.waterfall-scale b { position: absolute; left: 79%; bottom: 7px; color: var(--lime); font: 500 var(--box-detail-size)/1 var(--font-display); }
.waterfall-rows { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.waterfall-rows li { min-height: 50px; border-bottom: 1px solid rgba(47,58,68,.72); opacity: 0; transition: opacity .28s ease; }
.waterfall-rows li::marker { content: ''; }
.waterfall-rows li:nth-child(1) { transition-delay: .28s; }
.waterfall-rows li:nth-child(2) { transition-delay: .5s; }
.waterfall-rows li:nth-child(3) { transition-delay: .72s; }
.waterfall-rows li:nth-child(4) { transition-delay: .94s; }
.waterfall-label { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 7px 13px; background: rgba(17,23,29,.8); }
.waterfall-label b { color: var(--paper); font: 600 .33em/1 var(--font-display); }
.waterfall-label span { margin-top: 5px; overflow: hidden; color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.waterfall-label span i { color: #a4afb9; font-style: normal; }
.waterfall-track { position: relative; min-width: 0; overflow: hidden; background: rgba(7,11,15,.32); }
.waterfall-track::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 72%; background-image: repeating-linear-gradient(90deg, rgba(82,96,108,.22) 0 1px, transparent 1px 20%); }
.waterfall-track::after { content: ''; position: absolute; left: 72%; top: 0; bottom: 0; border-left: 1px dashed rgba(184,255,54,.28); }
.waterfall-bar { position: absolute; left: var(--bar-left); top: 9px; width: var(--bar-width); height: 31px; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; background: #697682; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-style: normal; transform: scaleX(0); transform-origin: left; transition: transform .44s cubic-bezier(.2,.75,.2,1); }
.waterfall-rows li:nth-child(1) .waterfall-bar { transition-delay: .3s; }
.waterfall-rows li:nth-child(2) .waterfall-bar { transition-delay: .52s; }
.waterfall-rows li:nth-child(3) .waterfall-bar { transition-delay: .74s; }
.waterfall-rows li:nth-child(4) .waterfall-bar { transition-delay: .96s; }
.waterfall-bar strong { overflow: hidden; color: #f4f7f9; font: 650 .29em/1 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.dns-bar { background: #267ba2; }
.tcp-bar { background: #2f9cc2; }
.tls-bar { background: #4bbfce; }
.upload-bar { justify-content: flex-start; padding-left: 14px; background: repeating-linear-gradient(135deg, rgba(184,255,54,.58) 0 8px, rgba(184,255,54,.34) 8px 16px); }
.upload-bar strong { color: #10160d; }
.setup-bracket { display: grid; grid-template-columns: 255px 1fr; min-height: 36px; align-items: center; opacity: 0; transition: opacity .3s ease 1.18s; }
.setup-bracket > span { padding: 0 13px; color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); }
.setup-bracket > div { position: relative; height: 29px; }
.setup-bracket > div i { position: absolute; left: 0; top: 5px; width: 72%; height: 8px; border: 1px solid var(--cyan); border-top: 0; }
.setup-bracket > div b { position: absolute; left: 36%; top: 17px; color: var(--paper); font: 600 var(--box-detail-size)/1 var(--font-display); transform: translateX(-50%); white-space: nowrap; }
.setup-bracket > div em { color: var(--cyan); font-style: normal; }
.warm-waterfall-row { min-height: 58px; margin-top: 18px; overflow: hidden; background: rgba(184,255,54,.035); border: 1px solid rgba(184,255,54,.4); box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px); transition: opacity .4s ease 1.78s, transform .4s ease 1.78s; }
.warm-waterfall-row .waterfall-label { background: rgba(184,255,54,.045); }
.warm-waterfall-row .waterfall-label b { color: var(--lime); }
.warm-upload-bar { --bar-left:0%; --bar-width:100%; justify-content: flex-start; padding-left: 14px; background: repeating-linear-gradient(135deg, rgba(184,255,54,.62) 0 9px, rgba(184,255,54,.38) 9px 18px); -webkit-mask-image: linear-gradient(90deg,#000 0,#000 58%,transparent 94%); mask-image: linear-gradient(90deg,#000 0,#000 58%,transparent 94%); transition-delay: 1.98s; }
.warm-upload-bar strong { color: #10160d; }
.wire-optimization.viz-active .waterfall-axis,
.wire-optimization.viz-active .waterfall-rows li,
.wire-optimization.viz-active .setup-bracket,
.wire-optimization.viz-active .warm-waterfall-row { opacity: 1; transform: none; }
.wire-optimization.viz-active .waterfall-bar { transform: scaleX(1); }

/* Connection reuse */
.reuse-stage h2 { max-width: none; font-size: 1.45em; white-space: nowrap; }
.reuse-subhead { margin-top: var(--title-subtitle-gap) !important; color: var(--muted); font: 500 .5em/1.3 var(--font-display); }
.reuse-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: 26px; margin: var(--title-content-gap) 0 0; }
.reuse-demo { min-width: 0; padding: 14px 16px; background: rgba(12,17,22,.8); border: 1px solid #2a3540; }
.reuse-request { transition: background-color .55s ease 3.35s, box-shadow .55s ease 3.35s; }
.reuse-request header { display: flex; align-items: baseline; min-height: 25px; border-bottom: 1px solid #303a44; }
.reuse-request header span { color: var(--paper); font: 650 var(--box-detail-size)/1 var(--font-display); white-space: nowrap; }
.reuse-first-request { opacity: 1; }
.reuse-first-request header,
.reuse-first-request header span,
.reuse-first-request .reuse-row,
.reuse-first-request .reuse-row b { transition: color .55s ease 3.35s, border-color .55s ease 3.35s, background-color .55s ease 3.35s; }
.reuse-later-request { margin-top: 16px; opacity: 0; transform: translateY(9px); transition: opacity .45s ease 3.35s, transform .45s ease 3.35s; }
.reuse-later-request header span { color: var(--lime); }
.reuse-trace { padding-top: 4px; }
.reuse-row { display: grid; grid-template-columns: 105px 1fr; align-items: center; min-height: 37px; overflow: hidden; border-bottom: 1px solid rgba(46,57,67,.75); }
.reuse-row b { color: var(--paper); font: 600 var(--box-detail-size)/1 var(--font-display); }
.reuse-row > span { position: relative; height: 26px; background: repeating-linear-gradient(90deg, rgba(81,96,109,.2) 0 1px, transparent 1px 20%); }
.reuse-row > span i { position: absolute; top: 5px; height: 16px; background: var(--cyan); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.2,.75,.2,1); }
.reuse-dns > span i { left: 0; width: 18%; background: #267ba2; }
.reuse-tcp > span i { left: 18%; width: 26%; background: #2f9cc2; }
.reuse-tls > span i { left: 44%; width: 26%; background: #4bbfce; }
.reuse-dns > span i { transition-delay: .35s; }
.reuse-tcp > span i { transition-delay: .8s; }
.reuse-tls > span i { transition-delay: 1.25s; }
.reuse-cold-upload > span i { left: 70%; width: 30%; background: repeating-linear-gradient(135deg, rgba(184,255,54,.65) 0 7px, rgba(184,255,54,.4) 7px 14px); transition: transform .55s cubic-bezier(.2,.75,.2,1) 1.7s, background .55s ease 3.35s; }
.reuse-warm-upload > span i { left: 0; width: 30%; background: repeating-linear-gradient(135deg, rgba(184,255,54,.65) 0 7px, rgba(184,255,54,.4) 7px 14px); transition-delay: 3.65s; }
.reuse-layout.viz-active .reuse-row > span i { transform: scaleX(1); }
.reuse-layout.viz-active .reuse-first-request { background: rgba(91,220,255,.035); }
.reuse-layout.viz-active .reuse-first-request header { border-color: rgba(91,220,255,.32); }
.reuse-layout.viz-active .reuse-first-request header span { color: #7fc7df; }
.reuse-layout.viz-active .reuse-first-request .reuse-row { border-color: rgba(91,220,255,.18); }
.reuse-layout.viz-active .reuse-first-request .reuse-row b { color: #78aabc; }
.reuse-layout.viz-active .reuse-cold-upload > span i { background: repeating-linear-gradient(135deg, rgba(91,220,255,.58) 0 7px, rgba(47,156,194,.38) 7px 14px); }
.reuse-layout.viz-active .reuse-later-request { opacity: 1; transform: none; }
.reuse-practical { min-width: 0; }
.reuse-actions { display: grid; gap: 7px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.reuse-actions li { display: grid; grid-template-columns: 43px 1fr; align-items: center; min-height: 56px; padding: 9px 13px; background: #11171d; border-left: 3px solid var(--cyan); opacity: 0; transform: translateX(8px); transition: opacity .3s ease, transform .3s ease; }
.reuse-actions li::marker { content: ''; }
.reuse-actions li:nth-child(1) { transition-delay: 4.35s; }
.reuse-actions li:nth-child(2) { transition-delay: 4.55s; }
.reuse-actions li:nth-child(3) { transition-delay: 4.75s; }
.reuse-actions i { color: var(--cyan); font: 600 var(--box-detail-size)/1 var(--font-display); font-style: normal; }
.reuse-actions span { color: var(--paper); font: 550 var(--box-detail-size)/1.25 var(--font-display); }
.reuse-layout.viz-active .reuse-actions li { opacity: 1; transform: none; }
.reuse-actions .http2-action { align-items: baseline; min-height: 130px; padding-top: 11px; }
.reuse-actions .http2-action > div > span { display: block; max-width: none; line-height: 1; }
.http2-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; opacity: 0; transform: translateY(7px); transition: opacity .35s ease 4.95s, transform .35s ease 4.95s; }
.http2-benefits article { min-width: 0; min-height: 63px; padding: 9px 10px; background: rgba(91,220,255,.045); border-top: 2px solid var(--cyan); }
.http2-benefits b, .http2-benefits small { display: block; font-family: var(--font-display); }
.http2-benefits b { color: var(--cyan); font-size: var(--box-detail-size); line-height: 1; }
.http2-benefits small { margin-top: 6px; color: var(--muted); font-size: var(--box-detail-size); line-height: 1.2; }
.reuse-layout.viz-active .http2-benefits { opacity: 1; transform: none; }
.http2-example { margin-top: 10px; padding: 12px 15px 10px; background: #0d1217; border: 1px solid #2a3540; opacity: 0; transform: translateY(7px); transition: opacity .35s ease 5.25s, transform .35s ease 5.25s; }
.reuse-layout.viz-active .http2-example { opacity: 1; transform: none; }
.http2-example header { display: flex; align-items: center; justify-content: space-between; }
.http2-example header b { color: var(--lime); font: 600 .33em/1 var(--font-display); }
.http2-example header span { color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.http2-example pre { width: auto; margin: 8px 0 0; box-shadow: none; }
.http2-example pre code { display: block; max-height: none; padding: 10px 12px; color: var(--paper); background: #080c10; font: 500 var(--box-detail-size)/1.42 var(--font-display); text-align: left; white-space: pre; }
.http2-example .code-line { display: block; margin: 0; padding: 0; color: var(--paper); text-indent: 0; }
.http2-example .code-line i { color: var(--cyan); font-style: normal; }
.http2-example > p { margin-top: 9px !important; color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); }
.http2-example > p code { color: var(--paper); }

/* Payload compression benchmark */
.compression-benchmark { margin: 22px 0 0; }
.compression-layout { display: grid; grid-template-columns: minmax(0,1.52fr) minmax(390px,.9fr); gap: 24px; align-items: start; }
.compression-main { min-width: 0; }
.compression-context { color: var(--muted); font: 500 .34em/1 var(--font-display); opacity: 0; transform: translateY(6px); transition: opacity .3s ease .2s, transform .3s ease .2s; }
.compression-context span { color: var(--paper); }
.payload-transform { position: relative; display: grid; grid-template-columns: minmax(190px,1fr) 34px 125px 34px 105px 34px 100px; align-items: center; gap: 6px; min-height: 174px; margin-top: 13px; }
.payload-hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; background: #10161c; border: 1px solid #2b3742; font-family: var(--font-display); opacity: 0; }
.payload-hero span, .payload-hero b { position: relative; z-index: 1; display: block; }
.payload-hero span { color: var(--muted); font-size: var(--box-copy-size); line-height: 1; text-transform: uppercase; letter-spacing: .08em; }
.payload-hero b { margin-top: 12px; color: var(--paper); font-size: .72em; line-height: 1; }
.payload-hero i { position: absolute; inset: 0; opacity: .18; }
.payload-json-hero { min-height: 150px; padding: 22px 26px; border-left: 5px solid var(--cyan); transform: translateY(8px); transition: opacity .4s ease .6s, transform .4s ease .6s; }
.payload-json-hero i { background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(91,220,255,.28) 18px 20px); }
.payload-compressed-hero { width: 92px; min-height: 88px; justify-self: center; padding: 13px 11px; border-color: rgba(184,255,54,.55); border-left: 5px solid var(--lime); transform: translateX(-42px) scale(1.65,1.25); transform-origin: right center; transition: opacity .45s ease 2.6s, transform .7s cubic-bezier(.2,.75,.2,1) 2.6s; }
.payload-compressed-hero span { font-size: var(--box-detail-size); }
.payload-compressed-hero b { color: var(--lime); font-size: .62em; }
.payload-compressed-hero i { background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(184,255,54,.35) 9px 11px); }
.payload-step { position: relative; z-index: 1; padding: 15px 14px; background: #0f151b; border: 1px solid #2c3742; font-family: var(--font-display); opacity: 0; transform: translateX(-10px); }
.payload-step > span { color: var(--muted); font-size: var(--box-detail-size); }
.payload-step b, .payload-step small { display: block; }
.payload-step b { margin-top: 10px; color: var(--paper); font-size: var(--box-copy-size); line-height: 1; }
.payload-step small { margin-top: 7px; color: var(--muted); font-size: var(--box-detail-size); line-height: 1.15; }
.payload-msgpack-step { min-height: 126px; padding-inline: 11px; border-top: 3px solid var(--cyan); transition: opacity .35s ease 1.2s, transform .35s ease 1.2s; }
.payload-gzip-step { width: 98px; min-height: 108px; justify-self: center; padding-inline: 11px; border-top: 3px solid var(--lime); transition: opacity .35s ease 2s, transform .35s ease 2s; }
.payload-connector { position: relative; display: block; width: 100%; height: 2px; background: linear-gradient(90deg, #52616f, var(--cyan)); transform: scaleX(0); transform-origin: left center; }
.payload-connector::after { content: ''; position: absolute; right: -1px; top: -4px; border-width: 5px 0 5px 8px; border-style: solid; border-color: transparent transparent transparent var(--cyan); }
.connector-one { transition: transform .35s ease .88s; }
.connector-two { background: linear-gradient(90deg, var(--cyan), #82e8d0); transition: transform .35s ease 1.66s; }
.connector-two::after { border-left-color: #82e8d0; }
.connector-three { background: linear-gradient(90deg, #82e8d0, var(--lime)); transition: transform .35s ease 2.3s; }
.connector-three::after { border-left-color: var(--lime); }
.compression-impact { width: 100%; display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; min-height: 86px; margin: 9px 0 0; padding: 12px 14px; background: rgba(184,255,54,.045); border: 1px solid rgba(184,255,54,.32); border-left: 5px solid var(--lime); opacity: 0; transform: translateY(6px); transition: opacity .35s ease 3.2s, transform .35s ease 3.2s; }
.impact-kicker { color: var(--lime); font: 600 var(--box-copy-size)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.impact-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; opacity: 0; transform: translateY(5px); transition: opacity .35s ease 3.6s, transform .35s ease 3.6s; }
.impact-metrics > span { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 54px; padding-left: 12px; border-left: 1px solid rgba(184,255,54,.28); font-family: var(--font-display); }
.impact-metrics b { display: block; color: var(--lime); font-size: .52em; line-height: 1; }
.impact-metrics small { display: block; margin-top: 7px; color: var(--muted); font-size: .29em; line-height: 1; white-space: nowrap; }
.payload-code-card { min-width: 0; min-height: 260px; padding: 14px 15px 12px; background: #0d1217; border: 1px solid #2a3540; opacity: 0; transform: translateY(8px); transition: opacity .38s ease 4.9s, transform .38s ease 4.9s; }
.payload-code-card header { display: flex; align-items: center; padding-bottom: 11px; border-bottom: 1px solid #25303a; }
.payload-code-card header b { color: var(--paper); font: 600 .34em/1 var(--font-display); }
.payload-code-card pre { width: auto; margin: 10px 0 0; box-shadow: none; }
.payload-code-card code { display: block; max-height: none; padding: 11px 12px; color: #dce3e8; background: #080c10; font: 500 .29em/1.38 var(--font-display); text-align: left; white-space: pre; }
.payload-code-card .code-line { display: block; min-height: 1.38em; }
.payload-code-card mark { padding: 1px 2px; color: inherit; background: transparent; transition: color .28s ease, background-color .28s ease; }
.compression-benchmark.viz-active .code-msgpack { color: var(--cyan); background: rgba(91,220,255,.1); transition-delay: 5.25s; }
.compression-benchmark.viz-active .code-gzip { color: var(--lime); background: rgba(184,255,54,.1); transition-delay: 5.55s; }
.compression-benchmark.viz-active .code-msgpack-header { color: var(--cyan); background: rgba(91,220,255,.08); transition-delay: 5.85s; }
.compression-benchmark.viz-active .code-gzip-header { color: var(--lime); background: rgba(184,255,54,.08); transition-delay: 5.85s; }
.compression-benchmark.viz-active .compression-context,
.compression-benchmark.viz-active .payload-hero,
.compression-benchmark.viz-active .payload-step,
.compression-benchmark.viz-active .compression-impact,
.compression-benchmark.viz-active .impact-metrics,
.compression-benchmark.viz-active .payload-code-card { opacity: 1; transform: none; }
.compression-benchmark.viz-active .payload-connector { transform: scaleX(1); }
[data-wire-source][data-data-state="error"]::after { content: 'Data unavailable: ' attr(data-data-error); display: block; margin-top: 18px; padding: 12px; color: var(--coral); border: 1px solid var(--coral); font: 600 var(--box-detail-size)/1.3 var(--font-display); }

/* Shared compact actions and caveats */
.micro-list { display: flex; gap: 8px; margin-top: 19px !important; }
.micro-list span { padding: 8px 11px; color: var(--paper); background: #151b22; border-top: 2px solid var(--cyan); font: 500 .34em var(--font-display); }
.caveat { margin-top: 30px !important; max-width: 950px; padding-left: 17px; border-left: 3px solid var(--amber); color: var(--muted); font-size: .48em; }
.slide-caption { margin-top: var(--title-subtitle-gap) !important; color: var(--muted); font: 500 .5em/1.3 var(--font-display); }

/* Context curation */
.context-stage h2 { max-width: none; font-size: 1.24em; white-space: nowrap; }
.context-curation { margin: 44px 0 0; }
.context-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; height: 410px; }
.context-panel { display: flex; flex-direction: column; min-width: 0; padding: 15px; background: rgba(16,21,27,.92); border: 1px dashed #4b5662; }
.context-pool-heading, .model-context-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 25px; margin-bottom: 10px; }
.context-pool h3, .model-context h3 { margin: 0; color: var(--paper); font: 600 .32em/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.approach-badge { padding: 4px 7px; border: 1px solid currentColor; font: 700 .22em/1 var(--font-display); letter-spacing: .045em; opacity: 0; text-transform: uppercase; transform: translateY(-3px); white-space: nowrap; }
.approach-wrong { color: var(--coral); background: rgba(255,111,97,.08); }
.approach-right { color: var(--lime); background: rgba(184,255,54,.08); }
.context-options { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; }
.context-option { display: inline-flex; align-items: center; min-height: 29px; padding: 6px 9px; color: var(--paper); background: #151b22; border: 1px solid #35414c; border-left-width: 4px; font: 500 .28em/1.1 var(--font-display); }
.context-option.document { border-left-color: var(--lime); }
.context-option.tool { border-left-color: var(--amber); }
.context-option.instruction { border-left-color: var(--cyan); }
.context-option.memory { border-left-color: var(--violet); }
.context-option.history { border-left-color: #84909c; }
.context-option.request { border-left-color: var(--coral); }
.context-option { opacity: 0; transform: translateY(5px); }
.curation-gate { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 54px; padding: 7px 10px; background: rgba(184,255,54,.035); border: 1px solid rgba(184,255,54,.19); opacity: 0; transform: translateY(5px); }
.curation-loop { display: grid; place-items: center; width: 38px; height: 38px; color: var(--lime) !important; border: 1px solid rgba(184,255,54,.55); border-radius: 50%; font: 700 .62em/1 var(--font-display) !important; opacity: 1 !important; transform: none; }
.curation-gate b { color: var(--lime); font: 700 .27em/1.08 var(--font-display); letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.model-context { border-color: rgba(184,255,54,.55); box-shadow: inset 0 0 0 1px rgba(184,255,54,.04); opacity: 0; transform: translateX(8px); }
.curated-ttft, .ttft-growth { flex: 0 0 198px; height: 198px; margin-top: auto; padding-top: 10px; border-top: 1px solid #2b3540; }
.curated-ttft svg { width: 100%; height: 100%; overflow: visible; }
.curated-growth, .curated-trim { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.curated-growth { stroke: var(--coral); stroke-width: 3.2; }
.curated-trim { stroke: var(--lime); stroke-width: 3.5; }
.curated-trim-point { fill: var(--lime); stroke: var(--ink); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.35); }
.curated-trim-label { fill: var(--lime); font: 700 8px var(--font-display); letter-spacing: .08em; opacity: 0; text-anchor: middle; }
.curated-takeaway { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; margin-top: 10px !important; padding: 7px 10px 7px calc(10px + 5.8%); color: var(--paper); background: rgba(184,255,54,.065); border: 1px solid rgba(184,255,54,.42); font: 700 .35em/1.1 var(--font-display); letter-spacing: -.025em; opacity: 0; text-align: center; transform: translateY(4px); }
.curated-takeaway b { margin: 0 .28em; color: var(--lime); }
.ttft-growth svg { width: 100%; height: 100%; overflow: visible; }
.ttft-axis { fill: none; stroke: #42505d; stroke-width: 1.25; }
.ttft-axis-x, .ttft-axis-y { fill: #89939f; font: 700 10px var(--font-display); letter-spacing: .06em; }
.ttft-axis-x { text-anchor: middle; }
.ttft-growth-segment { fill: none; stroke: var(--coral); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ttft-point { fill: var(--coral); stroke: var(--ink); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.35); }
.ttft-takeaway { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; margin-top: 10px !important; padding: 7px 10px 7px calc(10px + 5.8%); color: var(--paper); background: rgba(255,111,97,.065); border: 1px solid rgba(255,111,97,.42); font: 700 .35em/1.1 var(--font-display); letter-spacing: -.025em; opacity: 0; text-align: center; transform: translateY(4px); }
.ttft-takeaway b { margin: 0 .28em; color: var(--coral); }
.context-curation.viz-active .context-option { animation: context-option-in .32s ease var(--grow-delay) forwards; }
.context-curation.viz-active .segment-one { animation: ttft-segment-in .4s linear .25s forwards; }
.context-curation.viz-active .segment-two { animation: ttft-segment-in .4s linear 2.05s forwards; }
.context-curation.viz-active .segment-three { animation: ttft-segment-in .4s linear 3.85s forwards; }
.context-curation.viz-active .point-one { animation: ttft-point-in .35s cubic-bezier(.2,.9,.3,1.35) .65s forwards; }
.context-curation.viz-active .point-two { animation: ttft-point-in .35s cubic-bezier(.2,.9,.3,1.35) 2.45s forwards; }
.context-curation.viz-active .point-three { animation: ttft-point-in .35s cubic-bezier(.2,.9,.3,1.35) 4.25s forwards; }
.context-curation.viz-active .ttft-takeaway { opacity: 1; transform: none; transition: opacity .3s ease 4.55s, transform .3s ease 4.55s; }
.context-curation.right-active .context-pool { opacity: .28; filter: grayscale(1); transition: opacity .45s ease, filter .45s ease; }
.context-curation.right-active .model-context { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
.context-curation.right-active .curation-gate { opacity: 1; transform: none; transition: opacity .3s ease .35s, transform .3s ease .35s; }
.context-curation.right-active .curation-loop { animation: curation-loop-sync 3.85s linear 1.41s; }
.context-curation.right-active .growth-one { animation: curated-line-in .4s linear .85s forwards; }
.context-curation.right-active .trim-one { animation: curated-line-in .16s linear 1.25s forwards; }
.context-curation.right-active .growth-two { animation: curated-line-in .4s linear 2.65s forwards; }
.context-curation.right-active .trim-two { animation: curated-line-in .16s linear 3.05s forwards; }
.context-curation.right-active .growth-three { animation: curated-line-in .4s linear 4.45s forwards; }
.context-curation.right-active .trim-three { animation: curated-line-in .16s linear 4.85s forwards; }
.context-curation.right-active .growth-four { animation: curated-line-in .32s linear 5.17s forwards; }
.context-curation.right-active .trim-point-one { animation: ttft-point-in .25s cubic-bezier(.2,.9,.3,1.35) 1.41s forwards; }
.context-curation.right-active .trim-point-two { animation: ttft-point-in .25s cubic-bezier(.2,.9,.3,1.35) 3.21s forwards; }
.context-curation.right-active .trim-point-three { animation: ttft-point-in .25s cubic-bezier(.2,.9,.3,1.35) 5.01s forwards; }
.context-curation.right-active .trim-label-one { opacity: 1; transition: opacity .2s ease 1.41s; }
.context-curation.right-active .trim-label-two { opacity: 1; transition: opacity .2s ease 3.21s; }
.context-curation.right-active .trim-label-three { opacity: 1; transition: opacity .2s ease 5.01s; }
.context-curation.right-active .curated-takeaway { opacity: 1; transform: none; transition: opacity .3s ease 5.55s, transform .3s ease 5.55s; }
.context-curation.comparison-final .context-pool { opacity: .72; filter: grayscale(.72); border-color: rgba(255,111,97,.62); box-shadow: inset 0 0 0 1px rgba(255,111,97,.06); }
.context-curation.comparison-final .model-context { background: rgba(18,26,21,.96); border-style: solid; border-color: rgba(184,255,54,.88); box-shadow: inset 0 0 0 1px rgba(184,255,54,.12), 0 0 30px rgba(184,255,54,.09); }
.context-curation.comparison-final .approach-badge { opacity: 1; transform: none; transition: opacity .32s ease, transform .32s ease; }
@keyframes context-option-in { to { opacity: 1; transform: none; } }
@keyframes ttft-point-in { 70% { opacity: 1; transform: scale(1.28); } 100% { opacity: 1; transform: scale(1); } }
@keyframes curation-loop-sync {
  0%, 46.753%, 93.506% { box-shadow: 0 0 0 7px rgba(184,255,54,.11); transform: scale(1.1); }
  5.195%, 44%, 51.948%, 90.5%, 98.701%, 100% { box-shadow: none; transform: scale(1); }
}
@keyframes curated-line-in { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes ttft-segment-in { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }

/* Prompt cache */
.cache-stage h2 { max-width: 940px; }
.prompt-cache-flow { position: relative; height: 370px; margin: 22px 0 0; }
.cache-mechanism { display: grid; grid-template-rows: 70px 24px 66px 1fr; gap: 7px; width: 100%; height: 370px; min-width: 0; transition: width .55s cubic-bezier(.2,.72,.2,1); }
.cache-first-request, .provider-cache-box, .cache-outcome { min-width: 0; background: rgba(15,21,27,.94); border: 1px solid #313c47; }
.cache-first-request { padding: 9px 13px; opacity: 0; transform: translateY(7px); }
.cache-first-request header, .provider-cache-box header, .cache-outcome header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cache-first-request header b, .provider-cache-box header b, .cache-outcome header b { color: var(--paper); font: 650 var(--box-copy-size)/1 var(--font-display); }
.cache-first-request header span, .cache-outcome header span { color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); }
.cache-token-sequence { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 9px; }
.cache-token-group { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cache-original-prefix { padding-right: 12px; border-right: 1px dashed #46515d; }
.cache-token { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; color: var(--paper); background: currentColor; }
.cache-token.token-circle { border-radius: 50%; }
.cache-token.token-square { border-radius: 1px; }
.cache-token.token-triangle { width: 0; height: 0; background: transparent; border-right: 8px solid transparent; border-bottom: 15px solid currentColor; border-left: 8px solid transparent; }
.cache-variable-tail .cache-token { color: var(--cyan); }
.cache-sequence-labels { display: grid; grid-template-columns: minmax(0,1fr) 145px; margin-top: 7px; color: var(--muted); font: 500 .21em/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.cache-sequence-labels b { color: var(--paper); font-weight: 500; }
.cache-store-flow { position: relative; display: flex; align-items: center; justify-content: center; color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); opacity: 0; }
.cache-store-flow i { position: absolute; left: 50%; top: 0; width: 2px; height: 23px; background: var(--lime); transform: scaleY(0); transform-origin: top center; }
.cache-store-flow i::after { content: ''; position: absolute; left: -4px; bottom: -1px; border-width: 6px 5px 0; border-style: solid; border-color: var(--lime) transparent transparent; }
.cache-store-flow span { margin-left: 165px; }
.provider-cache-box { padding: 10px 13px; background: rgba(184,255,54,.055); border-color: rgba(184,255,54,.52); box-shadow: 0 0 28px rgba(184,255,54,.06); opacity: 0; transform: scale(.97); }
.provider-cache-box header { align-items: center; justify-content: flex-start; }
.provider-cache-box header b { color: var(--lime); text-transform: uppercase; }
.provider-cache-box header small { margin-left: auto; color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); }
.cache-status-dot { width: 9px; height: 9px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 13px rgba(184,255,54,.62); }
.cached-token-row { display: flex; gap: 7px; margin-top: 10px; padding-left: 1px; }
.cached-token-row .cache-token { color: var(--lime); }
.cache-outcomes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; min-width: 0; }
.cache-outcome { padding: 11px 13px; opacity: 0; transform: translateY(8px); }
.cache-outcome header b { display: flex; align-items: center; }
.cache-outcome header b i { display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; margin-right: 7px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.cache-hit-example { border-color: rgba(184,255,54,.46); }
.cache-hit-example header b, .cache-hit-example .cache-ttft-bar b { color: var(--lime); }
.cache-miss-example { border-color: rgba(255,111,97,.42); }
.cache-miss-example header b, .cache-miss-example .cache-ttft-bar b { color: var(--coral); }
.cache-outcome .cache-token-sequence { gap: 9px; margin-top: 14px; }
.cache-outcome .cache-token-group { gap: 5px; }
.cache-outcome .cache-token { width: 12px; height: 12px; }
.cache-outcome .cache-token.token-triangle { width: 0; height: 0; border-right-width: 7px; border-bottom-width: 13px; border-left-width: 7px; }
.cache-hit-prefix { padding-right: 9px; border-right: 1px dashed rgba(184,255,54,.35); }
.cache-hit-prefix .cache-token { color: #616b75; }
.cache-miss-prefix { padding-right: 9px; border-right: 1px dashed rgba(255,111,97,.3); }
.cache-miss-prefix .cache-token, .uncached-tail .cache-token { color: #6f7780; }
.cache-miss-prefix .cache-mismatch { color: var(--coral); }
.cache-outcome > p { margin-top: 12px; color: var(--muted); font: 500 var(--box-detail-size)/1 var(--font-display); }
.cache-ttft-bar { display: grid; grid-template-columns: 126px 1fr 90px; align-items: center; gap: 9px; margin-top: 12px; }
.cache-ttft-bar span, .cache-ttft-bar b { font: 600 .24em/1 var(--font-display); white-space: nowrap; }
.cache-ttft-bar span { color: var(--muted); }
.cache-ttft-bar i { display: block; height: 7px; overflow: hidden; background: #242d36; border-radius: 1px; }
.cache-ttft-bar i em { display: block; width: 0; height: 100%; background: var(--lime); transform-origin: left center; }
.cache-miss-example .cache-ttft-bar i em { background: var(--coral); }
.cache-playbook { position: absolute; right: 59px; top: 8px; display: flex; flex-direction: column; width: 455px; height: 355px; padding: 12px 14px; background: rgba(13,18,23,.97); border: 1px solid rgba(184,255,54,.48); box-shadow: 0 0 32px rgba(184,255,54,.06); opacity: 0; pointer-events: none; transform: translateX(36px); }
.cache-playbook.fragment { opacity: 0; transform: translateX(36px); }
.cache-playbook header { padding-bottom: 8px; border-bottom: 1px solid #2c3741; }
.cache-playbook header b { display: block; color: var(--paper); font: 650 20px/1.1 var(--font-display); letter-spacing: -.06em; white-space: nowrap; }
.cache-practices { display: grid; gap: 5px; margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; }
.cache-practices li { display: grid; grid-template-columns: 34px 1fr; gap: 7px; min-height: 56px; padding: 7px 9px; background: #11171d; border-left: 3px solid var(--cyan); opacity: 0; transform: translateX(8px); }
.cache-practices li::marker { content: ''; }
.cache-practices li > i { color: var(--cyan); font: 600 var(--box-detail-size)/1.1 var(--font-display); font-style: normal; }
.cache-practices li b, .cache-practices li span, .cache-practices li code, .cache-practices li small { display: block; font-family: var(--font-display); }
.cache-practices li b { color: var(--paper); font-size: var(--box-copy-size); line-height: 1.08; }
.cache-practices li span { margin-top: 5px; color: var(--muted); font-size: var(--box-detail-size); line-height: 1.2; }
.cache-practices li code { margin-top: 6px; color: var(--cyan); font-size: .25em; line-height: 1.1; white-space: nowrap; }
.cache-practices li .cache-formula { margin-top: 5px; color: var(--paper); font-size: .27em; }
.cache-practices li small { margin-top: 4px; color: var(--muted); font-size: .25em; }
.cache-impact-line { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; margin: auto 0 !important; padding: 12px 8px; color: var(--paper); background: rgba(184,255,54,.045); border: 1px solid rgba(184,255,54,.62); font: 600 20px/1.15 var(--font-body); letter-spacing: -.04em; opacity: 0; text-align: center; transform: translateY(6px); white-space: nowrap; }
.cache-impact-line strong { margin-left: .32em; color: var(--lime); font: inherit; font-weight: 700; }
.prompt-cache-flow.viz-active .cache-first-request { opacity: 1; transform: none; transition: opacity .35s ease .25s, transform .35s ease .25s; }
.prompt-cache-flow.viz-active .cache-store-flow { opacity: 1; transition: opacity .25s ease .82s; }
.prompt-cache-flow.viz-active .cache-store-flow i { transform: scaleY(1); transition: transform .35s ease .92s; }
.prompt-cache-flow.viz-active .provider-cache-box { opacity: 1; transform: none; transition: opacity .38s ease 1.28s, transform .38s ease 1.28s; }
.prompt-cache-flow.viz-active .cache-hit-example { opacity: 1; transform: none; transition: opacity .38s ease 1.82s, transform .38s ease 1.82s; }
.prompt-cache-flow.viz-active .cache-hit-prefix .cache-token { animation: cache-token-hit .18s ease calc(2.08s + var(--token-index) * .065s) forwards; }
.prompt-cache-flow.viz-active .cache-hit-example .cache-ttft-bar i em { width: 32%; transition: width .55s cubic-bezier(.2,.75,.2,1) 2.8s; }
.prompt-cache-flow.viz-active .cache-miss-example { opacity: 1; transform: none; transition: opacity .38s ease 3.2s, transform .38s ease 3.2s; }
.prompt-cache-flow.viz-active .cache-miss-example .cache-ttft-bar i em { width: 86%; transition: width .7s cubic-bezier(.2,.75,.2,1) 3.55s; }
.prompt-cache-flow.playbook-active .cache-mechanism { width: 58.5%; }
.prompt-cache-flow.playbook-active .cache-playbook.fragment.visible { opacity: 1; pointer-events: auto; transform: none; transition: opacity .58s ease, transform .58s cubic-bezier(.2,.72,.2,1); }
.prompt-cache-flow.playbook-active .cache-practices li:nth-child(1) { opacity: 1; transform: none; transition: opacity .3s ease 1s, transform .3s ease 1s; }
.prompt-cache-flow.playbook-active .cache-practices li:nth-child(2) { opacity: 1; transform: none; transition: opacity .3s ease 1.2s, transform .3s ease 1.2s; }
.prompt-cache-flow.playbook-active .cache-practices li:nth-child(3) { opacity: 1; transform: none; transition: opacity .3s ease 1.4s, transform .3s ease 1.4s; }
.prompt-cache-flow.playbook-active .cache-impact-line { opacity: 1; transform: none; transition: opacity .35s ease 1.76s, transform .35s ease 1.76s; }
@keyframes cache-token-hit { to { color: var(--lime); } }

/* OpenAI-style prefix comparison */
.cache-mechanism { display: block; width: 100%; height: 370px; transition: none; }
.cache-reference-diagram { display: block; width: 100%; height: 370px; overflow: visible; font-family: var(--font-display); }
.cache-source-diagram, .cache-provider-branch, .cache-hit-diagram, .cache-miss-diagram { opacity: 0; }
.cache-source-pattern { color: var(--paper); }
.cache-prompt-frame { fill: rgba(15,21,27,.94); stroke-width: 1.5; }
.cache-source-frame { stroke: #46525e; }
.cache-hit-frame { stroke: rgba(184,255,54,.52); }
.cache-miss-frame { stroke: rgba(255,111,97,.46); }
.cache-diagram-heading { fill: var(--paper); font-size: 20px; font-weight: 650; letter-spacing: -.055em; }
.cache-source-copy { fill: var(--cyan); font-size: 14px; font-weight: 600; }
.cache-provider-branch rect { fill: #10161c; stroke: #3c4854; }
.cache-provider-branch text { fill: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.cache-provider-branch text:nth-of-type(2) { fill: var(--paper); font-size: 13px; letter-spacing: 0; }
.cache-provider-branch path { fill: none; stroke: #697582; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cache-hit-diagram { color: var(--lime); }
.cache-miss-diagram { color: var(--coral); }
.cache-result-ring { fill: #0f151b; stroke: currentColor; stroke-width: 2; }
.cache-result-icon { fill: currentColor; font-size: 18px; font-weight: 700; }
.cache-case-base { color: #747c84; }
.cache-case-hit { color: var(--lime); clip-path: inset(0 100% 0 0); }
.cache-hit-variable-tail { fill: #a5abb0; }
.cache-hit-variable-tail .cache-tail-cover { fill: #0f151b; }
.cache-mismatch-cover { fill: #0f151b; }
.cache-mismatch-token { fill: var(--coral); transform-box: fill-box; transform-origin: center; }
.cache-case-copy { fill: var(--muted); font-size: 14px; font-weight: 550; }
.cache-title-performance { font-size: 20px; font-weight: 700; letter-spacing: -.055em; }
.cache-hit-diagram .cache-title-performance { fill: var(--lime); }
.cache-miss-diagram .cache-title-performance { fill: var(--coral); }
.prompt-cache-flow.viz-active .cache-source-diagram { opacity: 1; transition: opacity .45s ease .25s; }
.prompt-cache-flow.viz-active .cache-provider-branch { opacity: 1; transition: opacity .35s ease .85s; }
.prompt-cache-flow.viz-active .cache-provider-branch path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease 1s; }
.prompt-cache-flow.viz-active .cache-hit-diagram { opacity: 1; transition: opacity .38s ease 1.35s; }
.prompt-cache-flow.viz-active .cache-case-hit { clip-path: inset(0 0 0 0); transition: clip-path 1.05s cubic-bezier(.2,.75,.2,1) 1.75s; }
.prompt-cache-flow.viz-active .cache-miss-diagram { opacity: 1; transition: opacity .38s ease 3.05s; }
.prompt-cache-flow.viz-active .cache-mismatch-token { animation: cache-mismatch-pulse .55s ease 3.42s; }
.prompt-cache-flow.playbook-active .cache-mechanism { width: 100%; }
.prompt-cache-flow.playbook-active .cache-source-diagram,
.prompt-cache-flow.playbook-active .cache-provider-branch { opacity: 0; transition: opacity .4s ease; }
.prompt-cache-flow.playbook-active .cache-comparison-diagram { opacity: 1; transform: translateX(-595px); transition: transform .58s cubic-bezier(.2,.72,.2,1); }
.prompt-cache-flow.playbook-active .cache-playbook { width: 455px; }
@keyframes cache-mismatch-pulse { 50% { filter: drop-shadow(0 0 9px rgba(255,111,97,.8)); transform: scale(1.35); } }

/* Decode */
.decode-math { display: flex; align-items: center; gap: 12px; margin-top: var(--title-content-gap); font: 500 .55em var(--font-display); }
.decode-math span { color: var(--muted); }
.decode-math strong { padding: 10px 14px; color: var(--ink); background: var(--lime); }
.token-race { margin: 34px 0 0; }
.token-race > div { display: grid; grid-template-columns: 125px 1fr 210px; align-items: center; height: 70px; border-top: 1px solid var(--line); }
.token-race b { font: 600 .36em var(--font-display); }
.tokens { display: block; height: 19px; background: repeating-linear-gradient(90deg, var(--lime) 0 9px, transparent 9px 13px); transform-origin: left; transform: scaleX(0); transition: transform .9s steps(20); }
.tokens.short { width: 18%; }
.tokens.long { width: 100%; }
.viz-active .tokens { transform: scaleX(1); }
.token-race i { color: var(--muted); font: 400 var(--box-detail-size) var(--font-display); font-style: normal; }

/* Artifact */
.artifact-transform { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; margin-top: var(--title-content-gap); }
.prose-output { min-height: 190px; padding: 22px; border: 1px solid #3c4651; background: #11161c; }
.prose-output span { color: var(--coral); font: 600 .34em var(--font-display); text-transform: uppercase; }
.prose-output p { margin-top: 25px; color: var(--muted); font-size: .53em; }
.prose-output i { display: block; margin-top: 24px; color: #6f7883; font: 400 var(--box-detail-size) var(--font-display); font-style: normal; }
.transform-arrow { color: var(--lime); font: 600 1.4em var(--font-display); text-align: center; }
.schema-output { min-height: 190px; margin: 0 !important; padding: 30px !important; border: 1px solid rgba(184,255,54,.5); background: rgba(184,255,54,.06) !important; box-shadow: none !important; }
.schema-output code { color: var(--lime); font: 500 .54em/1.55 var(--font-display); }

/* Traffic */
.traffic-lanes { display: grid; gap: 8px; margin: var(--title-content-gap) 0 0; }
.traffic-lane { display: grid; grid-template-columns: 150px 1.4fr 210px 280px; align-items: center; min-height: 78px; padding: 0 18px; background: #10151b; border-left: 5px solid var(--lime); }
.traffic-lane > span { font: 600 .37em var(--font-display); }
.traffic-lane > b { color: var(--lime); font: 600 var(--box-copy-size) var(--font-display); }
.traffic-lane > small { color: var(--muted); font: 400 var(--box-detail-size) var(--font-display); }
.cars { display: flex; gap: 10px; align-items: center; }
.cars::before { content: ''; width: 100%; height: 1px; background: #3b4651; }
.cars i { flex: none; width: 22px; height: 12px; background: var(--lime); border-radius: 2px; }
.traffic-lane.async { border-color: var(--cyan); }
.traffic-lane.async b { color: var(--cyan); }
.traffic-lane.async .cars i { background: var(--cyan); }
.traffic-lane.batch { border-color: var(--violet); }
.traffic-lane.batch b { color: var(--violet); }
.traffic-lane.batch .cars i { background: var(--violet); }

/* Compound */
.compound { margin: var(--title-content-gap) 0 0; }
.compound-row { display: grid; grid-template-columns: 92px 1.25fr .8fr .7fr 1fr 1.65fr .9fr 75px; align-items: stretch; height: 83px; margin: 10px 0; }
.compound-row b { align-self: center; font: 600 .35em var(--font-display); }
.compound-row span { display: grid; place-items: center; margin-right: 3px; color: var(--ink); font: 600 var(--box-detail-size) var(--font-display); }
.compound-row i { align-self: center; justify-self: end; color: var(--muted); font: 600 .4em var(--font-display); font-style: normal; }
.c-app, .c-response { background: var(--violet); }
.c-wire { background: var(--cyan); }
.c-queue { background: var(--amber); }
.c-prefill { background: #ff8f3d; }
.c-decode { background: var(--lime); }
.compound-row.after { grid-template-columns: 92px .75fr .4fr .35fr .55fr .75fr .5fr 75px; }
.compound-row.after i { color: var(--lime); }
.compound + .chart-note { position: static; width: auto; margin-top: 8px; font-size: .3em; }

/* Close */
.close-stage h2 { position: absolute; left: 56px; top: 128px; font-size: 2em; }
.closing-checklist { position: absolute; right: 70px; top: 100px; width: 630px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.closing-checklist li { display: grid; grid-template-columns: 55px 1fr; align-items: center; min-height: 69px; border-bottom: 1px solid var(--line); }
.closing-checklist li::marker { content: ''; }
.closing-checklist i { color: var(--lime); font: 600 .29em var(--font-display); font-style: normal; }
.closing-checklist span { font: 500 .48em/1.2 var(--font-display); }
.close-stage blockquote { position: absolute; left: 56px; bottom: 52px; width: 1080px; margin: 0; padding: 20px 0 0; border-top: 1px solid #45505c; color: var(--paper); font: 500 .62em/1.4 var(--font-display); font-style: normal; }

/* Reveal UI */
.reveal .controls { color: var(--lime); transform: scale(.68); }
.reveal .progress { height: 3px; color: var(--lime); }
.reveal .slide-number { right: auto; left: 18px; bottom: 13px; padding: 0; color: #59636e; background: transparent; font: 500 10px var(--font-display); }
.reveal :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media print {
  .reveal .stage::before { opacity: .45; }
  .reveal .controls, .reveal .progress { display: none !important; }
  .journey-stage { opacity: 1 !important; transform: none !important; animation: none !important; }
  .journey-return { opacity: 1 !important; }
  .journey-line i, .journey-return i { display: none !important; }
  .metric-card, .metric-stage, .metric-stage em, .metric-readout, .gauge-final, .dist-fill, .marker, .percentile-points li { opacity: 1 !important; transform: none !important; animation: none !important; }
  .gauge-needle { transform: rotate(72deg) !important; animation: none !important; }
  .request-pulse { display: none !important; }
  .dist-line { stroke-dashoffset: 0 !important; }
  .quality-zone, .quality-label, .benchmark-point, .quality-speed-fit, .choice-callout, .choice-ring, .compound-delta { opacity: 1 !important; transform: none !important; transition: none !important; }
  .duration-track i { width: max(var(--bar-width), 12px) !important; transition: none !important; }
  .duration-total { opacity: 1 !important; transition: none !important; }
  .quality-bar, .quality-speed-fit { opacity: 1 !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .client-code, .client-lifecycle > p, .connection-math, .rtt-scenarios li, .transport-actions li, .waterfall-context, .waterfall-lane header, .waterfall-steps li, .fresh-cost, .warm-waterfall, .waterfall-axis, .waterfall-rows li, .setup-bracket, .warm-waterfall-row, .waterfall-takeaway, .compression-context, .payload-hero, .payload-step, .compression-impact, .impact-metrics, .payload-code-card, .context-option, .curation-gate, .curation-gate span, .model-context, .cache-request, .cache-transfer, .prompt-cache-bank, .cache-proof, .cache-rule { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .multiplex i, .waterfall-bar, .payload-connector { transform: scaleX(1) !important; transition: none !important; }
  .demo-cue { opacity: 1 !important; transform: none !important; }
  .cue-slow strong { color: var(--coral); }
  .cue-slow strong::before { content: '✓'; width: auto; height: auto; margin-right: .22em; color: var(--coral); border: 0; border-radius: 0; font-size: 1em; animation: none; }
  .cue-slow .working-copy, .cue-slow .working-detail { display: none; }
  .cue-slow .done-copy { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .cue-slow strong::before { animation: none !important; border-color: var(--coral); border-right-color: transparent; }
  .journey-stage, .metric-card, .metric-stage, .metric-stage em, .metric-readout, .gauge-final, .dist-fill, .marker, .percentile-points li, .lever-ribbon li, .quality-zone, .quality-label, .benchmark-point, .quality-speed-fit, .choice-callout, .choice-ring, .compound-delta, .client-code, .client-lifecycle > p, .connection-math, .rtt-scenarios li, .transport-actions li, .waterfall-context, .waterfall-lane header, .waterfall-steps li, .fresh-cost, .warm-waterfall, .waterfall-axis, .waterfall-rows li, .setup-bracket, .warm-waterfall-row, .waterfall-takeaway, .compression-context, .payload-hero, .payload-step, .compression-impact, .impact-metrics, .payload-code-card, .context-option, .curation-gate, .curation-gate span, .model-context, .cache-request, .cache-transfer, .prompt-cache-bank, .cache-proof, .cache-rule, .tokens { opacity: 1 !important; transform: none !important; animation: none !important; }
  .duration-track i { width: max(var(--bar-width), 12px) !important; }
  .duration-total { opacity: 1 !important; }
  .gauge-needle { transform: rotate(72deg) !important; animation: none !important; }
  .journey-return { opacity: 1 !important; }
  .journey-line i, .journey-return i, .request-pulse { display: none !important; }
  .dist-line { stroke-dashoffset: 0 !important; }
  .quality-bar, .quality-speed-fit { opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .multiplex i, .waterfall-bar, .payload-connector { transform: scaleX(1) !important; }
}

@media print, (prefers-reduced-motion: reduce) {
  .context-pool { opacity: .72 !important; filter: grayscale(.72) !important; border-color: rgba(255,111,97,.62) !important; box-shadow: inset 0 0 0 1px rgba(255,111,97,.06) !important; animation: none !important; }
  .model-context { background: rgba(18,26,21,.96) !important; border-style: solid !important; border-color: rgba(184,255,54,.88) !important; box-shadow: inset 0 0 0 1px rgba(184,255,54,.12), 0 0 30px rgba(184,255,54,.09) !important; }
  .approach-badge { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ttft-growth-segment { opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .ttft-point, .ttft-takeaway { opacity: 1 !important; transform: none !important; transition: none !important; }
  .curated-growth, .curated-trim { opacity: 1 !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .curated-trim-point, .curated-trim-label, .curated-takeaway { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .curation-gate i { transform: scaleX(1) !important; transition: none !important; }
  .cache-mechanism { width: 100% !important; transition: none !important; }
  .cache-source-diagram, .cache-provider-branch { opacity: 0 !important; }
  .cache-provider-branch path { stroke-dashoffset: 0 !important; transition: none !important; }
  .cache-comparison-diagram { opacity: 1 !important; transform: translateX(-595px) !important; transition: none !important; }
  .cache-case-hit { clip-path: inset(0 0 0 0) !important; transition: none !important; }
  .cache-mismatch-token { animation: none !important; }
  .cache-first-request, .cache-store-flow, .provider-cache-box, .cache-outcome { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cache-store-flow i { transform: scaleY(1) !important; transition: none !important; }
  .cache-hit-prefix .cache-token { color: var(--lime) !important; animation: none !important; }
  .cache-hit-example .cache-ttft-bar i em { width: 32% !important; transition: none !important; }
  .cache-miss-example .cache-ttft-bar i em { width: 86% !important; transition: none !important; }
  .cache-playbook { visibility: visible !important; right: 59px !important; width: 455px !important; height: 355px !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; transition: none !important; }
  .cache-practices li, .cache-impact-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .payload-code-card .code-msgpack { color: var(--cyan) !important; background: rgba(91,220,255,.1) !important; }
  .payload-code-card .code-gzip { color: var(--lime) !important; background: rgba(184,255,54,.1) !important; }
  .payload-code-card .code-msgpack-header { color: var(--cyan) !important; background: rgba(91,220,255,.08) !important; }
  .payload-code-card .code-gzip-header { color: var(--lime) !important; background: rgba(184,255,54,.08) !important; }
  .reuse-first-request { opacity: 1 !important; background: rgba(91,220,255,.035) !important; box-shadow: none !important; transition: none !important; }
  .reuse-first-request header { border-color: rgba(91,220,255,.32) !important; }
  .reuse-first-request header span { color: #7fc7df !important; }
  .reuse-first-request .reuse-row { border-color: rgba(91,220,255,.18) !important; }
  .reuse-first-request .reuse-row b { color: #78aabc !important; }
  .reuse-cold-upload > span i { background: repeating-linear-gradient(135deg, rgba(91,220,255,.58) 0 7px, rgba(47,156,194,.38) 7px 14px) !important; }
  .reuse-later-request, .reuse-actions li, .http2-benefits, .http2-example { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reuse-row > span i { transform: scaleX(1) !important; transition: none !important; }
  .token-return i { display: block !important; opacity: 1 !important; animation: none !important; }
  .token-return i:nth-of-type(1) { right: 12%; }
  .token-return i:nth-of-type(2) { right: 24%; }
  .token-return i:nth-of-type(3) { right: 36%; }
  .token-return i:nth-of-type(4) { right: 48%; }
  .token-return i:nth-of-type(5) { right: 60%; }
  .token-return i:nth-of-type(6) { right: 72%; }
  .token-return i:nth-of-type(7) { right: 84%; }
}