/* =========================================================
   ONDES-1 — "Swiss Signal"
   Tokens
   ========================================================= */
:root {
  --paper: #EBEBE6;
  --paper-2: #E0E0DA;
  --paper-3: #D4D4CD;
  --ink: #0D0D0C;
  --graphite: #5C5C57;
  --rule: rgba(13, 13, 12, .18);
  --rule-strong: rgba(13, 13, 12, .55);
  --signal: #2E22FF;
  --signal-lite: #7A72FF;
  --white: #F7F7F4;

  --m: clamp(16px, 2.8vw, 40px);
  --gut: clamp(10px, 1.4vw, 20px);
  --hdr: 52px;

  --ff-d: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-m: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.77, 0, .175, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-d);
  font-size: 16px;
  line-height: 1.45;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-booting { overflow: hidden; }
::selection { background: var(--signal); color: var(--white); }
img, svg, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.mono {
  font-family: var(--ff-m);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 87;
  font-weight: 400;
}

.skip { position: absolute; left: -999px; top: 8px; z-index: 10000; background: var(--ink); color: var(--white); padding: 10px 14px; }
.skip:focus { left: 8px; }

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

.wrap { padding-inline: var(--m); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
@media (max-width: 900px) { .g12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.kbd {
  display: inline-grid; place-items: center;
  min-width: 1.9em; height: 1.9em; padding: 0 .35em; margin-right: .3em;
  border: 1px solid currentColor;
  font-family: var(--ff-m); font-size: 10px; line-height: 1;
}

/* =========================================================
   Grid overlay
   ========================================================= */
.gridlines { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.gridlines__inner {
  height: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut);
  padding-inline: var(--m);
}
.gridlines__inner span {
  position: relative;
  border-left: 1px solid rgba(13, 13, 12, .055);
  border-right: 1px solid rgba(13, 13, 12, .055);
  transform-origin: top;
  font-family: var(--ff-m); font-size: 9px; color: transparent;
  padding: calc(var(--hdr) + 6px) 0 0 4px;
  transition: background-color .25s steps(3), color .25s steps(3);
}
.is-grid .gridlines__inner span { background: rgba(46, 34, 255, .05); color: var(--signal); border-color: rgba(46, 34, 255, .3); }
@media (max-width: 900px) {
  .gridlines__inner { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gridlines__inner span:nth-child(n+7) { display: none; }
}

/* =========================================================
   Boot
   ========================================================= */
.boot { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; }
.boot__half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--paper); }
.boot__half--top { top: 0; border-bottom: 1px solid var(--ink); }
.boot__half--bottom { bottom: 0; }
.boot__inner { position: relative; width: min(600px, 86vw); }
.boot__head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.boot__count { color: var(--signal); }
.boot__scope { width: 100%; height: 120px; }
.boot__list li { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--rule); padding: 6px 0; opacity: 0; }
.boot__list li i { flex: 1; border-bottom: 1px dotted var(--rule-strong); transform-origin: left; }
.boot__list li b { font-weight: 600; }
.boot.is-done { pointer-events: none; }
.boot.is-gone { display: none; }

/* =========================================================
   Cursor
   ========================================================= */
