/* ------------------------------------------------------------------------
   How it works (#how): four slides.
   One pinned frame shows one slide at a time; a scroll gesture moves one
   slide. Every moving part of a slide is drawn from one number, --p, which
   /scenes.js runs from 0 to 1, over and over, while the slide is on. Each
   part takes its own slice of --p with clamp(), so the pacing of a slide is
   the list of slices at the top of its block. --p defaults to 1: without
   JavaScript or with reduced motion, each slide shows its last frame.
   The stage is a world --k points wide and --H tall, drawn in --u, one
   point. On a computer it is 1000 x 500; on a phone it is a smaller world,
   360 x 450, with its own layout, so text in the mockups stays readable.
   ------------------------------------------------------------------------ */

@property --mb { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --tcs { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --tcf { syntax: "<integer>"; inherits: false; initial-value: 0; }

/* Stacked by default: each slide at its finished frame. */
.story { padding-inline: var(--pad); border-top: 1px solid var(--line); margin-top: clamp(3rem, 6vw, 4.5rem); }
.slide { --p: 1; padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.slide + .slide { border-top: 1px solid var(--line); }

/* With motion: one pinned frame. The section is the frame's height plus a
   stretch of scrolling between slides, which only the scroll bar and links
   ever use: gestures step from slide to slide. */
.has-story .story { height: calc(100vh - 4rem + 3 * 60vh); height: calc(100svh - 4rem + 3 * 60svh); }
/* A link to #how lands with the frame pinned under the 4rem header, not
   1rem short of it (the page's scroll-padding is 5rem). */
.has-story .story { scroll-margin-top: -1rem; }
.story-pin { position: relative; }
.has-story .story-pin { position: sticky; top: 4rem; display: flex; align-items: center; height: calc(100vh - 4rem); height: calc(100svh - 4rem); }
.has-story .story-slides { display: grid; width: 100%; }
/* Slides wait below the frame and leave above it, so moving forwards
   lifts the next one in and moving back brings the last one down. */
.has-story .slide {
  grid-area: 1 / 1;
  padding-block: 0;
  border: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2.5rem);
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.6s;
}
.has-story .slide.is-past { transform: translateY(-2.5rem); }
.has-story .slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.15s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s, visibility 0s;
}

/* Leaving the frame, above or below, it fades and sinks back a little as it
   goes; scenes.js sets --out from 0 (pinned) to 1 (well clear of it). */
.has-story .story-slides { opacity: calc(1 - var(--out, 0)); transform: scale(calc(1 - 0.04 * var(--out, 0))); }
.has-story .story-dots { opacity: calc(1 - 2 * var(--out, 0)); }

/* Where you are: four marks down the right gutter, the current one long. */
.story-dots { position: absolute; z-index: 10; right: calc(var(--pad) / -2 - 3px); top: 50%; display: grid; gap: 10px; transform: translateY(-50%); }
.story-dots[hidden] { display: none; }
.story-dots button { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.28); cursor: pointer; transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease; -webkit-tap-highlight-color: transparent; }
.story-dots button::before { content: ""; position: absolute; inset: -6px -10px; }
.story-dots button:hover { background: rgba(255, 255, 255, 0.55); }
.story-dots button[aria-current] { height: 30px; background: var(--brand-tint); }
.story-dots button:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: 4px; }

.scene-copy {
  max-width: 46rem;
  margin: 0 auto clamp(1.25rem, 3.5vh, 2.25rem);
  text-align: center;
}
.scene-copy h2 { margin: 0 0 0.75rem; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; }
.scene-copy p { margin: 0 auto; max-width: 40rem; color: var(--ink-2); font-size: 1.0625rem; }
/* Pinned, every slide's copy takes three lines' room, so the stage under it
   stays put from slide to slide. */
@media (min-width: 44.01rem) { .has-story .scene-copy p { min-height: 3lh; } }

/* The stage: every slide is the same frame, a crop of a Mac's screen with
   its wallpaper and menu bar, the same size, corners and margins. */
.scene-stage {
  --k: 1000;
  --H: 500;
  position: relative;
  width: min(100%, 68rem);
  aspect-ratio: var(--k) / var(--H);
  margin-inline: auto;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line-2);
  background:
    radial-gradient(90% 60% at 82% 112%, rgba(255, 150, 96, 0.7), rgba(214, 84, 130, 0.3) 34%, transparent 62%),
    radial-gradient(120% 95% at 16% 0%, #3a66f0 0%, #1a2f86 48%, #0d1440 100%);
}
/* Pinned, the stage gives up width to fit the screen's height under the copy. */
.has-story .scene-stage { width: min(100%, 68rem, calc((100svh - 4rem - 15.5rem) * var(--k) / var(--H))); }
.sw { position: absolute; inset: 0; --u: calc(100cqw / var(--k)); transition: opacity 0.38s ease; }
.sw *, .sw *::before, .sw *::after { box-sizing: border-box; }
.is-rewind .sw { opacity: 0; }
/* The Finder windows here are drawn in the stage's points, not CSS pixels. */
.sw .finder { --u: calc(100cqw / var(--k)); position: absolute; }
.sw .cursor { position: absolute; z-index: 9; width: calc(18 * var(--u)); height: calc(26 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.5)); }
.sw .defs { display: none; }

/* The menu bar across the top: the app's menus on the left; MountedStorage,
   Wi-Fi, Control Center and the clock on the right. */
