/*
  Heller's Town look (ht-shared): the client portal's component look, carried to the four sites.
  Source: branch portal-look-system, portal/app/public/look.css and tokens.css (Jack's picks, each
  from Uiverse.io under MIT, credited at its component). LOOK-PORT.md says what came from where and
  what was changed on the way.

  Who wins where (the ruling for this port, 2026-10-29):
    colour    hellers-town-brand: every colour is a --ht-* brand token or a color-mix of two of them,
              and every text pair here holds the brand's 4.5:1 gate (test/look.test.mjs measures it)
    shape     the portal: the three button tiers, the keycap edge, the layered rings, the press glow,
              the flair frame, the bar field, the round checkbox, the pill switch, the tiles, the TV
    motion    the house (beautiful_animation and MOTION-SPEC): the brand's curves and times only,
              transform, translate, scale and opacity only, nothing moves on its own, no overshoot,
              and every hover inside @media (hover: hover) (a hover that moves: (pointer: fine) too)
  No colour, curve or duration is written here (npm test, css-tokens C1, enforces it).

  Tiers (the portal's three, by where a control sits):
    data-ht-tier="1"  Showroom   a hero or a big moment: the ringed primary, the press glow
    (default) or "2"  Floor      an ordinary section: the keycap edge
    data-ht-tier="3"  Bench      forms and dialogs, wherever they sit: flat, a colour change only
  A form or a dialog is a Bench wherever it sits, as in the portal.
*/

/* ---------------------------------------------------------------- the look's own values */
:root {
  /* shape (the portal's): a control's corner, the bar field's corner, a tile's corner */
  --ht-look-r-control: 10px;
  --ht-look-r-bar: 6px;
  --ht-look-r-tile: 14px;
  /* the logo's world as one frame: lilac, the dusk, the dawn (pick 15's rose, violet and clay) */
  --ht-look-flair: linear-gradient(135deg, var(--ht-dusk-lift), var(--ht-dusk) 45%, var(--ht-dawn));
  /* the round checkbox's ring (pick 33), the same three */
  --ht-look-check-ring: linear-gradient(43deg, var(--ht-dusk-deep) 0%, var(--ht-dusk) 46%, var(--ht-dawn-hot) 100%);
  /* the dusk sky (pick 21), darker than the portal's so the secondary words hold 4.5:1 to its foot */
  --ht-sky-top: var(--ht-void);
  --ht-sky-mid: color-mix(in srgb, var(--ht-dusk-deep) 18%, var(--ht-void));
  --ht-sky-low: color-mix(in srgb, var(--ht-dusk-deep) 34%, var(--ht-void));
  --ht-sky-foot: color-mix(in srgb, var(--ht-dusk-deep) 40%, var(--ht-void));
  --ht-sky-glow: color-mix(in srgb, var(--ht-dawn-hot) 9%, transparent);
  --ht-sky-star: color-mix(in srgb, var(--ht-lint) 88%, transparent);
  --ht-sky-star-dim: color-mix(in srgb, var(--ht-lint) 45%, transparent);
  /* the Floor's values; the other tiers below change them for everything inside */
  --ht-t-card-radius: var(--ht-radius-card);
  --ht-t-card-pad: clamp(1.25rem, 2.4vw, 1.5rem);
  --ht-t-lift: -1px;
}
[data-ht-tier="1"] {
  --ht-t-card-radius: calc(var(--ht-radius-card) + 4px);
  --ht-t-card-pad: clamp(1.5rem, 3vw, 2rem);
  --ht-t-lift: -2px;
}
[data-ht-tier="3"], form, dialog {
  --ht-t-card-radius: var(--ht-look-r-control);
  --ht-t-card-pad: 1rem;
  --ht-t-lift: 0px;
}

/* The two grounds. A key, a card and a field read these, so a section's register decides them. */
:root, .on-paper {
  --ht-look-face: var(--ht-paper);
  --ht-look-well: var(--ht-paper-2);
  --ht-look-solid: var(--ht-accent-deep);
  --ht-look-solid-ink: var(--ht-lint);
  --ht-look-solid-hover: color-mix(in srgb, var(--ht-accent-deep) 86%, var(--ht-void));
  --ht-look-edge: color-mix(in srgb, var(--ht-accent-deep) 62%, var(--ht-void));
  --ht-look-line: color-mix(in srgb, var(--ht-accent-deep) 34%, var(--ht-paper));
  --ht-look-control-line: color-mix(in srgb, var(--ht-ink-3) 78%, var(--ht-paper));
  --ht-look-shade: color-mix(in srgb, var(--ht-ink) 10%, transparent);
  --ht-look-shade-deep: color-mix(in srgb, var(--ht-ink) 26%, transparent);
  --ht-look-shine: color-mix(in srgb, var(--ht-lint) 55%, transparent);
  --ht-look-card-edge: inset 0 1px 0 var(--ht-look-shine), 0 1px 0 0 color-mix(in srgb, var(--ht-ink) 14%, transparent), 0 6px 16px -10px var(--ht-look-shade-deep);
  /* Showroom primary (pick 2): a pale key in the accent's rings; ink words on it (14:1 and more) */
  --ht-look-show: color-mix(in srgb, var(--ht-accent-lift) 38%, var(--ht-paper));
  --ht-look-show-ink: var(--ht-ink);
  --ht-look-show-glow: var(--ht-accent-lift);
  --ht-look-show-line: var(--ht-accent-deep);
  --ht-look-show-ring: var(--ht-accent);
  --ht-look-show-ring-hover: color-mix(in srgb, var(--ht-accent) 70%, var(--ht-accent-deep));
  --ht-look-glow: color-mix(in srgb, var(--ht-accent) 34%, transparent);
  --ht-look-bad: var(--ht-ember-deep);
  --ht-look-bad-ground: color-mix(in srgb, var(--ht-ember) 9%, var(--ht-paper));
  --ht-look-bad-line: color-mix(in srgb, var(--ht-ember) 45%, var(--ht-paper));
}
/* (the stat housing, a tile and a package's inside are dark grounds wherever they sit) */
.on-void, .ht-stats, .ht-tile, .ht-package__in {
  --ht-look-face: var(--ht-void-2);
  --ht-look-well: var(--ht-void-3);
  --ht-look-solid: var(--ht-accent);
  --ht-look-solid-ink: var(--ht-accent-ink);
  --ht-look-solid-hover: var(--ht-accent-lift);
  --ht-look-edge: color-mix(in srgb, var(--ht-accent) 42%, var(--ht-void));
  --ht-look-line: color-mix(in srgb, var(--ht-accent) 34%, var(--ht-void-2));
  --ht-look-control-line: var(--ht-lint-3);
  --ht-look-shade: color-mix(in srgb, var(--ht-void) 60%, transparent);
  --ht-look-shade-deep: color-mix(in srgb, var(--ht-void) 80%, transparent);
  --ht-look-shine: color-mix(in srgb, var(--ht-lint) 8%, transparent);
  --ht-look-card-edge: inset 0 1px 0 var(--ht-look-shine), 0 1px 0 0 var(--ht-void), 0 18px 40px -22px var(--ht-look-shade-deep);
  --ht-look-show: color-mix(in srgb, var(--ht-accent) 20%, var(--ht-void-2));
  --ht-look-show-ink: var(--ht-lint);
  --ht-look-show-glow: color-mix(in srgb, var(--ht-accent) 40%, var(--ht-void-2));
  --ht-look-show-line: var(--ht-void);
  --ht-look-show-ring: var(--ht-accent-deep);
  --ht-look-show-ring-hover: var(--ht-accent);
  --ht-look-glow: color-mix(in srgb, var(--ht-accent) 30%, transparent);
  --ht-look-bad: var(--ht-dawn);
  --ht-look-bad-ground: color-mix(in srgb, var(--ht-dawn) 10%, var(--ht-void-2));
  --ht-look-bad-line: color-mix(in srgb, var(--ht-dawn) 40%, var(--ht-void-2));
}