.xhair { position: fixed; inset: 0; z-index: 9500; pointer-events: none; mix-blend-mode: difference; display: none; }
.has-xhair .xhair { display: block; }
.has-xhair, .has-xhair * { cursor: none !important; }
.has-xhair input[type=text], .has-xhair input[type=email], .has-xhair input[type=number] { cursor: text !important; }
.xhair__h, .xhair__v { position: absolute; background: rgba(255, 255, 255, .16); will-change: transform; }
.xhair__h { left: 0; right: 0; top: 0; height: 1px; }
.xhair__v { top: 0; bottom: 0; left: 0; width: 1px; }
.xhair__box {
  position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5px 0 0 -5px;
  border: 1px solid #fff; will-change: transform;
  transition: width .18s steps(4), height .18s steps(4), margin .18s steps(4), background-color .18s;
}
.xhair__read { position: absolute; left: 0; top: 0; color: #fff; font-size: 9px; white-space: nowrap; will-change: transform; }
.xhair.is-hot .xhair__box { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.xhair.is-down .xhair__box { background: #fff; }
.xhair.is-hidden { opacity: 0; }

/* =========================================================
   Header
   ========================================================= */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--hdr);
  background: var(--paper); border-bottom: 1px solid var(--ink);
}
.hdr__in { height: 100%; display: flex; align-items: stretch; padding-inline: var(--m); }
.hdr__in > * { display: flex; align-items: center; }
.hdr__brand { font-weight: 700; font-size: 15px; letter-spacing: -.01em; text-decoration: none; padding-right: 24px; font-variation-settings: "wdth" 88; }
.hdr__running { gap: 18px; padding: 0 18px; border-left: 1px solid var(--rule); min-width: 210px; }
.hdr__sec { display: inline-block; overflow: hidden; height: 1.5em; }
.hdr__sec span { display: inline-block; }
.hdr__pct { color: var(--graphite); }
.hdr__nav { margin-left: auto; gap: 0; }
.hdr__nav a, .hdr__cta {
  position: relative; height: 100%; display: flex; align-items: center; gap: 6px;
  padding: 0 14px; text-decoration: none; font-size: 14px; font-weight: 500;
  border-left: 1px solid var(--rule);
}
.hdr__nav a .mono, .hdr__cta .mono, .ftr__index .mono { font-size: 9px; color: var(--graphite); }
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ink);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.hdr__nav a:hover::after, .hdr__nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.hdr__nav a.is-current .mono { color: var(--signal); }
.hdr__grid { padding: 0 14px; border-left: 1px solid var(--rule); color: var(--graphite); }
.hdr__grid[aria-pressed=true] { color: var(--signal); }
.hdr__cta { background: var(--ink); color: var(--white); border-left: 0; margin-right: calc(var(--m) * -1); padding: 0 var(--m) 0 18px; transition: background-color .2s steps(2); }
.hdr__cta .mono { color: var(--signal-lite); }
.hdr__cta:hover { background: var(--signal); }
.hdr__cta:hover .mono { color: var(--white); }
@media (max-width: 1100px) { .hdr__nav { display: none; } .hdr__grid { margin-left: auto; } }
@media (max-width: 640px) {
  .hdr__running { min-width: 0; padding: 0 10px; gap: 10px; }
  .hdr__pct, .hdr__grid { display: none; }
  .hdr__brand { padding-right: 10px; font-size: 14px; }
  .hdr__cta { margin-left: auto; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 22px;
  font-family: var(--ff-d); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  text-decoration: none; border: 1px solid var(--ink); white-space: nowrap;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--signal { background: var(--signal); border-color: var(--signal); color: var(--white); }
.btn--line:hover { color: var(--white); }
.btn__dot { width: 8px; height: 8px; background: currentColor; flex: none; }
.is-live .btn__dot { animation: blink 1s steps(2) infinite; }
.btn--block { width: 100%; justify-content: center; }
@keyframes blink { 50% { opacity: 0; } }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  padding-top: calc(var(--hdr) + 22px); padding-bottom: 22px;
}
.hero__top { row-gap: 10px; }
.hero__kicker { grid-column: 1 / 5; }
.hero__edition { grid-column: 7 / 10; }
.hero__edition-n { color: var(--signal); }
.hero__loc { grid-column: 10 / 13; text-align: right; }
.hero__mark { position: relative; flex: 1; display: flex; align-items: center; min-height: 34vw; }
.hero__word {
  position: relative; z-index: 1; width: 100%;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: 22vw; line-height: 1; font-weight: 800; letter-spacing: 0;
  user-select: none;
}
.glyph { display: block; overflow: hidden; line-height: .78; padding: .02em 0 .04em; }
.glyph > span {
  display: block;
  font-variation-settings: "wdth" var(--w, 100), "wght" var(--g, 800);
  will-change: transform;
}
.hero__scope { position: absolute; left: 0; right: 0; top: 50%; height: 70%; transform: translateY(-50%); width: 100%; z-index: 2; pointer-events: none; }
.hero__base { align-items: end; row-gap: 22px; padding-top: 10px; }
.hero__lede { grid-column: 1 / 5; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.3; font-weight: 450; letter-spacing: -.01em; }
.hero__actions { grid-column: 5 / 9; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__data { grid-column: 9 / 13; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.hero__data > div { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.hero__data > div:nth-child(odd) { padding-right: 10px; }
.hero__data dt { color: var(--graphite); }
.hero__hint { margin-top: 18px; padding-inline: var(--m); color: var(--graphite); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.hero__hint em { font-style: normal; color: var(--ink); margin-left: .5em; }
.hero__hint em::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--graphite); margin-right: 6px; vertical-align: 0; }
.is-live .hero__hint em::before { background: var(--signal); animation: blink 1s steps(2) infinite; }
.hero__hint-keys { display: inline-flex; align-items: center; margin-right: .6em; }
.glyph-break { display: none; }
@media (hover: none) { .hero__hint-keys, .play__keys li:not(:last-child) { display: none; } }
@media (max-width: 700px) {
  .hero__word { flex-wrap: wrap; row-gap: .02em; }
  .glyph-break { display: block; flex-basis: 100%; height: 0; }
  .glyph--dash { margin-left: auto; }
}

@media (max-width: 1100px) {
  .hero__lede { grid-column: 1 / 7; }
  .hero__actions { grid-column: 7 / 13; justify-content: flex-end; }
  .hero__data { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .hero__kicker { grid-column: 1 / 5; }
  .hero__edition { display: none; }
  .hero__loc { grid-column: 5 / 7; }
  .hero__lede, .hero__actions, .hero__data { grid-column: 1 / -1; }
  .hero__actions { justify-content: flex-start; }
  .hero__data { grid-template-columns: 1fr 1fr; }
  .hero__mark { min-height: 46vw; }
}
@media (max-width: 520px) {
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Sections
   ========================================================= */
.sec { position: relative; padding-top: clamp(110px, 14vw, 210px); }
.sec__head { align-items: end; row-gap: 16px; margin-bottom: clamp(40px, 6vw, 88px); }
.sec__num { grid-column: 1 / 3; display: flex; align-items: flex-start; gap: 6px; align-self: stretch; }
.sec__num .mono { padding-top: .8em; }
.sec__digit {
  font-size: clamp(56px, 9.5vw, 168px); line-height: .78; font-weight: 200;
  font-variation-settings: "wdth" 62; color: var(--graphite);
  display: inline-block; overflow: hidden; padding-top: .04em;
}
.sec__title {
  grid-column: 3 / 11;
  font-size: clamp(56px, 9.5vw, 168px); line-height: .78; font-weight: 800;
  letter-spacing: -.035em; font-variation-settings: "wdth" 68;
  padding-top: .04em;
}
.sec__meta { grid-column: 11 / 13; text-align: right; align-self: start; color: var(--graphite); }
.rule { height: 1px; background: var(--ink); transform-origin: left; }
.sec__rule { grid-column: 1 / -1; margin-top: 8px; }
@media (max-width: 900px) {
  .sec__num { grid-column: 1 / 2; }
  .sec__title { grid-column: 2 / -1; }
  .sec__meta { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .sec__rule { grid-row: 2; }
}

/* split helpers */
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.line { display: block; overflow: hidden; }
.line > span { display: block; }

/* =========================================================
   §1 Origin
   ========================================================= */
.origin__statement {
  grid-column: 3 / -1;
  font-size: clamp(30px, 4.4vw, 70px); line-height: 1; font-weight: 600;
  letter-spacing: -.03em; font-variation-settings: "wdth" 82;
  text-wrap: balance;
}
.origin__cols { margin-top: clamp(48px, 7vw, 110px); row-gap: 28px; }
.origin__col { font-size: 15.5px; line-height: 1.55; }
.origin__col:nth-child(1) { grid-column: 3 / 6; }
.origin__col:nth-child(2) { grid-column: 6 / 9; }
.origin__col:nth-child(3) { grid-column: 9 / 12; }
.origin__colnum { display: block; color: var(--signal); margin-bottom: 10px; padding-top: 10px; border-top: 1px solid var(--ink); }
.origin__team { margin-top: clamp(64px, 9vw, 140px); row-gap: 14px; }
.origin__label { grid-column: 1 / 3; color: var(--graphite); }
.team { grid-column: 3 / -1; }
.table th, .table td { text-align: left; vertical-align: top; font-weight: 400; }
.team thead th { padding: 0 12px 8px 0; color: var(--graphite); font-weight: 400; }
.team tbody tr { border-top: 1px solid var(--ink); transition: background-color .15s steps(2), color .15s steps(2); }
.team tbody tr:last-child { border-bottom: 1px solid var(--ink); }
.team td { padding: 14px 12px 14px 0; font-size: clamp(15px, 1.3vw, 19px); }
.team td:first-child { width: 8%; font-size: 10.5px; padding-top: 19px; }
.team td:nth-child(2) { width: 26%; font-weight: 600; }
.team td:nth-child(3) { width: 20%; color: var(--graphite); }
.team tbody tr:hover { background: var(--ink); color: var(--white); }
.team tbody tr:hover td { color: var(--white); }
.team tbody tr:hover td:first-child { color: var(--signal-lite); }
@media (max-width: 900px) {
  .origin__statement, .origin__col:nth-child(n), .team, .origin__label { grid-column: 1 / -1; }
  .team thead { display: none; }
  .team tr { display: grid; grid-template-columns: 2.5em 1fr; padding: 10px 0; }
  .team td { padding: 2px 0; width: auto !important; }
  .team td:first-child { grid-row: span 3; padding-top: 6px; }
}

/* Timeline */
.origin__timeline { margin-top: clamp(64px, 9vw, 140px); }
.origin__timeline .origin__label { display: block; margin-bottom: 18px; }
.tl { position: relative; }
.tl__track { height: 1px; background: var(--rule-strong); position: relative; }
.tl__fill { position: absolute; inset: -1px 0; background: var(--ink); transform-origin: left; transform: scaleX(1); }
.tl__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gut); }
.tl__list li { position: relative; padding: 18px 14px 0 0; }
.tl__list li::before { content: ""; position: absolute; left: 0; top: -6px; width: 1px; height: 12px; background: var(--ink); }
.tl__date { display: block; font-size: 12px; margin-bottom: 8px; font-weight: 500; }
.tl__list p { font-size: 14px; line-height: 1.4; color: var(--graphite); }
.tl__list li.is-now .tl__date { color: var(--signal); }
.tl__list li.is-now::before { width: 9px; height: 9px; left: -4px; top: -5px; background: var(--signal); animation: blink 1.2s steps(2) infinite; }
.tl__list li.is-now p { color: var(--ink); }
@media (max-width: 900px) {
  .tl__track { display: none; }
  .tl__list { grid-template-columns: 1fr; }
  .tl__list li { padding: 12px 0 12px 22px; border-left: 1px solid var(--ink); }
  .tl__list li::before { left: -1px; top: 18px; width: 12px; height: 1px; }
  .tl__list li.is-now::before { left: -5px; top: 14px; }
}

/* =========================================================
   §2 Anatomy
   ========================================================= */
.anatomy__body { row-gap: 32px; align-items: start; }
.anatomy__fig { grid-column: 1 / 10; }
.anatomy__svgwrap svg { width: 100%; height: auto; overflow: visible; }
.anatomy__cap { margin-top: 14px; color: var(--graphite); border-top: 1px solid var(--rule); padding-top: 8px; }
.legend { grid-column: 10 / 13; border-top: 1px solid var(--ink); }
.legend li {
  display: grid; grid-template-columns: 2.6em 1fr; column-gap: 6px;
  padding: 11px 8px 11px 0; border-bottom: 1px solid var(--rule);
  font-weight: 600; font-size: 15px; line-height: 1.2;
  transition: background-color .15s steps(2), color .15s steps(2), padding .2s var(--ease);
}
.legend li .mono { padding-top: 3px; grid-row: span 2; color: var(--graphite); }
.legend li em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--graphite); }
.legend li.is-on { background: var(--ink); color: var(--white); padding-left: 10px; }
.legend li.is-on .mono { color: var(--signal-lite); }
.legend li.is-on em { color: rgba(247, 247, 244, .7); }
@media (max-width: 1100px) {
  .anatomy__fig, .legend { grid-column: 1 / -1; }
  .legend { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gut); }
}
@media (max-width: 640px) { .legend { grid-template-columns: 1fr 1fr; } }

/* SVG drawing styles */
.pv { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pv .thin { stroke-opacity: .45; }
.pv .fill-ink { fill: var(--ink); }
.pv .fill-paper { fill: var(--paper); }
.pv text { fill: var(--ink); stroke: none; font-family: var(--ff-m); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; font-variation-settings: "wdth" 87; }
.pv .dim text { fill: var(--graphite); font-size: 10px; }
.pv .dim { stroke: var(--graphite); }
.pv .part { transition: opacity .2s steps(2); }
.pv .part * { transition: stroke .15s steps(2); }
.pv.has-focus .part { opacity: .28; }
.pv.has-focus .part.is-on { opacity: 1; }
.pv .part.is-on, .pv .part.is-on * { stroke: var(--signal); }
.pv .part.is-on .fill-ink { fill: var(--signal); }
.pv .part.is-on text { fill: var(--signal); }
.pv .callout circle { fill: var(--paper); }
.pv .callout text { font-size: 9px; text-anchor: middle; dominant-baseline: central; }
.pv .callout { cursor: pointer; }
.pv .callout.is-on circle { fill: var(--signal); stroke: var(--signal); }
.pv .callout.is-on text { fill: var(--white); }
.pv .callout.is-on line { stroke: var(--signal); }

/* =========================================================
   §3 Specification
   ========================================================= */
.plate { padding-block: clamp(36px, 4vw, 56px); position: relative; row-gap: 26px; align-items: start; }
.plate::before { content: ""; position: absolute; top: 0; left: var(--m); right: var(--m); height: 1px; background: var(--ink); }
.plate__id { grid-column: 1 / 2; color: var(--signal); }
.plate__text { grid-column: 2 / 6; }
.plate__title {
  font-size: clamp(34px, 4vw, 60px); line-height: .9; font-weight: 750; letter-spacing: -.03em;
  font-variation-settings: "wdth" 72; margin-bottom: 18px;
}
.plate__text p { font-size: 15.5px; max-width: 34em; }
.plate__fig { grid-column: 6 / 9; padding-top: 4px; }
.spec__table { grid-column: 9 / 13; border-top: 1px solid var(--ink); }
.spec__table tr { border-bottom: 1px solid var(--rule); }
.spec__table th { font-family: var(--ff-m); font-size: 10px; text-transform: uppercase; font-variation-settings: "wdth" 87; color: var(--graphite); width: 36%; padding: 10px 10px 9px 0; letter-spacing: .02em; }
.spec__table td { font-size: 14.5px; padding: 7px 0 7px; line-height: 1.35; }
.spec__table tr { transition: background-color .12s steps(2); }
.spec__table tr:hover { background: var(--paper-2); }
.spec__table tr:hover th { color: var(--signal); }
.plate--wide .plate__text { grid-column: 2 / 6; }
.spec__table--grid { grid-column: 6 / 13; }
.spec__table--grid tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); }
.spec__table--grid tr { display: grid; grid-template-columns: 36% 1fr; }
.spec__table--grid th { width: auto; }
.diagram { width: 100%; height: auto; overflow: visible; }
.diagram .dg, .diagram .dg-grid { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.diagram .dg-grid { stroke: var(--rule-strong); stroke-width: 1; }
.diagram .dg-axis { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.diagram .dg-ghost { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.diagram .dg-signal { stroke: var(--signal); }
.diagram .dg-ticks line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.diagram .hatch { stroke: var(--ink); stroke-width: .8; fill: none; }
.diagram .dg-lab text { fill: var(--graphite); font-family: var(--ff-m); font-size: 9px; text-transform: uppercase; }
@media (max-width: 1100px) {
  .plate__text { grid-column: 2 / 7; }
  .plate__fig { grid-column: 8 / 13; }
  .spec__table, .spec__table--grid { grid-column: 2 / 13; }
  .plate--wide .plate__text { grid-column: 2 / 13; }
}
@media (max-width: 900px) {
  .plate__id { grid-column: 1 / -1; }
  .plate__text, .plate__fig, .spec__table, .spec__table--grid, .plate--wide .plate__text { grid-column: 1 / -1; }
  .spec__table--grid tbody { grid-template-columns: 1fr; }
}

/* =========================================================
   §4 Play — synth
   ========================================================= */
.play__intro { row-gap: 22px; margin-bottom: 36px; align-items: end; }
.play__lede { grid-column: 3 / 9; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.01em; }
.play__keys { grid-column: 10 / 13; display: grid; gap: 6px; color: var(--graphite); }
.play__keys .kbd { color: var(--ink); }
@media (max-width: 900px) { .play__lede, .play__keys { grid-column: 1 / -1; } }

.synth {
  position: relative; border: 1px solid var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px),
    var(--paper-2);
  user-select: none; -webkit-user-select: none;
}
.synth__bar {
  display: flex; align-items: stretch; background: var(--ink); color: var(--white); height: 40px;
}
.synth__bar > * { display: flex; align-items: center; padding: 0 14px; border-right: 1px solid rgba(255,255,255,.14); gap: 8px; }
.synth__name { font-weight: 600; }
.synth__name i { font-style: normal; color: rgba(247,247,244,.5); }
.synth__lamps i { width: 9px; height: 9px; border: 1px solid rgba(247,247,244,.5); }
.synth__lamps i.on { background: var(--signal-lite); border-color: var(--signal-lite); }
.synth__lamps b { font-weight: 400; color: rgba(247,247,244,.55); margin-left: 4px; }
.synth__note { min-width: 15ch; }
.synth__power { margin-left: auto; border-right: 0; border-left: 1px solid rgba(255,255,255,.14); padding: 0 16px; gap: 10px; color: var(--white); transition: background-color .15s steps(2); }
.synth__power:hover { background: #222; }
.synth__led { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--white); }
.is-live .synth__led { background: var(--signal-lite); border-color: var(--signal-lite); box-shadow: 0 0 10px var(--signal-lite); }
.is-live .synth__power { background: var(--signal); }

.synth__screen { position: relative; border-bottom: 1px solid var(--ink); background: var(--paper); }
.scope--grat { width: 100%; height: clamp(190px, 22vw, 320px); }
.synth__screen-lab { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; justify-content: space-between; color: var(--graphite); pointer-events: none; font-size: 9.5px; }
.synth__off { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .2s steps(2); }
.synth__off span { background: var(--paper); padding: 8px 12px; border: 1px solid var(--ink); }
.is-live .synth__off { opacity: 0; }

.synth__controls { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--ink); }
.synth__controls > * { padding: 16px 18px; border-right: 1px solid var(--rule-strong); }
.synth__controls > *:last-child { border-right: 0; }
.ctl legend, .ctl__lab { display: block; color: var(--graphite); margin-bottom: 10px; font-size: 9.5px; }
.ctl--wave legend { float: left; width: 100%; }
.wave { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; clear: both; }
.wave label { position: relative; }
.wave input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.wave span {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--ink);
  font-family: var(--ff-m); font-size: 10px; text-transform: uppercase; background: var(--paper);
  transition: background-color .12s steps(2), color .12s steps(2);
}
.wave svg { width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; overflow: visible; }
.wave input:checked + span { background: var(--ink); color: var(--white); }
.wave input:checked + span svg { stroke: var(--signal-lite); }
.wave input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.wave label:hover span { background: var(--paper-3); }
.wave label:hover input:checked + span { background: var(--ink); }