.mbar { position: absolute; z-index: 8; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: calc(24 * var(--u)); padding: 0 calc(14 * var(--u)); background: rgba(0, 0, 0, 0.22); color: #fff; font: 400 calc(13 * var(--u)) / 1 var(--sans); white-space: nowrap; }
.mbar > span { display: flex; align-items: center; gap: calc(17 * var(--u)); }
.mbar i { font-style: normal; }
.mbar b { font-weight: 700; }
.mb-apple { width: calc(14 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(-2 * var(--u)); }
.mb-ms { width: calc(19 * var(--u)); height: calc(19 * var(--u)); --logo-l: currentColor; }
.mb-g { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.5; }
.mb-bat { width: calc(25 * var(--u)); height: calc(12 * var(--u)); }
/* MountedStorage's item, lit while its menu is open. */
.mb-si { display: grid; place-items: center; width: calc(31 * var(--u)); height: calc(20 * var(--u)); margin: 0 calc(-6 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(255, 255, 255, calc(0.24 * var(--mo, 0))); }
.notch { position: absolute; left: 50%; top: 0; width: calc(180 * var(--u)); height: calc(30 * var(--u)); transform: translateX(-50%); border-radius: 0 0 calc(11 * var(--u)) calc(11 * var(--u)); background: #000; }

/* A menu bar menu, macOS 27, dark: translucent, rounded, only as wide as
   its longest item, a column for check marks, disabled lines in grey,
   submenu arrows and shortcuts on the right. It hangs from the right of
   the screen, under its menu bar item. */
.xm {
  --ih: 22;
  --sp: 10;
  position: absolute;
  z-index: 7;
  top: calc(27 * var(--u));
  right: calc(5 * var(--u));
  width: max-content;
  padding: calc(5 * var(--u)) 0;
  border-radius: calc(11 * var(--u));
  background: rgba(40, 40, 42, 0.84);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.7), inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.16), 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, 0.45);
  font: 400 calc(13 * var(--u)) / 1 var(--sans);
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.9);
  opacity: var(--mo, 1);
}
.xm-i { position: relative; display: flex; align-items: center; gap: calc(30 * var(--u)); height: calc(var(--ih) * var(--u)); margin: 0 calc(5 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(21 * var(--u)); border-radius: calc(6 * var(--u)); white-space: nowrap; }
.xm-i > svg, .xm-i kbd { flex: none; margin-left: auto; }
.xm-i > svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.55); }
.xm-i kbd { font: inherit; color: rgba(255, 255, 255, 0.4); }
.xm-i > svg.xm-c { position: absolute; left: calc(6 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin: 0; color: currentColor; }
.xm-off { color: rgba(255, 255, 255, 0.32); }
.xm-sep { display: block; height: calc(var(--sp) * var(--u)); margin: 0 calc(14 * var(--u)); background: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.13)) center / 100% calc(1 * var(--u)) no-repeat; }
.xm-hl { background: rgba(10, 100, 214, var(--hl, 0)); color: rgba(255, 255, 255, calc(0.9 + 0.1 * var(--hl, 0))); }
.xm-hl > svg { color: rgba(255, 255, 255, calc(0.55 + 0.45 * var(--hl, 0))); }

/* A callout: the site's own note on the picture, not part of the Mac's
   screen. A hairline in the brand's light blue, on a dark plate; it can
   ring the lines it's about. */
