@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #05060a;
  --bg-raised: #0b0e18;
  --panel: rgba(13, 17, 30, 0.72);
  --panel-solid: #0d111e;
  --line: rgba(122, 162, 255, 0.14);
  --line-strong: rgba(122, 162, 255, 0.32);
  --text: #e8edff;
  --muted: #909ab8;
  --faint: #5d6684;

  --cyan: #4df3ff;
  --violet: #9d7bff;
  --pink: #ff5cc8;
  --lime: #a4ff6b;
  --amber: #ffb547;

  /* Syntax palette for the code panes. Comments stay above 4.5:1 on --src-bg. */
  --src-bg: #070a14;
  --syn-kw: #c3a6ff;
  --syn-key: #8fdcff;
  --syn-str: #b9f98f;
  --syn-num: #ffb547;
  --syn-fn: #4df3ff;
  --syn-com: #7a86a8;
  --syn-punc: #8a93b3;
  --syn-id: #dbe2ff;

  /* File-type squares on tabs and pane heads. */
  --ft-md: #6ea8ff;
  --ft-dir: var(--violet);
  --ft-js: var(--amber);
  --ft-sh: var(--lime);

  --glow-cyan: 0 0 24px rgba(77, 243, 255, 0.35);
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 5vw, 64px);
  --max: 1180px;
  --radius: 14px;
  --header-h: 60px;

  --mx: 50vw;
  --my: 30vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* The offset goes on what scrolls into view, not on html: with scroll-padding
   the sticky header's own controls count as hidden and focusing one scrolls the page. */
main [id],
main a,
main button,
main [tabindex],
footer a {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(157, 123, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(77, 243, 255, 0.1), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

::selection {
  background: rgba(77, 243, 255, 0.3);
  color: #fff;
}

/* ---------- Atmosphere ---------- */

.field {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.spotlight {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(77, 243, 255, 0.07), transparent 70%);
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--cyan);
  color: var(--bg);
  font-weight: 600;
  border-radius: 8px;
}

.skip:focus {
  top: 12px;
}

/* ---------- HUD header ---------- */

.hud {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding: 0 var(--gutter);
  background: rgba(5, 6, 10, 0.62);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--cyan);
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: var(--glow-cyan);
}

/* Editor tabs: one per section, flush with the header's bottom edge. */
.tabs {
  position: relative;
  display: flex;
  align-self: stretch;
  min-width: 0;
  margin-left: 8px;
  border-left: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  text-transform: none;
  letter-spacing: 0;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.tab::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px 1px rgba(77, 243, 255, 0.7);
  opacity: 0;
  transition: opacity 0.2s;
}

.tab:hover {
  color: var(--text);
  background: rgba(122, 162, 255, 0.05);
}

.tab[aria-current] {
  color: var(--text);
  background: linear-gradient(rgba(77, 243, 255, 0.1), rgba(77, 243, 255, 0.02));
}

.tab[aria-current]::before {
  opacity: 1;
}

.tab:focus-visible {
  outline-offset: -4px;
}

.ext {
  margin-left: -8px;
  color: var(--syn-com);
}

.ft {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ft, var(--muted));
  box-shadow: 0 0 8px -1px var(--ft, transparent);
}