.knobs { display: flex; flex: 1; justify-content: space-between; gap: 6px; min-width: 0; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; touch-action: none; outline: none; }
.knob__lab { font-size: 9.5px; color: var(--graphite); }
.knob svg { width: 62px; height: 62px; overflow: visible; }
.knob .k-ring { fill: none; stroke: var(--ink); stroke-width: 1; }
.knob .k-body { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.knob .k-arc { fill: none; stroke: var(--signal); stroke-width: 2.5; }
.knob .k-ptr { stroke: var(--ink); stroke-width: 2; }
.knob .k-tick { stroke: var(--ink); stroke-width: 1; }
.knob__val { font-size: 10px; color: var(--ink); min-width: 7ch; text-align: center; padding: 2px 4px; }
.knob:hover .k-body, .knob.is-drag .k-body { fill: var(--white); }
.knob:focus-visible .knob__val { background: var(--signal); color: var(--white); }
.knob.is-drag .knob__val { background: var(--ink); color: var(--white); }

.ctl--vcf { width: 200px; }
.ctl--vcf canvas { width: 100%; height: 76px; border: 1px solid var(--rule-strong); background: var(--paper); }
.oct { display: flex; align-items: stretch; border: 1px solid var(--ink); height: 40px; }
.oct button { width: 38px; font-size: 18px; background: var(--paper); transition: background-color .12s steps(2), color .12s steps(2); }
.oct button:hover { background: var(--ink); color: var(--white); }
.oct output { display: grid; place-items: center; min-width: 46px; border-inline: 1px solid var(--ink); background: var(--white); }

@media (max-width: 1240px) {
  .ctl--vcf { display: none; }
}
@media (max-width: 1000px) {
  .knobs { order: 3; flex-basis: 100%; border-top: 1px solid var(--rule-strong); border-right: 0; flex-wrap: wrap; justify-content: space-around; }
  .ctl--wave { flex: 1; }
}
@media (max-width: 560px) {
  .synth__lamps b, .synth__name i { display: none; }
  .synth__bar > * { padding: 0 10px; }
  .synth__note { min-width: 0; }
  .knob { width: 30%; }
  .synth__controls > * { padding: 14px 12px; }
  .wave { grid-template-columns: repeat(4, 1fr); }
  .wave span { padding: 7px 4px; justify-content: center; }
  .wave span svg { display: none; }
  .ctl--wave { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--rule-strong); }
  .ctl--oct { flex: 1; }
}

