/* The home page. One hero per screen: the capsule, the report, the moment, the fix. The rest is quiet reading. */

/* ---------- Say it ---------- */
/* The first screen holds the whole loop: the words, the keys, and the game that gets fixed. The window is sized
   from the height of the screen, so the fox and the gate are in view without a scroll. */
.hero { position: relative; padding-top: calc(var(--bar-h) + clamp(60px, 8.4vh, 112px)); overflow-x: clip; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
/* The opening, in the first 3 seconds (times from the first paint):
     0.12 s  "Say the bug." arrives word by word, in the blue of a voice (520 ms a word, ease-out)
     0.45 s  the notch drops and hears the sentence (home.js)
     1.25 s  "It's fixed." lands in the green of a fix (820 ms a word, expo-out), and its light blooms (1700 ms)
     1.40 s  the game's window rises (1350 ms, ease-out)
     1.55 s  the sentence under the headline, then the buttons (1.75 s) and the line under the window (2.5 s) */
.hero .promise { max-width: none; font-size: clamp(2.6rem, 0.4rem + 7vw, 7.6rem); line-height: 0.98; white-space: nowrap; } /* one line */
.hero .p-say { --said-delay: 120ms; }
.hero .p-done { --said-delay: 1250ms; }
.hero .lede { margin-top: clamp(14px, 2vh, 26px); max-width: 52em; --reveal-delay: 1550ms; }
.hero .hero-actions { margin-top: clamp(18px, 2.6vh, 34px); --reveal-delay: 1750ms; }
.hero-fine { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--text-3); --reveal-delay: 1900ms; }
.js .hero .btn.primary::after { animation: sheen 950ms var(--ease-out) 2700ms backwards; }

/* The light from the notch: a cone that falls from the capsule to the game. It is as bright as the voice is loud,
   and it turns green once when the fix is in (2600 ms, ease-out). */
.beam {
  position: absolute; left: 50%; top: 0; width: min(1500px, 150vw); height: min(96svh, 880px); transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: conic-gradient(from 156deg at 50% 0%, transparent 0deg, rgba(var(--beam, 96, 178, 255), 0.72) 24deg, transparent 48deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 52%, transparent 100%);
  filter: blur(30px); opacity: calc(0.08 + var(--voice, 0) * 0.56); transition: opacity 260ms linear;
}
.hero[data-light="fixed"] .beam { --beam: 72, 222, 112; animation: beamfix 2600ms var(--ease-out) both; }
@keyframes beamfix { 0% { opacity: 0.07; } 16% { opacity: 0.78; } 100% { opacity: 0.07; } }