.ft-md { --ft: var(--ft-md); }
.ft-dir { --ft: var(--ft-dir); }
.ft-js { --ft: var(--ft-js); }
.ft-sh { --ft: var(--ft-sh); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(164, 255, 107, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(164, 255, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(164, 255, 107, 0); }
}

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

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: 48px var(--gutter) 150px;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.boot {
  margin: 0 0 28px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}

.boot-prompt {
  color: var(--lime);
  margin-right: 8px;
}

.boot-cmd {
  color: var(--text);
}

.caret {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 3px;
  vertical-align: -0.2em;
  background: var(--cyan);
  box-shadow: var(--glow-cyan);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.kicker {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
}

.name-wrap {
  position: relative;
  font-size: clamp(3.2rem, 13vw, 9.5rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.name {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.name-text {
  position: relative;
  z-index: 1;
  background: linear-gradient(100deg, #ffffff 0%, #d7f9ff 35%, var(--cyan) 62%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(77, 243, 255, 0.18));
}

.name-ghost {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.ghost-a {
  color: var(--pink);
}

.ghost-b {
  color: var(--cyan);
}

.tagline {
  max-width: 22ch;
  text-wrap: balance;
  margin: 26px 0 0;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 36px 0 0;
}

.readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
  margin: 56px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.readout-cell {
  padding: 16px 18px;
}

.readout-cell + .readout-cell {
  border-left: 1px solid var(--line);
}

.readout dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.readout dd {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* A code comment under each number, pointing at where it comes from. */
.readout .readout-src {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--syn-com);
  text-wrap: balance;
}

/* Comment links keep a faint dotted underline so they read as links on touch
   screens too; the padding grows the tap target without moving anything. */
.readout-src a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
  color: inherit;
  text-decoration: underline dotted rgba(122, 134, 168, 0.5);
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.readout-src a:hover {
  color: var(--cyan);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

/* The hero monitor: htop and a live log of this page, on a tilted screen. */
.monitor {
  position: absolute;
  z-index: 0;
  right: -24px;
  bottom: -12px;
  width: min(540px, 40vw);
  perspective: 1400px;
  pointer-events: none;
}

.monitor::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 181, 71, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 70px 12px rgba(255, 181, 71, 0.18), inset 0 0 60px rgba(255, 181, 71, 0.16);
}

.monitor-screen {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(122, 162, 255, 0.4);
  border-radius: 12px;
  background: #03060c;
  box-shadow:
    0 0 0 7px #0a0e19,
    0 0 0 8px rgba(122, 162, 255, 0.22),
    0 50px 100px -30px rgba(77, 243, 255, 0.4),
    inset 0 0 90px rgba(77, 243, 255, 0.06);
  transform: rotateY(-14deg) rotateX(3deg);
  transform-origin: right center;
}

/* Scanlines and a glass glare over the whole screen. */
.monitor-screen::before,
.monitor-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.monitor-screen::before {
  z-index: 2;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
}

.monitor-screen::after {
  z-index: 3;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 38%);
}

.term {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  height: 290px;
  color: #c9f7d6;
  font: 11px/1.5 var(--mono);
}

.term-pane {
  min-width: 0;
  overflow: hidden;
  padding: 10px 12px;
}

.term-top {
  border-right: 1px solid rgba(122, 162, 255, 0.16);
}

.term pre {
  margin: 0;
  font: inherit;
  white-space: pre;
}

.term-meters {
  margin-bottom: 12px !important;
}

.term .mk { color: var(--cyan); }
.term .mg { color: var(--lime); }
.term .mc { color: var(--cyan); }
.term .tp { color: var(--cyan); }
.term .tr { color: var(--lime); }
.term .ts { color: var(--muted); }
.term .tf { color: var(--amber); }

.term-head {
  display: inline-block;
  background: var(--lime);
  color: #03060c;
}

.term-cmd {
  margin: 0 0 6px;
  color: var(--muted);
}

.term-prompt {
  color: var(--lime);
}

.mon-log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(100% - 24px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.mon-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: mon-in 0.35s ease-out;
}

.mon-line time { color: #56708a; }
.mon-line b { color: var(--cyan); font-weight: 400; }
.mon-line b.warn { color: var(--amber); }
.mon-line b.ok { color: var(--lime); }

.mon-cursor::after {
  content: "_";
  color: var(--lime);
  animation: blink 1s steps(1) infinite;
}

@keyframes mon-in {
  from { opacity: 0; transform: translateY(4px); }
}

.term-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 3px 12px;
  background: rgba(164, 255, 107, 0.88);
  color: #03060c;
  font: 10.5px/1.6 var(--mono);
  white-space: nowrap;
}

.js .monitor {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease 0.5s, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s;
}

.js .hero.is-booted .monitor {
  opacity: 1;
  transform: none;
}

.horizon {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 50%;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(77, 243, 255, 0.42) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(157, 123, 255, 0.42) 1px, transparent 1px) 0 0 / 64px 64px;
  transform: perspective(420px) rotateX(56deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 25%, transparent 95%);
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 95%);
  animation: grid-run 3.2s linear infinite;
}

.horizon::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--cyan), var(--violet), transparent);
  box-shadow: 0 0 30px 6px rgba(77, 243, 255, 0.35);
}

@keyframes grid-run {
  to { background-position: 0 64px, 0 64px; }
}

/* Boot sequence: only when JS is running, content is otherwise visible. */

.js .hero .kicker,
.js .hero .tagline,
.js .hero .hero-cta,
.js .hero .readout {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .hero .name-wrap {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.6s ease, filter 0.8s ease;
}

.js .hero.is-booted .kicker,
.js .hero.is-booted .name-wrap,
.js .hero.is-booted .tagline,
.js .hero.is-booted .hero-cta,
.js .hero.is-booted .readout {
  opacity: 1;
  transform: none;
  filter: none;
}

.js .hero.is-booted .tagline { transition-delay: 0.25s; }
.js .hero.is-booted .hero-cta { transition-delay: 0.4s; }
.js .hero.is-booted .readout { transition-delay: 0.55s; }

.hero.is-booted .ghost-a { animation: glitch-a 0.9s steps(2) 0.1s 1 both; }
.hero.is-booted .ghost-b { animation: glitch-b 0.9s steps(2) 0.1s 1 both; }
.name-wrap:hover .ghost-a { animation: glitch-a 0.6s steps(2) 1 both; }
.name-wrap:hover .ghost-b { animation: glitch-b 0.6s steps(2) 1 both; }

@keyframes glitch-a {
  0% { opacity: 0.8; transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); }
  25% { opacity: 0.8; transform: translate(5px, -2px); clip-path: inset(60% 0 12% 0); }
  50% { opacity: 0.7; transform: translate(-3px, 1px); clip-path: inset(30% 0 40% 0); }
  75% { opacity: 0.6; transform: translate(4px, 0); clip-path: inset(75% 0 5% 0); }
  100% { opacity: 0; transform: none; clip-path: inset(0); }
}

@keyframes glitch-b {
  0% { opacity: 0.8; transform: translate(6px, -2px); clip-path: inset(55% 0 20% 0); }
  25% { opacity: 0.8; transform: translate(-5px, 2px); clip-path: inset(5% 0 70% 0); }
  50% { opacity: 0.7; transform: translate(3px, -1px); clip-path: inset(45% 0 30% 0); }
  75% { opacity: 0.6; transform: translate(-4px, 0); clip-path: inset(15% 0 60% 0); }
  100% { opacity: 0; transform: none; clip-path: inset(0); }
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s;
}

.btn-primary {
  background: linear-gradient(100deg, var(--cyan), #8ab8ff);
  color: #031018;
  box-shadow: 0 0 0 1px rgba(77, 243, 255, 0.5), 0 8px 30px -8px rgba(77, 243, 255, 0.6);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(77, 243, 255, 0.8), 0 12px 38px -8px rgba(77, 243, 255, 0.8);
}

.btn-ghost {
  border: 1px solid var(--line-strong);
  background: rgba(13, 17, 30, 0.5);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.btn-lg {
  min-height: 56px;
  padding: 14px 28px;
  font-size: 15px;
}

/* ---------- Sections ---------- */

.section {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(80px, 12vw, 150px) var(--gutter) 0;
}

.label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line-strong), transparent);
}

