/*
 * Ninebrains landing page, v3: one screen, never scrolls.
 *
 * Black and white, the same contract as the app (docs/brand/README.md): the page has no brand
 * colour. Colour appears only for state inside the demos (pass, fail, running, warning, diff).
 *
 * Layers, back to front: the WebGL stage (#scene: shader field, particles, the nine cubes), a
 * scanline veil, then the UI. The UI never waits on WebGL; without it, body's gradient stands in.
 *
 * Height is the scarce axis, so type is sized on min(vw, vh) and two height tiers drop the lede
 * (<= 760px) and then the works-with row (<= 640px).
 */

:root {
  --bg: #000000;
  --fg: #fafafa;
  --dim: #a3a3a3;
  --faint: #6b6b6b;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.2);
  --glass: rgba(10, 10, 10, 0.62);

  /* The app's own dark theme (packages/theme dark.theme.ts accent ramp). */
  --app-bg: #111111;
  --app-1: #161616;
  --app-2: #1c1c1c;
  --app-3: #232323;
  --app-line: #2a2a2a;
  --app-line-2: #3a3a3a;
  --app-fg: #ededed;
  --app-dim: #a1a1a1;
  --app-faint: #6e6e6e;

  /* State only. */
  --pass: #4ade80;
  --fail: #f87171;
  --warn: #fbbf24;
  --run: #60a5fa;

  --sans:
    'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --out: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: clamp(16px, 3vw, 44px);
  --nav-h: clamp(48px, 7vh, 64px);
  --foot-h: 34px;
  /* The one sizing unit: whichever of width or height is tighter. */
  --u: min(1vw, 1.6vh);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --fg: #0a0a0a;
    --dim: #525252;
    --faint: #8a8a8a;
    --line: rgba(0, 0, 0, 0.1);
    --line-2: rgba(0, 0, 0, 0.2);
    --glass: rgba(250, 250, 250, 0.66);

    --app-bg: #ffffff;
    --app-1: #fafafa;
    --app-2: #f3f3f3;
    --app-3: #ebebeb;
    --app-line: #e3e3e3;
    --app-line-2: #cfcfcf;
    --app-fg: #171717;
    --app-dim: #5c5c5c;
    --app-faint: #9a9a9a;

    --pass: #16a34a;
    --fail: #dc2626;
    --warn: #b45309;
    --run: #2563eb;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-rows: var(--nav-h) minmax(0, 1fr) var(--foot-h);
  background:
    radial-gradient(120% 90% at 100% 110%, rgba(255, 255, 255, 0.1), transparent 55%),
    radial-gradient(80% 60% at 0% 0%, rgba(255, 255, 255, 0.04), transparent 60%), var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

@media (prefers-color-scheme: light) {
  body {
    background:
      radial-gradient(120% 90% at 100% 110%, rgba(0, 0, 0, 0.09), transparent 55%), var(--bg);
  }
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-family: var(--mono);
}

.skip {
  position: fixed;
  left: -9999px;
  top: 8px;
  z-index: 50;
  padding: 8px 12px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 6px;
}
.skip:focus {
  left: 8px;
}

/* --- the stage canvas and veil ------------------------------------------------------------- */

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}
#scene.live {
  opacity: 1;
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0 1px, transparent 1px 3px);
  opacity: 0.22;
}
@media (prefers-color-scheme: light) {
  .scanlines {
    opacity: 0.06;
  }
}

.nav,
main,
footer {
  position: relative;
  z-index: 2;
}

/* --- chrome -------------------------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mark {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex: none;
}

.nav nav {
  display: flex;
  gap: 22px;
  font-size: 14px;
}
.nav nav a,
footer a {
  color: var(--dim);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition:
    color 160ms,
    background-size 320ms var(--out);
}
.nav nav a:hover,
footer a:hover {
  color: var(--fg);
  background-size: 100% 1px;
}

footer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--faint);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
}
footer p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
footer nav {
  margin-left: auto;
  display: flex;
  gap: 16px;
}

/* --- layout -------------------------------------------------------------------------------- */

main {
  display: grid;
  grid-template-columns: clamp(170px, 15vw, 224px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding: 0 var(--gutter);
  min-height: 0;
}

.stage {
  position: relative;
  min-height: 0;
  min-width: 0;
}

.panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.7fr);
  gap: clamp(16px, 2.6vw, 40px);
  padding: clamp(8px, 3vh, 36px) 0 clamp(10px, 3vh, 32px);
  min-height: 0;
}
.panel[hidden] {
  display: none;
}
.panel-overview {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}

.text {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.panel:not(.panel-overview) .text {
  padding-top: clamp(0px, 4vh, 48px);
}

.cube-slot {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* --- the rail ------------------------------------------------------------------------------ */

.rail {
  align-self: center;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 0;
}
/* The spine: one hairline the chapters hang from. */
.rail::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--line-2);
}

.rail button {
  all: unset;
  position: relative;
  display: grid;
  grid-template-columns: 23px 16px minmax(0, 1fr);
  grid-template-areas:
    'num icon label'
    '. . caption'
    '. . bar';
  column-gap: 10px;
  align-items: center;
  padding: clamp(5px, 1.05vh, 10px) 8px clamp(5px, 1.05vh, 10px) 0;
  cursor: pointer;
  color: var(--faint);
  transition: color 200ms;
}
.rail button:hover {
  color: var(--dim);
}
.rail button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: 6px;
}

