/*
 * Homepage (Home v2). Layout and every interactive demo of the page, in one stylesheet that the
 * Reactive CSS runtime reads as it is. It lives in public/ so no build step rewrites or minifies
 * it: minifiers drop or rewrite rules such as `:on(click) {}` that they do not understand.
 *
 * State owners, so sections can share what they must and nothing else:
 *   .home         --open (01 menu and the 03 diagram), --count (2.1 and the 06 specimens)
 *   .hero         the marker position and the drag state
 *   .canvas       2.2's captured position
 *   .preferences  2.3's persisted theme
 *   .runtime      04's bundle choice and module count; each .mod its own --on
 *   .next         06's pointer and viewport readouts
 */

/* ── Shared ─────────────────────────────────────────────────────────────── */
.home { --hv-pad: clamp(16px, 4vw, 40px); --hv-ease: cubic-bezier(0.2, 0, 0, 1); }
.home .hv-wrap { max-width: var(--container-marketing, 1280px); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--hv-pad); }
.home .hv-band { border-top: 1px solid var(--color-line); }
.home .hv-band.alt { background: var(--color-paper-band); }
.home .hv-kicker { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-mute); }
.home .hv-kicker b { font-weight: 400; color: var(--color-ink); }
.home .hv-head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; margin-bottom: clamp(36px, 5vw, 56px); }
.home .hv-h2 { margin: 0; flex: 1 1 420px; font-size: clamp(36px, 5.4vw, 72px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; }
.home .hv-lede { margin: 0; flex: 1 1 320px; max-width: 440px; font-size: 17px; line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; }
.home .hv-mono { font-family: var(--font-mono); }
.home .hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 20px; border: 1px solid var(--color-ink); border-radius: 3px; background: transparent; color: var(--color-ink); font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; }
.home .hv-btn:hover { background: var(--color-hover); }
.home .hv-btn.ink { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-on-ink); }
.home .hv-btn.ink:hover { background: var(--color-ink-hover, oklch(0.32 0.01 80)); }
.home .hv-seg { align-self: flex-start; display: flex; border: 1px solid var(--color-ink); border-radius: 3px; overflow: hidden; }
.home .hv-seg button { height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--color-ink); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.home .hv-seg button + button { border-left: 1px solid var(--color-ink); }
.home .hv-seg button:hover { background: var(--color-hover); }
.home a { text-decoration-color: oklch(0.8 0.006 85); text-underline-offset: 3px; }
.home a:hover { text-decoration-color: currentColor; }

/* Code panels: one row per line, a gutter, tokens and an optional live chip. */
.home .hv-code { font-family: var(--font-mono); font-size: 13px; line-height: 22px; padding: 12px 0; overflow-x: auto; }
.home .hv-ln { display: flex; align-items: center; min-height: 22px; padding-right: 16px; transition: background 220ms, box-shadow 220ms; }
.home .hv-gut { width: 40px; flex: none; padding-right: 14px; text-align: right; color: oklch(0.72 0.006 80); user-select: none; }
.home .hv-src { white-space: pre; }
.home .hv-chip { margin-left: 4px; padding: 0 6px; line-height: 18px; border: 1px solid var(--color-rx); border-radius: 2px; background: var(--color-paper); color: var(--color-rx-strong); font-size: 11.5px; white-space: nowrap; }
.home .t-rx { color: var(--color-rx-strong); font-weight: 500; }
.home .t-sel, .home .t-tag, .home .t-at { color: var(--color-ink); font-weight: 600; }
.home .t-var { color: var(--color-ink); font-weight: 500; }
.home .t-prop, .home .t-id, .home .t-kw { color: var(--color-ink); }
.home .t-com, .home .t-pun { color: var(--color-mute); }
.home .t-str, .home .t-val, .home .t-fn, .home .t-attr { color: var(--color-ink-2); }
.home .hv-ln.lit { background: oklch(0.55 0.2 35 / 0.09); box-shadow: inset 2px 0 0 var(--color-rx); }
/* The code trace, as in the design: after an event the lines that ran light up one step at a time,
   140 ms apart (one step lit, the previous one off), the last step stays lit 520 ms more, and every
   change fades over 220 ms. Each step is one animation with a delay; the :changed() selectors that start them stay matched
   until they finish. */
@keyframes hv-step { 0% { background: transparent; box-shadow: inset 0 0 0 transparent; } 39% { background: oklch(0.55 0.2 35 / 0.09); box-shadow: inset 2px 0 0 var(--color-rx); } 100% { background: transparent; box-shadow: inset 0 0 0 transparent; } }
@keyframes hv-step-last { 0% { background: transparent; box-shadow: inset 0 0 0 transparent; } 25%, 75% { background: oklch(0.55 0.2 35 / 0.09); box-shadow: inset 2px 0 0 var(--color-rx); } 100% { background: transparent; box-shadow: inset 0 0 0 transparent; } }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.home .hero {
  --x: state(426px);
  --y: state(192px);
  --fx: state(0.64);
  --drag: state(false);
  --moved: state(false);
  --gx: state(0px);
  --gy: state(0px);
}
/* The design starts the marker at 64 % × 44 % of the field: on a phone the field is square and narrower. */
@media (max-width: 719px) { .home .hero { --x: state(228px); --y: state(151px); } }
.home .hv-hero { max-width: var(--container-marketing, 1280px); margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--hv-pad) clamp(56px, 7vw, 104px); display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 72px); align-items: stretch; }
.home .hv-hero-copy { flex: 1 1 360px; max-width: 520px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.home .hv-hero-copy > div { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
.home .hv-hero h1 { margin: 0; font-size: clamp(60px, 8.6vw, 128px); line-height: 0.88; letter-spacing: -0.055em; font-weight: 600; }
.home .hv-hero h1 > span { display: block; white-space: nowrap; }
.home .hv-hero-p { margin: 0; max-width: 30ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; }
.home .hv-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.home .hv-install { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 8px 0 14px; border: 1px solid var(--color-line); border-radius: 3px; background: var(--color-paper-2); font-family: var(--font-mono); font-size: 13px; text-align: left; cursor: pointer; }
.home .hv-install:hover { border-color: var(--color-ink-2); }
.home .hv-install > span:first-child { flex: 1; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-2); }
.home .hv-install [data-copy-label] { padding: 3px 8px; border: 1px solid var(--color-line); border-radius: 2px; background: var(--color-paper); font-size: 11.5px; color: var(--color-ink); }
.home .hv-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-mute); }

/* The headline's last word: the letter nearest the marker's x position lifts and turns vermilion.
   --t is each letter's centre (0–1), set in the HTML; the lift is plain calc() on the state. */