/* Ruban */
.ruban { position: relative; height: 62px; border-bottom: 1px solid var(--ink); touch-action: none; background: var(--paper-3); overflow: hidden; outline: none; }
.ruban:focus-visible { box-shadow: inset 0 0 0 2px var(--signal); }
.ruban__wire { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); }
.ruban__ticks { position: absolute; inset: 0; }
.ruban__ticks i { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--ink); opacity: .5; }
.ruban__ticks i.c { height: 18px; opacity: 1; }
.ruban__ticks b { position: absolute; bottom: 20px; font-family: var(--ff-m); font-size: 8.5px; font-weight: 400; transform: translateX(-50%); color: var(--graphite); }
.ruban__ring {
  position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid var(--ink); background: transparent;
  transition: background-color .1s steps(2), border-color .1s steps(2);
}
.ruban__ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--ink); }
.ruban.is-on .ruban__ring { background: var(--signal); border-color: var(--signal); }
.ruban.is-on .ruban__ring::after { border-color: var(--white); }
.ruban__lab { position: absolute; left: 10px; top: 6px; color: var(--graphite); font-size: 9px; }

/* Keys */
.keys { position: relative; display: flex; height: clamp(150px, 15vw, 220px); touch-action: none; }
.key { position: relative; flex: 1; border-right: 1px solid var(--ink); background: var(--white); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 10px; gap: 4px; }
.key:last-child { border-right: 0; }
.key--b { position: absolute; top: 0; height: 60%; background: var(--ink); border: 0; z-index: 2; padding-bottom: 8px; }
.key .mono { font-size: 8.5px; color: var(--graphite); pointer-events: none; }
.key--b .mono { color: rgba(247,247,244,.55); }
.key .key__map { color: var(--ink); border: 1px solid var(--rule-strong); padding: 1px 4px; }
.key--b .key__map { color: var(--white); border-color: rgba(247,247,244,.35); }
.key.is-down { background: var(--signal); }
.key.is-down .mono { color: var(--white); }
.key--b.is-down { background: var(--signal); }
.key:hover:not(.is-down) { background: var(--paper); }
.key--b:hover:not(.is-down) { background: #2a2a28; }

/* =========================================================
   §5 Reserve
   ========================================================= */
.reserve { padding-bottom: clamp(100px, 12vw, 180px); }
.reserve__body { row-gap: 48px; align-items: start; }
.reserve__left { grid-column: 1 / 7; }
.reserve__right { grid-column: 8 / 13; position: sticky; top: calc(var(--hdr) + 24px); }
.reserve__big { font-size: clamp(32px, 4.2vw, 66px); line-height: .98; font-weight: 650; letter-spacing: -.03em; font-variation-settings: "wdth" 80; margin-bottom: 26px; }
.reserve__note { font-size: 15.5px; max-width: 36em; margin-bottom: 36px; }
.serials__head, .serials__key { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; }
.serials__head { border-top: 1px solid var(--ink); }
.serials__head b { color: var(--signal); font-weight: 500; }
.serials__grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; }
.cell {
  aspect-ratio: 1; border: 1px solid var(--rule-strong); background: transparent; position: relative;
  font-family: var(--ff-m); font-size: 0;
  transition: background-color .1s steps(2), border-color .1s steps(2);
}
.cell.is-taken { background: var(--ink); border-color: var(--ink); }
.cell:not(.is-taken):hover { border-color: var(--signal); background: rgba(46,34,255,.12); }
.cell.is-sel { background: var(--signal); border-color: var(--signal); }
.cell.is-mine { background: var(--signal); border-color: var(--signal); }
.cell.is-mine::after { content: ""; position: absolute; inset: 30%; background: var(--white); }
.serials__key { justify-content: flex-start; gap: 22px; color: var(--graphite); }
.serials__key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--rule-strong); }
.serials__key .k-taken { background: var(--ink); border-color: var(--ink); }
.serials__key .k-sel { background: var(--signal); border-color: var(--signal); }

