/* KNTRL site. Synthwave dressed as an 1980s game box and its instruction manual.
   Palette from the app's Midnight style and icon; type is TikTok Sans (variable width). */

@font-face {
  font-family: "TikTok Sans";
  src: url("fonts/tiktok-sans-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 75% 150%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "TikTok Sans";
  src: url("fonts/tiktok-sans-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 75% 150%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --night: #0b0920;
  --night-2: #151131;
  --surface: #211c3d;
  --surface-2: #2b2450;
  --ink: #eceaff;
  --muted: #c3bde8;
  --pink: #ff8ad8;
  --cyan: #52e3ff;
  --lavender: #b59cff;
  --mint: #7cf5c4;
  --violet: #8f7cff;
  --amber: #ffd36e;
  --connected: #5cdb7f;

  --action: var(--pink);
  --on-action: var(--night);

  --font: "TikTok Sans", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace; /* taste-skill-ignore: the packet readout is literal bytes */

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(6rem, 17vw, 21rem);

  --m: clamp(20px, 2.4vw, 32px);
  --gap: clamp(16px, 1.7vw, 24px);
  --section: clamp(96px, 12vw, 200px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul, dl, dd, pre { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
::selection { background: var(--pink); color: var(--night); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--m); top: -100px; z-index: 20;
  background: var(--ink); color: var(--night); padding: 12px 16px; text-decoration: none;
}
.skip:focus { top: var(--m); }

/* Buttons: square, one fill. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 14px 28px;
  background: var(--action); color: var(--on-action);
  font-weight: 700; font-size: var(--step-body); text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}
.button:hover { background: var(--ink); }
.button:active { transform: translateY(2px); }
.button-dark { background: var(--night); color: var(--ink); }
.button-dark:hover { background: var(--pink); color: var(--night); }
/* The iPhone app's button, beside the Mac download: same size, outlined so the Mac stays first. */
.button-line { background: var(--night); color: var(--ink); border: 2px solid var(--action); padding: 12px 26px; }
.button-line:hover { background: var(--ink); color: var(--night); border-color: var(--ink); }

/* ---------- Bar ---------- */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: var(--m);
}
.bar-mark {
  font-weight: 800; font-stretch: 150%; letter-spacing: 0.32em; margin-right: -0.32em;
  text-decoration: none; font-size: var(--step-body);
}
.bar-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); font-size: var(--step-body); }
.bar-links a { text-decoration: none; padding: 8px 0; transition: color 160ms var(--ease); }
.bar-links a:hover { color: var(--pink); }
.bar-action { color: var(--pink); font-weight: 700; }
.bar-action:hover { color: var(--ink) !important; }

/* ---------- Hero: box art ---------- */
.hero {
  --horizon: 64%;
  --sun: min(56vw, 86svh);
  position: relative;
  min-height: max(100svh, 680px);
  overflow: hidden;
  background: var(--night);
  isolation: isolate;
}
.sky {
  position: absolute; left: 0; right: 0; top: 0; height: var(--horizon);
  overflow: hidden; z-index: 0;
}
.sun {
  position: absolute; left: 50%; bottom: calc(var(--sun) * -0.42);
  width: var(--sun); height: var(--sun);
  transform: translateX(-50%);
}
.floor {
  position: absolute; left: 0; right: 0; top: var(--horizon); bottom: 0; z-index: 0;
  overflow: hidden; background: var(--night);
  perspective: 240px; perspective-origin: 50% 0;
}
.floor-plane {
  position: absolute; left: -150%; right: -150%; top: 0; height: 600%;
  transform-origin: 50% 0;
  transform: rotateX(78deg);
  background-image: url("grid.svg");
  background-size: 72px 72px;
  background-position: 50% 0;
  opacity: 0.34;
}
.hero-object {
  position: absolute; z-index: 1; left: 50%;
  width: min(46vw, 760px);
  bottom: calc(100% - var(--horizon) - 1.5%);
  transform: translateX(-50%);
}
.hero-frames {
  position: relative; aspect-ratio: 1600 / 736;
  border-radius: 5.6% / 12.2%;
  overflow: hidden;
  background: #120e29;
}
.hero-frames img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.6s ease-in-out;
}
.hero-frames img.is-on { opacity: 1; }