/* The hotkey: the three keys of the app's first run. Press them here and the capsule opens. */
.hotkey { display: inline-flex; align-items: center; gap: 14px; padding: 6px 16px 6px 6px; border-radius: 17px; text-align: left; transition: background var(--d-3) var(--ease-standard); }
.hotkey:hover { background: rgba(255, 255, 255, 0.045); }
.hotkey .kbds { position: relative; gap: 6px; }
.hotkey .kbds::after { content: ""; position: absolute; inset: 38% 4% -34%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(74, 168, 255, 0.7), transparent 72%); filter: blur(14px); opacity: 0; transition: opacity var(--d-4) var(--ease-standard); }
.hotkey[data-state="idle"] .kbds::after, .hotkey[data-state="again"] .kbds::after { animation: invite 2600ms var(--ease-inout) 3200ms infinite backwards; }
.hotkey[data-state="fixed"] .kbds::after { background: radial-gradient(50% 50% at 50% 50%, rgba(48, 209, 88, 0.6), transparent 72%); opacity: 0.5; }
@keyframes invite { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.8; } }
.hotkey .kbd {
  min-width: 46px; height: 46px; padding: 0 12px; border-radius: 12px; font-size: 19px; color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--line-3), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(74, 168, 255, 0.45);
  transition: transform 90ms var(--ease-out), box-shadow var(--d-3) var(--ease-standard), background var(--d-3) var(--ease-standard);
}
.hotkey:hover .kbd { box-shadow: inset 0 0 0 1px var(--line-4), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 18px 44px -14px rgba(74, 168, 255, 0.62); }
.hotkey.down .kbd, .hotkey:active .kbd { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(142, 201, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 8px 30px -8px rgba(74, 168, 255, 0.85); }
.hotkey.down .kbd:nth-child(2), .hotkey:active .kbd:nth-child(2) { transition-delay: 28ms; }
.hotkey.down .kbd:nth-child(3), .hotkey:active .kbd:nth-child(3) { transition-delay: 56ms; }
.hotkey[data-state="recording"] .kbd { box-shadow: inset 0 0 0 1px rgba(142, 201, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 14px 44px -12px rgba(74, 168, 255, calc(0.5 + var(--voice, 0) * 0.5)); }
.hotkey[data-state="fixed"] .kbd { box-shadow: inset 0 0 0 1px rgba(48, 209, 88, 0.42), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 16px 44px -14px rgba(48, 209, 88, 0.5); }
.hotkey-label { display: grid; min-width: 236px; }
.hotkey-label > span { grid-area: 1 / 1; display: grid; gap: 1px; opacity: 0; transform: translateY(5px); transition: opacity var(--d-3) var(--ease-in), transform var(--d-3) var(--ease-in); }
.hotkey[data-state="idle"] [data-for="idle"], .hotkey[data-state="recording"] [data-for="recording"], .hotkey[data-state="processing"] [data-for="processing"],
.hotkey[data-state="result"] [data-for="result"], .hotkey[data-state="fixing"] [data-for="fixing"], .hotkey[data-state="fixed"] [data-for="fixed"],
.hotkey[data-state="again"] [data-for="again"] { opacity: 1; transform: none; transition: opacity var(--d-4) var(--ease-out) 140ms, transform var(--d-5) var(--ease-out) 140ms; }
.hotkey-label b { font-size: 14.5px; font-weight: 580; letter-spacing: -0.008em; color: var(--text-1); line-height: 1.3; }
.hotkey-label i { font-style: normal; font-size: 12.5px; font-weight: 480; color: var(--text-3); line-height: 1.35; }
.hotkey[data-state="fixed"] .hotkey-label b { color: #a8f0bb; }

/* The stage: the game you are testing, in its browser window, over the planet's edge. While Callout listens,
   blue light rises behind it. When the fix is in, the light turns green once and settles. */
.stage {
  --stage-w: clamp(min(620px, 100% - 2 * var(--gut)), (100svh - 484px) * 1.7778, min(1180px, 100% - 2 * var(--gut)));
  position: relative; width: var(--stage-w); margin: clamp(22px, 3vh, 52px) auto 0;
}
.stage-foot { --reveal-delay: 2500ms; }
.stage-note { --reveal-delay: 2700ms; }
/* The planet: the app's first-run horizon. The window stands on its edge. */
.horizon { position: absolute; left: 50%; top: 0; width: 100vw; height: calc(100% + 240px); transform: translateX(-50%); z-index: -2; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent) 50% 0 / 100% 100% no-repeat; mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent) 50% 0 / 100% 100% no-repeat; }
/* First light: the edge of the planet lights from the middle outwards (1900 ms, ease-out). */
.js .horizon { animation: firstlight 1900ms var(--ease-out) 60ms both; }
@keyframes firstlight { from { -webkit-mask-size: 4% 100%; mask-size: 4% 100%; opacity: 0; } 30% { opacity: 1; } to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 1; } }
.horizon i { position: absolute; left: 50%; top: 46%; width: 3400px; height: 3400px; margin-left: -1700px; border-radius: 50%; translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -8px);
  background: radial-gradient(closest-side, #000 99.4%, transparent 99.8%);
  box-shadow: 0 -1px 0 rgba(207, 238, 255, 0.7), 0 -6px 22px rgba(74, 168, 255, 0.42), 0 -40px 120px rgba(23, 71, 255, 0.34), 0 -120px 260px rgba(23, 71, 255, 0.16);
}
.dawn {
  position: absolute; left: 50%; top: -90px; width: 132%; height: 76%; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 58% at 50% 62%, rgba(var(--dawn, 74, 168, 255), 0.5), rgba(var(--dawn-deep, 23, 71, 255), 0.22) 46%, transparent 72%);
  filter: blur(46px); opacity: calc(0.2 + var(--voice, 0) * 0.8); transition: opacity 260ms linear; translate: calc(var(--px, 0) * 12px) 0;
}
.stage[data-light="fixed"] .dawn { --dawn: 48, 209, 88; --dawn-deep: 20, 150, 80; opacity: 0.7; transition: opacity 900ms var(--ease-out); }
.win { position: relative; margin: 0; border-radius: 13px; background: #120f22; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 120px -20px rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 90px -30px rgba(74, 168, 255, 0.35); }
/* The window rises out of the planet's edge: 72px up, from a 12° lean and 94% size (1350 ms, ease-out, at 1.4 s). */
.js .hero .win { transform-origin: 50% 0; animation: rise 1350ms var(--ease-out) 1400ms backwards; }
@keyframes rise { from { opacity: 0; transform: perspective(1700px) translateY(72px) rotateX(12deg) scale(0.94); } }
/* It leans a little toward the pointer (at most 1.5°), and stands straight again when the pointer is on the game. */
.hero.leaning .win { transform: perspective(1700px) rotateX(calc(var(--py, 0) * -1.1deg)) rotateY(calc(var(--px, 0) * 1.5deg)); transform-origin: 50% 46%; }
/* When the fix is in, a ring of green light leaves the window (1600 ms, ease-out). */
.win::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 14px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1px rgba(160, 255, 190, 0.32), 0 0 26px 2px rgba(110, 240, 150, 0.5), 0 0 90px 14px rgba(48, 209, 88, 0.4); }
.stage[data-light="fixed"] .win::after { animation: ring 1600ms var(--ease-out) both; }
@keyframes ring { 0% { opacity: 0; transform: none; } 12% { opacity: 0.95; } 100% { opacity: 0; transform: scale(1.085, 1.15); } }
.win-bar { height: 40px; display: grid; grid-template-columns: 1fr minmax(0, 420px) 1fr; align-items: center; gap: 14px; padding: 0 14px; border-radius: 13px 13px 0 0; background: linear-gradient(180deg, #232329, #1b1b20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.6); color: rgba(235, 235, 245, 0.4); }
.win-bar > :first-child { grid-column: 1; grid-row: 1; }
.lights { display: flex; gap: 8px; }
.lights i { display: block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3); }
.lights i:nth-child(1) { background: #ff5f57; } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }
.win-nav { grid-column: 1; grid-row: 1; display: flex; gap: 14px; margin-left: 76px; }
.win-nav svg, .win-plus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.win-url { grid-column: 2; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.065); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); display: grid; place-items: center; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 12.5px; letter-spacing: -0.01em; color: rgba(235, 235, 245, 0.7); }
.win-plus { grid-column: 3; justify-self: end; }
.win-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0 0 13px 13px; background: #120f22; }
.win-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--ease-out); }
.win-view iframe.ready { opacity: 1; }
.win-view iframe.swap { transition-duration: 420ms; }
/* The rim of the window: a line of light that goes round once when the fix is in (1500 ms, ease-out), then fades. */
@property --rim { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.win-rim { position: absolute; inset: -1px; border-radius: 14px; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--rim), transparent 0deg, transparent 250deg, rgba(48, 209, 88, 0.2) 290deg, #7dffa2 345deg, #eafff0 358deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.stage[data-light="fixed"] .win-rim { animation: rim 1500ms var(--ease-out) both; }
@keyframes rim { 0% { --rim: -90deg; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { --rim: 270deg; opacity: 0; } }
.stage[data-light="fixed"] .win { box-shadow: 0 0 0 1px rgba(48, 209, 88, 0.3), 0 40px 120px -20px rgba(0, 0, 0, 0.85), 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 110px -26px rgba(48, 209, 88, 0.5); }
.win { transition: box-shadow 1200ms var(--ease-out); }

/* Under the window: the four steps of the loop, and what happens right now. */
.stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 26px; padding: 14px 2px 0; }
.beats { display: flex; align-items: center; gap: 0; font-size: 13px; font-weight: 540; color: var(--text-4); white-space: nowrap; }
.beats li { position: relative; display: flex; align-items: center; transition: color var(--d-4) var(--ease-standard); }
.beats li + li::before { content: ""; width: 26px; height: 1.5px; margin: 0 10px; border-radius: 2px; background: linear-gradient(90deg, var(--atmo-edge), var(--atmo-edge)) 0 0 / 0% 100% no-repeat, var(--line-2); transition: background-size 520ms var(--ease-out); }
.beats[data-at="0"] li:nth-child(-n+1), .beats[data-at="1"] li:nth-child(-n+2), .beats[data-at="2"] li:nth-child(-n+3), .beats[data-at="3"] li:nth-child(-n+4) { color: var(--text-2); }
.beats[data-at="1"] li:nth-child(-n+2)::before, .beats[data-at="2"] li:nth-child(-n+3)::before, .beats[data-at="3"] li:nth-child(-n+4)::before { background-size: 100% 100%, auto; }
.beats[data-at="0"] li:nth-child(1), .beats[data-at="1"] li:nth-child(2), .beats[data-at="2"] li:nth-child(3) { color: var(--text-1); }
.beats[data-at="3"] li:nth-child(4) { color: #a8f0bb; }
/* What happens right now, as one line over the foot of the game. It comes in and goes out (340 ms / 220 ms). */
.stage-status {
  position: absolute; left: 14px; bottom: 14px; z-index: 3; max-width: calc(100% - 28px); margin: 0; padding: 7px 13px; border-radius: 11px; pointer-events: none;
  font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(7, 7, 11, 0.74); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 14px 34px -12px rgba(0, 0, 0, 0.9);
  transition: opacity var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out);
}
.stage-status:empty { opacity: 0; transform: translateY(8px); padding: 0; transition: opacity var(--d-3) var(--ease-in), transform var(--d-3) var(--ease-in); }
.stage-status b { font-weight: 600; color: var(--text-1); }
.stage-status .who { color: var(--agent); font-weight: 580; margin-right: 4px; }
.stage-status .el { font-variant-numeric: tabular-nums; color: var(--text-3); margin-left: 8px; }
.stage-status .ok { color: #a8f0bb; font-weight: 600; }
.stage-status > span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; animation: statusin 340ms var(--ease-out) both; }
@keyframes statusin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.stage-note { margin-top: 12px; padding: 0 2px; font-size: 12.5px; line-height: 1.6; color: var(--text-3); text-align: center; }
.stage-note .kbd { height: 17px; min-width: 17px; font-size: 10px; vertical-align: 1px; }

/* The sound switch: quiet, at the end of the line under the window. */
.sound { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; margin-right: -10px; border-radius: 8px; font-size: 13px; font-weight: 520; color: var(--text-3); white-space: nowrap; transition: color var(--d-2) var(--ease-standard), background var(--d-2) var(--ease-standard); }
.sound:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.05); }
.sound svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound svg path { transition: opacity var(--d-3) var(--ease-standard), stroke-dashoffset var(--d-4) var(--ease-out); }
.sound .w1, .sound .w2 { stroke-dasharray: 12; stroke-dashoffset: 12; opacity: 0; }
.sound[aria-pressed="true"] { color: var(--text-2); }
.sound[aria-pressed="true"] .w1, .sound[aria-pressed="true"] .w2 { stroke-dashoffset: 0; opacity: 1; }
.sound[aria-pressed="true"] .w2 { transition-delay: 70ms; }
.sound[aria-pressed="true"] .x { opacity: 0; }
.sound [data-on], .sound[aria-pressed="true"] [data-off] { display: none; }
.sound[aria-pressed="true"] [data-on] { display: inline; }
.win-sm .win-bar { height: 36px; grid-template-columns: 1fr minmax(0, 300px) 1fr; }
.win-sm .win-url { height: 22px; font-size: 12px; border-radius: 7px; }
.win-sm .lights i { width: 10px; height: 10px; }

