/* Bragi landing page, v2 (2026-09-28). One dark page, like X's "Lights out".
   Our voice is Mandali at its one weight on a warm near-black. X's own surfaces
   (the composer, the post, the replies, the notifications) wear X's dark palette
   and X's fallback font stack, because they are X. Lime is a fill: the Sign up
   pills, the switch track, the marker behind "grow". X metrics are written as
   calc(N * var(--u)), where --u is 1px times the --xs scale of the surface, so
   the same markup is exact at X's own size inside the phone and a little larger
   as the big card. Motion lives in /js (springs for arrivals, expo-out for exits,
   transform, opacity and filter only); without motion every scene is shown
   finished, in reading order. */

@font-face {
  font-family: 'Mandali';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Mandali-Regular.ttf') format('truetype');
}

:root {
  color-scheme: dark;

  --bg: #0A0A09;
  --ink-1: #F4F4EF;
  --ink-2: #A7AC9F;
  --ink-3: #6F746B;
  --line: rgba(244, 244, 239, .09);
  --lime: #DFFF5E;
  --lime-2: #C8F000;
  --on-lime: #0A0A09;

  --x-bg: #000000;
  --x-text: #E7E9EA;
  --x-sub: #71767B;
  --x-line: #2F3336;
  --x-thread: #333639;
  --x-blue: #1D9BF0;
  --x-pink: #F91880;
  --x-green: #00BA7C;
  --x-btn: #EFF3F4;
  --x-btn-ink: #0F1419;
  --x-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font: 'Mandali', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-h: 64px;
  --gutter: clamp(16px, 4vw, 64px);
  --xs: 1;
  --u: 1px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* Touch screens snap to the beats of the scroll scenes (js/stops.js): one 1 px marker per beat,
   placed in page coordinates; the platform's own fling stops at every one. */
html.snap { scroll-snap-type: y mandatory; }
.stops { position: absolute; top: 0; left: 0; width: 1px; height: 0; pointer-events: none; }
.stop { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
.stop-end { scroll-snap-align: end; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-1);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: 12px; top: -56px; z-index: 60;
  padding: 10px 16px; border-radius: 999px;
  background: var(--lime); color: var(--on-lime); text-decoration: none;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

.i {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- buttons, nav ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font: 400 16px/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-lime { background: var(--lime); color: var(--on-lime); }
@media (hover: hover) { .btn-lime:hover { background: var(--lime-2); } }
/* Sign in, next to the lime Sign up: an outlined pill, the way X draws its own Log in */
.btn-ghost { color: var(--ink-1); border: 1px solid rgba(244, 244, 239, .24); }
@media (hover: hover) { .btn-ghost:hover { border-color: rgba(244, 244, 239, .5); background: rgba(244, 244, 239, .06); } }
.btn-lg { height: 54px; padding: 0 30px; font-size: 18px; }

.nav {
  position: fixed; inset: 0 0 auto; z-index: 30;
  height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.nav.scrolled {
  background: rgba(10, 10, 9, .72);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-color: var(--line);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 20px; letter-spacing: -.01em; }
.brand img { border-radius: 50%; }
.brand-sm { font-size: 16px; gap: 8px; }

/* ---------- X, shared ---------- */
.x { font-family: var(--x-font); color: var(--x-text); letter-spacing: normal; -webkit-font-smoothing: antialiased; }
.x b, .x-name { font-weight: 700; color: var(--x-text); }
.x-sub { color: var(--x-sub); }
.av {
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; object-fit: cover;
  font: 700 calc(14 * var(--u))/1 var(--x-font); color: #fff; letter-spacing: .01em;
}
.av-c1 { background: linear-gradient(140deg, #F29B7C, #C9563E); }
.av-c2 { background: linear-gradient(140deg, #6CC3A6, #2E7D6B); }
.av-c3 { background: linear-gradient(140deg, #F6C667, #D9822F); }
.av-c4 { background: linear-gradient(140deg, #EBA3B8, #B5586F); }
.av-c5 { background: linear-gradient(140deg, #A6CE92, #4F8A5B); }
.av-c6 { background: linear-gradient(140deg, #DDB07F, #9C6B3F); }
.av-c7 { background: linear-gradient(140deg, #86C2C9, #3F7F86); }
.av-c8 { background: linear-gradient(140deg, #F5ADA6, #D2625A); }
.av-c9 { background: linear-gradient(140deg, #D2DE78, #8FA33A); }
.av-c10 { background: linear-gradient(140deg, #E6BDAE, #A8705E); }
.av-c11 { background: linear-gradient(140deg, #AFCFC7, #5E8C83); }
.av-c12 { background: linear-gradient(140deg, #F4BE88, #C7773A); }
.av-pub { border-radius: calc(9 * var(--u)); background: #E8E6DF; color: #0F1419; }
.av-you { background: #202327; color: #5B6167; }
.av-you .i { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.x-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(36 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 999px;
  background: var(--x-btn); color: var(--x-btn-ink);
  font: 700 calc(15 * var(--u))/1 var(--x-font); white-space: nowrap;
}
.x-btn-dim { opacity: .5; height: calc(34 * var(--u)); }
.x-follow {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  height: calc(32 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 999px;
  border: 1px solid transparent; background: var(--x-btn); color: var(--x-btn-ink);
  font: 700 calc(15 * var(--u))/1 var(--x-font); white-space: nowrap; flex: none;
}
.x-follow .f-b { display: none; }
.x-follow.is-following { background: transparent; color: var(--x-btn); border-color: #536471; }
.x-follow.is-following .f-a { display: none; }
.x-follow.is-following .f-b { display: inline; }

/* rolling counters (js/x.js builds the cells) */
.odo { display: inline-flex; white-space: pre; }
.odo-c { position: relative; display: inline-block; overflow: hidden; height: var(--lh, 1.3em); line-height: var(--lh, 1.3em); vertical-align: top; }
.odo-i { display: block; }
.odo-i + .odo-i { position: absolute; left: 0; top: 0; }

/* the like burst */
.heart { position: relative; display: inline-grid; }
.heart .i { grid-area: 1 / 1; }
.h-f { visibility: hidden; color: var(--x-pink); }
.is-liked .h-o { visibility: hidden; }
.is-liked .h-f { visibility: visible; }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--x-pink); }
.burst-dot { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--x-pink); }
.burst-dot:nth-child(4n + 2) { background: var(--x-blue); }
.burst-dot:nth-child(4n + 3) { background: var(--x-green); }
.burst-dot:nth-child(4n) { background: #FFD400; }

/* ---------- 1 + 2. the story ---------- */
.story { position: relative; height: 470vh; } /* progress map in story.js */
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage { position: absolute; inset: 0; --xs: 1; --u: calc(var(--xs) * 1px); }
@media (min-width: 1440px) { .stage { --xs: 1.08; } }
@media (min-width: 1680px) { .stage { --xs: 1.18; } }

.hero {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--nav-h) var(--gutter) 0; text-align: center; pointer-events: none;
}
.hero-title {
  margin: 0; font-size: min(6.7vw, 100px); line-height: 1.04; letter-spacing: -.035em;
  white-space: nowrap; transform-origin: 0 0;
}
.hero-sub { margin: 18px 0 0; max-width: 52ch; text-wrap: balance; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: var(--ink-2); }

.compose {
  position: relative; width: min(calc(600 * var(--u)), 100%); margin-top: 52px;
  display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr); column-gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  background: var(--x-bg); border: 1px solid var(--x-line); border-radius: calc(16 * var(--u));
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .95);
  text-align: left; transform-origin: 50% 0;
}
.compose-main { min-width: 0; }
.compose-field {
  position: relative; min-height: calc(56 * var(--u));
  padding: calc(8 * var(--u)) 0 calc(16 * var(--u));
  font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u));
}
.compose-text { white-space: pre-wrap; }
.caret {
  display: inline-block; width: 2px; height: calc(23 * var(--u)); margin-left: 1px;
  vertical-align: calc(-5 * var(--u)); border-radius: 1px; background: var(--x-blue);
  animation: caret 1.06s steps(1) infinite;
}
.compose.typing .caret { animation: none; }
@keyframes caret { 50% { opacity: 0; } }
.compose-ph { position: absolute; left: 0; top: calc(8 * var(--u)); color: var(--x-sub); pointer-events: none; }
.compose.has-text .compose-ph { visibility: hidden; }
.compose-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: calc(10 * var(--u)); border-top: 1px solid var(--x-line);
}
.compose-tools { display: flex; gap: calc(16 * var(--u)); color: var(--x-blue); }
.compose-tools .i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.compose-post { opacity: .5; transition: opacity 160ms ease; }
.compose.has-text .compose-post { opacity: 1; }

/* The line at the foot of the first screen: a hairline with a short lime stroke running down it,
   then a rest. Shown at the very top of the page from the first frame. */
.cue {
  position: absolute; left: 50%; bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px)); z-index: 3;
  width: 2px; height: 36px; margin-left: -1px; border-radius: 1px; overflow: hidden;
  background: rgba(244, 244, 239, .14); pointer-events: none; opacity: 0; visibility: hidden;
}
.cue::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 12px; border-radius: 1px;
  background: var(--lime); transform: translateY(-12px); animation: cue 2.6s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateY(-12px); } 55%, 100% { transform: translateY(36px); } }
html:not(.motion) .cue { display: none; }

.scene { position: absolute; inset: 0; z-index: 1; perspective: 1800px; }
.card-slot {
  position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 16px); margin-inline: auto;
  width: min(calc(600 * var(--u)), calc(100% - 2 * var(--gutter)));
}
[data-frame="phone"] .card-slot { display: none; }
.thread {
  position: relative; display: flex; flex-direction: column; width: 100%;
  max-height: min(calc(100svh - var(--nav-h) - 36px), calc(880 * var(--u)));
  background: var(--x-bg); border: 1px solid var(--x-line); border-radius: calc(16 * var(--u));
  overflow: hidden; box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .95);
}

.xp {
  position: relative; flex: none;
  display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr); column-gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) 0;
}
.xp-head { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.xp-id { display: flex; flex-direction: column; min-width: 0; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); }
.xp-id > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-more { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--x-sub); }
.xp-text {
  grid-column: 1 / -1; margin: calc(12 * var(--u)) 0 0; justify-self: start;
  font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); white-space: pre-wrap; transform-origin: 0 0;
}
.xp-meta { grid-column: 1 / -1; margin: calc(16 * var(--u)) 0; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); color: var(--x-sub); --lh: calc(20 * var(--u)); }
.xp-actions {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center;
  height: calc(48 * var(--u)); padding: 0 calc(4 * var(--u));
  border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line);
  color: var(--x-sub); font-size: calc(14 * var(--u)); --lh: calc(20 * var(--u));
}
.xa { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); transition: color 240ms ease; }
.xa .i { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.xa-n { font-variant-numeric: tabular-nums; }
.xa-like.is-liked { color: var(--x-pink); }

.xp-reply {
  flex: none; display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid var(--x-line);
  font-size: calc(20 * var(--u)); color: var(--x-sub);
}
.xp-reply-ph { flex: 1; }

.xr-list { position: relative; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.xr-list.is-clipped {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 110px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 110px), transparent);
}
.xr-group { border-bottom: 1px solid var(--x-line); }
.xr {
  position: relative; display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr); column-gap: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
}
.xr-side { position: relative; display: flex; flex-direction: column; align-items: center; }
.xr-line {
  position: absolute; left: 50%; top: calc(44 * var(--u)); bottom: calc(-20 * var(--u));
  width: 2px; margin-left: -1px; background: var(--x-thread);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 520ms var(--ease-out);
}
.xr.has-reply .xr-line { transform: scaleY(1); }
.xr-main { min-width: 0; }
.xr-head { display: flex; gap: calc(4 * var(--u)); min-width: 0; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap; }
.xr-head .x-sub { overflow: hidden; text-overflow: ellipsis; }
.xr-text { margin: calc(2 * var(--u)) 0 0; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); overflow-wrap: anywhere; }
.xr-actions {
  display: flex; justify-content: space-between; max-width: calc(420 * var(--u)); margin-top: calc(10 * var(--u));
  color: var(--x-sub); font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); --lh: calc(16 * var(--u));
}
.xr-actions > span { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-variant-numeric: tabular-nums; }
.xr-actions .i { width: calc(18.75 * var(--u)); height: calc(18.75 * var(--u)); }
.xr-actions .xa-like.is-liked { color: var(--x-pink); }
.xr-bragi.flash { animation: flash 1.8s var(--ease-out); }
@keyframes flash { from { background-color: rgba(223, 255, 94, .1); } to { background-color: rgba(223, 255, 94, 0); } }

/* the phone: baguette's iPhone 17 Pro render with its screen cut out, over a live screen */
.phone {
  --ph: min(calc(100svh - var(--nav-h) - 24px), 880px);
  position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 8px); margin-inline: auto;
  width: calc(var(--ph) * 1065 / 2184); height: var(--ph);
  display: none;
}
[data-frame="phone"] .phone { display: block; }
.phone::after {
  content: ''; position: absolute; z-index: 0; left: 12%; right: 12%; bottom: -1.5%; height: 5%;
  border-radius: 50%; background: rgba(0, 0, 0, .75); filter: blur(18px);
}
.phone-frame { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.phone-screen {
  position: absolute; z-index: 1; left: 4.25%; top: 1.7%; width: 91.5%; height: 96.6%;
  display: flex; flex-direction: column; overflow: hidden; background: #000;
  border-radius: var(--screen-r, 44px); --xs: .85; --u: calc(var(--xs) * 1px);
}
.ios-bar {
  flex: none; display: flex; justify-content: space-between; align-items: center;
  height: calc(56 * var(--u)); padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(46 * var(--u));
  font: 600 calc(17 * var(--u))/1 var(--x-font); color: #fff;
}
.ios-icons { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.i-s { fill: none; stroke: currentColor; stroke-linecap: round; }
.i-sig { width: calc(18 * var(--u)); height: calc(12 * var(--u)); }
.i-wifi { width: calc(17 * var(--u)); height: calc(12 * var(--u)); }
.i-bat { width: calc(27 * var(--u)); height: calc(13 * var(--u)); }
.xapp-bar {
  flex: none; display: flex; align-items: center; gap: calc(30 * var(--u));
  height: calc(52 * var(--u)); padding: 0 calc(16 * var(--u));
  font-size: calc(20 * var(--u)); border-bottom: 1px solid var(--x-line);
}
.xapp-bar .i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.phone-slot { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.phone-slot .thread { flex: 1; min-height: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none; }

/* follow notifications, drawn like a cell of X's Notifications tab. js/story.js puts them
   beside the post when there is room (.is-side, --half = half the post's width), else under it. */
.toast {
  display: flex; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u));
  background: var(--x-bg); border: 1px solid var(--x-line); border-radius: calc(16 * var(--u));
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .95);
  font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); text-align: left;
}
.toast-ic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-top: 1px; color: var(--x-blue); }
.toast-avs { display: flex; margin-bottom: calc(8 * var(--u)); }
.toast-avs .av { width: calc(32 * var(--u)); height: calc(32 * var(--u)); font-size: calc(11 * var(--u)); margin-right: calc(-6 * var(--u)); box-shadow: 0 0 0 2px var(--x-bg); }
.toast p { margin: 0; color: var(--x-text); }
.toasts { position: absolute; z-index: 3; inset: 0; pointer-events: none; --half: calc(300 * var(--u)); }
.toasts .toast { position: absolute; left: 0; right: 0; bottom: 20px; width: min(300px, calc(100% - 32px)); margin-inline: auto; }
.toasts.is-side .toast { right: auto; bottom: auto; width: calc(280 * var(--u)); margin: 0; }
.toasts.is-side .t-l { left: calc(50% - var(--half) - 312 * var(--u)); }
.toasts.is-side .t-r { left: calc(50% + var(--half) + 32 * var(--u)); }
.toasts.is-side .t-1 { top: 22%; }
.toasts.is-side .t-2 { top: 30%; }
.toasts.is-side .t-3 { top: 46%; }
.toasts.is-side .t-4 { top: 52%; }
.toasts.is-side .t-5 { top: 64%; }

/* the tagline in flight from the composer to the headline (js/story.js) */
.flyer {
  position: absolute; z-index: 5; margin: 0; white-space: pre; pointer-events: none;
  font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); color: var(--x-text);
  transform-origin: 0 0;
}

/* ---------- 3. the line ---------- */
.line { position: relative; height: 290vh; }
.line-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--nav-h) var(--gutter) 0; text-align: center;
}
.line-title {
  margin: 0; max-width: 11ch; font-size: clamp(56px, 10.5vw, 168px); line-height: .98;
  letter-spacing: -.04em; text-wrap: balance;
}
.w { display: inline-block; }
.w-grow { position: relative; isolation: isolate; padding: 0 .09em; margin: 0 -.05em; }
.hl { position: absolute; z-index: -1; inset: .1em 0 .02em; border-radius: .12em; background: var(--lime); transform-origin: 0 50%; }
.w-t { position: relative; color: var(--on-lime); }
/* With WebGL2 the word is grass (js/grass.js): no marker, a little tracking for the bolder
   letterforms, and the canvas over the text. The text stays for reading, finding and copying. */
.w-grow.is-grass { padding: 0; margin: 0; }
.w-grow.is-grass .hl { display: none; }
.w-grow.is-grass .w-t { display: inline-block; color: var(--ink-1); letter-spacing: .02em; margin-right: -.02em; }
.grass { position: absolute; left: 0; top: 0; pointer-events: none; }
/* With WebGL2 the X is drawn by js/xmark.js and turns into X's logo, which is a little wider than
   the letter, so the full stop steps aside. The letter stays in the page for reading. */
.w-x { position: relative; }
.w-x.is-logo .x-l { color: transparent; }
.x-p { display: inline-block; }
.w-x.is-logo .x-p { will-change: transform; }
.xmark { position: absolute; left: 0; top: 0; pointer-events: none; }
@media (forced-colors: active) {
  .grass, .xmark { display: none; }
  .w-x.is-logo .x-l { color: CanvasText; }
  .x-p { transform: none !important; }
}
.line-sub { margin: 36px 0 0; font-size: clamp(18px, 1.6vw, 24px); color: var(--ink-2); }

/* ---------- 4. the switchboard ---------- */
.board { position: relative; height: 470vh; }
.board-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  gap: clamp(32px, 5vw, 88px); max-width: 1320px; margin: 0 auto;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
}
/* One sentence a line: the size is capped by the column's width (a sentence is about 10 em wide),
   so "Choose what you want." never breaks. */
.board-copy { container-type: inline-size; }
.board-title { margin: 0 0 40px; font-size: clamp(34px, 3.8vw, 56px); font-size: min(clamp(34px, 3.8vw, 56px), 9.6cqi); line-height: 1.04; letter-spacing: -.03em; }
.board-title .bt { display: block; text-wrap: balance; }
.camps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.camp {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  margin: 0 -20px; padding: 16px 20px; border-radius: 20px; opacity: .34;
  transition: opacity 500ms var(--ease-out), background-color 500ms var(--ease-out);
}
.camp.is-on { opacity: .62; }
.camp.is-active { opacity: 1; background: rgba(244, 244, 239, .045); }
.camp h3 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.camp p { margin: 4px 0 0; max-width: 36ch; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: #2B2C28; transition: background-color 300ms var(--ease-io); }
.knob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #F4F4EF; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform 300ms var(--ease-io), background-color 300ms var(--ease-io);
}
.camp.is-on .switch { background: var(--lime); }
.camp.is-on .knob { transform: translateX(20px); background: var(--on-lime); }

.board-stage { position: relative; height: min(680px, calc(100svh - var(--nav-h) - 96px)); --xs: 1.06; --u: calc(var(--xs) * 1px); }
@media (min-width: 1440px) { .board-stage { --xs: 1.12; } }
@media (min-width: 1680px) { .board-stage { --xs: 1.2; } }
.bscene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(14 * var(--u)); }
.bcard {
  width: 100%; max-width: calc(560 * var(--u)); background: var(--x-bg);
  border: 1px solid var(--x-line); border-radius: calc(16 * var(--u)); overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .95);
}
.bswap { display: grid; max-width: calc(560 * var(--u)); }
.bswap > * { grid-area: 1 / 1; align-self: center; }
.bchip {
  display: flex; align-items: center; gap: calc(12 * var(--u)); max-width: calc(560 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  background: var(--x-bg); border: 1px solid var(--x-line); border-radius: calc(16 * var(--u));
}
.bchip-id { display: flex; flex-direction: column; min-width: 0; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); --lh: calc(20 * var(--u)); }
.btoast { max-width: calc(560 * var(--u)); }
.people { display: flex; align-items: center; gap: calc(16 * var(--u)); max-width: calc(560 * var(--u)); }
.people-label { font-size: calc(15 * var(--u)); color: var(--x-sub); }
.people-avs { display: flex; }
.people-avs .av { margin-right: -8px; box-shadow: 0 0 0 3px var(--bg); }
.av.is-ping { animation: ping 1.4s var(--ease-out); }
@keyframes ping {
  0% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 3px rgba(223, 255, 94, 1); }
  100% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 16px rgba(223, 255, 94, 0); }
}
.xlink { margin-top: calc(10 * var(--u)); border: 1px solid var(--x-line); border-radius: calc(16 * var(--u)); overflow: hidden; }
.xlink-img {
  aspect-ratio: 2.2 / 1; display: grid; place-items: center;
  background: var(--lime); color: var(--on-lime);
  font: 400 calc(30 * var(--u))/1 var(--font); letter-spacing: -.02em;
}
.xlink-src { margin: calc(10 * var(--u)) calc(12 * var(--u)) 0; font-size: calc(13 * var(--u)); color: var(--x-sub); }
.xlink-title { margin: calc(2 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); }
.xquote { margin-top: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--x-line); border-radius: calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); }
.xquote p { margin: 0; }
.x-at { color: var(--x-blue); } /* a mention, in X's blue */
.xquote-head { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(2 * var(--u)); white-space: nowrap; overflow: hidden; }
.av-xs { width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(8 * var(--u)); border-radius: calc(5 * var(--u)); }