.rail-num {
  grid-area: num;
  justify-self: center;
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
  background: var(--bg);
  width: 23px;
  text-align: center;
  border-radius: 4px;
  transition:
    background 200ms,
    color 200ms;
}

.rail-icon {
  grid-area: icon;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-icon .fill {
  fill: none;
}

.rail-label {
  grid-area: label;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.rail-caption {
  grid-area: caption;
  font-size: 12px;
  line-height: 1.35;
  color: var(--dim);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 360ms var(--ease),
    opacity 260ms;
}

.rail-progress {
  grid-area: bar;
  height: 1px;
  margin-top: 0;
  background: var(--line-2);
  transform-origin: left;
  opacity: 0;
  position: relative;
  overflow: hidden;
}
.rail-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.rail button[aria-selected='true'] {
  color: var(--fg);
}
.rail button[aria-selected='true'] .rail-num {
  background: var(--fg);
  color: var(--bg);
}
.rail button[aria-selected='true'] .rail-icon .fill {
  fill: currentColor;
}
.rail button[aria-selected='true'] .rail-icon .stroke-strong {
  stroke-width: 2;
}
.rail button[aria-selected='true'] .rail-caption {
  max-height: 3em;
  opacity: 1;
  margin-top: 3px;
}
.rail button[aria-selected='true'] .rail-progress {
  opacity: 1;
  margin-top: 8px;
}
.rail[data-paused='true'] button[aria-selected='true'] .rail-progress::after {
  opacity: 0.45;
}

/* --- overview copy ------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 clamp(10px, 2vh, 20px);
  font-size: 13px;
  color: var(--dim);
}

h1 {
  margin: 0;
  font-size: clamp(34px, min(5vw, 8vh), 84px);
  line-height: 0.94;
  letter-spacing: -0.048em;
  font-weight: 600;
}

.lede {
  margin: clamp(12px, 2.4vh, 24px) 0 0;
  max-width: 46ch;
  font-size: clamp(14.5px, calc(var(--u) * 1.2), 17.5px);
  line-height: 1.55;
  color: var(--dim);
}

.kicker {
  margin: 0 0 clamp(10px, 2vh, 18px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--dim);
}
.kicker span {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--fg);
}

.panel h2 {
  margin: 0;
  font-size: clamp(24px, min(3vw, 5.4vh), 46px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}

.feature-copy {
  margin: clamp(10px, 2vh, 18px) 0 0;
  max-width: 40ch;
  font-size: clamp(14px, calc(var(--u) * 1.1), 16px);
  line-height: 1.55;
  color: var(--dim);
}

/* --- install block ------------------------------------------------------------------------- */

.install {
  margin-top: clamp(16px, 3.4vh, 36px);
  max-width: 600px;
}

.install-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.install-tabs button[role='tab'] {
  all: unset;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--faint);
  padding: 5px 0;
  border-bottom: 1px solid transparent;
}
.install-tabs button[role='tab']:hover {
  color: var(--dim);
}
.install-tabs button[aria-selected='true'] {
  color: var(--fg);
  border-bottom-color: var(--fg);
}
.install-tabs button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.install-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--faint);
}

.verify-link {
  all: unset;
  cursor: pointer;
  font-size: 12px;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.verify-link:hover {
  color: var(--fg);
}
.verify-link:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4px 5px 4px 14px;
}

.cmd-prompt {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 13px;
  flex: none;
}

.cmd code {
  display: block;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 13px;
  padding: 9px 0;
  scrollbar-width: none;
}
.cmd code::-webkit-scrollbar {
  display: none;
}
.cmd code[data-overflow='true'] {
  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}

.cmd .copy {
  all: unset;
  cursor: pointer;
  flex: none;
  display: block;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 7px;
  background: var(--fg);
  color: var(--bg);
  transition: opacity 160ms;
}
.cmd .copy:hover {
  opacity: 0.86;
}
.cmd .copy:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.cmd .copy[data-copied='true'] {
  background: var(--pass);
  color: #06210f;
}

.install-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}
.install-note a {
  color: var(--dim);
}

.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.downloads-status {
  margin: 0;
  padding: 10px 0;
  color: var(--dim);
  font-size: 13px;
}
.dl-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--glass);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 160ms;
}
.dl-button:hover {
  border-color: var(--fg);
}
.dl-button .dl-file {
  display: none;
}