/* As the hero leaves the screen, the window sinks back 4.5% and dims, and the words go up ahead of it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage-body { animation: recede linear both; animation-timeline: view(); animation-range: exit 8% exit 100%; transform-origin: 50% 100%; }
    .hero-copy { animation: goup linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .report-pane::before, .fix-stage::before, .ask-stage::before, .signoff-stage::before, .also-stage::before { animation: drift linear both; animation-timeline: view(); }
  }
}
@keyframes recede { to { transform: translateY(-26px) scale(0.955); opacity: 0.4; } }
@keyframes goup { to { transform: translateY(-34px); opacity: 0; } }
@keyframes drift { from { translate: 0 60px; } to { translate: 0 -60px; } }

/* ---------- The demo in numbers ---------- */
.proof { position: relative; padding: clamp(84px, 11vw, 150px) 0 0; }
.proof + .section { padding-top: clamp(96px, 13vw, 190px); }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-grid > div { padding: 6px clamp(16px, 2.2vw, 30px) 4px; border-left: 1px solid var(--line-1); }
.proof-grid > div:first-child { padding-left: 0; border-left: 0; }
.proof dt { display: flex; align-items: baseline; gap: 0.5em; font-size: 15px; font-weight: 560; color: var(--text-2); white-space: nowrap; }
.proof .big {
  font-size: clamp(2.9rem, 1.5rem + 3.6vw, 5.2rem); font-weight: 620; font-stretch: 116%; letter-spacing: -0.05em; line-height: 0.95; font-feature-settings: "zero" 0, "tnum" 0;
  background: linear-gradient(180deg, #fff 30%, #a9d6ff 118%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-bottom: 0.06em;
}
/* Each number comes into focus as its column arrives (900 ms, ease-out). */
.js .proof-grid > [data-reveal] .big { filter: blur(12px); transition: filter 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.js .proof-grid > [data-reveal].in .big { filter: blur(0); }
.proof .big[data-clock] { background-image: linear-gradient(180deg, #fff 30%, #9ff0b6 118%); } /* the time of a fix: green */
.proof dd { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 21em; text-wrap: pretty; }

/* ---------- Light behind the panes: blue where Callout or Claude speaks, green where a fix is in ---------- */
.report-pane, .fix-stage, .ask-stage, .signoff-stage, .also-stage { position: relative; }
.report-pane::before, .fix-stage::before, .ask-stage::before, .signoff-stage::before, .also-stage::before {
  content: ""; position: absolute; inset: -9% -8% -6%; z-index: -1; pointer-events: none; border-radius: 40%;
  background: radial-gradient(52% 46% at 72% 18%, rgba(var(--aura, 74, 168, 255), 0.2), transparent 72%), radial-gradient(46% 44% at 16% 92%, rgba(var(--aura-2, 23, 71, 255), 0.16), transparent 72%);
  filter: blur(38px); transition: opacity 1200ms var(--ease-out);
}
.report-pane::before { inset: -70px -8% auto; height: 820px; }
.fix-stage::before { opacity: 0.55; }
.fix-stage[data-state="done"]::before, .signoff-stage::before { --aura: 48, 209, 88; --aura-2: 16, 120, 72; opacity: 1; }

/* ---------- The report ---------- */
.report-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.report-rail { position: sticky; top: calc(var(--bar-h) + clamp(28px, 6vh, 64px)); }
.report-rail .lede { margin-top: 22px; }
.rail { margin-top: 30px; display: grid; }
.rail li { position: relative; padding: 9px 0 9px 20px; cursor: pointer; }
.rail li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1.5px; border-radius: 2px; background: var(--line-3); transition: background var(--d-4) var(--ease-standard), box-shadow var(--d-4) var(--ease-standard); }
.rail b { display: block; font-size: 16px; font-weight: 560; letter-spacing: -0.01em; color: var(--text-3); transition: color var(--d-4) var(--ease-standard); }
.rail li:hover b { color: var(--text-2); }
.rail span { display: grid; grid-template-rows: 0fr; opacity: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 31em; transition: grid-template-rows var(--d-5) var(--ease-out), opacity var(--d-3) var(--ease-in), margin-top var(--d-5) var(--ease-out); }
.rail span > i { font-style: normal; min-height: 0; overflow: hidden; }
.rail li.on::before { background: #fff; box-shadow: 0 0 10px rgba(207, 238, 255, 0.7); }
.rail li.on b { color: var(--text-1); }
.rail li.on span { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; transition: grid-template-rows var(--d-5) var(--ease-out), opacity var(--d-5) var(--ease-out) 80ms, margin-top var(--d-5) var(--ease-out); }
.rail-note { margin-top: 26px; font-size: 15px; }
.pane-long .surface { min-height: 520px; }
/* The sentence that went in: black, as the capsule is, with the bars of a voice. A point of light runs from it
   down into the report (1500 ms, ease in-out, again and again while it is on screen). */
.said-strip { position: relative; display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 0 auto 34px; padding: 12px 22px 12px 18px; border-radius: 24px; background: #000; color: #fff; font-size: 15.5px; font-weight: 470; line-height: 1.42; letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 22px 60px -12px rgba(0, 0, 0, 0.9), 0 0 70px -16px rgba(74, 168, 255, 0.5); }
.said-strip q { quotes: none; text-wrap: balance; }
.said-strip .bars { flex: none; height: 24px; }
.said-strip .bars i { height: 4px; animation: speak 1.5s var(--ease-inout) infinite; }
.said-strip .bars i:nth-child(2), .lbars i:nth-child(2) { animation-delay: -0.3s; } .said-strip .bars i:nth-child(3), .lbars i:nth-child(3) { animation-delay: -0.6s; } .said-strip .bars i:nth-child(4), .lbars i:nth-child(4) { animation-delay: -0.9s; } .said-strip .bars i:nth-child(5), .lbars i:nth-child(5) { animation-delay: -1.2s; }
@keyframes speak { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(4.4); } }
.said-strip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 34px; margin-left: -0.75px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--atmo-edge), transparent) 0 -34px / 100% 34px no-repeat, linear-gradient(180deg, var(--line-4), var(--line-1)); animation: drip 1500ms var(--ease-inout) infinite; }
@keyframes drip { from { background-position: 0 -34px, 0 0; } to { background-position: 0 34px, 0 0; } }
/* The report is written: a line of light goes down its first screen once when it arrives (1900 ms, ease in-out). */
.scan { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 200px; pointer-events: none; opacity: 0; transform: translateY(-200px); background: linear-gradient(180deg, transparent, rgba(74, 168, 255, 0.07) 60%, rgba(142, 201, 255, 0.2) 97%, rgba(207, 238, 255, 0.85) 99.4%, transparent); }
.js .report-pane.in .scan { animation: scan 1900ms var(--ease-inout) 650ms both; }
@keyframes scan { 0% { transform: translateY(-200px); opacity: 0; } 10% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateY(760px); opacity: 0; } }
.pane-more { display: none; }

