/* The older story (story.js), on the sign-in page since September 30, 2026: a dark
   screen where a beam of the opening light acts out four steps, with the steps under it.
   It sits on that page's black (account.css), so its words are light; --sans comes from
   brand.css, which account.css imports. Without the script, or with less motion, the
   steps' words stand alone and nothing moves.

   It stands in a column beside the sign-in card, so the screen is above the steps at every
   width. With the script running, only the chosen step shows its words; without it (no
   .story-live) every step keeps them. The other steps' words are clipped, not removed, so
   a screen reader still reads all four, and the chosen step keeps the room of the longest
   (--story-text, story.js), so the list never changes height as the story moves on. */
.story { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(20px,2.5vw,28px); }
.story-steps { list-style:none; margin:0; padding:0; display:grid; gap:6px; counter-reset:story; }
.story-step { position:relative; padding:10px 14px 20px 52px; border-radius:22px; transition:background-color .35s ease,box-shadow .35s ease; }
.story-step::before { counter-increment:story; content:counter(story); position:absolute; left:14px; top:20px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#ffffff14; color:#a1a1a6; font:600 13px/1 var(--sans); transition:background-color .35s,color .35s; }
.story-step h3 { margin:0; font-size:19px; line-height:1.25; font-weight:600; letter-spacing:-.012em; }
/* Each step's button is at least 44 pixels tall, a fingertip's size. The step's own
   padding and the paragraph's margin give back the 6 pixels it adds above and below, so
   the title and its number stay where they were. */
.story-step button { display:block; width:100%; min-height:44px; margin:0; padding:10px 0; border:0; border-radius:4px; background:none; color:#f5f5f7; font:inherit; text-align:left; cursor:pointer; }
/* account.css greys every button when it is pointed at or pressed; these are plain words. */
.story-step button:is(:hover,:active) { background:none; }
.story-step button:focus-visible { outline:2px solid #d8b46a; outline-offset:5px; }
.story-step p { margin:2px 0 0; color:#a1a1a6; font-size:16px; line-height:1.55; text-wrap:pretty; }
.story-live .story-step:not(.active) h3 button { color:#a1a1a6; }
.story-live .story-step:not(.active) h3 button:hover { color:#f5f5f7; }
.story-live .story-step.active { background:#161617; box-shadow:inset 0 0 0 1px #ffffff12; }
.story-live .story-step.active::before { background:#f5f5f7; color:#141414; }
.story-live .story-step:not(.active) p { height:1px; margin:0; overflow:hidden; clip-path:inset(50%); }
.story-live .story-step.active p { min-height:var(--story-text,auto); }
/* The time left in a scene, drawn as a thread of the light. */
.story-progress { position:absolute; left:52px; right:14px; bottom:12px; height:2px; overflow:hidden; border-radius:1px; background:#ffffff14; opacity:0; }
.story-progress::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#4676c3,#76d3e9,#eae8d4,#f5d47d,#cc9665,#866379); transform:scaleX(0); transform-origin:left; }
.story-live .story-step.active .story-progress { opacity:1; }
.story-live .story-step.active .story-progress::after { animation:story-progress var(--scene-time,6s) linear forwards; }
/* Held: paused, off screen, or less motion. The bar shows the step without counting down. */
.story-held .story-step.active .story-progress::after { animation:none; transform:scaleX(1); opacity:.35; }
@keyframes story-progress { to { transform:scaleX(1); } }
.story-show { order:-1; display:grid; gap:10px; }
.story .story-stage { position:relative; display:none; aspect-ratio:600/380; overflow:hidden; border-radius:24px; background:radial-gradient(ellipse 85% 75% at 50% 32%,#17181c,#08090b 72%); box-shadow:inset 0 0 0 1px #ffffff14; }
.story-live .story .story-stage { display:block; }
.story .story-stage svg { position:absolute; inset:0; width:100%; height:100%; }
.story .story-pause { justify-self:end; margin:0; padding:10px 6px; min-height:44px; border:0; background:none; color:#a1a1a6; font:500 14px/1 var(--sans); cursor:pointer; }
.story .story-pause:hover { color:#f5f5f7; }
.story .story-pause:focus-visible { outline:2px solid #d8b46a; outline-offset:2px; border-radius:6px; }

.story-ruler line { stroke:#4a4a4f; stroke-width:1; }
.story-ruler text { fill:#8e8e93; font:500 11px var(--sans); font-variant-numeric:tabular-nums; }
.story-bar { fill:#e8e8ed; }
.story-noisy .story-bar { fill:#a1a1a6; }
.story-noisy .story-clipped { fill:#ff6b5a; }
.story-hiss { fill:#a7c0c6; opacity:.6; }
.story-hum path { fill:none; stroke:#76d3e9; stroke-width:1.3; }
.story-hum .story-hum-glow { stroke-width:6; opacity:.22; }
.story-click { transform-box:fill-box; transform-origin:50% 100%; }
.story-click line { stroke:#fff4dc; stroke-width:1.6; stroke-linecap:round; }
.story-click .story-click-glow { stroke-width:7; opacity:.18; }
.story-fill { transform-box:fill-box; transform-origin:center; }
.story-inferred { fill:#eed7a6; }
.story-guess { fill:#d8b46a14; stroke:#e3c68e; stroke-width:1; stroke-dasharray:4 3; }
.story-playhead { stroke:#d8b46a; stroke-width:1.6; }
.story-tag text, .story-toggle text, .story-blend text, .story-panel text { font:600 12.5px var(--sans); }
.story-toggle-track { fill:#0e0f12; stroke:#ffffff26; }
.story-toggle-knob { fill:#f5f5f726; stroke:#f5f5f7; transition:transform .38s cubic-bezier(.3,.7,.2,1); }
.story-toggle text { fill:#e8e8ed; }
.story-blend text { fill:#a1a1a6; }
.story-blend-track { stroke:#ffffff26; stroke-width:3; stroke-linecap:round; }
.story-blend-knob { fill:#d8b46a; }
.story-panel rect { fill:#0e0f12eb; stroke:#ffffff21; }
.story-panel text { fill:#d1d1d6; }
.story-panel .story-panel-title { fill:#e3c68e; }

/* A phone: the picture and the four steps together must fit a screen 664 pixels tall
   (Safari's visible height on a 390 by 844 phone). Each step gives up 8 pixels and the
   gaps 2, which is 38 in all; the buttons stay 44 pixels tall. The Pause button stays
   beside the picture it stops: moved under the steps, a tap on it scrolled the picture
   off the screen (tried September 29, 2026). */
@media (max-width:480px) {
  .story-steps { gap:4px; }
  .story-step { padding:8px 14px 14px 52px; }
  .story-step::before { top:18px; }
  .story-progress { bottom:8px; }
}