/* Extropic's web identity, from its Brand Skill: a near-black red ground,
   white text, warm gold for emphasis and controls, the grey card border,
   gold-outlined transparent buttons with a small radius and no shadows.
   Kessler (400) sets headings with tight tracking, Suisse (400) the body and
   Suisse Mono (400) labels and buttons. The Skill also names Times New Roman
   for the main heading, but extropic.ai loads no such face; Kessler stands in,
   as it does for the site's own display lines. */
@font-face {
  font-family: "Kessler";
  src: url("/examples/extropic/fonts/kessler-400.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Suisse";
  src: url("/examples/extropic/fonts/suisse-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Mono";
  src: url("/examples/extropic/fonts/suisse-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground: #1c0101;
  --text: #ffffff;
  --gold: #f5d54c;
  --line: #374151;
  --serif: "Kessler", serif;
  --sans: "Suisse", sans-serif;
  --mono: "Suisse Mono", monospace;
  --gutter: clamp(20px, 4vw, 56px);
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100vh;
  font-size: 17px;
  line-height: 1.5;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  padding: 8px 12px;
  background: var(--ground);
  font-family: var(--mono);
  font-size: 13px;
  z-index: 2;
}
.skip:focus {
  top: 12px;
}
/* The skip link's target takes focus so Tab continues from the circuits. It
   isn't a control, so it shows no ring. */
.circuits:focus {
  outline: none;
}

.bar,
main,
.foot {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 32px;
}

.wordmark img {
  display: block;
  width: clamp(148px, 16vw, 200px);
  height: auto;
}

.bar-label,
.eyebrow,
.step-label,
.notice-label {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow span {
  margin-right: 10px;
}

.hero {
  padding-block: clamp(48px, 9vw, 120px) clamp(48px, 7vw, 88px);
  max-width: 980px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
}

/* Display headings in capitals with tight tracking, as extropic.ai sets
   them and as the corrected Brand Skill asks. */
h1,
h2 {
  text-transform: uppercase;
}

h1 {
  margin-top: 20px;
  font-size: clamp(46px, 8.6vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.lead {
  margin-top: 28px;
  max-width: 640px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
}

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-top: 32px;
  max-width: 640px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
}

.notice p {
  flex: 1 1 280px;
  font-size: 15px;
  line-height: 1.45;
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
}

.jump a,
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: transparent;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.jump a span {
  color: var(--text);
}

.circuits {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.circuit {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  grid-template-areas:
    "head plot"
    "controls plot";
  grid-template-rows: auto 1fr;
  gap: 0 40px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 4px;
  scroll-margin-top: 24px;
}

h2 {
  margin-top: 14px;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.circuit-head {
  grid-area: head;
}

.circuit-controls {
  grid-area: controls;
}

.circuit-head > p:not(.eyebrow) {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}

.control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 15px;
  line-height: 20px;
}

.control output {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.control input {
  grid-column: 1 / -1;
}

input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--text);
}
input[type="range"]::-moz-range-track {
  height: 1px;
  background: var(--text);
}
input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  -webkit-appearance: none;
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.plot {
  grid-area: plot;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.plot-row {
  display: flex;
  gap: 4px;
  height: clamp(220px, 26vw, 320px);
}

/* Each canvas fills a box the layout sizes, so the drawing buffer the
   script sets never feeds back into the layout. */
.canvas-box {
  position: relative;
  min-width: 0;
}

.canvas-box canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.trace-box {
  flex: 1 1 0;
}

.density-box {
  flex: 0 0 clamp(92px, 13vw, 168px);
}

.readout {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.readout > span {
  white-space: nowrap;
}

.readout b {
  font-weight: 400;
  color: var(--gold);
}

.stack {
  padding-block: clamp(72px, 9vw, 120px) clamp(48px, 6vw, 80px);
}

.stack h2 {
  max-width: 720px;
}

.stack-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.stack-steps li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* Card titles in Suisse Mono capitals, like the product names on
   extropic.ai/hardware. */
.stack-steps h3 {
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.stack-steps p {
  font-size: 15px;
  line-height: 1.45;
}

.stack-software {
  margin-top: 32px;
  max-width: 640px;
  font-size: 17px;
}

.foot-inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-block: 40px 56px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}

.foot p {
  max-width: 640px;
}

/* The supplied mark is black stipple on transparent; on the dark ground it
   is shown white, as extropic.ai shows it. It is drawn at the file's native
   256 px wherever the screen allows: scaled down, its stippled wings fade
   into solid or faint beams. Phones show 128 px, which is 256 device pixels
   on their 2x screens. */
.mark {
  flex: 0 0 auto;
  display: block;
  width: 256px;
  height: auto;
}

@media (max-width: 960px) {
  .circuit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "plot" "controls";
    grid-template-rows: auto;
    gap: 28px;
  }
  .controls {
    margin-top: 0;
  }
  .stack-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  .bar {
    padding-block: 24px;
  }
  .stack-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .mark {
    width: 128px;
  }
}