/* ---------- The moment ---------- */
.moment-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; }
.moment-head .lede { max-width: 33em; }
.moment-grid { margin-top: clamp(40px, 6vw, 76px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.takes { display: grid; }
.takes li { padding: 15px 0; border-top: 1px solid var(--line-1); font-size: 15.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.takes li:last-child { border-bottom: 1px solid var(--line-1); }
.takes b { color: var(--text-1); font-weight: 570; }
/* The folder of the snag: its real files. Pick one to look inside (the view crossfades: 220 ms out, 340 ms in). */
.folder { overflow: hidden; }
.folder-bar { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--line-1); }
.folder-bar .lights i { width: 10px; height: 10px; background: var(--ink-6) !important; box-shadow: none; }
.folder-path { font-size: 12.5px; color: var(--text-2); }
.folder-body { display: grid; }
.folder-view { position: relative; display: grid; align-items: center; aspect-ratio: 2.25 / 1; padding: 14px; background: var(--ink-0); overflow: auto; border-bottom: 1px solid var(--line-1); }
.folder-view > * { grid-area: 1 / 1; margin: 0; min-width: 0; opacity: 0; transition: opacity var(--d-3) var(--ease-in); }
.folder-view > .on { opacity: 1; transition: opacity var(--d-4) var(--ease-out) 60ms; }
.folder-view figure { display: grid; place-items: center; height: 100%; min-height: 0; }
.folder-view figure img, .folder-view figure video { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; background: #120f22; }
.folder-view figure.small img { max-height: 78%; }
.folder-list { display: grid; padding: 6px; }
.folder-list button { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 76px; align-items: baseline; gap: 14px; padding: 8px 10px; border-radius: 8px; text-align: left; transition: background var(--d-2) var(--ease-standard); }
.folder-list button:hover { background: rgba(255, 255, 255, 0.04); }
.folder-list button[aria-selected="true"] { background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 0 0 1px var(--line-1); }
.fname { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--d-2) var(--ease-standard); }
.folder-list button[aria-selected="true"] .fname, .folder-list button:hover .fname { color: var(--text-1); }
.fwhat { order: 2; font-size: 13px; line-height: 1.4; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsize { order: 3; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-4); white-space: nowrap; text-align: right; }
.folder-view pre { align-self: start; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; font-variant-ligatures: none; }
.folder-view pre .err { color: #ff8a80; } .folder-view pre .dim { color: var(--text-3); } .folder-view pre .key { color: var(--agent); } .folder-view pre .str { color: #a8f0bb; }
.hook { margin-top: clamp(56px, 8vw, 112px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 96px); align-items: center; }
.hook .read { margin-top: 12px; }
.hook pre.code { font-size: 12.5px; }

/* ---------- The fix ---------- */
.fix-grid, .ask-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fix-copy .lede, .ask-copy .lede, .signoff-copy .lede { margin-top: 22px; }
.fix-stage, .ask-stage { position: sticky; top: calc(var(--bar-h) + clamp(28px, 6vh, 64px)); }
.fix-note { display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap; margin-top: 16px; padding: 0 4px; }
.replay { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 7px; margin: -4px -9px -4px -7px; border-radius: 8px; font-size: 13px; font-weight: 550; color: var(--text-2); white-space: nowrap; transition: color var(--d-2) var(--ease-standard), background var(--d-2) var(--ease-standard); }
.replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--spring-snappy-ms) var(--spring-snappy); }
.replay:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.06); }
.replay:hover svg { transform: rotate(-50deg); }
.replay:active svg { transform: rotate(-190deg); transition-duration: 120ms; }

