/* ==========================================
   TesselBee — the page
   ==========================================
   The page runs on the brand's night, like everything TesselBee shows on a
   screen: the charter's roles (/static/brand/tokens.css) and the site's
   tokens derived from them (styles.css). The sections hang on one wire drawn
   by page.js, and the page carries its own Inputs panel. Three of those
   inputs end up here as custom properties on <body>:
     --wild  0..1      how far the cards drift off the grid (with per-card
                       --r --dx --dy in -1..1, drawn from the seed)
     --mono  0..1      Recursive's MONO axis on the headline: proportional
                       to fixed width, the type varying as the tagline says
     --hw    300..1000 Recursive's wght axis on the headline's first line */

body.nx {
  --wild: 0.3;
  --mono: 0;
  --hw: 800;

  background-color: var(--ground);
  color: var(--ink-body);
}

/* --- Chrome --- */

@media (max-width: 768px) {
  .nx .btn-nav {
    display: inline-flex;
    margin-left: auto;
    margin-right: 14px;
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .nx .btn-nav svg { display: none; }
}

.nx .nav {
  background: var(--veil);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-bottom-color: var(--border);
}

.nx .footer {
  position: relative;
  z-index: 1;
}

.nx-main {
  position: relative;
}

/* --- The wire ------------------------------------------------------------ */
.nx-wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.nx-wire path {
  fill: none;
  stroke-linecap: round;
}

.nx-wire-shadow {
  stroke: var(--ground);
  stroke-width: 9;
  opacity: 0.9;
}

/* A wire of the charter's line colour (3:1 and more on the night); the
   ports glow cyan where the page is, the element that changes. */
.nx-wire-line {
  stroke: var(--line-strong);
  stroke-width: 2;
}

/* Each section tag is a port once the wire exists. */
.nx-wired .nx-section .section-tag {
  position: relative;
}

.nx-wired .nx-section .section-tag::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  translate: 0 -50%;
  background: var(--line-strong);
  border: 2px solid var(--ground);
  transition: background-color var(--duration-base) var(--ease-out);
}

.nx-wired .nx-section .visible .section-tag::before,
.nx-wired .nx-section .section-tag.visible::before {
  background: var(--brand-cyan);
}

.nx-section {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 9vw, 130px) 0;
}

.nx-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
  max-width: 16ch;
}

.nx-lead {
  margin-top: 18px;
  max-width: 58ch;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* --- Hero ---------------------------------------------------------------- */
.nx-hero {
  position: relative;
  z-index: 1;
  padding: 128px 0 clamp(56px, 7vw, 96px);
}

.nx-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas:
    "badge badge"
    "title title"
    "side art";
  column-gap: 56px;
  align-items: end;
}

.nx-hero .hero-badge { grid-area: badge; justify-self: start; margin-bottom: 26px; }

.nx-title {
  grid-area: title;
  margin: 0;
  font-family: 'Recursive', var(--font-sans);
  font-variation-settings: 'MONO' var(--mono), 'CASL' 0;
  font-size: clamp(2.7rem, 8.4vw, 7.6rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--ink-strong);
}

.nx-title-1 {
  display: block;
  font-weight: var(--hw);
  font-variation-settings: 'wght' var(--hw), 'MONO' var(--mono), 'CASL' 0;
  /* Heavier is tighter, the way a type designer would space it. */
  letter-spacing: calc(-0.015em - (var(--hw) - 300) * 0.00005em);
  transition: font-weight var(--duration-fast) var(--ease-in-out), letter-spacing var(--duration-fast) var(--ease-in-out);
}

/* The second line is the variant: the brand's cyan (the logo's detached
   triangle), a lighter weight, no serif and no italic. */
.nx-title-2 {
  display: block;
  margin-top: 0.06em;
  font-weight: 400;
  font-variation-settings: 'wght' 400, 'MONO' var(--mono), 'CASL' 0;
  font-size: 0.98em;
  letter-spacing: -0.03em;
  color: var(--brand-cyan);
}

/* The one render on the page with no editor around it: the shader alone. */
.nx-hero-art {
  grid-area: art;
  align-self: start;
  justify-self: end;
  position: relative;
  width: min(100%, 420px);
  margin-top: 32px;
}

