/* Bragi landing page, v2 (2026-09-28). One dark page, like X's "Lights out".
   Our voice is Poppins, the app's face, 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. */

/* Poppins (Indian Type Foundry, OFL 1.1), the same files and faces as the app
   (bragi/app/src/styles.css): four weights, Latin and Latin Extended, each fetched
   only when a page uses it. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins/poppins-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins/poppins-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins/poppins-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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: 'Poppins', 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. */
/* On a touch screen (js/app.js) the scene transitions keep their fade and slide but not their
   blur, which is what a phone struggles to paint while the page moves. Only the blur the scripts
   animate (an inline filter) is left out; the page's own shadows stay. */
html.lite [style*="filter"] { filter: none !important; }
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); } }
/* Sign up on the lime close: the colours swapped, ink pill with lime words */
.btn-ink { background: var(--on-lime); color: var(--lime); }
@media (hover: hover) { .btn-ink:hover { background: #26261F; } }
.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.scrolled.on-lime { background: var(--bg); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* The pages (2026-10-03; Home first since 2026-11-03): Home, Tools and Plans sit centred between the mark and the pills, quiet
   ink-2 words with the current page in ink-1; a hover lays a faint pill under the word. Under 860 px
   they move into a sheet behind a two-line Menu button (js/nav.js). */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav > .brand { justify-self: start; }
.nav > .nav-actions { justify-self: end; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative; padding: 8px 14px; border-radius: 999px;
  font-size: 15px; line-height: 20px; color: var(--ink-2); text-decoration: none;
  transition: color 200ms ease, background-color 200ms ease;
}
.nav-links a[aria-current="page"] { color: var(--ink-1); }
@media (hover: hover) { .nav-links a:hover { color: var(--ink-1); background: rgba(244, 244, 239, .06); } }
.nav-menu {
  display: none; position: relative; width: 40px; height: 40px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(244, 244, 239, .24); background: transparent; color: var(--ink-1); cursor: pointer;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.nav-menu:active { transform: scale(.97); }
.nav-menu span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform 260ms var(--ease-out);
}
.nav-menu span:first-child { top: 15px; }
.nav-menu span:last-child { top: 22px; }
.nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-sheet {
  position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: -1;
  display: grid; align-content: start; gap: 4px;
  height: calc(100svh - var(--nav-h)); padding: 20px var(--gutter) 40px;
  background: rgba(10, 10, 9, .92); -webkit-backdrop-filter: saturate(150%) blur(24px); backdrop-filter: saturate(150%) blur(24px);
  border-top: 1px solid var(--line);
}
.nav-sheet[hidden] { display: none; }
.nav-sheet a { padding: 10px 0; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink-2); text-decoration: none; }
.nav-sheet a[aria-current="page"] { color: var(--ink-1); }
html.nav-open .nav { background: rgba(10, 10, 9, .92); border-color: var(--line); }
@media (max-width: 859px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-menu { display: inline-block; }
}
@media (pointer: coarse) { .nav-menu::after { content: ''; position: absolute; inset: -4px; } }
.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: inherit; } /* inherit, not visible: a liked heart inside the hidden thread stays hidden until the thread shows */
.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; }

/* ---------- 2. the story ---------- */
.story { position: relative; height: 360vh; } /* progress map in story.js */
/* The story starts half a screen into the line's last screen, so the composer rises in as the
   line leaves instead of after an empty screen; the story only plays once it is pinned. */
.motion .story { margin-top: -50vh; margin-top: -50svh; }
.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;
}

.compose {
  position: relative; width: min(calc(600 * var(--u)), 100%);
  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(17 * var(--u)); line-height: calc(24 * var(--u));
}
.compose-text { white-space: pre-wrap; }
.caret {
  display: inline-block; width: 2px; height: calc(21 * 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 (js/line.js): a hairline with a short lime stroke
   running down it, then a rest. Shown at the very top of the page once the words are in. */
.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%; }

/* ---------- 1. 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; }
/* A word that rises through a blur is painted as its own layer, and Safari clips that layer to the
   word's box; at this line height the box stops short of the descenders (g, y), so it reaches
   under them without moving the line. */
.line-title .w:not(.w-grow), .line-title .w-t { padding-bottom: .2em; margin-bottom: -.2em; }
.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; }
}
/* The line under the title sits low on the first screen, above the scroll cue, away from the title. */
.line-sub {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(84px, 13vh, 140px);
  margin: 0; font-size: clamp(18px, 1.6vw, 24px); color: var(--ink-2); text-wrap: balance;
}

/* ---------- 3. the switchboard ---------- */
/* Every tool wears the logo's lime: its dot in the list and the tint of its row while it plays.
   No glow behind the posts (owner, 2026-11-03). */
.board {
  --t-content: var(--lime); --t-brand: var(--lime); --t-leads: var(--lime); --t-studio: var(--lime);
  --board-bg: var(--bg); --sw-off: #2B2C28; --dots: rgba(244, 244, 239, .07);
  --card-shadow: 0 34px 90px -34px rgba(0, 0, 0, .95);
  --code-bg: rgba(223, 255, 94, .14); --code-ink: var(--lime);
  position: relative; height: 260vh; background: var(--board-bg);
  overflow-x: clip; /* the fanned stack never widens the page (clip keeps the sticky working) */
}
.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;
}
/* The faint dot lattice of the app, fading toward the edges. */
.board-sticky::before {
  content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: radial-gradient(var(--dots) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 62% 55%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 62% 55%, #000 30%, transparent 75%);
}
/* One sentence a line: the size is capped by the column's width (a sentence is about 10 em wide),
   so "Pick what you need." 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; gap: 16px;
  margin: 0 -20px; padding: 16px 20px; border-radius: 20px; opacity: .4;
  transition: opacity 500ms var(--ease-out), background-color 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.camp > div { flex: 1; min-width: 0; }
.camp.is-on { opacity: .7; }
.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: 42ch; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: var(--sw-off); 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(720px, calc(100svh - var(--nav-h) - 80px)); --xs: 1.14; --u: calc(var(--xs) * 1px);
}
@media (min-width: 1440px) { .board-stage { --xs: 1.2; } }
@media (min-width: 1680px) { .board-stage { --xs: 1.28; } }
.bscene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* The stack: a tool's three X cards, the post, Your answer and the result, arriving together and
   standing straight in one column, square to the page like the list beside them. They keep that
   order: a pointer moves nothing, and no card is dimmed (owner, 2026-11-03). */
.bstack {
  display: flex; flex-direction: column; gap: calc(12 * var(--u)); width: 100%; max-width: calc(500 * var(--u));
}
.bpost {
  position: relative; width: 100%;
  background: var(--x-bg); border: 1px solid var(--x-line); border-radius: calc(18 * var(--u));
  box-shadow: var(--card-shadow); overflow: hidden;
}
/* What You wrote wears a thin lime edge, so the eye finds You in every stack. */
.bpost-you { border-color: var(--lime); }
.bpost .xr { padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.bpost.toast { border-radius: calc(18 * var(--u)); }
.av-me { background: var(--lime); color: var(--on-lime); font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: .02em; }
.x-code { padding: 0 calc(5 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--code-bg); color: var(--code-ink); font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.bpost .xlink-img { aspect-ratio: 4 / 1; font-size: calc(24 * var(--u)); }
.bpost .xlink-src { margin-bottom: calc(10 * var(--u)); }
/* Studio's inputs: an idea, a link and a file, rows of one card. */
.sin-list { list-style: none; margin: 0; padding: calc(6 * var(--u)) 0; }
.sin { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); }
.sin + .sin { border-top: 1px solid var(--x-line); }
.sin-ic { flex: none; display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(11 * var(--u)); background: rgba(231, 233, 234, .1); color: var(--x-text); }
.sin-ic .i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.sin-id { display: flex; flex-direction: column; min-width: 0; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); }
.sin-id .x-sub { font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }
.sin-id b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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)); }