/* ---------- Sign it off ---------- */
.signoff-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.signoff-copy .pane { margin-top: 30px; }
.pane-flat { border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-1); background: transparent; }
.sign-note { display: grid; margin-top: 14px; padding: 0 4px; }
.sign-note > span { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--d-3) var(--ease-in), transform var(--d-3) var(--ease-in), visibility 0s linear var(--d-3); }
.sign-note[data-state="fixed"] [data-for="fixed"], .sign-note[data-state="verified"] [data-for="verified"], .sign-note[data-state="broken"] [data-for="broken"] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-4) var(--ease-out) 160ms, transform var(--d-5) var(--ease-out) 160ms, visibility 0s; }
.sign-note .replay { margin-left: 6px; }

/* ---------- Claude can ask you ---------- */
.ask-try { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; font-size: 14.5px; color: var(--text-3); }
.ask-try .kbds { margin: 0 2px; }

/* After the answer: the second bug goes away. Two builds of the same corner of the game, one over the other. */
.change { margin-top: 30px; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); box-shadow: var(--panel-edge), 0 30px 80px -40px rgba(0, 0, 0, 0.9); }
.corner { position: relative; aspect-ratio: 3.9 / 1; overflow: hidden; background: #1c1640; }
.corner iframe { position: absolute; right: 0; top: 0; width: 290%; max-width: none; height: auto; aspect-ratio: 16 / 9; pointer-events: none; opacity: 0; transition: opacity var(--d-3) var(--ease-in); }
.corner iframe.ready { opacity: 1; transition: opacity 600ms var(--ease-out); }
.corner #corner-b.ready { opacity: 0; transition: opacity var(--d-3) var(--ease-in); }
.change[data-state="after"] .corner #corner-b.ready { opacity: 1; transition: opacity 420ms var(--ease-out); }
.corner::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -1px 0 var(--line-2); pointer-events: none; }
.change figcaption { padding: 16px 18px 16px; }
.change-line { display: grid; font-size: 14.5px; line-height: 1.5; color: var(--text-1); }
.change-line > span { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--d-3) var(--ease-in), transform var(--d-3) var(--ease-in), visibility 0s linear var(--d-3); }
.change[data-state="before"] .change-line [data-for="before"], .change[data-state="after"] .change-line [data-for="after"] { opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-4) var(--ease-out) 160ms, transform var(--d-5) var(--ease-out) 160ms, visibility 0s; }
.diff { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line-1); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: var(--text-2); overflow-x: auto; font-variant-ligatures: none; white-space: pre; }
.diff span { display: block; padding: 0 6px; border-radius: 4px; transition: background var(--d-5) var(--ease-out), color var(--d-5) var(--ease-out), opacity var(--d-5) var(--ease-out); }
.diff i { display: inline-block; width: 1.6em; font-style: normal; color: var(--text-4); }
.diff .add { opacity: 0.28; }
.change[data-state="after"] .diff .del { color: var(--text-3); background: rgba(255, 90, 79, 0.08); text-decoration: line-through; text-decoration-color: rgba(255, 90, 79, 0.5); }
.change[data-state="after"] .diff .add { opacity: 1; color: #a8f0bb; background: rgba(48, 209, 88, 0.1); transition-delay: 180ms; }
.change[data-state="after"] .diff .add i { color: var(--ok); }
.change .meta { margin-top: 10px; }
#ask-hint { display: inline-grid; }
#ask-hint > span { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--d-3) var(--ease-in), visibility 0s linear var(--d-3); }
#ask-hint[data-state="asked"] [data-for="asked"], #ask-hint[data-state="answered"] [data-for="answered"] { opacity: 1; visibility: visible; transition: opacity var(--d-4) var(--ease-out) 140ms, visibility 0s; }

/* ---------- Talk to it ---------- */
.said-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; }
.lines { margin-top: clamp(40px, 6vw, 76px); border-top: 1px solid var(--line-1); }
.lines li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px clamp(32px, 6vw, 96px); align-items: baseline; padding: clamp(18px, 2.3vw, 30px) 0; border-bottom: 1px solid var(--line-1); }
.lines q { quotes: "“" "”"; font-size: clamp(1.3rem, 0.82rem + 1.95vw, 2.45rem); font-weight: 520; font-stretch: 108%; letter-spacing: -0.032em; line-height: 1.12; color: var(--text-1); text-wrap: balance; }
.lines q::before, .lines q::after { color: var(--text-4); }
.lines li > span { font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.lines li > span b { font-weight: 600; }
/* Each line is said, then done: the bars move while its words arrive, and what Callout does comes in after the
   last word. On hover a hairline of voice-blue draws under the line (520 ms out, 220 ms back). */
.lines li { position: relative; }
.lines li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, var(--atmo-edge), rgba(74, 168, 255, 0.5) 34%, rgba(74, 168, 255, 0) 72%); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-3) var(--ease-in); }
.lines li:hover::after { transform: scaleX(1); transition: transform var(--d-5) var(--ease-out); }
.lbars { display: none; }
@media (min-width: 1280px) {
  .lbars { position: absolute; left: -46px; top: calc(clamp(18px, 2.3vw, 30px) + clamp(0.28rem, 0.9vw, 0.74rem)); display: flex; align-items: center; gap: 3px; height: 24px; }
  .lbars i { display: block; width: 3.5px; height: 4px; border-radius: 3px; background: linear-gradient(180deg, #ffffff, var(--atmo-edge)); box-shadow: 0 0 8px rgba(142, 201, 255, 0.5); opacity: 0.32; transition: opacity var(--d-4) var(--ease-standard); }
  .js .lines q.in ~ .lbars i { animation: spoke 1300ms var(--ease-inout) both; }
  .lines li:hover .lbars i { opacity: 1; animation: speak 1.2s var(--ease-inout) infinite; }
}
@keyframes spoke { 0% { transform: scaleY(1); opacity: 0; } 22% { transform: scaleY(4.2); opacity: 1; } 48% { transform: scaleY(1.8); opacity: 1; } 72% { transform: scaleY(3.6); opacity: 1; } 100% { transform: scaleY(1); opacity: 0.32; } }

/* ---------- Also ---------- */
.also-grid { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.also-list { display: grid; }
.also-item { padding: 22px 0 24px; border-top: 1px solid var(--line-1); }
.also-item:last-child { border-bottom: 1px solid var(--line-1); }
.also-item .read { margin-top: 10px; font-size: 15px; }

/* ---------- What leaves your Mac ---------- */
.private-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; }
.ledger { margin-top: clamp(40px, 6vw, 76px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.mac { position: sticky; top: calc(var(--bar-h) + clamp(28px, 6vh, 64px)); padding: 26px 26px 22px; }
.mac-wave { display: flex; align-items: center; gap: 12px; height: 44px; margin: 14px 0 6px; padding: 0 14px; border-radius: 12px; background: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line-1); font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; }
.mac-wave .bars { height: 22px; flex: none; }
.mac-wave .bars i { animation: wave 1.5s var(--ease-inout) infinite; }
.mac-wave .bars i:nth-child(2) { animation-delay: -0.3s; } .mac-wave .bars i:nth-child(3) { animation-delay: -0.6s; } .mac-wave .bars i:nth-child(4) { animation-delay: -0.9s; } .mac-wave .bars i:nth-child(5) { animation-delay: -1.2s; }
@keyframes wave { 0%, 100% { height: 4px; } 45% { height: 17px; } }
.mac-wave .to { color: var(--text-4); }
.mac-wave em { font-style: normal; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; }
.mac ul { margin-top: 12px; }
.mac li { padding: 11px 0; border-top: 1px solid var(--line-1); font-size: 15px; line-height: 1.45; color: var(--text-1); }
.mac .meta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-1); }
.outs li { position: relative; padding: 24px 0; border-top: 1px solid var(--line-1); }
.outs li:last-child { border-bottom: 1px solid var(--line-1); }
.outs .when { margin: 3px 0 9px; font-size: 13px; font-weight: 520; color: var(--text-3); }
.outs .read { font-size: 15.5px; }
.private-more { margin-top: 30px; }

/* ---------- What you need ---------- */
.needs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 96px); align-items: start; }