.co {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: calc(3 * var(--u));
  margin: 0;
  padding: calc(10 * var(--u)) calc(13 * var(--u)) calc(11 * var(--u));
  border: calc(1 * var(--u)) solid rgba(143, 176, 255, 0.8);
  border-radius: calc(10 * var(--u));
  background: rgba(8, 12, 30, 0.9);
  font: 400 calc(12 * var(--u)) / 1.38 var(--sans);
  color: rgba(255, 255, 255, 0.74);
  opacity: var(--co, 1);
  transform: translateY(calc((1 - var(--co, 1)) * 6 * var(--u)));
}
.co b { font-weight: 600; font-size: calc(13 * var(--u)); line-height: 1.25; color: #fff; }
.xm-ring { position: relative; }
.xm-ring::after { content: ""; position: absolute; inset: calc(-1 * var(--u)) calc(3 * var(--u)); border: calc(1.5 * var(--u)) solid var(--brand-tint); border-radius: calc(8 * var(--u)); opacity: var(--co, 1); }

/* Buttons, macOS 27: capsules; the default one blue. */
.h-btn { display: inline-grid; place-items: center; height: calc(28 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.13); font-size: calc(13 * var(--u)); font-weight: 500; color: #fff; white-space: nowrap; }
.h-btn.pri { background: #0a84ff; }

/* The pointer: up to eight legs, each easing in and out (minimum jerk),
   from the stops its own rule lists. */
.cursor, .o-ghost {
  --m0: calc(var(--a0) * var(--a0) * var(--a0) * (10 - 15 * var(--a0) + 6 * var(--a0) * var(--a0)));
  --m1: calc(var(--a1) * var(--a1) * var(--a1) * (10 - 15 * var(--a1) + 6 * var(--a1) * var(--a1)));
  --m2: calc(var(--a2) * var(--a2) * var(--a2) * (10 - 15 * var(--a2) + 6 * var(--a2) * var(--a2)));
  --m3: calc(var(--a3) * var(--a3) * var(--a3) * (10 - 15 * var(--a3) + 6 * var(--a3) * var(--a3)));
  --m4: calc(var(--a4) * var(--a4) * var(--a4) * (10 - 15 * var(--a4) + 6 * var(--a4) * var(--a4)));
  --m5: calc(var(--a5) * var(--a5) * var(--a5) * (10 - 15 * var(--a5) + 6 * var(--a5) * var(--a5)));
}
.slide { --a0: 0; --a1: 0; --a2: 0; --a3: 0; --a4: 0; --a5: 0; }

/* ---- 1. Your drives stay home ----------------------------------------- */
.sc-home {
  /* One, two, three: each drive plugs in and shows up in Finder. */
  --on1: clamp(0, calc((var(--p) - 0.06) / 0.05), 1);
  --on2: clamp(0, calc((var(--p) - 0.17) / 0.05), 1);
  --on3: clamp(0, calc((var(--p) - 0.28) / 0.05), 1);
  /* Then up to MountedStorage in the menu bar, a click, and its menu,
     opened only once all three are in; then the callout. */
  --a0: clamp(0, calc((var(--p) - 0.4) / 0.12), 1);
  --ck: calc(clamp(0, calc((var(--p) - 0.53) / 0.008), 1) - clamp(0, calc((var(--p) - 0.548) / 0.008), 1));
  --mo: clamp(0, calc((var(--p) - 0.54) / 0.015), 1);
  --co: clamp(0, calc((var(--p) - 0.64) / 0.06), 1);
}
.sc-home .sw { --ax: 330; --ay: 450; --px: 811; --py: 8; }
.k1 { --on: var(--on1); }
.k2 { --on: var(--on2); }
.k3 { --on: var(--on3); }
.h-fin { left: calc(60 * var(--u)); top: calc(70 * var(--u)); width: calc(392 * var(--u)); height: calc(322 * var(--u)); }
.h-fin .ftb .lights { display: none; }
/* A row grows to its height as its drive arrives, clipped as it grows, so
   it never lies over the rows around it. */
.h-fin .fs > span[class^="k"] { height: calc(29 * var(--on) * var(--u)); overflow: hidden; opacity: var(--on); }
.h-fin .grid { grid-template-columns: repeat(2, calc(100 * var(--u))); padding-left: calc(18 * var(--u)); }
.h-fin .it[class*="k"] { opacity: var(--on); transform: scale(calc(0.6 + 0.4 * var(--on))); }
/* The callout hangs under the menu, from the three rows it rings. */
.h-co { top: calc(206 * var(--u)); right: calc(5 * var(--u)); width: calc(262 * var(--u)); }
.h-co::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: calc(1 * var(--u)); height: calc(17 * var(--u)); background: var(--brand-tint); }
.h-ptr {
  left: calc((var(--ax) + (var(--px) - var(--ax)) * var(--m0)) * var(--u));
  top: calc((var(--ay) + (var(--py) - var(--ay)) * var(--m0)) * var(--u));
  scale: calc(1 - 0.12 * var(--ck));
  opacity: clamp(0, calc((var(--p) - 0.36) * 30), 1);
}

/* ---- 2. And show up wherever you are ---------------------------------- */
.sc-reach {
  --row: clamp(0, calc((var(--p) - 0.04) / 0.06), 1);   /* Studio Mac joins the sidebar */
  /* The pointer's stops, a click at each: Studio Mac, Media Drive, Coast
     Film, Coast_04.mov; then aside. */
  --a0: clamp(0, calc((var(--p) - 0.1) / 0.1), 1);
  --a1: clamp(0, calc((var(--p) - 0.25) / 0.07), 1);
  --a2: clamp(0, calc((var(--p) - 0.37) / 0.06), 1);
  --a3: clamp(0, calc((var(--p) - 0.49) / 0.07), 1);
  --a4: clamp(0, calc((var(--p) - 0.74) / 0.1), 1);
  --s1: clamp(0, calc((var(--p) - 0.215) / 0.03), 1);
  --s2: clamp(0, calc((var(--p) - 0.335) / 0.03), 1);
  --s3: clamp(0, calc((var(--p) - 0.445) / 0.03), 1);
  --s4: clamp(0, calc((var(--p) - 0.575) / 0.03), 1);
}
.sc-reach .sw {
  --wl: 40; --wt: 44; --ww: 920; --wh: 432; --side: 156; --cw: 180; --pw: 224;
  /* Whether opening Media Drive and Coast Film scrolls the columns along
     by one: not here, where all three fit; on a phone, yes. */
  --d2: 0; --d3: 0;
  --x0: 560; --y0: 440; --x1: 100; --y1: 304; --x2: 290; --y2: 127; --x3: 470; --y3: 127; --x4: 650; --y4: 199; --x5: 700; --y5: 440;
}
.r-fin { left: calc(var(--wl) * var(--u)); top: calc(var(--wt) * var(--u)); width: calc(var(--ww) * var(--u)); height: calc(var(--wh) * var(--u)); grid-template-columns: calc(var(--side) * var(--u)) minmax(0, 1fr); }
.r-fin .fm { height: 100%; }
.r-fin .fs > span.r-new { height: calc(29 * var(--row) * var(--u)); overflow: hidden; opacity: var(--row); background: rgba(255, 255, 255, calc(0.13 * var(--s1))); }
.r-fin .fs > span.r-desk { background: rgba(255, 255, 255, calc(0.13 * (1 - var(--s1)))); }
.r-fin .ftitle b { opacity: 0; }
.r-fin .ftitle .t0 { opacity: calc(1 - var(--s1)); }
.r-fin .ftitle .t1 { opacity: calc(var(--s1) - var(--s2)); }
.r-fin .ftitle .t2 { opacity: calc(var(--s2) - var(--s3)); }
.r-fin .ftitle .t3 { opacity: var(--s3); }
/* Column view: a strip of columns, then the preview of the selected file. */
.cv { position: relative; flex: 1; overflow: hidden; border-top: calc(0.5 * var(--u)) solid rgba(255, 255, 255, 0.06); }
.cols { --scr: calc(var(--d2) * var(--s2) + var(--d3) * var(--s3)); position: absolute; inset: 0 auto 0 0; display: flex; transform: translateX(calc(-1 * var(--scr) * var(--cw) * var(--u))); }
.col { flex: none; width: calc(var(--cw) * var(--u)); padding: calc(4 * var(--u)) calc(5 * var(--u)); border-right: calc(0.5 * var(--u)) solid rgba(255, 255, 255, 0.09); }
.c0 { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.c0 .cl { grid-area: 1 / 1; }
.cl-a { opacity: calc(1 - var(--s1)); }
.cl-b { opacity: var(--s1); }
.c1 { opacity: var(--s2); }
.c2 { opacity: var(--s3); }
.cpv { width: calc(var(--pw) * var(--u)); border: 0; opacity: var(--s4); }
.cr { position: relative; isolation: isolate; display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(24 * var(--u)); margin: 0; padding: 0 calc(6 * var(--u)); border-radius: calc(6 * var(--u)); white-space: nowrap; }
.cr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr svg.cc { flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-left: auto; color: rgba(255, 255, 255, 0.45); }
.cr svg.cf { flex: none; width: calc(17 * var(--u)); height: calc(14 * var(--u)); stroke: none; }
.cr svg.cd { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); stroke: none; }
.cr img { flex: none; width: calc(18 * var(--u)); height: calc(11 * var(--u)); object-fit: cover; border-radius: calc(1.5 * var(--u)); }
/* A selected row: blue in the column you're in, grey in the ones before. */
.cr::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: color-mix(in srgb, rgb(10 100 214) calc(var(--bl, 1) * 100%), rgb(255 255 255 / 0.15)); opacity: var(--on, 0); }
.r-s2 { --on: var(--s2); --bl: calc(1 - var(--s3)); }
.r-s3 { --on: var(--s3); --bl: calc(1 - var(--s4)); }
.r-s4 { --on: var(--s4); }
.pv-pic { display: block; width: calc(192 * var(--u)); height: auto; aspect-ratio: 16 / 9; margin: calc(14 * var(--u)) auto calc(12 * var(--u)); object-fit: cover; border-radius: calc(4 * var(--u)); box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.2), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.4); }
.pv-name { margin: 0; text-align: center; font-weight: 600; }
.pv-kind { margin: calc(3 * var(--u)) 0 0; text-align: center; font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, 0.55); }
.pv-h { margin: calc(16 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; }
.pv-kv { margin: 0 calc(8 * var(--u)); font-size: calc(11 * var(--u)); }
.pv-kv div { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) 0; border-top: calc(0.5 * var(--u)) solid rgba(255, 255, 255, 0.08); }
.pv-kv dt { color: rgba(255, 255, 255, 0.5); }
.pv-kv dd { margin: 0; text-align: right; }
/* The status bar: a crossed-out pencil for a folder you can't change. */
.r-fin .fstatus { display: grid; }
.r-fin .fstatus span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); opacity: 0; }
.r-fin .fstatus .ro { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 1.5; }
.r-fin .fstatus .fs0 { opacity: calc(1 - var(--s1)); }
.r-fin .fstatus .fs1 { opacity: calc(var(--s1) - var(--s2)); }
.r-fin .fstatus .fs2 { opacity: calc(var(--s2) - var(--s3)); }
.r-fin .fstatus .fs3 { opacity: calc(var(--s3) - var(--s4)); }
.r-fin .fstatus .fs4 { opacity: var(--s4); }
.r-ptr {
  --ck: calc(clamp(0, calc((var(--p) - 0.2) / 0.006), 1) - clamp(0, calc((var(--p) - 0.214) / 0.006), 1) + clamp(0, calc((var(--p) - 0.322) / 0.006), 1) - clamp(0, calc((var(--p) - 0.336) / 0.006), 1) + clamp(0, calc((var(--p) - 0.432) / 0.006), 1) - clamp(0, calc((var(--p) - 0.446) / 0.006), 1) + clamp(0, calc((var(--p) - 0.562) / 0.006), 1) - clamp(0, calc((var(--p) - 0.576) / 0.006), 1));
  left: calc((var(--x0) + (var(--x1) - var(--x0)) * var(--m0) + (var(--x2) - var(--x1)) * var(--m1) + (var(--x3) - var(--x2)) * var(--m2) + (var(--x4) - var(--x3)) * var(--m3) + (var(--x5) - var(--x4)) * var(--m4)) * var(--u));
  top: calc((var(--y0) + (var(--y1) - var(--y0)) * var(--m0) + (var(--y2) - var(--y1)) * var(--m1) + (var(--y3) - var(--y2)) * var(--m2) + (var(--y4) - var(--y3)) * var(--m3) + (var(--y5) - var(--y4)) * var(--m4)) * var(--u));
  scale: calc(1 - 0.12 * var(--ck));
  opacity: clamp(0, calc((var(--p) - 0.08) / 0.03), 1);
}

/* ---- 3. All 30 TB, on the road ------------------------------------------- */
.sc-open {
  --a0: clamp(0, calc((var(--p) - 0.03) / 0.12), 1);    /* to the clip */
  --sel: clamp(0, calc((var(--p) - 0.16) / 0.01), 1);   /* a double-click */
  --qt: clamp(0, calc((var(--p) - 0.21) / 0.05), 1);    /* QuickTime Player opens it */
  --qa: clamp(0, calc((var(--p) - 0.215) / 0.002), 1);  /* and is the active app */
  --shown: clamp(0, calc((var(--p) - 0.23) / 0.03), 1);
  --a1: clamp(0, calc((var(--p) - 0.24) / 0.1), 1);     /* the pointer moves aside */
  --play: clamp(0, calc((var(--p) - 0.3) / 0.03), 1);   /* it plays */
  --ph: clamp(0, calc((var(--p) - 0.3) / 0.66), 1);     /* 9 seconds of it */
  --co: clamp(0, calc((var(--p) - 0.3) / 0.05), 1);
}
.sc-open .sw {
  --fl: 20; --ft: 52; --fw: 420; --fh: 317; --lr: 26;
  --ql: 462; --qtop: 52; --qw: 518; --hw: 330;
  --ax: 300; --ay: 470; --px: 292; --py: 236; --ex: 430; --ey: 470;
}
.sc-open .mbar { z-index: 1; }
.o-app { display: grid; }
.o-app > span { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(17 * var(--u)); }
/* The menu bar switches to QuickTime Player at once, as it does. */
.o-a0 { opacity: calc(1 - var(--qa)); }
.o-a1 { opacity: var(--qa); }
/* From then on Finder is a window in the background: grey traffic lights,
   and its selection turns from blue to grey. */
.o-fin .lights i { filter: grayscale(var(--qa)) brightness(calc(1 - 0.45 * var(--qa))); }
.o-fin { left: calc(var(--fl) * var(--u)); top: calc(var(--ft) * var(--u)); width: calc(var(--fw) * var(--u)); height: calc(var(--fh) * var(--u)); }
.o-fin .fm { height: 100%; }
.o-fin .fs > span.on { background: rgba(255, 255, 255, 0.13); }
.fl { flex: 1; padding: 0 calc(10 * var(--u)); overflow: hidden; }
.fl-h, .fl-r { display: grid; grid-template-columns: calc(28 * var(--u)) minmax(0, 1fr) calc(70 * var(--u)); align-items: center; gap: calc(8 * var(--u)); height: calc(var(--lr) * var(--u)); margin: 0; padding: 0 calc(8 * var(--u)); border-radius: calc(6 * var(--u)); white-space: nowrap; }
.fl-h { grid-template-columns: minmax(0, 1fr) calc(70 * var(--u)); height: calc(24 * var(--u)); padding-left: calc(44 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, 0.5); }
/* List view stripes every other row, down to the window's foot. */
.fl { background: repeating-linear-gradient(rgba(255, 255, 255, 0.035) 0 calc(var(--lr) * var(--u)), transparent calc(var(--lr) * var(--u)) calc(2 * var(--lr) * var(--u))) calc(10 * var(--u)) calc(24 * var(--u)) / calc(100% - 20 * var(--u)) 100% no-repeat; }
.fl-r img { width: calc(28 * var(--u)); height: calc(16 * var(--u)); object-fit: cover; border-radius: calc(2 * var(--u)); }
.fl-r svg.fl-f { justify-self: center; width: calc(20 * var(--u)); height: calc(16 * var(--u)); stroke: none; }
.fl-r span { overflow: hidden; text-overflow: ellipsis; }
.fl-h span:last-child, .fl-r span:last-child { text-align: right; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.fl-r.o-row { background: rgba(10, 100, 214, calc(var(--sel) * (1 - var(--qa)))); box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, calc(0.13 * var(--sel) * var(--qa))); }
.fl-r.o-row span:last-child { color: rgba(255, 255, 255, calc(0.55 + 0.4 * var(--sel))); }
.o-fin .ftb .lights { display: none; }
.o-fin .fpath { margin-top: auto; gap: calc(5 * var(--u)); padding: 0 calc(10 * var(--u)); white-space: nowrap; }
/* QuickTime Player, macOS 27: the movie is the window, its title over the
   top edge, and the floating controls: volume, back, pause, forward,
   share; under them the time played, the scrubber and the time left. The
   scrubber's lighter stretch is what has loaded. */