.label-num {
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--text);
}

h2 {
  max-width: 24ch;
  text-wrap: balance;
  margin: 0 0 40px;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h3 {
  margin: 14px 0 6px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lead {
  margin-top: 0;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.45;
  color: var(--text);
}

.prose p {
  max-width: 60ch;
  color: var(--muted);
}

.prose .lead {
  color: var(--text);
}

/* ---------- Readme ---------- */

.readme-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.directives {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.directive {
  position: relative;
  padding: 18px 20px 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
}

.directive::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--cyan), var(--violet));
  box-shadow: var(--glow-cyan);
}

.directive-num {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.directive strong {
  display: block;
  margin: 4px 0 4px;
  font-size: 1.12em;
  font-weight: 600;
  color: var(--text);
}

/* CodeLens-style link under a directive. */
.lens {
  display: block;
  width: fit-content;
  margin: -4px 0 -12px;
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--syn-com);
  text-decoration: underline dotted rgba(122, 134, 168, 0.5);
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.lens:hover {
  color: var(--cyan);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

/* ---------- Builds ---------- */

.builds {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.build {
  --x: 50%;
  --y: 50%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(20px, 3.4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(600px circle at var(--x) var(--y), rgba(77, 243, 255, 0.06), transparent 60%),
    var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s;
}

.build:hover {
  border-color: var(--line-strong);
}

/* HUD corner brackets */
.build::before,
.build::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--cyan);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.build::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 22px;
}

.build::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 22px;
}

.build:hover::before { opacity: 1; transform: translate(-4px, -4px); }
.build:hover::after { opacity: 1; transform: translate(4px, 4px); }

.build:nth-child(even) .build-media {
  order: 2;
}

.build-body {
  min-width: 0;
  container-type: inline-size;
}

.build-body h3 {
  margin-top: 0;
}

.build-hook {
  margin: 0 0 14px;
  text-wrap: balance;
  font-size: 1.15em;
  font-weight: 500;
  color: var(--cyan);
}

.nowrap {
  white-space: nowrap;
}

.build-body > p:not([class]) {
  margin: 0;
  color: var(--muted);
}

.build-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}