/* ---------- 5. close: the notification lab's phone rising into the last screen ---------- */
.end {
  /* At rest the title, the button and the phone share one screen with the footer's first row
     (--foot-peek, the height the one-line footer had): the phone's width is worked out from what
     the screen's height leaves once the nav, a room under it, the title, the button and that row
     are placed. The rest of the footer scrolls in after. */
  --end-room: 40px; --end-t: clamp(48px, min(7vw, 11svh), 112px); --end-th: var(--end-t);
  --end-gap: 34px; --end-mt: clamp(32px, 6svh, 80px); --foot-peek: 88px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(104px, 17vh, 176px) var(--gutter) 0; text-align: center;
}
.end-copy { display: flex; flex-direction: column; align-items: center; gap: var(--end-gap); }
.end-title { margin: 0; font-size: var(--end-t); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.end-404 { min-height: 100vh; min-height: 100svh; justify-content: center; gap: 36px; padding-block: 96px; }
.end-404 .end-title { max-width: 14ch; font-size: clamp(40px, 5.6vw, 88px); line-height: 1.04; text-wrap: balance; }

/* The phone is the lab's phone-top, class names prefixed np- so they cannot meet the story's
   .phone or the .line section; its design, metrics and row animations are the lab's.
   Frame image 1126 x 2318, screen hole at 45,35 size 1036 x 2248 (measured from the render). */
.np-glow {
  position: absolute; z-index: -1; left: 50%; bottom: -30%;
  width: min(1000px, 150vw); aspect-ratio: 1; margin-left: calc(min(1000px, 150vw) / -2);
  background: radial-gradient(closest-side, rgba(223, 255, 94, .09), transparent 70%); pointer-events: none;
}
.np-wrap {
  /* three fifths of the phone stand above the footer; the rest is under the page */
  --npw: max(220px, min(400px, 84vw, calc((100svh - var(--nav-h) - var(--end-room) - var(--end-th) - var(--end-gap) - 54px - var(--end-mt) - 8px - var(--foot-peek)) * 1126 / 2318 / .6)));
  position: relative; width: 100%; height: calc(var(--npw) * 2318 / 1126 * .6 + 8px);
  margin-top: var(--end-mt); padding-top: 8px;
  display: flex; justify-content: center; align-items: flex-start;
  overflow: hidden; perspective: 1600px;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.np-rise { flex: none; width: var(--npw); transform-origin: 50% 100%; }
/* On a landscape screen 768 px wide or more the close is the lab's side-by-side layout: the
   words on the left, the whole phone on the right. At rest the section and the footer's first
   row make exactly one screen, and the phone is as tall as the room between the nav and that
   row allows, up to the lab's 360 px wide. On phones and portrait tablets the phone
   stands three fifths out of the bottom of the page, as above. The same query is in notifs.js. */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .end-phone {
    --np-m: clamp(12px, 2.4svh, 32px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    column-gap: clamp(24px, 4vw, 72px);
    height: calc(100svh - var(--foot-peek)); min-height: 560px; max-width: 1320px; margin: 0 auto;
    padding: var(--nav-h) clamp(16px, 5vw, 64px) 0; text-align: left;
  }
  .end-phone .end-copy { justify-self: end; align-items: flex-start; gap: 30px; }
  .end-phone .end-title { font-size: clamp(40px, 5.2vw, 84px); line-height: 1.04; }
  .end-phone .np-wrap {
    --npw: max(220px, min(360px, 34vw, calc((100svh - var(--foot-peek) - var(--nav-h) - 2 * var(--np-m)) * 1126 / 2318)));
    height: auto; margin: 0; padding: 0; justify-content: flex-start;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
}
.np-phone {
  position: relative; width: 100%; aspect-ratio: 1126 / 2318;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 255, 255, .08));
}
.np-frame { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.np-screen {
  position: absolute; z-index: 1; left: 3.73%; top: 1.38%; width: 92.54%; height: 97.24%;
  border-radius: 14% / 6.6%; overflow: hidden; background: var(--x-bg);
}
/* the screen is laid out at iPhone 17 Pro points (402 x 874) and scaled to the drawn phone */
.np-inner {
  position: absolute; left: 0; top: 0; width: 402px; height: 874px;
  transform-origin: 0 0; transform: scale(var(--k, .9208));
  font-family: var(--x-font); color: var(--x-text); text-align: left; line-height: normal;
}
.np-glass {
  position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 32%, transparent 33%, transparent 100%);
}
.np-status { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 50px; }
.np-time { font-size: 17px; font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.np-icons { display: flex; gap: 6px; align-items: center; margin-right: 4px; }
.np-icons svg { display: block; fill: var(--x-text); stroke: var(--x-text); }
.np-icons .np-cell { width: 19px; height: 12px; stroke: none; }
.np-wifi { width: 17px; height: 12.5px; }
.np-batt { width: 28px; height: 13px; }
.np-batt rect:first-child { fill: none; }
.np-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 2px 16px 10px; }
.np-head b { text-align: center; font-size: 17px; font-weight: 700; }
.np-me { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #111; }
.np-me img { width: 100%; height: 100%; }
.np-gear { width: 22px; height: 22px; justify-self: end; fill: none; stroke: var(--x-text); stroke-width: 1.7; stroke-linejoin: round; }
.np-tabs { display: flex; border-bottom: 1px solid var(--x-line); font-size: 15px; color: var(--x-sub); font-weight: 500; }
.np-tabs span { position: relative; flex: 1; text-align: center; padding: 12px 0 14px; }
.np-tabs .on { color: var(--x-text); font-weight: 700; }
.np-tabs .on::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 30px; height: 4px; margin-left: -15px; border-radius: 2px; background: var(--x-blue); }
.np-list { list-style: none; margin: 0; padding: 0; }
.np-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 16px 14px 12px;
  border-bottom: 1px solid var(--x-line); background: transparent; transition: background-color 2.4s ease;
}
.np-row.fresh { background: rgba(29, 155, 240, .09); transition: none; }
.np-ic { width: 32px; height: 32px; justify-self: end; display: grid; place-items: center; }
.np-ic svg { width: 28px; height: 28px; }
.np-row.like .np-ic svg { fill: var(--x-pink); }
.np-row.follow .np-ic svg { fill: var(--x-blue); }
.np-row.repost .np-ic svg { fill: none; stroke: var(--x-green); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.np-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.np-faces { display: flex; gap: 4px; }
.np-face {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .92); background: hsl(205 38% 34%);
}
.np-face[data-h="330"] { background: hsl(330 38% 34%); }
.np-face[data-h="150"] { background: hsl(150 38% 34%); }
.np-face[data-h="28"] { background: hsl(28 38% 34%); }
.np-face[data-h="265"] { background: hsl(265 38% 34%); }
.np-face[data-h="190"] { background: hsl(190 38% 34%); }
.np-face[data-h="10"] { background: hsl(10 38% 34%); }
.np-face[data-h="95"] { background: hsl(95 38% 34%); }
.np-line { font-size: 15px; line-height: 20px; }
.np-line b { font-weight: 700; }
.np-post {
  font-size: 15px; line-height: 20px; color: var(--x-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.np-post:empty { display: none; }

/* ---------- footer: the boring stuff ---------- */
/* Its first 88 px (--foot-peek) stand under the close at rest: the hairline and the first row,
   the title (and on wide screens the columns' first line). The grid is the board's, 5 to 7, so
   the links line up with the scenes above. */
.foot { border-top: 1px solid var(--line); padding: 28px 0 32px; color: var(--ink-3); font-size: 14px; }
.foot-grid { display: grid; gap: 36px; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.foot-title { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink-1); }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.foot-label { margin: 0 0 14px; font-size: 13px; line-height: 16px; color: var(--ink-3); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-list a { font-size: 15px; line-height: 20px; color: var(--ink-2); text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) { .foot-list a[href]:hover { color: var(--ink-1); } }
.foot-base { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (min-width: 480px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); row-gap: 56px; }
  .foot-base { grid-column: 1 / -1; }
}

/* ---------- touch: a finger gets 44 px or more, Apple's minimum ---------- */
/* The header's pills and the mark stay as drawn; an invisible band makes each 48 px tall. The
   footer's links become 44 px rows, the label keeping its distance to the first one. */
@media (pointer: coarse) {
  .nav .brand, .nav .btn { position: relative; }
  .nav .brand::after, .nav .btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 48px; transform: translateY(-50%); }
  .foot-list { gap: 0; }
  .foot-list a { display: block; padding-block: 12px; }
  .foot-label { margin-bottom: 2px; }
}

/* local A/B switch */
.ab {
  position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; gap: 2px; padding: 4px;
  border-radius: 999px; background: rgba(22, 22, 20, .86); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ab[hidden] { display: none; }
.ab button { font: 400 13px/1 var(--font); color: var(--ink-2); background: transparent; border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.ab button[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .hero-title { white-space: normal; font-size: clamp(40px, 11.5vw, 60px); text-wrap: balance; }
  .end { --end-room: 28px; --end-gap: 26px; --end-mt: 32px; }
  .compose { margin-top: 36px; }
  .ab { display: none; }
}
@media (max-width: 479px) {
  .compose-tools .i:nth-child(n + 5) { display: none; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn { padding: 0 14px; }
  .end { --end-th: calc(var(--end-t) * 2); } /* the closing title takes two lines under 460px */
}
@media (max-width: 899px) {
  .board-sticky { grid-template-columns: 1fr; align-content: start; gap: 18px; padding-top: calc(var(--nav-h) + 12px); }
  .board-title { margin-bottom: 12px; font-size: 32px; font-size: min(32px, 9.6cqi); }
  .camps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .camp { margin: 0; padding: 10px 12px; gap: 10px; border-radius: 14px; }
  .camp h3 { font-size: 17px; }
  .camp p { display: none; }
  .switch { width: 40px; height: 24px; }
  .knob { width: 18px; height: 18px; }
  .camp.is-on .knob { transform: translateX(16px); }
  .board-stage { height: calc(100svh - var(--nav-h) - 230px); min-height: 380px; --xs: 1; }
}

/* ---------- motion: the states the scripts start from ---------- */
.motion .nav, .motion .compose, .motion .hero-title, .motion .hero-sub { opacity: 0; }
.motion[data-frame="card"] .thread { visibility: hidden; }
.motion .thread [data-reveal] { visibility: hidden; }
.motion[data-frame="phone"] #post-text { visibility: hidden; }
.motion .phone { opacity: 0; }
.motion .toast:not(.btoast) { visibility: hidden; opacity: 0; }
.motion .xr-group:not(:has(.xr.is-in)) { display: none; }
.motion .thread .xr:not(.is-in) { display: none; }
.motion .bscene { visibility: hidden; opacity: 0; }
.motion .board [data-at]:not([data-fx]) { visibility: hidden; opacity: 0; }

/* ---------- no motion: every scene finished, in reading order ---------- */
html:not(.motion) .toasts { display: none; }
html:not(.motion) [data-until] { display: none; }
html:not(.motion) .story, html:not(.motion) .line, html:not(.motion) .board { height: auto; }
html:not(.motion) .story-sticky { position: static; height: auto; overflow: visible; }
html:not(.motion) .stage, html:not(.motion) .scene, html:not(.motion) .hero { position: relative; inset: auto; }
html:not(.motion) .hero { min-height: 88vh; }
html:not(.motion) .card-slot { position: relative; left: auto; right: auto; top: auto; margin: 0 auto 120px; }
html:not(.motion) .card-slot .thread { max-height: none; }
html:not(.motion) .card-slot .xr-list { overflow: visible; -webkit-mask-image: none; mask-image: none; }
html:not(.motion) .xr-line { transform: none; }
html:not(.motion) .phone { --ph: min(88vh, 880px); position: relative; left: auto; right: auto; top: auto; margin: 0 auto 120px; }
html:not(.motion) .line-sticky { position: static; height: auto; min-height: 70vh; }
html:not(.motion) .board-sticky { position: static; height: auto; align-items: start; }
html:not(.motion) .board-stage { height: auto; display: grid; gap: 56px; }
html:not(.motion) .bscene { position: static; }