.home .hv-g { display: inline-block; translate: 0 calc(-0.08em * max(0, 1 - max(var(--t) - var(--fx), var(--fx) - var(--t)) * 3.2)); transition: translate 260ms var(--hv-ease), color 200ms; }
.home .hero:when(--fx < 0.1429) .hv-g:nth-child(1),
.home .hero:when(--fx >= 0.1429 and --fx < 0.2857) .hv-g:nth-child(2),
.home .hero:when(--fx >= 0.2857 and --fx < 0.4286) .hv-g:nth-child(3),
.home .hero:when(--fx >= 0.4286 and --fx < 0.5714) .hv-g:nth-child(4),
.home .hero:when(--fx >= 0.5714 and --fx < 0.7143) .hv-g:nth-child(5),
.home .hero:when(--fx >= 0.7143 and --fx < 0.8571) .hv-g:nth-child(6),
.home .hero:when(--fx >= 0.8571) .hv-g:nth-child(7) { color: var(--color-rx); }

.home .hv-stage { flex: 1.45 1 520px; min-width: 0; display: flex; flex-direction: column; }
.home .hv-frame { position: relative; border: 1px solid var(--color-line); border-bottom: 0; border-radius: 3px 3px 0 0; background: oklch(0.99 0.003 85); overflow: hidden; }
.home .hv-ruler { position: relative; height: 22px; border-bottom: 1px solid var(--color-line); background-image: linear-gradient(90deg, oklch(0.7 0.006 80) 1px, transparent 1px), linear-gradient(90deg, oklch(0.82 0.006 80) 1px, transparent 1px); background-size: 100px 9px, 10px 5px; background-repeat: repeat-x; background-position: -1px 100%, -1px 100%; font-family: var(--font-mono); font-size: 9.5px; color: var(--color-mute); overflow: hidden; }
.home .hv-ruler span { position: absolute; top: 2px; }
.home .field {
  position: relative; aspect-ratio: 1 / 1; touch-action: none; cursor: crosshair; user-select: none; overflow: hidden;
  background-image: linear-gradient(oklch(0.21 0.01 80 / 0.045) 1px, transparent 1px), linear-gradient(90deg, oklch(0.21 0.01 80 / 0.045) 1px, transparent 1px), linear-gradient(oklch(0.21 0.01 80 / 0.09) 1px, transparent 1px), linear-gradient(90deg, oklch(0.21 0.01 80 / 0.09) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; background-position: -1px -1px;
}
@media (min-width: 720px) { .home .field { aspect-ratio: 16 / 10.5; } }

/* A tap anywhere moves the marker there; a drag (3 px or more) follows the pointer. Positions are
   local to the field and clamped to it. --fx is the same x as a fraction, for the headline. */
.home .field:on(click) {
  --gx: set(var(--x)); --gy: set(var(--y));
  --x: set(round(clamp(0px, event(local-x), element(width)), 1px));
  --y: set(round(clamp(0px, event(local-y), element(height)), 1px));
  --fx: set(clamp(0, event(local-x) / element(width), 1));
  --moved: set(true);
}
.home .field:on(drag(start)) { --gx: set(var(--x)); --gy: set(var(--y)); --drag: set(true); --moved: set(true); }
.home .field:on(drag(move)) {
  --x: set(round(clamp(0px, event(local-x), element(width)), 1px));
  --y: set(round(clamp(0px, event(local-y), element(height)), 1px));
  --fx: set(clamp(0, event(local-x) / element(width), 1));
}
.home .field:on(drag(end)) { --drag: set(false); }
.home .field:on(drag(cancel)) { --drag: set(false); }

/* Keyboard: arrow keys move the focused marker by 2.5 % of the field, Shift by 10 %. */
.home .field:on(keydown(ArrowRight), prevent()) { --gx: set(var(--x)); --gy: set(var(--y)); --fx: set(min(var(--fx) + 0.025, 1)); --x: set(round(min(var(--fx) + 0.025, 1) * element(width), 1px)); --moved: set(true); }
.home .field:on(keydown(ArrowLeft), prevent()) { --gx: set(var(--x)); --gy: set(var(--y)); --fx: set(max(var(--fx) - 0.025, 0)); --x: set(round(max(var(--fx) - 0.025, 0) * element(width), 1px)); --moved: set(true); }
.home .field:on(keydown(ArrowDown), prevent()) { --gx: set(var(--x)); --gy: set(var(--y)); --y: set(round(min(var(--y) + element(height) * 0.025, element(height)), 1px)); --moved: set(true); }
.home .field:on(keydown(ArrowUp), prevent()) { --gx: set(var(--x)); --gy: set(var(--y)); --y: set(round(max(var(--y) - element(height) * 0.025, 0px), 1px)); --moved: set(true); }
.home .field:on(keydown(shift+ArrowRight), prevent()) { --gx: set(var(--x)); --gy: set(var(--y)); --fx: set(min(var(--fx) + 0.1, 1)); --x: set(round(min(var(--fx) + 0.1, 1) * element(width), 1px)); --moved: set(true); }
.home .field:on(keydown(shift+ArrowLeft), prevent()) { --gx: set(var(--x)); --gy: set(var(--y)); --fx: set(max(var(--fx) - 0.1, 0)); --x: set(round(max(var(--fx) - 0.1, 0) * element(width), 1px)); --moved: set(true); }
.home .field:on(keydown(shift+ArrowDown), prevent()) { --gx: set(var(--x)); --gy: set(var(--y)); --y: set(round(min(var(--y) + element(height) * 0.1, element(height)), 1px)); --moved: set(true); }
.home .field:on(keydown(shift+ArrowUp), prevent()) { --gx: set(var(--x)); --gy: set(var(--y)); --y: set(round(max(var(--y) - element(height) * 0.1, 0px), 1px)); --moved: set(true); }

.home .hero:when(--drag) .field { cursor: grabbing; }
.home .hv-cross-v, .home .hv-cross-h { position: absolute; pointer-events: none; transition: left 160ms var(--hv-ease), top 160ms var(--hv-ease); }
.home .hv-cross-v { left: min(var(--x), 100%); top: 0; bottom: 0; border-left: 1px dashed oklch(0.55 0.2 35 / 0.55); }
.home .hv-cross-h { top: min(var(--y), 100%); left: 0; right: 0; border-top: 1px dashed oklch(0.55 0.2 35 / 0.55); }
.home .hv-tag { position: absolute; padding: 1px 5px; border: 1px solid oklch(0.55 0.2 35 / 0.5); border-radius: 2px; background: var(--color-paper); font-family: var(--font-mono); font-size: 10.5px; color: var(--color-rx-strong); pointer-events: none; font-variant-numeric: tabular-nums; transition: left 160ms var(--hv-ease), top 160ms var(--hv-ease); }
.home .hv-tag.x { left: min(var(--x), calc(100% - 24px)); top: 8px; translate: -50% 0; }
.home .hv-tag.y { top: min(var(--y), calc(100% - 12px)); left: 8px; translate: 0 -50%; }
.home .hv-tag.x { content: var(--x); }
.home .hv-tag.y { content: var(--y); }
/* The ring: where the marker was before the last tap, key press or drag. --gx/--gy are copied at the
   start of each gesture, so during a drag the ring stays at the drag's starting point, as in the design. */
.home .hv-ghost, .home .hv-ghost-label { position: absolute; left: 30%; top: 70%; pointer-events: none; }
.home .hero:when(--moved) :is(.hv-ghost, .hv-ghost-label) { left: min(var(--gx), 100%); top: min(var(--gy), 100%); }
.home .hv-ghost { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px dashed var(--color-ink-2); border-radius: 50%; }
.home .hv-ghost-label { translate: -50% 30px; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-mute); white-space: nowrap; }
.home .hv-field-note { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--color-mute); pointer-events: none; }
.home .marker {
  position: absolute; left: min(var(--x), 100%); top: min(var(--y), 100%); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; border-radius: 50%; background: var(--color-rx); box-shadow: 0 0 0 5px oklch(0.55 0.2 35 / 0.1);
  cursor: grab; touch-action: none; transition: left 160ms var(--hv-ease), top 160ms var(--hv-ease), box-shadow 160ms;
}
.home .marker:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }
.home .hero:when(--drag) .marker { cursor: grabbing; box-shadow: 0 0 0 10px oklch(0.55 0.2 35 / 0.14); }
/* While dragging, positions follow the pointer without easing. */
.home .hero:when(--drag) :is(.marker, .hv-cross-v, .hv-cross-h, .hv-tag, .hv-readout) { transition: none; }
.home .hv-readout { position: absolute; left: min(calc(var(--x) + 34px), calc(100% - 118px)); top: min(calc(var(--y) + 18px), calc(100% - 52px)); padding: 6px 9px; border-radius: 2px; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; transition: left 160ms var(--hv-ease), top 160ms var(--hv-ease); }
.home .hv-readout i { font-style: normal; color: oklch(0.72 0.006 80); }
.home .hv-readout .rdx { content: var(--x); }
.home .hv-readout .rdy { content: var(--y); }

