/* ==========================================================================
   qmc — Point Lab & Discrepancy Bench
   The instrument-rack visual system, borrowed wholesale from the mayfly demo
   so the two read as one family. One dark look, no light variant, hairline
   rules as the only separator device, and no border radius anywhere.

   Signature idea: this demo exists to compare two point sets — a scrambled
   Halton sequence and a pseudo-random one. They get their own hue AND their
   own glyph everywhere they appear: canvas, legend, chart, readout. Colour
   alone would exclude roughly one man in twelve, and Halton-versus-random is
   the single comparison both pages are built around.

   render.js reads the tokens below via getComputedStyle, so the canvas and the
   stylesheet cannot drift: change --halton here and the scatter glyphs, the
   legend swatch and the convergence curve all follow.
   ========================================================================== */

:root {
  /* ---- ground tokens ---- */
  --void: #0a0d18; /* page ground */
  --rack: #11162a; /* panel fill */
  --rule: #232b4c; /* hairlines */
  --dim: #7f88b6; /* labels, ticks, secondary readouts */
  --lume: #eaedff; /* primary text */

  /* ---- the two point sets ---- */
  /* Halton is a filled circle, pseudo-random is a diagonal cross. */
  --halton: #46e0c8; /* teal   — the low-discrepancy sequence */
  --random: #ffb04a; /* amber  — independent uniform samples */
  --probe: #8b7dff; /* violet — scrubber head, permutation arrows */
  --mark: #ff5d8f; /* rose   — the selected point, reference slopes */

  /* ---- diverging correlation ramp, centred on zero ---- */
  /* Correlation is signed, so the ramp has to be signed too: cool for
     negative, near-ground for zero, warm for positive. */
  --corr-neg: #4f8cff;
  --corr-zero: #0d1230;
  --corr-pos: #ff5d8f;

  /* interactive states draw from the point sets, not a separate brand hue */
  --action: var(--halton);
  --action-hi: var(--random);

  --ok: #46e0c8;
  --warn: #ffb04a;
  --bad: #ff5d8f;

  /* ---- type ---- */
  --font-display:
    "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- rhythm ---- */
  --gutter: 24px;
  --rack-max: 1280px;
}

html {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--lume);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a {
  color: var(--action);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  border-bottom-color: currentColor;
}

button,
select,
input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 6px 10px;
}

button {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition:
    border-color 120ms ease,
    color 120ms ease,
    background-color 120ms ease;
}

button:hover:not(:disabled) {
  border-color: var(--action);
  color: var(--action);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

button[data-primary] {
  border-color: var(--action);
  color: var(--action);
}

button[data-primary]:hover:not(:disabled) {
  background: var(--action);
  color: var(--void);
}

select {
  cursor: pointer;
  width: 100%;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dim) 50%),
    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% + 1px),
    calc(100% - 9px) calc(50% + 1px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

input[type="number"],
input[type="text"] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
}

input[type="range"] {
  width: 100%;
  padding: 0;
  border: 0;
  accent-color: var(--action);
}

:focus-visible {
  outline: 1px solid var(--action);
  outline-offset: 2px;
}

canvas {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Rack shell
   -------------------------------------------------------------------------- */

.rack {
  max-width: var(--rack-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}

.rail-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lume);
}

.brand b {
  color: var(--action);
  font-weight: 600;
}

.site-nav {
  display: flex;
  gap: 16px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-nav a {
  color: var(--dim);
  border-bottom: 1px solid transparent;
}

.site-nav a[aria-current="page"] {
  color: var(--lume);
  border-bottom-color: var(--action);
}

.rack-footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

/* --------------------------------------------------------------------------
   Boot indicator — a lattice of four cells that fills while the wasm streams
   in, then settles into a static mark.
   -------------------------------------------------------------------------- */

.boot-ring {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
}

.boot-ring__track {
  position: absolute;
  inset: 0;
  border: 1px solid var(--rule);
}

.boot-ring__fill {
  position: absolute;
  inset: 2px;
  background: conic-gradient(
    from -90deg,
    var(--halton),
    var(--random) 55%,
    var(--probe) 85%,
    var(--halton)
  );
  mask-image: conic-gradient(
    from -90deg,
    #000 calc(var(--boot-progress, 0) * 360deg),
    transparent 0
  );
  transition: mask-image 120ms linear;
}

.boot-ring[data-state="ready"] .boot-ring__fill {
  mask-image: none;
  animation: ring-settle 500ms ease-out;
}

@keyframes ring-settle {
  from {
    transform: scale(0.86);
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: 40px 0 28px;
}

.hero__text {
  max-width: 62ch;
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

.hero h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  margin-bottom: 16px;
}

.lede {
  margin: 0;
  color: var(--dim);
  font-size: 15px;
}

.lede + .lede {
  margin-top: 12px;
}

.lede b {
  color: var(--lume);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Status + telemetry
   -------------------------------------------------------------------------- */

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 12px;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dim);
  flex: none;
}

.status[data-state="ready"] {
  color: var(--lume);
}

.status[data-state="ready"]::before {
  background: var(--ok);
}

.status[data-state="loading"]::before {
  background: var(--warn);
  animation: pulse 1s ease-in-out infinite;
}

.status[data-state="error"] {
  color: var(--bad);
}

.status[data-state="error"]::before {
  background: var(--bad);
}

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}

.telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  border: 1px solid var(--rule);
  border-top: 0;
}

.telemetry div {
  flex: 1 1 130px;
  padding: 10px 12px;
  border-right: 1px solid var(--rule);
}

.telemetry div:last-child {
  border-right: 0;
}

.telemetry .k {
  display: block;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.telemetry .v {
  color: var(--lume);
  font-size: 14px;
}

.telemetry .v[data-tone="good"] {
  color: var(--ok);
}

.telemetry .v[data-tone="bad"] {
  color: var(--bad);
}

/* --------------------------------------------------------------------------
   The side-by-side stage — the whole point of the Point Lab
   -------------------------------------------------------------------------- */

.stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  border-top: 0;
}

.plot {
  position: relative;
  border-right: 1px solid var(--rule);
  background: var(--rack);
}

.plot:last-child {
  border-right: 0;
}

.plot__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plot__head .glyph {
  width: 9px;
  height: 9px;
  flex: none;
  align-self: center;
}

.plot--halton .plot__head .glyph {
  background: var(--halton);
  border-radius: 50%;
}

.plot--random .plot__head .glyph {
  background: var(--random);
  clip-path: polygon(
    40% 0,
    60% 0,
    60% 40%,
    100% 40%,
    100% 60%,
    60% 60%,
    60% 100%,
    40% 100%,
    40% 60%,
    0 60%,
    0 40%,
    40% 40%
  );
  transform: rotate(45deg);
}

.plot--halton .plot__head b {
  color: var(--halton);
}

.plot--random .plot__head b {
  color: var(--random);
}

.plot__head .plot__meta {
  margin-left: auto;
  color: var(--dim);
  letter-spacing: 0.04em;
  text-transform: none;
}

.plot canvas {
  aspect-ratio: 1 / 1;
  cursor: crosshair;
}

/* --------------------------------------------------------------------------
   Transport
   -------------------------------------------------------------------------- */

.transport {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-top: 0;
}

.transport input[type="range"] {
  flex: 1;
  min-width: 80px;
}

.transport .frame-readout {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  min-width: 130px;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Legend
   -------------------------------------------------------------------------- */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend i {
  width: 9px;
  height: 9px;
  flex: none;
  background: currentColor;
}

.legend .halton {
  color: var(--halton);
}

.legend .halton i {
  border-radius: 50%;
}

.legend .random {
  color: var(--random);
}

.legend .random i {
  transform: rotate(45deg);
  clip-path: polygon(
    40% 0,
    60% 0,
    60% 40%,
    100% 40%,
    100% 60%,
    60% 60%,
    60% 100%,
    40% 100%,
    40% 60%,
    0 60%,
    0 40%,
    40% 40%
  );
}

.legend .mark {
  color: var(--mark);
}

.legend .mark i {
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--gutter);
  margin-top: 32px;
}

.control-group {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--rack);
  padding: 26px 16px 16px;
}

.corner-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 8px;
  background: var(--rule);
  color: var(--lume);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.field {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.field--wide {
  grid-template-columns: 84px minmax(0, 1fr);
}

.field:first-of-type {
  margin-top: 4px;
}

.field > label {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field .out {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lume);
  text-align: right;
}

.field-note {
  margin: 12px 0 0;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.45;
}

.field-note b {
  color: var(--lume);
  font-weight: 500;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   The scramble switch — deliberately the loudest control on the page, because
   toggling it is the demonstration.
   -------------------------------------------------------------------------- */

.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--rule);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.02em;
  text-align: left;
}

.switch__led {
  width: 30px;
  height: 14px;
  flex: none;
  border: 1px solid var(--rule);
  background: var(--void);
  position: relative;
}

.switch__led::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 10px;
  background: var(--dim);
  transition: transform 140ms ease;
}

.switch[aria-pressed="true"] {
  border-color: var(--halton);
  color: var(--halton);
}

.switch[aria-pressed="true"] .switch__led {
  border-color: var(--halton);
}

.switch[aria-pressed="true"] .switch__led::after {
  background: var(--halton);
  transform: translateX(14px);
}

.switch__text {
  display: block;
}

.switch__text b {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.switch__text span {
  color: var(--dim);
  font-size: 12px;
}

.callout {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--warn);
  color: var(--dim);
  font-size: 12px;
  line-height: 1.45;
}

.callout b {
  color: var(--lume);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--gutter);
  margin-top: var(--gutter);
}

.panel {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--rack);
  padding: 26px 16px 16px;
}

.panel--wide {
  grid-column: 1 / -1;
}

.panel-note {
  margin: 0 0 12px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.45;
}