.works-with {
  margin-top: clamp(12px, 2.6vh, 26px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12.5px;
  color: var(--faint);
}
.works-label {
  margin-right: 4px;
}
.badge {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
}

.stats {
  margin: clamp(14px, 3vh, 30px) 0 0;
  padding-top: clamp(10px, 1.8vh, 16px);
  border-top: 1px solid var(--line);
  max-width: 600px;
  display: flex;
  gap: clamp(14px, 2.2vw, 30px);
}
.stats div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.stats dt {
  font-family: var(--mono);
  font-size: clamp(16px, calc(var(--u) * 1.6), 22px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stats dd {
  margin: 0;
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
}

/* --- overview side: the mark and a small lanes window -------------------------------------- */

.side {
  position: relative;
  min-height: 0;
}
.side .cube-slot {
  position: absolute;
  inset: 0 0 34% 8%;
}
.side .win-fit-mini {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64%;
  height: 46%;
}

/* --- the tilted window --------------------------------------------------------------------- */

.win-fit {
  position: relative;
  min-width: 0;
  min-height: 0;
  perspective: 1600px;
  perspective-origin: 30% 50%;
}

.win {
  --tilt-y: -12deg;
  --tilt-x: 4deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--app-line-2);
  background: var(--app-bg);
  color: var(--app-fg);
  font-size: 13px;
  line-height: 1.45;
  transform: translate(-50%, -50%) scale(var(--s, 0.8))
    rotateY(calc(var(--tilt-y) + var(--px, 0) * 2.5deg))
    rotateX(calc(var(--tilt-x) - var(--py, 0) * 2deg));
  transform-style: preserve-3d;
  box-shadow:
    0 50px 120px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  will-change: transform;
}
@media (prefers-color-scheme: light) {
  .win {
    box-shadow:
      0 50px 110px -40px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(0, 0, 0, 0.03);
  }
}

/* A glass sheen that slides with the pointer, so the pane reads as an object in space. */
.win::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.045) 44%,
    transparent 58%
  );
  background-size: 220% 100%;
  background-position: calc(60% + var(--px, 0) * 20%) 0;
}

.panel:not([hidden]) .win {
  animation: win-in 620ms var(--out) both;
}
@keyframes win-in {
  from {
    opacity: 0;
    translate: 0 0 -220px;
  }
  45% {
    opacity: 1;
  }
  to {
    opacity: 1;
    translate: 0 0 0;
  }
}

.win-mini {
  width: 560px;
  height: 330px;
  --tilt-y: -16deg;
  --tilt-x: 6deg;
}

.win-title {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 12px;
  background: var(--app-1);
  border-bottom: 1px solid var(--app-line);
  font-size: 12px;
  font-weight: 500;
}
.win-title .mark {
  width: 13px;
  height: 13px;
}
.win-sub {
  color: var(--app-faint);
  font-weight: 400;
}
.win-live {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--app-dim);
  padding: 2px 8px;
  border: 1px solid var(--app-line-2);
  border-radius: 4px;
}
.win-live::first-letter {
  color: var(--app-fg);
}

.win-tabs {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-bg);
  font-size: 12.5px;
  white-space: nowrap;
}
.wt-title {
  font-weight: 600;
  margin-right: 6px;
}
.wt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 6px;
  color: var(--app-dim);
}
.wt b {
  font-weight: 500;
  color: var(--app-faint);
}
.wt.is-on {
  background: var(--app-3);
  color: var(--app-fg);
}
.wt-plus {
  color: var(--app-faint);
  padding: 0 6px;
}
.wt-right {
  color: var(--app-dim);
  padding: 3px 8px;
}
.wt-right:first-of-type,
.win-tabs .wt-plus + .wt-right {
  margin-left: auto;
}
.wt-right.is-on {
  color: var(--app-fg);
  background: var(--app-3);
  border-radius: 6px;
}
.wt-stop {
  color: var(--fail);
  border: 1px solid color-mix(in srgb, var(--fail) 40%, transparent);
  background: color-mix(in srgb, var(--fail) 10%, transparent);
  border-radius: 7px;
  padding: 2px 10px;
  font-weight: 500;
}
.wt-tool {
  color: var(--app-dim);
  padding: 3px 7px;
}
.wt-run {
  padding: 3px 11px;
  border-radius: 7px;
  background: var(--app-fg);
  color: var(--app-bg);
  font-weight: 500;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-fg) 25%, transparent);
}
.wt-run.idle {
  box-shadow: none;
}

.win-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.win-status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 26px;
  padding: 0 12px;
  border-top: 1px solid var(--app-line);
  background: var(--app-1);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--app-dim);
  white-space: nowrap;
}
.win-status span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.meter {
  width: 84px;
  height: 4px;
  border-radius: 2px;
  background: var(--app-3);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--app-dim);
  transform: scaleX(var(--tp, 0));
  transform-origin: left;
}
.grow {
  flex: 1;
}

/* State pieces shared by every demo. */
.orb {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--app-faint);
}
.orb.run {
  background: var(--run);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--run) 60%, transparent);
  animation: orb 1.6s ease-out infinite;
}
.orb.pass {
  background: var(--pass);
}
.orb.fail {
  background: var(--fail);
}
.orb.warn {
  background: var(--warn);
}
@keyframes orb {
  70%,
  100% {
    box-shadow: 0 0 0 5px transparent;
  }
}

.chip {
  display: inline-block;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.5;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--app-3);
  color: var(--app-dim);
  white-space: nowrap;
}
.chip.ok {
  background: color-mix(in srgb, var(--pass) 16%, transparent);
  color: var(--pass);
}
.chip.fail {
  background: color-mix(in srgb, var(--fail) 16%, transparent);
  color: var(--fail);
}
.chip.run {
  background: color-mix(in srgb, var(--run) 16%, transparent);
  color: var(--run);
}
.gate {
  font-style: normal;
  font-size: 10.5px;
  padding: 0 6px;
  border: 1px solid var(--app-line-2);
  border-radius: 999px;
  color: var(--app-dim);
}

