/* The brand guide. Plain, so the system speaks for itself. */
*, *::before, *::after { box-sizing: border-box; }
body.brand {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100dvh;
}
main { flex: 1; }
.wrap { width: min(100% - 32px, 1060px); margin-inline: auto; }
h1, h2, h3 { margin: 0; line-height: 1.14; letter-spacing: -.024em; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--red) 45%, transparent); }
.mono { font-family: var(--mono); }
.note { color: var(--ink-3); font-size: .84rem; line-height: 1.5; }
.eyebrow { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: .6rem; }

.bhero { padding: 3.6rem 0 2.4rem; border-bottom: 1px solid var(--line); }
.bhero h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .9rem; }
.bhero__lede { font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; }

.bsec { padding: 3rem 0; border-bottom: 1px solid var(--line); }
.bsec__head { margin-bottom: 1.6rem; }
.bsec__head h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.bsec__lede { color: var(--ink-2); max-width: 66ch; font-size: .96rem; }
.bsec__foot { margin-top: 1.2rem; }

/* header, the same three columns as every other page */
.lhd {
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lhd__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; height: 56px; }
.lhd__legal { justify-self: end; display: flex; gap: 6px; }
.lhd__legal a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; padding: 6px 9px; border-radius: 7px; white-space: nowrap;
}
.lhd__legal a:hover, .lhd__legal a[aria-current] { color: var(--red); background: var(--red-soft); }
.lhd .mark-link { justify-self: center; display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.lhd .mark { width: 72px; height: auto; display: block; overflow: visible; }
@media (max-width: 640px) {
  .lhd__bar { gap: 8px; }
  .lhd__nav { overflow-x: auto; scrollbar-width: none; }
  .lhd__nav::-webkit-scrollbar { display: none; }
  .lhd__legal a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; padding: 6px 9px; border-radius: 7px; white-space: nowrap;
}
}

/* mark */
.markrow { display: grid; gap: 20px; }
@media (min-width: 720px) { .markrow { grid-template-columns: repeat(3, 1fr); } }
.markrow__cell { display: grid; gap: 10px; justify-items: center; text-align: center; }
.markbig {
  width: 100%; max-width: 220px; padding: 26px 22px;
  border-radius: 14px; background: var(--red);
  display: grid; place-items: center;
}
.markbig--sm { max-width: 220px; }
.markbig--sm .mark { width: 72px; margin-inline: auto; }
.markbig .mark { width: 100%; height: auto; }
.markbig .mark { width: 100%; }

/* colour */
.cgroup { margin-bottom: 2rem; }
.cgroup h3 { font-size: 1rem; margin-bottom: .2rem; }
.sws { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 560px) { .sws { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sws { grid-template-columns: repeat(4, 1fr); } }
.sw { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.sw__chips { display: flex; height: 54px; }
.sw__chip { flex: 1; }
.sw__name { font-family: var(--mono); font-size: .74rem; font-weight: 700; padding: 9px 11px 0; }
.sw__hex, .sw__ratio { font-size: .66rem; color: var(--ink-3); padding: 0 11px; }
.sw__ratio { padding-bottom: 10px; }

/* type */
.ttable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ttable th[scope='col'] { text-align: left; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 9px; }
.ttable td, .ttable th[scope='row'] { padding: 11px 14px 11px 0; border-top: 1px solid var(--line-2); text-align: left; font-weight: 400; }
.ttable th[scope='row'] { font-weight: 600; }

/* components */
.parts { display: grid; gap: 16px; }
@media (min-width: 640px) { .parts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .parts { grid-template-columns: repeat(4, 1fr); } }
.part { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--paper-2); }
.part__demo { min-height: 62px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.part__demo--score { display: block; }
.part__demo--dev { justify-content: center; }
.part__demo--dev .device { width: 74px; height: auto; }
.part__name { font-weight: 600; font-size: .92rem; }
.bchip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: var(--ink-2); }
.bchip.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.score { width: 100%; height: auto; overflow: visible; }
.g-rail { fill: var(--line); }
.g-label { font-family: var(--mono); font-size: 4.4px; font-weight: 700; letter-spacing: .06em; text-anchor: end; fill: var(--ink-3); }
.g-hold, .g-tap, .g-rel { fill: var(--lane-c, var(--ink-3)); }
.g-hold { opacity: .34; }
[data-lane='play']   { --lane-c: #2f2d29; }
[data-lane='tracks'] { --lane-c: #5d4175; }
:root[data-theme='dark'] [data-lane='play']   { --lane-c: #cfc9bc; }
:root[data-theme='dark'] [data-lane='tracks'] { --lane-c: #c3a7d9; }
.device .body { fill: var(--paper-3); stroke: var(--line); stroke-width: 1.4; }
.device .body-panel { fill: var(--paper-2); stroke: var(--line); stroke-width: 1.4; }
.device .slot, .device .usb { fill: color-mix(in srgb, var(--ink) 12%, transparent); }
.device .vu circle { fill: color-mix(in srgb, var(--ink) 18%, transparent); }
.device .num { fill: var(--ink-3); font: 600 11px var(--sans); text-anchor: middle; }
.device .part { fill: color-mix(in srgb, var(--ink) 20%, var(--paper-3)); stroke: var(--line); stroke-width: 1; }
.device .knob { fill: var(--paper-2); }
.device .marker { fill: color-mix(in srgb, var(--red) 55%, var(--paper-3)); stroke: none; }

/* rules */
.rules { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rules li { counter-increment: r; position: relative; padding: 14px 0 14px 2.4rem; border-top: 1px solid var(--line-2); display: grid; gap: 2px; }
.rules li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--red); }
.rules strong { font-weight: 600; }

.ft { border-top: 1px solid var(--line); padding: 1.8rem 0 2.6rem; background: var(--paper-2); }
.ft__in { display: grid; gap: 12px; }
@media (min-width: 760px) { .ft__in { grid-template-columns: 1.4fr 1fr; } }
.ft__note { font-size: .8rem; color: var(--ink-3); }
.ft__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; font-size: .8rem; }
.ft__links a { color: var(--ink-2); }