.hero-copy {
  position: absolute; z-index: 2; left: var(--m); right: var(--m);
  top: calc(var(--horizon) + clamp(24px, 4.5svh, 48px));
  display: grid; justify-items: center; text-align: center;
}
.wordmark {
  font-size: var(--step-head);
  font-weight: 850; font-stretch: 150%;
  line-height: 1; letter-spacing: 0.62em; margin-right: -0.62em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0.06em 0 var(--pink), 0 0.12em 0 var(--violet); /* taste-skill-ignore: flat offset layers, the synthwave logo the brief asked for */
}
.hero-line {
  margin-top: clamp(16px, 2.6svh, 32px);
  font-size: var(--step-lead); font-weight: 500;
}
.hero-row {
  margin-top: clamp(20px, 3.4svh, 40px);
  display: flex; align-items: center; justify-content: center; gap: 48px;
}
.spec { font-size: var(--step-small); color: var(--muted); line-height: 1.4; min-width: 12ch; }
.hero-row .spec:first-child { text-align: right; }
.hero-row .spec:last-child { text-align: left; }
.hero-buttons, .footer-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- The manual plate ---------- */
.plate {
  background: var(--night-2);
  padding: var(--section) var(--m);
}
.plate-title { font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; }
.plate-lede { margin-top: 20px; max-width: 46ch; font-size: var(--step-lead); line-height: 1.35; }
.plate-grid {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: stretch;
}
.notes { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 2% 0; }
.notes-left { grid-column: 1 / 3; text-align: right; }
.notes-right { grid-column: 11 / 13; text-align: left; }
.note {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  text-align: inherit; cursor: pointer;
}
.note-name { display: block; font-size: var(--step-body); font-weight: 650; transition: color 160ms var(--ease); }
.note-text { display: block; margin-top: 4px; font-size: var(--step-small); color: var(--muted); line-height: 1.45; }
.note:hover .note-name, .note:focus-visible .note-name, .note.is-lit .note-name { color: var(--pink); }

/* The controller, drawn from the app's Midnight style and Offset geometry (956 x 440 pt). */
.pad {
  grid-column: 3 / 11;
  position: relative; aspect-ratio: 956 / 440;
  container-type: inline-size;
  background: #120e29;
  border-radius: 5.6% / 12.2%;
  user-select: none; -webkit-user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.pad .ctl, .pad .stick, .pad .dpad, .pad-hud, .pad-more { position: absolute; }
.ctl {
  display: grid; place-items: center; padding: 0; margin: 0;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12); /* taste-skill-ignore: inside data-ui, the app's control rim */
  font-weight: 800; font-size: 2.3cqw; line-height: 1;
  cursor: pointer;
  transition: background-color 90ms linear, border-color 90ms linear, box-shadow 120ms linear, transform 90ms linear;
}
.ctl svg { width: 46%; height: 46%; }
.ctl.pill { border-radius: 1.25cqw; }
.ctl.round { border-radius: 50%; }
.ctl.small { font-size: 1.6cqw; }
.ctl.is-down { background: #4c4290; border-color: var(--lavender); transform: scale(0.96); }
.ctl:focus-visible { outline: 0.35cqw solid var(--cyan); outline-offset: 0.3cqw; }

.c-lt { left: 8.03%; top: 2.52%; width: 11.77%; height: 11.14%; }
.c-lb { left: 21.23%; top: 2.52%; width: 11.77%; height: 11.14%; }
.c-rb { left: 66.97%; top: 2.52%; width: 11.77%; height: 11.14%; }
.c-rt { left: 80.17%; top: 2.52%; width: 11.77%; height: 11.14%; }
.c-home { left: 47.44%; top: 21.09%; width: 5.13%; height: 11.14%; }
.c-view { left: 41.07%; top: 35.43%; width: 4.27%; height: 9.27%; }
.c-menu { left: 54.62%; top: 35.43%; width: 4.27%; height: 9.27%; }
.c-share { left: 47.82%; top: 50.32%; width: 4.35%; height: 6.32%; }
.c-y { left: 75.77%; top: 22.59%; width: 7.3%; height: 15.86%; }
.c-x { left: 69.17%; top: 36.86%; width: 7.3%; height: 15.86%; }
.c-b { left: 82.38%; top: 36.86%; width: 7.3%; height: 15.86%; }
.c-a { left: 75.77%; top: 51.11%; width: 7.3%; height: 15.86%; }
.face { font-size: 3.4cqw; }
.c-y { color: var(--cyan); --face: var(--cyan); }
.c-x { color: var(--pink); --face: var(--pink); }
.c-b { color: var(--lavender); --face: var(--lavender); }
.c-a { color: var(--mint); --face: var(--mint); }
.face.is-down {
  color: #fff;
  background: color-mix(in srgb, var(--face) 52%, #211c3d);
  border-color: var(--face);
  box-shadow: 0 0 2.6cqw color-mix(in srgb, var(--face) 70%, transparent); /* taste-skill-ignore: inside data-ui, the app's own pressed glow */
}

.stick {
  border-radius: 50%; background: #0a0817; border: 1px solid rgba(255, 255, 255, 0.05); /* taste-skill-ignore: inside data-ui, the app's control rim */
  cursor: grab; touch-action: none;
}
.stick::before {
  content: ""; position: absolute; inset: -8%; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.12);
}
.c-ls { left: 12.53%; top: 29.41%; width: 14.23%; height: 30.91%; }
.c-rs { left: 58.26%; top: 59.86%; width: 14.23%; height: 30.91%; }
.knob {
  position: absolute; left: 25.5%; top: 25.5%; width: 49%; height: 49%;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.12); /* taste-skill-ignore: inside data-ui, the app's control rim */
  color: #a49dd0; font-weight: 800; font-size: 2.2cqw;
  transition: border-color 90ms linear;
  will-change: transform;
}
.stick.is-down .knob { border-color: var(--lavender); color: var(--ink); }
.stick:focus-visible { outline: 0.35cqw solid var(--cyan); outline-offset: 0.6cqw; }

.c-dpad { left: 27.33%; top: 59.64%; width: 14.44%; height: 31.36%; }
.dpad::before {
  content: ""; position: absolute; left: 32%; top: 32%; width: 36%; height: 36%;
  background: var(--surface-2);
}
.arm { border-radius: 0; color: #a49dd0; font-size: 1.5cqw; }
.arm.up { left: 32%; top: 0; width: 36%; height: 34%; border-radius: 1cqw 1cqw 0 0; border-bottom: 0; }
.arm.down { left: 32%; top: 66%; width: 36%; height: 34%; border-radius: 0 0 1cqw 1cqw; border-top: 0; }
.arm.left { left: 0; top: 32%; width: 34%; height: 36%; border-radius: 1cqw 0 0 1cqw; border-right: 0; }
.arm.right { left: 66%; top: 32%; width: 34%; height: 36%; border-radius: 0 1cqw 1cqw 0; border-left: 0; }
.arm.is-down { color: var(--ink); }

.pad-hud {
  left: 42.51%; top: 1.52%; width: 9.97%; height: 8.77%;
  display: flex; align-items: center; justify-content: center; gap: 0.7cqw;
  border-radius: 999px; background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore: inside data-ui, the app's control rim */
  font-size: 1.45cqw; font-weight: 700; color: var(--ink);
}
.pad-ms { color: #a49dd0; font-weight: 500; }
.pad-dot { width: 0.85cqw; height: 0.85cqw; border-radius: 50%; background: var(--connected); }
.pad-more {
  left: 53.41%; top: 1.52%; width: 4.12%; height: 8.77%;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore: inside data-ui, the app's control rim */
  font-size: 1.3cqw; color: var(--ink); letter-spacing: 0.05em;
}
.pad [data-group].is-lit, .pad .is-lit { outline: 0.4cqw solid var(--pink); outline-offset: 0.5cqw; }

/* Readout: what the Mac gets */
.readout {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px;
  align-items: start;
}
/* Left to right, the way the data flows: the iPhone's packet, KNTRL Host's HID report, what macOS reads. */
.packets { display: contents; }
.packet { grid-row: 1; grid-column: 1 / 5; }
.packet-report { grid-column: 5 / 9; }
.readout-out { grid-row: 1; grid-column: 9 / 13; }
.readout-label { margin-top: 8px; font-size: var(--step-small); color: var(--muted); }
.readout-value {
  min-height: 1.1em;
  font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.05;
  color: var(--mint); overflow-wrap: anywhere;
}
.presets { margin-top: 24px; display: inline-flex; background: var(--surface); }
.presets button {
  border: 0; margin: 0; padding: 12px 18px; min-height: 48px; cursor: pointer;
  background: transparent; color: var(--ink); font-size: var(--step-small); font-weight: 650;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.presets button:hover { color: var(--pink); }
.presets button[aria-checked="true"] { background: var(--ink); color: var(--night); }
.packet figcaption { font-size: var(--step-small); color: var(--muted); }
.packet pre {
  margin-top: 12px; padding: 18px 20px; background: var(--night);
  font-family: var(--mono); font-size: var(--step-small); line-height: 1.7;
  white-space: pre-wrap; word-spacing: 0.15em;
}
.packet code { font-family: inherit; }
.b { color: #8a83b8; transition: color 200ms linear, background-color 400ms linear; }
.b-seq { color: var(--lavender); }
.b-btn { color: var(--ink); }
.b-btn.on { color: var(--mint); }
.b-axis.on { color: var(--cyan); }
.b-trig.on { color: var(--pink); }
.b-hat { color: var(--ink); }
.b-hat.on { color: var(--amber); }
.packet pre, .packet .packet-key { transition: opacity 240ms var(--ease); }
.packet.is-off pre, .packet.is-off .packet-key { opacity: 0.35; }
.b.flash { background: rgba(255, 138, 216, 0.28); }
.packet-key { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: var(--step-small); }
.packet-key dt { font-weight: 650; }
.packet-key dd { color: var(--muted); }

/* ---------- Controls chart ---------- */
.chart { background: var(--cyan); color: var(--night); padding: var(--section) var(--m); }
.chart-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.chart-intro h2 { grid-column: 1 / 6; font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; }
.chart-intro p { grid-column: 7 / 13; font-size: var(--step-body); max-width: 56ch; }
/* The controller's specifications, as a manual prints them. */
.device {
  grid-column: 1 / 13; margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px var(--gap);
  font-size: var(--step-body);
}
.device div { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); column-gap: 16px; }
.device dt { color: #2a1068; }
.device dd { font-weight: 700; }
.chart-table {
  margin-top: clamp(48px, 6vw, 88px);
  width: 100%; border-collapse: collapse;
  font-size: var(--step-lead); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.chart-table th, .chart-table td { text-align: left; font-weight: 400; padding: 0; vertical-align: baseline; }
.chart-table thead th { font-weight: 700; padding-bottom: 8px; }
.chart-table th:first-child, .chart-table td:first-child { width: 28%; }
.chart-table td, .chart-table thead th:not(:first-child) { width: 24%; }
.chart-table td:last-child, .chart-table thead th:last-child { text-align: right; }
.chart-table tbody th[scope="row"] { font-weight: 400; }
.chart-table .group th {
  position: sticky; top: 0; z-index: 1;
  background: var(--cyan); color: #2a1068; font-weight: 700;
  padding-top: 64px; padding-bottom: 12px;
}
.chart-table .none { color: #1d5568; }

/* ---------- Rumble ---------- */
.rumble { background: var(--night); padding: var(--section) var(--m) 0; overflow: hidden; }
.rumble-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.rumble-head h2 { grid-column: 1 / 6; font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; }
.rumble-head p { grid-column: 7 / 13; font-size: var(--step-body); max-width: 60ch; }
.specimens {
  margin-top: 12vh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
}
.specimen { overflow: hidden; padding-bottom: clamp(56px, 7vw, 112px); }
.specimen-bass { grid-column: 1 / 7; }
.specimen-hits { grid-column: 7 / 13; }
.specimen figcaption { font-size: var(--step-body); color: var(--muted); margin-top: 20px; }
.specimen-word {
  font-size: var(--step-display); line-height: 0.8; font-weight: 900; font-stretch: 75%;
  letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
  transform-origin: 50% 100%;
}
.specimen-hits .specimen-word { color: var(--pink); }

/* ---------- Four players ---------- */
.players {
  background: var(--mint); color: var(--night);
  min-height: 92svh; padding: var(--section) var(--m) clamp(48px, 6vw, 96px);
  display: grid; grid-template-rows: auto 1fr;
}
.players h2 { font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; }
.players-body {
  margin-top: 22vh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: end;
}
.players-figure { grid-column: 1 / 7; }
.figure {
  font-size: var(--step-display); line-height: 0.8; font-weight: 900; font-stretch: 100%;
  letter-spacing: -0.04em;
}
.figure-caption { margin-top: 28px; max-width: 34ch; font-size: var(--step-body); }
.hud-list { grid-column: 8 / 13; display: grid; gap: 16px; justify-items: start; }
.hud-row { display: flex; align-items: center; gap: 20px; }
.hud-name { font-size: var(--step-body); font-weight: 650; white-space: nowrap; }
.hud {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 28px; border-radius: 999px;
  background: var(--night); color: var(--ink);
  font-size: var(--step-lead); font-weight: 700;
}
.hud span:last-child { color: #a49dd0; font-weight: 500; }
.hud .pad-dot { width: 12px; height: 12px; }
.hud-row.p2 { margin-left: 8%; }
.hud-row.p3 { margin-left: 16%; }
.hud-row.p4 { margin-left: 24%; }

/* ---------- What it needs ---------- */
.needs { background: var(--night-2); padding: var(--section) var(--m); }
.needs-title { font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; }
.needs-title span { display: block; }
.needs-title span + span { padding-left: calc((100% - 11 * var(--gap)) / 12 * 2 + 2 * var(--gap)); }
.needs-table { margin-top: 72px; width: 100%; border-collapse: collapse; font-size: var(--step-body); }
.needs-table th, .needs-table td { text-align: left; padding: 14px 16px; vertical-align: top; font-weight: 400; }
.needs-table thead th { color: var(--muted); font-size: var(--step-small); font-weight: 600; }
.needs-table tbody tr:nth-child(odd) { background: var(--surface); }
.needs-table tbody th { font-weight: 700; width: 16%; }
.needs-table td:nth-child(2) { width: 30%; }
.needs-table td:nth-child(3) { width: 36%; }
.needs-table td:last-child, .needs-table thead th:last-child { text-align: right; }

/* ---------- Setup: accordion ---------- */
.setup { background: var(--night); padding: var(--section) var(--m) clamp(72px, 7vw, 120px); }
.setup-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.setup-intro h2 { grid-column: 1 / 6; font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; }
.setup-intro p { grid-column: 7 / 12; font-size: var(--step-body); max-width: 50ch; }
.stages { margin-top: 64px; display: grid; }
.stage { position: relative; min-width: 0; overflow: hidden; }
.stage:nth-child(1) { background: #1d1642; color: var(--ink); }
.stage:nth-child(2) { background: #30246f; color: var(--ink); }
.stage:nth-child(3) { background: #47379e; color: var(--ink); }
.stage:nth-child(4) { background: #a48dff; color: var(--night); }
.stage:nth-child(5) { background: #cdbcff; color: var(--night); }
.stage-tab { display: none; }
.stage-body {
  padding: clamp(24px, 2.6vw, 40px);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr auto;
  column-gap: clamp(24px, 3vw, 48px); row-gap: 20px;
}
.stage-name { grid-column: 1 / -1; grid-row: 1; font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; }
.stage-body > p:not(.stage-name) { grid-column: 1; grid-row: 3; max-width: 36ch; font-size: var(--step-body); }
.stage-body > .button { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; }
.stage-body img {
  grid-column: 2; grid-row: 2 / 4; align-self: end;
  width: 100%; height: auto; border-radius: 4.5% / 9.8%;
}
.stage-body img[src*="home-connected"] { border-radius: 5% / 6%; width: 74%; justify-self: center; }
.stage-name:focus { outline: none; }
.stage-video { grid-column: 2; grid-row: 2 / 4; align-self: end; width: 100%; height: auto; border-radius: 3.5% / 6.8%; background: #120e29; }

/* KNTRL Host's menu bar panel, after macOS/Views/MenuBarPanel.swift (330 pt wide). */
.host-panel {
  grid-column: 2; grid-row: 2 / 4; align-self: end; justify-self: center;
  width: min(100%, 330px); padding: 16px;
  display: grid; gap: 14px;
  background: #2a2740; color: #f2f1f7; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14); /* taste-skill-ignore: inside data-ui, the macOS popover edge */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 13px; line-height: 1.3; font-stretch: 100%;
}
.host-panel p { margin: 0; }
.hp-head { display: flex; align-items: center; gap: 10px; }
.hp-icon { width: 26px; height: 18px; color: #a8a3bd; }
.hp-title { font-weight: 700; font-size: 13px; }
.hp-caption { font-size: 13px; color: #a8a3bd; }
.hp-pin { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 12px; background: #36324d; }
.hp-digits { font-family: ui-rounded, -apple-system, system-ui, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: 5px; font-variant-numeric: tabular-nums; } /* taste-skill-ignore: inside data-ui, the PIN as the app sets it */
.hp-refresh { font-size: 16px; color: #a8a3bd; }
.hp-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 7px; background: #36324d; margin-top: -8px; }
.hp-seg span { text-align: center; padding: 4px 6px; border-radius: 5px; color: #d6d3e6; }
.hp-seg .on { background: #5d5876; color: #fff; }
.hp-toggle { display: flex; align-items: center; justify-content: space-between; }
.hp-switch { width: 26px; height: 15px; border-radius: 999px; background: var(--violet); position: relative; }
.hp-switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.hp-foot { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #4a4560; } /* taste-skill-ignore: inside data-ui, the menu divider */

.js .stages { display: flex; height: 540px; }
.js .stage { flex: 1 1 0; transition: flex-grow 450ms var(--ease); }
.js .stage.is-open { flex-grow: 7.2; }
.js .stage-tab {
  position: absolute; inset: 0; width: 100%; border: 0; margin: 0; padding: 24px;
  background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: flex-end; justify-content: flex-start;
  font-size: var(--step-body); font-weight: 700;
}
.stage-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.stage-tab:hover .stage-tab-label { text-decoration: underline; text-underline-offset: 6px; }
.js .stage.is-open .stage-tab { display: none; }
.js .stage-body {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms var(--ease) 150ms;
}
.js .stage.is-open .stage-body { opacity: 1; visibility: visible; }

/* ---------- Questions ---------- */
.band {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 56px var(--m);
  background: var(--night);
}
.band:nth-child(odd) { background: var(--night-2); }
.band h3 { grid-column: 1 / 6; font-size: var(--step-lead); font-weight: 750; line-height: 1.25; }
.band p { grid-column: 7 / 13; font-size: var(--step-body); line-height: 1.55; max-width: 60ch; }
.band-head { min-height: 30svh; align-items: end; background: var(--amber) !important; color: var(--night); }
.band-head h2 { grid-column: 1 / 13; font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; }

/* ---------- Call to action ---------- */
.cta {
  position: relative; display: block; min-height: 60svh; overflow: hidden;
  background: var(--pink); color: var(--night); text-decoration: none;
  padding: var(--m);
  transition: background-color 0ms, color 0ms;
}
.cta:hover, .cta:focus-visible { background: var(--ink); color: var(--night); outline: none; }
.cta-note { display: block; max-width: 30ch; font-size: var(--step-lead); font-weight: 600; }
.cta-arrow { position: absolute; top: var(--m); right: var(--m); width: 48px; height: 48px; }
.cta-word {
  position: absolute; left: var(--m); right: var(--m); bottom: 24px;
  font-size: var(--step-display); font-weight: 900; font-stretch: 75%; line-height: 0.78;
  letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap;
}

/* ---------- Footer: the name sets like the sun ---------- */
.footer {
  position: relative; overflow: hidden;
  background: var(--night); color: var(--ink);
  padding: clamp(72px, 9vw, 140px) var(--m) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto;
  min-height: 86svh;
}
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.footer-invite { grid-column: 1 / 8; display: grid; justify-items: start; gap: 32px; }
.footer-line { font-size: var(--step-head); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.01em; max-width: 10ch; }
.footer-links { grid-column: 10 / 13; display: grid; gap: 10px; font-size: var(--step-body); }
.footer-links a { text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 160ms var(--ease); }
.footer-links a:hover { color: var(--pink); }
.footer-legal {
  grid-row: 3; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: var(--step-small); color: var(--muted); padding: 48px 0 16px;
}
.footer-horizon {
  grid-row: 4;
  display: flex; justify-content: center;
  padding-bottom: calc(var(--step-display) * 0.06);
}
.footer-name {
  font-size: var(--step-display); font-weight: 900; font-stretch: 150%;
  line-height: 0.8; letter-spacing: -0.02em; white-space: nowrap;
  color: var(--amber);
}
.footer-floor {
  grid-row: 5; position: relative;
  margin: 0 calc(-1 * var(--m));
  height: calc(var(--step-display) * 0.42);
  overflow: hidden; background: var(--night);
  perspective: 240px; perspective-origin: 50% 0;
}
.footer-floor .floor-plane { opacity: 0.4; }

/* ---------- Motion ---------- */
.js [data-rise] { opacity: 0; transform: translateY(24px); }
.js .is-in [data-rise], .js [data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease), transform 800ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
@keyframes floor-run { from { transform: rotateX(78deg) translateY(0); } to { transform: rotateX(78deg) translateY(72px); } }
.floor-plane { animation: floor-run 1.5s linear infinite; }
.hero.is-away .floor-plane { animation-play-state: paused; }
@keyframes rumble-low { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, 3px); } 50% { transform: translate(5px, -2px); } 75% { transform: translate(-3px, 2px); } }
@keyframes rumble-high { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(2px, -1px); } 40% { transform: translate(-2px, 1px); } 60% { transform: translate(1px, 1px); } 80% { transform: translate(-1px, -1px); } }
.rumble.is-in .specimen-bass .specimen-word { animation: rumble-low 180ms linear 5 300ms; }
.rumble.is-in .specimen-hits .specimen-word { animation: rumble-high 60ms linear 9 1300ms; }
@keyframes sun-rise { from { transform: translate(-50%, 18%); } to { transform: translate(-50%, 0); } }
.js .sun { animation: sun-rise 1.8s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .floor-plane, .js .sun, .rumble.is-in .specimen-word { animation: none !important; }
  .js [data-rise] { transform: none; }
  .js .is-in [data-rise], .js [data-rise].is-in { transition: opacity 400ms linear; }
  .hero-frames img { transition: none; }
  .stage { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1020px) {
  .bar-links a:not(.bar-action) { display: none; }
  .hero { --horizon: 56%; --sun: min(92vw, 62svh); }
  .hero-object { width: min(80vw, 680px); }
  .pad { grid-column: 1 / 13; grid-row: 1; }
  .plate-grid { row-gap: 40px; }
  .notes-left { grid-column: 1 / 7; grid-row: 2; text-align: left; }
  .notes-right { grid-column: 7 / 13; grid-row: 2; }
  .notes { justify-content: flex-start; padding: 0; }
  .readout-out { grid-column: 1 / 13; grid-row: 1; }
  .packet { grid-row: 2; grid-column: 1 / 7; }
  .packet-report { grid-column: 7 / 13; }
  .device { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-intro h2, .chart-intro p, .rumble-head h2, .rumble-head p, .setup-intro h2, .setup-intro p { grid-column: 1 / 13; }
  .chart-intro p, .rumble-head p, .setup-intro p { margin-top: 20px; }
  .footer { min-height: 0; }
  .footer-legal { padding-top: clamp(72px, 12vw, 120px); }
  .players { min-height: 0; }
  .players-body { margin-top: 8vh; }
  .js .stages { flex-direction: column; height: auto; }
  .js .stage { flex: none !important; }
  .js .stage-tab { position: relative; inset: auto; height: 64px; align-items: center; padding: 0 24px; font-size: var(--step-body); }
  .stage-tab-label { writing-mode: horizontal-tb; transform: none; }
  .js .stage-body { position: relative; inset: auto; display: none; }
  .js .stage.is-open .stage-body { display: grid; }
  .stage-name { font-size: var(--step-lead); }
  .players-body { row-gap: 48px; }
  .players-figure, .hud-list { grid-column: 1 / 13; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  .hero { --horizon: 50%; --sun: 104vw; min-height: max(100svh, 640px); }
  .hero-object { width: calc(100vw - 2 * var(--m)); }
  .wordmark { letter-spacing: 0.42em; margin-right: -0.42em; }
  .hero-row { flex-direction: column; gap: 14px; width: 100%; }
  .hero-buttons { order: -1; width: 100%; flex-direction: column; }
  .hero-buttons .button { width: 100%; }
  .hero-row .spec, .hero-row .spec:first-child, .hero-row .spec:last-child { text-align: center; }

  .plate-lede { font-size: var(--step-body); }
  .packet, .packet-report { grid-column: 1 / 13; grid-row: auto; }
  .device { margin-top: 32px; grid-template-columns: minmax(0, 1fr); }
  .packet-key { grid-template-columns: 1fr; }

  .chart-intro h2, .chart-intro p, .rumble-head h2, .rumble-head p, .setup-intro h2, .setup-intro p { grid-column: 1 / 13; }
  .chart-intro p, .rumble-head p, .setup-intro p { margin-top: 20px; }
  .chart-table, .chart-table tbody, .chart-table tr, .chart-table th, .chart-table td { display: block; width: auto !important; }
  .chart-table thead { display: none; }
  .chart-table tbody tr:not(.group) { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 12px; padding: 9px 0; }
  .chart-table tbody tr:not(.group) th { grid-column: 1 / 4; font-size: var(--step-lead); }
  .chart-table tbody tr:not(.group) td { font-size: var(--step-small); text-align: left !important; }
  .chart-table tbody tr:not(.group) td::before { content: attr(data-label); display: block; color: #1d5568; }
  .chart-table .group th { padding-top: 40px; font-size: var(--step-lead); }

  .specimens { margin-top: 48px; display: block; margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); }
  .specimen { padding: 28px var(--m) 32px; }
  .specimen-word { font-size: 38vw; }
  .specimen-hits { background: var(--ink); }
  .specimen-hits figcaption { color: #3d376a; }
  .specimen-hits .specimen-word { color: var(--night); }

  .players { min-height: 0; }
  .players-body { margin-top: 10vh; row-gap: 40px; }
  .players-figure, .hud-list { grid-column: 1 / 13; }
  .figure { font-size: 50vw; }
  .hud { font-size: var(--step-body); padding: 12px 20px; }
  .hud-row.p2, .hud-row.p3, .hud-row.p4 { margin-left: 0; }
  .hud-row { gap: 16px; }
  .hud-name { font-size: var(--step-small); }

  .needs-table thead { display: none; }
  .needs-table, .needs-table tbody, .needs-table tr, .needs-table th, .needs-table td { display: block; width: auto !important; text-align: left !important; }
  .needs-table tr { padding: 14px 16px; }
  .needs-table th, .needs-table td { padding: 0; }
  .needs-table td { color: var(--muted); font-size: var(--step-small); margin-top: 2px; }
  .needs-table td:last-child::before { content: "Asks for: "; }
  .needs-title span + span { padding-left: 2ch; }

  .stage-body { padding: 24px 20px 28px; grid-template-columns: 1fr; row-gap: 16px; }
  .stage-body > p:not(.stage-name), .stage-body > .button, .stage-body img, .stage-video, .host-panel { grid-column: 1; grid-row: auto; }
  .host-panel { justify-self: start; }
  .stage-body img[src*="home-connected"] { width: 100%; }

  .band { padding: 32px 20px; row-gap: 12px; }
  .band h3, .band p { grid-column: 1 / 13; }
  .band-head { min-height: 30svh; }

  .cta { min-height: 46svh; }
  .cta-note { font-size: var(--step-body); max-width: 20ch; }
  .cta-arrow { width: 32px; height: 32px; }
  .cta-word { font-size: 21vw; }

  .footer-invite, .footer-links { grid-column: 1 / 13; }
  .footer-links { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--step-small); }
  .footer-name { font-size: 25vw; }
  .footer-floor { height: 14vw; }
  .floor-plane { opacity: 0.26; }
}

/* ---------- 404 ---------- */
.lost {
  min-height: 100svh; padding: var(--m) var(--m) 0;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
}
.lost .bar-mark { justify-self: start; }
.lost-body { align-self: center; display: grid; justify-items: start; gap: 24px; padding: 64px 0; }
.lost-title { font-size: min(var(--step-display), 17vw); font-weight: 900; font-stretch: 75%; line-height: 0.85; padding-bottom: 0.14em; letter-spacing: -0.02em; color: var(--amber); }
.lost-sub { max-width: 40ch; font-size: var(--step-lead); }
.lost-floor { grid-row: 3; }