/* landing.css — the lord-the-ring landing (docs/index.md → overrides/home.html). Loaded only there.
   Base layout carried over from ring.css; the cinematic stages follow below. */
/* ---- landing (docs/index.md, template home.html) ---- */
.landing { --ease: cubic-bezier(.2,.7,.2,1); color: var(--ink-3); overflow-x: clip; }
.landing section { max-width: 72rem; margin: 0 auto; padding: clamp(3rem, 8vh, 6rem) 1.25rem; box-sizing: border-box; }
.landing h1, .landing h2 { letter-spacing: -.04em; line-height: 1.02; font-weight: 700; margin: 0 0 1rem; text-wrap: balance; }
.l-h1 { font-size: clamp(2.8rem, 7.5vw, 6rem); }
.landing h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
.landing p { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.45; color: var(--ink-2); margin: 0 0 1rem; max-width: 36ch; }
.landing code { font-family: var(--md-code-font-family); font-size: .85em; background: var(--ink-0); border: var(--hairline); border-radius: 6px; padding: .1em .4em; color: var(--ink-3); }
.l-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; min-height: min(80vh, 44rem); }
.l-hero > * { min-width: 0; }
.l-kicker { font-family: var(--md-code-font-family); font-size: .8rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; }
.l-btn { display: inline-block; padding: .8em 1.4em; border-radius: 999px; border: 1.5px solid var(--ink-3); color: var(--ink-3); font-weight: 600; text-decoration: none; margin: 0 .5rem .5rem 0; transition: transform .25s var(--ease), background .25s, border-color .25s; }
.l-btn:hover { transform: translateY(-1px); color: var(--ink-3); }
.l-btn--primary { background: var(--ink-3); color: var(--paper); }
.l-btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.l-fine { font-size: .9rem !important; max-width: none !important; }
.l-fine code { display: block; max-width: 100%; overflow-wrap: anywhere; box-sizing: border-box; padding: .55em .9em; margin-top: .5rem; border-radius: 10px; font-size: .78rem; }
.l-hero .l-copy > * { opacity: 0; transform: translateY(.35em); animation: l-rise .5s var(--ease) forwards; }
.l-hero .l-copy > *:nth-child(2) { animation-delay: .08s; } .l-hero .l-copy > *:nth-child(3) { animation-delay: .16s; }
.l-hero .l-copy > *:nth-child(4) { animation-delay: .24s; } .l-hero .l-copy > *:nth-child(5) { animation-delay: .32s; }
@keyframes l-rise { to { opacity: 1; transform: none; } }
/* the ring: real photo cut-out (docs/assets/ring-trio.webp, from the box art) */
.l-photo { margin: 0; text-align: center; }
.l-photo img { width: min(100%, 34rem); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.28)) saturate(.92); animation: l-rise .7s var(--ease) both; }
[data-md-color-scheme="slate"] .l-photo img { filter: drop-shadow(0 30px 50px rgba(0,0,0,.7)) brightness(.96); }
.l-thesis { font-size: 1.15rem !important; }
.l-proof { font-size: .82rem !important; color: var(--ink-2); border-top: var(--hairline); padding-top: .7rem; margin-top: 1rem !important; }
.l-proof code { font-size: .74rem; }
.l-arch h2 { text-align: center; }
.l-arch .mermaid { display: flex; justify-content: center; background: var(--ink-0); border: var(--hairline); border-radius: 16px; padding: 1.25rem; margin: 0 auto; overflow: auto; }
.l-arch .mermaid svg { max-width: 100%; }
.l-arch pre.mermaid { font: inherit; white-space: pre; color: var(--ink-2); }
.l-arch .l-mermaid { font-size: .8rem; line-height: 1.3; }
.l-arch .l-caption { max-width: 60ch !important; margin-left: auto !important; margin-right: auto !important; }
.l-footer { border-top: var(--hairline); padding-top: 2rem; }
.l-split pre code { background: transparent; padding: 0; font-size: inherit; }
.l-caption { font-size: .85rem !important; text-align: center; margin: 1.25rem auto 0; max-width: 40ch !important; }
/* pillars */
.l-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.l-pillar { border: var(--hairline); border-radius: 16px; padding: 1.6rem 1.5rem; background: var(--ink-0); }
.l-pillar h3 { margin: 0 0 .5rem; font-size: 1.35rem; letter-spacing: -.02em; font-weight: 650; }
.l-pillar p { font-size: 1rem; max-width: none; }
.l-pillar .l-cmd { display: block; overflow-wrap: anywhere; margin-top: .75rem; font-size: .78rem; }
/* facts */
.landing section.l-strip { padding-top: 0; }
.l-facts--strip { margin-top: 0; }
.l-hero { min-height: min(70vh, 40rem); }
.l-door, .l-door:hover { color: inherit; text-decoration: none; display: block; }
.l-door:hover { border-color: var(--accent); transform: translateY(-2px); }
.l-door h3 { color: var(--ink-3); }
.l-pillar { transition: transform .25s var(--ease), border-color .25s; }
.l-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.l-fact { border-top: 2px solid var(--ink-3); padding-top: .75rem; }
.l-fact b { display: block; font-size: 1.6rem; letter-spacing: -.03em; font-family: var(--md-code-font-family); }
.l-fact span { font-size: .85rem; color: var(--ink-2); }
.l-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.l-split pre { margin: 0; font-size: .78rem; line-height: 1.5; background: var(--ink-0); border: var(--hairline); border-radius: 14px; padding: 1.25rem; overflow: auto; }
.l-cta--center { text-align: center; max-width: none !important; margin-top: 1.5rem; }
.l-family { text-align: center; font-size: .9rem !important; max-width: none !important; color: var(--ink-2); }
.l-family a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--ink-1); margin: 0 .3em; }
@media (max-width: 60em) {
  .l-hero, .l-split { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 2rem; }
  .l-pillars { grid-template-columns: minmax(0, 1fr); } .l-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-photo img { width: min(88vw, 22rem); }
}