.nx-hero-art video {
  display: block;
  width: 100%;
  height: auto;                              /* the height attribute would win over aspect-ratio */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.nx-hero-art figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--scrim);                  /* text on an image: the scrim, in nuit-50 */
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--nuit-50);
}

.nx-hero-side {
  grid-area: side;
  align-self: start;
  margin-top: 32px;
  max-width: 620px;
}

.nx-sub {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-body);
  margin-bottom: 22px;
}

.nx-hero .tb-hero-subscribe {
  margin: 0;
  max-width: none;
}

.nx-hero .tb-subscribe-privacy { color: var(--ink-faint); }

.nx-hero .tb-hero-try {
  text-align: left;
}

/* The viewport: an editor window around the clip, presets underneath. */
.nx-viewport {
  margin-top: clamp(40px, 5vw, 64px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.nx-vp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

/* The editor's mark: the small symbol (24 px and less), from its file. */
.nx-vp-brand {
  display: block;
  width: 18px;
  height: 18px;
}

.nx-vp-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-strong);
}

.nx-vp-screen {
  position: relative;
  aspect-ratio: 1280 / 576;
  background: var(--surface);
}

.nx-vp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nx-vp-video.is-contain {
  object-fit: contain;
  background: var(--surface);
}

.nx-vp-chips {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  overflow-x: auto;
}

.nx-vp-label {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-strong);
}

/* --- Editor UI pieces: panel, chips, count ---------------------------------- */
.nx-count {
  display: inline-block;
  min-width: 26px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: center;
}

.nx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nx-vp-chips .nx-chips { flex-wrap: nowrap; }

.nx-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-body);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.nx-chip:hover { border-color: var(--ink-muted); color: var(--ink-strong); }

/* The active chip: the accent on --accent-soft (7.3:1), as an active tag. */
.nx-chip[aria-pressed='true'],
.nx-chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.nx-chip:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

.nx-chip--still {
  cursor: default;
  font-size: 0.8rem;
  padding: 5px 12px;
}

.nx-panel {
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.nx-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--ink-strong);
}

.nx-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.nx-frame video,
.nx-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.nx-frame--dark { background: var(--surface); }

/* --- Layouts shared by the reference sections ------------------------- */
.nx-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.nx-split--wide { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }

.nx-shot figcaption,
.nx-col figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.nx-shot--wide { margin-top: clamp(32px, 4vw, 52px); }

.nx-points {
  list-style: none;
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.nx-points li {
  position: relative;
  padding-left: 22px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-body);
}

/* A socket, not a bullet. */
.nx-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

.nx-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 52px);
  align-items: start;
}

.nx-col h3,
.nx-fidelity h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}

.nx-col p,
.nx-fidelity p {
  margin: 10px 0 18px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.nx-attrs-chips { margin-top: 28px; }

/* Interface: value kinds and handle types, as the editor's chips. */
.nx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}

.nx-tab {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-sunk);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.nx-tab.is-on {
  background: var(--accent-soft);
  color: var(--accent);
}

.nx-mini-label + .nx-tabs,
.nx-mini-label + .nx-engine-chips { margin-top: 10px; }

.nx-mini-label {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}


/* Unity fidelity: the clip and the claim, side by side. */
.nx-fidelity {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

.nx-fidelity p { margin-bottom: 0; }

/* --- Configurators: a board of node cards -------------------------------- */
.nx-gallery .nx-head { margin-bottom: clamp(36px, 5vw, 64px); }

.nx-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}

.nx-card--wall     { grid-column: 1 / span 7; }
.nx-card--stairs   { grid-column: 8 / span 5; grid-row: span 2; }
.nx-card--plant    { grid-column: 1 / span 7; }
.nx-card--building { grid-column: 1 / span 4; }
.nx-card--rock     { grid-column: 5 / span 4; }
.nx-card--damage   { grid-column: 9 / span 4; }

/* Wildness: individual transform properties, so the scroll reveal's own
   `transform` keeps working underneath. */
[data-scatter] {
  rotate: calc(var(--r, 0) * var(--wild) * 6deg);
  translate: calc(var(--dx, 0) * var(--wild) * 36px) calc(var(--dy, 0) * var(--wild) * 26px);
  transition: rotate var(--duration-slow) var(--ease-in-out), translate var(--duration-slow) var(--ease-in-out), opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.nx-card {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0 0 18px;
  box-shadow: var(--shadow-lg);
}

/* Node ports on the card edges, like the editor's. */
.nx-card::before,
.nx-card::after {
  content: '';
  position: absolute;
  top: 21px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ground);
}