.form { border-top: 1px solid var(--ink); }
.form__row { padding: 14px 0 0; }
.form label.mono, .form legend.mono { display: block; color: var(--graphite); margin-bottom: 2px; }
.form input[type=text], .form input[type=email], .form input[type=number], .form select {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; border-radius: 0;
  font-family: var(--ff-d); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.01em;
  padding: 6px 0 8px; color: var(--ink); outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color .15s steps(2), box-shadow .15s steps(2);
}
.form input:focus, .form select:focus { border-bottom-color: var(--signal); box-shadow: 0 1px 0 var(--signal); }
.form input[aria-invalid=true] { border-bottom-color: var(--signal); box-shadow: 0 1px 0 var(--signal); }
.form input::-webkit-outer-spin-button, .form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form input[type=number] { -moz-appearance: textfield; }
.form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 28px; font-size: clamp(17px, 1.4vw, 20px); height: 50px;
}
.form__serial { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--ink); }
.form__serial .form__no { font-size: 22px; font-weight: 500; }
.form__serial input[type=number] { border-bottom: 0 !important; box-shadow: none !important; font-size: clamp(36px, 3.6vw, 54px); font-weight: 800; font-variation-settings: "wdth" 70; letter-spacing: -.02em; padding: 0; color: var(--signal); }
.form__serial:focus-within { box-shadow: 0 1px 0 var(--signal); border-bottom-color: var(--signal); }
.form__any { white-space: nowrap; padding: 8px 10px; border: 1px solid var(--ink); align-self: center; transition: background-color .12s steps(2), color .12s steps(2); }
.form__any:hover { background: var(--ink); color: var(--white); }
.form__help { margin-top: 6px; color: var(--graphite); font-size: 9.5px; }
.form__row--split { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.form__cheeks { display: flex; flex-wrap: wrap; gap: 0; }
.form__cheeks legend { width: 100%; }
.form__cheeks label { position: relative; }
.form__cheeks input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.form__cheeks span { display: block; padding: 0 16px; height: 46px; line-height: 44px; border: 1px solid var(--ink); font-weight: 500; transition: background-color .12s steps(2), color .12s steps(2); }
.form__cheeks label + label span { border-left: 0; }
.form__cheeks input:checked + span { background: var(--ink); color: var(--white); }
.form__cheeks input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.form__check { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 6px; font-size: 14px; line-height: 1.4; }
.form__check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--ink); flex: none; margin: 1px 0 0; background: var(--white); }
.form__check input:checked { background: var(--ink); box-shadow: inset 0 0 0 4px var(--white); }
.form__check input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.form__error { min-height: 1.5em; color: var(--signal); margin: 8px 0; }
@media (max-width: 900px) {
  .reserve__left, .reserve__right { grid-column: 1 / -1; position: static; }
}
@media (max-width: 420px) { .form__row--split { grid-template-columns: 1fr; } }

