:root {
  --ground: #050506;
  --ink: #f5f5f7;
  --soft: rgba(245, 245, 247, 0.74);
  --accent: #f5f5f7;
  --font: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; color-scheme: dark; }
html.locked, html.locked body { overflow: hidden; }
body { margin: 0; min-height: 100svh; }
::selection { background: var(--accent); color: #140c06; }
:focus-visible { outline: 2px solid rgba(245, 245, 247, 0.85); outline-offset: 4px; }

#space { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- the opening ---------- */
.curtain { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--ground); will-change: transform; }
.half.top { top: 0; }
.half.bottom { bottom: 0; }
/* the same word in both halves, centred on the seam, so each half shows its half of it */
.word {
  position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap;
  font-weight: 250; text-transform: uppercase; line-height: 1;
  font-size: clamp(52px, 10.5vw, 164px);
  letter-spacing: 0.3em; padding-left: 0.3em; /* tracking adds space after the last letter; balance it */
  transform: translateY(-50%);
  animation: tighten 4.4s var(--ease-out) 0.2s both;
}
.half.top .word { top: 100%; }
.half.bottom .word { top: 0; }
.word span {
  display: inline-block; opacity: 0; filter: blur(18px); transform: translateY(0.05em); color: #3f3a36;
  animation: emerge 2.9s var(--ease-out) forwards;
  animation-delay: calc(0.35s + var(--i) * 0.17s);
}
@keyframes emerge {
  55% { color: #a8a097; }
  to { opacity: 1; filter: blur(0); transform: none; color: #fff; text-shadow: 0 0 34px rgba(255, 255, 255, 0.28); }
}
@keyframes tighten { from { letter-spacing: 0.5em; } to { letter-spacing: 0.3em; } }
/* a slit of light along the seam just before the halves part */
.seam {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 180, 0.9) 30%, #fff 50%, rgba(255, 214, 180, 0.9) 70%, transparent);
  box-shadow: 0 0 24px 4px rgba(255, 190, 140, 0.45);
  transform: scaleX(0); opacity: 0;
}

/* ---------- the stage ---------- */
.stage { position: relative; z-index: 4; height: 100vh; height: 100svh; pointer-events: none; }
.stage button, .stage a { pointer-events: auto; }

.brand {
  position: absolute; top: max(28px, 4.5vh); left: 0; right: 0; margin: 0; text-align: center;
  font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.42em; padding-left: 0.42em;
  color: var(--ink);
}

.audio {
  position: absolute; top: max(22px, calc(4.5vh - 6px)); right: clamp(16px, 3vw, 32px);
  display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3em; color: var(--ink);
  transition: opacity 200ms ease, transform 160ms var(--ease-out);
}
.audio:active { transform: scale(0.96); }
.audio.off { opacity: 0.55; }
.waves { display: flex; align-items: center; gap: 2px; height: 14px; }
.waves i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(0.16); transform-origin: center; }

@media (max-width: 600px) { .audio-word { display: none; } }

/* split letters for the forming text */
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; }
.xray .stage { cursor: crosshair; }

.hero { position: absolute; left: 0; right: 0; top: 24vh; padding: 0 16px; text-align: center; }
.hero h1 {
  margin: 0; font-weight: 300; letter-spacing: -0.035em; line-height: 1.02;
  font-size: clamp(40px, 5.8vw, 88px); text-wrap: balance;
}
.lede {
  max-width: 31em; margin: 26px auto 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--soft);
  text-wrap: balance;
}
.journey {
  margin-top: 34px; height: 52px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 500; color: #0c0907; background: var(--ink);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 300ms ease;
}
.journey:active { transform: scale(0.97); }

.brand, .hero > *, .audio { opacity: 0; visibility: hidden; }

