@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Sedgwick"; src: url("fonts/sedgwick-ave-display-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "JB Mono"; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JB Mono"; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ground: #0D0E10;
  --raised: #15171A;
  --raised-2: #1C1F23;
  --line: rgba(242, 239, 232, .1);
  --line-2: rgba(242, 239, 232, .18);
  --ink: #F2EFE8;
  --dim: #A3A7AD;
  --faint: #6E737A;
  --paint: #FF9A1F;
  --hot: #FF5E1A;
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "JB Mono", ui-monospace, Consolas, monospace;
  --tag: "Sedgwick", "Archivo", sans-serif;
  --gutter: clamp(16px, 5vw, 80px);
  --wide: 1240px;
  --text: 640px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: none;
  color: var(--ink);
  font: 400 18px / 1.6 var(--sans);
  font-stretch: 100%;
}
/* the ground: warm from one corner, red from the other, very little of either */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(75% 65% at 0% 0%, rgba(255, 196, 40, .085), transparent 70%),
    radial-gradient(75% 65% at 100% 100%, rgba(255, 52, 30, .1), transparent 70%);
}
/* film grain over everything, very light */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: url("img/grain.svg");
  opacity: .07;
  mix-blend-mode: overlay;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
a:hover { color: var(--paint); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--paint); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
figure { margin: 0; }
::selection { background: var(--paint); color: #120C05; }

/* type */
h1 { margin: 0 0 .7em; font-size: clamp(26px, 3.2vw, 36px); font-weight: 650; font-stretch: 105%; line-height: 1.2; letter-spacing: -.01em; }
/* the big words: painted, like the logo (drips: site.js) */
h2 { position: relative; display: inline-block; margin: 0; font: 400 clamp(52px, 8.6vw, 124px) / 1 var(--tag); letter-spacing: .01em; transform: rotate(-2.5deg); transform-origin: 0 100%; text-shadow: 0 0 26px rgba(255, 140, 30, .2); }
h2 em { font-style: normal; color: var(--paint); }
.defs { position: absolute; }
.measuring { transform: none !important; }
.drips { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
h3 { margin: 0 0 .45em; font-size: 21px; font-weight: 700; font-stretch: 110%; line-height: 1.25; letter-spacing: -.005em; }
h4 { margin: 0; font: 400 30px / 1 var(--tag); letter-spacing: .01em; }
p { margin: 0 0 1em; }
.note { color: var(--dim); font-size: 15px; }
.label { display: flex; width: fit-content; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 12px / 1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paint); }
.label::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.keep { white-space: nowrap; }

/* top bar */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px var(--gutter);
  background: rgba(13, 14, 16, .78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px) saturate(1.4);
}
.top .home img { display: block; width: 92px; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font: 500 12px / 1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.top nav a { text-decoration: none; color: var(--dim); }
.top nav a:hover, .top nav a[aria-current] { color: var(--paint); }
.top nav a.manager { margin: -3px 0; padding: 3px 12px; border-radius: 999px; background: var(--paint); color: #140D05; font-weight: 500; }
.top nav a.manager:hover, .top nav a.manager[aria-current] { background: var(--hot); color: #140D05; }

main, footer { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main { flex: 1; }
section { padding: clamp(80px, 13vh, 150px) 0 0; }

/* the FM-1 screen: kept pixel-sharp */
.screen { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: #000; }

/* buttons */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border: 1px solid var(--paint);
  border-radius: 999px;
  background: var(--paint);
  color: #140D05;
  font: 700 15px / 1 var(--sans);
  font-stretch: 112%;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.cta:hover { color: #140D05; transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--paint); }
.cta.quiet { background: none; border-color: var(--line-2); color: var(--ink); }
.cta.quiet:hover { border-color: var(--paint); color: var(--paint); box-shadow: none; }
.cta:disabled, .cta:disabled:hover { border-color: var(--line); background: none; color: var(--faint); cursor: default; transform: none; box-shadow: none; }

/* hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, var(--text)) minmax(0, 420px); justify-content: space-between; align-items: center; gap: 56px; padding-top: clamp(40px, 8vh, 88px); }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: -14%;
  width: min(72%, 760px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 110, 26, .22), rgba(255, 154, 31, .06) 55%, transparent 75%);
  pointer-events: none;
}
.hero .logo { display: block; width: min(100%, 470px); margin: 0 0 clamp(28px, 5vh, 44px) -8px; }
.hero p { color: #D9D6CF; }
.hero .by { color: var(--dim); }
.mark, .ring { position: relative; white-space: nowrap; }
.ring { margin-left: 6px; }
.mark svg { position: absolute; left: 0; bottom: -7px; width: 100%; height: 10px; overflow: visible; }
.ring svg { position: absolute; left: -10px; top: -9px; width: calc(100% + 20px); height: calc(100% + 18px); overflow: visible; }
.mark path, .ring path { fill: none; stroke: var(--paint); stroke-width: 2.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {   /* painted in, left to right */
  .mark svg, .ring svg { clip-path: inset(0 100% 0 0); animation: wipe .9s .9s var(--ease) forwards; }
  .ring svg { animation-delay: 1.5s; }
}
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 1.8em 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 400 13px / 1.5 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.spec i { display: inline-block; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--paint); align-self: center; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.device .bezel {
  position: relative;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(160deg, #26292E, #121416 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 120px -40px var(--hot);
}
.device .screen { border-color: #000; border-radius: 10px; }
.device .stack { position: relative; }
.device .stack img + img { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.device .stack img.on { opacity: 1; }
.device figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font: 400 11px / 1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
@media (prefers-reduced-motion: no-preference) {
  .device .bezel { animation: float 7s ease-in-out infinite; }
}
@keyframes float { 50% { transform: translateY(-10px); } }

/* scope: the waveform of whatever is playing (idle: a slow morph) */
.scope { display: block; width: 100%; height: 140px; margin-top: clamp(32px, 6vh, 64px); }

/* running band of engine names */
.band {
  position: relative;
  left: 50%;
  width: 100vw;
  margin: 0 0 0 -50vw;
  padding: 20px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--raised);
  white-space: nowrap;
}
.band div { display: inline-flex; }
.band span { padding: 0 28px; font: 400 clamp(38px, 5.4vw, 70px) / 1.1 var(--tag); letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1.2px rgba(242, 239, 232, .3); }
.band span:nth-child(4n + 1) { color: var(--ink); -webkit-text-stroke: 0; }
.band span:nth-child(4n + 3) { color: var(--paint); -webkit-text-stroke: 0; }
.band span::after { content: "/"; margin-left: 56px; color: var(--faint); -webkit-text-stroke: 0; font-weight: 300; }
@media (prefers-reduced-motion: no-preference) {
  .band div { animation: run 60s linear infinite; }
  .band:hover div { animation-play-state: paused; }
}
@keyframes run { to { transform: translateX(-50%); } }

/* section heads: big type left, words right */
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: 24px 56px; margin-bottom: clamp(36px, 6vh, 64px); }
.head .intro p:last-child { margin-bottom: 0; }

/* engines */
.group { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 64px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 500 12px / 1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.group b { font-weight: 500; color: var(--faint); }
.head + .group { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eng {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--raised-2), var(--raised));
  transition: border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.eng:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 24px 50px -30px #000; }
.eng.on { border-color: var(--paint); box-shadow: 0 0 0 1px var(--paint), 0 30px 70px -40px var(--hot); }
.eng .play { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.eng .play img + img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.eng.on .play img + img { opacity: 1; }
.eng .play::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paint) url("img/play.svg") center / 100% no-repeat;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .8);
  transform: scale(.85);
  opacity: .92;
  transition: transform .25s var(--ease), opacity .25s;
}
.eng .play:hover::after, .eng .play:focus-visible::after { transform: scale(1); opacity: 1; }
.eng.on .play::after { background-image: url("img/pause.svg"); transform: scale(1); }
.eng .meter { position: absolute; left: 10px; bottom: 10px; width: calc(100% - 70px); height: 40px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.eng.on .meter { opacity: 1; }
.eng .name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 6px 10px; }
.eng .name small { font: 400 11px / 1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: right; }
.eng .name small span { display: block; }
.eng p { margin: 0 6px; font-size: 15px; line-height: 1.55; color: var(--dim); }
.eng .chain { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 6px 0; padding: 16px 0 0; list-style: none; }
.eng .chain li { padding: 4px 9px; border: 1px solid var(--line-2); border-radius: 999px; font: 400 11px / 1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #CFCBC3; }
.eng .chain li:first-child { border-color: transparent; padding-left: 0; padding-right: 2px; color: var(--paint); }
.demo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 24px 0 0; color: var(--dim); }

/* effects */
.split { display: grid; grid-template-columns: minmax(0, var(--text)) minmax(0, 420px); justify-content: space-between; gap: 56px; align-items: start; }
.fx { display: grid; grid-template-columns: max-content 1fr; gap: 0 24px; margin: 0 0 1.4em; padding: 0; font-size: 16px; }
.fx dt, .fx dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fx dt { font: 500 12px / 1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paint); }
.fx dd { margin: 0; }
.deep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 56px; }
.deep > div { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--raised-2), var(--raised)); }
.deep h3 { color: var(--paint); }
.deep p { margin: 0; font-size: 16px; color: #D9D6CF; }
.chainbox { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.chainbox .slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: slot; }
.chainbox .slots li {
  counter-increment: slot;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font: 500 11px / 1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.chainbox .slots li::before { content: counter(slot); position: absolute; top: 7px; left: 8px; color: var(--faint); font-size: 10px; }
.chainbox .slots li.full { border-color: transparent; background: var(--paint); color: #140D05; }
.chainbox .slots li.full::before { color: rgba(20, 13, 5, .55); }
.chainbox .slots li:not(.full) { color: var(--faint); border-style: dashed; }
.chainbox p { margin: 14px 0 0; font-size: 14px; color: var(--dim); }

/* playing it */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feat { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.feat p { margin: 0; color: var(--dim); font-size: 16px; }
.feat.wide { grid-column: 1 / -1; grid-template-columns: 320px minmax(0, 1fr); align-items: center; }

/* at a glance */
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 40px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.nums li { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
.nums li:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.nums b { display: block; font: 400 clamp(64px, 8vw, 112px) / .95 var(--tag); color: var(--ink); text-shadow: 0 0 26px rgba(255, 140, 30, .18); }
.nums li:nth-child(2n) b { color: var(--paint); }
.nums span { display: block; margin-top: 10px; font: 400 12px / 1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.facts li { position: relative; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); font-size: 16px; color: #D9D6CF; }
.facts li::before { content: ""; position: absolute; left: 0; top: 23px; width: 8px; height: 8px; border-radius: 2px; background: var(--paint); transform: rotate(45deg); }
.limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 64px 0 0; }
.limits h3 { margin: 0 0 6px; font: 500 12px / 1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paint); }
.limits dl { margin: 0; }
.limits dl div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.limits dt { font: 400 12px / 1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.limits dd { margin: 0; font-size: 15px; color: #D9D6CF; }

/* install */
.steps { display: grid; gap: 10px; margin: 0 0 1.4em; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.steps li::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; height: 52px; border-radius: 10px; background: var(--raised-2); font: 500 15px / 1 var(--mono); color: var(--paint); }
.install { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 1.6em 0 1em; }
.install label { font: 500 12px / 1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.install select { height: 50px; min-width: 240px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--raised); color: var(--ink); font: 400 15px var(--sans); }
.install select:disabled { color: var(--faint); }
.aside { position: sticky; top: 100px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(120% 90% at 100% 0, rgba(255, 110, 26, .16), transparent 60%), var(--raised); }
.aside p:last-child { margin: 0; }

/* instagram: a small look at the profile (all local, nothing loads from Instagram) */
.ig { position: sticky; top: 100px; display: grid; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(120% 90% at 100% 0, rgba(255, 110, 26, .16), transparent 60%), var(--raised); text-decoration: none; transition: border-color .3s var(--ease), transform .35s var(--ease); }
.ig:hover { color: inherit; border-color: var(--line-2); transform: translateY(-3px); }
.ig-top { display: flex; align-items: center; gap: 14px; }
.ig-avatar { width: 56px; height: 56px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, #FFC428, var(--paint), var(--hot)); object-fit: cover; }
.ig-top b { display: block; font-weight: 700; font-size: 17px; }
.ig-top small { display: block; font: 400 12px / 1.4 var(--mono); letter-spacing: .06em; color: var(--dim); }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ig-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #000; }
.ig .cta { justify-content: center; }

/* feedback */
.write { display: grid; gap: 12px; max-width: 760px; margin: 0 0 20px; }
.write > label { font: 500 12px / 1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.write textarea { width: 100%; min-height: 220px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--raised); color: var(--ink); font: 400 16px / 1.55 var(--sans); resize: vertical; }
.write textarea::placeholder { color: var(--faint); }
.write textarea:focus { border-color: var(--paint); outline: none; }
.write .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.write .send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.write .count { font: 400 12px var(--mono); letter-spacing: .1em; color: var(--faint); }
.write .note:empty { display: none; }
.feedback .small { max-width: 760px; font-size: 14px; }
.inbox .filter { font: 500 12px / 1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.msg .text { margin: 12px 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .actions .cta { height: 38px; padding: 0 16px; font-size: 12px; }
.msg.read { opacity: .55; }
.msg.read .num { color: var(--dim); }

/* changes */
.compare { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.compare label { font: 500 12px / 1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.compare select { height: 46px; min-width: 140px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--raised); color: var(--ink); font: 400 15px var(--sans); }
.compare-out { margin: 0 0 56px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.compare-out p { margin: 0; }
.compare-out ul { margin: 14px 0 0; padding-left: 1.2em; }
.compare-out b { font: 500 12px var(--mono); color: var(--paint); }
.log { display: grid; gap: 16px; }
.ver { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--raised-2), var(--raised)); }
.ver h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.ver .num { font: 400 40px / 1 var(--tag); color: var(--paint); }
.ver .vname { font-weight: 600; }
.ver time { margin-left: auto; font: 400 12px var(--mono); letter-spacing: .1em; color: var(--dim); }
.ver ul { margin: 8px 0 0; padding-left: 1.2em; color: #D9D6CF; }
.ver li { margin-bottom: 4px; }

/* questions */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: clamp(18px, 1.7vw, 22px); font-weight: 650; font-stretch: 108%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 50%; font: 400 20px / 1 var(--mono); color: var(--paint); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--paint); }
.faq details p { max-width: var(--text); margin: -6px 0 22px; color: var(--dim); }

/* about */
.credits { margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--dim); }
.credits li { padding: 10px 0; border-bottom: 1px solid var(--line); }

/* the player: one clip at a time, pinned to the bottom */
.player {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 30;
  display: grid;
  grid-template-columns: 40px auto minmax(60px, 1fr);
  align-items: center;
  gap: 14px;
  width: min(calc(100% - 32px), 560px);
  padding: 8px 18px 8px 8px;
  transform: translateX(-50%);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(21, 23, 26, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px #000;
  font: 400 12px / 1.3 var(--mono);
  letter-spacing: .06em;
}
.player[hidden] { display: none; }
.player button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paint) url("img/pause.svg") center / 100% no-repeat; cursor: pointer; }
.player.paused button { background-image: url("img/play.svg"); }
.player #player-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .bar { position: relative; height: 34px; cursor: pointer; }
.player .bar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.player .bar i { position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--line-2); }
.player #player-bar { display: block; width: 0; height: 100%; background: var(--paint); }

footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 32px;
  margin-top: clamp(96px, 14vh, 160px);
  padding-top: 32px;
  padding-bottom: 96px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
}
footer .sign { grid-column: 1 / -1; display: block; width: min(100%, 560px); height: auto; margin: 0 0 48px -8px; }
footer p { margin: 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12px / 1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
footer nav a { text-decoration: none; }

/* the home page as a deck of cards: every section is its own sheet across the whole screen. It scrolls like any page; once you
   reach its end it stays put and the next one rides up over it (plain sticky, the scrolling stays the browser's own). The height
   comes from site.js; without it --h is huge, top never kicks in and the cards just scroll. */
.deck { max-width: none; padding-left: 0; padding-right: 0; }
.deck > .hero, .deck > .scope { width: calc(100% - 2 * var(--gutter)); max-width: var(--wide); margin-left: auto; margin-right: auto; }
.deck > section[id], .deck ~ footer {
  --r: clamp(20px, 2.6vw, 36px);
  border-radius: var(--r) var(--r) 0 0;
  background:
    radial-gradient(900px 520px at 0 0, rgba(255, 196, 40, .055), transparent 70%),
    radial-gradient(700px 420px at 100% 0, rgba(255, 70, 30, .045), transparent 70%),
    linear-gradient(180deg, #131417, var(--ground) 420px);
  box-shadow: 0 1px 0 rgba(242, 239, 232, .09) inset, 0 -24px 60px -12px rgba(0, 0, 0, .75);
}
.deck > section[id] {
  position: sticky;
  top: min(0px, 100vh - var(--h, 100000px));
  overflow: clip;
  padding: clamp(72px, 11vh, 130px) max(var(--gutter), (100% - var(--wide)) / 2) clamp(80px, 12vh, 140px);
}
.deck > .band { margin-bottom: clamp(48px, 8vh, 96px); }
.deck > .at { display: block; }
.deck ~ footer { position: relative; max-width: none; margin-top: 0; padding: 56px max(var(--gutter), (100% - var(--wide)) / 2) 96px; border-top: 0; }

/* reveal on scroll and the way from one section into the next: CSS only, tied to the scroll position (nothing plays on its
   own, scrolling back runs it backwards); where the browser can't, nothing is hidden */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    /* cards one after another, column by column */
    .grid > .reveal:nth-child(3n + 2), .feats > .reveal:nth-child(2n) { animation-range: entry 8% entry 58%; }
    .grid > .reveal:nth-child(3n) { animation-range: entry 16% entry 66%; }
    .grid.four > .reveal:nth-child(n) { animation-range: entry 0% entry 50%; }
    .grid.four > .reveal:nth-child(4n + 2) { animation-range: entry 6% entry 56%; }
    .grid.four > .reveal:nth-child(4n + 3) { animation-range: entry 12% entry 62%; }
    .grid.four > .reveal:nth-child(4n) { animation-range: entry 18% entry 68%; }

    /* a stroke of paint across the top of each section, drawn as it comes in */
    main:not(.manual, .deck) > section[id] { position: relative; }
    main:not(.manual) > section[id]::before {
      content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, var(--paint), var(--hot) 45%, transparent 85%); box-shadow: 0 0 18px rgba(255, 120, 30, .35);
      transform-origin: 0 50%; animation: stroke linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;
    }
    /* the words come in while the card rides up and are done well before it reaches the top (a stuck card stops moving, so
       anything still running would freeze half way): the line of the label is drawn and the label follows it, the big word
       is sprayed on left to right out of a haze, then the paint runs down; the words beside it come up last */
    .head .label { animation: slide var(--ease) both; animation-timeline: view(); animation-range: cover 4vh cover 32vh; }
    .head .label::before { transform-origin: 0 50%; animation: draw var(--ease) both; animation-timeline: view(); animation-range: cover 0vh cover 26vh; }
    .head h2 {
      /* the paint is let in through a soft-edged mask; the box grows (padding, given back by the margin) so the mask also
         covers the glow and the drips */
      padding: .15em .25em .65em; margin: -.15em -.25em -.65em; transform-origin: .25em calc(100% - .65em);
      mask: linear-gradient(90deg, #000 40%, transparent 56%) 100% 0 / 250% 100% no-repeat;
      animation: spray var(--ease) both; animation-timeline: view(); animation-range: cover 6vh cover 46vh;
    }
    .head h2 .drips { animation: run linear both; animation-timeline: view(); animation-range: cover 34vh cover 58vh; }
    .head .intro { animation: haze var(--ease) both; animation-timeline: view(); animation-range: cover 10vh cover 44vh; }
    /* the card underneath steps back and dims while the next one rides up over it (over one screen of scrolling, from the
       moment the next card shows at the bottom until it reaches the top) */
    body:has(.deck) { timeline-scope: --effects, --playing, --glance, --install, --questions, --about, --footer; }
    #effects { view-timeline-name: --effects; } #playing { view-timeline-name: --playing; } #glance { view-timeline-name: --glance; }
    #install { view-timeline-name: --install; } #questions { view-timeline-name: --questions; } #about { view-timeline-name: --about; }
    .deck ~ footer { view-timeline-name: --footer; }
    .deck > section[id] { transform-origin: 50% max(50%, 100% - 50vh); animation: recede linear both; animation-range: cover 0px cover 100vh; }
    .deck > section[id]::after {
      content: ""; position: absolute; inset: 0; z-index: 5; background: #050506; pointer-events: none; opacity: 0;
      animation: dim linear both; animation-range: cover 0px cover 100vh;
    }
    #engines, #engines::after { animation-timeline: --effects; } #effects, #effects::after { animation-timeline: --playing; }
    #playing, #playing::after { animation-timeline: --glance; } #glance, #glance::after { animation-timeline: --install; }
    #install, #install::after { animation-timeline: --questions; } #questions, #questions::after { animation-timeline: --about; }
    #about, #about::after { animation-timeline: --footer; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes stroke { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } }
@keyframes spray {
  from { mask-position: 100% 0; translate: -20px 0; filter: blur(8px); }
  60% { filter: blur(1.5px); }
  to { mask-position: 0 0; translate: 0 0; filter: blur(0); }
}
@keyframes run { from { clip-path: inset(-10% -10% 12% -10%); } to { clip-path: inset(-10% -10% -150% -10%); } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes haze { from { opacity: 0; translate: 0 28px; filter: blur(8px); } }
@keyframes slide { from { opacity: 0; translate: -32px 0; } }
@keyframes recede { to { scale: .93; } }
@keyframes dim { to { opacity: .62; } }

/* manual */
.manual { display: grid; grid-template-columns: 200px minmax(0, var(--text)); gap: 56px; align-items: start; padding-top: clamp(32px, 6vh, 64px); }
.manual h1 { font: 400 clamp(44px, 6vw, 80px) / 1 var(--tag); letter-spacing: .01em; }
.manual h2 { display: block; font: 700 clamp(24px, 2.6vw, 32px) / 1.15 var(--sans); font-stretch: 105%; letter-spacing: -.01em; margin-bottom: .5em; transform: none; text-shadow: none; }
.manual .toc { position: sticky; top: 88px; font-size: 14px; }
.manual .toc ol { margin: 0; padding: 0; list-style: none; }
.manual .toc li { margin-bottom: 6px; }
.manual .toc a { color: var(--dim); text-decoration: none; }
.manual .toc a:hover { color: var(--paint); }
.manual section { padding-top: 48px; }
.manual section:first-of-type { padding-top: 0; }
.manual p, .manual li { font-size: 17px; }
.manual ul, .manual ol { padding-left: 1.3em; margin: 0 0 1em; }
.manual li { margin-bottom: 6px; }
.manual .shot { float: right; width: 200px; margin: 4px 0 16px 24px; }
.manual section::after { content: ""; display: block; clear: both; }
kbd { padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--raised-2); font: 400 .8em var(--mono); white-space: nowrap; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 1.2em; }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; color: var(--dim); }

@media (max-width: 1080px) {
  .grid, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feats { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .limits { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .hero, .split, .head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .device { max-width: 360px; }
  .aside, .ig { position: static; }
  .deep { grid-template-columns: minmax(0, 1fr); }
  .manual { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .manual .toc { position: static; }
  .manual .toc ol { display: flex; flex-wrap: wrap; gap: 4px 16px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .top .home img { width: 76px; }
  .top nav { gap: 2px 14px; font-size: 11px; letter-spacing: .08em; }
  .top nav .tip { display: none; }   /* keeps the bar at two lines; the tip jar stays in Who made it */
  .spec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .spec i { display: none; }
  .ring svg { display: none; }
  .ring { margin-left: 0; }
  .grid, .grid.four { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .eng { display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; padding: 10px 10px 14px; }
  .eng .play { grid-row: 1 / 4; align-self: start; }
  .eng .play::after { right: 6px; bottom: 6px; width: 32px; height: 32px; }
  .eng .meter { display: none; }
  .eng .name { flex-direction: column; align-items: flex-start; gap: 4px; margin: 2px 0 8px; }
  .eng .name small { text-align: left; }
  .eng .name small span { display: inline; }
  .eng .name small span + span::before { content: "· "; }
  .eng p { margin: 0; font-size: 14px; }
  .eng .chain { grid-column: 1 / -1; margin: 0; padding-top: 12px; }
  .feat { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nums li, .nums li:not(:nth-child(3n + 1)) { padding: 20px 12px 20px 0; border-left: 0; }
  .nums li:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--line); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fx { grid-template-columns: 1fr; }
  .fx dt { padding-bottom: 0; border: 0; }
  .fx dd { padding-top: 2px; }
  .chainbox .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player { grid-template-columns: 40px minmax(0, 1fr); border-radius: 22px; }
  .player .bar { grid-column: 1 / -1; height: 26px; margin: -4px 4px 0; }
  .manual .shot { float: none; width: 180px; margin: 0 0 16px; }
  .keys { grid-template-columns: 1fr; gap: 0; }
  .keys dd { margin-bottom: 8px; }
  footer { grid-template-columns: minmax(0, 1fr); }
}