/* =====================================================================================================
   Cinematic stages. Contract: JS writes --p ∈ [0,1] on each [data-stage] (and --sy on <html> for the hero);
   CSS animates transform / opacity / filter / text-shadow only. Without JS (.l-js absent) every stage is
   fully revealed; prefers-reduced-motion unpins the stages and shows the final picture.
   ===================================================================================================== */
.landing { --ember: #ffcf8a; --ember-hot: #ff8a2a; --ember-glow: rgba(255, 140, 42, .55); }

/* ---- hero: word rise + floating ring + soft parallax ---- */
.l-h1 .l-w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(1.5deg); filter: blur(6px);
  animation: l-word .9s var(--ease) forwards; }
.l-h1 .l-w:nth-child(2) { animation-delay: .07s; } .l-h1 .l-w:nth-child(3) { animation-delay: .14s; }
.l-h1 .l-w:nth-child(4) { animation-delay: .21s; } .l-h1 .l-w:nth-child(5) { animation-delay: .34s; }
.l-w--accent { color: var(--accent-ink); }
@keyframes l-word { to { opacity: 1; transform: none; filter: none; } }
.l-hero .l-copy > * { animation-duration: .7s; }
.l-hero .l-copy > .l-h1 { opacity: 1; transform: none; animation: none; }
.l-btn--ghost { border-color: transparent; background: var(--ink-0); }
.l-ringfig { margin: 0; position: relative; }
.l-ringwrap { position: relative; margin: 0 auto; width: min(100%, 36rem); aspect-ratio: 1145 / 951;
  /* hand-off: the hero still fades as the turn stage (whose frame 0 is this exact view) scrolls in */
  opacity: clamp(0, calc(1.15 - var(--sy, 0) * 1.5), 1); }
.l-ringwrap::before { content: ""; position: absolute; inset: 10% 6% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 10%, transparent), transparent 75%); filter: blur(34px); z-index: 0; }
.l-ring { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1;
  transform: translateY(calc(var(--sy, 0) * 6vh)) scale(calc(1 - var(--sy, 0) * .06)); will-change: transform;
  animation: l-float 7s ease-in-out infinite alternate; transition: opacity .45s var(--ease); }