.build-media {
  min-width: 0;
}

/* The maze's media column is tall, so its text stays at the top beside it. */
.build-maze {
  align-items: start;
}

@media (min-width: 901px) {
  .build-maze .build-body {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

/* sf6 console */
.console {
  overflow: hidden;
  border: 1px solid rgba(255, 181, 71, 0.28);
  border-radius: 12px;
  background: #0a0a12;
  box-shadow: 0 30px 60px -30px rgba(255, 181, 71, 0.25), inset 0 0 60px rgba(255, 181, 71, 0.03);
  font-family: var(--mono);
  font-size: clamp(11px, 1.15vw, 13px);
}

.console-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 181, 71, 0.18);
  background: #12111c;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b8b2c8;
}

.console-tag {
  padding: 1px 6px;
  border: 1px dashed var(--amber);
  color: var(--amber);
  letter-spacing: 0.06em;
}

.console-log {
  display: grid;
  gap: 2px;
  min-height: 15.5em;
  margin: 0;
  padding: 12px 14px 14px;
  list-style: none;
}

.log-row {
  display: grid;
  grid-template-columns: 1.6em 2.6em 3.8em 3em minmax(0, 1fr);
  align-items: baseline;
  column-gap: 6px;
  padding: 3px 6px;
  border-radius: 5px;
  color: #d9d4e8;
  transition: opacity 0.25s, transform 0.25s;
}