.home .hv-panel { border: 1px solid var(--color-line); border-radius: 0 0 3px 3px; background: var(--color-paper-2); }
.home .hv-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--color-line); font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-2); }
.home .hv-live { display: flex; align-items: center; gap: 6px; color: var(--color-mute); }
.home .hv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.home .hero:when(--drag) .hv-live { color: var(--color-rx-strong); }
.home .hv-live span { content: when(--drag, "dragging", "idle"); }
.home .hero .chip-x { content: var(--x); }
.home .hero .chip-y { content: var(--y); }
/* While dragging the rule and its writes stay lit; after a tap or a key press they trace once. */
.home .hero:when(--drag) .hv-hero-code :is(.hv-ln:nth-child(6), .hv-ln:nth-child(7), .hv-ln:nth-child(8)) { background: oklch(0.55 0.2 35 / 0.09); box-shadow: inset 2px 0 0 var(--color-rx); }
.home .hero:when(not --drag):changed(--x) .hv-hero-code .hv-ln:nth-child(6),
.home .hero:when(not --drag):changed(--y) .hv-hero-code .hv-ln:nth-child(6) { animation: hv-step 360ms linear; }
.home .hero:when(not --drag):changed(--x) .hv-hero-code :is(.hv-ln:nth-child(7), .hv-ln:nth-child(8)),
.home .hero:when(not --drag):changed(--y) .hv-hero-code :is(.hv-ln:nth-child(7), .hv-ln:nth-child(8)) { animation: hv-step-last 880ms linear 140ms; }
.home .hv-hint { margin-top: 10px; font-size: 13px; color: var(--color-mute); }

/* ── 01 Syntax ──────────────────────────────────────────────────────────── */
.home {
  --open: state(false);
  --count: state(3);
  /* What the replay shows: --open as it reaches each step (state at 250 ms, attribute at 500 ms,
     menu at 750 ms). The real state, and the button's aria-expanded, change at once. */
  --shown-open: state(false);
  --shown-aria: state(false);
  --shown-menu: state(false);
}
.home .hv-h2.syntax { max-width: 13ch; }
.home .hv-syntax { display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start; }
.home .hv-table { flex: 3 1 620px; min-width: 0; border-top: 1px solid var(--color-ink); }
.home .hv-tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--color-line); }
.home .hv-tr.head { display: none; padding: 12px 0; font-family: var(--font-mono); font-size: 12px; color: var(--color-mute); }
.home .hv-tr.head span:last-child { color: var(--color-ink); }
.home .hv-tr .lbl { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--color-ink); }
.home .hv-tr .js { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--color-mute); overflow-wrap: anywhere; }
.home .hv-tr .arrow { display: none; font-family: var(--font-mono); color: oklch(0.75 0.006 80); }
.home .hv-tr .rcss { font-family: var(--font-mono); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (min-width: 720px) {
  .home .hv-tr { grid-template-columns: 92px minmax(0, 1fr) 24px minmax(0, 1.15fr); gap: 16px; padding: 18px 0; }
  .home .hv-tr.head { display: grid; }
  .home .hv-tr .arrow { display: block; }
}
.home .hv-details { border-bottom: 1px solid var(--color-line); }
.home .hv-details summary { display: flex; align-items: center; gap: 10px; min-height: 48px; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-ink-2); cursor: pointer; list-style: none; }
.home .hv-details summary::-webkit-details-marker { display: none; }
.home .hv-details summary::before { content: "+"; color: var(--color-rx); }
.home .hv-details[open] summary::before { content: "−"; }
.home .hv-details .hv-code { padding: 4px 0 20px; }

.home .hv-aside { flex: 1 1 260px; min-width: 0; max-width: 420px; border: 1px solid var(--color-line); border-radius: 3px; background: var(--color-paper-result); }
.home .hv-result-head { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; font-family: var(--font-mono); font-size: 12px; }
.home .hv-result-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-rx); }
.home .nav { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 236px; }
.home .nav button { align-self: flex-start; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--color-ink); border-radius: 3px; background: transparent; font: inherit; font-size: 15px; font-weight: 500; color: var(--color-ink); cursor: pointer; }
.home .nav button:hover { background: var(--color-hover); }
.home .nav .caret { display: inline-block; font-size: 12px; transition: rotate 200ms; }
.home .menu { display: none; margin: 0; padding: 6px 0; list-style: none; border: 1px solid var(--color-line); border-radius: 3px; background: var(--color-paper); font-size: 15px; }
.home .menu li { padding: 9px 14px; }