/* Node ports: the input in the line colour, the output in the brand's cyan. */
.nx-card::before { left: -6px; background: var(--line-strong); }
.nx-card::after { right: -6px; background: var(--brand-cyan); }

.nx-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

.nx-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.nx-card-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-strong);
}

.nx-card-io {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.nx-card-io i {
  width: 22px;
  height: 6px;
  border-radius: 4px;
  background: var(--surface-sunk);
}

.nx-card-media video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
}

.nx-card-text {
  padding: 16px 18px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-body);
}

/* What isn't open to beta testers yet, said where the feature is shown. */
.nx-status {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  max-width: 58ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.nx-status span {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);                /* a state: always beside its sentence */
  translate: 0 -1px;
}

/* --- Unity ---------------------------------------------------------------- */
.nx-unity .nx-head { margin-bottom: clamp(36px, 5vw, 56px); }

.nx-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
  align-items: start;
}

.nx-pair .nx-link { margin-top: 90px; }

.nx-host-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-strong);
}

.nx-host--engine .nx-dot { background: var(--ink-muted); }

.nx-link {
  position: relative;
  height: 40px;
  margin-top: 30px;
}

.nx-link svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.nx-link path {
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  animation: nx-flow 1.2s linear infinite;
}

@keyframes nx-flow { to { stroke-dashoffset: -24; } }

.nx-link span {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-body);
  white-space: nowrap;
}

.nx-strip {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}

.nx-strip-item figcaption {
  margin-top: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Physics: a raised band across the page ----------------------------- */
.nx-physics {
  background: var(--surface-raised);
  color: var(--ink-body);
}

.nx-physics .nx-frame {
  background: var(--surface);
}

.nx-physics .nx-head { margin-bottom: clamp(36px, 5vw, 56px); }

/* The title breaks along a jagged line once it scrolls in. The halves are
   drawn twice (::before, ::after) over the real text, which stays for
   screen readers and for anyone who asked for less motion. */
.nx-crack {
  position: relative;
  max-width: none !important;
  font-size: clamp(2.6rem, 7vw, 5.6rem) !important;
}

.nx-crack-ready .nx-crack > span { color: transparent; }

.nx-crack-ready .nx-crack::before,
.nx-crack-ready .nx-crack::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--ink-strong);
  transition: translate var(--duration-video) var(--ease-in-out) 0.25s;
  pointer-events: none;
}

.nx-crack-ready .nx-crack::before {
  clip-path: polygon(0 0, 100% 0, 100% 57%, 84% 65%, 66% 55%, 49% 67%, 31% 56%, 14% 66%, 0 56%);
}

.nx-crack-ready .nx-crack::after {
  clip-path: polygon(0 56%, 14% 66%, 31% 56%, 49% 67%, 66% 55%, 84% 65%, 100% 57%, 100% 100%, 0 100%);
  color: var(--brand-cyan);                  /* the piece that breaks off is the variant */
}

.nx-crack-ready .visible .nx-crack::before { translate: -3px -4px; }
.nx-crack-ready .visible .nx-crack::after { translate: 8px 4px; }

.nx-physics-frame { overflow: visible; }
.nx-physics-frame video { border-radius: 16px; }

/* The editor's play toolbar, as a caption under the clip. */
.nx-toolbar {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--nuit-800);
  border: 1px solid var(--nuit-700);
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--ink);
}

.nx-toolbar span {
  padding: 6px 12px;
  border-radius: 8px;
}

.nx-toolbar .is-play { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.nx-toolbar .is-on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.nx-toolbar-force {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
}

.nx-toolbar-force i {
  width: 70px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) 60%, var(--nuit-700) 0);
}

/* --- The graph ------------------------------------------------------------ */
.nx-mosaic {
  position: relative;
  margin-top: clamp(56px, 7vw, 96px);
  height: clamp(260px, 36vw, 480px);
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.nx-mosaic-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A night wash over the mosaic so the number reads (text on an image goes
   on the scrim). */
.nx-mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--surface) 92%, transparent) 0%, color-mix(in srgb, var(--surface) 78%, transparent) 45%, color-mix(in srgb, var(--surface) 45%, transparent) 100%);
}