.log-row .dir { color: #fff; }
.log-row .btn-in { color: var(--amber); font-weight: 700; }
.log-row .num { color: #8f89a6; }
.log-row .frames { color: #6d6784; text-align: right; }

.log-row .result {
  grid-column: 5;
  font-weight: 600;
}

.log-row .result em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.8;
}

.log-row.is-hit {
  background: rgba(164, 255, 107, 0.08);
}

.log-row.is-hit .result { color: var(--lime); }

.log-row.is-miss {
  background: rgba(255, 92, 200, 0.09);
}

.log-row.is-miss .result { color: #ff8fd8; }

.js .log-row.is-pending {
  opacity: 0;
  transform: translateX(-8px);
}

/* gcwind phone */
.phone {
  position: relative;
  width: min(300px, 78%);
  margin: 0 auto;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 40px;
  background: linear-gradient(160deg, #1a2034, #0a0d16);
  box-shadow:
    0 40px 80px -30px rgba(77, 243, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transform: rotate(-3deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.build:hover .phone {
  transform: rotate(0deg) translateY(-6px);
}

.phone img {
  border-radius: 29px;
}

/* Scorpion window */
.window {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #0a0d16;
  box-shadow: 0 40px 80px -34px rgba(157, 123, 255, 0.45);
  transform: perspective(1200px) rotateY(6deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.build:hover .window {
  transform: none;
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

.window-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2a3148;
}

.window-bar i:first-child { background: var(--pink); }
.window-bar i:nth-child(2) { background: var(--amber); }
.window-bar i:nth-child(3) { background: var(--lime); }

.window-bar span {
  margin-left: 8px;
}

/* maze */
.maze {
  margin: 0;
}

.maze-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 380;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #060811;
  box-shadow: 0 40px 80px -34px rgba(77, 243, 255, 0.35);
}

.maze-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

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

.key {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.key-path { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.key-dead { background: rgba(157, 123, 255, 0.55); }
.key-exit { background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* ---------- Code panes ---------- */

.src {
  --pane-bg: var(--src-bg);
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--pane-bg);
  box-shadow: 0 30px 60px -36px rgba(77, 243, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
}

.src-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(122, 162, 255, 0.04);
  font-size: 12px;
  line-height: 1.5;
}

.src-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  white-space: nowrap;
}

/* The text is clipped, not the row, so the square's glow stays round. */
.src-file > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.src-dir,
.src-meta {
  color: var(--syn-com);
}

.src-meta {
  flex: none;
  white-space: nowrap;
}

/* Code never wraps: it scrolls inside the pane, and a glow on the right edge
   shows while more is off-screen (the "local" layer fades it out near the end). */
.src-body {
  overflow-x: auto;
  padding: 12px 0;
  background:
    linear-gradient(to left, var(--pane-bg) 45%, transparent) right center / 44px 100% no-repeat local,
    linear-gradient(to left, rgba(77, 243, 255, 0.16), transparent) right center / 28px 100% no-repeat scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.src-body:focus-visible {
  outline-offset: -2px;
}

.src-code {
  display: block;
  min-width: max-content;
  padding-right: 16px;
  color: var(--syn-id);
  counter-reset: ln;
}

.src-code .l {
  display: block;
  padding-left: 16px;
  white-space: pre;
}

.src-gutter .l {
  counter-increment: ln;
}

/* Browsers without alt text for generated content get no gutter, and keep the padding. */
@supports (content: "x" / "") {
  .src-gutter .l {
    padding-left: 0;
  }

  .src-gutter .l::before {
    content: counter(ln) / "";
    display: inline-block;
    flex: none;
    width: 3.4em;
    padding-right: 1.2em;
    color: rgba(144, 154, 184, 0.8);
    text-align: right;
    user-select: none;
  }
}

.src-code .kw { color: var(--syn-kw); }
.src-code .k { color: var(--syn-key); }
.src-code .s { color: var(--syn-str); }
.src-code .n { color: var(--syn-num); }
.src-code .c { color: var(--syn-com); font-style: italic; }
.src-code .p { color: var(--syn-punc); }
.src-code .fn { color: var(--syn-fn); }

.src-empty {
  display: block;
  padding: 0 16px;
  color: var(--syn-com);
  white-space: normal;
}

.src-code:has(.src-empty) {
  min-width: 0;
}

/* Build manifests: the card's status, years and stack as a small object. */
.src-note {
  --pane-bg: #0a0e18;
  margin: 22px 0 0;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12.5px;
}

.src-note .src-body {
  padding: 10px 0;
}

.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.st-live { color: var(--lime); }
.st-live .st-dot { animation: pulse 2.4s infinite; }
.st-beta { color: var(--amber); }
.st-legacy { color: var(--violet); }
.st-code { color: var(--cyan); }

.src-code .tc {
  display: none;
}

/* In a narrow card the stack array breaks one item per line, like a formatter would. */
@container (max-width: 470px) {
  .src-note .arr,
  .src-note .ai,
  .src-note .arr-end {
    display: block;
  }

  .src-note .ai {
    padding-left: 4ch;
  }

  .src-note .arr-end {
    padding-left: 2ch;
  }

  .src-note .tc {
    display: inline;
  }
}

/* The maze's own source, with the branch it just took lit up. */
.src-trace {
  margin-top: 14px;
  font-size: 12.5px;
  container-type: inline-size;
}

.src-trace .l {
  transition: background-color 0.12s, box-shadow 0.12s;
}

.src-trace .l.is-go {
  background: rgba(77, 243, 255, 0.12);
  box-shadow: inset 3px 0 0 var(--cyan);
}

.src-trace .l.is-exit {
  background: rgba(164, 255, 107, 0.14);
  box-shadow: inset 3px 0 0 var(--lime);
}

.src-trace .l.is-back {
  background: rgba(157, 123, 255, 0.16);
  box-shadow: inset 3px 0 0 var(--violet);
}

.src-trace .l.is-done {
  background: rgba(232, 237, 255, 0.06);
  box-shadow: inset 3px 0 0 var(--muted);
}

/* A solid gutter colour keeps the lit line's number readable on the tint. */
.src-trace .l[class*="is-"]::before {
  color: var(--muted);
}

/* In the two-column layout's narrowest range the source still fits without scrolling. */
@media (min-width: 901px) and (max-width: 1080px) {
  .src-trace {
    font-size: 12px;
  }

  .src-trace .l::before {
    width: 2.8em;
  }
}

.trace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: rgba(122, 162, 255, 0.03);
  font-size: 12px;
  line-height: 1.6;
}

.trace-rows {
  display: grid;
  min-width: 0;
  margin: 0;
}

.trace-at {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.trace-loc {
  flex: none;
  color: var(--cyan);
}

.trace-stmt {
  min-width: 0;
  color: var(--syn-id);
}

.trace-state {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* In a narrow pane the controls go under the rows. The longer statements and
   the finished message wrap there, so the rows keep room for three lines
   between them and the pane doesn't change height as the solver runs. */
@container (max-width: 620px) {
  .trace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 438px) {
  .trace-rows {
    align-content: start;
    min-height: 4.8em;
  }
}

@container (max-width: 340px) {
  .trace-rows {
    font-size: 11px;
  }

  .trace-at {
    display: block;
  }

  .trace-loc {
    margin-right: 10px;
  }
}

.trace-ctl {
  display: flex;
  gap: 8px;
  margin: 0;
}

.ctl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(13, 17, 30, 0.6);
  color: var(--text);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.ctl:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.ctl svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.ctl .ctl-play,
.ctl.is-paused .ctl-pause {
  display: none;
}

.ctl.is-paused .ctl-play {
  display: inline;
}

.ctl[hidden] {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Without JavaScript there is nothing to run: show only the pane's note. */
html:not(.js) .maze-canvas,
html:not(.js) .maze-legend,
html:not(.js) .trace {
  display: none;
}

html:not(.js) .src-trace {
  margin-top: 0;
}

/* ---------- Off-duty ---------- */

.src-offduty {
  max-width: 820px;
  font-size: 14px;
  line-height: 2;
}

/* The bars shrink to fit, and under 360px the pane tightens so the long
   comment fits too: this pane never needs to scroll. */
.src-offduty .src-code {
  min-width: 0;
}

/* Skill bars sit after each value like editor inlay hints. */
.src-offduty .meter {
  display: flex;
  align-items: center;
}

.lc {
  flex: none;
  width: 21ch;
}

@property --filled {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.meter-bar {
  --filled: var(--level);
  flex: 0 1 440px;
  min-width: 72px;
  height: 10px;
  margin-left: 6px;
  transition: --filled 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  border-radius: 3px;
  background:
    repeating-linear-gradient(to right, transparent 0 calc(10% - 3px), var(--src-bg) calc(10% - 3px) 10%),
    linear-gradient(to right, var(--cyan) 0 calc(var(--filled) * 10%), rgba(122, 162, 255, 0.12) calc(var(--filled) * 10%));
  box-shadow: 0 0 14px -4px rgba(77, 243, 255, 0.5);
}

.js .src-offduty .meter-bar {
  --filled: 0;
}

.js .src-offduty.is-in .meter-bar {
  --filled: var(--level);
}

.meter-max .meter-bar {
  background:
    repeating-linear-gradient(to right, transparent 0 calc(10% - 3px), var(--src-bg) calc(10% - 3px) 10%),
    linear-gradient(to right, var(--lime) 0 calc(var(--filled) * 10%), rgba(122, 162, 255, 0.12) calc(var(--filled) * 10%));
  box-shadow: 0 0 18px -2px rgba(164, 255, 107, 0.6);
}

/* ---------- Signal ---------- */

.signal {
  padding-bottom: clamp(80px, 12vw, 140px);
}

.signal .lead {
  max-width: 44ch;
  color: var(--muted);
}

/* ---------- Footer ---------- */

.footer {
  padding-bottom: 36px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--syn-com);
}

.statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  margin: 0;
  padding: 7px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(77, 243, 255, 0.1), rgba(157, 123, 255, 0.07));
  color: var(--muted);
}

.statusbar > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}

.statusbar > span:first-child {
  padding-left: 0;
}

.statusbar > span:last-child {
  border-right: 0;
}

.sb-branch {
  color: var(--cyan);
}

.sb-branch svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.sb-end {
  margin-left: auto;
}

.statusbar > span:has(+ .sb-end) {
  border-right: 0;
}

.footer-meta {
  padding: 22px var(--gutter) 0;
  text-align: center;
}

.footer-meta p {
  margin: 6px 0;
}

.changelog .now {
  color: var(--cyan);
  white-space: nowrap;
}

/* ---------- Scroll reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

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

@media (max-width: 900px) {
  .readme-grid,
  .build {
    grid-template-columns: minmax(0, 1fr);
  }

  .build:nth-child(even) .build-media {
    order: 0;
  }

  .window {
    transform: none;
  }
}

@media (max-width: 1150px) {
  .monitor {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 560px;
    margin-top: 48px;
  }

  .monitor::before {
    top: -18%;
    right: -6%;
    width: 42%;
  }

  .monitor-screen {
    transform: none;
  }
}

@media (max-width: 560px) {
  .term {
    grid-template-columns: minmax(0, 1fr);
    height: 220px;
  }

  .term-top {
    display: none;
  }
}

@media (max-width: 860px) {
  .brand-name {
    display: none;
  }

  .brand {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  .hud {
    gap: 10px;
  }

  .tab .ft,
  .tab .ext {
    display: none;
  }

  .tabs {
    flex: 1;
    margin-left: 0;
    border-left: 0;
  }

  .tab {
    padding: 0 9px;
    border-right: 0;
    font-size: 12px;
  }

  .tab::before {
    top: auto;
    bottom: 0;
  }

  .ctl {
    min-height: 44px;
    padding: 8px 16px;
  }

  .src {
    font-size: 12px;
  }

  .src-trace .src-meta {
    display: none;
  }

  .statusbar {
    column-gap: 0;
    font-size: 11px;
  }

  .statusbar > span {
    padding: 0 7px;
  }

  /* v3 is in the changelog right below. */
  .statusbar > .sb-ver,
  .statusbar > .sb-lang,
  .statusbar > .sb-end,
  .statusbar > .sb-eol {
    display: none;
  }

  .hero {
    min-height: 0;
    padding-top: 40px;
    padding-bottom: 190px;
  }

  .horizon {
    height: 190px;
  }

  .readout-cell {
    padding: 12px 10px;
  }

  .readout dt {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  /* The arrow would wrap onto a line of its own; the dotted underline still marks the link. */
  .readout .readout-src {
    font-size: 10px;
  }

  .readout-src a[href^="http"] > [aria-hidden]:last-child {
    display: none;
  }

  .log-row {
    grid-template-columns: 1.4em 2.2em 3.4em 2.6em minmax(0, 1fr);
  }

  .log-row .result {
    grid-column: 1 / -1;
    padding-left: 1.8em;
  }
}

@media (max-width: 359px) {
  .statusbar > span {
    padding: 0 4px;
  }

  .src-offduty {
    font-size: 11px;
  }

  .src-offduty .l::before {
    width: 2.4em;
  }

  .src-offduty .src-code {
    padding-right: 8px;
  }
}

@media (pointer: coarse) {
  .ctl {
    min-height: 44px;
  }
}

/* Forced colours drop backgrounds and shadows, so give the cues a system colour. */
@media (forced-colors: active) {
  .tab[aria-current]::before {
    background: Highlight;
    forced-color-adjust: none;
  }

  .meter-bar,
  .key {
    forced-color-adjust: none;
  }

  .src-trace .l.is-go,
  .src-trace .l.is-exit,
  .src-trace .l.is-back,
  .src-trace .l.is-done {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}

@media (hover: none) {
  .spotlight {
    display: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .horizon {
    animation: none;
  }
}

/* ---------- 404 ---------- */

.lost {
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: 0 var(--gutter) 20vh;
}

.lost h1 {
  margin: 0 0 12px;
  font-size: clamp(3rem, 12vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.lost + .horizon {
  position: fixed;
  z-index: -1;
}

.lost-cd {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--pink);
  overflow-wrap: anywhere;
}