.win p {
  margin: 0;
}
.dim {
  color: var(--app-faint);
}
.add,
.pass,
.ok {
  color: var(--pass);
}
.del,
.fail,
.bad {
  color: var(--fail);
}
.warn {
  color: var(--warn);
}

.caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--app-fg);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* --- the demo timeline -----------------------------------------------------------------------
 * site.js walks each active window and adds `.on` once the clock passes `data-at`, and `.off`
 * once it passes `data-off`. Terminal lines (`.t`) keep their space so nothing reflows; everything
 * else is simply absent until its moment. `--t` (seconds) scrubs the few keyframed props. */

.win [data-at]:not(.on):not([data-swap]),
.win .off {
  display: none;
}
.win .t[data-at]:not(.on),
.win .t.off {
  display: block;
  visibility: hidden;
}
/* Terminals grow like terminals: a line takes space only once it is printed, and site.js keeps
   the pane scrolled to the newest line when there are more than fit. */
.term .t[data-at]:not(.on),
.fb-term .t[data-at]:not(.on) {
  display: none;
}
.win .on:not([data-swap]) {
  animation: pop 320ms var(--out) both;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.win .type.on {
  overflow: hidden;
  white-space: nowrap;
  animation: type calc(var(--n) * 26ms) steps(var(--n)) both;
}
@keyframes type {
  from {
    max-width: 2ch;
  }
  to {
    max-width: calc(var(--n) * 1ch + 2ch);
  }
}

.cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  fill: var(--app-fg);
  stroke: var(--app-bg);
  stroke-width: 1;
  z-index: 8;
  pointer-events: none;
  animation-play-state: paused;
  animation-delay: calc(var(--t, 0) * -1s);
  animation-fill-mode: both;
  animation-timing-function: linear;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* --- 00 overview mini lanes ---------------------------------------------------------------- */

.mini-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--app-line);
  min-height: 0;
}
.mini-lane {
  background: var(--app-bg);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  overflow: hidden;
  white-space: nowrap;
}

.lane-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 12px;
  margin-bottom: 6px !important;
}
.lane-head b {
  font-weight: 600;
}
.lane-head span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--app-faint);
}
.lane-head em {
  font-style: normal;
  font-size: 10.5px;
  padding: 0 7px;
  border: 1px solid var(--app-line-2);
  border-radius: 999px;
  color: var(--app-dim);
}

/* --- 01 lanes ------------------------------------------------------------------------------ */

.lanes4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: var(--app-1);
}
.lane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-bg);
  overflow: hidden;
}
.lane:first-child {
  border-color: var(--app-line-2);
}
.lane .lane-head {
  flex: none;
  height: 28px;
  padding: 0 9px;
  margin: 0 !important;
  background: var(--app-1);
  border-bottom: 1px solid var(--app-line);
}
.term {
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
}
.term b {
  font-weight: 600;
}

/* --- 02 brain ------------------------------------------------------------------------------ */