.nx-mosaic-num {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 400;
  color: var(--nuit-50);
  text-align: center;
}

.nx-mosaic-num span {
  font-size: clamp(5rem, 17vw, 14rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.nx-engine {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}

.nx-engine p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.nx-engine-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nx-engine-chips li {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-body);
}

/* --- Demo, audience, FAQ ------------------------------------------------- */
.nx-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.nx-demo .btn { margin-top: 26px; }

.nx-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
  align-items: start;
}

/* Three notes pinned to the board: raised cards, staggered. */
.nx-note {
  padding: 26px 24px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.nx-note:nth-child(2) { margin-top: 28px; }
.nx-note:nth-child(3) { margin-top: 8px; }

.nx-note h3 {
  font-weight: 650;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin-bottom: 12px;
}

.nx-note p {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-body);
}

.nx-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.nx-news .cta-box {
  box-shadow: var(--shadow-lg);
}

/* --- The page's own Inputs panel ---------------------------------------- */
.nx-tweak {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 120;
}

.nx-tweak-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-strong);
  cursor: pointer;
}

.nx-tweak-toggle:hover { border-color: var(--accent); }
.nx-tweak-toggle:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.nx-tweak-toggle[aria-expanded='true'] { display: none; }

.nx-tweak-panel {
  width: min(300px, calc(100vw - 32px));
  padding: 16px;
}

.nx-tweak-close {
  margin-left: auto;
  display: flex;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px;
}

.nx-tweak-close:hover { color: var(--ink); }
.nx-tweak-close:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

.nx-tweak-intro {
  margin: 8px 0 14px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.nx-tweak .nx-chips { margin-bottom: 8px; }

.nx-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 4px 10px;
  align-items: center;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-body);
}

.nx-field span { grid-column: 1 / -1; }

.nx-field input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
}

.nx-field output {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-soft);
  text-align: right;
}

.nx-field--seed {
  grid-template-columns: auto 1fr auto;
}

.nx-field--seed span { grid-column: auto; }
.nx-field--seed output { text-align: left; }

.nx-mini-btn {
  padding: 5px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: transparent;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-strong);
  cursor: pointer;
}

.nx-vp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
}

.nx-defaults {
  margin-top: 16px;
  cursor: pointer;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .nx-wire { display: none; }
  .nx-wired .nx-section .section-tag::before { display: none; }
}

@media (max-width: 900px) {
  .nx-hero { padding-top: 104px; }

  .nx-hero-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "badge" "title" "side" "art";
  }

  .nx-split,
  .nx-split--wide,
  .nx-duo,
  .nx-fidelity,
  .nx-engine,
  .nx-demo-grid,
  .nx-faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nx-board { grid-template-columns: minmax(0, 1fr); }

  .nx-card--wall,
  .nx-card--plant,
  .nx-card--stairs,
  .nx-card--building,
  .nx-card--rock,
  .nx-card--damage {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* Narrow screens get a gentler scatter: there is no gutter to drift into. */
  [data-scatter] {
    rotate: calc(var(--r, 0) * var(--wild) * 2deg);
    translate: calc(var(--dx, 0) * var(--wild) * 8px) 0;
  }

  .nx-hero-art { justify-self: stretch; width: 100%; max-width: 420px; }

  /* A phone-width 2.2:1 strip shows nothing: taller, centred on the asset. */
  .nx-vp-screen { aspect-ratio: 4 / 3; }

  .nx-pair { grid-template-columns: minmax(0, 1fr); }
  .nx-pair .nx-link { height: 56px; margin: 8px 0 12px; }
  .nx-link svg { rotate: 90deg; }

  .nx-strip,
  .nx-notes { grid-template-columns: minmax(0, 1fr); }
  .nx-note:nth-child(n) { margin-top: 0; }

  .nx-toolbar { font-size: 0.75rem; }
  .nx-toolbar-force { display: none; }
}

@media (max-width: 480px) {
  .nx-tweak-toggle span { display: none; }
  .nx-tweak-toggle { padding: 12px; }
  .nx-toolbar span { padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-link path { animation: none; }
  [data-scatter],
  .nx-title-1 { transition: none; }
  .nx-crack-ready .nx-crack::before,
  .nx-crack-ready .nx-crack::after { transition: none; }
}