/* ---------------------------------------------------------------- buttons, three tiers (picks 1 to 3)
   The box, the label and the house press (1 px, at once, back over the small time) are chrome.css's
   (the brand theme's on the drone); this adds each tier's face. Nothing here sets a transition on
   the button itself, so the press keeps its eased return. */

/* Floor (the default): the secondary key is the section's face with a soft edge under it, its
   words in the accent's text colour (the brand gate's pair: that colour on that ground) */
.ht-btn {
  background-color: var(--ht-look-face);
  color: var(--ht-accent-text, var(--ht-accent-deep));
  border-color: var(--ht-look-line);
  box-shadow: 0 1px 0 0 var(--ht-look-line), 0 1px 2px var(--ht-look-shade);
}
/* the primary: a keycap. The accent sits on a darker edge 2 px deep; pressed, the key goes down
   onto it (the house 1 px drop) and the edge under it is 1 px (pick 2's Floor, "violet on a
   keycap edge") */
.ht-btn.ht-btn--solid {
  background: var(--ht-look-solid);
  color: var(--ht-look-solid-ink);
  border-color: transparent;
  box-shadow: inset 0 1px 0 var(--ht-look-shine), 0 2px 0 0 var(--ht-look-edge);
}
.ht-btn.ht-btn--solid::before { background: var(--ht-look-solid-hover); }
.ht-btn.ht-btn--solid:is(:active, .is-pressed) { box-shadow: inset 0 1px 0 var(--ht-look-shine), 0 1px 0 0 var(--ht-look-edge); }
.ht-btn.is-pressed { translate: 0 1px; transition: none; }
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .ht-btn.ht-btn--solid:hover { background: var(--ht-look-solid-hover); }
}
/* the tertiary: words only, in the accent's text colour (the portal's link button) */
.ht-btn.ht-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
@media (hover: hover) { .ht-btn.ht-btn--ghost:hover { text-decoration: underline; text-underline-offset: .25em; } }

/* Showroom secondary (pick 3, Uiverse.io by TimTrayler): the press glows from where the finger or
   the pointer went down (look.js writes --ht-press-x and -y; a key press glows from the middle). The
   glow is the button's own ::after, clipped to it; it blooms on the small time while the press
   holds and fades on the exit curve when it lets go. None of it under reduced motion. */
[data-ht-tier="1"] .ht-btn:not(.ht-btn--solid):not(.ht-btn--ghost):not(:is(form, dialog) *) {
  --ht-press-x: 50%; --ht-press-y: 50%;
  overflow: clip;
  background-color: var(--ht-look-face);
  box-shadow: 0 1px 0 0 var(--ht-look-line), 0 14px 32px -16px var(--ht-look-shade-deep), 0 2px 6px var(--ht-look-shade);
}
[data-ht-tier="1"] .ht-btn:not(.ht-btn--solid):not(.ht-btn--ghost):not(:is(form, dialog) *)::before { inset: 0; }
[data-ht-tier="1"] .ht-btn:not(.ht-btn--solid):not(.ht-btn--ghost):not(:is(form, dialog) *)::after {
  content: ""; position: absolute; z-index: -1; left: var(--ht-press-x); top: var(--ht-press-y);
  width: 240%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--ht-look-glow), transparent);
  opacity: 0; transform: scale(.15);
  transition: opacity var(--ht-dur-m) var(--ht-ease-out), transform var(--ht-dur-m) var(--ht-ease-out);
}
[data-ht-tier="1"] .ht-btn:not(.ht-btn--solid):not(.ht-btn--ghost):not(:is(form, dialog) *):is(:active, .is-pressed)::after {
  opacity: 1; transform: scale(1);
  transition: opacity var(--ht-dur-s) var(--ht-ease-in), transform var(--ht-dur-s) var(--ht-ease-in);
}
@media (prefers-reduced-motion: reduce) {
  [data-ht-tier="1"] .ht-btn::after { display: none; }
}

/* Every Showroom key stands 9 px off above and below, the room the primary's rings need: in a row
   that stretches its items, a key beside the ringed one would otherwise grow to its 62 px margin
   box (measured on 3d's hero, 2026-10-29). */
[data-ht-tier="1"] .ht-btn:not(:is(form, dialog) *) { margin-block: 9px; }

/* Showroom primary (pick 2, Uiverse.io by SelfMadeSystem: the layered outline rings), in the
   section's accent. The rings are shadows outside the box, so the key keeps its 44 px and a 9 px
   margin keeps them off its neighbours. Hovered, the face clears and the ring deepens, at once. */