.brain {
  display: grid;
  grid-template-columns: 0.9fr 1.25fr;
}
.brain-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: var(--app-1);
}
.bl {
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-bg);
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
}
.bl .t[data-at='0'] {
  display: block;
}
.drawer {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--app-line);
  min-height: 0;
}
.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--app-line);
  font-size: 12.5px;
}
.drawer-head span {
  color: var(--app-dim);
}
.drawer-head .chip {
  background: color-mix(in srgb, var(--pass) 16%, transparent);
  color: var(--pass);
}
.drawer-term {
  padding: 8px 12px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: nowrap;
}
.graph {
  width: 100%;
  height: 128px;
  margin: 2px 0 0;
  overflow: visible;
}
.graph .edges path {
  fill: none;
  stroke: var(--app-line-2);
  stroke-width: 1.4;
  stroke-dasharray: 220;
  animation: draw 700ms var(--ease) both;
}
@keyframes draw {
  from {
    stroke-dashoffset: 220;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.graph .edges path.on {
  animation: draw 700ms var(--ease) both;
}
.graph .node rect {
  fill: var(--app-2);
  stroke: var(--app-line-2);
  transition:
    fill 300ms,
    stroke 300ms;
}
.graph .node text {
  fill: var(--app-fg);
  font-family: var(--mono);
  font-size: 10.5px;
  text-anchor: middle;
}
.graph .node:not(.on) {
  display: none;
}
.graph .node.sw rect {
  stroke: var(--run);
  fill: color-mix(in srgb, var(--run) 14%, var(--app-2));
}
.queue {
  flex: 1;
  padding: 2px 12px;
  font-size: 12px;
  line-height: 1.7;
  border-top: 1px solid var(--app-line);
}
.queue-head {
  font-size: 11px;
  color: var(--app-faint);
  padding-top: 4px;
}
.queue b {
  font-family: var(--mono);
  font-weight: 500;
  margin-right: 4px;
}
.queue span {
  float: right;
  color: var(--app-dim);
  font-family: var(--mono);
  font-size: 11px;
}
.chips {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  background: var(--app-1);
  border-top: 1px solid var(--app-line);
  min-height: 30px;
}
.inbox {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-top: 1px solid var(--app-line);
  font-size: 12px;
}

/* --- 03 gates ------------------------------------------------------------------------------ */

.gates {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 14px;
  padding: 14px;
  background: var(--app-1);
}
.attempts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.attempt {
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: var(--app-bg);
  padding: 10px 12px;
}
.attempt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin-bottom: 6px !important;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--app-line);
}
.check span {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--app-dim);
}
.check i {
  width: 14px;
  font-style: normal;
  text-align: center;
  flex: none;
}
.spin {
  height: 12px;
  width: 12px !important;
  border: 1.5px solid var(--app-line-2);
  border-top-color: var(--run);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.evidence {
  margin: 4px 0 !important;
  padding: 6px 8px;
  border-left: 2px solid var(--fail);
  background: color-mix(in srgb, var(--fail) 8%, transparent);
  font-family: var(--mono);
  font-size: 11.5px;
}
.feedback {
  font-size: 12px;
}
.summary {
  font-size: 12px;
  color: var(--app-dim);
}
.shots {
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.62fr;
  grid-template-rows: auto 1fr;
  gap: 10px;
  align-items: start;
  min-height: 0;
}
.shot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--app-dim);
}
.pg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 8px;
  border: 1px solid var(--app-line-2);
  border-radius: 5px;
  background: #f5f5f4;
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
}
.shot-390 .pg {
  aspect-ratio: 9 / 16;
}
.pg i {
  display: block;
  background: #d6d3d1;
  margin: 0 8%;
  border-radius: 2px;
}
.pg .pg-nav {
  margin: 0;
  height: 12%;
  background: #1c1917;
  border-radius: 0;
}
.pg .pg-nav.tall {
  height: 22%;
}
.pg .pg-in {
  height: 8%;
  background: #fff;
  border: 1px solid #a8a29e;
  margin-top: 6%;
}
.pg .pg-h {
  height: 9%;
  width: 60%;
  background: #292524;
}
.pg .pg-p {
  height: 4%;
}
.pg .pg-p.s {
  width: 40%;
}
.pg .pg-cards {
  display: flex;
  gap: 5px;
  background: none;
  flex: 1;
}
.pg .pg-cards b {
  flex: 1;
  background: #e7e5e4;
  border-radius: 2px;
}
.pg .pg-bad {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 8%;
  height: 22%;
  margin: 0;
  background: none;
  border: 2px solid var(--fail);
  border-radius: 3px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fail) 30%, transparent);
}
.verdict {
  grid-column: 1 / -1;
  padding: 9px 11px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-bg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}

/* --- 04 planner ---------------------------------------------------------------------------- */

.planner {
  background-color: var(--app-bg);
  background-image: radial-gradient(var(--app-line-2) 1px, transparent 1px);
  background-size: 18px 18px;
}
.pl-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pl-edges path {
  fill: none;
  stroke: var(--app-dim);
  stroke-width: 1.3;
}
.pl-edges path.bad {
  stroke: var(--fail);
  stroke-width: 1.6;
  stroke-dasharray: 1200;
  animation: draw-long 1200ms var(--ease) both;
}
@keyframes draw-long {
  from {
    stroke-dashoffset: 1200;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.module {
  position: absolute;
  border: 1px solid var(--app-line-2);
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-2) 60%, transparent);
}
.module p {
  display: flex;
  justify-content: space-between;
  padding: 5px 9px;
  border-bottom: 1px solid var(--app-line);
  font-size: 11.5px;
  font-weight: 500;
}
.module p span:last-child {
  color: var(--app-faint);
  font-weight: 400;
}
.pnode,
.note {
  position: absolute;
  width: 152px;
  padding: 7px 10px 8px;
  border: 1px solid var(--app-line-2);
  border-left: 3px solid var(--app-faint);
  border-radius: 7px;
  background: var(--app-2);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
.pnode.done-edge {
  border-left-color: var(--pass);
}
.pnode.run-edge {
  border-left-color: var(--run);
}
.pn-k {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--app-faint);
}
.pn-t {
  font-size: 12.5px;
  font-weight: 500;
  margin: 2px 0 5px !important;
}
.pn-g .gate {
  background: var(--app-bg);
}
.note {
  width: 170px;
  border-left-width: 1px;
  background: var(--app-1);
  font-size: 11.5px;
  color: var(--app-dim);
}
.pnode.drag {
  animation-name: drag;
  animation-duration: 13s;
  animation-play-state: paused;
  animation-delay: calc(var(--t, 0) * -1s);
  animation-fill-mode: both;
}
@keyframes drag {
  0%,
  6% {
    translate: 0 0;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  }
  9%,
  14% {
    translate: 18px 26px;
    box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.8);
  }
  17%,
  100% {
    translate: 0 0;
  }
}
.pl-cycle .cy {
  position: absolute;
  width: 152px;
  height: 66px;
  border: 1.5px solid var(--fail);
  border-radius: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fail) 22%, transparent);
}
.toast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 340px;
  padding: 10px 13px;
  border: 1px solid var(--app-line-2);
  border-radius: 10px;
  background: var(--app-2);
  font-size: 12.5px;
  box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.7);
}
.toast.on {
  animation: toast-in 420ms var(--out) both !important;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}