/* The menu itself: the stylesheet the table translates. */
.home .nav button { --attr-aria-expanded: var(--open); }
.home .nav button:on(click) { --open: toggle(); }
.home:when(--shown-menu) .menu { display: block; }
.home:when(--shown-aria) .nav .caret { rotate: 180deg; }

/* The replay's clock: one invisible animation per step. When a step's animation ends, the rule
   copies the real state into what that step shows. */
.home .hv-clock { position: absolute; width: 0; height: 0; overflow: hidden; }
@keyframes hv-clock { to { opacity: 0.5; } }
.home:changed(--open) .hv-clock.c1 { animation: hv-clock 250ms linear; }
.home:changed(--open) .hv-clock.c2 { animation: hv-clock 500ms linear; }
.home:changed(--open) .hv-clock.c3 { animation: hv-clock 750ms linear; }
.home .hv-clock.c1:on(animationend) { --shown-open: set(var(--open)); }
.home .hv-clock.c2:on(animationend) { --shown-aria: set(var(--open)); }
.home .hv-clock.c3:on(animationend) { --shown-menu: set(var(--open)); }

.home .hv-watch { margin-top: auto; padding: 10px 12px; border: 1px dashed oklch(0.86 0.006 85); border-radius: 3px; font-family: var(--font-mono); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.home .hv-watch > span { display: flex; justify-content: space-between; gap: 8px; }
.home .hv-watch > span > span:first-child { color: var(--color-ink-2); }
.home .hv-watch .open-v { color: var(--color-rx-strong); font-weight: 600; content: when(--shown-open, "true", "false"); }
.home .hv-watch .aria-v { content: when(--shown-aria, "true", "false"); }
.home .hv-note { font-size: 12.5px; color: var(--color-mute); }
.home .hv-closing { margin: 28px 0 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--color-ink-2); }

/* Each click replays the rule's path on the table and on the 03 diagram, one step every 250 ms:
   :changed(--open) matches from the change until these animations end. The state itself changes
   at once; only the explanation is slowed down. Reduced motion skips it. */
/* One step lit at a time, 250 ms each (Event; State and Update; Attribute), then Style until the
   replay ends at 1650 ms. The 220 ms fades match the design's transitions. */
@keyframes hv-row { 0% { background: transparent; box-shadow: inset 0 0 0 transparent; padding-left: 0; } 34%, 66% { background: oklch(0.55 0.2 35 / 0.07); box-shadow: inset 2px 0 0 var(--color-rx); padding-left: 10px; } 100% { background: transparent; box-shadow: inset 0 0 0 transparent; padding-left: 0; } }
@keyframes hv-row-last { 0% { background: transparent; box-shadow: inset 0 0 0 transparent; padding-left: 0; } 13%, 87% { background: oklch(0.55 0.2 35 / 0.07); box-shadow: inset 2px 0 0 var(--color-rx); padding-left: 10px; } 100% { background: transparent; box-shadow: inset 0 0 0 transparent; padding-left: 0; } }
@keyframes hv-row-label { 1%, 65% { color: var(--color-rx-strong); } }
@keyframes hv-row-label-last { 1%, 87% { color: var(--color-rx-strong); } }
.home:changed(--open) .hv-tr[data-step] { animation: hv-row 380ms linear calc(var(--step) * 250ms); }
.home:changed(--open) .hv-tr[data-step] :is(.lbl, .arrow) { animation: hv-row-label 380ms linear calc(var(--step) * 250ms); }
.home:changed(--open) .hv-tr[data-last] { animation: hv-row-last 1030ms linear 750ms; }
.home:changed(--open) .hv-tr[data-last] :is(.lbl, .arrow) { animation: hv-row-label-last 1030ms linear 750ms; }

/* ── 02 Gallery ─────────────────────────────────────────────────────────── */
.home .hv-h2.gallery { max-width: 14ch; }
.home .hv-gallery-lede { flex: 1 1 300px; max-width: 440px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.home .hv-gallery-lede p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; }
.home .hv-gallery-lede a { font-size: 15px; font-weight: 500; }
.home .hv-tiles { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.home .hv-tile { min-width: 0; border: 1px solid var(--color-line); border-radius: 3px; background: var(--color-paper-result); overflow: hidden; }
.home .hv-tile-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px 0; font-family: var(--font-mono); font-size: 12px; color: var(--color-mute); }
.home .hv-tile-head b { font-weight: 400; color: var(--color-ink); }
.home .hv-tile h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.home .hv-tile-code { border-top: 1px solid var(--color-line); background: var(--color-paper-2); }

/* 2.1 State and events */
.home .counter-tile { flex: 7 1 520px; }
.home .counter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 32px; padding: 8px 20px 28px; }
.home .counter .hv-big { flex: 1 1 220px; height: clamp(160px, 18vw, 220px); display: flex; align-items: flex-end; overflow: hidden; }
.home .counter .value { display: inline-block; font-size: clamp(120px, 15vw, 196px); font-weight: 600; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; animation-timing-function: var(--hv-ease); }
.home .counter .hv-ctl { flex: 0 1 220px; display: flex; flex-direction: column; gap: 14px; }
.home .counter .hv-ctl > div { display: flex; gap: 8px; }
.home .counter .hv-ctl p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-ink-2); }
.home .counter button { width: 52px; height: 52px; border: 1px solid var(--color-ink); border-radius: 3px; background: transparent; color: var(--color-ink); font: inherit; font-size: 24px; cursor: pointer; }
.home .counter button:hover { background: var(--color-hover); }
.home .counter button.plus { border: 0; background: var(--color-ink); color: var(--color-on-ink); }
.home .counter button.plus:hover { background: var(--color-ink-hover, oklch(0.32 0.01 80)); }

.home .counter .plus:on(click) { --count: increment(1); }
.home .counter .minus:on(click) { --count: decrement(1); }
.home .counter .value { content: var(--count); }
.home .chip-count { content: var(--count); }
@keyframes hv-up { from { opacity: 0; translate: 0 18px; } }
@keyframes hv-down { from { opacity: 0; translate: 0 -18px; } }
.home:changed(--count) .counter .value { animation-name: when(direction(--count) > 0, hv-up, hv-down); animation-duration: 320ms; }
/* Trace: the clicked button's rule, then the state, then the DOM text. */
.home:changed(--count):when(direction(--count) > 0) .counter-code .hv-ln:nth-child(4),
.home:changed(--count):when(direction(--count) < 0) .counter-code .hv-ln:nth-child(5) { animation: hv-step 360ms linear; }
.home:changed(--count) .counter-code .hv-ln:nth-child(2) { animation: hv-step 360ms linear 140ms; }
.home:changed(--count) .counter-code .hv-ln:nth-child(6) { animation: hv-step-last 880ms linear 280ms; }

/* 2.2 Event-time values */
.home .canvas-tile {
  /* The tile owns the captured position, so the canvas and its code chips can both read it. */
  --x: state(0px);
  --y: state(0px);
  --clicks: state(0);
  flex: 5 1 340px;
}
@media (min-width: 960px) { .home .canvas-tile { margin-top: 72px; } }
.home .canvas-tile .hv-tile-head { padding-bottom: 12px; }
.home .canvas {
  position: relative; display: block; width: 100%; height: 280px; padding: 0; border: 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
  background-color: var(--color-paper); background-image: radial-gradient(oklch(0.8 0.006 85) 1px, transparent 1.2px); background-size: 16px 16px;
  cursor: crosshair; overflow: hidden; text-align: left; font: inherit; color: var(--color-ink);
}
.home .canvas:on(click) {
  --x: set(round(event(local-x), 1px));
  --y: set(round(event(local-y), 1px));
  --clicks: increment(1);
}
/* Enter and Space have no pointer position: they capture the centre. */
.home .canvas:on(keydown(Enter), prevent()) { --x: set(round(element(width) / 2, 1px)); --y: set(round(element(height) / 2, 1px)); --clicks: increment(1); }
.home .canvas:on(keydown(Space), prevent()) { --x: set(round(element(width) / 2, 1px)); --y: set(round(element(height) / 2, 1px)); --clicks: increment(1); }
.home .canvas .hv-xy { position: absolute; left: 18px; top: 16px; display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.home .canvas .hv-xy i { font-style: normal; font-size: 0.6em; color: var(--color-mute); }
.home .canvas-tile:when(--clicks > 0) .cx { content: var(--x); }
.home .canvas-tile:when(--clicks > 0) .cy { content: var(--y); }
.home .canvas .dot, .home .canvas .ring { position: absolute; left: var(--x); top: var(--y); border-radius: 50%; display: none; }
.home .canvas-tile:when(--clicks > 0) :is(.dot, .ring) { display: block; }
.home .canvas .dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--color-rx); transition: left 260ms var(--hv-ease), top 260ms var(--hv-ease); }
.home .canvas .ring { width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid var(--color-rx); opacity: 0; }
@keyframes hv-ring { from { scale: 0.2; opacity: 1; } to { scale: 2.6; opacity: 0; } }
.home .canvas-tile:changed(--clicks) .ring { animation: hv-ring 700ms var(--hv-ease); }
/* Trace: the :on(click) rule, then its two writes. */
.home .canvas-tile:changed(--clicks) .canvas-code .hv-ln:nth-child(1) { animation: hv-step 360ms linear; }
.home .canvas-tile:changed(--clicks) .canvas-code :is(.hv-ln:nth-child(2), .hv-ln:nth-child(3)) { animation: hv-step-last 880ms linear 140ms; }
.home .canvas .hv-canvas-hint { position: absolute; right: 16px; bottom: 14px; font-size: 13px; color: var(--color-mute); }
.home .canvas .again { display: none; }
.home .canvas-tile:when(--clicks > 0) .again { display: inline; }
.home .canvas-tile:when(--clicks > 0) .first { display: none; }
.home .canvas-tile .hv-tile-text { padding: 16px 20px 4px; font-size: 14px; line-height: 1.55; color: var(--color-ink-2); text-wrap: pretty; }
.home .canvas-tile .hv-tile-text strong { font-weight: 600; color: var(--color-ink); }
.home .canvas-tile .hv-code { padding: 8px 0 14px; }
.home .canvas-tile:when(--clicks > 0) .chip-cx { content: var(--x); }
.home .canvas-tile:when(--clicks > 0) .chip-cy { content: var(--y); }
.home .canvas-tile .hv-chip:empty { display: none; }

/* 2.3 Persistent state */
.home .preferences {
  --theme: state("light", persist("home-theme"));
  flex: 1 1 100%; display: flex; flex-wrap: wrap;
}
.home .preferences .hv-pref-text { flex: 1.2 1 420px; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--color-line); }
.home .preferences .hv-pref-text > div:nth-child(2) { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.home .preferences p { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.55; color: var(--color-ink-2); text-wrap: pretty; }
.home .preferences .hv-tile-code { margin-top: auto; }
.home .preferences .hv-pref-demo { flex: 1 1 340px; min-width: 0; padding: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; justify-content: center; background-image: repeating-linear-gradient(135deg, transparent 0 10px, oklch(0.21 0.01 80 / 0.03) 10px 11px); }
.home .preferences .dark:on(click) { --theme: set("dark"); }
.home .preferences .light:on(click) { --theme: set("light"); }
.home .preferences .light { --attr-aria-pressed: when(--theme == "light", true, false); }
.home .preferences .dark { --attr-aria-pressed: when(--theme == "dark", true, false); }
.home .preferences:when(--theme == "light") .light,
.home .preferences:when(--theme == "dark") .dark { background: var(--color-ink); color: var(--color-paper); }
.home .preferences .sample { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; border: 1px solid var(--color-line); border-radius: 3px; background: var(--color-paper-result); color: var(--color-ink); transition: background 260ms, color 260ms, border-color 260ms; }
.home .preferences:when(--theme == "dark") .sample { border-color: #1c1b19; background: #1c1b19; color: #f4f2ee; }
.home .preferences .sample .hv-mono { font-size: 11.5px; opacity: 0.7; }
.home .preferences .sample strong { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.home .preferences .sample > span:last-child { font-size: 14px; line-height: 1.55; opacity: 0.8; }
.home .preferences .theme-v, .home .preferences .chip-theme { content: var(--theme); }
/* Trace: the clicked button's rule, then the state; for dark, then the :when() block that styles it. */
.home .preferences:changed(--theme):when(--theme == "dark") .pref-code .hv-ln:nth-child(4),
.home .preferences:changed(--theme):when(--theme == "light") .pref-code .hv-ln:nth-child(5) { animation: hv-step 360ms linear; }
.home .preferences:changed(--theme):when(--theme == "dark") .pref-code .hv-ln:nth-child(2) { animation: hv-step 360ms linear 140ms; }
.home .preferences:changed(--theme):when(--theme == "light") .pref-code .hv-ln:nth-child(2) { animation: hv-step-last 880ms linear 140ms; }
.home .preferences:changed(--theme):when(--theme == "dark") .pref-code :is(.hv-ln:nth-child(6), .hv-ln:nth-child(7), .hv-ln:nth-child(8), .hv-ln:nth-child(9)) { animation: hv-step-last 880ms linear 280ms; }
@media (max-width: 780px) { .home .preferences .hv-pref-text { border-right: 0; border-bottom: 1px solid var(--color-line); } }

/* ── 03 Model ───────────────────────────────────────────────────────────── */
.home .hv-model { position: relative; overflow: hidden; border-top: 1px solid var(--color-line); }
.home .hv-model-glyph { position: absolute; right: -0.08em; top: -0.18em; font-family: var(--font-mono); font-size: clamp(280px, 40vw, 560px); line-height: 1; font-weight: 400; color: transparent; -webkit-text-stroke: 1px oklch(0.88 0.006 85); pointer-events: none; user-select: none; }
.home .hv-model .hv-wrap { position: relative; }
.home .hv-model .hv-head { margin-bottom: clamp(48px, 6vw, 80px); }
.home .hv-h2.model { max-width: 12ch; }
.home .hv-flow { position: relative; }
.home .hv-track, .home .hv-pulse { display: none; }
.home .hv-nodes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 720px) {
  .home .hv-nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .home .hv-track { display: block; position: absolute; left: 32px; right: calc(25% - 32px); top: 32px; height: 1px; background: var(--color-ink); }
  .home .hv-pulse { display: block; position: absolute; top: 27px; left: 27px; width: 11px; height: 11px; border-radius: 50%; background: var(--color-rx); opacity: 0; z-index: 1; }
}
.home .hv-nodes li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.home .hv-circle { position: relative; z-index: 2; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.home .hv-nodes .name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.home .hv-nodes .frag { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--color-rx-strong); }
.home .hv-nodes .desc { max-width: 28ch; font-size: 14px; line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; }
.home .hv-nodes .live { align-self: flex-start; margin-top: 4px; padding: 4px 8px; border: 1px dashed oklch(0.82 0.006 85); border-radius: 2px; background: var(--color-paper); font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-2); }
.home .hv-nodes .live.state { content: when(--shown-open, "--open: true", "--open: false"); }
.home .hv-nodes .live.dom { content: when(--shown-aria, "aria-expanded=\"true\"", "aria-expanded=\"false\""); }
.home .hv-nodes .live.style { content: when(--shown-menu, ".menu → display: block", ".menu → display: none"); }
.home .hv-nodes .live.event .busy { display: none; }
.home:changed(--open) .hv-nodes .live.event .busy { display: inline; }
.home:changed(--open) .hv-nodes .live.event .idle { display: none; }
/* Step i: vermilion while it runs (250 ms), ink once done, until the replay ends at 1650 ms. */
@keyframes hv-node-0 { 0%, 15% { background: var(--color-rx); border-color: var(--color-rx); color: var(--color-paper); } 15.1%, 99.9% { background: var(--color-ink); color: var(--color-paper); } }
@keyframes hv-node-1 { 0%, 18% { background: var(--color-rx); border-color: var(--color-rx); color: var(--color-paper); } 18.1%, 99.9% { background: var(--color-ink); color: var(--color-paper); } }
@keyframes hv-node-2 { 0%, 22% { background: var(--color-rx); border-color: var(--color-rx); color: var(--color-paper); } 22.1%, 99.9% { background: var(--color-ink); color: var(--color-paper); } }
@keyframes hv-node-3 { 0%, 99.9% { background: var(--color-rx); border-color: var(--color-rx); color: var(--color-paper); } }
@keyframes hv-live-on { 0%, 99.9% { color: var(--color-rx-strong); border-color: var(--color-rx); } }
@keyframes hv-pulse { 0% { left: 27px; opacity: 1; } 15.2% { left: calc(25% + 27px); } 30.4% { left: calc(50% + 27px); } 45.6%, 99% { left: calc(75% + 27px); opacity: 1; } 100% { left: calc(75% + 27px); opacity: 0; } }
.home:changed(--open) .hv-nodes li:nth-child(1) .hv-circle { animation: hv-node-0 1650ms linear both; }
.home:changed(--open) .hv-nodes li:nth-child(2) .hv-circle { animation: hv-node-1 1400ms linear 250ms both; }
.home:changed(--open) .hv-nodes li:nth-child(3) .hv-circle { animation: hv-node-2 1150ms linear 500ms both; }
.home:changed(--open) .hv-nodes li:nth-child(4) .hv-circle { animation: hv-node-3 900ms linear 750ms both; }
.home:changed(--open) .hv-nodes li:nth-child(1) .live { animation: hv-live-on 250ms linear both; }
.home:changed(--open) .hv-nodes li:nth-child(2) .live { animation: hv-live-on 250ms linear 250ms both; }
.home:changed(--open) .hv-nodes li:nth-child(3) .live { animation: hv-live-on 250ms linear 500ms both; }
.home:changed(--open) .hv-nodes li:nth-child(4) .live { animation: hv-live-on 900ms linear 750ms both; }
.home:changed(--open) .hv-pulse { animation: hv-pulse 1650ms var(--hv-ease) both; }
.home .hv-send-row { margin-top: clamp(36px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.home .hv-send-row span { font-size: 14px; color: var(--color-ink-2); }
.home .hv-send:on(click) { --open: toggle(); }

/* ── 04 Runtime ─────────────────────────────────────────────────────────── */
.home .runtime { --bundle: state(full); --mods: state(9); }
.home .hv-runtime { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.home .hv-runtime-copy { flex: 1 1 320px; max-width: 440px; display: flex; flex-direction: column; gap: 24px; }
.home .hv-runtime-copy .hv-h2 { flex: none; }
.home .hv-runtime-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-ink-2); text-wrap: pretty; }
.home .runtime .full:on(click) { --bundle: set(full); }
.home .runtime .compact:on(click) { --bundle: set(compact); }
.home .runtime .custom:on(click) { --bundle: set(custom); }
.home .runtime .full { --attr-aria-checked: when(--bundle == full, true, false); }
.home .runtime .compact { --attr-aria-checked: when(--bundle == compact, true, false); }
.home .runtime .custom { --attr-aria-checked: when(--bundle == custom, true, false); }
.home .runtime:when(--bundle == full) .hv-seg .full,
.home .runtime:when(--bundle == compact) .hv-seg .compact,
.home .runtime:when(--bundle == custom) .hv-seg .custom { background: var(--color-ink); color: var(--color-paper); }
.home .hv-size { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 1px solid var(--color-line); }
.home .hv-size > span:first-child { display: flex; align-items: baseline; gap: 10px; }
.home .hv-size .num { font-size: clamp(56px, 7vw, 96px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.home .hv-size .unit, .home .hv-size .note { font-family: var(--font-mono); color: var(--color-ink-2); }
.home .hv-size .unit { font-size: 14px; }
.home .hv-size .note { font-size: 12px; color: var(--color-mute); }
.home .hv-size [data-for] { display: none; }
.home .runtime:when(--bundle == full) .hv-size [data-for="full"],
.home .runtime:when(--bundle == compact) .hv-size [data-for="compact"],
.home .runtime:when(--bundle == custom) .hv-size [data-for="custom"] { display: inline; }
.home .runtime .mods-v { content: var(--mods); }
.home .hv-runtime-grid { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.home .hv-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: 3px; overflow: hidden; }
.home .mod { --on: state(true); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 112px; padding: 16px 16px 18px; border: 0; background: var(--color-paper); color: var(--color-ink); font: inherit; text-align: left; cursor: default; transition: background 200ms, opacity 200ms; }
.home .mod > span:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.home .mod > span:first-child::after { content: ""; width: 9px; height: 9px; flex: none; border: 1px solid var(--color-rx); border-radius: 50%; background: var(--color-rx); }
.home .mod .fns { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--color-ink-2); }
/* Full and Compact contain every module: Compact only has a shorter describe() registry. */
.home .runtime:when(--bundle != custom) .mod { --attr-disabled: true; --attr-aria-pressed: true; }
/* The HTML keeps every tile disabled (without the script nothing toggles); Custom enables them. */
.home .runtime:when(--bundle == custom) .mod { --attr-disabled: false; --attr-aria-pressed: var(--on); cursor: pointer; }
.home .runtime .mod.core { --attr-disabled: true; }
.home .runtime:when(--bundle == custom) .mod.core { cursor: default; }
.home .runtime:when(--bundle == custom) .mod:when(not --on) { background: oklch(0.955 0.005 85); color: var(--color-mute); opacity: 0.6; }
.home .runtime:when(--bundle == custom) .mod:when(not --on) > span:first-child::after { background: transparent; border-color: oklch(0.7 0.006 80); }
.home .runtime .mod:on(click) { --on: toggle(); }
.home .runtime .mod:when(--on):on(click) { --mods: decrement(1); }
.home .runtime .mod:when(not --on):on(click) { --mods: increment(1); }
.home .hv-mod-note { font-size: 12.5px; line-height: 1.5; color: var(--color-mute); }
.home .hv-mod-note [data-for] { display: none; }
.home .runtime:when(--bundle != custom) .hv-mod-note [data-for="fixed"],
.home .runtime:when(--bundle == custom) .hv-mod-note [data-for="custom"] { display: inline; }

/* ── 05 Native first ────────────────────────────────────────────────────── */
.home .hv-native { background: var(--color-night); color: var(--color-night-text); }
.home .hv-native .hv-kicker { color: var(--color-night-mute); }
.home .hv-native .hv-kicker b { color: var(--color-night-text); }
.home .hv-native h2 { margin: 0 0 clamp(40px, 6vw, 72px); max-width: 18ch; font-size: clamp(36px, 5.4vw, 72px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; }
.home .hv-sides { display: flex; flex-wrap: wrap; gap: 40px 0; }
.home .hv-side { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.home .hv-side:first-child { padding-right: clamp(0px, 4vw, 56px); }
.home .hv-side:last-child { padding-left: clamp(0px, 4vw, 56px); border-left: 1px solid var(--color-night-line); }
.home .hv-side > span { padding-bottom: 12px; border-bottom: 1px solid var(--color-night-line); font-family: var(--font-mono); font-size: 12.5px; color: var(--color-night-mute); }
.home .hv-side > div { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--font-mono); font-size: clamp(20px, 2.4vw, 30px); color: oklch(0.86 0.005 85); }
.home .hv-side:last-child > div { color: oklch(0.74 0.16 40); }
.home .hv-native-foot { margin-top: clamp(40px, 6vw, 64px); display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-end; justify-content: space-between; }
.home .hv-native-foot p { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--color-night-2); text-wrap: pretty; }
.home .hv-native-foot p span { font-family: var(--font-mono); font-size: 15px; }
.home .hv-native-foot a { font-size: 15px; color: var(--color-night-text); text-decoration-color: oklch(0.55 0.01 80); }
.home .hv-native-foot a:hover { text-decoration-color: var(--color-night-text); }
@media (max-width: 760px) { .home .hv-side:last-child { padding-left: 0; border-left: 0; } }

/* ── 06 What comes next ─────────────────────────────────────────────────── */
.home .next {
  --over: state(false);
  /* mouse(): the pointer, local to this section (the needles) and in the viewport (the readout). */
  --mx: mouse(x, local);
  --my: mouse(y, local);
  --px: mouse(x);
  --py: mouse(y);
  position: relative; overflow: hidden;
}
.home .next:on(pointerenter) { --over: set(true); }
.home .next:on(pointerleave) { --over: set(false); }
/* The band above the specimen sheet: needles fill it, the heading sits on top. */
.home .hv-next-band { position: relative; }
.home .hv-needles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 30%, #000); }
.home .hv-needles span { position: absolute; left: calc(var(--nx) - 9px); top: calc(var(--ny) - 0.75px); width: 18px; height: 1.5px; border-radius: 1px; background: oklch(0.8 0.006 85); opacity: 0.55; transition: background 200ms; }
/* Each needle turns toward the pointer: native atan2() on the two distances. */
.home .next:when(--over) .hv-needles span { rotate: atan2(calc(var(--my) - var(--ny)), calc(var(--mx) - var(--nx))); }
/* The vermilion copy shows only around the pointer: a radial mask at the pointer position. */
.home .hv-needles.near { display: none; }
.home .next:when(--over) .hv-needles.near { display: block; mask-image: radial-gradient(circle 150px at var(--mx) var(--my), #000 0 45%, transparent 100%); }
.home .hv-needles.near span { background: var(--color-rx); opacity: 1; scale: 1.5 1; }
@media (prefers-reduced-motion: reduce) { .home .next .hv-needles span { rotate: none; } .home .next .hv-needles.near { display: none; } }
.home .next .hv-wrap { position: relative; }
.home .next .hv-next-band .hv-wrap { padding-bottom: 0; }
.home .next .hv-next-band .hv-head { margin-bottom: 0; padding-bottom: clamp(36px, 5vw, 56px); }
.home .next .hv-sheet { padding-top: 0; }
.home .hv-h2.next-h { flex: 1 1 480px; max-width: 15ch; }
.home .hv-spec { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); border-radius: 3px; overflow: hidden; }
.home .cell { display: flex; flex-direction: column; gap: 8px; min-height: 168px; padding: 18px 18px 20px; border: 0; background: var(--color-paper); color: var(--color-ink); font: inherit; text-align: left; transition: background 300ms; }
.home button.cell { cursor: pointer; }
.home button.cell:hover { background: var(--color-paper-2); }
.home .cell > span:nth-child(1) { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--color-mute); }
.home .cell > span:nth-child(2) { font-family: var(--font-mono); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--color-rx-strong); }
.home .cell > span:nth-child(3) { min-height: 20px; font-family: var(--font-mono); font-size: 13.5px; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home .cell > span:nth-child(4) { font-size: 13.5px; line-height: 1.5; color: var(--color-ink-2); text-wrap: pretty; }
.home .cell [data-when] { display: none; }
/* Reactive DOM text follows states. The value sources below (mouse(), element(), viewport(),
   live()) update their custom property, which a native CSS counter prints: calc(var(--x) / 1px)
   turns a length into the integer a counter needs. */
.home .cell .n::after { content: counter(n); }
.home .cell .n.px::after { content: counter(n) "px"; }
.home .next:when(--over) .c-mouse [data-when="over"],
.home .next:when(not --over) .c-mouse [data-when="out"] { display: inline; }
.home .c-mouse .x { counter-reset: n calc(var(--px) / 1px); }
.home .c-mouse .y { counter-reset: n calc(var(--py) / 1px); }
.home .c-element { --w: element(width); --h: element(height); }
.home .c-element .w { counter-reset: n calc(var(--w) / 1px); }
.home .c-element .h { counter-reset: n calc(var(--h) / 1px); }
.home .c-viewport { --vw: viewport(width); --vh: viewport(height); }
.home .c-viewport .w { counter-reset: n calc(var(--vw) / 1px); }
.home .c-viewport .h { counter-reset: n calc(var(--vh) / 1px); }
/* visible() is 1 or 0: native calc() shows one of the two words. */
.home .c-visible { --seen: visible(); }
.home .c-visible .v > span { display: inline-block; overflow: hidden; vertical-align: bottom; }
.home .c-visible .v .yes { max-width: calc(var(--seen) * 5em); }
.home .c-visible .v .no { max-width: calc((1 - var(--seen)) * 5em); }
.home .c-live { --tick: live(random(0, 999, by 1), 1s); }
.home .c-live .t { counter-reset: n var(--tick); }
/* random() and pick() run in the click's mutation, so the drawn value is a state. */
.home .c-random { --roll: state(0.42); }
.home .c-random:on(click) { --roll: set(random(0, 1, by 0.001)); }
.home .c-random .r { content: var(--roll); }
.home .c-pick { --word: state("Hello!"); }
.home .c-pick:on(click) { --word: set(pick("Hello!", "Bonjour!", "Hola!", "Ciao!")); }
.home .c-pick .p { content: var(--word); }
.home .c-previous .v { content: previous(--count); }
.home .c-direction .v { content: when(direction(--count) > 0, "1  ▲ up", when(direction(--count) < 0, "-1  ▼ down", "0  no change yet")); }
.home .c-when .v { content: when(--count > 5, "many", "few"); }
.home:when(--count > 5) .c-whensel [data-when="yes"],
.home:when(--count <= 5) .c-whensel [data-when="no"] { display: inline; }
.home .c-changed [data-when="idle"] { display: inline; }
@keyframes hv-cell { 0%, 80% { background: oklch(0.96 0.03 45); } }
.home:changed(--count) .c-changed { animation: hv-cell 900ms var(--hv-ease); }
.home:changed(--count) .c-changed [data-when="idle"] { display: none; }
.home:changed(--count) .c-changed [data-when="now"] { display: inline; }
.home .hv-next-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 14px; }
.home .hv-next-links a:first-child { font-weight: 500; }
.home .hv-next-links a:last-child { color: var(--color-ink-2); }

/* ── Start ──────────────────────────────────────────────────────────────── */
.home .hv-start { border-top: 1px solid var(--color-ink); }
.home .hv-start .hv-wrap { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(48px, 6vw, 80px); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.home .hv-start-top { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; justify-content: space-between; }
.home .hv-start-top > div:first-child { flex: 1 1 480px; display: flex; flex-direction: column; gap: 18px; }
.home .hv-start h2 { margin: 0; max-width: 10ch; font-size: clamp(56px, 9vw, 132px); line-height: 0.88; letter-spacing: -0.055em; font-weight: 600; }
.home .hv-start h2 span { color: var(--color-rx); }
.home .hv-snippet { flex: 0 1 480px; min-width: 0; border: 1px solid var(--color-ink); border-radius: 3px; background: var(--color-paper-2); }
.home .hv-snippet > div:first-child { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--color-line); font-family: var(--font-mono); font-size: 12px; color: var(--color-ink-2); }
.home .hv-snippet button { height: 26px; padding: 0 10px; border: 0; border-radius: 2px; background: var(--color-ink); color: var(--color-on-ink); font-family: var(--font-mono); font-size: 11.5px; cursor: pointer; }
.home .hv-snippet pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 24px; color: var(--color-ink-2); }
.home .hv-snippet pre b { font-weight: 400; color: var(--color-ink); }
.home .hv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); border-top: 1px solid var(--color-ink); }
.home .hv-steps a { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 22px 0; text-decoration: none; color: inherit; }
.home .hv-steps a:hover { color: var(--color-rx-strong); }
.home .hv-steps a span:nth-child(1) { font-family: var(--font-mono); font-size: 12px; color: var(--color-mute); }
.home .hv-steps a span:nth-child(2) { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.home .hv-steps a span:nth-child(3) { font-size: 14px; color: var(--color-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { transition: none !important; animation: none !important; }
  /* No replay (its clock is an animation): the menu, the caret and the readouts follow --open at once. */
  .home:when(--open) .menu { display: block; }
  .home:when(--open) .nav .caret { rotate: 180deg; }
  .home .hv-watch :is(.open-v, .aria-v) { content: when(--open, "true", "false"); }
  .home .hv-nodes .live.state { content: when(--open, "--open: true", "--open: false"); }
  .home .hv-nodes .live.dom { content: when(--open, "aria-expanded=\"true\"", "aria-expanded=\"false\""); }
  .home .hv-nodes .live.style { content: when(--open, ".menu → display: block", ".menu → display: none"); }
}