[data-ht-tier="1"] .ht-btn.ht-btn--solid:not(:is(form, dialog) *) {
  margin: 9px; border-color: transparent;
  background: var(--ht-look-show); color: var(--ht-look-show-ink);
  box-shadow: inset 0 1px 8px 1px var(--ht-look-show-glow), 0 2px 0 0 var(--ht-look-face), 0 -2px 0 0 var(--ht-look-show-line),
    -2px -2px 0 0 var(--ht-look-show-line), 2px -2px 0 0 var(--ht-look-show-line), 0 0 0 6px var(--ht-look-show-ring),
    0 -2px 0 7px var(--ht-look-face), 0 4px 0 7px var(--ht-look-show-line);
}
[data-ht-tier="1"] .ht-btn.ht-btn--solid:not(:is(form, dialog) *)::before { display: none; }
@media (hover: hover) {
  [data-ht-tier="1"] .ht-btn.ht-btn--solid:not(:is(form, dialog) *):hover {
    background: var(--ht-look-face);
    box-shadow: inset 0 1px 8px 1px var(--ht-look-show-glow), 0 2px 0 0 var(--ht-look-face), 0 -2px 0 0 var(--ht-look-show-line),
      -2px -2px 0 0 var(--ht-look-show-line), 2px -2px 0 0 var(--ht-look-show-line), 0 0 0 6px var(--ht-look-show-ring-hover),
      0 -2px 0 7px var(--ht-look-face), 0 4px 0 7px var(--ht-look-show-line);
  }
}
[data-ht-tier="1"] .ht-btn.ht-btn--solid:not(:is(form, dialog) *):is(:active, .is-pressed) {
  box-shadow: inset 0 1px 8px 1px var(--ht-look-show-glow), 0 1px 0 0 var(--ht-look-face), 0 -2px 0 0 var(--ht-look-show-line),
    -2px -2px 0 0 var(--ht-look-show-line), 2px -2px 0 0 var(--ht-look-show-line), 0 0 0 6px var(--ht-look-show-ring-hover),
    0 -2px 0 7px var(--ht-look-face), 0 3px 0 7px var(--ht-look-show-line);
}

/* Bench (forms, dialogs, data-ht-tier="3"): flat, no edge; a press changes the colour (and the
   house 1 px drop, which every control keeps) */
:is([data-ht-tier="3"], form, dialog) .ht-btn { box-shadow: none; }
:is([data-ht-tier="3"], form, dialog) .ht-btn.ht-btn--solid { box-shadow: none; }
:is([data-ht-tier="3"], form, dialog) .ht-btn:not(.ht-btn--solid):is(:active, .is-pressed) { background-color: var(--ht-look-well); }
:is([data-ht-tier="3"], form, dialog) .ht-btn.ht-btn--solid:is(:active, .is-pressed) { background: var(--ht-look-solid-hover); }

/* ---------------------------------------------------------------- the flair border (pick 15,
   Uiverse.io by alexruix: a gradient frame with a soft glow under it). The glow's blur is fixed;
   a hover only raises its opacity. */
.ht-flair {
  position: relative; isolation: isolate; box-sizing: border-box;
  padding: 1px; border-radius: var(--ht-t-card-radius); background: var(--ht-look-flair);
}
.ht-flair::before {
  content: ""; position: absolute; z-index: -1; inset: 18px 6% -10px; border-radius: inherit;
  background: var(--ht-look-flair); filter: blur(22px); opacity: .45; pointer-events: none;
  transition: opacity var(--ht-dur-m) var(--ht-ease-in);
}
@media (hover: hover) { .ht-flair:hover::before { opacity: .75; } }
.ht-flair > .ht-flair__in {
  box-sizing: border-box; height: 100%;
  border-radius: calc(var(--ht-t-card-radius) - 1px); padding: var(--ht-t-card-pad);
  background: var(--ht-look-face); color: var(--ht-fg, var(--ht-ink));
}

/* ---------------------------------------------------------------- cards, by tier (the portal's
   card anatomy: a face, a hairline, an edge under it; the Showroom's deeper, the Bench's flat).
   With a fine pointer a card rises 1 px (2 in the Showroom, none on the Bench) on the small time,
   by translate, so a reveal's transform on the same card is left alone. Never on focus. */
.ht-card {
  position: relative; box-sizing: border-box;
  border: var(--ht-border) solid var(--ht-rule); border-radius: var(--ht-t-card-radius);
  padding: var(--ht-t-card-pad);
  background: var(--ht-look-face); color: var(--ht-fg, var(--ht-ink));
  box-shadow: var(--ht-look-card-edge);
  transition: translate var(--ht-dur-s) var(--ht-ease-in);
}
[data-ht-tier="1"] .ht-card { box-shadow: var(--ht-look-card-edge), 0 14px 32px -16px var(--ht-look-shade-deep), 0 2px 6px var(--ht-look-shade); }
:is([data-ht-tier="3"], form, dialog) .ht-card { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .ht-card:not(form, dialog):not(:is([data-ht-tier="3"], form, dialog) *):hover { translate: 0 var(--ht-t-lift); }
}

/* ---------------------------------------------------------------- fields (the portal's base field;
   pick 10's bar for phone, email and search as .ht-input--bar). A field is a light well on either
   ground, with ink words (16:1); its focus is the house 2 px ring, at once. */
.ht-field { display: grid; gap: .45rem; align-content: start; }
.ht-field > label, .ht-label { font-size: var(--ht-fs-small); font-weight: 500; line-height: 1.3; color: var(--ht-fg, var(--ht-ink)); }
.ht-field__hint { margin: 0; font-size: var(--ht-fs-small); line-height: 1.45; color: var(--ht-fg-2, var(--ht-ink-2)); }
.ht-input {
  box-sizing: border-box; display: block; width: 100%; min-height: 48px; margin: 0;
  padding: .7rem 1.05rem;
  font: inherit; font-size: 1rem; line-height: 1.4;
  color: var(--ht-ink); background-color: var(--ht-paper);
  border: var(--ht-border) solid var(--ht-look-control-line); border-radius: var(--ht-radius-field);
}
.ht-input::placeholder { color: var(--ht-ink-3); opacity: 1; }
textarea.ht-input { min-height: 9rem; border-radius: var(--ht-radius-card); resize: vertical; }
select.ht-input {
  appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ht-ink-2) 50%), linear-gradient(135deg, var(--ht-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 1.4rem) 52%, calc(100% - 1.05rem) 52%;
  background-size: .35rem .35rem; background-repeat: no-repeat;
}
@media (hover: hover) { .ht-input:hover { border-color: var(--ht-ink-2); } }
.ht-input:focus-visible { outline: 2px solid var(--ht-accent-text, var(--ht-accent-deep)); outline-offset: 2px; border-color: var(--ht-ink-2); }
.ht-input[aria-invalid="true"] { border-color: var(--ht-ember); }
/* Pick 10 (Uiverse.io by Alaner-xs, the bar): a dark bar under a deep band along its top, its words
   bold in the mono; pointed at or typed in, it opens light and the band thins to a line. The pick
   wrote its words in the bar's own colour, so a filled field looked empty: here they are the light
   words on the bar (17:1). Nothing animates: a band never moves, the field simply opens. */