.l-ring--silver { opacity: 0; pointer-events: none; }
[data-ring="silver"] .l-ring--silver { opacity: 1; } [data-ring="silver"] .l-ring--black { opacity: 0; }
@keyframes l-float { from { margin-top: 0; } to { margin-top: -1.2rem; } }
.l-ringpick { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: center; max-width: 44ch !important; }
.l-pick { display: inline-flex; gap: .5rem; }
.l-swatch { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px var(--ink-1); transition: transform .2s var(--ease), border-color .2s; }
.l-swatch:hover { transform: scale(1.12); } .l-swatch[aria-pressed="true"] { border-color: var(--accent); }
.l-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.l-swatch--black { background: linear-gradient(145deg, #4a4a4a, #111); } .l-swatch--silver { background: linear-gradient(145deg, #fafafa, #9a9a9a); }

/* ---- pinned stage scaffold ---- */
.landing section.l-stage { max-width: none; padding: 0; margin: 0; }
.l-stage { position: relative; height: 320vh; height: 320dvh; color: #f4efe6; background: #090909; }
.l-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(.8rem, 2vh, 1.6rem); padding: 4rem 1.25rem 2rem; box-sizing: border-box; overflow: hidden;
  background:
    radial-gradient(60% 40% at 50% 62%, rgba(255, 120, 40, calc(.10 + var(--p, 1) * .10)), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, #1a120c, transparent 70%), #090909; }
.l-stage-kicker { font-family: var(--md-code-font-family); font-size: .75rem !important; letter-spacing: .14em; text-transform: uppercase;
  color: #b8a48a; margin: 0 !important; max-width: none !important; text-align: center; opacity: clamp(0, calc(var(--p, 1) * 8), 1); }
.l-insc-h { color: #fbf7f0 !important; font-size: clamp(1.9rem, 4.6vw, 3.6rem) !important; margin: 0 !important; text-align: center;
  opacity: clamp(0, calc(var(--p, 1) * 6), 1); transform: translateY(calc((1 - clamp(0, calc(var(--p, 1) * 6), 1)) * .4em)); }
.l-stage-foot { margin: 0 !important; font-size: .9rem !important; max-width: none !important; opacity: clamp(0, calc((var(--p, 1) - .78) * 6), 1); }
.l-stage-foot a { color: #e9dcc6; margin: 0 .6rem; text-decoration: none; border-bottom: 1px solid rgba(233, 220, 198, .35); }
.l-stage-foot a:hover { color: #fff; border-color: #fff; }

/* ---- the band: a strip of brushed metal that slides under the etching as you scroll ---- */
.l-band { --t0: clamp(0, calc(var(--p, 1) * 5), 1);
  position: relative; width: min(100%, 64rem); height: clamp(7rem, 22vh, 12rem); border-radius: 1.2rem; overflow: hidden;
  isolation: isolate; transform: perspective(1400px) rotateX(calc(8deg - var(--p, 1) * 6deg)) translateY(calc((1 - var(--t0)) * 2rem));
  opacity: var(--t0); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.l-band__metal { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #2c2c2c 0%, #101010 18%, #1c1c1c 45%, #0c0c0c 60%, #262626 88%, #0a0a0a 100%); }
.l-band__metal::before { content: ""; position: absolute; inset: 0; width: 300%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px, rgba(255, 255, 255, .02) 7px 8px, transparent 8px 23px);
  transform: translateX(calc(var(--p, 1) * -50%)); will-change: transform; }
.l-band__metal::after { content: ""; position: absolute; inset: 0; width: 300%;
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, .06) 34px 35px, transparent 35px 60px);
  transform: translateX(calc(var(--p, 1) * -33%)); will-change: transform; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.l-band__edge { position: absolute; left: 0; right: 0; height: 14%; z-index: 3; pointer-events: none; }
.l-band__edge--top { top: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent); }
.l-band__edge--bottom { bottom: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent); }
.l-band__heat { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(11rem 7rem at var(--mx, 50%) var(--my, 50%), rgba(255, 130, 40, .38), rgba(255, 60, 10, .10) 55%, transparent 75%); mix-blend-mode: screen; }
.l-band.is-hot .l-band__heat { opacity: 1; }
.l-band__track { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 1.6vw, 1.3rem);
  font-family: var(--md-code-font-family); font-weight: 600; font-size: clamp(1.55rem, 5.6vw, 4.6rem); letter-spacing: .06em; }
/* each byte etches in: --t rises over a 6 % window of --p starting at 12 % + 5.5 % × index */
.l-byte { --t: clamp(0, calc((var(--p, 1) - .12 - var(--i) * .055) / .06), 1);
  display: inline-block; color: var(--ember); opacity: var(--t); will-change: transform, filter, opacity;
  transform: translateY(calc((1 - var(--t)) * .35em)) scale(calc(.9 + var(--t) * .1));
  filter: blur(calc((1 - var(--t)) * 8px));
  text-shadow: 0 0 calc(2px + (1 - var(--t)) * 28px) var(--ember-hot), 0 0 calc(12px + (1 - var(--t)) * 40px) var(--ember-glow),
    0 1px 0 rgba(0, 0, 0, .8), 0 -1px 0 rgba(255, 255, 255, .25); }
.l-byte--magic { color: #ffe3b8; } .l-byte--cmd { color: #ffb86a; }
.l-band:hover .l-byte { text-shadow: 0 0 6px var(--ember-hot), 0 0 26px var(--ember-glow), 0 0 60px rgba(255, 90, 20, .35), 0 1px 0 rgba(0, 0, 0, .8); }

/* ---- decode: field lines light up as their bytes land ---- */
.l-fields { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem 1rem; width: min(100%, 64rem); counter-reset: f; }
.l-fields li { --t: clamp(0, calc((var(--p, 1) - .12 - var(--i) * .055) / .08), 1);
  border-top: 1px solid rgba(255, 207, 138, calc(.18 + var(--t) * .6)); padding-top: .6rem; font-size: .85rem; line-height: 1.35; color: #cbbfae;
  opacity: calc(.35 + var(--t) * .65); transform: translateY(calc((1 - var(--t)) * .5rem)); }
.l-fields b { display: block; font-family: var(--md-code-font-family); font-size: 1.05rem; color: #fff; letter-spacing: .04em; margin-bottom: .2rem;
  text-shadow: 0 0 calc(var(--t) * 10px) var(--ember-glow); }
.l-fields em { color: var(--ember); font-style: normal; font-weight: 600; }

/* ---- the reply ---- */
.l-reply { --t: clamp(0, calc((var(--p, 1) - .70) / .12), 1);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .35rem .7rem; margin: 0 !important; max-width: none !important;
  font-family: var(--md-code-font-family); font-size: clamp(.8rem, 1.5vw, 1.05rem) !important; color: #d9cdb9 !important;
  opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 1rem)); filter: blur(calc((1 - var(--t)) * 4px)); }
.l-reply code { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #f2eadb; padding: .18em .5em; border-radius: 8px; }
.l-reply__arrow { color: var(--ember); font-size: 1.3em; }
.l-reply__ts { color: #b3a58d !important; } .l-reply__bpm { color: #fff !important; border-color: var(--ember-hot) !important; box-shadow: 0 0 18px var(--ember-glow); }
.l-reply__decode { font-family: var(--md-text-font-family); color: #fbf7f0; }
.l-heart { color: #ff5a4a; display: inline-block; animation: l-beat 1.26s ease-in-out infinite; transform-origin: center; } /* 95 bpm = 0.63 s per beat, two-phase */
@keyframes l-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.25); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 60% { transform: scale(1); } }

/* ---- fallbacks ---- */
html:not(.l-js) .l-stage { --p: 1; }
@media (max-width: 60em) {
  .l-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: .78rem; }
  .l-fields li:last-child { grid-column: 1 / -1; }
  .l-band { height: clamp(5.5rem, 16vh, 8rem); border-radius: .9rem; }
  .l-band__track { gap: .38rem; font-size: clamp(1.05rem, 4.9vw, 1.6rem); letter-spacing: .01em; padding: 0 .4rem; }
  .l-ringfig { order: -1; }
  .l-ringwrap { width: min(68vw, 19rem); }
  .l-ringpick { font-size: .78rem !important; }
  .l-hero { padding-top: 1.5rem; gap: 1rem; }
  .l-reply { font-size: .74rem !important; }
  .l-stage { height: 260vh; height: 260dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .l-stage { --p: 1; height: auto; }
  .l-pin { position: static; height: auto; min-height: 0; padding: 4rem 1.25rem; }
  .l-h1 .l-w, .l-hero .l-copy > *, .l-ring { animation: none; opacity: 1; transform: none; filter: none; }
  .l-band, .l-byte, .l-fields li, .l-reply, .l-insc-h { transform: none; filter: none; }
  .l-heart { animation: none; }
  .l-band__metal::before, .l-band__metal::after { transform: none; }
}

/* =====================================================================================================
   T1.3 byte ticker — captured frames roll under a needle; the centred one reads itself (ticker.js)
   ===================================================================================================== */
.landing section.l-ticker { max-width: none; padding: clamp(3rem, 8vh, 5rem) 0; background: var(--ink-0); border-top: var(--hairline); border-bottom: var(--hairline); }
.l-ticker__head { max-width: 72rem; margin: 0 auto 1.5rem; padding: 0 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; }
.l-ticker__head h2 { margin: 0; } .l-ticker__head p { margin: 0; }
.l-ticker__viewport { position: relative; overflow: hidden; padding: 1rem 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.l-ticker__needle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); opacity: .9; z-index: 2; pointer-events: none;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
.l-ticker__needle::before, .l-ticker__needle::after { content: ""; position: absolute; left: -5px; border: 6px solid transparent; }
.l-ticker__needle::before { top: -2px; border-top-color: var(--accent); } .l-ticker__needle::after { bottom: -2px; border-bottom-color: var(--accent); }
.l-ticker__row { display: flex; gap: 1rem; width: max-content; padding: 0 .5rem; }
.is-rolling .l-ticker__row { animation: l-roll var(--dur, 45s) linear infinite; will-change: transform; }
.l-ticker:hover .l-ticker__row, .l-ticker:focus-within .l-ticker__row { animation-play-state: paused; }
@keyframes l-roll { to { transform: translateX(-50%); } }
.l-chip { display: grid; gap: .25rem; min-width: 14rem; max-width: 22rem; padding: .8rem 1rem .7rem; border-radius: 14px; border: var(--hairline); background: var(--paper);
  font-family: var(--md-code-font-family); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.l-chip.is-center { transform: translateY(-3px) scale(1.02); border-color: var(--accent); box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); }
.l-chip__dir { font-size: 1rem; color: var(--ink-2); line-height: 1; } .l-chip--rx .l-chip__dir { color: var(--accent-ink); }
.l-chip__hex { font-size: .72rem; letter-spacing: .02em; color: var(--ink-3); background: none; border: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.l-chip__meta { font-size: .66rem; color: var(--ink-2); text-transform: none; } .l-chip__src { opacity: .7; }
.l-chip__read { font-family: var(--md-text-font-family); font-size: .95rem; font-weight: 600; color: var(--ink-3); opacity: .25; transition: opacity .3s; }
.l-chip.is-center .l-chip__read { opacity: 1; }
.l-ticker__read { text-align: center; margin: 1.25rem auto 0 !important; max-width: none !important; font-size: clamp(1.1rem, 2vw, 1.5rem) !important; color: var(--ink-3) !important; min-height: 1.5em; }
.l-ticker__read b { color: var(--ink-3); } .l-read__dir { font-family: var(--md-code-font-family); font-size: .8rem; color: var(--ink-2); margin-right: .5rem; }
.l-ticker.is-live .l-ticker__row { animation: none; flex-direction: row; } .l-ticker.is-live .l-chip:first-child { animation: l-slide-in .4s var(--ease) both; }
@keyframes l-slide-in { from { opacity: 0; transform: translateX(2rem); } }
@media (prefers-reduced-motion: reduce) {
  .l-ticker__viewport { mask-image: none; -webkit-mask-image: none; padding: 0 1.25rem; } .l-ticker__needle { display: none; }
  .l-ticker__row { width: auto; flex-wrap: wrap; max-width: 72rem; margin: 0 auto; animation: none !important; }
  .l-chip__read { opacity: 1; } .l-ticker__read { display: none; }
}

/* =====================================================================================================
   T1.4 the loop — 12 × 40-byte Opus blocks assemble → waveform → transcript types → tiny's push card
   ===================================================================================================== */
.l-loop { background: #0b0d10; }
.l-pin--loop { background: radial-gradient(70% 50% at 50% 30%, rgba(14, 143, 168, calc(.06 + var(--p, 1) * .12)), transparent 70%), radial-gradient(90% 60% at 50% 110%, #0f1a1f, transparent 70%), #0b0d10; gap: clamp(.9rem, 2.4vh, 1.8rem); }
.l-loop .l-stage-kicker { color: #8fb6bf; }
/* act 1 — the packet: header block + 12 Opus frames fly in from a scatter and lock into one row */
.l-packet { display: flex; gap: .35rem; align-items: stretch; width: min(100%, 44rem); height: clamp(2rem, 5vh, 3rem); }
.l-blk { --t: clamp(0, calc((var(--p, 1) - .04 - (var(--i) + 1) * .018) / .12), 1);
  flex: 1 1 0; border-radius: 6px; background: linear-gradient(180deg, #23343b, #142026); border: 1px solid rgba(143, 182, 191, .35); position: relative;
  opacity: var(--t); transform: translate(calc((1 - var(--t)) * (var(--i) - 5.5) * 2.2rem), calc((1 - var(--t)) * -9vh)) rotate(calc((1 - var(--t)) * (var(--i) - 5.5) * 6deg)); will-change: transform, opacity; }
.l-blk::after { content: "40 B"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 .62rem/1 var(--md-code-font-family); color: #b9d3d9; letter-spacing: .04em; }
.l-blk--head { flex: 1.6 1 0; background: linear-gradient(180deg, #2a2f38, #171b22); border-color: rgba(255, 255, 255, .18); } .l-blk--head::after { content: "u32 · 00 00"; color: #dfe6ea; }
/* act 2 — the memo: waveform bars grow from the packet; play is a real button */
.l-wave { --t: clamp(0, calc((var(--p, 1) - .28) / .18), 1); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .4rem 1rem; align-items: center; width: min(100%, 44rem);
  opacity: clamp(0, calc(var(--t) * 3), 1); }
.l-play { grid-row: 1 / 3; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; padding: 0 0 0 .2rem;
  box-shadow: 0 0 0 0 rgba(14, 143, 168, .5); transition: transform .2s var(--ease), box-shadow .3s; }
.l-play:hover { transform: scale(1.06); } .l-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.l-play.is-playing { box-shadow: 0 0 0 10px rgba(14, 143, 168, .18); } .l-play.is-playing .l-play__icon::before { content: "❚❚"; font-size: .75rem; letter-spacing: -.1em; } .l-play.is-playing .l-play__icon { font-size: 0; }
.l-bars { display: flex; align-items: center; gap: 3px; height: 3.4rem; }
.l-bars i { --on: clamp(0, calc((var(--t) * 56 - var(--i)) / 6), 1); flex: 1 1 0; height: calc(12% + var(--h) * 88% * var(--on)); border-radius: 2px; background: #6fb9c8; opacity: calc(.55 + .45 * var(--on)); transition: background .2s; will-change: height; }
.l-bars i.is-played { background: #fff; }
.l-wave__meta { grid-column: 2; font-family: var(--md-code-font-family); font-size: .72rem; color: #8fb6bf; } .l-wave__meta em { font-style: normal; color: #cfe3e8; }
/* act 3 — the transcript types itself (clip-path wipe, no per-letter DOM) */
.l-transcript { --t: clamp(0, calc((var(--p, 1) - .50) / .22), 1); position: relative; margin: 0 !important; max-width: none !important; color: #f4f7f8 !important;
  font-size: clamp(1.3rem, 3vw, 2.2rem) !important; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.l-transcript__text { display: inline-block; clip-path: inset(0 calc((1 - var(--t)) * 100%) 0 0); }
.l-caret { position: absolute; top: .1em; bottom: .1em; left: calc(var(--t) * 100%); width: 2px; background: var(--accent); opacity: calc(min(1, var(--t) * 30) * (1 - var(--t))); animation: l-caret 1s steps(2) infinite; }
@keyframes l-caret { 50% { visibility: hidden; } }
/* act 4 — the push card */
.l-push { --t: clamp(0, calc((var(--p, 1) - .76) / .14), 1); display: grid; gap: .3rem; width: min(100%, 26rem); padding: .9rem 1.1rem; border-radius: 18px;
  background: rgba(255, 255, 255, .92); color: #111; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .6); backdrop-filter: blur(10px);
  opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 2.5rem)) scale(calc(.94 + var(--t) * .06)); will-change: transform, opacity; }
.l-push__app { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.l-push__icon { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 6px; background: #111; font-size: .8rem; }
.l-push__time { margin-left: auto; text-transform: none; letter-spacing: 0; font-family: var(--md-code-font-family); }
.l-push b { font-size: 1.05rem; letter-spacing: -.01em; } .l-push span:last-child { font-size: .82rem; color: #444; } .l-push a { color: #0a6f83; }
.l-loop .l-stage-foot a { color: #cfe3e8; border-color: rgba(207, 227, 232, .35); }
@media (max-width: 60em) {
  .l-loop.l-stage { height: 260vh; height: 260dvh; }
  .l-transcript { white-space: normal; font-size: 1.25rem !important; text-align: center; } .l-caret { display: none; }
  .l-blk::after { content: "40"; font-size: .5rem; } .l-blk--head::after { content: "u32"; }
  .l-chip { min-width: 0; width: 76vw; max-width: 76vw; } .l-chip__read { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .l-blk, .l-wave, .l-transcript, .l-push { --t: 1; transform: none; opacity: 1; } .l-caret { display: none; }
}

/* =====================================================================================================
   T3 live — Web Bluetooth card (ring-web.js renders all text; the section only carries the heading)
   ===================================================================================================== */
.landing section.l-live { padding: clamp(3rem, 9vh, 6rem) 1.25rem; background: linear-gradient(180deg, var(--ink-0), var(--paper)); border-top: var(--hairline); }
.l-live__head { text-align: center; margin-bottom: 1.5rem; } .l-live__head h2 { margin: .4rem 0 0; } .l-live__head .l-stage-kicker { color: var(--accent-ink); }
.l-live__card { max-width: 46rem; margin: 0 auto; }
.l-live__inner { display: grid; gap: 1rem; padding: 1.4rem; border-radius: 22px; border: var(--hairline); background: var(--paper); box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.l-live__lead { margin: 0 !important; max-width: none !important; font-size: 1.05rem !important; }
.l-live__fine { margin: 0 !important; max-width: none !important; font-size: .8rem !important; color: var(--ink-2) !important; font-family: var(--md-code-font-family); }
.l-live__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.l-act { appearance: none; border: 0; border-radius: 999px; padding: .7rem 1.2rem; font: inherit; font-weight: 600; font-size: .95rem; background: var(--ink-3); color: var(--paper); cursor: pointer; transition: transform .15s var(--ease), opacity .15s; }
.l-act:hover { transform: translateY(-1px); } .l-act:disabled { opacity: .45; cursor: default; transform: none; } .l-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.l-act--ghost { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--ink-1); } .l-act--sm { padding: .4rem .8rem; font-size: .8rem; margin-left: auto; }
.l-sel { font: inherit; font-size: .85rem; padding: .5rem .7rem; border-radius: 999px; border: 1.5px solid var(--ink-1); background: var(--paper); color: var(--ink-3); }
.l-live__id { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .l-live__id b { font-size: 1.1rem; }
.l-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47,191,113,.2); } .is-demo .l-dot { background: #e0a100; box-shadow: 0 0 0 4px rgba(224,161,0,.2); }
.l-live__fw, .l-live__tag { font-family: var(--md-code-font-family); font-size: .75rem; color: var(--ink-2); } .l-live__tag { padding: .1rem .5rem; border-radius: 999px; background: rgba(224,161,0,.15); color: #7a5a00; }
.l-live__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.l-tile { display: grid; gap: .15rem; padding: .9rem 1rem; border-radius: 14px; background: var(--ink-0); border: var(--hairline); align-content: start; }
.l-tile span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); } .l-tile b { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1; } .l-tile small { font-size: .74rem; color: var(--ink-2); min-height: 1em; }
.l-spark { width: 100%; height: 36px; display: block; margin: .2rem 0; } .l-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.l-live__log { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: #0b0d10; color: #b9d3d9; font-size: .74rem; line-height: 1.5; max-height: 9.5em; overflow: auto; white-space: pre-wrap; }
.l-guard { border: 0; border-radius: 22px; padding: 1.6rem; max-width: 34rem; width: calc(100vw - 2rem); background: var(--paper); color: var(--ink-3); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.l-guard::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.l-guard h3 { margin: 0 0 .6rem; font-size: 1.4rem; letter-spacing: -.02em; } .l-guard p { margin: .4rem 0; font-size: .95rem; color: var(--ink-2); } .l-guard ul { margin: .4rem 0 .6rem 1.1rem; padding: 0; font-size: .9rem; columns: 2; }
.l-guard code { font-size: .8rem; } .l-guard__note { font-size: .85rem !important; } .l-guard__row { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
@media (max-width: 40em) { .l-live__grid { grid-template-columns: 1fr 1fr; } .l-tile--hr { grid-column: 1 / -1; } .l-guard ul { columns: 1; } .l-act--sm { margin-left: 0; } }

/* ---- easter eggs -------------------------------------------------------------------------------------- */
.l-ringwrap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.l-ringwrap.is-tap .l-ring { animation: l-tap .35s var(--ease); } @keyframes l-tap { 40% { transform: scale(.97); } }
.l-ringwrap.is-memo .l-ring { filter: drop-shadow(0 0 28px var(--ember-hot, #ff8a2a)); transition: filter .4s; }
body.is-raw .l-byte, body.is-raw .l-chip__hex, body.is-raw .l-reply code, body.is-raw .l-fact b, body.is-raw code { color: var(--ember-hot, #ff8a2a) !important; text-shadow: 0 0 10px var(--ember-glow, rgba(255,140,42,.45)); }
body.is-raw .is-rolling .l-ticker__row { animation-duration: calc(var(--dur, 45s) / 4); }
body.is-raw .l-chip__read, body.is-raw .l-ticker__read { font-family: var(--md-code-font-family); }
body.is-raw::after { content: "raw"; position: fixed; right: 1rem; bottom: 1rem; z-index: 50; font: 600 .7rem/1 var(--md-code-font-family); letter-spacing: .1em; text-transform: uppercase; color: var(--ember-hot, #ff8a2a); border: 1px solid currentColor; border-radius: 999px; padding: .4rem .7rem; }
@media (prefers-reduced-motion: reduce) { .l-ringwrap.is-tap .l-ring { animation: none; } }

/* =====================================================================================================
   T2 the turn — pinned, scroll-scrubbed render sequence (turn.js paints frame ⌊--p·35⌉ on the canvas)
   ===================================================================================================== */
.landing section.l-turn { max-width: none; padding: 0; margin: 0; }
.l-turn { position: relative; height: 260vh; height: 260dvh; background: var(--paper); }
.l-turn__pin { position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; padding: 4rem 1.25rem 2rem;
  background: radial-gradient(55% 45% at 50% 55%, rgba(255,140,42, calc(.04 + var(--p, 1) * .07)), transparent 70%); }
.l-turn__canvas, .l-turn__still { grid-area: 1 / 1; width: min(88vw, 74vh * 1.45, 1040px); height: auto; aspect-ratio: 900 / 620; display: block;
  filter: drop-shadow(0 40px 50px rgba(20,20,20,.22)); }
.l-turn__canvas { opacity: 0; } .l-turn.is-ready .l-turn__canvas { opacity: 1; } .l-turn.is-ready .l-turn__still { opacity: 0; }
.l-turn__canvas, .l-turn__still { transition: opacity .25s; }
.l-turn__notes { grid-area: 1 / 1; list-style: none !important; margin: 0 !important; padding: 0 !important; width: min(96vw, 74vh * 1.45 + 20rem, 1360px); aspect-ratio: 900 / 620; position: relative; pointer-events: none; }
.l-note { position: absolute; margin: 0 !important; max-width: 15rem; font-size: .92rem;
  --on: clamp(0, calc((var(--p, 1) - var(--a)) * 12), 1); --off: clamp(0, calc((var(--b) - var(--p, 1)) * 12), 1);
  opacity: min(var(--on), var(--off)); transform: translateY(calc((1 - min(var(--on), var(--off))) * .6rem)); }
.l-note b { display: block; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink-3); }
.l-note b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ember-hot, #ff8a2a); box-shadow: 0 0 0 4px var(--ember-glow, rgba(255,140,42,.35)); margin-right: .5rem; vertical-align: middle; }
.l-note span { color: var(--ink-2); font-family: var(--md-code-font-family); font-size: .78rem; }
.l-note--1 { right: 0; top: 18%; } .l-note--2 { left: 0; bottom: 20%; } .l-note--3 { right: 0; bottom: 12%; }
@media (max-width: 40em) {
  .l-turn { height: 220vh; height: 220dvh; }
  .l-turn__pin { align-content: center; grid-template-rows: auto auto; gap: 1.2rem; }
  .l-turn__canvas, .l-turn__still, .l-turn__notes { grid-area: 1 / 1; }
  .l-turn__notes { grid-area: 2 / 1; aspect-ratio: auto; min-height: 5.5rem; }
  .l-note { position: absolute; left: 0; right: 0; top: 0; max-width: none; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .l-turn { height: auto; } .l-turn__pin { position: static; height: auto; padding: 3rem 1.25rem; }
  .l-turn__canvas { display: none; } .l-turn__still { opacity: 1 !important; }
  .l-turn__notes { position: static; aspect-ratio: auto; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 1rem !important; }
  .l-note { position: static; opacity: 1; transform: none; max-width: none; }
}
html:not(.js) .l-note { opacity: 1; transform: none; }