.ti {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.ti.bad {
  background: var(--fail);
}
.ti.ok {
  background: var(--pass);
}

#panel-04 .cursor {
  animation-name: cur-plan;
  animation-duration: 13s;
}
@keyframes cur-plan {
  0% {
    left: 60%;
    top: 90%;
  }
  5% {
    left: 530px;
    top: 272px;
  }
  9%,
  14% {
    left: 548px;
    top: 298px;
  }
  18% {
    left: 772px;
    top: 214px;
  }
  21% {
    left: 772px;
    top: 214px;
  }
  27% {
    left: 70px;
    top: 132px;
  }
  29% {
    left: 70px;
    top: 132px;
  }
  31% {
    left: 715px;
    top: -26px;
  }
  34% {
    left: 715px;
    top: -26px;
  }
  46% {
    left: 470px;
    top: 58px;
  }
  56% {
    left: 470px;
    top: 58px;
  }
  60%,
  64% {
    left: 470px;
    top: 58px;
  }
  68% {
    left: 715px;
    top: -26px;
  }
  74%,
  100% {
    left: 720px;
    top: -20px;
  }
}

/* --- 05 packs ------------------------------------------------------------------------------ */

.packs {
  padding: 14px 16px;
  background: var(--app-1);
}
.pk-lede {
  font-size: 12.5px;
  color: var(--app-dim);
}
.pk-project {
  margin: 8px 0 10px !important;
  font-size: 12px;
  color: var(--app-faint);
}
.pk-project b {
  color: var(--app-fg);
  font-weight: 500;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--app-line-2);
  border-radius: 6px;
}
.pk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: var(--app-bg);
  opacity: 0.72;
  transition:
    opacity 400ms,
    border-color 400ms,
    transform 400ms var(--out);
}
.pk-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px !important;
}
.pk-head b {
  font-family: var(--mono);
  font-size: 13.5px;
}
.toggle {
  margin-left: auto;
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--app-3);
  border: 1px solid var(--app-line-2);
  transition: background 240ms;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--app-dim);
  transition:
    transform 240ms var(--out),
    background 240ms;
}
.pk-row {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--app-dim);
}
.pk-row span {
  display: block;
  font-size: 10.5px;
  color: var(--app-faint);
}
.pk-off,
.pk-on {
  margin-top: auto !important;
  padding-top: 6px;
  border-top: 1px solid var(--app-line);
  font-size: 11.5px;
  color: var(--app-faint);
}
.pk-on {
  color: var(--pass);
}
/* The coding pack lights once its toggle turns on. */
.pk-coding:has(.toggle.on) {
  opacity: 1;
  border-color: var(--app-fg);
  transform: translateY(-3px);
}
.pk-coding:has(.toggle.on) .pk-off {
  display: none;
}
.win .toggle[data-at]:not(.on) {
  display: block;
}
.toggle.on {
  background: var(--app-fg);
  animation: none !important;
}
.toggle.on::after {
  transform: translateX(12px);
  background: var(--app-bg);
}
.pk-launch {
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: var(--app-bg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
}
#panel-05 .cursor {
  animation-name: cur-packs;
  animation-duration: 11s;
}
@keyframes cur-packs {
  0% {
    left: 50%;
    top: 95%;
  }
  22% {
    left: 238px;
    top: 118px;
  }
  30%,
  100% {
    left: 238px;
    top: 118px;
  }
}

/* --- 06 freebuff --------------------------------------------------------------------------- */

.freebuff {
  background: var(--app-bg);
}
.fb-term {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}
.fb-term .t {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-term .paste {
  white-space: normal;
  color: var(--app-dim);
  max-width: 64ch;
}
.fb-free.on {
  animation: tab-in 420ms var(--out) both !important;
}
@keyframes tab-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
}
.banner {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 12%, var(--app-2));
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  font-size: 12.5px;
}
.banner.on {
  animation: banner-in 460ms var(--out) both !important;
}
@keyframes banner-in {
  from {
    opacity: 0;
    transform: translateY(-110%);
  }
}
.bi {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--warn);
  color: #1c1400;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
}
.bt {
  flex: 1;
  min-width: 0;
}
.bt p + p {
  color: var(--app-dim);
}
.btn {
  flex: none;
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--app-fg);
  color: var(--app-bg);
  font-weight: 500;
  font-size: 12px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-fg) 30%, transparent);
}
.btn.btn-idle {
  box-shadow: none;
}
.x {
  color: var(--app-faint);
}
#panel-06 .cursor {
  animation-name: cur-fb;
  animation-duration: 13s;
}
@keyframes cur-fb {
  0% {
    left: 55%;
    top: 92%;
  }
  28% {
    left: 55%;
    top: 80%;
  }
  36% {
    left: 690px;
    top: 34px;
  }
  38% {
    left: 686px;
    top: 30px;
  }
  41% {
    left: 690px;
    top: 34px;
  }
  48% {
    left: 360px;
    top: 120px;
  }
  52%,
  100% {
    left: 360px;
    top: 120px;
  }
}

/* --- the verify sheet ---------------------------------------------------------------------- */