.say {
  position: absolute; left: 0; right: 0; bottom: 8vh; margin: 0; padding: 0 16px; text-align: center;
  font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -0.015em;
  opacity: 0; visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .audio:hover { opacity: 1; }
  .journey:hover { background: #fff; }
}

/* ---------- the laptop's live screen ---------- */
.screen-ui {
  position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 2; overflow: hidden;
  container-type: inline-size; opacity: 0; visibility: hidden; user-select: none; -webkit-user-select: none;
}
.live .mini-vinyl {
  border-radius: 50% !important; display: grid; place-items: center;
  background: repeating-radial-gradient(circle, #0c0c0c 0 0.05cqw, #171717 0.05cqw 0.1cqw);
  animation: spin 1.8s linear infinite;
}
.live .mini-vinyl img { width: 42%; height: 42%; border-radius: 50%; }
@keyframes spin { to { transform: rotate(1turn); } }
/* The island, in the app's own points. The screen is 1470 points wide, so 1cqw is 14.7 of them and
   --u is one point: closed it's the notch's width with a wing each side (261 × 32), open the player
   (300 × 146), big the big island (680 × 184), just as Needle draws them on a MacBook. On a
   phone-sized screen the demo's island is drawn larger (--k), or it couldn't be read or used. */
.live .isle {
  --k: 1; --u: calc(var(--k) * 1cqw / 14.7);
  --w: 261; --h: 32; --r: 12; --f: 8;
  /* centred by its margins, not shifted by half its width: a shift lands its edges between pixels and
     blurs them, which shows on the glass looks' light rim */
  position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  background: #000; border-radius: 0 0 calc(var(--r) * var(--u)) calc(var(--r) * var(--u));
  cursor: pointer; outline: none; z-index: 2; color: #fff;
  transition: width .55s var(--spring), height .55s var(--spring), border-radius .5s var(--ease-drawer);
}
.live .isle[data-state="hover"] { --w: 275; --h: 35.5; --r: 13; --f: 9; }
.live .isle[data-state="open"] { --w: 300; --h: 146; --r: 20; --f: 10; cursor: default; }
.live .isle[data-state="open"][data-page="weather"] { --h: 150; }
.live .isle[data-state="big"] { --w: 680; --h: 184; --r: 26; --f: 12; cursor: default; }
@container (max-width: 640px) { .demo-screen .isle { --k: 1.9; } }

/* the concave curves where it meets the top of the screen */
.live .flare { position: absolute; top: 0; width: calc(var(--f) * var(--u)); height: calc(var(--f) * var(--u)); transition: width .5s, height .5s, left .5s, right .5s; }
.live .flare.l { left: calc(var(--f) * var(--u) * -1); background: radial-gradient(circle at 0 100%, transparent 70%, var(--flare, #000) 72%); }
.live .flare.r { right: calc(var(--f) * var(--u) * -1); background: radial-gradient(circle at 100% 100%, transparent 70%, var(--flare, #000) 72%); }

/* closed: the small record by the notch on the left, the music's wave on the right */
.live .isle-closed { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(9 * var(--u)) 0 calc(11 * var(--u)); transition: opacity .25s; }
.live .mini-vinyl { width: calc(17 * var(--u)); height: calc(17 * var(--u)); transition: width .4s var(--spring), height .4s var(--spring); }
.live .isle[data-state="hover"] .mini-vinyl { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.live .isle:is([data-state="open"], [data-state="big"]) .isle-closed { opacity: 0; pointer-events: none; }

.live .wave { display: flex; align-items: center; justify-content: space-between; width: calc(18 * var(--u)); height: calc(12 * var(--u)); transition: width .4s, height .4s; }
.live .isle[data-state="hover"] .isle-closed .wave { width: calc(21 * var(--u)); height: calc(14 * var(--u)); }
.live .wave i { width: calc(2.2 * var(--u)); min-width: 1px; height: 40%; border-radius: 9px; background: linear-gradient(#ffb48a, #e46a8a); animation: wave 1s ease-in-out infinite; }
.live .wave i:nth-child(2) { animation-delay: -.25s; } .live .wave i:nth-child(3) { animation-delay: -.5s; } .live .wave i:nth-child(4) { animation-delay: -.75s; } .live .wave i:nth-child(5) { animation-delay: -.4s; }
.live .wave.big { width: calc(17 * var(--u)); height: calc(11 * var(--u)); }
.live .paused .wave i { animation-play-state: paused; }
@keyframes wave { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* open: the player, and the forecast a swipe away */
.live .isle-open { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .25s; }
.live .isle[data-state="open"] .isle-open { opacity: 1; pointer-events: auto; transition-delay: .15s; }
.live .pages { position: absolute; inset: 0; display: flex; width: 200%; transition: transform .6s var(--ease-drawer); }
.live .isle[data-page="weather"] .pages { transform: translateX(-50%); }
.live .isle .page { width: 50%; padding: calc(37 * var(--u)) calc(15 * var(--u)) 0; display: flex; flex-direction: column; text-align: left; }
.live .row { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.live .row.top { height: calc(52 * var(--u)); }
.live .art { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(10 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5); }
.live .titles { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: calc(1 * var(--u)); }
.live .titles b { font-size: calc(12 * var(--u)); font-weight: 600; line-height: 1.2; }
.live .titles span { font-size: calc(10.5 * var(--u)); line-height: 1.2; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live .progress { margin-top: calc(7 * var(--u)); height: calc(12 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(9 * var(--u)); color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.live .progress .t { min-width: calc(20 * var(--u)); }
.live .progress .t:last-child { text-align: right; }
.live .progress .bar, .live .b-progress .bar { flex: 1; height: calc(3.5 * var(--u)); min-height: 2px; border-radius: 9px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.live .bar i { display: block; height: 100%; width: 34%; background: linear-gradient(90deg, #ffb48a, #e46a8a); border-radius: inherit; }
.live .controls { margin-top: calc(5 * var(--u)); height: calc(24 * var(--u)); display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
.live .controls .heart { justify-self: start; } .live .controls .out { justify-self: end; }
.live .mid { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.live .ctl { background: none; border: 0; padding: 0; width: calc(26 * var(--u)); height: calc(24 * var(--u)); display: grid; place-items: center; cursor: pointer; border-radius: 50%; position: relative; color: #fff; transition: transform .35s var(--spring); }
.live .ctl svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: #fff; }
.live .ctl.play svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.live .ctl.heart svg, .live .ctl.out svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: rgba(255, 255, 255, 0.75); }
.live .ctl.heart svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.live .ctl.heart.on svg { fill: #ff5a6e; stroke: #ff5a6e; }
.live .ctl::before { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: rgba(255, 255, 255, 0); transition: background .2s; }
.live .ctl:active { transform: scale(1.18); }
.live .ctl:active::before { background: rgba(255, 255, 255, 0.14); }
.live .ctl.bounce svg { animation: nudge .45s var(--spring); }
@keyframes nudge { 40% { transform: translateX(var(--dx, 4px)); } }
.live .pp { transition: d .35s var(--ease-drawer); }

.live .page.weather { padding-top: calc(38 * var(--u)); gap: calc(10 * var(--u)); }
.live .page.weather .now { gap: calc(8 * var(--u)); }
.live .wx { width: calc(34 * var(--u)); height: calc(30 * var(--u)); flex: none; }
.live .l1 { display: flex; align-items: baseline; gap: calc(6 * var(--u)); }
.live .l1 i { font-style: normal; font-size: calc(12 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.live .temp { font-size: calc(22 * var(--u)) !important; font-weight: 600 !important; line-height: 1; letter-spacing: -0.01em; }
.live .hours { display: flex; justify-content: space-between; text-align: center; }
.live .hours span { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); color: #fff; }
.live .hours em { font-style: normal; font-size: calc(9.5 * var(--u)); color: rgba(255, 255, 255, 0.55); }
.live .hours b { font-size: calc(11 * var(--u)); font-weight: 600; }
.live .hours .wi { width: calc(15 * var(--u)); height: calc(15 * var(--u)); display: block; }

/* the page dots and the switch to the big island, in the notch row */
.live .dots { position: absolute; left: calc(15 * var(--u)); top: 0; height: calc(32 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u)); }
.live .dots i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 9px; background: rgba(255, 255, 255, 0.28); transition: width .45s var(--spring), background .3s; }
.live .isle[data-page="music"] .dots i:first-child, .live .isle[data-page="weather"] .dots i:last-child { width: calc(11 * var(--u)); background: rgba(255, 255, 255, 0.9); }
.live :is(.grow, .shrink) {
  position: absolute; top: calc(5 * var(--u)); right: calc(12 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border: 0; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8);
  display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background .2s, transform .3s var(--spring);
}
.live :is(.grow, .shrink) svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.live :is(.grow, .shrink):active { transform: scale(0.9); }
@media (hover: hover) { .live :is(.grow, .shrink):hover { background: rgba(255, 255, 255, 0.22); } }
/* a finger needs more than 22 points to hit it on a phone */
.live :is(.grow, .shrink)::after { content: ""; position: absolute; inset: -40%; }

/* big: Need (the music, the mirror and a widget) as the big island draws it */
.live .isle-big { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .2s; }
.live .isle[data-state="big"] .isle-big { opacity: 1; pointer-events: auto; transition: opacity .3s .18s; }
.live .isle-big > * { position: absolute; }
.live .b-tabs { left: calc(14 * var(--u)); top: calc(5 * var(--u)); display: flex; gap: calc(6 * var(--u)); }
.live .b-tab { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: 99px; font-size: calc(12 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.45); }
.live .b-tab.on { background: rgba(255, 255, 255, 0.12); color: #fff; }
.live .b-tab svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.live .shrink { right: calc(14 * var(--u)); }
.live .b-art { left: calc(9 * var(--u)); top: calc(42 * var(--u)); width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5); }
.live .b-titles { left: calc(93 * var(--u)); top: calc(43 * var(--u)); width: calc(165 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.live .b-titles b { font-size: calc(14 * var(--u)); font-weight: 600; }
.live .b-titles span { font-size: calc(12 * var(--u)); color: rgba(255, 255, 255, 0.6); }
.live .b-ctl { left: calc(90 * var(--u)); top: calc(90 * var(--u)); display: flex; gap: calc(16 * var(--u)); }
.live .b-ctl .ctl { width: calc(28 * var(--u)); height: calc(26 * var(--u)); }
.live .b-ctl .ctl svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.live .b-ctl .ctl.play svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.live .b-heart { left: calc(238 * var(--u)); top: calc(90 * var(--u)); }
.live .b-heart svg { width: calc(15 * var(--u)) !important; height: calc(15 * var(--u)) !important; }
.live .b-progress { left: calc(9 * var(--u)); top: calc(129 * var(--u)); width: calc(240 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); font-size: calc(9 * var(--u)); color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.live .b-div { top: calc(42 * var(--u)); width: max(1px, calc(.5 * var(--u))); height: calc(134 * var(--u)); background: rgba(255, 255, 255, 0.1); }
.live .b-div.d1 { left: calc(268 * var(--u)); } .live .b-div.d2 { left: calc(401 * var(--u)); }
.live .b-mirror { left: calc(282.5 * var(--u)); top: calc(57 * var(--u)); width: calc(104 * var(--u)); height: calc(104 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); }
.live .b-mirror svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.8; stroke-linecap: round; }
.live .b-mirror span { font-size: calc(11.5 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.live .b-wx { left: calc(414 * var(--u)); top: calc(42 * var(--u)); width: calc(212 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.live .b-now { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.live .b-now .wx { width: calc(36 * var(--u)); height: calc(32 * var(--u)); }
.live .b-now .temp { font-size: calc(24 * var(--u)) !important; }
.live .b-now i { font-style: normal; font-size: calc(13 * var(--u)); font-weight: 600; }
.live .b-sub { font-size: calc(10.5 * var(--u)); color: rgba(255, 255, 255, 0.55); padding-left: calc(44 * var(--u)); margin-top: calc(-6 * var(--u)); }
.live .b-wx .hours { margin-top: calc(10 * var(--u)); }
.live .b-src { align-self: flex-end; font-size: calc(7.5 * var(--u)); color: rgba(255, 255, 255, 0.3); margin-top: calc(4 * var(--u)); }
.live .b-switch { left: calc(634 * var(--u)); top: calc(37 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.live .b-switch i { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(8 * var(--u)); display: grid; place-items: center; }
.live .b-switch i.on { background: rgba(255, 255, 255, 0.12); }
.live .b-switch svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.live .b-switch i.on svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

/* the three looks, picked under the screen */
/* glass: what's behind, softly blurred and a little darkened, a sheen like water, light on its rim */
.demo-screen[data-look="glass"] .isle {
  --flare: rgba(20, 18, 26, 0.55);
  background: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.03) 70%, rgba(255, 255, 255, 0.08)), rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(calc(16 * var(--u))) saturate(1.4); backdrop-filter: blur(calc(16 * var(--u))) saturate(1.4);
  box-shadow: 0 calc(5 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.2);
}
.demo-screen[data-look="glass"] .flare { --f2: 1.7; width: calc(var(--f) * 1.7 * var(--u)); height: calc(var(--f) * 1.7 * var(--u)); }
.demo-screen[data-look="glass"] .flare.l { left: calc(var(--f) * -1.7 * var(--u)); }
.demo-screen[data-look="glass"] .flare.r { right: calc(var(--f) * -1.7 * var(--u)); }
/* liquid: black at the notch, then clear glass with light gathering along its rounded edge */
.demo-screen[data-look="liquid"] .isle {
  --solid: calc(32 + (var(--h) - 32) * 0.28);
  /* black easing off to a light tint with no knee where the black ends (js/lens.js draws the same,
     with the glass bending what's behind, wherever WebGL 2 is there) */
  --g: calc((var(--h) - var(--solid)) * var(--u));
  background: linear-gradient(#000 0, #000 calc(var(--solid) * var(--u)), rgba(0, 0, 0, 0.91) calc(var(--solid) * var(--u) + var(--g) * 0.15),
    rgba(0, 0, 0, 0.71) calc(var(--solid) * var(--u) + var(--g) * 0.3), rgba(0, 0, 0, 0.48) calc(var(--solid) * var(--u) + var(--g) * 0.45),
    rgba(0, 0, 0, 0.3) calc(var(--solid) * var(--u) + var(--g) * 0.6), rgba(0, 0, 0, 0.26) calc(var(--solid) * var(--u) + var(--g) * 0.7));
  -webkit-backdrop-filter: saturate(1.3) brightness(1.08); backdrop-filter: saturate(1.3) brightness(1.08);
}
.demo-screen:is([data-look="glass"], [data-look="liquid"]) .isle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  -webkit-mask: linear-gradient(transparent 12%, #000 55%); mask: linear-gradient(transparent 12%, #000 55%);
}
.demo-screen[data-look="liquid"] .isle::after {
  /* one clean hairline down the sides and along the bottom, coming in just under the black, with a
     soft glow only inside the bottom edge */
  --rim: calc((var(--solid) + (var(--h) - var(--solid)) * 0.3) * var(--u));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 calc(-4 * var(--u)) calc(9 * var(--u)) rgba(255, 255, 255, 0.16);
  -webkit-mask: linear-gradient(transparent 0 calc(var(--solid) * var(--u)), #000 var(--rim));
  mask: linear-gradient(transparent 0 calc(var(--solid) * var(--u)), #000 var(--rim));
  transition: opacity .3s;
}
/* the glass itself, drawn by js/lens.js under everything the island shows */
.live .isle .lens { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s; }
.demo-screen[data-look="liquid"] .isle .lens.on { opacity: 1; }
/* shut, or grown a few points under the pointer, it's the notch's own black: no glass, no light along its bottom */
.demo-screen[data-look="liquid"] .isle:is([data-state="closed"], [data-state="hover"]) { --solid: var(--h); }
.demo-screen[data-look="liquid"] .isle:is([data-state="closed"], [data-state="hover"])::after { opacity: 0; transition-duration: .15s; }

.live .try-title { position: absolute; left: 0; right: 0; top: 40%; transition: opacity .4s, transform .6s var(--ease-drawer); pointer-events: none; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); }
.live .try-title h3 { font-family: var(--serif); font-weight: 400; font-size: 5.4cqw; margin: 0; letter-spacing: -0.02em; }
.live .try-title span { font-size: 1.3cqw; color: rgba(255, 255, 255, 0.75); letter-spacing: .08em; }
.live .desk.opened .try-title { opacity: 0; transform: translateY(2cqw); }
.live .try-fine { margin-top: 22px; }

/* ---------- the live lock screen ---------- */
/* the screen is 1470 points wide in the app's renders; here 1cqw = 14.7 of those points */
.live .ls { position: relative; aspect-ratio: 1470 / 956; overflow: hidden; border-radius: 1cqw; background: #040309; color: #fff; user-select: none; -webkit-user-select: none; }
.live .ls-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12.2cqw; height: 2.2cqw; background: #000; border-radius: 0 0 .9cqw .9cqw; z-index: 3; }
.live .ls-clock { position: absolute; left: 0; right: 0; top: 5.6cqw; display: flex; flex-direction: column; align-items: center; z-index: 2; pointer-events: none; }
.live .ls-date { font-weight: 600; font-size: 1.95cqw; line-height: 1.2; color: rgba(232, 236, 255, 0.72); }
.live .ls-time { font-weight: 500; font-size: 9.8cqw; line-height: .98; letter-spacing: -0.02em; color: rgba(226, 232, 255, 0.5); -webkit-text-stroke: .07cqw rgba(255, 255, 255, 0.78); text-shadow: 0 .2cqw .8cqw rgba(0, 0, 10, 0.35); }

/* where everything sits in each mode, measured from the app */
.live .ls-vinyl, .live .ls-cover, .live .ls-card, .live .ls-lyrics { position: absolute; transition: left .8s var(--ease-drawer), top .8s var(--ease-drawer), width .8s var(--ease-drawer), height .8s var(--ease-drawer), border-radius .8s var(--ease-drawer), opacity .5s ease, box-shadow .8s; }
.live .ls-vinyl { width: 10.2cqw; height: 10.2cqw; left: 44.9cqw; top: 29.9cqw; z-index: 2; }
.live .ls-vinyl .record { box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, 0.4); animation: spin 3.6s linear infinite; background: radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, 0.05) 31.3%, transparent 32%), repeating-radial-gradient(circle, #141313 0 1px, #1b1a1a 1px 2px), #111; }
.live .ls-cover { border: 0; padding: 0; background: none; cursor: pointer; width: 3.2cqw; height: 3.2cqw; left: 40.2cqw; top: 42.9cqw; z-index: 3; border-radius: .4cqw; overflow: hidden; box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, 0.2); outline: none; container-type: inline-size; }
.live .ls-cover img { width: 100%; height: 100%; }
.live .ls-cover:hover, .live .ls-cover:focus-visible { filter: brightness(1.08); box-shadow: 0 0 0 .15cqw rgba(255, 255, 255, 0.6), 0 .2cqw .5cqw rgba(0, 0, 0, 0.2); }
/* the cover is glossy: a soft light from the top left, a sheen that leans with the pointer, a hairline edge */
@property --gx { syntax: "<number>"; inherits: true; initial-value: 0.32; }
.live .ls-cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background:
    linear-gradient(118deg, transparent calc(var(--gx) * 100% - 22%), rgba(255, 255, 255, 0.13) calc(var(--gx) * 100%), transparent calc(var(--gx) * 100% + 16%)),
    radial-gradient(85% 55% at 14% 0%, rgba(255, 255, 255, 0.2), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.07), transparent 28%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: --gx .9s var(--ease-out);
}

/* the Now Playing card: every size in cqw with its own line height, so nothing spills out of it */
.live .ls-card { left: 39.3cqw; top: 42.2cqw; width: 21.3cqw; height: 8cqw; padding: .75cqw .85cqw .8cqw; border-radius: 1.3cqw; font-size: 1cqw; line-height: 1.2; background: linear-gradient(rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.11)); backdrop-filter: blur(1.6cqw) saturate(1.5); -webkit-backdrop-filter: blur(1.6cqw) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 .6cqw 1.8cqw rgba(0, 0, 0, 0.22); text-align: left; display: flex; flex-direction: column; justify-content: space-between; }
.live .ls-card-top { display: flex; gap: .8cqw; align-items: center; }
.live .ls-card-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .18cqw; }
.live .ls-slot { width: 3.2cqw; height: 3.2cqw; flex: none; }
.live .ls-card b { display: block; font-size: 1.02cqw; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live .ls-card-top span { font-size: .88cqw; line-height: 1.2; color: rgba(255, 255, 255, 0.62); }
.live .ls-prog { display: flex; align-items: center; gap: .55cqw; font-size: .66cqw; line-height: 1; font-weight: 500; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.live .ls-now, .live .ls-left { flex: none; width: 2.1cqw; }
.live .ls-left { text-align: right; }
.live .ls-bar { flex: 1; height: .24cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.live .ls-bar i { display: block; height: 100%; width: 34%; border-radius: inherit; background: rgba(255, 255, 255, 0.92); }
.live .ls-ctl { position: relative; display: flex; justify-content: center; align-items: center; gap: 2.4cqw; height: 1.3cqw; }
.live .ls-ctl svg { display: block; width: 1.2cqw; height: 1.2cqw; fill: #fff; }
.live .ls-ctl .air { position: absolute; right: 0; top: 50%; width: 1.05cqw; height: 1.05cqw; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.7; color: rgba(255, 255, 255, 0.7); }
.live .ls-lyrics { left: 51.4cqw; top: 19.6cqw; width: 27cqw; height: 34cqw; opacity: 0; overflow: hidden; text-align: left; pointer-events: none; mask: linear-gradient(transparent, #000 16%, #000 84%, transparent); -webkit-mask: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.live .ls-lyrics .lines { transition: transform .9s var(--ease-drawer); }
.live .ls-lyrics p { margin: 0; padding: 1.15cqw 0; font-size: 1.78cqw; line-height: 1.22; font-weight: 700; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.36); transition: color .6s, filter .6s; filter: blur(.04cqw); }
.live .ls-lyrics p.now { color: #fff; filter: none; }

.live .ls[data-mode="cover"] .ls-vinyl, .live .ls[data-mode="lyrics"] .ls-vinyl { z-index: 3; }
.live .ls[data-mode="cover"] .ls-vinyl { width: 3cqw; height: 3cqw; left: 40.6cqw; top: 44.8cqw; }
.live .ls[data-mode="cover"] .ls-cover { width: 18.6cqw; height: 18.6cqw; left: 40.7cqw; top: 23.2cqw; border-radius: 1.4cqw; box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, 0.35); }
.live .ls[data-mode="cover"] .ls-card { left: 39.7cqw; top: 44cqw; width: 20.5cqw; height: 7.8cqw; }
.live .ls[data-mode="lyrics"] .ls-vinyl { width: 2.7cqw; height: 2.7cqw; left: 18.4cqw; top: 47.6cqw; }
.live .ls[data-mode="lyrics"] .ls-cover { width: 25.8cqw; height: 25.8cqw; left: 13.7cqw; top: 19.6cqw; border-radius: 1.5cqw; box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, 0.3); }
.live .ls[data-mode="lyrics"] .ls-card { left: 17.6cqw; top: 47cqw; width: 18cqw; height: 7.2cqw; padding: .6cqw .8cqw .65cqw; }
.live .ls[data-mode="lyrics"] .ls-slot { width: 2.7cqw; height: 2.7cqw; }
.live .ls[data-mode="lyrics"] .ls-lyrics { opacity: 1; transition-delay: .25s; }
.live .ls[data-mode="lyrics"] .ls-hint { opacity: 0; }

/* a live wallpaper: a 4K night sky turning slowly, as in a time-lapse, with a few stars twinkling, and
   softened at the bottom like a tilt-shift lens. Drawn from one sharp picture rather than a video,
   so it stays crisp at any size. Used by every screen on the page; the film's 3D screen does the same in
   its shader (laptop.js). The sky is wider than the screen so its corners never show as it turns. */
.wall { position: absolute; inset: 0; overflow: hidden; background: #040309; }
.sky { position: absolute; left: 50%; top: 50%; width: 128%; aspect-ratio: 16 / 9; translate: -50% -50%; animation: sky 70s ease-in-out infinite alternate paused; }
.sky img { display: block; width: 100%; height: 100%; }
.sky .tw { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, rgba(205, 222, 255, 0.55) 40%, transparent 70%); opacity: 0; animation: twinkle var(--d) ease-in-out var(--w) infinite paused; }
.wall.on .sky, .wall.on .tw { animation-play-state: running; }
@keyframes sky { from { transform: rotate(-2.5deg) scale(1); } to { transform: rotate(2.5deg) scale(1.04); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: var(--o); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sky, .sky .tw { animation: none; } }
/* under a lock screen the sky sits a little darker, so the clock and the words read over its bright core */
.ls .wall::after { content: ""; position: absolute; inset: 0; background: rgba(4, 3, 9, 0.3); }
.live .ls-blur {
  position: absolute; inset: -6%; pointer-events: none; opacity: 0; transition: opacity 900ms ease;
  background: url("../img/cover.jpg") center / cover; filter: blur(3.2cqw) saturate(1.25) brightness(0.62);
}
.live .ls[data-mode="cover"] .ls-blur, .live .ls[data-mode="lyrics"] .ls-blur { opacity: 1; }
.wall ~ .tilt { position: absolute; left: 0; right: 0; height: 34%; pointer-events: none; backdrop-filter: blur(1.4cqw); -webkit-backdrop-filter: blur(1.4cqw); }
.tilt.bottom { bottom: 0; -webkit-mask-image: linear-gradient(transparent, #000 75%); mask-image: linear-gradient(transparent, #000 75%); }
/* in the film the lock screen is see-through: under it is the 3D screen with the wallpaper */
.screen-ui .ls { background: none; }

/* the lock screen fills the live screen; only one of the island and the lock screen shows at a time */
.live .ls { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.screen-ui[data-show="island"] .ls, .screen-ui[data-show="lock"] .isle { display: none; }
.live .record {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, 0.05) 31.3%, transparent 32%), repeating-radial-gradient(circle, #141313 0 1px, #1b1a1a 1px 2px), #111;
}
.live .record .label { position: absolute; inset: 33%; border-radius: 50%; background: url("../img/label.jpg") center / cover; }
.live .record .label::after { content: ""; position: absolute; inset: 46%; border-radius: 50%; background: #0a0909; }
.live .ls-cover { cursor: default; }

/* ---------- words between the scenes ---------- */
.caps { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.cap { position: absolute; margin: 0; opacity: 0; visibility: hidden; }
.cap[data-scene="laptop"] { left: clamp(20px, 7vw, 112px); top: 50%; transform: translateY(-50%); width: min(31em, 40vw); }
.cap h2 { margin: 0; font-weight: 300; font-size: clamp(36px, 4.4vw, 70px); letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.cap p { margin: 22px 0 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--soft); max-width: 25em; text-wrap: pretty; }
.cap[data-scene="lock"] { left: clamp(20px, 7vw, 112px); top: 50%; transform: translateY(-50%); width: min(26em, 32vw); }
.cap[data-scene="finale"] { left: 0; right: 0; top: 16vh; text-align: center; padding: 0 16px; }
.cap[data-scene="finale"] p { margin-left: auto; margin-right: auto; }
.cap .button { pointer-events: auto; margin-top: 30px; display: inline-flex; align-items: center; height: 52px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: #0c0907; font-weight: 500; font-size: 16px; text-decoration: none; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.cap .button:active { transform: scale(0.97); }
.cap.hint { left: 50%; bottom: 6vh; transform: translateX(-50%); white-space: nowrap; font-size: 15px; color: var(--ink); background: rgba(10, 6, 12, 0.5); padding: 0.55em 1.1em; border-radius: 999px; }

.cue {
  position: fixed; left: 50%; bottom: 20px; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; padding-left: 0.3em; color: var(--soft);
  opacity: 0; visibility: hidden;
}
.cue i { width: 1px; height: 34px; background: linear-gradient(var(--soft), transparent); transform-origin: top; animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 700px) {
  .cap[data-scene="laptop"], .cap[data-scene="lock"] { top: auto; bottom: 8vh; transform: none; width: auto; right: 20px; left: 20px; }
}

/* ---------- the site proper: a record with two sides ---------- */
:root { interpolate-size: allow-keywords; }
.site {
  --display: "Instrument Sans", "Geist", -apple-system, sans-serif;
  --night: #08070a; --surface: #121015; --surface-2: #19161c; --dim: rgba(245, 245, 247, 0.3);
  --warm: var(--ink);
  position: relative; z-index: 5; background: var(--night); color: var(--ink);
}
.in-site .site::before {   /* the space above fades into the page instead of ending on a line */
  content: ""; position: absolute; left: 0; right: 0; top: -40vh; height: 40vh; pointer-events: none;
  background: linear-gradient(transparent, var(--night));
}
.site h2, .site h3 { font-family: var(--display); font-stretch: 92%; margin: 0; text-wrap: balance; }
.site h2 { font-size: clamp(48px, 7.2vw, 116px); font-weight: 650; letter-spacing: -0.045em; line-height: 0.95; }
.site h2 em, .site h3 em { font-style: normal; font-weight: inherit; color: inherit; }
.site p { color: var(--soft); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; text-wrap: pretty; margin: 0; }
.site a { color: var(--ink); }

/* the bar */
.sitebar {
  position: fixed; inset: 0 0 auto; z-index: 7; height: 62px; padding: 0 clamp(16px, 3vw, 32px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(8, 7, 10, 0.7); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 300ms;
}
.in-site .sitebar { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.sb-brand { display: flex; align-items: center; gap: 9px; justify-self: start; font-family: var(--display); font-stretch: 92%; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.sb-brand img { border-radius: 5px; }
.sitebar nav { display: flex; gap: 26px; }
.sitebar nav a { font-size: 14px; color: var(--soft); text-decoration: none; transition: color 200ms ease; }
.sb-right { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.sitebar .audio { position: static; opacity: 1; visibility: visible; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--soft); }
.sb-get {
  font-size: 14px; font-weight: 500; text-decoration: none; padding: 8px 16px; border-radius: 999px;
  background: var(--ink); color: #0c0907 !important; transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.sb-get:active { transform: scale(0.97); }
.in-site .stage .brand, .in-site .stage .audio, .in-site .caps, .in-site .cue { opacity: 0 !important; visibility: hidden !important; }


/* intro: lines light up like lyrics */
.statement { height: 270vh; }
.statement-hold { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: center; }
.statement-lines { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); transition: transform 700ms var(--ease-out); }
.statement .line {
  font-family: var(--display); font-stretch: 92%; font-weight: 600; letter-spacing: -0.04em; line-height: 1.02;
  font-size: clamp(38px, 6vw, 96px); color: var(--dim); padding: 0.12em 0;
  transition: color 500ms ease, filter 500ms ease, opacity 500ms ease;
}
.statement .line.past { color: rgba(245, 245, 247, 0.42); }
.statement .line.now { color: var(--ink); }
.statement .line.next { filter: blur(1.5px); opacity: 0.55; }
.statement .line em { font-style: normal; color: inherit; }

/* tracks */
.track { max-width: 1240px; margin: 0 auto; padding: 170px clamp(20px, 5vw, 64px) 0; }
.track-head { max-width: 820px; }
.track-head p { margin-top: 24px; max-width: 34em; }
.track-head.center { margin: 0 auto; text-align: center; }
.track-head.center p { margin-left: auto; margin-right: auto; }

/* A1: a desktop with the live island at its notch */
.demo-screen {
  position: relative; aspect-ratio: 1470 / 956; overflow: hidden;
  container-type: inline-size; border-radius: 1cqw;
  background: #040309;
  user-select: none; -webkit-user-select: none;
}
.demo-menubar {
  position: absolute; inset: 0 0 auto; height: 3.1cqw; padding: 0 1.6cqw; display: flex; justify-content: space-between; align-items: center;
  font-size: max(10px, 1.05cqw); color: rgba(255, 255, 255, 0.9);
}
.demo-menubar b { font-weight: 600; margin-right: 1.4cqw; }
/* on a phone-sized screen only "Finder" fits beside the island */
@container (max-width: 460px) { .demo-menubar span:first-child { font-size: 0; } .demo-menubar b { font-size: max(10px, 1.05cqw); } }
/* under the island: what to try, and its three looks to pick from */
.demo-foot { position: absolute; left: 0; right: 0; bottom: 2.4cqw; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; z-index: 3; }
.demo-hint { margin: 0; text-align: center; font-size: max(12px, 1.25cqw) !important; color: rgba(255, 255, 255, 0.94) !important; transition: opacity 400ms ease; }
.demo-hint span { background: rgba(10, 6, 12, 0.42); padding: 0.5em 1em; border-radius: 999px; }
.look-pick {
  display: flex; align-items: center; gap: 0.9em; padding: 0.35em 0.35em 0.35em 1em; border-radius: 999px;
  font-size: max(11px, 1.1cqw); color: rgba(255, 255, 255, 0.7);
  background: rgba(16, 12, 22, 0.5); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.lp-opts { display: flex; gap: 0.2em; }
.look-pick button {
  font: inherit; color: rgba(255, 255, 255, 0.75); background: transparent; border: 0; border-radius: 999px;
  padding: 0.45em 1em; min-height: 32px; cursor: pointer; transition: background 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.look-pick button:active { transform: scale(0.96); }
.look-pick button[aria-checked="true"] { background: rgba(255, 255, 255, 0.92); color: #120d14; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .look-pick button[aria-checked="false"]:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } }
.look-pick button:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }
@container (max-width: 460px) { .lp-name { display: none; } .look-pick { padding-left: 0.35em; } }
.demo-screen.opened .demo-hint { opacity: 0; }
/* the sky nearer here: the Milky Way's bright middle sits just under the island, so its outline shows */
.demo-screen .sky { width: 240%; left: -89.6%; top: -77.8%; translate: none; transform-origin: 59% 49%; }
.track-notes { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.track-notes li { color: var(--soft); font-size: 16px; line-height: 1.5; }
.track-notes b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* A2: the lock screen, held while three steps pass */
.t-lock { height: 360vh; padding-top: 0; max-width: none; }
.lock-hold {
  position: sticky; top: 0; height: 100vh; height: 100svh; max-width: 1240px; margin: 0 auto; padding: 80px clamp(20px, 5vw, 64px) 40px;
  display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.lock-copy h2, .desk-copy h2 { font-size: clamp(42px, 4.4vw, 74px); }
.lock-steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 16px; counter-reset: s; }
.lock-steps li { color: rgba(245, 245, 247, 0.5); font-size: 17px; line-height: 1.5; transition: color 400ms ease; }
.lock-steps li b { color: inherit; font-weight: 600; }
.lock-steps li.on { color: var(--ink); }
.lock-note { margin-top: 30px !important; font-size: 15px !important; }
.demo-lock { position: relative; aspect-ratio: 1470 / 956; overflow: hidden; container-type: inline-size; }

/* a MacBook, drawn: a black glass lid with a thin dark rim and the notch, a silver base with its lip */
.mac { position: relative; container-type: inline-size; }
.mac-lid {
  position: relative; background: #050505; padding: 1.3cqw 1.3cqw 1.45cqw;
  border-radius: 2.4cqw 2.4cqw 0.9cqw 0.9cqw;
  box-shadow: inset 0 0 0 0.14cqw #3a3a3e, inset 0 0 0 0.32cqw #0a0a0b;
}
.mac-lid > .demo-lock, .mac-lid > .desk-shots { border-radius: 1cqw; }
/* the laptops that stand alone under a heading: narrower than the column, so the wider base still fits */
.wide-mac { width: 88%; margin: 60px auto 0; }
.glow-mac { max-width: 1000px; }
.mac-notch { position: absolute; top: 1.3cqw; left: 50%; z-index: 3; width: 9.6cqw; height: 1.05cqw; transform: translateX(-50%); background: #050505; border-radius: 0 0 0.7cqw 0.7cqw; }
.mac-base {
  position: relative; height: 1.45cqw; margin: 0 -6.5%;
  background: linear-gradient(180deg, #f2f2f4 0%, #d7d7db 32%, #ababb0 78%, #87878c 100%);
  border-radius: 0.25cqw 0.25cqw 2.6cqw 2.6cqw / 0.25cqw 0.25cqw 1.45cqw 1.45cqw;
}
.mac-base::after {   /* the lip you open the lid with */
  content: ""; position: absolute; top: 0; left: 50%; width: 14cqw; height: 0.6cqw; transform: translateX(-50%);
  background: linear-gradient(#a9a9ae, #c6c6ca); border-radius: 0 0 0.9cqw 0.9cqw;
}

/* B1: the desktop, three styles while the section is held */
.t-desk { height: 340vh; padding-top: 0; max-width: none; }
.desk-hold {
  position: sticky; top: 0; height: 100vh; height: 100svh; max-width: 1240px; margin: 0 auto; padding: 90px clamp(20px, 5vw, 64px) 40px;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center;
}
.desk-shots { position: relative; aspect-ratio: 1470 / 956; overflow: hidden; background: var(--surface); }
.desk-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 900ms ease, transform 1600ms var(--ease-out); }
.desk-shots img.on { opacity: 1; transform: scale(1); }
.desk-copy p { margin-top: 22px; }
.desk-tabs { display: flex; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.desk-tabs span { font-size: 14px; padding: 8px 14px; border-radius: 999px; color: var(--soft); background: var(--surface); transition: background-color 300ms ease, color 300ms ease; }
.desk-tabs span.on { background: var(--ink); color: #0c0907; }

/* B2: a glow that listens to the page's music */
.glow-frame { position: relative; aspect-ratio: 1470 / 956; border-radius: 1cqw; overflow: hidden; container-type: inline-size; background: #040309; --g: 0.4; }
.glow-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 calc(18px + var(--g) * 30px) calc(4px + var(--g) * 12px) rgba(255, 150, 100, calc(0.35 + var(--g) * 0.6)),
              inset 0 0 calc(60px + var(--g) * 70px) calc(10px + var(--g) * 20px) rgba(230, 80, 150, calc(0.2 + var(--g) * 0.35));
}
.glow-frame.idle::after { animation: idle-glow 0.79s ease-in-out infinite alternate; }
@keyframes idle-glow { from { opacity: 0.4; } to { opacity: 1; } }

/* B3: the rest, each one live */
.bento { margin-top: 64px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cell { background: var(--surface); border-radius: 26px; padding: 30px; overflow: hidden; position: relative; }
.cell h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.cell p { font-size: 15px; margin-top: 10px; }
.c-vol, .c-buddy { grid-column: span 3; }
.c-face, .c-sky, .c-pods { grid-column: span 2; }
.c-week { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto auto 1fr; column-gap: 40px; }
.c-week h3, .c-week .week, .c-week p { grid-column: 1; }
.c-week .bars { grid-column: 2; grid-row: 1 / span 3; }

.caps-demo { height: 270px; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 18px; }
.capsule {
  position: relative; width: 66px; height: 230px; border-radius: 40px; overflow: hidden; cursor: grab; touch-action: none; outline: none;
  background: rgba(255, 255, 255, 0.12); transition: width 400ms var(--spring);
}
.capsule.drag { cursor: grabbing; width: 76px; }
.capsule .fill { position: absolute; inset: auto 0 0; height: 62%; background: #f5f5f7; }
.capsule .sym { position: absolute; left: 50%; bottom: 16px; width: 24px; height: 24px; transform: translateX(-50%); color: rgba(0, 0, 0, 0.55); }
.cap-read { font-family: var(--display); font-size: 48px; font-weight: 600; letter-spacing: -0.03em; min-width: 2.6em; font-variant-numeric: tabular-nums; color: var(--warm); }

.buddy { display: flex; align-items: center; gap: 26px; height: 170px; justify-content: center; }
.keycap {
  width: 104px; height: 104px; border-radius: 26px; position: relative;
  background: linear-gradient(180deg, #4b4949, #2b2a2a); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 16px 36px rgba(0, 0, 0, 0.5);
  transition: transform 90ms ease;
}
.keycap.press { transform: translateY(3px) scale(0.98); }
.keycap .eye { position: absolute; top: 42px; width: 10px; height: 14px; border-radius: 6px; background: #fff; animation: blink 4.2s infinite; transition: top 250ms ease, height 200ms ease; }
.keycap .eye.l { left: 33px; } .keycap .eye.r { right: 33px; }
.keycap .mouth { position: absolute; left: 50%; top: 64px; width: 18px; height: 9px; transform: translateX(-50%); border-bottom: 3px solid #fff; border-radius: 0 0 12px 12px; transition: all 200ms ease; }
.keycap.typing .eye { top: 48px; height: 9px; }
.keycap.typing .mouth { width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; top: 66px; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.wpm b { display: block; font-family: var(--display); font-size: 64px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--warm); font-variant-numeric: tabular-nums; }
.wpm span { font-size: 13px; color: var(--soft); }
.type-here { width: 100%; height: 46px; border-radius: 14px; border: 0; background: var(--surface-2); color: var(--ink); padding: 0 16px; font: inherit; font-size: 15px; outline: none; transition: box-shadow 200ms ease; }
.type-here:focus { box-shadow: 0 0 0 2px rgba(245, 245, 247, 0.35); }

.face { display: block; width: 120px; height: 120px; margin: 26px auto 10px; }
.face .faceid { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; animation: faceid 6.4s var(--ease-drawer) infinite; }
.face .scan { fill: none; stroke-width: 5; stroke-linecap: round; transform-origin: center; animation: scan 6.4s var(--ease-drawer) infinite; }
.face .tick { fill: none; stroke: #30d158; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: tick 6.4s var(--ease-drawer) infinite; }
@keyframes faceid { 0% { opacity: 0; transform: scale(0.9); } 6%, 30% { opacity: 1; transform: scale(1); } 18% { transform: scale(0.95); } 38%, 100% { opacity: 0; transform: scale(0.82); } }
@keyframes scan { 0%, 36% { opacity: 0; stroke-dasharray: 2 10; transform: rotate(0); stroke: rgba(255, 255, 255, 0.55); } 40%, 63% { opacity: 1; stroke-dasharray: 2 10; stroke: rgba(255, 255, 255, 0.55); } 74%, 94% { opacity: 1; stroke-dasharray: 252 0; transform: rotate(200deg); stroke: #30d158; } 100% { opacity: 0; stroke-dasharray: 252 0; transform: rotate(220deg); stroke: #30d158; } }
@keyframes tick { 0%, 68% { stroke-dashoffset: 60; opacity: 1; } 80%, 94% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.beta { font: inherit; font-size: 13px; font-weight: 550; letter-spacing: 0; color: var(--soft); background: rgba(245, 245, 247, 0.1); padding: 2px 7px; border-radius: 6px; vertical-align: 4px; }

.sky-now { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.sky-now svg { width: 70px; height: 58px; }
.sky-now b { font-family: var(--display); font-size: 76px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.sky-hours { display: flex; justify-content: space-between; margin-top: 22px; }
.sky-hours span { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soft); }
.sky-hours b { font-size: 16px; color: var(--ink); font-weight: 600; }

.pods-isle { display: flex; align-items: center; justify-content: space-between; width: min(100%, 260px); height: 54px; margin: 30px auto 0; padding: 0 16px 0 12px; border-radius: 27px; background: #000; }
.pods-spin { width: 63px; height: 48px; background: url("../img/airpods-spin.png") 0 0 / 756px 720px no-repeat; animation: pods-x 0.4s steps(12) infinite, pods-y 6s steps(15) infinite; }
@keyframes pods-x { to { background-position-x: -756px; } }
@keyframes pods-y { to { background-position-y: -720px; } }
.pods-charge { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#30d158 calc(var(--v) * 1turn), rgba(255, 255, 255, 0.16) 0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
.pods { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; margin-top: 24px; }
.pods .pod { font-size: 14px; gap: 7px; white-space: nowrap; }
.pods .pod .mini { width: 15px; height: 15px; }
.pod { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--soft); }
.pod .mini { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#30d158 calc(var(--v) * 1turn), rgba(255, 255, 255, 0.14) 0); -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%); mask: radial-gradient(circle, transparent 50%, #000 52%); }

.week { margin-top: 24px; }
.week b { display: block; font-family: var(--display); font-size: 64px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--warm); }
.week span { font-size: 13px; color: var(--soft); }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 200px; }
.bars i { flex: 1; height: var(--h); border-radius: 8px; background: rgba(245, 245, 247, 0.82); transform-origin: bottom; transform: scaleY(0.04); transition: transform 1100ms var(--spring); }
.c-week.seen .bars i { transform: none; }
.bars i:nth-child(2) { transition-delay: 60ms; } .bars i:nth-child(3) { transition-delay: 120ms; } .bars i:nth-child(4) { transition-delay: 180ms; }
.bars i:nth-child(5) { transition-delay: 240ms; } .bars i:nth-child(6) { transition-delay: 300ms; } .bars i:nth-child(7) { transition-delay: 360ms; }

/* before you ask */
.t-faq .faq { max-width: 820px; margin: 56px auto 0; }
.faq details { padding: 26px 0; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08); }
.faq details:last-child { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(255, 255, 255, 0.08); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 550; letter-spacing: -0.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--soft); font-size: 26px; line-height: 1; transition: transform 250ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 350ms var(--ease-out), content-visibility 350ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq p { margin-top: 14px; max-width: 40em; font-size: 17px; }

/* the end of the side */
.t-get { text-align: center; padding-bottom: 60px; }
.get-record { width: 220px; height: 220px; margin: 0 auto 44px; border-radius: 50%; position: relative; animation: spin 3.6s linear infinite;
  background: radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, 0.05) 31.3%, transparent 32%), repeating-radial-gradient(circle, #121113 0 1px, #1c1a1d 1px 2px);
}
.get-record span { position: absolute; inset: 33%; border-radius: 50%; background: url("../img/label.jpg") center / cover; }
.get-record span::after { content: ""; position: absolute; inset: 44%; border-radius: 50%; background: var(--night); }
.t-get h2 { font-size: clamp(56px, 9vw, 150px); }
.t-get p { margin: 24px auto 0; }
.t-get .button {
  display: inline-flex; align-items: center; height: 54px; padding: 0 30px; margin-top: 34px; border-radius: 999px;
  background: var(--ink); color: #0c0907; font-weight: 500; font-size: 16px; text-decoration: none; transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.t-get .button:active { transform: scale(0.97); }
.t-get .button.quiet { background: rgba(245, 245, 247, 0.1); color: var(--ink) !important; border: 0; font-family: inherit; cursor: pointer; }
.get-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.t-get .get-actions .button { margin-top: 0; }
/* buying: the email, then on to lava.top */
.buy-form { width: min(100%, 520px); margin: 30px auto 0; text-align: left; }
.buy-form label { display: block; font-size: 14px; color: var(--soft); margin: 0 0 8px 4px; }
.buy-row { display: flex; gap: 10px; }
.buy-form input {
  flex: 1; min-width: 0; height: 54px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--surface);
  color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: box-shadow 200ms ease;
}
.buy-form input::placeholder { color: var(--dim); }
.buy-form input:focus-visible { box-shadow: 0 0 0 2px rgba(245, 245, 247, 0.5); }
.t-get .buy-form .button { margin-top: 0; border: 0; font-family: inherit; cursor: pointer; flex: none; justify-content: center; }
.t-get .buy-form .button[disabled] { opacity: 0.6; cursor: default; }
.t-get .buy-note { margin: 12px 0 0 4px; font-size: 14px; color: rgba(245, 245, 247, 0.6); }
.t-get .buy-note.error { color: #ff6b6b; }
@media (max-width: 560px) { .buy-row { flex-direction: column; } .buy-form input { flex: none; } }
.t-get .fine { margin-top: 18px; font-size: 14px; color: rgba(245, 245, 247, 0.6); }

.s-foot {
  max-width: 1240px; margin: 0 auto; padding: 120px clamp(20px, 5vw, 64px) 44px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; font-size: 14px; color: rgba(245, 245, 247, 0.62);
}
.s-foot nav { display: flex; gap: 24px; }
.s-foot a { color: var(--soft); text-decoration: none; }

/* headings rise word by word as they arrive */
.words-ready [data-words] .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.words-ready [data-words] .wd > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.words-ready [data-words].in .wd > span { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .sitebar nav a:hover, .s-foot a:hover { color: var(--ink); }
  .sb-get:hover, .t-get .button:hover { background: #fff; }
  .t-get .button.quiet:hover { background: rgba(245, 245, 247, 0.16); }
  .capsule:hover { width: 76px; }
}
@media (max-width: 960px) {
  .sitebar { grid-template-columns: 1fr auto; }
  .sitebar nav { display: none; }
  .track-notes { grid-template-columns: 1fr; }
  .lock-hold, .desk-hold { grid-template-columns: 1fr; align-content: center; gap: 28px; padding-top: 76px; }
  .lock-steps { margin-top: 20px; gap: 10px; }
  .lock-steps li { font-size: 15px; }
  .lock-note { display: none; }
  .desk-copy { order: -1; }
  .bento { grid-template-columns: 1fr; }
  .bento > .cell { grid-column: auto; }
  .c-week { display: block; }
  .c-week .bars { margin-top: 24px; height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .words-ready [data-words] .wd > span { transform: none; transition: none; }
  .statement-lines, .desk-shots img { transition: none; }
  .face .scan, .face .tick, .keycap .eye, .get-record, .glow-frame.idle::after, .pods-spin { animation: none; }
  /* still: the Face ID sign alone */
  .face .faceid { animation: none; opacity: 1; }
  .face .scan, .face .tick { opacity: 0; }
}


/* no 3D: a still sky so the page still reads */
.flat body { background: radial-gradient(120% 70% at 50% 115%, #5a2742 0%, #1a0f22 42%, var(--ground) 72%); }
.flat #space, .flat .curtain { display: none; }
.flat .brand, .flat .hero > * { opacity: 1; visibility: visible; }
.flat .audio { display: none; }

@media (prefers-reduced-motion: reduce) {
  .word, .word span { animation: none; opacity: 1; filter: none; transform: translateY(-50%); color: #fff; }
  .word span { transform: none; }
}