.ht-input.ht-input--bar {
  border-color: var(--ht-void-3); border-radius: var(--ht-look-r-bar);
  padding-top: 10px; background-color: var(--ht-void-2); color: var(--ht-lint);
  box-shadow: inset 0 10px 0 var(--ht-void-3);
  font-family: var(--ht-font-mono); font-weight: 500; letter-spacing: .01em;
}
.ht-input.ht-input--bar::placeholder { color: var(--ht-lint-2); }
.ht-input.ht-input--bar:focus {
  padding-top: 3px; border-color: var(--ht-look-control-line); background-color: var(--ht-paper); color: var(--ht-ink);
  box-shadow: inset 0 3px 0 var(--ht-void-3);
}
@media (hover: hover) {
  .ht-input.ht-input--bar:hover {
    padding-top: 3px; border-color: var(--ht-look-control-line); background-color: var(--ht-paper); color: var(--ht-ink);
    box-shadow: inset 0 3px 0 var(--ht-void-3);
  }
}
.ht-input.ht-input--bar:focus::placeholder { color: var(--ht-ink-3); }
@media (hover: hover) { .ht-input.ht-input--bar:hover::placeholder { color: var(--ht-ink-3); } }
.ht-input.ht-input--bar:focus-visible { box-shadow: inset 0 3px 0 var(--ht-accent-deep); }

/* ---------------------------------------------------------------- checkboxes and radios (pick 33,
   Uiverse.io by PriyanshuGupta28): a round button in the logo's ring with a light heart; pointed
   at, the heart narrows; ticked, the heart goes and the tick shows on the ring. 24 px (its label
   makes the target bigger). Radios: the same ring, a dot in the tick's ink when chosen. */
.ht-check, .ht-radio {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 24px; height: 24px; margin: 0; border: 0; border-radius: 50%; vertical-align: middle; cursor: pointer;
  background: radial-gradient(circle, var(--ht-paper) 0 7.5px, transparent 8px), var(--ht-look-check-ring);
  box-shadow: inset 0 0 0 1px var(--ht-dusk-deep);
}
@media (hover: hover) { .ht-check:not(:checked):hover { background: radial-gradient(circle, var(--ht-paper) 0 5.5px, transparent 6px), var(--ht-look-check-ring); } }
.ht-check:checked { background: var(--ht-look-check-ring); }
.ht-check:checked::after {
  content: ""; position: absolute; left: 8.5px; top: 4px; width: 6px; height: 11px; box-sizing: content-box;
  border: solid var(--ht-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.ht-radio:checked { background: radial-gradient(circle, var(--ht-ink) 0 4.5px, transparent 5px), var(--ht-look-check-ring); }
.ht-check:focus-visible, .ht-radio:focus-visible { outline: 2px solid var(--ht-accent-text, var(--ht-accent-deep)); outline-offset: 3px; }
.ht-check:disabled, .ht-radio:disabled { opacity: .55; cursor: not-allowed; }
.ht-choice { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; }

/* ---------------------------------------------------------------- the switch (pick 26, Uiverse.io by
   MuhammadHasann): a checkbox with the switch role, drawn as the dark housing with its ring and a
   knob that turns a quarter and more as it crosses, lit in the accent when on. The pick's sparkles
   flew out on every change; they are left out (six moving parts on one control, the house allows
   two). The plain pill, .ht-toggle--plain, is for menus and dense settings. */
.ht-toggle {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; box-sizing: border-box;
  width: 82px; height: 44px; margin: 10px; padding: 0; cursor: pointer; vertical-align: middle;
  border: 1px solid var(--ht-void-3); border-bottom-width: 0; border-radius: var(--ht-radius-pill);
  background: radial-gradient(circle at 50% -100%, color-mix(in srgb, var(--ht-lint-3) 55%, var(--ht-void)) 0%, var(--ht-void) 80%);
  box-shadow: 0 0 0 9px var(--ht-void-2), 0 0 0 10px var(--ht-void-3);
}
.ht-toggle::before {
  content: ""; position: absolute; left: 4px; top: 5px; width: 32px; height: 32px; box-sizing: border-box;
  border: 1px solid var(--ht-void-3); border-bottom-width: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 22%, var(--ht-lint-2) 0 2px, transparent 2.5px), radial-gradient(circle at 50% 0%, var(--ht-void-3) 0%, var(--ht-void-2) 100%);
  transition: transform var(--ht-dur-s) var(--ht-ease-out);
}
.ht-toggle:checked {
  border-color: var(--ht-accent-deep);
  background: radial-gradient(circle at 50% -100%, var(--ht-accent) 0%, var(--ht-void) 80%);
}
.ht-toggle:checked::before {
  transform: translateX(40px) rotate(-225deg);
  border-color: var(--ht-accent);
  background: radial-gradient(circle at 50% 22%, var(--ht-accent-ink) 0 2px, transparent 2.5px), radial-gradient(circle at 50% 0%, var(--ht-accent-lift) 0%, var(--ht-accent) 100%);
  transition: transform var(--ht-dur-m) var(--ht-ease-in);
}
.ht-toggle:focus-visible { outline: 2px solid var(--ht-accent-text, var(--ht-accent)); outline-offset: 12px; }
.ht-toggle:disabled { opacity: .55; cursor: not-allowed; }
.ht-toggle.ht-toggle--plain {
  width: 40px; height: 22px; margin: 0; border: 1px solid var(--ht-look-control-line); box-shadow: none;
  background: var(--ht-look-well);
}
.ht-toggle.ht-toggle--plain::before { left: 3px; top: 3px; width: 14px; height: 14px; border: 0; background: var(--ht-fg-3, var(--ht-ink-3)); }
.ht-toggle.ht-toggle--plain:checked { border-color: var(--ht-look-solid); background: var(--ht-look-solid); }
.ht-toggle.ht-toggle--plain:checked::before { transform: translateX(18px); background: var(--ht-look-solid-ink); }
.ht-toggle.ht-toggle--plain:focus-visible { outline-offset: 3px; }

/* ---------------------------------------------------------------- a message (pick 17, Uiverse.io by
   kennyotsu: the error message): the soft box, the X in its circle, what went wrong in bold, then
   what to do. Its words in the brand's ember (paper) or dawn (void), on its own ground, 4.5:1. */
.ht-notice {
  display: flex; align-items: flex-start; gap: .75rem; box-sizing: border-box;
  padding: 1rem; border: var(--ht-border) solid var(--ht-look-line); border-radius: var(--ht-look-r-control);
  background: var(--ht-look-face); color: var(--ht-fg, var(--ht-ink));
  font-size: var(--ht-fs-small); line-height: 1.5;
}
.ht-notice::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; box-sizing: border-box;
  border: 2px solid currentColor; border-radius: 50%;
  background: linear-gradient(currentColor 0 0) 50% 50% / 2px 10px no-repeat, linear-gradient(currentColor 0 0) 50% 50% / 10px 2px no-repeat;
  rotate: 45deg;
}
.ht-notice.ht-notice--ok::before { rotate: none; background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px); }
.ht-notice__title { margin: 0 0 .25rem; font-weight: 500; }
.ht-notice p { margin: 0 0 .25rem; }
.ht-notice p:last-child { margin-bottom: 0; }
.ht-notice.ht-notice--bad { border-color: var(--ht-look-bad-line); background: var(--ht-look-bad-ground); color: var(--ht-look-bad); }
.ht-notice.ht-notice--bad a { color: inherit; font-weight: 500; }