.sheet {
  width: min(560px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 32px));
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.sheet[open] {
  display: flex;
  flex-direction: column;
  animation: sheet-in 360ms var(--out);
}
@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
.sheet::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}
.sheet-body {
  overflow-y: auto;
  padding: 26px 26px 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
}
.sheet-kicker {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--faint);
}
.sheet h2 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.sheet-body p {
  margin: 0 0 12px;
}
.sheet-body code {
  font-size: 12.5px;
  color: var(--fg);
}
.sheet pre {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.6;
}
.sheet-links {
  display: flex;
  gap: 18px;
}
.sheet-links a {
  color: var(--fg);
}
.sheet form {
  display: flex;
  justify-content: flex-end;
  padding: 12px 26px 20px;
}
.sheet-close {
  all: unset;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 8px;
  background: var(--fg);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
}
.sheet-close:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* --- height tiers -------------------------------------------------------------------------- */

@media (max-height: 760px) {
  .panel-overview .lede {
    display: none;
  }
  .feature-copy {
    font-size: 14px;
  }
}
@media (max-height: 640px) {
  .works-with {
    display: none;
  }
  .eyebrow {
    display: none;
  }
  :root {
    --foot-h: 28px;
  }
  .rail-caption {
    display: none;
  }
}

/* Wide desktop: the cubes are the stage, not a diagram. A feature's slot is a large region under
   the copy that runs in behind the tilted window's left edge, so the arrangement and the window
   read as one composition in depth. The overview gets room for the whole install line. */
@media (min-width: 1181px) {
  .panel:not(.panel-overview) .cube-slot {
    position: absolute;
    left: -4%;
    width: 56%;
    top: 34%;
    bottom: 0;
    pointer-events: none;
  }
  .panel:not(.panel-overview) .win-fit {
    z-index: 1;
  }
  .panel-overview {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .panel-overview .install {
    position: relative;
    z-index: 1;
    max-width: none;
    width: min(740px, calc(100% + 170px));
  }
  .panel-overview .cmd code {
    font-size: 11.5px;
  }
}

/* Narrow desktop: side by side leaves the demo too small to read, so a feature stacks its copy
   (with the cubes beside it) over a full-width window. */
@media (min-width: 900px) and (max-width: 1180px) {
  .panel:not(.panel-overview) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, 2vh, 20px);
  }
  .panel:not(.panel-overview) .text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 36%);
    column-gap: 28px;
    align-content: start;
    padding-top: 0;
  }
  .panel:not(.panel-overview) .text > * {
    grid-column: 1;
  }
  .panel:not(.panel-overview) .text .cube-slot {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-height: 150px;
  }
  .panel:not(.panel-overview) .feature-copy {
    max-width: 58ch;
  }
  .panel-overview {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .install-hint {
    display: none;
  }
  .verify-link {
    margin-left: auto;
  }
  .stats {
    gap: 12px;
  }
  .stats dd {
    font-size: 11px;
  }
  .works-label {
    display: none;
  }
}

/* --- mobile: a stack, with the rail as a bottom segmented control ------------------------- */