.panel-note b {
  color: var(--lume);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Digit inspector
   The radical inverse mirrors the base-p expansion of the index around the
   radix point. The layout says so literally: the integer digits run right to
   left towards the point, the fraction digits run left to right away from it,
   and a hovered column lights its twin on the other side.
   -------------------------------------------------------------------------- */

.mirror {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 6px 0 10px;
}

.mirror__side {
  display: flex;
  gap: 4px;
}

.mirror__side--int {
  flex: 1;
  justify-content: flex-end;
}

.mirror__side--frac {
  flex: 1;
  justify-content: flex-start;
}

.mirror__point {
  flex: none;
  align-self: stretch;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  color: var(--mark);
}

.digit {
  min-width: 34px;
  padding: 5px 4px;
  border: 1px solid var(--rule);
  background: var(--void);
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  transition: border-color 120ms ease;
}

.digit__pos {
  display: block;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.digit__raw {
  display: block;
  color: var(--lume);
}

.digit__perm {
  display: block;
  color: var(--probe);
  font-size: 11px;
  margin-top: 2px;
}

.digit__perm::before {
  content: "↓";
  display: block;
  color: var(--dim);
  font-size: 9px;
  line-height: 1;
}

.digit[data-twin="on"] {
  border-color: var(--mark);
}

.digit--void {
  opacity: 0.35;
}

.mirror-empty {
  padding: 12px 0;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 12px;
}

.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  margin-top: 8px;
}

.readouts div {
  padding: 9px 12px;
  border-right: 1px solid var(--rule);
}

.readouts div:last-child {
  border-right: 0;
}

.readouts .k {
  display: block;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.readouts .v {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lume);
  word-break: break-all;
}

.readouts .v[data-tone="scrambled"] {
  color: var(--halton);
}

.readouts .v[data-tone="plain"] {
  color: var(--random);
}

/* --------------------------------------------------------------------------
   Heatmap
   -------------------------------------------------------------------------- */

.heatmap-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.heatmap-wrap canvas#heatmap {
  aspect-ratio: 1 / 1;
  max-height: 62vh;
  cursor: crosshair;
}

canvas#heatLegend {
  height: 44px;
}

.cell-readout {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
}

.cell-readout b {
  color: var(--lume);
  font-weight: 500;
}

.verdict {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0;
  border: 1px solid var(--rule);
  margin-bottom: 12px;
}

.verdict div {
  padding: 12px;
  border-right: 1px solid var(--rule);
}

.verdict div:last-child {
  border-right: 0;
}

.verdict .k {
  display: block;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.verdict .big {
  display: block;
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1.1;
  color: var(--lume);
}

.verdict .big[data-tone="good"] {
  color: var(--ok);
}

.verdict .big[data-tone="bad"] {
  color: var(--bad);
}

.verdict .sub {
  display: block;
  margin-top: 4px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   Convergence chart
   -------------------------------------------------------------------------- */

canvas#convChart {
  aspect-ratio: 16 / 9;
  max-height: 60vh;
}

.progress {
  height: 3px;
  background: var(--rule);
  margin-top: 14px;
}

.progress__bar {
  height: 100%;
  width: 0;
  background: var(--action);
  transition: width 160ms linear;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chart-legend i {
  width: 18px;
  height: 0;
  flex: none;
  border-top: 2px solid currentColor;
}

.chart-legend .qmc {
  color: var(--halton);
}

.chart-legend .mc {
  color: var(--random);
}

.chart-legend .mc i {
  border-top-style: dashed;
}

.chart-legend .ref {
  color: var(--mark);
}

.chart-legend .ref i {
  border-top-style: dotted;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin-top: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

th,
td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--rule);
}

th:first-child,
td:first-child {
  text-align: left;
}

thead th {
  color: var(--dim);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: var(--rack);
}

tbody tr:hover td {
  background: rgb(255 255 255 / 3%);
}

td.win {
  color: var(--ok);
}

td.lose {
  color: var(--bad);
}

/* --------------------------------------------------------------------------
   Caveats
   -------------------------------------------------------------------------- */

.caveat {
  margin-top: var(--gutter);
  padding: 16px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--warn);
  color: var(--dim);
  font-size: 13px;
  line-height: 1.55;
}

.caveat h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--lume);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.caveat p {
  margin: 0 0 8px;
}

.caveat p:last-child {
  margin-bottom: 0;
}

.caveat b {
  color: var(--lume);
  font-weight: 500;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Motion
   Structure is always visible without JS. The reveal is additive: it only
   plays once data-boot flips to "ready", and if that attribute is never set
   the page still reads as a complete static layout rather than a blank gap.
   -------------------------------------------------------------------------- */

.rack[data-boot="ready"] .stage {
  animation: sweep-in 700ms ease-out forwards;
}

.rack[data-boot="ready"] .controls {
  animation: fade-up 420ms ease-out 120ms both;
}

.rack[data-boot="ready"] .panels {
  animation: fade-up 420ms ease-out 220ms both;
}

@keyframes sweep-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

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

  .plot {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .plot:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 16px;
  }

  .field,
  .field--wide {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .field .out {
    text-align: left;
  }

  .site-nav {
    gap: 12px;
  }

  .transport {
    flex-wrap: wrap;
  }
}