/* ---------------------------------------------------------------- the dusk sky (pick 21, Uiverse.io by
   amir_6539), behind a dark hero: a still sky of 69 stars in three sizes over the logo's dusk (a field
   2,000 px wide and 1,000 tall, so a hero of ordinary height holds most of them), a
   warm pocket at its foot. The portal let the stars drift; here nothing moves on its own (the house:
   no idle, no positional drift), so the sky is the same with or without motion and costs nothing
   after its first paint. Its host takes the void's words: every one holds 4.5:1 to the sky's foot. */
.ht-sky-host { position: relative; isolation: isolate; background: var(--ht-sky-top); }
.ht-sky-host > :not(.ht-sky) { position: relative; z-index: 1; }
.ht-sky {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; contain: strict; pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 112%, var(--ht-sky-glow), transparent 70%),
    linear-gradient(180deg, var(--ht-sky-top) 0%, var(--ht-sky-mid) 40%, var(--ht-sky-low) 78%, var(--ht-sky-foot) 100%);
}
.ht-sky__stars { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
.ht-sky__stars--1 {
  box-shadow: 1028px 5px var(--ht-sky-star-dim), 575px 322px var(--ht-sky-star-dim), 1275px 442px var(--ht-sky-star-dim), 405px 606px var(--ht-sky-star-dim), 659px 632px var(--ht-sky-star-dim), 1357px 521px var(--ht-sky-star-dim), 1633px 355px var(--ht-sky-star-dim), 1548px 638px var(--ht-sky-star-dim), 365px 232px var(--ht-sky-star-dim), 1037px 733px var(--ht-sky-star-dim), 1481px 387px var(--ht-sky-star-dim), 1804px 366px var(--ht-sky-star-dim), 1419px 991px var(--ht-sky-star-dim), 1876px 624px var(--ht-sky-star-dim), 452px 331px var(--ht-sky-star-dim), 693px 39px var(--ht-sky-star-dim), 1788px 329px var(--ht-sky-star-dim), 515px 858px var(--ht-sky-star-dim), 1252px 434px var(--ht-sky-star-dim), 137px 615px var(--ht-sky-star-dim), 98px 927px var(--ht-sky-star-dim), 531px 184px var(--ht-sky-star-dim), 271px 454px var(--ht-sky-star-dim), 358px 412px var(--ht-sky-star-dim), 561px 245px var(--ht-sky-star-dim), 1138px 745px var(--ht-sky-star-dim), 627px 527px var(--ht-sky-star-dim), 1110px 935px var(--ht-sky-star-dim), 1074px 649px var(--ht-sky-star-dim), 1058px 529px var(--ht-sky-star-dim), 743px 794px var(--ht-sky-star-dim), 972px 300px var(--ht-sky-star-dim), 212px 665px var(--ht-sky-star-dim), 727px 410px var(--ht-sky-star-dim), 1398px 633px var(--ht-sky-star-dim), 564px 750px var(--ht-sky-star-dim), 1376px 603px var(--ht-sky-star-dim), 673px 611px var(--ht-sky-star-dim), 1686px 90px var(--ht-sky-star-dim), 1868px 769px var(--ht-sky-star-dim), 1706px 731px var(--ht-sky-star-dim), 1029px 204px var(--ht-sky-star-dim), 148px 143px var(--ht-sky-star-dim), 311px 76px var(--ht-sky-star-dim), 862px 107px var(--ht-sky-star-dim);
}
.ht-sky__stars--2 {
  width: 2px; height: 2px;
  box-shadow: 1382px 89px var(--ht-sky-star), 1450px 86px var(--ht-sky-star), 714px 863px var(--ht-sky-star), 1065px 813px var(--ht-sky-star), 348px 837px var(--ht-sky-star), 637px 498px var(--ht-sky-star), 876px 582px var(--ht-sky-star), 1649px 182px var(--ht-sky-star), 614px 381px var(--ht-sky-star), 1267px 667px var(--ht-sky-star), 338px 909px var(--ht-sky-star), 1955px 706px var(--ht-sky-star), 761px 138px var(--ht-sky-star), 413px 411px var(--ht-sky-star), 2px 487px var(--ht-sky-star), 1414px 419px var(--ht-sky-star);
}
.ht-sky__stars--3 {
  width: 3px; height: 3px;
  box-shadow: 1393px 488px var(--ht-sky-star), 676px 760px var(--ht-sky-star), 1651px 313px var(--ht-sky-star), 921px 144px var(--ht-sky-star), 63px 935px var(--ht-sky-star), 777px 829px var(--ht-sky-star), 1385px 807px var(--ht-sky-star), 214px 59px var(--ht-sky-star);
}

/* ---------------------------------------------------------------- the stat card (pick 13, Uiverse.io by
   Spacious74: the statistics card): figures as panels in one dark housing, each figure in the mono
   and the logo's light, its words under it. The pick's light ran round the housing for ever; here
   it rests at one corner. A figure never counts up (house R23): it is printed, and it stays. */
.ht-stats {
  --ht-bg: var(--ht-void); --ht-bg-2: var(--ht-void-2); --ht-fg: var(--ht-lint); --ht-fg-2: var(--ht-lint-2); --ht-fg-3: var(--ht-lint-3);
  --ht-accent-text: var(--ht-accent);
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem;
  margin: 0; padding: 1rem; border-radius: var(--ht-radius-card);
  background: conic-gradient(from 200deg, transparent 0deg 300deg, color-mix(in srgb, var(--ht-dusk-lift) 45%, transparent) 335deg, transparent 360deg), var(--ht-void-3);
  color: var(--ht-lint);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ht-lint) 8%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--ht-void) 80%, transparent);
}
.ht-stats::before { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: calc(var(--ht-radius-card) - 1px); background: var(--ht-void); }
.ht-stat {
  display: flex; flex-direction: column; min-height: 108px; margin: 0; box-sizing: border-box;
  padding: .75rem 1rem 1rem; border-radius: 12px; border: 1px solid var(--ht-void-3);
  background: radial-gradient(circle 220px at 0% 0%, var(--ht-void-3), var(--ht-void-2));
  background-color: var(--ht-void-2);
}
.ht-stat dt, .ht-stat__label {
  margin: 0; min-height: 2.6em; font-size: var(--ht-fs-small); font-weight: 500; line-height: 1.3; color: var(--ht-lint-2);
}
.ht-stat dd { margin: .25rem 0 0; font-size: var(--ht-fs-small); line-height: 1.4; color: var(--ht-lint-2); }
.ht-stat .ht-stat__n {
  margin: .5rem 0 0; font-family: var(--ht-font-mono); font-size: 2.5rem; font-weight: 500; line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--ht-lint);
  background: linear-gradient(45deg, var(--ht-dusk-lift), var(--ht-lint) 45%, var(--ht-dawn-hot));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------- the tiles: the three kinds of
   work as entrances (pick 14, Uiverse.io by Javierrocadev: the dark tile whose glow moves on hover;
   pick 15's frame on hover). Each tile is one link and carries its site's data-company, so the glow
   is that site's own colour. A hover moves two things, the tile's glow and the arrow by its
   name (the pick also slid each row of keys, which the house's two per control rules out). Focus
   shows the ring at once and moves nothing. */
.ht-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ht-tile {
  --ht-bg: var(--ht-void-3); --ht-fg: var(--ht-lint); --ht-fg-2: var(--ht-lint-2); --ht-accent-text: var(--ht-accent);
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; gap: .5rem; min-height: 168px;
  padding: .875rem .875rem 1rem; border: 1px solid var(--ht-void-3); border-radius: var(--ht-look-r-tile);
  background: var(--ht-void-3); color: var(--ht-lint); text-decoration: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ht-lint) 6%, transparent);
}
.ht-tile::before {
  content: ""; position: absolute; z-index: -1; left: -34%; top: 62%; width: 90%; height: 80%; border-radius: 50%;
  background: var(--ht-accent); opacity: .16; filter: blur(42px); pointer-events: none;
  transition: transform var(--ht-dur-l) var(--ht-ease-in), opacity var(--ht-dur-l) var(--ht-ease-in);
}
.ht-tile::after {
  content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--ht-look-flair); opacity: 0;
  -webkit-mask: linear-gradient(var(--ht-void) 0 0) content-box, linear-gradient(var(--ht-void) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--ht-void) 0 0) content-box exclude, linear-gradient(var(--ht-void) 0 0);
  transition: opacity var(--ht-dur-m) var(--ht-ease-in);
}
.ht-tile__name { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.25; color: var(--ht-lint); }
.ht-tile__name::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ht-accent); box-shadow: 0 0 8px var(--ht-accent); }
.ht-tile__name::after {
  content: ""; width: 8px; height: 8px; margin-left: auto; flex: none;
  border-top: 2px solid var(--ht-lint-2); border-right: 2px solid var(--ht-lint-2);
  transform: translateX(-6px) rotate(45deg); opacity: 0;
  transition: transform var(--ht-dur-s) var(--ht-ease-in), opacity var(--ht-dur-s) var(--ht-ease-in);
}
.ht-tile__line { margin: 0; font-size: var(--ht-fs-small); line-height: 1.45; color: var(--ht-lint-2); }
.ht-tile__list {
  display: grid; gap: 6px; margin: auto 0 0; padding: .5rem; list-style: none; border-radius: 10px;
  background: var(--ht-void-2); box-shadow: inset 0 2px 8px var(--ht-void); font-size: var(--ht-fs-small);
}
.ht-tile__list li { margin: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--ht-void-3); background: var(--ht-void-3); color: var(--ht-lint); }
.ht-tile:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ht-tile:hover::before { transform: translate(30%, -40%); opacity: .26; }
  .ht-tile:hover::after { opacity: 1; }
  .ht-tile:hover .ht-tile__name::after { transform: translateX(0) rotate(45deg); opacity: 1; }
}