@media (max-width: 899px) {
  :root {
    --nav-h: 48px;
    --foot-h: 58px;
  }

  body {
    grid-template-rows: var(--nav-h) minmax(0, 1fr) var(--foot-h);
  }

  footer {
    display: none;
  }

  main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--foot-h);
    grid-row: 2 / 4;
    gap: 0;
  }

  .stage {
    grid-row: 1;
  }

  .rail {
    grid-row: 2;
    align-self: stretch;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .rail::before {
    display: none;
  }
  .rail button {
    flex: 0 0 38px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0;
    border-radius: 9px;
    transition:
      flex-basis 320ms var(--ease),
      background 200ms;
  }
  .rail button[aria-selected='true'] {
    flex: 1 1 auto;
    background: color-mix(in srgb, var(--fg) 9%, transparent);
    padding: 0 12px;
  }
  .rail-num,
  .rail-caption {
    display: none;
  }
  .rail-label {
    display: none;
    font-size: 13px;
  }
  .rail button[aria-selected='true'] .rail-label {
    display: inline;
  }
  .rail-progress {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    margin: 0 !important;
  }

  .panel {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.8vh, 16px);
    padding: clamp(6px, 2vh, 20px) 0 clamp(8px, 1.6vh, 14px);
  }
  .panel:not(.panel-overview) .text {
    flex: none;
    padding-top: 0;
  }
  .panel:not(.panel-overview) .cube-slot {
    flex: none;
    height: clamp(0px, calc((100dvh - 560px) * 0.5), 150px);
  }
  .kicker {
    margin-bottom: 8px;
  }
  .panel h2 {
    font-size: clamp(22px, 6.4vw, 30px);
  }
  .feature-copy {
    margin-top: 8px;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .win-fit {
    flex: 1 1 auto;
    perspective: none;
  }
  .win {
    transform: translate(-50%, -50%) scale(var(--s, 0.7));
    width: 500px;
    height: var(--win-h, 560px);
    border-radius: 14px;
  }
  .win::after {
    display: none;
  }

  /* Overview on a phone: the mark sits behind the headline; the mini window steps aside. */
  .panel-overview .text {
    flex: 1;
    position: relative;
  }
  .panel-overview .side {
    position: absolute;
    top: 0;
    right: 0;
    width: 48%;
    height: 44%;
    pointer-events: none;
  }
  .side .cube-slot {
    inset: 0;
  }
  .win-fit-mini {
    display: none;
  }
  h1 {
    font-size: clamp(34px, min(11vw, 6.6vh), 58px);
  }
  .eyebrow {
    max-width: 60%;
  }
  .install {
    margin-top: clamp(14px, 3vh, 30px);
  }
  .install-hint {
    display: none;
  }
  .verify-link {
    margin-left: auto;
  }
  .stats {
    gap: 14px;
    flex-wrap: wrap;
  }
  .stats dd {
    font-size: 11px;
  }

  /* Demos re-flow for the 500px internal width. */
  .win-tabs .wt-right,
  .win-tabs .wt-stop,
  .win-tabs .wt-tool,
  .win-tabs .wt:not(.is-on) {
    display: none;
  }
  .win-status .meter,
  .win-status span:nth-child(3) {
    display: none;
  }
  .brain {
    grid-template-columns: 1fr;
  }
  .brain-lanes {
    display: none;
  }
  .drawer {
    border-left: none;
  }
  .gates {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .shots {
    order: -1;
    grid-template-columns: 1.2fr 1fr 0.42fr;
  }
  .shots .pg {
    aspect-ratio: 16 / 8;
  }
  .shots .shot-390 .pg {
    aspect-ratio: 9 / 9;
  }
  .verdict {
    display: none;
  }
  .planner > * {
    transform-origin: 0 0;
  }
  .pl-edges,
  .planner .module,
  .planner .pnode,
  .planner .note,
  .planner .pl-cycle,
  .planner .cursor {
    zoom: 0.62;
  }
  .pl-edges {
    width: 800px;
    height: 414px;
  }
  .lanes4 .lane-head b {
    display: none;
  }
  .pk-grid {
    grid-template-columns: 1fr;
  }
  .pack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 10px;
  }
  .pk-head,
  .pk-on,
  .pk-off {
    grid-column: 1 / -1;
  }
  .lanes4 .term,
  .mini-lane {
    font-size: 12px;
  }
  .fb-term .paste {
    max-width: none;
  }
}

/* Phones: a 340px internal width, so the scale stays near 1 and no demo text drops below 11px.
   Each scene shows a cropped, focused part of itself rather than all of it, shrunk. */
@media (max-width: 480px) {
  .win {
    width: 340px;
    font-size: 13px;
  }
  .win .chip,
  .win .gate,
  .win-status,
  .lane-head span,
  .lane-head em,
  .check span,
  .pn-k,
  .pk-row span,
  .queue span,
  .queue-head,
  .shot,
  .module p,
  .win-live {
    font-size: 11.5px;
  }
  .win-status span:not(:first-child):not([data-clock]) {
    display: none;
  }
  .win-status span[data-at],
  .win-status span[data-off] {
    display: inline-flex;
  }
  .win-status .off,
  .win-status [data-at]:not(.on) {
    display: none !important;
  }
  .win-sub {
    display: none;
  }
  .lanes4 {
    grid-template-columns: 1fr;
  }
  .lanes4 .lane:nth-child(n + 3) {
    display: none;
  }
  .lanes4 .term {
    font-size: 12.5px;
  }
  .lanes4 .lane-head span {
    display: none;
  }
  .drawer-term,
  .queue {
    font-size: 12.5px;
  }
  .drawer-term .t {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gates {
    padding: 10px;
    gap: 10px;
  }
  .shots {
    grid-template-columns: 1.2fr 1fr 0.5fr;
  }
  .check span {
    display: none;
  }
  .evidence {
    white-space: normal;
  }
  /* Planner: the cycle's middle, full size, with the toast over it. */
  .pl-edges,
  .planner .module,
  .planner .pnode,
  .planner .note,
  .planner .pl-cycle,
  .planner .cursor {
    zoom: 1;
    translate: -206px -50px;
  }
  .toast {
    left: 10px;
    right: 10px;
    max-width: none;
  }
  .pk-lede {
    display: none;
  }
  .pack {
    grid-template-columns: 1fr;
  }
  .pack .pk-row:nth-of-type(n + 4) {
    display: none;
  }
  .pk-grid .pack:nth-child(3) {
    display: none;
  }
  .pk-launch {
    font-size: 12px;
  }
  .banner {
    flex-wrap: wrap;
  }
  .banner .bt {
    flex-basis: calc(100% - 30px);
  }
  .fb-term {
    padding: 12px;
    font-size: 12.5px;
  }
}

@media (max-width: 899px) and (max-height: 700px) {
  .panel-overview .lede {
    display: none;
  }
  .works-with {
    display: none;
  }
  .panel:not(.panel-overview) .cube-slot {
    height: 0;
  }
}

@media (max-width: 899px) and (max-height: 600px) {
  .eyebrow {
    display: none;
  }
}

/* --- reduced motion: final frames, no travel ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .cursor {
    display: none;
  }
  .caret {
    animation: none;
  }
  .win {
    --px: 0;
    --py: 0;
  }
}