.qt {
  position: absolute;
  z-index: 2;
  left: calc(var(--ql) * var(--u));
  top: calc(var(--qtop) * var(--u));
  width: calc(var(--qw) * var(--u));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(16 * var(--u));
  background: #000;
  box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.85), inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.13), 0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-24 * var(--u)) rgba(0, 0, 0, 0.75);
  font: 400 calc(12 * var(--u)) / 1.2 var(--sans);
  color: #f5f5f5;
  opacity: var(--qt);
  transform: scale(calc(0.94 + 0.06 * var(--qt)));
}
.qt > img, .qt > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qt-still { opacity: var(--shown); }
.qt > video { opacity: var(--play); }
.qt-bar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: center; height: calc(34 * var(--u)); background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); }
.qt-bar .lights { position: absolute; left: calc(13 * var(--u)); margin: 0; padding: 0; }
.qt-bar b { font-size: calc(13 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.92); text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.4); }
.qt-hud { position: absolute; left: 50%; bottom: calc(12 * var(--u)); width: calc(var(--hw) * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)); transform: translateX(-50%); border-radius: calc(14 * var(--u)); background: rgba(34, 34, 36, 0.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.14); }
.qt-btns { display: flex; align-items: center; justify-content: space-between; height: calc(26 * var(--u)); margin: 0; color: rgba(255, 255, 255, 0.9); }
.qt-btns > span { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.qt-vol, .qt-sh { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.qt-sh { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qt-sk { width: calc(20 * var(--u)); height: calc(16 * var(--u)); }
.qt-pp { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.qt-scrub { display: flex; align-items: center; gap: calc(9 * var(--u)); margin: calc(5 * var(--u)) 0 0; font-size: calc(11 * var(--u)); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.7); }
.qt-track { position: relative; flex: 1; height: calc(4 * var(--u)); overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.2); }
.qt-track i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
/* Loaded: 5 MB read ahead, then 5 MB a second, of 1,350 MB. Played: 9 s
   of 270. */
.qt-load { width: calc((5 + var(--ph) * 45) / 1350 * 100% * var(--shown)); background: rgba(255, 255, 255, 0.5); }
.qt-done { width: calc(var(--ph) * 9 / 270 * 100%); background: #fff; }
.qt-el { --tcs: round(down, calc(var(--ph) * 9), 1); counter-reset: tcs var(--tcs); }
.qt-el::after { content: "0:" counter(tcs, decimal-leading-zero); }
.qt-rem { --tcs: calc(30 - round(down, calc(var(--ph) * 9), 1)); counter-reset: tcs var(--tcs); }
.qt-rem::after { content: "-4:" counter(tcs, decimal-leading-zero); }
/* The caption: how much of the clip has come from home. */
.o-co { left: calc(var(--ql) * var(--u)); top: calc((var(--qtop) + var(--qw) * 9 / 16 + 13) * var(--u)); width: calc(var(--qw) * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(13 * var(--u)); }
.o-co b { font-size: calc(16 * var(--u)); }
.o-mb { --mb: calc(5 + var(--ph) * 45); counter-reset: mb var(--mb); font-variant-numeric: tabular-nums; }
.o-mb::after { content: counter(mb) " MB"; }
.o-ptr {
  --ck: calc(clamp(0, calc((var(--p) - 0.16) / 0.005), 1) - clamp(0, calc((var(--p) - 0.17) / 0.005), 1) + clamp(0, calc((var(--p) - 0.182) / 0.005), 1) - clamp(0, calc((var(--p) - 0.192) / 0.005), 1));
  left: calc((var(--ax) + (var(--px) - var(--ax)) * var(--m0) + (var(--ex) - var(--px)) * var(--m1)) * var(--u));
  top: calc((var(--ay) + (var(--py) - var(--ay)) * var(--m0) + (var(--ey) - var(--py)) * var(--m1)) * var(--u));
  scale: calc(1 - 0.12 * var(--ck));
  opacity: calc(clamp(0, calc(var(--p) * 30), 1) * (1 - clamp(0, calc((var(--p) - 0.36) / 0.04), 1)));
}

/* ---- 4. Share a link, not a copy -------------------------------------- */
.sc-share {
  /* Studio Mac: the panel's link length, Create Link, the alert. */
  --pop: calc(clamp(0, calc((var(--p) - 0.115) / 0.01), 1) - clamp(0, calc((var(--p) - 0.17) / 0.01), 1));
  --opv: calc(1 - clamp(0, calc((var(--p) - 0.258) / 0.012), 1));
  --al1: calc(clamp(0, calc((var(--p) - 0.272) / 0.015), 1) - clamp(0, calc((var(--p) - 0.372) / 0.012), 1));
  /* Alex's Mac: the link arrives in Messages; Download from a Share
     Link…, the question, Download; the download in the menu. */
  --nt: calc(clamp(0, calc((var(--p) - 0.4) / 0.03), 1) - clamp(0, calc((var(--p) - 0.53) / 0.02), 1));
  --m2: calc(clamp(0, calc((var(--p) - 0.555) / 0.012), 1) - clamp(0, calc((var(--p) - 0.622) / 0.01), 1));
  --hl3: clamp(0, calc((var(--p) - 0.6) / 0.008), 1);
  --al2: calc(clamp(0, calc((var(--p) - 0.635) / 0.015), 1) - clamp(0, calc((var(--p) - 0.725) / 0.012), 1));
  --m3: clamp(0, calc((var(--p) - 0.815) / 0.012), 1);
  --co2: clamp(0, calc((var(--p) - 0.86) / 0.05), 1);
  /* Studio Mac again: the live link, and Turn Off Link. */
  --m1: clamp(0, calc((var(--p) - 0.768) / 0.012), 1);
  --hl1: clamp(0, calc((var(--p) - 0.83) / 0.008), 1);
  --s1: clamp(0, calc((var(--p) - 0.845) / 0.012), 1);
  --hl2: clamp(0, calc((var(--p) - 0.915) / 0.008), 1);
  --co1: clamp(0, calc((var(--p) - 0.9) / 0.05), 1);
}
.sc-share .sw { background: #0c0d10; }
/* Two Macs, two screens: Studio Mac on the left, Alex's on the right. */
.half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(498 * var(--u));
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 82% 112%, rgba(255, 150, 96, 0.7), rgba(214, 84, 130, 0.3) 34%, transparent 62%),
    radial-gradient(120% 95% at 16% 0%, #3a66f0 0%, #1a2f86 48%, #0d1440 100%);
  font: 400 calc(13 * var(--u)) / 1.25 var(--sans);
  color: #f5f5f5;
}
.h-you { left: 0; }
.h-them { right: 0; }
.h-who { position: absolute; left: calc(22 * var(--u)); bottom: calc(18 * var(--u)); margin: 0; font-size: calc(13 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.85); text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.4); }
.h-you .mb-si { background: rgba(255, 255, 255, calc(0.24 * var(--m1))); }
.h-them .mb-si { background: rgba(255, 255, 255, calc(0.24 * (var(--m2) + var(--m3)))); }
.sc-share .finder svg, .sc-share .op svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* "Share a Link…": an open panel with the app's message on top, the
   drive's folders, "Link works for:" and Create Link. */
.op {
  position: absolute;
  left: calc(24 * var(--u));
  top: calc(60 * var(--u));
  width: calc(450 * var(--u));
  overflow: hidden;
  border-radius: calc(20 * var(--u));
  background: #262627;
  box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.85), inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.13), 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, 0.6);
  opacity: var(--opv);
}
.op-msg { margin: 0; padding: calc(13 * var(--u)) calc(30 * var(--u)) calc(5 * var(--u)); text-align: center; font-size: calc(12 * var(--u)); line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
.op-tb { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(10 * var(--u)); }
.op-path { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: #434345; font-weight: 500; }
.ofi { flex: none; width: calc(17 * var(--u)); height: calc(14 * var(--u)); stroke: none !important; }
.ud { flex: none; width: calc(9 * var(--u)); height: calc(13 * var(--u)); color: rgba(255, 255, 255, 0.7); }
.op-body { display: grid; grid-template-columns: calc(128 * var(--u)) minmax(0, 1fr); border-top: calc(0.5 * var(--u)) solid rgba(255, 255, 255, 0.08); }
.op-side { display: flex; flex-direction: column; padding: 0 calc(7 * var(--u)) calc(8 * var(--u)); background: #2b2b2c; }
.op-side .fs-head { height: calc(26 * var(--u)); }
.op-side span { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: calc(7 * var(--u)); font-size: calc(12 * var(--u)); white-space: nowrap; }
.op-side span svg { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: #bdbdc1; stroke-width: 1.5; }
.op-side span.on { background: rgba(255, 255, 255, 0.11); }
.op-list { padding: calc(6 * var(--u)) calc(8 * var(--u)); }
.op-r { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(22 * var(--u)); margin: 0; padding: 0 calc(7 * var(--u)); border-radius: calc(6 * var(--u)); white-space: nowrap; }
.op-sel { background: #0a64d6; }
.op-acc { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(46 * var(--u)); margin: 0; border-top: calc(0.5 * var(--u)) solid rgba(255, 255, 255, 0.08); }
.op-pop { display: inline-flex; align-items: center; gap: calc(14 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(7 * var(--u)); background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 calc(0.5 * var(--u)) 0 rgba(255, 255, 255, 0.12); }
.op-btns { display: flex; justify-content: flex-end; gap: calc(10 * var(--u)); margin: 0; padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
.op-go { scale: calc(1 - 0.06 * (clamp(0, calc((var(--p) - 0.25) / 0.004), 1) - clamp(0, calc((var(--p) - 0.258) / 0.004), 1))); }
/* The pop-up's menu opens with the chosen length over the button. */
.op-days { left: calc(242 * var(--u)); right: auto; top: calc(283 * var(--u)); opacity: var(--pop); }
.op-days .d7 { --hl: 1; background: #0a64d6; }

/* An alert, macOS 27: narrow, its app icon on top, everything centred,
   the buttons full width. */
.al {
  position: absolute;
  z-index: 6;
  left: calc(117 * var(--u));
  width: calc(264 * var(--u));
  padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  border-radius: calc(22 * var(--u));
  background: rgba(44, 44, 46, 0.96);
  box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(0, 0, 0, 0.8), inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.14), 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, 0.65);
  text-align: center;
}
.al-ic { display: block; width: calc(54 * var(--u)); height: calc(54 * var(--u)); margin: 0 auto calc(10 * var(--u)); }
.al-t { margin: 0 0 calc(7 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; line-height: 1.25; }
.al-x { margin: 0 calc(4 * var(--u)) calc(7 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.32; color: rgba(255, 255, 255, 0.85); }
.al-b { display: flex; gap: calc(8 * var(--u)); margin: calc(12 * var(--u)) 0 0; }
.al-b .h-btn { flex: 1; }
.al-1 { top: calc(76 * var(--u)); opacity: var(--al1); transform: scale(calc(0.96 + 0.04 * var(--al1))); }
.al-2 { top: calc(100 * var(--u)); opacity: var(--al2); transform: scale(calc(0.96 + 0.04 * var(--al2))); }
.al-ok { scale: calc(1 - 0.06 * (clamp(0, calc((var(--p) - 0.364) / 0.004), 1) - clamp(0, calc((var(--p) - 0.372) / 0.004), 1))); }
.al-dl { scale: calc(1 - 0.06 * (clamp(0, calc((var(--p) - 0.717) / 0.004), 1) - clamp(0, calc((var(--p) - 0.725) / 0.004), 1))); }

/* The menus. On Studio Mac the live link opens its submenu to the left,
   since the menu already reaches the screen's right edge. */
.h-m1 { opacity: var(--m1); }
.h-live { --hl: var(--hl1); }
.h-s1 { top: calc(49 * var(--u)); right: calc(251 * var(--u)); opacity: var(--s1); }
.h-off { --hl: var(--hl2); }
.h-co1 { top: calc(142 * var(--u)); right: calc(5 * var(--u)); width: calc(250 * var(--u)); --co: var(--co1); }
.h-m2 { opacity: var(--m2); }
.h-dl2 { --hl: var(--hl3); }
.h-m3 { opacity: var(--m3); }
.h-co2 { top: calc(164 * var(--u)); right: calc(5 * var(--u)); width: calc(270 * var(--u)); --co: var(--co2); }

/* A notification from Messages: glass, the app's icon, the sender, the
   time and two lines of the message. */
.nt {
  position: absolute;
  z-index: 5;
  top: calc(34 * var(--u));
  right: calc(10 * var(--u));
  display: grid;
  grid-template-columns: calc(34 * var(--u)) minmax(0, 1fr);
  column-gap: calc(11 * var(--u));
  width: calc(340 * var(--u));
  padding: calc(11 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(52, 52, 56, 0.88);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.16), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.35);
  opacity: var(--nt);
  transform: translateX(calc((1 - clamp(0, calc((var(--p) - 0.4) / 0.03), 1)) * 30 * var(--u)));
}
.nt-ic { grid-row: 1 / 3; align-self: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.nt-t { display: flex; justify-content: space-between; margin: 0 0 calc(1 * var(--u)); font-size: calc(13 * var(--u)); }
.nt-t b { font-weight: 600; }
.nt-t span { font-size: calc(11 * var(--u)); color: rgba(255, 255, 255, 0.5); }
.nt-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: calc(12.5 * var(--u)); line-height: 1.3; color: rgba(255, 255, 255, 0.85); word-break: break-all; }

/* Two pointers, one on each Mac. */
.h-ptr1 {
  --x0: 250; --y0: 470; --x1: 288; --y1: 316; --x2: 288; --y2: 316; --x3: 410; --y3: 352; --x4: 249; --y4: 344; --x5: 378; --y5: 8; --x6: 400; --y6: 58; --x7: 180; --y7: 83;
  --a0: clamp(0, calc((var(--p) - 0.04) / 0.06), 1);
  --a1: 0;
  --a2: clamp(0, calc((var(--p) - 0.18) / 0.06), 1);
  --a3: clamp(0, calc((var(--p) - 0.29) / 0.06), 1);
  --a4: clamp(0, calc((var(--p) - 0.69) / 0.07), 1);
  --a5: clamp(0, calc((var(--p) - 0.78) / 0.05), 1);
  --a6: clamp(0, calc((var(--p) - 0.86) / 0.05), 1);
  --m6: calc(var(--a6) * var(--a6) * var(--a6) * (10 - 15 * var(--a6) + 6 * var(--a6) * var(--a6)));
  --ck: calc(clamp(0, calc((var(--p) - 0.108) / 0.004), 1) - clamp(0, calc((var(--p) - 0.116) / 0.004), 1) + clamp(0, calc((var(--p) - 0.163) / 0.004), 1) - clamp(0, calc((var(--p) - 0.171) / 0.004), 1) + clamp(0, calc((var(--p) - 0.25) / 0.004), 1) - clamp(0, calc((var(--p) - 0.258) / 0.004), 1) + clamp(0, calc((var(--p) - 0.364) / 0.004), 1) - clamp(0, calc((var(--p) - 0.372) / 0.004), 1) + clamp(0, calc((var(--p) - 0.762) / 0.004), 1) - clamp(0, calc((var(--p) - 0.77) / 0.004), 1));
  left: calc((var(--x0) + (var(--x1) - var(--x0)) * var(--m0) + (var(--x3) - var(--x2)) * var(--m2) + (var(--x4) - var(--x3)) * var(--m3) + (var(--x5) - var(--x4)) * var(--m4) + (var(--x6) - var(--x5)) * var(--m5) + (var(--x7) - var(--x6)) * var(--m6)) * var(--u));
  top: calc((var(--y0) + (var(--y1) - var(--y0)) * var(--m0) + (var(--y3) - var(--y2)) * var(--m2) + (var(--y4) - var(--y3)) * var(--m3) + (var(--y5) - var(--y4)) * var(--m4) + (var(--y6) - var(--y5)) * var(--m5) + (var(--y7) - var(--y6)) * var(--m6)) * var(--u));
  scale: calc(1 - 0.12 * var(--ck));
  opacity: clamp(0, calc(var(--p) * 40), 1);
}
.h-ptr2 {
  --x0: 330; --y0: 470; --x1: 378; --y1: 8; --x2: 420; --y2: 83; --x3: 305; --y3: 318; --x4: 378; --y4: 8;
  --a0: clamp(0, calc((var(--p) - 0.47) / 0.07), 1);
  --a1: clamp(0, calc((var(--p) - 0.565) / 0.035), 1);
  --a2: clamp(0, calc((var(--p) - 0.65) / 0.06), 1);
  --a3: clamp(0, calc((var(--p) - 0.745) / 0.055), 1);
  --ck: calc(clamp(0, calc((var(--p) - 0.548) / 0.004), 1) - clamp(0, calc((var(--p) - 0.556) / 0.004), 1) + clamp(0, calc((var(--p) - 0.614) / 0.004), 1) - clamp(0, calc((var(--p) - 0.622) / 0.004), 1) + clamp(0, calc((var(--p) - 0.717) / 0.004), 1) - clamp(0, calc((var(--p) - 0.725) / 0.004), 1) + clamp(0, calc((var(--p) - 0.808) / 0.004), 1) - clamp(0, calc((var(--p) - 0.816) / 0.004), 1));
  left: calc((var(--x0) + (var(--x1) - var(--x0)) * var(--m0) + (var(--x2) - var(--x1)) * var(--m1) + (var(--x3) - var(--x2)) * var(--m2) + (var(--x4) - var(--x3)) * var(--m3)) * var(--u));
  top: calc((var(--y0) + (var(--y1) - var(--y0)) * var(--m0) + (var(--y2) - var(--y1)) * var(--m1) + (var(--y3) - var(--y2)) * var(--m2) + (var(--y4) - var(--y3)) * var(--m3)) * var(--u));
  scale: calc(1 - 0.12 * var(--ck));
  opacity: clamp(0, calc((var(--p) - 0.42) / 0.03), 1);
}

/* ---- Shorter desktop windows: a little less room for the copy ---------- */
@media (min-width: 44.01rem) and (max-height: 760px) {
  .scene-copy h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
  .scene-copy p { font-size: 1rem; }
  .has-story .scene-stage { width: min(100%, 68rem, calc((100svh - 4rem - 10.5rem) * var(--k) / var(--H))); }
}

/* ---- Phone: a smaller world, each scene laid out for a narrow screen.
   Every window is cut between rows, never through one. --------------- */
@media (max-width: 44rem) {
  .scene-copy { margin-bottom: 1rem; }
  .scene-copy h2 { margin-bottom: 0.6rem; font-size: 1.875rem; }
  .scene-copy p { font-size: 0.9375rem; line-height: 1.5; }
  .scene-stage { --k: 360; --H: 450; border-radius: 16px; }
  .has-story .scene-stage { width: min(100%, calc((100svh - 4rem - 12rem) * var(--k) / var(--H))); }
  .story-dots { right: calc(5px - var(--pad)); gap: 8px; }
  .story-dots button::before { inset: -4px -4px; }
  /* A phone shows the right of the screen; on the left, only the Apple
     menu and the app's name. */
  .mbar > span:first-child i { display: none; }
  .mbar .mb-bat, .sc-reach .mbar .mb-g, .sc-open .mbar .mb-g { display: none; }
  .notch { width: calc(96 * var(--u)); height: calc(28 * var(--u)); }
  .xm { --ih: 19; --sp: 8; right: calc(6 * var(--u)); font-size: calc(11 * var(--u)); }
  .xm-i { gap: calc(16 * var(--u)); padding-left: calc(18 * var(--u)); padding-right: calc(8 * var(--u)); }
  .xm-i > svg.xm-c { left: calc(5 * var(--u)); width: calc(10 * var(--u)); }
  .co { padding: calc(8 * var(--u)) calc(11 * var(--u)) calc(9 * var(--u)); font-size: calc(11 * var(--u)); }
  .co b { font-size: calc(12 * var(--u)); }

  /* 1: MountedStorage's menu at the top right, the callout under it, and
     Studio Mac's Finder window below, its four disks in one row. */
  .h-fin { left: calc(8 * var(--u)); top: calc(262 * var(--u)); width: calc(344 * var(--u)); height: calc(166 * var(--u)); grid-template-columns: minmax(0, 1fr); }
  .h-fin .fs { display: none; }
  .h-fin .ftb { gap: calc(14 * var(--u)); padding-left: calc(16 * var(--u)); }
  .h-fin .ftb .lights { display: flex; margin: 0; padding: 0; }
  .h-fin .grid { grid-template-columns: repeat(4, calc(80 * var(--u))); padding: calc(6 * var(--u)) 0 0 calc(12 * var(--u)); }
  .h-fin .it span { font-size: calc(11.5 * var(--u)); }
  .h-co { top: calc(184 * var(--u)); left: calc(8 * var(--u)); right: calc(8 * var(--u)); width: auto; }
  .h-co::before { height: calc(14 * var(--u)); left: 70%; }
  .sc-home .sw { --ax: 180; --ay: 400; --px: 172; --py: 8; }

  /* 2: one Finder window, one column wide; each folder you open scrolls
     the column before it off to the left. */
  .sc-reach .sw {
    --wl: 6; --wt: 32; --ww: 348; --wh: 410; --side: 112; --cw: 236;
    --d2: 1; --d3: 1;
    --x0: 250; --y0: 430; --x1: 56; --y1: 236; --x2: 236; --y2: 117; --x3: 240; --y3: 117; --x4: 236; --y4: 189; --x5: 300; --y5: 400;
  }
  .r-fin { font-size: calc(11.5 * var(--u)); }
  .r-fin .fs { padding-inline: calc(5 * var(--u)); }
  .r-fin .fs > span { gap: calc(5 * var(--u)); padding: 0 calc(4 * var(--u)); }
  .r-fin .fs > span svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
  .r-fin .fs > span.r-fav, .r-fin .ftb-right, .cpv { display: none; }
  .r-fin .eject { display: none; }
  .r-fin .ftitle { font-size: calc(14 * var(--u)); }

  /* 3: Finder's list on top, without its sidebar, three clips tall;
     QuickTime Player under it, and the caption at the foot. */
  .sc-open .sw {
    --fl: 8; --ft: 32; --fw: 344; --fh: 134; --lr: 24;
    --ql: 8; --qtop: 176; --qw: 344; --hw: 250;
    --ax: 300; --ay: 160; --px: 150; --py: 122; --ex: 320; --ey: 150;
  }
  .sc-open .notch { display: none; }
  .o-fin { grid-template-columns: minmax(0, 1fr); }
  .o-fin .fs, .o-fin .fpath, .o-fin .cap.nav, .fl-d, .fl-x { display: none; }
  .o-fin .ftb { gap: calc(14 * var(--u)); height: calc(38 * var(--u)); padding-left: calc(16 * var(--u)); }
  .o-fin .ftb .lights { display: flex; margin: 0; padding: 0; }
  .fl-h { height: calc(22 * var(--u)); }
  .fl { background-position-y: calc(22 * var(--u)); }
  .qt-bar { height: calc(28 * var(--u)); }
  .qt-hud { bottom: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u)); }
  .qt-btns { height: calc(22 * var(--u)); }
  .qt-scrub { margin-top: calc(3 * var(--u)); font-size: calc(10 * var(--u)); }
  .o-co { top: calc((var(--qtop) + var(--qw) * 9 / 16 + 8) * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)) calc(9 * var(--u)); }
  .o-co b { font-size: calc(13 * var(--u)); }

  /* 4: the two Macs one above the other. Studio Mac: the panel cut to
     its last rows, then the live link in the menu. Alex's Mac: the
     notification, the menu, the question, the download. */
  .half { width: 100%; }
  .h-you { top: 0; bottom: auto; height: calc(194 * var(--u)); }
  .h-them { top: calc(198 * var(--u)); }
  .h-who { left: calc(12 * var(--u)); bottom: calc(10 * var(--u)); font-size: calc(11 * var(--u)); }
  .h-you .h-who { top: calc(30 * var(--u)); bottom: auto; }
  .op { left: calc(12 * var(--u)); top: calc(46 * var(--u)); width: calc(336 * var(--u)); border-radius: calc(16 * var(--u)); }
  .op-msg, .op-tb, .op-side, .op-r:nth-child(1), .op-r:nth-child(n+5) { display: none; }
  .op-body { grid-template-columns: minmax(0, 1fr); border: 0; }
  .op-list { padding: calc(5 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); }
  .op-acc { height: calc(38 * var(--u)); }
  .op-btns { padding: calc(2 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); }
  .op-btns .h-btn { height: calc(26 * var(--u)); font-size: calc(12 * var(--u)); }
  .op-days { left: calc(178 * var(--u)); top: calc(109 * var(--u)); }
  .al-1 { display: none; }
  .h-s1 { top: calc(45 * var(--u)); right: calc(214 * var(--u)); }
  .h-co1 { top: calc(118 * var(--u)); right: calc(6 * var(--u)); width: calc(230 * var(--u)); }
  .nt { top: calc(30 * var(--u)); right: calc(8 * var(--u)); width: calc(344 * var(--u)); grid-template-columns: calc(30 * var(--u)) minmax(0, 1fr); padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }
  .nt-ic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .nt-x { font-size: calc(11.5 * var(--u)); }
  .al { left: calc(30 * var(--u)); width: calc(300 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); border-radius: calc(18 * var(--u)); }
  .al-ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin-bottom: calc(6 * var(--u)); }
  .al-t { font-size: calc(12.5 * var(--u)); margin-bottom: calc(5 * var(--u)); }
  .al-x { font-size: calc(10.5 * var(--u)); margin-bottom: 0; }
  .al-b { margin-top: calc(10 * var(--u)); }
  .al-b .h-btn { height: calc(26 * var(--u)); font-size: calc(12 * var(--u)); }
  .al-2 { top: calc(30 * var(--u)); }
  .h-co2 { top: calc(124 * var(--u)); right: calc(6 * var(--u)); width: calc(240 * var(--u)); }
  .h-ptr1 { --x0: 250; --y0: 186; --x1: 222; --y1: 112; --x2: 222; --y2: 112; --x3: 300; --y3: 166; --x4: 300; --y4: 166; --x5: 238; --y5: 8; --x6: 200; --y6: 50; --x7: 80; --y7: 70; }
  .h-ptr2 { --x0: 260; --y0: 220; --x1: 238; --y1: 8; --x2: 260; --y2: 74; --x3: 250; --y3: 206; --x4: 238; --y4: 8; }
}