/* ---------------------------------------------------------------- the package (pick 24, Uiverse.io by
   Cobp): a price or an offer as a frame in the accent's deep, the dusk and the ember, dark inside,
   its figure large in the mono, what it holds as a list, and one way on. */
.ht-package {
  --ht-bg: var(--ht-void-2); --ht-fg: var(--ht-lint); --ht-fg-2: var(--ht-lint-2); --ht-accent-text: var(--ht-accent);
  display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 360px; margin: 0;
  padding: 4px; border-radius: var(--ht-radius-frame);
  background: linear-gradient(to top right, var(--ht-accent-deep), var(--ht-dusk-deep) 40%, var(--ht-ember));
  background-color: var(--ht-dusk-deep);
}
.ht-package__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; color: var(--ht-lint); }
.ht-package__top h2, .ht-package__top h3, .ht-package__name { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.2; color: inherit; }
.ht-package__tag { font-size: var(--ht-fs-small); font-weight: 500; font-style: italic; color: var(--ht-lint); }
.ht-package__in {
  display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.5rem 1.5rem;
  border-radius: calc(var(--ht-radius-frame) - 4px); background: var(--ht-void-2); color: var(--ht-lint-2); font-size: var(--ht-fs-small);
}
.ht-package__n { margin: 0; color: var(--ht-lint-2); }
.ht-package__n b, .ht-package__n strong { font-family: var(--ht-font-mono); font-size: 2.25rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--ht-lint); margin-right: .25rem; }
.ht-package__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ht-package__list li { display: flex; align-items: baseline; gap: .5rem; color: var(--ht-lint); }
.ht-package__list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ht-accent); translate: 0 -1px; }