.slip { border: 1px solid var(--ink); background: var(--white); padding: 22px; outline: none; }
.slip__head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.slip__head span:last-child { color: var(--signal); }
.slip__big { font-size: clamp(28px, 3vw, 44px); line-height: 1; font-weight: 750; letter-spacing: -.03em; font-variation-settings: "wdth" 76; margin: 22px 0; }
.slip__big span { color: var(--signal); }
.slip__dl { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--rule); margin-bottom: 18px; }
.slip__dl dt, .slip__dl dd { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.slip__dl dt { color: var(--graphite); }
.slip__dl dd { text-transform: none; font-size: 11px; }
.slip__foot { font-size: 14px; margin-bottom: 20px; }

/* =========================================================
   Footer
   ========================================================= */
.ftr { background: var(--ink); color: var(--white); padding-top: clamp(40px, 6vw, 80px); position: relative; z-index: 41; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--signal-lite); }
.ftr__top { position: relative; }
.ftr__word {
  grid-column: 1 / -1; font-size: 22vw; line-height: .78; font-weight: 800; letter-spacing: -.02em;
  font-variation-settings: "wdth" 100; white-space: nowrap; padding-top: .05em; color: var(--white);
  overflow: hidden;
}
.ftr__word > span { display: inline-block; }
.ftr__scope { position: absolute; left: 0; right: 0; top: 50%; height: 80%; transform: translateY(-50%); width: 100%; z-index: 2; pointer-events: none; }
.ftr__cols { margin-top: clamp(40px, 5vw, 72px); padding-block: 30px 40px; border-top: 1px solid rgba(247,247,244,.25); row-gap: 32px; }
.ftr__col { grid-column: span 3; font-size: 14px; line-height: 1.5; }
.ftr__col--wide { grid-column: span 4; }
.ftr__col:first-child { grid-column: span 2; }
.ftr__col h4 { color: rgba(247,247,244,.5); margin-bottom: 12px; font-weight: 400; }
.ftr__col p + p { margin-top: 12px; }
.ftr__notes { counter-reset: n; }
.ftr__notes li { counter-increment: n; display: grid; grid-template-columns: 2.4em 1fr; padding: 0 0 10px; }
.ftr__notes li::before { content: counter(n, decimal-leading-zero); font-family: var(--ff-m); font-size: 10px; color: var(--signal-lite); padding-top: 2px; }
.ftr__small { color: rgba(247,247,244,.5); }
.ftr__index li a { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.ftr__index .mono { color: rgba(247,247,244,.5); }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 16px 90px; border-top: 1px solid rgba(247,247,244,.25); color: rgba(247,247,244,.6); }
@media (max-width: 1100px) {
  .ftr__col, .ftr__col:first-child { grid-column: span 6; }
  .ftr__col--wide { grid-column: span 6; }
}
@media (max-width: 900px) { .ftr__col, .ftr__col:first-child, .ftr__col--wide { grid-column: 1 / -1; } }

/* =========================================================
   Status module
   ========================================================= */
.status {
  position: fixed; left: var(--m); bottom: 14px; z-index: 55;
  display: flex; align-items: center; gap: 0; height: 32px;
  background: var(--paper); border: 1px solid var(--ink);
  pointer-events: none; transition: transform .4s var(--ease);
}
.status__scope { width: 120px; height: 30px; border-right: 1px solid var(--ink); }
.status__txt { padding: 0 10px; white-space: nowrap; }
.is-live .status__txt { color: var(--signal); }
.status.is-away { transform: translateY(calc(100% + 20px)); }
@media (max-width: 640px) { .status__scope { width: 72px; } .status:not(.is-on) { display: none; } }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .boot { display: none; }
}