/* ---------- 4. used by: the audiences, one dot more each size up, beside the Sphere ---------- */
.used {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center;
  gap: clamp(40px, 6vw, 112px); max-width: 1320px; margin: 0 auto;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
}
.used-title { margin: 0 0 clamp(20px, 3vh, 36px); font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.used-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2px, .6vh, 10px); }
.used-row { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.used-name { display: block; font-size: clamp(44px, 5.6vw, 88px); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; }
.used-dots { --d: clamp(9px, .8vw, 12px); --g: clamp(6px, .6vw, 9px); display: flex; gap: var(--g); padding-top: .2em; }
.used-dots i { display: block; width: var(--d); aspect-ratio: 1; border-radius: 50%; background: var(--lime); }
/* three dots stand as a triangle (rows set apart so the sides are equal), four as a rhombus */
.used-dots-tri { display: grid; grid-template-columns: repeat(2, var(--d)); column-gap: var(--g); row-gap: calc((var(--d) + var(--g)) * .866 - var(--d)); }
.used-dots-tri i:first-child { grid-column: 1 / -1; justify-self: center; }
.used-dots-rhomb { --g: clamp(3px, .3vw, 5px); display: grid; grid-template: repeat(3, var(--d)) / repeat(3, var(--d)); gap: var(--g); }
.used-dots-rhomb i:nth-child(1) { grid-area: 1 / 2; }
.used-dots-rhomb i:nth-child(2) { grid-area: 2 / 1; }
.used-dots-rhomb i:nth-child(3) { grid-area: 2 / 3; }
.used-dots-rhomb i:nth-child(4) { grid-area: 3 / 2; }
.used-film {
  justify-self: end; width: min(100%, calc((100svh - var(--nav-h) - 64px) * .5625));
  aspect-ratio: 9 / 16; overflow: hidden; border-radius: 28px; background: #10100E;
  box-shadow: 0 0 0 1px rgba(244, 244, 239, .06), 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.used-video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.used-video::-webkit-media-controls-start-playback-button,
.used-video::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
@media (max-width: 899px) {
  .used { grid-template-columns: 1fr; min-height: 0; gap: 40px; padding-block: 88px 104px; }
  .used-film { justify-self: center; width: min(100%, 420px); border-radius: 22px; }
}
@media (max-width: 479px) {
  .used-name { font-size: 40px; }
  .used-dots { --d: 8px; }
}

/* ---------- 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;
}
/* The close stands out in the logo's lime, full width even where the section itself is capped
   at 1320 px (the shadow paints the sides, the clip keeps it off the nav and footer). */
.end-phone {
  background: var(--lime); color: var(--on-lime);
  box-shadow: 0 0 0 100vmax var(--lime); clip-path: inset(0 -100vmax);
}
.end-phone .np-glow { display: none; }
.end-phone :focus-visible { outline-color: var(--on-lime); }
/* on lime the dark shadow reads as mud, and the stacked layout's clipped wrap would show its edge */
.end-phone .np-phone { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .end-phone .np-phone { filter: drop-shadow(0 30px 40px rgba(10, 10, 9, .22)); }
}
.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; overflow-wrap: anywhere; 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) {
  .end { --end-room: 28px; --end-gap: 26px; --end-mt: 32px; }
  .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 { position: relative; margin-bottom: 30px; 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: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* The active tool's note sits under the grid, one at a time. */
  .camp p {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px); margin: 0; max-width: none;
    font-size: 14px; line-height: 20px; opacity: 0; transition: opacity 400ms var(--ease-out);
  }
  .camp.is-active p { opacity: 1; }
  .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) - 250px); min-height: 400px; --xs: .8; }
  .bstack { gap: calc(10 * var(--u)); }
}

/* ---------- motion: the states the scripts start from ---------- */
.motion .nav, .motion .line-title .w:not(.w-grow), .motion .line-title .w-t, .motion .line-sub, .motion .hl { opacity: 0; }
/* Until js/line.js knows whether "grow" becomes grass, it is a plain word: no marker, page ink. */
.motion .w-t { color: var(--ink-1); }
/* A slow first load: the first screen at rest while the scripts are on their way (js/boot.js). */
.motion.wait .nav, .motion.wait .line-title .w:not(.w-grow), .motion.wait .line-title .w-t { opacity: 1; transition: opacity 600ms var(--ease-out); }
.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(.bpost) { 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; }
.motion .used-title, .motion .used-name, .motion .used-film { opacity: 0; }
.motion .used-dots i { transform: scale(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: 60vh; }
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) .line-sub { position: static; margin-top: 36px; }
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; }
@media (max-width: 899px) {
  html:not(.motion) .camps { grid-template-columns: 1fr; margin-bottom: 0; }
  html:not(.motion) .camp { display: flex; }
  html:not(.motion) .camp p { position: static; opacity: 1; margin-top: 2px; }
}