/* ---------- Narrower ---------- */
@media (max-width: 919px) {
  .report-grid, .fix-grid, .ask-grid, .signoff-grid, .moment-head, .said-head, .private-head, .ledger, .needs-grid, .hook, .also-grid { grid-template-columns: minmax(0, 1fr); }
  .report-rail, .fix-stage, .ask-stage, .mac { position: static; }
  /* One column: the heading, its sentence, then the thing itself, then the small print. */
  .report-grid, .fix-grid, .ask-grid, .signoff-grid { row-gap: 0; }
  .report-rail, .fix-copy, .ask-copy, .signoff-copy { display: contents; }
  .report-grid .h2, .fix-grid .h2, .ask-grid .h2, .signoff-grid .h2 { order: 1; }
  .report-grid .lede, .fix-grid .lede, .ask-grid .lede, .signoff-grid .lede { order: 2; }
  .report-pane, .fix-stage, .ask-stage, .signoff-stage { order: 3; margin-top: 30px; }
  .signoff-copy .pane { order: 4; margin-top: 16px; }
  .sign-note { order: 5; }
  .rail, .facts, .ask-try { order: 6; }
  .change { order: 7; }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .proof-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stage-foot { flex-wrap: wrap; justify-content: center; }
  .rail-note { order: 7; }
  .moment-grid { grid-template-columns: minmax(0, 1fr); }
  .lines li { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the report folds to its first screen, and opens when asked. */
  .rail li { cursor: default; }
  .rail b { color: var(--text-1); }
  .rail span { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; }
  .rail li::before { background: var(--line-3); box-shadow: none !important; }
  .pane-long { max-height: var(--fold, 640px); transition: max-height 900ms var(--ease-out); }
  .pane-long::after { content: ""; position: absolute; inset: auto 0 0 0; height: 180px; background: linear-gradient(180deg, transparent, #07070a 78%); pointer-events: none; transition: opacity var(--d-4) var(--ease-standard); }
  .pane-long.open { max-height: var(--full, 4000px); }
  .pane-long.open::after { opacity: 0; }
  .pane-more { display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 560; color: var(--text-1); background: var(--ink-4); box-shadow: var(--edge), 0 0 0 1px var(--line-3), 0 14px 40px -10px #000; transition: background var(--d-2) var(--ease-standard), transform var(--d-1) var(--ease-standard); }
  .pane-more:active { transform: translateX(-50%) scale(0.97); }
  .pane-more [data-open], .pane-long.open .pane-more [data-closed] { display: none; }
  .pane-long.open .pane-more [data-open] { display: inline; }
}
@media (max-width: 759px) {
  .hero { padding-top: calc(var(--bar-h) + clamp(84px, 13vh, 120px)); } /* the headline starts under the open capsule and its shadow */
  .hero .promise { font-size: clamp(2.6rem, 15.2vw, 4.6rem); line-height: 0.96; white-space: normal; }
  .hero .promise > span { display: block; }
  .beam { height: min(80svh, 640px); }
  .stage { --stage-w: calc(100% - 2 * var(--gut)); }
  .beats { font-size: 11.5px; }
  .stage-status { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 10px; font-size: 11.5px; border-radius: 9px; }
  .beats li + li::before { width: 10px; margin: 0 6px; }
  .proof dt { flex-direction: column; gap: 6px; }
  .proof dd { font-size: 13.5px; }
  .hotkey { flex-direction: column; gap: 12px; padding: 8px 14px 10px; text-align: center; }
  .hotkey-label { min-width: 0; width: min(19em, 84vw); }
  .hotkey-label > span { justify-items: center; }
  .win { border-radius: 10px; }
  .win-bar { height: 32px; padding: 0 11px; border-radius: 10px 10px 0 0; grid-template-columns: auto minmax(0, 1fr) auto; }
  .win-rim { border-radius: 11px; }
  .win-nav, .win-plus { display: none; }
  .win-url { height: 22px; font-size: 11.5px; border-radius: 6px; }
  .lights { gap: 6px; } .lights i { width: 9px; height: 9px; }
  .win-view { border-radius: 0 0 10px 10px; }
  .dawn { top: -60px; filter: blur(30px); }
  .horizon i { top: 52%; }
  .fwhat { display: none; }
  .folder-list button { grid-template-columns: minmax(0, 1fr) auto; }
  .folder-view { padding: 10px; }
  .mac { padding: 20px 18px 18px; }
}

/* A short screen: the small print under the buttons gives its room to the game. */
@media (max-height: 800px) and (min-width: 760px) { .hero-fine { display: none; } .stage { --stage-w: clamp(min(620px, 100% - 2 * var(--gut)), (100svh - 452px) * 1.7778, min(1180px, 100% - 2 * var(--gut))); } }

@media (prefers-reduced-motion: reduce) {
  .js .hero .win, .js .horizon, .js .hero .btn.primary::after, .hotkey .kbds::after { animation: none !important; }
  .hero .p-say, .hero .p-done, .hero .lede, .hero .hero-actions, .hero-fine, .stage-foot, .stage-note { --said-delay: 0ms; --reveal-delay: 0ms; }
  .hero.leaning .win { transform: none; }
  .stage[data-light="fixed"] .win::after, .hero[data-light="fixed"] .beam { animation: none; }
  .beam { opacity: 0.07; }
  .hotkey .kbd, .hotkey-label > span { transition-duration: 120ms !important; transition-delay: 0ms !important; transform: none !important; }
  .dawn { opacity: 0.2; }
  .stage[data-light="fixed"] .win-rim { animation: none; }
  .stage-status > span { animation: none; }
  .beats li + li::before, .corner iframe, .diff span { transition-duration: 120ms !important; }
  .rail span, .pane-long, .surface { transition-duration: 120ms !important; }
  .mac-wave .bars i { animation: none; height: 10px; }
  .said-strip .bars i, .said-strip::after, .lbars i, .js .report-pane.in .scan { animation: none !important; }
  .js .proof-grid > [data-reveal] .big { filter: none; }
  .replay svg { transition: none; transform: none !important; }
}