/* Arsenal showcases: self-playing stories. The main page's tokens (style.css) plus screens, rails, lanes and the bar. */
.sc-page { --w: 1080px; }
.sc, .sc-head, .sc-more { --ease2: cubic-bezier(.3, .7, .3, 1); }
.sc-head { max-width: calc(var(--w, 1200px) + 48px); margin: 0 auto; padding: 36px 24px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 40px; }
.sc-head h1 { font-size: clamp(40px, 5vw, 66px); }
.sc-index { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.sc-index a { display: block; text-decoration: none; }
.sc-index img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #111113; }
.sc-index b { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: #a1a1a6; }
.sc-index a:hover b { color: var(--text); }

/* a chapter: the stage (screen, lanes, bar) beside the rail of steps */
.sc { max-width: calc(var(--w, 1200px) + 48px); margin: 120px auto 0; padding: 0 24px; scroll-margin-top: 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) 272px; column-gap: 28px; align-items: start; }
.sc > h2, .sc > .credit { grid-column: 1 / -1; }
.sc > h2 { margin-bottom: 22px; }
.sc > .stage { grid-column: 1; min-width: 0; } .sc > .rail { grid-column: 2; }
.sc .credit { margin-top: 12px; font-size: 12px; color: #8e8e93; text-wrap: pretty; }

.stage { position: relative; }
.screen { position: relative; overflow: hidden; border-radius: 16px; background: #0a0a0c; isolation: isolate; }
.screen.r43 { aspect-ratio: 4 / 3; } .screen.r169 { aspect-ratio: 16 / 9; }
.screen video, .screen > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sc.buffering .screen::after { content: ""; position: absolute; right: 16px; top: 16px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: sc-spin .9s linear infinite; }
@keyframes sc-spin { to { transform: rotate(1turn); } }

/* the version names on either side of a sweeping wipe, and the sound switch */
.tag2 { position: absolute; top: 14px; z-index: 3; padding: 4px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .56);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; animation: sc-fade .35s var(--ease2) both; }
.tag2.l { left: 14px; } .tag2.r { right: 14px; } .tag2[hidden] { display: none; }
.snd { position: absolute; right: 14px; bottom: 14px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .2s, transform .2s var(--ease2); }
.snd:hover { transform: scale(1.06); }
.snd svg { width: 22px; height: 22px; fill: currentColor; } .snd .i-on { display: none; } .snd.on .i-on { display: inline; } .snd.on .i-off { display: none; }
.snd.on { background: #fff; color: #000; }
/* the step that just happened, on the picture (shown where the rail sits below the stage) */
.cap { display: none; position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: calc(100% - 76px); margin: 0; padding: 7px 11px; border-radius: 10px;
  background: rgba(0, 0, 0, .58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none; }
.cap b { display: block; font-size: 14px; font-weight: 650; line-height: 1.2; } .cap i { display: block; font-style: normal; font-size: 12px; color: #d1d1d6; line-height: 1.3; }
.cap.in { animation: sc-rise .45s var(--ease2) both; }
@keyframes sc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }

/* the bar: play / pause / again, a scrub line marked at every step, the time */
.bar { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pbtn { width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; transition: background .2s, transform .2s var(--ease2); }
.pbtn:hover { background: rgba(255, 255, 255, .18); }
.pbtn svg { width: 18px; height: 18px; fill: currentColor; } .pbtn .i-pause, .pbtn .i-again { display: none; }
.pbtn.on .i-play { display: none; } .pbtn.on .i-pause { display: inline; }
.pbtn.again .i-play { display: none; } .pbtn.again .i-again { display: inline; }
.scrub { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); cursor: pointer; touch-action: none; }
.scrub::before { content: ""; position: absolute; inset: -12px 0; }
.scrub i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #fff; }
.scrub .tick { position: absolute; top: -3px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, .35); pointer-events: none; }
.scrub:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.time { flex: none; min-width: 74px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: #8e8e93; }

/* the rail: each model's step, dim until the story reaches it */
.rail { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rail::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: rgba(255, 255, 255, .12); }
.step { position: relative; min-width: 0; transition: opacity .45s var(--ease2); }
.step.next { opacity: .58; }
.step button { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; text-align: left; border-radius: 12px; overflow: hidden; transition: background .3s, color .3s; }
.step button:hover { background: #141416; }
.step.now button { background: #fff; color: #000; } .step.now i { color: #48484a; }
.step .fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #000; opacity: .14; transform-origin: left; transform: scaleX(var(--p, 0)); }
.step:not(.now) .fill { display: none; }
.step .th { flex: none; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; background: #1c1c1f; display: grid; place-items: center; box-shadow: 0 0 0 4px #000; transition: box-shadow .3s; }
.step.now .th { box-shadow: 0 0 0 4px #fff; }
.step .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step .th .wave { width: 100%; height: 100%; padding: 0 3px; background: #0b0b0d; }
.step .th .tt { display: grid; place-items: center; width: 100%; height: 100%; padding: 0 2px; background: #0b0b0d; color: #f5f5f7; font-size: 9px; font-weight: 700; line-height: 1.05; text-align: center; }
.step .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.step b { font-size: 14px; font-weight: 650; line-height: 1.2; text-wrap: balance; }
.step i { font-style: normal; font-size: 12.5px; line-height: 1.3; color: #a1a1a6; text-wrap: balance; }

/* lanes: a sound per row, waveform lit as it plays */
.lanes { display: grid; gap: 4px; margin-top: 10px; }
.lane { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: 14px; padding: 6px 12px; border-radius: 11px; background: #111113; text-align: left; width: 100%; transition: background .3s, opacity .3s; }
.ln { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ln b { font-size: 13.5px; font-weight: 650; color: var(--c, #f5f5f7); } .ln i { font-style: normal; font-size: 11.5px; color: #a1a1a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wave { display: block; width: 100%; height: 40px; }
button.lane:hover { background: #18181b; }
.tracks .wave { height: 26px; }
.tracks .lane[aria-pressed="true"] { background: #1a1a1d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
/* the locomotive's sounds: each starts where Stable Audio placed it */
#loco .lane, #film .lane { grid-template-columns: 176px minmax(0, 1fr) 64px; }
#loco .at { position: relative; display: block; height: 32px; }
#loco .at .wave { position: absolute; left: var(--at); width: calc(100% - var(--at)); height: 32px; }
#loco .check, #film .check { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
#loco .check b, #film .check b { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; } #film .check i, #loco .check i { font-style: normal; font-size: 10.5px; color: #8e8e93; }
#loco.silent .lanes { opacity: .5; }

/* the shuttle's tracked outline and the commentary's words */
.trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.trace path { fill: rgba(255, 92, 138, .22); stroke: #ff5c8a; stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.subs { z-index: 2; position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; padding: 0 64px; text-align: center; font-size: clamp(14px, 1.6vw, 19px); font-weight: 600; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.subs span { color: rgba(255, 255, 255, .45); transition: color .15s; } .subs span.on { color: #fff; }
.r169::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 1; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); pointer-events: none; }

/* the song: one waveform that splits into its players */
.lanes-screen { padding: 14px; display: grid; gap: 6px; background: #0c0c0e; }
.lanes-screen .lane { background: #141416; }
.lanes-screen .mixlane .ln { font-size: 14px; font-weight: 650; }
.lanes-screen .mixlane .wave { height: 52px; }
.lanes-screen .stem { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease2) calc(var(--k) * 90ms), opacity .45s calc(var(--k) * 90ms), padding .6s var(--ease2) calc(var(--k) * 90ms); }
.lanes-screen.apart .stem { max-height: 64px; padding-top: 6px; padding-bottom: 6px; opacity: 1; }
.lanes-screen .stem[aria-pressed="true"] { background: #1a1a1d; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.karaoke { margin: 4px 0 0; padding: 12px 16px; border-radius: 11px; background: #141416; white-space: nowrap; overflow: hidden; font-size: clamp(16px, 1.8vw, 22px); font-weight: 600; letter-spacing: -.01em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 80%, transparent 94%); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 80%, transparent 94%); opacity: .3; transition: opacity .4s; }
.lanes-screen.words .karaoke { opacity: 1; }
.karaoke span { color: rgba(255, 107, 139, .35); transition: color .12s; } .karaoke span.on { color: #ff6b8b; }

/* walk: photo, depth sweeping across it, the objects found, then the scene in 3D */
.rwalk .over { clip-path: inset(0 calc(100% - var(--x, 0%)) 0 0); }
.rwalk .wline { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); z-index: 2; }
.rwalk[data-mode="photo"] .wline, .rwalk:not([data-mode="photo"]):not([data-mode="depth"]) .wline, .rwalk:not([data-mode="photo"]):not([data-mode="depth"]) .over { opacity: 0; }
.rwalk .over, .rwalk .wline { transition: opacity .5s; }
.objs { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .25s; pointer-events: none; }
.rwalk[data-mode="boxes"] .objs, .rwalk[data-mode="masks"] .objs { opacity: 1; }
.omask { position: absolute; inset: 0; background: rgba(255, 92, 138, .55); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 0; transition: opacity .5s; }
.rwalk[data-mode="masks"] .omask { opacity: 1; }
.obox { position: absolute; border: 2px solid #fff; border-radius: 8px; transition: opacity .4s; }
.rwalk[data-mode="masks"] .obox { opacity: 0; }
.olab, .olab3 { position: absolute; display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 9px; border-radius: 8px; background: #fff; color: #000; font-size: 13px; white-space: nowrap; pointer-events: none; }
.olab { transform: translate(-50%, calc(-100% - 8px)); }
.olab b, .olab3 b { font-weight: 650; } .olab i, .olab3 i { font-style: normal; color: #6e6e73; font-variant-numeric: tabular-nums; }
.olab3 { left: 0; top: 0; margin: -34px 0 0 -40px; will-change: transform; }
.three { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; background: radial-gradient(120% 90% at 50% 40%, #16161a, #060607); }
.rwalk[data-mode="3d"] .three, .robj[data-mode="3d"] .three { opacity: 1; visibility: visible; transition: opacity .6s; }
.three canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; } .three canvas:active { cursor: grabbing; }

/* object: the sentence, the picture it became, the picture lifted out, the object */
.robj { aspect-ratio: 16 / 10; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); background: #0c0c0e; }
.robj .prompt2 { grid-column: 1; margin: 0; padding: 28px 30px; align-self: center; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.45; font-weight: 600; color: #f5f5f7; transition: color .5s; }
.robj:not([data-mode="prompt"]) .prompt2 { color: #6e6e73; }
.robj .pic, .robj .cut, .robj .three { position: absolute; top: 0; bottom: 0; right: 0; left: auto; width: calc(100% / 2.25 * 1.25); height: 100%; object-fit: contain; transition: opacity .6s; }
.robj .pic { background: #d9d9db; opacity: 0; } .robj .cut { opacity: 0; }
.robj[data-mode="pic"] .pic { opacity: 1; } .robj[data-mode="cut"] .cut { opacity: 1; }
.robj .three { inset: 0 0 0 auto; background: radial-gradient(90% 90% at 50% 45%, #2a2a30, #0b0b0d); }

.sc-close { margin-top: 140px; max-width: calc(var(--w, 1200px) + 48px); padding: 0 24px; text-align: left; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.sc-close h2 { margin: 0; } .sc-close .links { justify-content: flex-start; margin: 0; }

/* each chapter's screen fits a laptop screen with its controls: the chapter narrows to the screen's shape */
@media (min-width: 901px) {
  .sc.fit-r43 { max-width: calc(min(62vh, 680px) * 4 / 3 + 348px); }
  .sc.fit-rwalk { max-width: calc(min(62vh, 680px) * 2048 / 1312 + 348px); }
  .sc.fit-r169, .sc.fit-robj, .sc.fit-lanes-screen { max-width: calc(min(60vh, 600px) * 16 / 9 + 348px); }
}
.tracks .lane { grid-template-columns: 250px minmax(0, 1fr); padding: 4px 12px; }
.tracks .ln { flex-direction: row; align-items: baseline; gap: 8px; } .tracks .wave { height: 22px; }
@media (max-width: 900px) {
  .sc-head { grid-template-columns: 1fr; gap: 18px; }
  .sc-index { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sc { grid-template-columns: minmax(0, 1fr); }
  .sc > .rail { grid-column: 1; grid-row: auto; margin-top: 10px; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .rail::-webkit-scrollbar { display: none; } .rail::before { display: none; }
  .step { flex: none; } .step button { padding: 5px 10px 5px 5px; gap: 8px; } .step i { display: none; }
  .step .th { width: 28px; height: 28px; border-radius: 7px; box-shadow: none; } .step.now .th { box-shadow: none; }
  .step b { font-size: 12.5px; white-space: nowrap; }
  .cap { display: block; }
}
@media (max-width: 640px) {
  .tracks .lane { grid-template-columns: 150px minmax(0, 1fr); } .tracks .ln i { display: none; }
  .sc { margin-top: 88px; padding: 0 16px; } .sc-head { padding: 32px 16px 0; }
  .screen { border-radius: 12px; }
  .lane { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 6px 10px; } .ln b { font-size: 12.5px; } .ln i { font-size: 10.5px; }
  #loco .lane, #film .lane { grid-template-columns: 96px minmax(0, 1fr) 36px; } #loco .check i, #film .check i { display: none; }
  .subs { bottom: 10px; font-size: 13px; padding: 0 52px 0 12px; }
  .tag2 { top: 10px; font-size: 11.5px; } .tag2.l { left: 10px; } .tag2.r { right: 10px; }
  .snd { right: 10px; bottom: 10px; width: 36px; height: 36px; }
  .cap { left: 8px; bottom: 8px; padding: 5px 9px; border-radius: 8px; } .cap b { font-size: 12.5px; } .cap i { font-size: 11px; }
  #loco .ln i, #film .ln i { display: none; }
  .robj { aspect-ratio: auto; grid-template-columns: 1fr; }
  .robj .prompt2 { padding: 16px 16px 12px; font-size: 13.5px; }
  .robj .pic, .robj .cut, .robj .three { position: relative; grid-row: 2; grid-column: 1; width: 100%; aspect-ratio: 1; height: auto; }
  .robj .three { position: relative; }
  .lanes-screen { padding: 10px; }
  .time { display: none; }
  .sc-close { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .step, .cap.in, .tag2, .lanes-screen .stem { transition: none; animation: none; } }

/* the main page: three stories under the hero, then the other three as small links */
.sc-more { max-width: calc(var(--w, 1080px) + 48px); margin: 72px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: start; }
.sc-more a { display: block; text-decoration: none; }
.sc-more img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #111113; transition: transform .35s var(--ease2); }
.sc-more a:hover img { transform: scale(1.03); }
.sc-more b { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #d1d1d6; }
.sc-more .all { align-self: center; padding: 0 8px; } .sc-more .all b { margin: 0; font-size: 15px; color: #f5f5f7; white-space: nowrap; }
.sc-more .all b::after { content: " →"; color: #8e8e93; }
@media (max-width: 640px) { .sc-more { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px; margin-top: 56px; } .sc-more .all { grid-column: 1 / -1; padding: 6px 0 0; } }

/* main page: the stories keep the hero's width; small screens keep captions short and drop bare scores */
.sc { max-width: calc(var(--w, 1080px) + 48px) !important; } /* one width on both pages (site climb round 3) */
@media (max-width: 640px) { #loco .check, #film .check { display: none; } #loco .lane, #film .lane { grid-template-columns: 110px minmax(0, 1fr); } }
@media (max-width: 400px) { .cap i { display: none; } }

/* the old photo: four stills of one photo, swept across each other inside a camera that leans in */
.rphoto .cam { position: absolute; inset: 0; will-change: transform; }
.rphoto .cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rphoto .wline { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); z-index: 3; transition: opacity .3s; }
@media (min-width: 901px) { .sc.fit-rphoto { max-width: calc(min(62vh, 680px) * 1.372 + 348px); } }
.lanes-screen { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .lanes-screen { padding-bottom: 58px; } }

/* the shuttle: a fixed two-line caption block (whole phrases, words lit as said) and one stage label */
.subs.phrase { height: 2.6em; line-height: 1.3; display: grid; align-items: end; justify-items: center; }
.subs.phrase .ph { grid-area: 1 / 1; max-width: 30ch; text-wrap: balance; opacity: 0; transition: opacity .25s; }
.subs.phrase .ph.on { opacity: 1; }
.subs.phrase .ph span { color: rgba(255, 255, 255, .5); transition: color .12s; } .subs.phrase .ph span.said { color: #fff; }
.stage-label { position: absolute; left: 14px; top: 14px; z-index: 3; margin: 0; padding: 6px 12px; border-radius: 9px; font-size: 14px; font-weight: 650; color: #fff;
  background: rgba(0, 0, 0, .56); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.stage-label.in { animation: sc-fade .35s var(--ease2) both; }
@media (max-width: 900px) { #rescore .cap { display: none; } }
@media (max-width: 640px) { .stage-label { left: 10px; top: 10px; font-size: 12px; padding: 5px 9px; } .subs.phrase { font-size: 14px; } }

/* round 1 (site climb): the 3D labels wait until the flat ones have gone, so no two label sets overlap */
.three .olab3 { opacity: 0; transition: opacity .3s; }
.rwalk[data-mode="3d"] .three .olab3 { opacity: 1; transition-delay: .55s; }
/* the showcases page: every chapter starts at the header's left edge */
@media (min-width: 901px) {
  .sc-page .sc { margin-left: max(0px, calc((100% - var(--w) - 48px) / 2)); margin-right: auto; }
  .sc-page .sc-close { margin-left: max(0px, calc((100% - var(--w) - 48px) / 2)); }
}
/* narrow screens: the steps are an even row of thumbnails, the one under way ringed; its name and job sit in a fixed
   two-line line under the row, so nothing clips and nothing changes size as the story moves */
@media (max-width: 900px) {
  .sc > .rail { position: relative; overflow: visible; flex-wrap: nowrap; justify-content: space-between; gap: 0; margin-top: 14px; padding: 0 2px 50px; }
  .step, .step.now { position: static; flex: none; }
  .step button, .step.now button { position: static; padding: 0; background: none; color: inherit; width: auto; overflow: visible; }
  .step .th { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 0 0 2px transparent; transition: box-shadow .3s; }
  .step.now .th { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
  .step .fill { display: none; }
  .step .tx { display: none; }
  .step.now .tx { display: block; position: absolute; left: 2px; right: 2px; top: 54px; height: 2.6em; line-height: 1.3; font-size: 13px; text-wrap: balance; }
  .step.now b { display: inline; white-space: normal; font-size: 13px; color: #f5f5f7; }
  .step.now i { display: inline; font-size: 13px; color: #a1a1a6; } .step.now i::before { content: "  "; white-space: pre; }
  .cap { display: none; }
}
@media (max-width: 640px) { .ln i { white-space: normal; overflow: visible; line-height: 1.2; } }

/* round 3: the helmet's prompt stays four lines on a phone, fading out, so the picture and the object lead */
@media (max-width: 640px) {
  .robj .prompt2 { box-sizing: border-box; max-height: calc(4 * 1.45em + 28px); overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 62%, transparent 92%); mask-image: linear-gradient(#000 62%, transparent 92%); }
}

/* the helmet's prompt never ends mid-word against the frame: it fades out where the frame ends */
@media (min-width: 641px) {
.robj .prompt2 { max-height: 100%; box-sizing: border-box; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent 96%); mask-image: linear-gradient(#000 78%, transparent 96%); }
}

/* the speaker and its volume: one pill at the screen's corner; the slider slides out while sound is on */
.sndbox { position: absolute; right: 14px; bottom: 14px; z-index: 4; display: flex; align-items: center; height: 40px; border-radius: 20px;
  background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.sndbox .snd { position: relative; right: auto; bottom: auto; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sndbox.on .snd { background: #fff; }
.vol { -webkit-appearance: none; appearance: none; width: 0; margin: 0; padding: 0; height: 40px; background: none; opacity: 0; cursor: pointer;
  transition: width .35s var(--ease2), opacity .25s, margin .35s var(--ease2); }
.sndbox.open .vol { width: 104px; margin: 0 12px 0 16px; opacity: 1; }
.vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--v, 35%), rgba(255, 255, 255, .25) var(--v, 35%)); }
.vol::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--v, 35%), rgba(255, 255, 255, .25) var(--v, 35%)); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.vol::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.vol:focus-visible { outline: none; } .vol:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
@media (max-width: 640px) { .sndbox { right: 10px; bottom: 10px; height: 36px; border-radius: 18px; } .sndbox.open .vol { width: 88px; margin: 0 10px 0 14px; } }

/* sound lanes on the image and film stories: each sound sits where it plays in the story, lit once heard */
.cues { position: relative; display: block; height: 30px; }
.cues .cue { position: absolute; top: 0; bottom: 0; left: var(--at); width: var(--w); }
.cues .cue .wave { height: 30px; }
.sc .lane.cuelane { grid-template-columns: 176px minmax(0, 1fr); }
@media (max-width: 640px) { .sc .lane.cuelane { grid-template-columns: 110px minmax(0, 1fr); } }
#film .at { position: relative; display: block; height: 32px; }
#film .at .wave { position: absolute; left: var(--at); width: calc(100% - var(--at)); height: 32px; }

/* the stories below the showcases: still pictures that move like the films above */
.rstill > img { will-change: clip-path, opacity; }
.rstill .wline { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); z-index: 3; opacity: 0; pointer-events: none; }
.rstill .omask { z-index: 2; opacity: 0; }
.objs2 { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.objs2 .obox, .objs2 .olab { opacity: 0; transition: none; }
.typed { position: absolute; inset: 0; z-index: 4; margin: 0; display: grid; place-items: center; padding: 8% 12%; background: #0a0a0c; text-align: center;
  font-size: clamp(17px, 2.1vw, 28px); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: #f5f5f7; text-wrap: balance; pointer-events: none; }
.capband { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4; margin: 0; padding: 12px 16px; border-radius: 12px; min-height: 3.9em;
  background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 15px; line-height: 1.3; color: #f5f5f7; opacity: 0; pointer-events: none; }
.bands3 { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); opacity: 0; pointer-events: none; }
.bands3 span { justify-self: center; padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .56); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* search: the question, then its five best photos with their scores */
.rsearch { background: #0a0a0c; }
.qbar { position: absolute; left: 18px; top: 16px; z-index: 3; margin: 0; min-width: 9ch; padding: 7px 14px; border-radius: 999px; background: #f5f5f7; color: #000; font-size: 15px; font-weight: 650; opacity: 0; }
.sgrid { position: absolute; inset: 64px 18px 18px; }
.sset { position: absolute; inset: 0; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; opacity: 0; }
.sset figure { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: #141416; transform: translateY(calc((1 - var(--on, 0)) * 8px)); }
.sset figure.big { grid-row: 1 / 3; }
.sset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sset .sc { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .56); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sset .sc i { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--s), rgba(255, 255, 255, .2) var(--s)); }
.sset .sc b { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; color: #fff; }
/* predict: one series, its forecast band, what happened */
.rchart { background: #0a0a0c; }
.rchart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rchart .gl { stroke: rgba(255, 255, 255, .08); stroke-width: 2; } .rchart .tk { fill: #8e8e93; font-size: 32px; font-variant-numeric: tabular-nums; }
.rchart .hist, .rchart .med, .rchart .act { fill: none; stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rchart .hist { stroke: #f5f5f7; } .rchart .med { stroke: #5ee6c8; } .rchart .act { stroke: #ffd36b; }
.rchart .band { fill: rgba(94, 230, 200, .18); opacity: 0; } .rchart .cut { stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0; }
.rchart .lb { font-size: 40px; font-weight: 650; fill: #f5f5f7; opacity: 0; } .rchart .lb.med { fill: #5ee6c8; } .rchart .lb.act { fill: #ffd36b; }
@media (max-width: 640px) {
  .capband { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; font-size: 12.5px; }
  .bands3 span { font-size: 10.5px; padding: 3px 7px; } .qbar { left: 10px; top: 10px; font-size: 12.5px; padding: 5px 10px; }
  .sgrid { inset: 46px 10px 10px; } .sset { gap: 6px; } .sset .sc { left: 6px; right: 6px; bottom: 6px; padding: 3px 6px; } .sset .sc b { font-size: 10px; }
  .rchart .tk { font-size: 40px; } .rchart .lb { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .sset figure { transform: none; } }

/* the speaker sits where it covers nothing: top right over the search grid's gap, top left on the chart */
.rsearch .sndbox { top: 14px; bottom: auto; } .rchart .sndbox { top: 14px; bottom: auto; left: 14px; right: auto; flex-direction: row-reverse; }
.rchart .sndbox.open .vol { margin: 0 16px 0 12px; }
@media (max-width: 640px) { .bands3 { top: 10px; bottom: auto; } .rchart .lb { font-size: 52px; } .rchart .tk { font-size: 44px; } }