/* ---------------------------------------------------------------- a note on an answer (pick 9,
   Uiverse.io by mihocsaszilard): a word with something to add is underlined in the accent, and its
   note shows in a small bubble above it on hover and on keyboard focus. Hovered, it fades in on the
   small time; focused, it is simply there (no motion on focus). The pick's word bounced for ever;
   here it is still. */
.ht-note { position: relative; display: inline; border-bottom: 2px solid var(--ht-accent); cursor: help; }
.ht-note:focus-visible { outline: 2px solid var(--ht-accent-text, var(--ht-accent-deep)); outline-offset: 2px; border-radius: 2px; }
.ht-note__tip {
  position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 260px;
  padding: .3em .6em; border-radius: .25em; box-sizing: border-box;
  background: var(--ht-void-2); color: var(--ht-lint);
  font-size: var(--ht-fs-small); font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
  pointer-events: none; display: none; translate: -50% 0;
}
.ht-note__tip::before { content: ""; position: absolute; left: 50%; bottom: -.25em; width: .6em; height: .6em; background: inherit; translate: -50% 0; rotate: 45deg; }
.ht-note:focus-visible .ht-note__tip { display: block; }
@media (hover: hover) {
  .ht-note:hover .ht-note__tip { display: block; opacity: 1; transition: opacity var(--ht-dur-s) var(--ht-ease-in); }
  @starting-style { .ht-note:hover .ht-note__tip { opacity: 0; } }
}

/* ---------------------------------------------------------------- the long wait (pick 27, Uiverse.io by
   dovatgabriel: Newton's cradle), beside "Sending" while a form waits. It comes in only once the
   wait has run a moment (a quick send never flashes it); its swing is the one loop a page may run,
   and only while something is really waiting: out on the entrance curve (to a stop), back on the
   exit curve. Under reduced motion it is four still balls. */
.ht-cradle {
  position: relative; display: inline-flex; justify-content: center; flex: none; box-sizing: border-box;
  width: 40px; height: 34px; margin: 0 6px; padding-top: 3px; vertical-align: middle;
  opacity: 0; animation: ht-cradle-in var(--ht-dur-s) var(--ht-ease-in) var(--ht-dur-l) forwards;
}
.ht-cradle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--ht-fg-3, var(--ht-ink-3)); }
.ht-cradle > span { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; width: 9px; transform-origin: center top; }
.ht-cradle > span::before { content: ""; position: absolute; top: 0; bottom: 4px; left: 50%; width: 1px; margin-left: -.5px; background: var(--ht-fg-3, var(--ht-ink-3)); }
.ht-cradle > span::after { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ht-accent-text, var(--ht-accent-deep)); }
@media (prefers-reduced-motion: no-preference) {
  .ht-cradle > span:first-child { animation: ht-cradle-swing calc(var(--ht-dur-l) * 2) linear infinite; }
  .ht-cradle > span:last-child { animation: ht-cradle-swing-2 calc(var(--ht-dur-l) * 2) linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .ht-cradle { opacity: 1; animation: none; } }
@keyframes ht-cradle-in { to { opacity: 1; } }
@keyframes ht-cradle-swing { 0% { transform: rotate(0deg); animation-timing-function: var(--ht-ease-in); } 25% { transform: rotate(70deg); animation-timing-function: var(--ht-ease-out); } 50%, 100% { transform: rotate(0deg); } }
@keyframes ht-cradle-swing-2 { 0%, 50% { transform: rotate(0deg); animation-timing-function: var(--ht-ease-in); } 75% { transform: rotate(-70deg); animation-timing-function: var(--ht-ease-out); } 100% { transform: rotate(0deg); } }

/* ---------------------------------------------------------------- the file drop (pick 28, Uiverse.io by
   escannord): a dashed box with its words in the middle; a file dragged over it lights it (look.js
   sets .is-over). The file field inside is the one control: out of sight but reachable, its focus
   drawn on the box. */
.ht-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  box-sizing: border-box; width: 100%; min-height: 160px; padding: 1rem;
  border: 2px dashed var(--ht-look-control-line); border-radius: var(--ht-look-r-control);
  background: var(--ht-look-face); color: var(--ht-fg-2, var(--ht-ink-2)); text-align: center; cursor: pointer;
}
.ht-drop::before {
  content: ""; width: 22px; height: 28px; margin-bottom: .25rem; box-sizing: border-box;
  border: 2px solid var(--ht-accent-text, var(--ht-accent-deep)); border-radius: 3px 9px 3px 3px;
}
.ht-drop__title { color: var(--ht-fg, var(--ht-ink)); font-weight: 500; }
.ht-drop.is-over { border-color: var(--ht-accent-text, var(--ht-accent-deep)); }
@media (hover: hover) { .ht-drop:hover { border-color: var(--ht-accent-text, var(--ht-accent-deep)); } }
.ht-drop:focus-within { outline: 2px solid var(--ht-accent-text, var(--ht-accent-deep)); outline-offset: 2px; }
.ht-drop__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- the 404 television (pick 22,
   Uiverse.io by Praashoo7: the old television), in the logo's colours: an ember set on dark feet,
   two antennas tipped in the dawn, a dark screen with dusk static and a warm 404. Two elements:
   <div class="ht-tv" aria-hidden="true"><span class="ht-tv__screen">404</span></div>
   The pick's static ran for ever; here it switches on once, on the long time, and then holds. */
