/*
  The landing page, second direction (design/docs/landing.md). A story from the noise in your
  head to a calm page, told with the product's own screens.

  The rules below draw every scene at rest: what the page shows without scripts or with reduced
  motion, each picture at its telling moment. With motion, a chapter (.lp-ch) grows tall and its
  stage sticks while landing.js plays it with the scroll (GSAP sets the starting states). The
  product's screens are drawn on boards measured in board units (--u, the board's box over its
  design size), so a phone or a card is the same picture on every screen. Tokens only, from the
  app's tokens.css, plus the night of the noise chapter.

  Sections: page, top and pill, buttons, hero, chapters and copy, boards, noise, capture (phone),
  review (card), system (bento), projects (road), end and foot, live layout, keyframes.
*/
@property --u { syntax: "<length>"; inherits: true; initial-value: 1px; }
@property --ih { syntax: "<number>"; inherits: true; initial-value: 35; }

@layer components {
  /* ---- page ---- */
  .lp-page { background: var(--bg); }
  .lp {
    --lp-gutter: clamp(1.25rem, 5vw, 3rem);
    --lp-wide: 76rem;
    --lp-night: light-dark(#18191D, #0B0C0E);
    --lp-night-ink: #EDEDF0;
    --lp-night-ink-2: #A9AAB3;
    --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --lp-pill: 4.6rem; /* the room the floating pill takes at the bottom of a phone */
    --lp-paper: 0 1px 1px light-dark(rgb(42 42 49 / 0.06), rgb(0 0 0 / 0.45)), 0 8px 18px -8px light-dark(rgb(42 42 49 / 0.2), rgb(0 0 0 / 0.6)), 0 26px 44px -28px light-dark(rgb(42 42 49 / 0.32), rgb(0 0 0 / 0.85));
    --lp-lift: 0 2px 4px light-dark(rgb(42 42 49 / 0.06), rgb(0 0 0 / 0.5)), 0 40px 80px -32px light-dark(rgb(42 42 49 / 0.45), rgb(0 0 0 / 0.9));
    position: relative;
    overflow-x: clip;
    color: var(--ink);
    /* paper grain: warmth, never in the way. It is the page's own background, painted once with
       the page, not a layer laid over every frame. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

  .lp-mark { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
  .lp-mark__dot { width: 0.95rem; height: 0.95rem; border-radius: 5px; background: var(--accent); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.2); }
  .lp-mark--sm { font-size: 1.1rem; }
  .lp-mark:focus-visible { outline: 2px solid transparent; border-radius: 8px; box-shadow: var(--focus-ring); }

  /* ---- top and pill ---- */
  .lp-top {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--lp-wide);
    margin-inline: auto;
    padding: max(1rem, env(safe-area-inset-top)) var(--lp-gutter) 1rem;
  }
  .lp-top__end { display: flex; align-items: center; gap: 0.35rem; }
  .lp-link { padding: 0.5rem 0.75rem; border-radius: var(--radius-pill); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
  .lp-link:hover { background: var(--surface-2); }
  .lp-link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  /* the language and theme switches are the app's own (ui/lang-switch, ui/theme-switch), in this
     row instead of the page's corner, so they leave with the hero and nothing floats over the story */
  .lp-top .theme-switch { position: static; }
  @media (max-width: 26rem) { .lp-top .lp-link { padding-inline: 0.5rem; } .lp-top .lp-mark { font-size: 1.15rem; } }

  .lp-pill {
    position: fixed;
    z-index: 30;
    inset: auto 0 max(1rem, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(calc(100% - 2 * var(--lp-gutter)), 30rem);
    margin-inline: auto;
    padding: 0.45rem 0.45rem 0.45rem 1rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--surface) 95%, transparent);
    box-shadow: 0 0 0 1px var(--rule), var(--lp-lift);
    opacity: 0;
    visibility: hidden;
    translate: 0 1.5rem;
    transition: opacity 300ms var(--lp-ease), translate 600ms var(--lp-ease), visibility 0s 600ms;
  }
  .lp-pill.is-on { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 300ms var(--lp-ease), translate 600ms var(--lp-ease), visibility 0s, background-color 400ms var(--ease); }
  .lp-pill.is-night { background: color-mix(in oklab, var(--lp-night) 95%, transparent); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), var(--lp-lift); }
  .lp-pill.is-night .lp-mark { color: var(--lp-night-ink); }
  .lp-pill.is-night .lp-btn--primary { background: var(--lp-night-ink); color: var(--lp-night); }
  /* where the story is: one segment per chapter, filled as its scroll plays, so a screen that
     stays put while it plays still shows the scroll moving (landing.js sets --p, 0 to 1) */
  .lp-pill__track { display: flex; flex: 1; gap: 3px; min-width: 2.5rem; max-width: 10rem; }
  .lp-pill__seg { flex: 1; height: 4px; overflow: clip; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--ink) 14%, transparent); }
  .lp-pill__seg > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; scale: var(--p, 0) 1; }
  .lp-pill.is-night .lp-pill__seg { background: rgb(255 255 255 / 0.18); }
  .lp-pill.is-night .lp-pill__seg > i { background: var(--lp-night-ink); }
  @media (min-width: 64rem) { .lp { --lp-pill: 0rem; } .lp-pill { inset: max(1rem, env(safe-area-inset-top)) 0 auto; translate: 0 -1.5rem; } }

  /* ---- buttons ---- */
  .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 2.75rem;
    padding: 0.6em 1.2em;
    border-radius: var(--radius-pill);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--base) var(--ease), translate var(--base) var(--lp-ease);
  }
  .lp-btn .icon { width: 1.1em; height: 1.1em; transition: translate var(--base) var(--lp-ease); }
  .lp-btn--primary { background: var(--ink); color: var(--bg); box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 10px 24px -12px light-dark(rgb(42 42 49 / 0.6), rgb(0 0 0 / 0.9)); }
  .lp-btn--primary:hover { background: var(--accent); color: var(--accent-ink); translate: 0 -1px; }
  .lp-btn--primary:hover .icon { translate: 0.2em 0; }
  .lp-btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
  .lp-btn--ghost:hover { background: var(--surface-2); }
  .lp-btn--ghost:hover .icon { translate: 0 0.15em; }
  .lp-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .lp-btn--sm { min-height: 2.4rem; padding: 0.45em 1em; font-size: 0.92rem; }
  .lp-btn--lg { min-height: 3.2rem; padding-inline: 1.45em; font-size: 1.02rem; }
  .lp-btn--xl { min-height: 3.6rem; padding-inline: 1.7em; font-size: 1.1rem; }

  /* ---- hero ---- */
  .lp-hero { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100svh; padding: 6.5rem var(--lp-gutter) 4.5rem; overflow: clip; }
  .lp-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(1.1rem, 2.4vw, 1.75rem); max-width: 66rem; text-align: center; }
  .lp-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem 0.4rem 0.5rem; border-radius: var(--radius-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--rule); color: var(--ink-2); font-size: 0.88rem; font-weight: 700; }
  .lp-eyebrow::before { content: ""; width: 0.55rem; height: 0.55rem; margin-inline-start: 0.35rem; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
  .lp-hero__title, .lp-end__title { font-family: var(--font-display); font-size: clamp(3.1rem, 1.4rem + 8vw, 9.4rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.055em; text-wrap: balance; }
  .lp-mask { display: inline-block; overflow: clip; overflow-clip-margin: 0.04em; padding-block: 0.02em 0.1em; margin-block: -0.02em -0.1em; vertical-align: top; }
  .lp-word { display: inline-block; }
  .lp-hero__lead { max-width: 38rem; color: var(--ink-2); font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.35rem); line-height: 1.5; text-wrap: pretty; }
  .lp-hero__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

  /* the capture line: the product's resting screen, working */
  .lp-capture { display: grid; gap: 0.85rem; width: min(100%, 36rem); margin-block: 0.25rem 0.5rem; text-align: start; }
  .lp-capture__line { display: flex; align-items: center; gap: 0.5rem; border-bottom: 2px solid var(--rule-strong); transition: border-color var(--base) var(--ease); }
  .lp-capture__line:focus-within { border-color: var(--accent); }
  .lp-capture__input { flex: 1; min-width: 0; padding: 0.5rem 0.1rem; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); font-weight: 500; letter-spacing: -0.01em; outline: none; }
  .lp-capture__input::placeholder { color: var(--ink-3); opacity: 1; }
  .lp-capture__key { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; box-shadow: inset 0 0 0 1px var(--rule-strong), 0 2px 0 var(--rule); color: var(--ink-3); }
  .lp-capture__key .icon { width: 1rem; height: 1rem; }
  .lp-capture__line:focus-within .lp-capture__key { color: var(--accent); }
  .lp-handles { display: flex; justify-content: space-between; gap: 1rem; }
  .lp-hd { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.45em 0.8em; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: 0.92rem; font-weight: 700; }
  .lp-hd .icon { width: 1em; height: 1em; }
  .lp-hd__n { color: var(--accent); font-variant-numeric: tabular-nums; }
  .lp-capture__say { display: grid; justify-items: center; color: var(--ink-3); font-size: 0.9rem; font-weight: 600; }
  .lp-capture__say > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.4rem; transition: opacity var(--base) var(--ease), translate var(--dur-appear) var(--ease-spring); }
  .lp-capture__done { color: var(--success); opacity: 0; translate: 0 0.4rem; visibility: hidden; }
  .lp-capture__done .icon { width: 1.05rem; height: 1.05rem; }
  .lp-capture.is-done .lp-capture__hint { opacity: 0; translate: 0 -0.4rem; }
  .lp-capture.is-done .lp-capture__done { opacity: 1; translate: 0 0; visibility: visible; }
  .lp-fly-note { position: fixed; z-index: 40; left: 0; top: 0; pointer-events: none; }

  /* a note: a sheet of paper */
  .lp-note { display: inline-block; padding: 0.55em 0.95em; border-radius: 12px; background: var(--surface); box-shadow: var(--lp-paper); color: var(--ink); font-size: clamp(0.85rem, 0.78rem + 0.3vw, 1.02rem); font-weight: 650; white-space: nowrap; }

  /* thoughts around the hero: a band above and below on a phone, scattered at the sides on wide screens */
  /* --mx/--my follow the pointer, --drift (0 → 1) the scroll out of the hero (landing.js) */
  .lp-float { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: calc(1 - var(--drift, 0) * 1.3); will-change: opacity; }
  .lp-float__n { position: absolute; will-change: translate; filter: blur(max(0px, calc((0.85 - var(--z, 1)) * 4px))); rotate: var(--r, 0deg); scale: var(--z, 1); translate: calc(var(--mx, 0) * var(--z, 1) * 1px) calc(var(--my, 0) * var(--z, 1) * 1px + var(--drift, 0) * var(--z, 1) * 38svh); opacity: calc(0.35 + var(--z, 1) * 0.6); }
  .lp-float__n--0 { left: 5%; top: 14%; --r: -8deg; --z: 0.9; }
  .lp-float__n--1 { right: 5%; top: 12.5%; --r: 6deg; --z: 0.75; }
  .lp-float__n--2 { left: 36%; top: 10.5%; --r: 3deg; --z: 0.62; }
  .lp-float__n--3 { left: 4%; bottom: 4.5%; --r: 5deg; --z: 0.8; }
  .lp-float__n--4 { right: 5%; bottom: 6%; --r: -6deg; --z: 0.95; }
  .lp-float__n--5 { left: 40%; bottom: 2%; --r: -3deg; --z: 0.7; }
  .lp-float__n--6, .lp-float__n--7, .lp-float__n--8, .lp-float__n--9 { visibility: hidden; }
  @media (min-width: 64rem) {
    .lp-float__n--0 { left: 5%; top: 20%; }
    .lp-float__n--1 { right: 6%; top: 16%; }
    .lp-float__n--2 { left: 14%; top: 66%; }
    .lp-float__n--3 { left: 3%; top: 44%; bottom: auto; }
    .lp-float__n--4 { right: 3%; top: 48%; bottom: auto; }
    .lp-float__n--5 { right: 13%; top: 72%; left: auto; bottom: auto; }
    .lp-float__n--6, .lp-float__n--7, .lp-float__n--8, .lp-float__n--9 { visibility: visible; }
    .lp-float__n--6 { left: 22%; top: 9%; --r: -4deg; --z: 0.6; }
    .lp-float__n--7 { right: 22%; top: 6%; --r: 7deg; --z: 0.55; }
    .lp-float__n--8 { left: 26%; bottom: 7%; --r: 6deg; --z: 0.5; }
    .lp-float__n--9 { right: 27%; bottom: 10%; --r: -7deg; --z: 0.65; }
  }

  /* ---- chapters and their words ---- */
  .lp-ch { position: relative; }
  .lp-stage { position: relative; }
  .lp-stage--split { display: grid; grid-template-rows: auto 1fr; gap: 1.25rem; max-width: var(--lp-wide); margin-inline: auto; padding: clamp(4rem, 9vh, 6rem) var(--lp-gutter) 2rem; }
  @media (min-width: 64rem) {
    .lp-stage--split { grid-template-columns: minmax(19rem, 0.82fr) 1.18fr; grid-template-rows: 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
  }
  .lp-copy { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
  .lp-kicker { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--accent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
  .lp-kicker__n { color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
  .lp-kicker__n::after { content: ""; display: inline-block; width: 1.4rem; height: 1px; margin-inline-start: 0.65rem; vertical-align: middle; background: var(--rule-strong); }
  .lp-kicker--light { color: var(--lp-night-ink-2); }
  .lp-copy__title { font-family: var(--font-display); font-size: clamp(1.95rem, 1.3rem + 2.2vw, 3.25rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
  .lp-steps { display: grid; gap: 0.5rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
  .lp-step { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: baseline; color: var(--ink-2); font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem); line-height: 1.4; }
  .lp-step__n { color: var(--accent); font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

  /* ---- boards: a screen drawn at its design size and scaled to its box ---- */
  .lp-visual { position: relative; container-type: size; min-width: 0; width: min(100%, 32rem); aspect-ratio: var(--ar, 3 / 4); margin-inline: auto; }
  .lp-visual::before { content: ""; position: absolute; inset: 8% -6% 4%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent-soft) 85%, transparent), transparent); }
  .lp-board { z-index: 1; }
  .lp-board {
    --w: 360;
    --h: 360;
    --u: calc(min(100cqw / var(--w), 100cqh / var(--h)));
    position: absolute;
    inset: 0;
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    margin: auto;
    font-size: calc(13 * var(--u));
    line-height: 1.25;
  }
  .lp-board > * { position: absolute; }
  .lp-board .icon { width: 1.15em; height: 1.15em; }
  .lp-roll { display: inline-grid; overflow: clip; vertical-align: bottom; font-variant-numeric: tabular-nums; }
  .lp-roll > span { grid-area: 1 / 1; }
  .lp-roll > span:not(:first-child) { visibility: hidden; }

  /* ---- the noise ---- */
  /* the night is the chapter's own layer under its stage (with motion it covers the whole screen) */
  .lp-noise { isolation: isolate; color: var(--lp-night-ink); }
  .lp-noise .lp-stage { display: grid; place-items: center; min-height: 100svh; overflow: clip; isolation: isolate; }
  .lp-noise__night { position: absolute; inset: 0; z-index: -1; background: var(--lp-night); }
  .lp-noise__field { position: absolute; inset: 0; z-index: -1; }
  .lp-nn {
    position: absolute;
    left: var(--px);
    top: var(--py);
    translate: -50% -50%;
    rotate: var(--r);
    scale: var(--z);
    padding: 0.5em 0.85em;
    border-radius: 11px;
    background: oklch(0.31 0.025 var(--h, 268));
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 14px 30px -14px rgb(0 0 0 / 0.8);
    color: oklch(0.9 0.03 var(--h, 268));
    font-size: clamp(0.78rem, 0.7rem + 0.35vw, 1rem);
    font-weight: 650;
    white-space: nowrap;
    opacity: calc(0.25 + var(--z) * 0.55);
  }
  @media (min-aspect-ratio: 1 / 1) { .lp-nn { left: var(--lx); top: var(--ly); } }
  .lp-nn:nth-child(8n + 1) { --h: 268; } .lp-nn:nth-child(8n + 2) { --h: 35; } .lp-nn:nth-child(8n + 3) { --h: 150; } .lp-nn:nth-child(8n + 4) { --h: 355; }
  .lp-nn:nth-child(8n + 5) { --h: 205; } .lp-nn:nth-child(8n + 6) { --h: 70; } .lp-nn:nth-child(8n + 7) { --h: 305; } .lp-nn:nth-child(8n + 8) { --h: 112; }
  .lp-nn--0 { --px: 22.9%; --py: 79.9%; --lx: 18.6%; --ly: 79.2%; --r: -2.1deg; --z: 0.72; }
  .lp-nn--1 { --px: 69.5%; --py: 28.9%; --lx: 72.7%; --ly: 29.4%; --r: -7.1deg; --z: 0.74; }
  .lp-nn--2 { --px: 49.7%; --py: 45.7%; --lx: 49.6%; --ly: 45.8%; --r: 5.7deg; --z: 0.75; }
  .lp-nn--3 { --px: 61.2%; --py: 74.8%; --lx: 63%; --ly: 74.3%; --r: -2.6deg; --z: 0.96; }
  .lp-nn--4 { --px: 19.9%; --py: 9.4%; --lx: 15.1%; --ly: 10.4%; --r: 0.8deg; --z: 1.09; }
  .lp-nn--5 { --px: 74.8%; --py: 44.2%; --lx: 72.6%; --ly: 8.2%; --r: -0.2deg; --z: 0.83; }
  .lp-nn--6 { --px: 69.4%; --py: 7.2%; --lx: 45.3%; --ly: 68.6%; --r: 2.5deg; --z: 0.73; }
  .lp-nn--7 { --px: 14.9%; --py: 53.6%; --lx: 84.5%; --ly: 10.6%; --r: 8.8deg; --z: 0.81; }
  .lp-nn--8 { --px: 29%; --py: 43.3%; --lx: 9.2%; --ly: 53.5%; --r: -2.5deg; --z: 0.96; }
  .lp-nn--9 { --px: 15.1%; --py: 26.1%; --lx: 87.8%; --ly: 40%; --r: -7.6deg; --z: 0.95; }
  .lp-nn--10 { --px: 75%; --py: 54.9%; --lx: 25.6%; --ly: 43.5%; --r: 7.7deg; --z: 0.79; }
  .lp-nn--11 { --px: 86.4%; --py: 81%; --lx: 31.9%; --ly: 9.8%; --r: 9.8deg; --z: 0.88; }
  .lp-nn--12 { --px: 74.4%; --py: 64.6%; --lx: 79%; --ly: 54.7%; --r: 6deg; --z: 0.85; }
  .lp-nn--13 { --px: 35.4%; --py: 57.5%; --lx: 92.4%; --ly: 80.2%; --r: -2.1deg; --z: 0.75; }
  .lp-nn--14 { --px: 49.2%; --py: 9.5%; --lx: 10%; --ly: 28.4%; --r: -10.8deg; --z: 0.72; }
  .lp-nn--15 { --px: 16.2%; --py: 67.5%; --lx: 49.1%; --ly: 10.5%; --r: 10.8deg; --z: 0.89; }
  .lp-nn--16 { --px: 42.1%; --py: 21.7%; --lx: 91.6%; --ly: 57.8%; --r: -0.8deg; --z: 1.07; }
  .lp-nn--17 { --px: 50.2%; --py: 91.5%; --lx: 50.2%; --ly: 90.5%; --r: 2.3deg; --z: 1.11; }
  .lp-nn--18 { --px: 29.3%; --py: 90.9%; --lx: 37.7%; --ly: 37.1%; --r: -3.1deg; --z: 0.73; }
  .lp-nn--19 { --px: 73.6%; --py: 89.7%; --lx: 81%; --ly: 75.1%; --r: 9.3deg; --z: 0.7; }
  .lp-nn--20 { --px: 38.2%; --py: 32%; --lx: 65.3%; --ly: 53.8%; --r: 6.4deg; --z: 0.92; }
  .lp-nn--21 { --px: 84.8%; --py: 16.6%; --lx: 26.2%; --ly: 62.5%; --r: 10.6deg; --z: 1.09; }
  .lp-nn--22 { --px: 55.8%; --py: 58.3%; --lx: 33.3%; --ly: 80.1%; --r: 3.5deg; --z: 0.64; }
  .lp-nn--23 { --px: 40.5%; --py: 67.3%; --lx: 56.1%; --ly: 26.8%; --r: -10.5deg; --z: 0.86; }
  .lp-nn--24 { --px: 43%; --py: 81.1%; --lx: 73.8%; --ly: 90.7%; --r: 7deg; --z: 0.66; }
  .lp-nn--25 { --px: 62.7%; --py: 17.2%; --lx: 7.7%; --ly: 88%; --r: -1.6deg; --z: 0.66; }
  .lp-nn--26 { --px: 14.1%; --py: 36.1%; --lx: 23.5%; --ly: 24.9%; --r: -4.2deg; --z: 0.62; }
  /* the words sit on a soft dark veil, so the notes behind them never fight the reading */
  .lp-noise__copy { position: relative; display: grid; justify-items: center; gap: 1.25rem; max-width: 56rem; padding: 2rem var(--lp-gutter); text-align: center; }
  .lp-noise__copy::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--lp-night) 55%, color-mix(in oklab, var(--lp-night) 70%, transparent) 75%, transparent); }
  .lp-noise__line { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em; line-height: 1; text-wrap: balance; }
  .lp-noise__line--1 { font-size: clamp(2rem, 1.1rem + 4.2vw, 4.6rem); }
  .lp-noise__line--2, .lp-noise__line--3 { font-size: clamp(1.4rem, 0.9rem + 2.4vw, 2.8rem); color: var(--lp-night-ink-2); }
  .lp-w { display: inline; }
  .lp-noise__copy::before { opacity: var(--veil, 1); }
  /* day comes back at the end of the chapter (landing.js: .is-day) */
  .lp-noise .lp-noise__copy, .lp-noise .lp-kicker--light, .lp-noise__line--3 { transition: color 700ms var(--ease); }
  .lp-noise.is-day .lp-noise__copy { color: var(--ink); }
  .lp-noise.is-day .lp-kicker--light { color: var(--ink-2); }
  .lp-noise.is-day .lp-noise__line--3 { color: var(--ink); }
  .lp-noise__count { position: absolute; left: var(--lp-gutter); top: max(1.25rem, env(safe-area-inset-top)); display: flex; gap: 0.4rem; align-items: baseline; color: var(--lp-night-ink-2); font-size: 0.9rem; font-weight: 700; }
  .lp-noise__count b { color: var(--lp-night-ink); font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .lp-tray {
    position: absolute;
    left: 50%;
    bottom: calc(max(2rem, env(safe-area-inset-bottom) + 1.25rem) + var(--lp-pill));
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--lp-lift);
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 750;
    white-space: nowrap;
  }
  .lp-tray .icon { width: 1.2rem; height: 1.2rem; color: var(--accent); }
  .lp-tray__n { min-width: 1.6em; color: var(--accent); font-family: var(--font-display); font-size: 1.25em; font-variant-numeric: tabular-nums; text-align: end; }

  /* ---- capture: the desk on a phone ---- */
  .lp-cap .lp-visual { --ar: 300 / 620; width: min(100%, 22rem); }
  .lp-board--phone { --w: 300; --h: 620; }
  .lp-phone { inset: 0; padding: calc(9 * var(--u)); border-radius: calc(48 * var(--u)); background: linear-gradient(150deg, #34353b, #121316 60%); box-shadow: 0 0 0 calc(1.5 * var(--u)) #4a4b52 inset, var(--lp-lift); }
  .lp-phone__screen { position: relative; height: 100%; overflow: clip; border-radius: calc(39 * var(--u)); background: var(--bg); color: var(--ink); }
  .lp-phone::after { content: ""; position: absolute; inset: calc(9 * var(--u)); z-index: 3; border-radius: calc(39 * var(--u)); background: linear-gradient(115deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0.04) 28%, transparent 42%); pointer-events: none; }
  .lp-phone::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: calc(-26 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, light-dark(rgb(42 42 49 / 0.28), rgb(0 0 0 / 0.7)), transparent); filter: blur(calc(6 * var(--u))); }
  .lp-kb { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(5 * var(--u)) calc(30 * var(--u)); background: light-dark(#D7D8DE, #2A2B30); translate: 0 105%; }
  .lp-kb__row { display: flex; justify-content: center; gap: calc(4 * var(--u)); }
  .lp-kb i { display: grid; place-items: center; flex: 0 0 calc(23 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(6 * var(--u)); background: light-dark(#FFFFFF, #4A4B52); box-shadow: 0 calc(1 * var(--u)) 0 light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.6)); color: var(--ink); font-size: calc(15 * var(--u)); font-style: normal; text-transform: lowercase; }
  .lp-kb__row--last i { font-size: calc(12 * var(--u)); }
  .lp-kb .lp-kb__wide { flex-basis: calc(52 * var(--u)); background: light-dark(#ADB0B9, #3A3B40); }
  .lp-kb .lp-kb__space { flex: 1 1 auto; }
  .lp-kb .lp-kb__enter { flex-basis: calc(62 * var(--u)); background: var(--accent); color: var(--accent-ink); }
  .lp-kb__enter .icon { width: 1.1em; height: 1.1em; }
  .lp-phone__screen::before { content: ""; position: absolute; left: 50%; top: calc(11 * var(--u)); z-index: 2; translate: -50% 0; width: calc(84 * var(--u)); height: calc(24 * var(--u)); border-radius: var(--radius-pill); background: #0d0e10; }
  .lp-phone__status { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: calc(46 * var(--u)); padding: 0 calc(26 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 750; }
  .lp-phone__icons { display: inline-flex; gap: calc(4 * var(--u)); }
  .lp-phone__icons i { width: calc(14 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); background: currentColor; opacity: 0.85; }
  .lp-phone__icons i:first-child { width: calc(10 * var(--u)); opacity: 0.6; }
  .lp-app { position: absolute; inset: calc(46 * var(--u)) 0 0; overflow: clip; }
  .lp-app__desk { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(14 * var(--u)); padding: 0 calc(20 * var(--u)) calc(40 * var(--u)); }
  .lp-app__line { display: grid; min-height: calc(36 * var(--u)); margin: 0; padding: 0 calc(2 * var(--u)) calc(8 * var(--u)); border-bottom: calc(1.5 * var(--u)) solid var(--accent); font-size: calc(19 * var(--u)); line-height: 1.35; white-space: pre-wrap; }
  .lp-app__line > span { grid-area: 1 / 1; }
  .lp-app__ph { color: var(--ink-3); visibility: hidden; }
  .lp-app__typed i { font-style: normal; }
  .lp-app__typed--two { visibility: hidden; }
  .lp-app__sig { font-weight: 700; }
  .lp-app__sig::before { content: " "; }
  .lp-app__sig--place { color: light-dark(oklch(0.5 0.12 205), oklch(0.84 0.09 205)); }
  .lp-app__sig--day { color: var(--accent); }
  .lp-app__caret { display: inline-block; width: calc(2 * var(--u)); height: 1.1em; margin-inline-start: calc(1 * var(--u)); vertical-align: text-bottom; background: var(--accent); visibility: hidden; }
  .lp-app__chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); min-height: calc(26 * var(--u)); }
  .lp-chip { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: var(--radius-pill); font-size: calc(12.5 * var(--u)); font-weight: 750; }
  .lp-chip .icon { width: 1em; height: 1em; }
  .lp-chip--place { background: light-dark(oklch(0.95 0.03 205), oklch(0.29 0.032 205)); color: light-dark(oklch(0.45 0.12 205), oklch(0.84 0.09 205)); }
  .lp-chip--day { background: var(--accent-soft); color: var(--accent); }
  .lp-app__handles { display: flex; justify-content: space-between; margin-top: calc(8 * var(--u)); }
  .lp-app__hd { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: calc(12.5 * var(--u)); font-weight: 750; }
  .lp-app__hd .icon { width: 1em; height: 1em; }
  .lp-app__hd b { color: var(--accent); }
  .lp-app__drawer {
    inset: 0 0 0 12%;
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    padding: calc(16 * var(--u)) calc(14 * var(--u));
    border-radius: calc(20 * var(--u)) 0 0 calc(20 * var(--u));
    background: var(--surface);
    box-shadow: calc(-12 * var(--u)) 0 calc(30 * var(--u)) calc(-12 * var(--u)) light-dark(rgb(42 42 49 / 0.25), rgb(0 0 0 / 0.8));
    translate: 108% 0;
  }
  .lp-app__dtitle { font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 800; letter-spacing: -0.03em; }
  .lp-app__group { display: flex; align-items: center; gap: calc(5 * var(--u)); color: var(--accent); font-size: calc(11.5 * var(--u)); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
  .lp-app__row { display: grid; grid-template-columns: auto 1fr; gap: calc(9 * var(--u)); align-items: start; padding: calc(9 * var(--u)) calc(4 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--rule); font-size: calc(13.5 * var(--u)); font-weight: 650; }
  .lp-app__row--new { border-radius: calc(10 * var(--u)); background: var(--accent-soft); }
  .lp-app__tick { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(1 * var(--u)); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--rule-strong); }
  .lp-app__rt { display: grid; gap: calc(4 * var(--u)); }
  .lp-app__tags { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); color: var(--ink-2); font-size: calc(11 * var(--u)); font-weight: 700; }
  .lp-app__tags > span { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); }
  .lp-app__tags .icon { width: 1em; height: 1em; }
  /* the typed line lifted off as a note: same size as the line, so the swap does not show */
  .lp-app__fly { position: absolute; z-index: 3; left: 0; top: 0; padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--surface); box-shadow: var(--lp-paper); font-size: calc(19 * var(--u)); line-height: 1.35; white-space: nowrap; visibility: hidden; }

  /* ---- review: the clarify card ---- */
  .lp-rev .lp-visual { --ar: 380 / 560; width: min(100%, 30rem); }
  .lp-board--review { --w: 380; --h: 560; }
  .lp-rhythm { left: 0; right: 0; top: 0; display: flex; justify-content: center; gap: calc(6 * var(--u)); margin: 0; }
  .lp-rhythm__c { position: relative; z-index: 1; padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: var(--radius-pill); color: var(--ink-2); font-size: calc(12.5 * var(--u)); font-weight: 750; white-space: nowrap; }
  .lp-rhythm__c:last-of-type { color: var(--ink); }
  .lp-rhythm__pick { position: absolute; left: 0; top: 0; z-index: 0; width: calc(10 * var(--u)); height: 100%; border-radius: var(--radius-pill); background: var(--surface); box-shadow: 0 0 0 calc(1 * var(--u)) var(--rule), 0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-4 * var(--u)) light-dark(rgb(42 42 49 / 0.25), rgb(0 0 0 / 0.7)); visibility: hidden; }
  .lp-stack { left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(42 * var(--u)); height: calc(70 * var(--u)); }
  /* The inbox as a deck: the first note on top shows its words, the ones under it are paper edges.
     A card's place is --sy (down), --sc (size) and --ta (how much of its words show); landing.js
     moves each card up one place as the top one leaves. */
  .lp-sn {
    position: absolute;
    z-index: var(--z);
    left: calc(56 * var(--u));
    top: calc(var(--sy) * var(--u));
    width: calc(220 * var(--u));
    overflow: hidden;
    scale: var(--sc);
    transform-origin: 50% 0;
    padding: calc(10 * var(--u)) calc(14 * var(--u));
    border-radius: calc(11 * var(--u));
    background: var(--surface);
    box-shadow: var(--lp-paper);
    color: color-mix(in oklab, var(--ink) calc(var(--ta) * 100%), transparent);
    font-size: calc(13.5 * var(--u));
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* at rest the first note is on the card, so the deck starts with the second */
  .lp-sn--0 { --z: 4; --sy: 0; --sc: 1; --ta: 1; opacity: 0; }
  .lp-sn--1 { --z: 3; --sy: 0; --sc: 1; --ta: 1; }
  .lp-sn--2 { --z: 2; --sy: 8; --sc: 0.95; --ta: 0; }
  .lp-sn--3 { --z: 1; --sy: 16; --sc: 0.9; --ta: 0; }
  .lp-card {
    left: calc(14 * var(--u));
    right: calc(14 * var(--u));
    top: calc(122 * var(--u));
    height: calc(352 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--u));
    padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
    border-radius: calc(22 * var(--u));
    background: var(--surface);
    box-shadow: 0 0 0 calc(1 * var(--u)) var(--rule), var(--lp-lift);
  }
  .lp-card__bar { display: flex; gap: calc(4 * var(--u)); margin: 0; }
  .lp-card__bar i { flex: 1; height: calc(4 * var(--u)); border-radius: var(--radius-pill); background: var(--surface-2); }
  .lp-card__bar i:first-child { background: var(--accent); }
  .lp-card__head { display: grid; gap: calc(8 * var(--u)); }
  .lp-card__meta, .lp-card__title { display: grid; margin: 0; }
  .lp-card__meta > span, .lp-card__title > span { grid-area: 1 / 1; }
  .lp-card__meta > span:not(:first-child), .lp-card__title > span:not(:first-child) { visibility: hidden; }
  .lp-card__meta { color: var(--ink-3); font-size: calc(11.5 * var(--u)); font-weight: 700; }
  .lp-card__title { min-height: calc(32 * var(--u)); font-family: var(--font-display); font-size: calc(26 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
  .lp-card__chips { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); margin: 0; }
  .lp-dchip { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--rule-strong); color: var(--ink-3); font-size: calc(11 * var(--u)); font-weight: 700; }
  .lp-dchip kbd, .lp-act kbd { padding: 0 calc(4 * var(--u)); border: 0; border-radius: calc(4 * var(--u)); background: var(--surface-2); box-shadow: none; color: var(--ink-3); font-size: calc(10 * var(--u)); }
  .lp-card__q { display: grid; gap: calc(6 * var(--u)); }
  .lp-card__ask { margin: calc(4 * var(--u)) 0 0; color: var(--ink-2); font-size: calc(11.5 * var(--u)); font-weight: 750; }
  .lp-card__acts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--u)); margin: 0; }
  /* --press (landing.js) fills a decision while it is pressed */
  .lp-act { display: flex; align-items: center; gap: calc(6 * var(--u)); min-width: 0; padding: calc(6.5 * var(--u)) calc(9 * var(--u)); border-radius: calc(10 * var(--u)); background: color-mix(in oklab, var(--accent) calc(var(--press, 0) * 100%), transparent); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--rule); color: color-mix(in oklab, var(--accent-ink) calc(var(--press, 0) * 100%), var(--ink)); font-size: calc(12 * var(--u)); font-weight: 750; white-space: nowrap; }
  .lp-act kbd { margin-inline-start: auto; }
  .lp-act .icon { flex: none; width: 1.05em; height: 1.05em; color: color-mix(in oklab, var(--accent-ink) calc(var(--press, 0) * 100%), var(--ink-2)); }
  /* the day a deferred note gets; landing.js sets it under the pressed button */
  .lp-card__date { position: absolute; left: 0; top: 0; transform-origin: 100% 0; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font-size: calc(14 * var(--u)); font-weight: 800; white-space: nowrap; visibility: hidden; }
  .lp-card__done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(10 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--surface); color: var(--success); font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 800; letter-spacing: -0.03em; visibility: hidden; }
  .lp-card__done .icon { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
  .lp-card__done span { color: var(--ink); }
  .lp-piles { left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); margin: 0; }
  .lp-pile { display: grid; justify-items: start; gap: calc(3 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface); box-shadow: 0 0 0 calc(1 * var(--u)) var(--rule), 0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-12 * var(--u)) light-dark(rgb(42 42 49 / 0.25), rgb(0 0 0 / 0.7)); font-size: calc(11.5 * var(--u)); font-weight: 750; }
  .lp-pile .icon { color: var(--accent); }
  .lp-pile__name { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
  .lp-pile .lp-roll { font-family: var(--font-display); font-size: calc(20 * var(--u)); font-weight: 800; line-height: 1; }
  /* the card's title lifted off as a note, in the title's own type */
  .lp-rv-fly { left: 0; top: 0; padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--surface); box-shadow: var(--lp-paper); font-family: var(--font-display); font-size: calc(26 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; white-space: nowrap; visibility: hidden; }

  /* ---- the whole system: a bento on wide screens, a row to swipe on phones ---- */
  .lp-sys { max-width: var(--lp-wide); margin-inline: auto; padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 10vh, 7rem); }
  .lp-sys__head { display: grid; gap: 1rem; max-width: 52rem; padding-inline: var(--lp-gutter); }
  .lp-sys__title { font-family: var(--font-display); font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
  .lp-sys__lead { max-width: 36rem; color: var(--ink-2); font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); }
  .lp-bento {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 22rem);
    gap: 1rem;
    margin-top: clamp(2rem, 5vh, 3rem);
    padding: 0.5rem var(--lp-gutter) 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lp-gutter);
    scrollbar-width: none;
  }
  .lp-bento::-webkit-scrollbar { display: none; }
  .lp-bento:focus-visible { outline: 2px solid transparent; box-shadow: inset var(--focus-ring); }
  .lp-bc { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.75rem 1.4rem; border-radius: 28px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule), var(--lp-paper); scroll-snap-align: start; }
  .lp-bc__art { position: relative; container-type: size; aspect-ratio: 3 / 2; border-radius: 20px; background: var(--surface-2); overflow: clip; }
  .lp-board--card { --w: 360; --h: 240; }
  .lp-bc__title { margin-top: 0.6rem; padding-inline: 0.6rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em; }
  .lp-bc__body { padding-inline: 0.6rem; color: var(--ink-2); line-height: 1.45; }
  .lp-bento__dots { display: flex; justify-content: center; gap: 0.4rem; margin: 0; }
  .lp-bento__dots i { width: 0.45rem; height: 0.45rem; border-radius: var(--radius-pill); background: var(--rule-strong); transition: width var(--base) var(--lp-ease), background-color var(--base) var(--ease); }
  .lp-bento__dots i.is-on { width: 1.3rem; background: var(--accent); }
  @media (min-width: 64rem) {
    .lp-bento { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-template-areas: "a a a a b b" "c c d d e e"; overflow: visible; padding-inline: var(--lp-gutter); scroll-snap-type: none; }
    .lp-bc--piles { grid-area: a; } .lp-bc--week { grid-area: b; } .lp-bc--words { grid-area: c; } .lp-bc--devices { grid-area: d; } .lp-bc--push { grid-area: e; }
    .lp-bc--piles .lp-bc__art { aspect-ratio: 2.35 / 1; }
    .lp-bento__dots { visibility: hidden; }
  }
  /* piles */
  .lp-bp { top: calc(38 * var(--u)); width: calc(62 * var(--u)); height: calc(150 * var(--u)); }
  .lp-bp--0 { left: calc(14 * var(--u)); } .lp-bp--1 { left: calc(84 * var(--u)); } .lp-bp--2 { left: calc(154 * var(--u)); } .lp-bp--3 { left: calc(224 * var(--u)); } .lp-bp--4 { left: calc(294 * var(--u)); }
  .lp-bp__sheets { position: absolute; inset: 0 0 calc(56 * var(--u)); }
  .lp-bp__sheets i { position: absolute; inset: auto 0 0; height: calc(70 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--surface); box-shadow: 0 0 0 calc(1 * var(--u)) var(--rule), 0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-6 * var(--u)) light-dark(rgb(42 42 49 / 0.3), rgb(0 0 0 / 0.7)); transition: translate 600ms var(--lp-ease), opacity 300ms var(--ease); }
  .lp-bp__sheets i:nth-child(2) { bottom: calc(4 * var(--u)); rotate: -3deg; } .lp-bp__sheets i:nth-child(3) { bottom: calc(8 * var(--u)); rotate: 2deg; } .lp-bp__sheets i:nth-child(4) { bottom: calc(12 * var(--u)); rotate: -1deg; }
  .lp-bp__sheets i:last-child { background: linear-gradient(var(--rule), var(--rule)) calc(9 * var(--u)) calc(14 * var(--u)) / 60% max(1px, calc(3 * var(--u))) no-repeat, linear-gradient(var(--rule), var(--rule)) calc(9 * var(--u)) calc(24 * var(--u)) / 40% max(1px, calc(3 * var(--u))) no-repeat, var(--surface); }
  .lp-bp--1 .lp-bp__sheets i:nth-child(n + 3), .lp-bp--2 .lp-bp__sheets i:nth-child(n + 3) { visibility: hidden; }
  .lp-bp__name { left: 0; right: 0; bottom: calc(26 * var(--u)); overflow: hidden; font-size: calc(11 * var(--u)); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
  .lp-bp__n { left: 0; bottom: 0; font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 800; line-height: 1; }
  .lp-bp > span, .lp-bp > b { position: absolute; }
  /* week */
  .lp-wd { top: calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); width: calc(42 * var(--u)); height: calc(196 * var(--u)); padding: calc(8 * var(--u)) calc(5 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface); }
  .lp-wd--0 { left: calc(10 * var(--u)); } .lp-wd--1 { left: calc(59 * var(--u)); } .lp-wd--2 { left: calc(108 * var(--u)); } .lp-wd--3 { left: calc(157 * var(--u)); } .lp-wd--4 { left: calc(206 * var(--u)); } .lp-wd--5 { left: calc(255 * var(--u)); } .lp-wd--6 { left: calc(304 * var(--u)); }
  .lp-wd--2 { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--accent); }
  .lp-wd b { color: var(--ink-2); font-size: calc(10.5 * var(--u)); font-weight: 800; text-align: center; }
  .lp-wd--2 b { color: var(--accent); }
  .lp-wd i { height: calc(30 * var(--u)); border-radius: calc(7 * var(--u)); background: light-dark(oklch(0.9 0.05 var(--h)), oklch(0.36 0.06 var(--h))); transform-origin: top; transition: scale 520ms var(--ease-spring), opacity 260ms var(--ease); }
  .lp-wd i:nth-of-type(1) { --h: 268; } .lp-wd i:nth-of-type(2) { --h: 35; } .lp-wd i:nth-of-type(3) { --h: 150; }
  .lp-wd--3 i:nth-of-type(n + 2), .lp-wd--5 i:nth-of-type(n + 2), .lp-wd--6 i, .lp-wd--0 i:nth-of-type(3), .lp-wd--4 i:nth-of-type(3) { visibility: hidden; }
  /* your words */
  .lp-bt { top: calc(22 * var(--u)); display: grid; align-content: space-between; width: calc(102 * var(--u)); height: calc(86 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: light-dark(oklch(0.95 0.03 var(--h)), oklch(0.29 0.032 var(--h))); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-12 * var(--u)) light-dark(rgb(42 42 49 / 0.25), rgb(0 0 0 / 0.7)); font-size: calc(13 * var(--u)); font-weight: 750; }
  .lp-bt .icon { width: 1.3em; height: 1.3em; color: light-dark(oklch(0.48 0.12 var(--h)), oklch(0.84 0.09 var(--h))); }
  .lp-bt--0 { left: calc(14 * var(--u)); --h: var(--ih); transition: --ih 900ms var(--ease) 900ms; }
  .lp-bt--1 { left: calc(129 * var(--u)); --h: 268; } .lp-bt--2 { left: calc(244 * var(--u)); --h: 150; }
  .lp-bt__name { display: grid; overflow: clip; }
  .lp-bt__name b { grid-area: 1 / 1; font-weight: 750; white-space: nowrap; transition: translate 520ms var(--lp-ease) 500ms, opacity 260ms var(--ease) 500ms; }
  .lp-places { left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: calc(132 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); }
  .lp-place { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--rule-strong); font-size: calc(12.5 * var(--u)); font-weight: 750; }
  .lp-place .icon { width: 1em; height: 1em; color: var(--accent); }
  .lp-place--3 { box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--accent); color: var(--accent); transition: scale 520ms var(--ease-spring) 1300ms, opacity 260ms var(--ease) 1300ms; }
  /* devices */
  .lp-lap { left: calc(22 * var(--u)); top: calc(28 * var(--u)); width: calc(214 * var(--u)); height: calc(140 * var(--u)); padding: calc(6 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; background: #1c1d21; }
  .lp-lap::after { content: ""; position: absolute; left: calc(-16 * var(--u)); right: calc(-16 * var(--u)); top: 100%; height: calc(10 * var(--u)); border-radius: 0 0 calc(10 * var(--u)) calc(10 * var(--u)); background: linear-gradient(#5b5c63, #34353a); }
  .lp-lap__screen, .lp-mini__screen { position: relative; display: block; height: 100%; overflow: clip; border-radius: calc(6 * var(--u)); background: var(--bg); }
  .lp-lap__line { position: absolute; left: 14%; right: 14%; top: 38%; border-bottom: calc(1.4 * var(--u)) solid var(--rule-strong); }
  .lp-lap__hd { position: absolute; left: 14%; top: 50%; display: inline-flex; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: calc(10.5 * var(--u)); font-weight: 750; }
  .lp-lap__hd b { color: var(--accent); }
  .lp-lap__row { position: absolute; left: 14%; right: 14%; top: 70%; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--accent-soft); font-size: calc(10.5 * var(--u)); font-weight: 750; transition: opacity 260ms var(--ease), translate 520ms var(--ease-spring); }
  .lp-mini { left: calc(262 * var(--u)); top: calc(44 * var(--u)); width: calc(76 * var(--u)); height: calc(156 * var(--u)); padding: calc(4 * var(--u)); border-radius: calc(14 * var(--u)); background: #1c1d21; }
  .lp-mini__screen { border-radius: calc(10 * var(--u)); }
  .lp-mini__typed { position: absolute; left: 12%; top: 38%; font-size: calc(10 * var(--u)); font-weight: 650; white-space: nowrap; }
  .lp-mini__line { position: absolute; left: 12%; right: 12%; top: 50%; border-bottom: calc(1.2 * var(--u)) solid var(--accent); }
  .lp-sync { left: calc(266 * var(--u)); top: calc(102 * var(--u)); padding: calc(5 * var(--u)) calc(9 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--surface); box-shadow: var(--lp-paper); font-size: calc(10.5 * var(--u)); font-weight: 750; white-space: nowrap; visibility: hidden; }
  /* morning push */
  .lp-lock { inset: 0; display: grid; justify-items: center; padding-top: calc(26 * var(--u)); background: linear-gradient(160deg, light-dark(oklch(0.92 0.04 268), oklch(0.32 0.05 268)), light-dark(oklch(0.95 0.03 35), oklch(0.27 0.04 35))); }
  .lp-lock__time { font-family: var(--font-display); font-size: calc(58 * var(--u)); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: light-dark(#2a2a31, #ececee); }
  .lp-push { left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(118 * var(--u)); display: grid; grid-template-columns: auto 1fr auto; gap: calc(10 * var(--u)); align-items: center; padding: calc(11 * var(--u)) calc(13 * var(--u)); border-radius: calc(18 * var(--u)); background: color-mix(in oklab, var(--surface) 86%, transparent); box-shadow: var(--lp-paper); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: translate 700ms var(--lp-ease) 500ms, opacity 300ms var(--ease) 500ms; }
  .lp-push__icon { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--accent); box-shadow: inset 0 calc(-5 * var(--u)) 0 rgb(0 0 0 / 0.18); }
  .lp-push__text { display: grid; gap: calc(2 * var(--u)); font-size: calc(12.5 * var(--u)); }
  .lp-push__text b { font-weight: 800; }
  .lp-push__when { align-self: start; color: var(--ink-3); font-size: calc(10.5 * var(--u)); font-weight: 700; }

  /* ---- projects: the road ---- */
  .lp-proj .lp-visual { --ar: 400 / 460; width: min(100%, 34rem); }
  .lp-board--road { --w: 400; --h: 460; }
  .lp-road__head { left: calc(12 * var(--u)); top: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); margin: 0; font-family: var(--font-display); font-size: calc(19 * var(--u)); letter-spacing: -0.03em; }
  .lp-road__head .icon { color: var(--accent); }
  .lp-road__head b { font-weight: 800; }
  .lp-road__dots { display: inline-flex; gap: calc(3 * var(--u)); margin-inline-start: calc(6 * var(--u)); }
  .lp-road__dots i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: var(--radius-pill); background: var(--rule); }
  .lp-road__next { right: calc(10 * var(--u)); top: calc(12 * var(--u)); }
  .lp-road__svg { inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--rule-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .lp-road__join { stroke: var(--success); }
  .lp-road__trunk--long { visibility: hidden; }
  .lp-flow { top: calc(140 * var(--u)); display: grid; gap: calc(5 * var(--u)); width: calc(108 * var(--u)); margin: 0; font-size: calc(14 * var(--u)); font-weight: 800; color: light-dark(oklch(0.48 0.12 var(--h)), oklch(0.84 0.09 var(--h))); }
  .lp-flow--0 { left: calc(18 * var(--u)); --h: 268; } .lp-flow--1 { left: calc(146 * var(--u)); --h: 35; } .lp-flow--2 { left: calc(274 * var(--u)); --h: 150; }
  .lp-ticks { display: flex; gap: calc(3 * var(--u)); }
  .lp-ticks i { width: calc(16 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--rule); }
  .lp-pstep { top: calc(180 * var(--u)); width: calc(108 * var(--u)); margin: 0; padding: calc(8 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--accent-soft); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--accent), 0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-10 * var(--u)) light-dark(rgb(42 42 49 / 0.3), rgb(0 0 0 / 0.7)); font-size: calc(12.5 * var(--u)); font-weight: 700; line-height: 1.2; }
  .lp-pstep--0 { left: calc(18 * var(--u)); } .lp-pstep--1 { left: calc(146 * var(--u)); } .lp-pstep--2 { left: calc(274 * var(--u)); }
  .lp-pstep__now { display: block; margin-bottom: calc(3 * var(--u)); color: var(--accent); font-size: calc(9.5 * var(--u)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .lp-pstep--held { top: calc(232 * var(--u)); background: transparent; box-shadow: none; outline: calc(1.2 * var(--u)) dashed var(--rule-strong); outline-offset: calc(-1.2 * var(--u)); color: var(--ink-2); }
  .lp-pstep--h0 { left: calc(18 * var(--u)); } .lp-pstep--h1 { left: calc(146 * var(--u)); } .lp-pstep--h2 { left: calc(274 * var(--u)); }
  .lp-psub { left: calc(200 * var(--u)); margin: 0; color: var(--ink-2); font-size: calc(12 * var(--u)); font-weight: 750; }
  .lp-psub--0 { top: calc(292 * var(--u)); } .lp-psub--1 { top: calc(324 * var(--u)); }
  .lp-road__done { left: 50%; top: calc(388 * var(--u)); translate: -50% 0; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); margin: 0; padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); font-size: calc(14 * var(--u)); white-space: nowrap; }
  .lp-road__done b { font-weight: 800; }

  /* ---- the end and the foot ---- */
  .lp-end { padding: clamp(6rem, 16vh, 12rem) var(--lp-gutter) clamp(4rem, 10vh, 7rem); }
  .lp-end__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(1.2rem, 2.6vw, 2rem); max-width: 62rem; margin-inline: auto; text-align: center; }
  .lp-end__lead { max-width: 34rem; color: var(--ink-2); font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.35rem); }
  .lp-end__yours { display: grid; justify-items: center; gap: 0.7rem; margin: 0.5rem 0; opacity: 0; visibility: hidden; translate: 0 0.75rem; transition: opacity 500ms var(--ease), translate 800ms var(--lp-ease), visibility 0s 800ms; }
  .lp-end__yours.is-on { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 500ms var(--ease), translate 800ms var(--lp-ease), visibility 0s; }
  .lp-end__label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-3); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .lp-end__note { rotate: -2deg; font-size: 1.15rem; }
  .lp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; margin: 1rem 0 0; padding: 0; color: var(--ink-2); font-size: 0.95rem; font-weight: 650; list-style: none; }
  .lp-trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
  .lp-trust .icon { width: 1.05rem; height: 1.05rem; color: var(--accent); }
  .lp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; max-width: var(--lp-wide); margin-inline: auto; padding: 2rem var(--lp-gutter) calc(6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); color: var(--ink-2); }
  .lp-foot__domain { color: var(--ink-3); font-weight: 700; }

  /* ---- the bento's cards at rest show their end; with motion they start back and play when seen
     (landing.js: .is-on) ---- */
  .lp-bt--0 { --ih: 150; }
  .lp-bt__old { opacity: 0; translate: 0 -100%; }
  .lp-bc .lp-lap__hd .lp-roll > span:first-child { visibility: hidden; }
  .lp-bc .lp-lap__hd .lp-roll > span:last-child { visibility: visible; }
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .lp-bc .lp-bp__sheets i { opacity: 0; translate: 0 calc(-36 * var(--u)); }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-bp__sheets i { opacity: 1; translate: 0 0; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-bp__sheets i:nth-child(2) { transition-delay: 80ms; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-bp__sheets i:nth-child(3) { transition-delay: 160ms; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-bp__sheets i:nth-child(4) { transition-delay: 240ms; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-wd i { opacity: 0; scale: 1 0.2; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-wd i { opacity: 1; scale: 1; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-wd--1 i { transition-delay: 70ms; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-wd--2 i { transition-delay: 140ms; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-wd--3 i { transition-delay: 210ms; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-wd--4 i { transition-delay: 280ms; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-wd--5 i { transition-delay: 350ms; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-bt--0 { --ih: 35; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-bt--0 { --ih: 150; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-bt__old { opacity: 1; translate: 0 0; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-bt__new { opacity: 0; translate: 0 100%; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-bt__old { opacity: 0; translate: 0 -100%; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-bt__new { opacity: 1; translate: 0 0; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-place--3 { opacity: 0; scale: 0.6; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-place--3 { opacity: 1; scale: 1; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-lap__row { opacity: 0; translate: 0 40%; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-lap__row { opacity: 1; translate: 0 0; transition-delay: 1500ms; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-sync { animation: lp-sync 1.2s var(--lp-ease) 300ms both; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-lap__hd .lp-roll > span { transition: translate 420ms var(--ease-spring) 1500ms, opacity 200ms var(--ease) 1500ms; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-lap__hd .lp-roll > span:first-child { visibility: visible; opacity: 1; translate: 0 0; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-lap__hd .lp-roll > span:last-child { opacity: 0; translate: 0 100%; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-lap__hd .lp-roll > span:first-child { opacity: 0; translate: 0 -100%; }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-lap__hd .lp-roll > span:last-child { opacity: 1; translate: 0 0; }
    :root:not([data-motion="reduce"]) .lp-bc .lp-push { opacity: 0; translate: 0 calc(-60 * var(--u)); }
    :root:not([data-motion="reduce"]) .lp-bc.is-on .lp-push { opacity: 1; translate: 0 0; }
  }
  @keyframes lp-sync {
    0% { visibility: visible; opacity: 0; translate: 0 0; scale: 0.9; }
    15% { opacity: 1; translate: 0 calc(-12 * var(--u)); scale: 1; }
    80% { opacity: 1; scale: 0.8; }
    100% { visibility: hidden; opacity: 0; translate: calc(-205 * var(--u)) calc(20 * var(--u)); scale: 0.5; }
  }

  /* ---- live: chapters grow tall and their stages stick while the scroll plays them ---- */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    :root:not([data-motion="reduce"]) .lp-ch { height: var(--len, 300svh); }
    /* about 30svh of scroll per second of a chapter's timeline, the same pace everywhere */
    :root:not([data-motion="reduce"]) .lp-noise { --len: 300svh; }
    :root:not([data-motion="reduce"]) .lp-cap { --len: 300svh; }
    :root:not([data-motion="reduce"]) .lp-rev { --len: 380svh; }
    :root:not([data-motion="reduce"]) .lp-proj { --len: 300svh; }
    /* night falls over the whole screen as the chapter comes, never as a dark box rising from below */
    :root:not([data-motion="reduce"]) .lp-noise__night { position: fixed; pointer-events: none; visibility: hidden; }
    /* the notes come out of the dark one by one (landing.js), never all at once */
    :root:not([data-motion="reduce"]) .lp-nn { opacity: 0; }
    :root:not([data-motion="reduce"]) .lp-ch > .lp-stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: clip; }
    :root:not([data-motion="reduce"]) .lp-stage--split { grid-template-rows: auto minmax(0, 1fr); padding-block: max(4.25rem, calc(env(safe-area-inset-top) + 3.5rem)) calc(1rem + var(--lp-pill)); }
    :root:not([data-motion="reduce"]) .lp-ch .lp-visual { width: 100%; height: 100%; aspect-ratio: auto; }
    /* one step speaks at a time on a phone; on a wide screen all are listed and the one playing is bright */
    :root:not([data-motion="reduce"]) .lp-ch .lp-steps { grid-template-areas: "s"; }
    :root:not([data-motion="reduce"]) .lp-ch .lp-step { grid-area: s; opacity: 0; translate: 0 0.4rem; transition: opacity 300ms var(--ease), translate 500ms var(--lp-ease); }
    :root:not([data-motion="reduce"]) .lp-ch .lp-step.is-on { opacity: 1; translate: 0 0; }
    :root:not([data-motion="reduce"]) .lp-noise__copy { grid-template-areas: "kicker" "line"; }
    :root:not([data-motion="reduce"]) .lp-noise__line { grid-area: line; }
    /* the check-in starts with every note in the deck */
    :root:not([data-motion="reduce"]) .lp-sn--1 { --sy: 8; --sc: 0.95; --ta: 0; }
    :root:not([data-motion="reduce"]) .lp-sn--2 { --sy: 16; --sc: 0.9; }
    :root:not([data-motion="reduce"]) .lp-sn--3 { --sy: 24; --sc: 0.85; }
  }
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
    :root:not([data-motion="reduce"]) .lp-stage--split { grid-template-rows: 1fr; padding-block: 5.5rem 2.5rem; }
    :root:not([data-motion="reduce"]) .lp-ch .lp-visual { height: min(100%, 46rem); }
    :root:not([data-motion="reduce"]) .lp-ch .lp-steps { grid-template-areas: none; gap: 1.1rem; }
    :root:not([data-motion="reduce"]) .lp-ch .lp-step { grid-area: auto; opacity: 0.32; translate: 0 0; }
    :root:not([data-motion="reduce"]) .lp-ch .lp-step.is-on { opacity: 1; }
    :root:not([data-motion="reduce"]) .lp-ch .lp-step.is-on .lp-step__n { color: var(--accent); }
  }
  @media (scripting: none) { .lp-pill { display: none; } }
}