.ht-tv {
  position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  width: 168px; margin: 58px 0 28px; padding: 12px 40px 12px 12px;
  border-radius: 16px; background: var(--ht-ember);
  background-image: radial-gradient(circle, var(--ht-ember-deep) 0 6px, var(--ht-dawn) 6.5px 9px, transparent 9.5px), radial-gradient(circle, var(--ht-ember-deep) 0 6px, var(--ht-dawn) 6.5px 9px, transparent 9.5px);
  background-size: 20px 20px; background-position: calc(100% - 10px) 30%, calc(100% - 10px) 72%; background-repeat: no-repeat;
  box-shadow: inset 0 -6px 0 var(--ht-ember-deep), inset 0 0 0 2px var(--ht-ember-deep);
}
.ht-tv::before {
  content: ""; position: absolute; left: 44px; top: -56px; width: 72px; height: 58px; pointer-events: none;
  background:
    radial-gradient(circle, var(--ht-dawn) 0 5px, transparent 5.5px) 0 0 / 12px 12px no-repeat,
    radial-gradient(circle, var(--ht-dawn) 0 5px, transparent 5.5px) 100% 0 / 12px 12px no-repeat,
    linear-gradient(to top right, transparent calc(50% - 2px), var(--ht-void-3) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) 4px 6px / 34px 52px no-repeat,
    linear-gradient(to top left, transparent calc(50% - 2px), var(--ht-void-3) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) calc(100% - 4px) 6px / 34px 52px no-repeat;
}
.ht-tv::after { content: ""; position: absolute; left: 29px; bottom: -8px; width: 110px; height: 8px; border-radius: 0 0 8px 8px; background: var(--ht-void-3); }
.ht-tv__screen {
  position: relative; flex: 1 1 auto; display: grid; place-items: center; height: 86px; overflow: hidden;
  border-radius: 12px; background: var(--ht-void);
  box-shadow: inset 0 0 0 3px var(--ht-ember-deep), inset 0 0 18px var(--ht-dusk-deep);
  font-family: var(--ht-font-mono); font-size: 1.9rem; font-weight: 500; line-height: 1; letter-spacing: .06em;
  color: var(--ht-dawn-hot); text-shadow: 0 0 12px var(--ht-ember);
}
.ht-tv__screen::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none; mix-blend-mode: screen;
  background: repeating-radial-gradient(circle at 30% 40%, var(--ht-dusk) 0 1px, var(--ht-void) 1px 3px), repeating-linear-gradient(0deg, var(--ht-dusk-lift) 0 1px, var(--ht-void) 1px 4px);
  opacity: .32;
}
@media (prefers-reduced-motion: no-preference) {
  .ht-tv__screen::before { animation: ht-tv-on var(--ht-dur-l) var(--ht-ease-in) both; }
}
@keyframes ht-tv-on { from { opacity: 0; } }

/* ---------------------------------------------------------------- the story tabs (2026-10-31)
   The row under each site's story hero that sends people on to the next pages: one tab per page,
   its name and a few words of what is there. On a phone the row scrolls sideways. The tabs rise in
   as one row once the story has played (--tabs-delay, set by the page), by opacity and translate
   only, one moving thing; with a fine pointer a hovered tab rises 1 px and its underline draws, by scale. */
.ht-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); gap: .6rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0 0 .35rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.ht-tabs > li { scroll-snap-align: start; }
.ht-tab {
  position: relative; display: flex; flex-direction: column; gap: .2rem; height: 100%; box-sizing: border-box;
  padding: .85rem 1rem .9rem; text-decoration: none; color: var(--ht-fg, var(--ht-ink));
  border: var(--ht-border) solid var(--ht-rule-strong); border-radius: var(--ht-t-card-radius); background: var(--ht-look-face);
  box-shadow: var(--ht-look-card-edge);
  transition: translate var(--ht-dur-s) var(--ht-ease-in);
}
.ht-tab b { font-weight: 500; font-size: 1rem; line-height: 1.25; }
.ht-tab span { font-size: var(--ht-fs-small); line-height: 1.4; color: var(--ht-fg-2, var(--ht-ink-2)); }
.ht-tab::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .45rem; height: 2px; border-radius: 2px;
  background: var(--ht-look-flair); scale: 0 1; transform-origin: 0 50%;
  transition: scale var(--ht-dur-m) var(--ht-ease-in);
}
.ht-tab[aria-current="page"] { border-color: var(--ht-dusk-deep); }
.ht-tab[aria-current="page"]::after { scale: 1 1; }
@media (hover: hover) and (pointer: fine) {
  .ht-tab:hover { translate: 0 -1px; }
  .ht-tab:hover::after { scale: 1 1; }
}
@keyframes ht-tab-in { from { opacity: 0; translate: 0 .6rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .ht-tabs { animation: ht-tab-in var(--ht-dur-m) var(--ht-ease-in) var(--tabs-delay, calc(var(--ht-dur-s) * 0)) both; }
}
@media (max-width: 599.98px) { .ht-tabs { grid-auto-columns: minmax(10.5rem, 78%); } }
/* on a wide screen every tab is in view: the row wraps instead of scrolling */
@media (min-width: 900px) { .ht-tabs { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); overflow: visible; } }

/* ---------------------------------------------------------------- chips (2026-10-31): where a
   project or a page stands (live, built, being built, a draft). Mono capitals, like the keys. */
.chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem;
  border: var(--ht-border) solid var(--ht-rule-strong); border-radius: var(--ht-radius-pill);
  font-family: var(--ht-font-mono); font-size: .7rem; font-weight: 500; letter-spacing: var(--ht-ls-mono); text-transform: uppercase;
  color: var(--ht-fg, var(--ht-ink)); background: var(--ht-paper);
}
.chip__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ht-fg-3, var(--ht-ink-3)); }
.chip--live { border-color: color-mix(in srgb, var(--ht-dawn) 60%, var(--ht-rule-strong)); background: color-mix(in srgb, var(--ht-dawn-hot) 45%, var(--ht-paper)); }
.chip--live .chip__dot { background: var(--ht-ember); }
.chip--built .chip__dot { background: var(--ht-dusk-deep); }
.chip--building .chip__dot { background: transparent; border: 1.5px solid var(--ht-dusk-deep); }
.chip--draft { border-color: var(--ht-dusk); background: color-mix(in srgb, var(--ht-dusk-lift) 60%, var(--ht-paper)); color: var(--ht-dusk-deep); }

/* the preview build's own note (never in a production build), and words only a screen reader hears */
.preview-note {
  margin: 0; padding: .6rem max(1rem, calc((100% - var(--ht-shell)) / 2));
  background: color-mix(in srgb, var(--ht-dusk-lift) 65%, var(--ht-paper)); color: var(--ht-dusk-deep);
  border-bottom: var(--ht-border) solid var(--ht-dusk);
  font-family: var(--ht-font-mono); font-size: var(--ht-fs-label); letter-spacing: var(--ht-ls-mono); text-transform: uppercase;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }