/* MASCHINE for Live: manual and setup.
   Material Design 3 tokens. Colour roles generated from the seed #E8620A (MASCHINE-like orange):
   primary / tertiary / error roles from the Fidelity scheme, secondary from Tonal Spot, surfaces
   from a low-chroma neutral at the seed hue (graphite with a hint of warmth). Contrast checked
   (text pairs >= 4.5:1). */

:root {
  color-scheme: light;
  --md-sys-color-primary: #9d3e00;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #c55000;
  --md-sys-color-on-primary-container: #fffbff;
  --md-sys-color-secondary: #765749;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffdbcc;
  --md-sys-color-on-secondary-container: #5c4033;
  --md-sys-color-tertiary: #005ea6;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #0076cf;
  --md-sys-color-on-tertiary-container: #fdfcff;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-surface: #fff8f6;
  --md-sys-color-surface-dim: #e2d8d4;
  --md-sys-color-surface-bright: #fff8f6;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fcf1ee;
  --md-sys-color-surface-container: #f6ece8;
  --md-sys-color-surface-container-high: #f0e6e2;
  --md-sys-color-surface-container-highest: #ebe0dd;
  --md-sys-color-on-surface: #1f1b19;
  --md-sys-color-on-surface-variant: #51443e;
  --md-sys-color-outline: #83746d;
  --md-sys-color-outline-variant: #d6c3bb;
  --md-sys-color-inverse-surface: #352f2d;
  --md-sys-color-inverse-on-surface: #f9efeb;
  --md-sys-color-inverse-primary: #ffb694;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* corners: one radius family (every border-radius is one of these, 0 or inherit; checked by
     tests/radius.test.js). --r: boxes, cards, buttons, fields, rows, popups. --r-s: smaller
     things inside those (key caps, tags, grid cells). --r-xs: tiny marks (inline code, bars).
     --r-full: only real circles and pills (icon buttons, dots, the version pill). */
  --r: 10px;
  --r-s: 6px;
  --r-xs: 2px;
  --r-full: 999px;
  /* pads (the accent picker's): the hardware pads' corner as drawn in the controller drawings,
     PAD_ROUND in js/manual.js = 3 % of the pad's width (a percentage of a square box is exactly
     that). Only rules for pads may use it. */
  --r-pad: 3%;

  /* elevation (shadow part; the tone part comes from the surface-container roles) */
  --md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / .14), 0 1px 3px 1px rgb(0 0 0 / .08);
  --md-sys-elevation-2: 0 1px 2px rgb(0 0 0 / .16), 0 2px 6px 2px rgb(0 0 0 / .1);
  --md-sys-elevation-3: 0 4px 8px 3px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .2);

  /* motion */
  --md-sys-motion-easing: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-short: 150ms;
  --md-sys-motion-medium: 300ms;

  /* typography */
  --md-ref-typeface: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --md-ref-typeface-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  /* hardware drawing: the controller stays dark in both themes, like the real thing */
  --hw-body: #232224;
  --hw-button: #3a393c;
  --hw-button-text: #dcdadc;
  --hw-pad: #48464a;
  --hw-screen: #0c0c0e;
  --hw-active: #ef6712;
  --hw-related: #ffb694;

  --focus-ring: 3px solid var(--md-sys-color-secondary);
  --ring-edge: rgb(0 0 0 / .8); /* the dark line round the white ring of a chosen colour pad */
  --bar-height: 64px;
  --page-max: 1840px; /* widest page container (app bar, toolbar, manual, footer) */
}

/* dark: same roles, dark tones */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ring-edge: rgb(0 0 0 / .5);
    --md-sys-color-primary: #ffb694;
    --md-sys-color-on-primary: #571f00;
    --md-sys-color-primary-container: #ef6712;
    --md-sys-color-on-primary-container: #431600;
    --md-sys-color-secondary: #e6bead;
    --md-sys-color-on-secondary: #442a1e;
    --md-sys-color-secondary-container: #5c4033;
    --md-sys-color-on-secondary-container: #ffdbcc;
    --md-sys-color-tertiary: #a2c9ff;
    --md-sys-color-on-tertiary: #00315c;
    --md-sys-color-tertiary-container: #1693fc;
    --md-sys-color-on-tertiary-container: #002548;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-surface: #171211;
    --md-sys-color-surface-dim: #171211;
    --md-sys-color-surface-bright: #3e3836;
    --md-sys-color-surface-container-lowest: #110d0c;
    --md-sys-color-surface-container-low: #1f1b19;
    --md-sys-color-surface-container: #231f1d;
    --md-sys-color-surface-container-high: #2e2927;
    --md-sys-color-surface-container-highest: #393431;
    --md-sys-color-on-surface: #ebe0dd;
    --md-sys-color-on-surface-variant: #d6c3bb;
    --md-sys-color-outline: #9e8d86;
    --md-sys-color-outline-variant: #51443e;
    --md-sys-color-inverse-surface: #ebe0dd;
    --md-sys-color-inverse-on-surface: #352f2d;
    --md-sys-color-inverse-primary: #a14000;
    --hw-body: #0f0e0f;
    --hw-button: #343336;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ring-edge: rgb(0 0 0 / .5);
  --md-sys-color-primary: #ffb694;
  --md-sys-color-on-primary: #571f00;
  --md-sys-color-primary-container: #ef6712;
  --md-sys-color-on-primary-container: #431600;
  --md-sys-color-secondary: #e6bead;
  --md-sys-color-on-secondary: #442a1e;
  --md-sys-color-secondary-container: #5c4033;
  --md-sys-color-on-secondary-container: #ffdbcc;
  --md-sys-color-tertiary: #a2c9ff;
  --md-sys-color-on-tertiary: #00315c;
  --md-sys-color-tertiary-container: #1693fc;
  --md-sys-color-on-tertiary-container: #002548;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-surface: #171211;
  --md-sys-color-surface-dim: #171211;
  --md-sys-color-surface-bright: #3e3836;
  --md-sys-color-surface-container-lowest: #110d0c;
  --md-sys-color-surface-container-low: #1f1b19;
  --md-sys-color-surface-container: #231f1d;
  --md-sys-color-surface-container-high: #2e2927;
  --md-sys-color-surface-container-highest: #393431;
  --md-sys-color-on-surface: #ebe0dd;
  --md-sys-color-on-surface-variant: #d6c3bb;
  --md-sys-color-outline: #9e8d86;
  --md-sys-color-outline-variant: #51443e;
  --md-sys-color-inverse-surface: #ebe0dd;
  --md-sys-color-inverse-on-surface: #352f2d;
  --md-sys-color-inverse-primary: #a14000;
  --hw-body: #0f0e0f;
  --hw-button: #343336;
}

/* --- base ------------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-height) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .015em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { flex: 1; outline: none; }

a { color: var(--md-sys-color-primary); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; }

code, kbd, .mono { font-family: var(--md-ref-typeface-mono); }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
button { font: inherit; color: inherit; }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; border-radius: var(--r);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.view[hidden] { display: none !important; }

/* state layer: hover / focus / press tint in the content colour (M3) */
.state { position: relative; isolation: isolate; }
.state::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; pointer-events: none;
  transition: opacity var(--md-sys-motion-short) linear;
}
.state:hover::after { opacity: .08; }
.state:focus-visible::after { opacity: .1; }
.state:active::after { opacity: .12; }

/* --- buttons -------------------------------------------------------------------------- */

.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 24px; border-radius: var(--r);
  border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .01em;
}
.btn .icon { width: 18px; height: 18px; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-short) linear;
}
.btn:hover::after { opacity: .08; }
.btn:focus-visible::after, .btn:active::after { opacity: .12; }
.btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn-filled:hover { box-shadow: var(--md-sys-elevation-1); }
.btn-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.btn-text { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  border-color: transparent; box-shadow: none; cursor: default; pointer-events: none;
}
.btn-filled.has-icon-end { padding-right: 16px; }
.btn-outlined.has-icon-start, .btn-text.has-icon-start { padding-left: 16px; }

.icon-button {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--r-full); background: transparent;
  color: var(--md-sys-color-on-surface-variant); cursor: pointer;
}
.icon-button .icon { width: 22px; height: 22px; }
.icon-button[aria-current="page"] {  /* its page is open (help, report an issue): like an active tab */
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.icon-button::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-short) linear;
}
.icon-button:hover::after { opacity: .08; }
.icon-button:focus-visible::after, .icon-button:active::after, .icon-button[aria-expanded="true"]::after { opacity: .12; }

/* --- top app bar ------------------------------------------------------------------------ */

.top-app-bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  transition: box-shadow var(--md-sys-motion-short) linear;
}
.top-app-bar.scrolled { box-shadow: var(--md-sys-elevation-2); }
.top-app-bar-inner {
  display: flex; align-items: center; gap: 16px;
  max-width: var(--page-max); margin: 0 auto; padding: 0 16px; min-height: var(--bar-height);
}

.brand {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  color: inherit; text-decoration: none; border-radius: var(--r-s);
}
/* Logo: the four corner pads of the grid in MASCHINE's sound colours (PAD_COLORS, layouts.js), with
   Live's playhead passing: the pads it has passed glow. Drawn in index.html (same as the favicon). */
.logo { display: block; flex: none; width: 32px; height: 32px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-title { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.brand-for { font-weight: 400; color: var(--md-sys-color-on-surface-variant); }
.brand-sub { font-size: 12px; line-height: 16px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }

.nav-tabs { display: flex; gap: 4px; margin-left: auto; }
.nav-tab {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r);
  color: var(--md-sys-color-on-surface-variant); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
}
.nav-tab::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity var(--md-sys-motion-short) linear;
}
.nav-tab:hover::after { opacity: .08; }
.nav-tab[hidden] { display: none; }
.nav-tab[aria-current="page"] {
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}

.theme-menu { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 168px; padding: 8px 0; border-radius: var(--r);
  background: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-2);
}
.menu[hidden] { display: none; }
.menu button {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px; width: 100%;
  height: 48px; padding: 0 16px; border: 0; background: transparent; cursor: pointer;
  color: var(--md-sys-color-on-surface); text-align: left; font-size: 14px;
}
.menu button .icon { color: var(--md-sys-color-on-surface-variant); }
.menu button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; }
.menu button:hover::after, .menu button:focus-visible::after { opacity: .08; }
.menu button:focus-visible { outline: none; }
.menu button[aria-checked="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.menu button[aria-checked="true"] .icon { color: inherit; }

/* the accent colour popover (the pads button beside the theme button): Auto and the 16 pad
   colours as MASCHINE's pads (pad 1 bottom left, no text on them), 16 px all round. The chosen pad
   (and under Auto, Auto and today's pad) get a white ring with a small gap, and a dark line
   outside it so it shows on light surfaces too. */
.accent-icon rect { fill: none; }
.accent-icon .accent-icon-lit { fill: var(--day-pad, currentColor); stroke: var(--day-pad, currentColor); }
.theme-menu[hidden] { display: none; }
.accent-popover { min-width: 0; padding: 16px; }
.menu .colour-auto, .menu .colour-auto[aria-checked="true"] {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  width: 100%; height: auto; min-height: 52px; padding: 6px 12px; margin: 0 0 12px;
  border-radius: var(--r); background: var(--pad, var(--md-sys-color-primary)); color: var(--on-pad, var(--md-sys-color-on-primary));
  font-weight: 600; line-height: 20px;
}
.menu .colour-auto::after { border-radius: inherit; }
.colour-auto-sub { font-size: 12px; line-height: 16px; font-weight: 400; }
.colour-pads { display: grid; grid-template-columns: repeat(4, 44px); gap: 8px; }
.menu .colour-pad, .menu .colour-pad[aria-checked="true"] {
  display: block; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-pad); background: var(--pad, #888);
}
.menu .colour-pad::after { border-radius: inherit; background: #fff; }
.menu .colour-pad:focus-visible, .menu .colour-auto:focus-visible { outline: 2px solid var(--md-sys-color-on-surface); outline-offset: 7px; }
.menu .colour-pad[aria-checked="true"], .menu .colour-pad.is-today, .menu .colour-auto[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--md-sys-color-surface-container), 0 0 0 4px #fff, 0 0 0 5.5px var(--ring-edge);
}

/* --- shared surfaces -------------------------------------------------------------------- */

.card, .hardware-card, .selection, .welcome-card {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--r);
}
.card { padding: 20px 20px 12px; scroll-margin-top: calc(var(--bar-height) + 16px); }
.card > h2, .selection h2 { font-size: 22px; line-height: 28px; font-weight: 500; }
.card .summary { margin: 6px 0 12px; color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 20px; }

.banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.banner[hidden] { display: none; }

.footer {
  max-width: var(--page-max); width: 100%; margin: 32px auto 0; padding: 20px 16px 28px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 18px;
}
.footer p { margin: 0 0 4px; }
.noscript { padding: 24px; }

.snackbar {
  position: fixed; left: 50%; bottom: 24px; z-index: 40;
  max-width: min(560px, calc(100vw - 32px)); padding: 14px 16px; border-radius: var(--r);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  box-shadow: var(--md-sys-elevation-3); font-size: 14px;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: opacity var(--md-sys-motion-short) linear, transform var(--md-sys-motion-medium) var(--md-sys-motion-easing);
}
.snackbar.show { opacity: 1; transform: translate(-50%, 0); }
.snackbar:empty { display: none; }

/* hardware button names, wherever they appear */
.key {
  display: inline-block; padding: 3px 7px; border-radius: var(--r-s);
  background: var(--md-sys-color-surface-container-highest);
  box-shadow: inset 0 -1px 0 var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
  font: 600 11.5px/14px var(--md-ref-typeface); letter-spacing: .04em; white-space: nowrap;
}
.key.shift { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); box-shadow: none; }

/* --- manual ----------------------------------------------------------------------------- */

.manual-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  max-width: var(--page-max); margin: 0 auto; padding: 16px 16px 0;
}

.segmented {
  display: inline-flex; flex: none; height: 40px;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--r); overflow: hidden;
}
.segmented button {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border: 0; background: transparent; cursor: pointer;
  color: var(--md-sys-color-on-surface); font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
}
.segmented button + button { border-left: 1px solid var(--md-sys-color-outline); }
.segmented button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; }
.segmented button:hover::after { opacity: .08; }
.segmented button:focus-visible { outline-offset: -3px; }
.segmented .check { width: 18px; height: 18px; display: none; }
.segmented button[aria-checked="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.segmented button[aria-checked="true"] .check { display: block; }

.search-bar {
  display: flex; align-items: center; gap: 12px; flex: 1 1 280px; min-width: 0;
  height: 48px; padding: 0 16px; border-radius: var(--r);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  cursor: text;
}
.search-bar:focus-within { outline: var(--focus-ring); outline-offset: 0; }
.search-bar input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none;
  color: var(--md-sys-color-on-surface); font: inherit; font-size: 16px; line-height: 24px;
}
.search-bar input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
.search-hint {
  font-size: 12px; padding: 1px 7px; border-radius: var(--r-s);
  border: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant);
}
@media (hover: none) { .search-hint { display: none; } }
.search-hint[hidden] { display: none; }
.search-bar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-clear { margin-right: -10px; }
.search-clear[hidden] { display: none; }
.cheatsheet-button { flex: none; }
.cheatsheet-button .icon { width: 20px; height: 20px; }

/* a section's note (features.json `notes`), e.g. the MASCHINE plug-in in Getting started */
.card .manual-note { margin: 0 0 12px; }
.manual-note p { margin: 0; }
.manual-note strong { font-weight: 600; }
.manual-notes { margin-top: 4px; }

/* search results: the matches grouped under their sections, the matched words marked */
.reference [hidden] { display: none !important; }
.search-results { display: flex; flex-direction: column; gap: 12px; }
.search-count { margin: 4px 4px 0; color: var(--md-sys-color-on-surface-variant); }
.search-count strong { color: var(--md-sys-color-on-surface); font-weight: 600; }
.search-group { padding-top: 14px; }
.search-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 6px; }
.search-group-head h2 { font-size: 18px; line-height: 24px; padding-top: 6px; }
.search-open { flex: none; min-height: 36px; }
mark.hit {
  padding: 0 1px; margin: 0 -1px; border-radius: var(--r-xs); color: inherit;
  background: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
  box-shadow: inset 0 -2px 0 var(--md-sys-color-primary);
}
.search-empty h2 { margin-bottom: 2px; }
.search-empty .summary { max-width: 60ch; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.suggestion {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--r);
  background: transparent; color: var(--md-sys-color-on-surface-variant); cursor: pointer; font-size: 14px; font-weight: 500;
}
.suggestion .key { padding: 2px 6px; }
.suggestion::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; }
.suggestion:hover::after, .suggestion:focus-visible::after { opacity: .08; }
.search-empty .actions { margin-bottom: 8px; }
#view-manual.searching .welcome-card { display: none; }
/* one column: while searching, the results come straight under the search field */
@media (max-width: 1100px) {
  #view-manual.searching .hardware { display: none; }
}

.manual-layout {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px;
  max-width: var(--page-max); margin: 0 auto; padding: 16px;
}
.manual-layout > * { min-width: 0; }
.hardware { position: sticky; top: calc(var(--bar-height) + 16px); align-self: start; }
/* the drawing is a control surface: clicks and drags never select its printed text */
.hardware-card { padding: 12px; -webkit-user-select: none; user-select: none; }
#device, .hw-drawing { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; }
/* side by side, the sticky drawing stays within the window height (a tall layout is centred) */
@media (min-width: 1101px) {
  #device { max-height: calc(100vh - var(--bar-height) - 56px); }
}
.hint { margin: 12px 4px 0; color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; }

/* hardware drawing: flat schematic (layouts without real: true) */
.hw-body { fill: var(--hw-body); }
.hw-control { cursor: pointer; outline: none; }
.hw-drawing:not(.real) .hw-control rect, .hw-drawing:not(.real) .hw-control circle { fill: var(--hw-button); stroke: transparent; stroke-width: 2.5; transition: fill .12s, stroke .12s; }
.hw-drawing:not(.real) .hw-control.pad rect { fill: var(--hw-pad); }
.hw-control.screen { cursor: default; }
.hw-drawing:not(.real) .hw-control.screen rect { fill: var(--hw-screen); stroke: #2b2a2e; stroke-width: 1.5; }
.hw-drawing:not(.real) .hw-control.strip rect { fill: #1b1a1d; stroke: #3d3c40; stroke-width: 1; }
.hw-drawing:not(.real) .hw-control.encoder circle.ring { fill: #1f1e21; stroke: #4a494d; stroke-width: 3; }
.hw-drawing:not(.real) .hw-control.knob circle { fill: #2c2b2e; stroke: #4a494d; stroke-width: 2; }
.hw-drawing:not(.real) .hw-control text { fill: var(--hw-button-text); font: 600 11px var(--md-ref-typeface); pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.hw-drawing:not(.real) .hw-control.pad text { fill: #8f8c92; font-size: 13px; }
.hw-drawing:not(.real) .hw-control.screen text { fill: #5e5c62; font-size: 12px; letter-spacing: .1em; }
.hw-drawing:not(.real) .hw-control:hover rect, .hw-drawing:not(.real) .hw-control:hover circle { stroke: var(--hw-related); }
.hw-drawing:not(.real) .hw-control:focus-visible rect, .hw-drawing:not(.real) .hw-control:focus-visible circle { stroke: #ffffff; stroke-width: 3.5; }
.hw-drawing:not(.real) .hw-control.related rect, .hw-drawing:not(.real) .hw-control.related circle { fill: color-mix(in srgb, var(--hw-related) 35%, var(--hw-button)); stroke: var(--hw-related); }
.hw-drawing:not(.real) .hw-control.selected rect, .hw-drawing:not(.real) .hw-control.selected circle { fill: var(--hw-active); stroke: #ffd1ad; }
.hw-drawing:not(.real) .hw-control.selected text, .hw-drawing:not(.real) .hw-control.related text { fill: #fff; }
/* pads light in their MASCHINE sound colour (PAD_COLORS in layouts.js) */
.hw-drawing:not(.real) .hw-control.pad.related rect { fill: color-mix(in srgb, var(--pad-color) 45%, var(--hw-pad)); stroke: var(--pad-color); }
.hw-drawing:not(.real) .hw-control.pad.selected rect { fill: var(--pad-color); stroke: #fff; }
.hw-drawing:not(.real) .hw-control.pad.selected text { fill: #1c1b1d; }

/* hardware drawing: measured layouts (real: true) in the hardware's own look: a matte charcoal
   panel, soft-touch rubber caps with matte grey print (PLAY green, REC red, SHIFT boxed), a black
   encoder with a ridged band, the OLED as crisp pixels on flat black; unlit pads are milky translucent
   silicone with dark grey print, lit pads glow in their colour. */
.hw-drawing.real .hw-body { fill: url(#hw-body-fill); stroke: #161618; stroke-width: 1.5; }
.hw-drawing.real .hw-rim { fill: none; stroke: #ffffff; stroke-opacity: .13; stroke-width: 1.2; }
.hw-drawing.real .hw-dot { fill: #7d8ae6; opacity: .5; }
.hw-drawing.real text { pointer-events: none; }
.hw-drawing.real .cap { stroke: #08080a; stroke-width: 1.6; transition: fill .12s, stroke .12s; }
/* rubber caps (drawCap() in manual.js): shadow, cap (the sides) with a dark gap, top face, rim */
.hw-drawing.real .button .cap { fill: url(#hw-cap-fill); stroke: #111113; stroke-width: 1; }
.hw-drawing.real .cap-shadow { fill: #000; opacity: .4; pointer-events: none; }
.hw-drawing.real .cap-shadow.soft { opacity: .2; }
.hw-drawing.real .cap-face { fill: url(#hw-face-fill); pointer-events: none; }
.hw-drawing.real .cap-rim { fill: none; stroke: #fff; stroke-opacity: .13; stroke-width: .8; stroke-linecap: round; pointer-events: none; }
/* printed labels: a bold condensed capital line and the SHIFT function under it, matte grey */
.hw-drawing.real .label { fill: #9a9a9e; font: 700 9px var(--md-ref-typeface); letter-spacing: .025em; }
.hw-drawing.real .sublabel { fill: #8e8e92; font: 400 7.9px var(--md-ref-typeface); letter-spacing: .01em; }
/* condensed like the printed face: narrowed from the label's left edge */
.hw-drawing.real .label, .hw-drawing.real .sublabel { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.88); }
.hw-drawing.real .label.green { fill: #45c95a; }
.hw-drawing.real .label.red, .hw-drawing.real .sublabel.red { fill: #f2453a; }
.hw-drawing.real .label-box { fill: #a4a4a8; }
.hw-drawing.real .label.inverse { fill: #232325; }
.hw-drawing.real .icon-line { fill: none; stroke: #bdbdc1; stroke-width: 1.4; stroke-linecap: round; }
.hw-drawing.real .icon-fill { fill: #bdbdc1; }
.hw-drawing.real .icon-fill.arrow { fill: #85858a; }
.hw-drawing.real .pad .cap { fill: url(#hw-pad-fill); stroke: #8e8f94; stroke-width: 1; }
.hw-drawing.real .pad .sheen { fill: url(#hw-pad-sheen); opacity: 0; pointer-events: none; transition: opacity .12s; }
.hw-drawing.real .pad-print { fill: #4a4a4e; font: 500 8.4px var(--md-ref-typeface); dominant-baseline: middle; }
.hw-drawing.real .pad-number { font-weight: 800; }
.hw-drawing.real .pad-letter { font-weight: 700; text-anchor: end; }
/* the touch strip: a shallow groove in the panel: one flat dark grey, darker than the panel, square
   corners, a light shadow fading in from the left and right ends and a faint darker top edge; no shine, no
   gradient across the fill, no border */
.hw-drawing.real .strip .cap { fill: #1e1e21; stroke: none; rx: 0; }
.hw-drawing.real .strip-inner { fill: #1e1e21; rx: 0; pointer-events: none; }
.hw-drawing.real .strip .cap-shadow { display: none; }
.hw-drawing.real .strip-end, .hw-drawing.real .strip-edge { pointer-events: none; }
.hw-drawing.real .strip-edge { fill: #000; opacity: .14; }
.hw-drawing.real .encoder .ring { fill: #0d0d0e; stroke: #2e2e31; stroke-width: 1.5; transition: stroke .12s; }
.hw-drawing.real .encoder .knurl { fill: #19191b; stroke: #3c3c40; stroke-width: 3.2; stroke-dasharray: 1.3 1.5; }
.hw-drawing.real .encoder .knob-cap { fill: url(#hw-knob-fill); stroke: #050506; stroke-width: 1; }
/* the MIKRO's OLED: almost flat black in a thin, slightly lighter bezel line; crisp warm white pixels */
.hw-drawing.real .screen .bezel { fill: #0b0b0c; stroke: #2a2a2d; stroke-width: .9; }
.hw-drawing.real .screen .oled { fill: #070707; }
.hw-drawing.real .screen .pixels { fill: #f2f2ee; }
/* on screen the pixels and the glass are one image of whole device pixels (paintOled() in manual.js) */
.hw-drawing.real .screen .oled-image { image-rendering: pixelated; pointer-events: none; }
/* the MIKRO's screen magnified beside it (syncMagnifier() in manual.js), in the tour loupe's look */
.hw-control.screen.magnify { cursor: zoom-in; }
.oled-magnifier {
  position: fixed; z-index: 45; padding: 8px; border-radius: var(--r-xs); pointer-events: none;
  background: #070707; box-shadow: inset 0 0 0 1px #2a2a2d, var(--md-sys-elevation-3);
  animation: magnifier-in .12s linear;
}
.oled-magnifier[hidden] { display: none; }
.oled-magnifier canvas { display: block; image-rendering: pixelated; }
@keyframes magnifier-in { from { opacity: 0; } }
.hw-drawing.real:not(.cs-drawing) .screen.raster .pixels,
.hw-drawing.real:not(.cs-drawing) .screen.raster .oled { display: none; }
.cs-drawing .oled-image { display: none; }
/* MK3: the glossy display panel, the darker edge band, plain light display buttons, knobs with a
   dark skirt and lighter top, the dots around the encoder, and the colour screens */
.hw-drawing.real .hw-glass { fill: url(#hw-glass-fill); stroke: #000; stroke-width: 1; }
.hw-drawing.real .hw-edge { fill: #0b0b0c; opacity: .55; }
.hw-drawing.real .hw-mark { fill: #6a6a6e; }
.hw-drawing.real .button.light .cap { fill: url(#hw-light-fill); stroke: #6f777c; stroke-width: 1; }
.hw-drawing.real .knob .ring { fill: #0b0b0c; stroke: #2a2a2d; stroke-width: 1.4; transition: stroke .12s; }
.hw-drawing.real .knob-top { fill: url(#hw-knob-top); stroke: #050506; stroke-width: .8; pointer-events: none; }
.hw-drawing.real .encoder .knurl, .hw-drawing.real .encoder .knob-cap { pointer-events: none; }
.hw-drawing.real .screen .lcd { fill: #0c0c0e; stroke: #232327; stroke-width: 1; }
.hw-drawing.real .screen text { dominant-baseline: middle; font-family: var(--md-ref-typeface); }
/* MK3 group buttons are always lit dimly in their track colour, the selected track brighter */
.hw-drawing.real .button.lit .cap { fill: color-mix(in srgb, var(--lit-color) 30%, #2a2a2d); }
.hw-drawing.real .button.lit.lit-bright .cap { fill: color-mix(in srgb, var(--lit-color) 78%, #2a2a2d); }
.hw-drawing.real .button.lit.lit-bright .label { fill: #141416; }
/* choosing another group button makes that one the selected track: the first one dims again */
.hw-drawing.real:has(.button.lit.selected) .button.lit.lit-bright:not(.selected):not(.related) .cap { fill: color-mix(in srgb, var(--lit-color) 30%, #2a2a2d); }
.hw-drawing.real:has(.button.lit.selected) .button.lit.lit-bright:not(.selected):not(.related) .label { fill: #d4d4d8; }
/* pad demos: the pads as the selected mode lights them (dim / mid / bright, like the hardware):
   the milky pad tinted by its light and glowing a little, a darker edge in the same colour; a pad of a combo
   (related) or the selected pad keeps its own highlight */
.hw-drawing.real .pad.demo-dim:not(.selected):not(.related) .cap { fill: color-mix(in srgb, var(--demo-color) 42%, #e6e7e9); stroke: color-mix(in srgb, var(--demo-color) 40%, #808186); }
.hw-drawing.real .pad.demo-mid:not(.selected):not(.related) .cap { fill: color-mix(in srgb, var(--demo-color) 76%, #e6e7e9); stroke: color-mix(in srgb, var(--demo-color) 60%, #4a4a4e); }
.hw-drawing.real .pad.demo-dim:not(.selected):not(.related) .sheen { opacity: .35; }
.hw-drawing.real .pad.demo-mid:not(.selected):not(.related) .sheen { opacity: .45; }
.hw-drawing.real .pad.demo-bright:not(.selected):not(.related) .cap { fill: var(--demo-color); stroke: color-mix(in srgb, var(--demo-color) 65%, #1a1a1c); }
.hw-drawing.real .pad.demo-bright:not(.selected):not(.related) .sheen { opacity: .9; }
.hw-drawing.real .pad.demo-dim .pad-print { fill: #2e2e32; }
.hw-drawing.real .pad.demo-mid .pad-print, .hw-drawing.real .pad.demo-bright .pad-print { fill: #141416; }
/* states: hover / a combo's controls (related) / the selected control, lit like the hardware */
.hw-drawing.real .hw-control:hover .cap, .hw-drawing.real .hw-control:hover .ring { stroke: var(--hw-related); }
.hw-drawing.real .hw-control:focus-visible .cap, .hw-drawing.real .hw-control:focus-visible .ring { stroke: #fff; stroke-width: 2.4; }
.hw-drawing.real .pad:focus-visible .cap { stroke: var(--hw-active); }
.hw-drawing.real .button.related .cap { fill: color-mix(in srgb, var(--hw-related) 22%, #2c2c2f); stroke: var(--hw-related); }
.hw-drawing.real .button.selected .cap { fill: #4b4b50; stroke: var(--hw-active); stroke-width: 2.4; }
.hw-drawing.real .button.selected .label, .hw-drawing.real .button.related .label { fill: #fff; }
.hw-drawing.real .button.selected .sublabel, .hw-drawing.real .button.related .sublabel { fill: #d0d0d4; }
.hw-drawing.real .button.selected .label.inverse, .hw-drawing.real .button.related .label.inverse { fill: #121214; }
/* PLAY and REC keep their colour and light up brighter, like the backlit buttons */
.hw-drawing.real .button.selected .label.green, .hw-drawing.real .button.related .label.green {
  fill: #6dff7f; filter: drop-shadow(0 0 2px rgb(109 255 127 / .65));
}
.hw-drawing.real .button.selected .label.red, .hw-drawing.real .button.related .label.red,
.hw-drawing.real .button.selected .sublabel.red, .hw-drawing.real .button.related .sublabel.red {
  fill: #ff6a5c; filter: drop-shadow(0 0 2px rgb(255 106 92 / .6));
}
.hw-drawing.real .button.selected .icon-fill { fill: #fff; }
.hw-drawing.real .button.selected .icon-line { stroke: #fff; }
.hw-drawing.real .pad.related .cap { fill: color-mix(in srgb, var(--pad-color) 70%, #cfd0d3); stroke: color-mix(in srgb, var(--pad-color) 60%, #1a1a1c); stroke-width: 1.6; }
.hw-drawing.real .pad.related .sheen { opacity: .35; }
.hw-drawing.real .pad.selected .cap { fill: var(--pad-color); stroke: #fff; stroke-width: 2; }
.hw-drawing.real .pad.selected .sheen { opacity: .9; }
.hw-drawing.real .pad.selected .pad-print, .hw-drawing.real .pad.related .pad-print { fill: #141416; }
/* a combo whose own token has a pad demo (SOLO + PAD: the track view): its pads show that demo,
   outlined as the combo's pads; pads the demo leaves unlit stay unlit */
.hw-drawing.real.combo-demo .pad.related:not(.selected) .cap { fill: url(#hw-pad-fill); stroke: var(--hw-related); }
.hw-drawing.real.combo-demo .pad.related:not(.selected) .sheen { opacity: 0; }
.hw-drawing.real.combo-demo .pad.related:not(.selected) .pad-print { fill: #4a4a4e; }
.hw-drawing.real.combo-demo .pad.related.demo-dim:not(.selected) .cap { fill: color-mix(in srgb, var(--demo-color) 42%, #e6e7e9); }
.hw-drawing.real.combo-demo .pad.related.demo-mid:not(.selected) .cap { fill: color-mix(in srgb, var(--demo-color) 76%, #e6e7e9); }
.hw-drawing.real.combo-demo .pad.related.demo-dim:not(.selected) .sheen { opacity: .35; }
.hw-drawing.real.combo-demo .pad.related.demo-mid:not(.selected) .sheen { opacity: .45; }
.hw-drawing.real.combo-demo .pad.related.demo-bright:not(.selected) .cap { fill: var(--demo-color); }
.hw-drawing.real.combo-demo .pad.related.demo-bright:not(.selected) .sheen { opacity: .9; }
.hw-drawing.real.combo-demo .pad.related.demo-dim:not(.selected) .pad-print { fill: #2e2e32; }
.hw-drawing.real.combo-demo .pad.related.demo-mid:not(.selected) .pad-print,
.hw-drawing.real.combo-demo .pad.related.demo-bright:not(.selected) .pad-print { fill: #141416; }
/* a pad lit by its track's level (the mixer, demo-meter): the brightness moves gently around its
   level, each pad at its own pace (--meter-period / --meter-delay from manual.js); still under
   reduced motion */
@property --meter { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@keyframes pad-meter { 0%, 100% { --meter: .15; } 22% { --meter: .85; } 48% { --meter: .4; } 70% { --meter: 1; } 86% { --meter: .55; } }
@media (prefers-reduced-motion: no-preference) {
  .hw-drawing.real .pad.demo-meter { animation: pad-meter var(--meter-period, 2.4s) ease-in-out var(--meter-delay, 0s) infinite; }
  .hw-drawing.real .pad.demo-meter .cap, .tour-device .pad.demo-meter .cap { transition: none; }  /* the animation is the motion */
  .hw-drawing.real .pad.demo-meter.demo-dim:not(.selected):not(.related) .cap,
  .hw-drawing.real.combo-demo .pad.related.demo-meter.demo-dim:not(.selected) .cap { fill: color-mix(in srgb, var(--demo-color) calc(34% + var(--meter) * 16%), #e6e7e9); }
  .hw-drawing.real .pad.demo-meter.demo-mid:not(.selected):not(.related) .cap,
  .hw-drawing.real.combo-demo .pad.related.demo-meter.demo-mid:not(.selected) .cap { fill: color-mix(in srgb, var(--demo-color) calc(66% + var(--meter) * 20%), #e6e7e9); }
  .hw-drawing.real .pad.demo-meter.demo-bright:not(.selected):not(.related) .cap,
  .hw-drawing.real.combo-demo .pad.related.demo-meter.demo-bright:not(.selected) .cap { fill: color-mix(in srgb, var(--demo-color) calc(84% + var(--meter) * 16%), #e6e7e9); }
}
.hw-drawing.real .encoder.related .ring, .hw-drawing.real .knob.related .ring, .hw-drawing.real .strip.related .cap { stroke: var(--hw-related); stroke-width: 2.2; }
.hw-drawing.real .encoder.selected .ring, .hw-drawing.real .knob.selected .ring, .hw-drawing.real .strip.selected .cap { stroke: var(--hw-active); stroke-width: 2.6; }
/* light caps and buttons with a lit colour (MK3 group buttons) light up like the hardware */
.hw-drawing.real .button.light.related .cap { fill: color-mix(in srgb, var(--hw-related) 45%, #e9edf0); }
.hw-drawing.real .button.light.selected .cap { fill: #fff; }
.hw-drawing.real .button.lit.related .cap { fill: color-mix(in srgb, var(--lit-color) 88%, #2a2a2d); stroke: var(--hw-related); stroke-width: 2.2; }
.hw-drawing.real .button.lit.selected .cap { fill: var(--lit-color); stroke: #fff; stroke-width: 2; }
.hw-drawing.real .button.lit.selected .label, .hw-drawing.real .button.lit.related .label { fill: #141416; }
.hw-drawing.real .strip.selected .strip-inner, .hw-drawing.real .strip.related .strip-inner { fill: color-mix(in srgb, var(--hw-related) 25%, #1e1e21); }
.badge circle { fill: var(--hw-active); stroke: #fff; stroke-width: 2; }
.badge text { fill: #fff; font: 700 12px var(--md-ref-typeface); text-anchor: middle; dominant-baseline: central; }

.reference { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.welcome-card {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  padding: 20px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.welcome-card[hidden] { display: none; }
.welcome-card h2 { font-size: 22px; line-height: 28px; }
.welcome-card p { margin: 4px 0 0; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.welcome-card .btn-text { color: inherit; }

.selection { padding: 16px 16px 8px; background: var(--md-sys-color-surface-container); box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.selection[hidden] { display: none; }
.selection-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--r);
  color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-size: 14px; font-weight: 500;
}
.toc a::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; }
.toc a:hover::after { opacity: .08; }

#sections { display: flex; flex-direction: column; gap: 12px; }

.device-tag {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-s);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .04em; vertical-align: 3px;
}

.items { list-style: none; margin: 0 -8px; padding: 0; }
.items li {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 12px; align-items: baseline;
  padding: 10px 8px; border-radius: var(--r); cursor: default;
}
.items li + li { box-shadow: 0 -1px 0 var(--md-sys-color-outline-variant); }
.items li::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--md-sys-color-on-surface); opacity: 0; }
.items li:hover::after { opacity: .06; }
.items li .section-label { grid-column: 1 / -1; margin-bottom: -6px; color: var(--md-sys-color-primary); font-size: 12px; line-height: 16px; font-weight: 500; }
.combo { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.plus { color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.does { color: var(--md-sys-color-on-surface); }
.context { color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.empty { color: var(--md-sys-color-on-surface-variant); padding: 8px; }

/* SHIFT + pads grid: drawn like the pads */
.shift-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 14px; }
.shift-grid button {
  position: relative; isolation: isolate;
  min-height: 56px; padding: 6px 4px; border: 0; border-radius: var(--r-s);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface);
  font-size: 12px; line-height: 15px; font-weight: 500; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  overflow-wrap: anywhere;
}
.shift-grid button small { color: var(--md-sys-color-on-surface-variant); font-size: 10px; font-weight: 400; }
.shift-grid button::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; }
.shift-grid button:hover::after, .shift-grid button:focus-visible::after { opacity: .08; }

.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 20px; }
th, td { text-align: left; padding: 10px 8px; vertical-align: top; }
th { color: var(--md-sys-color-on-surface-variant); font-weight: 500; font-size: 12px; letter-spacing: .04em; }
tbody tr { box-shadow: 0 -1px 0 var(--md-sys-color-outline-variant); }
td:first-child { font-weight: 500; }
#changes-table td:first-child, .swatches td:first-child { white-space: nowrap; }
.swatches { margin: 4px 0 14px; }
.swatches .summary { margin-top: 0; }
.swatch {
  display: inline-block; width: 16px; height: 16px; margin-right: 10px; border-radius: var(--r-full);
  vertical-align: -3px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2);
}
.swatch-table .swatch-kind { min-width: 9em; }
/* Phones: colour and sound on one line, the words under them. */
@media (max-width: 600px) {
  .swatch-table thead { display: none; }
  .swatch-table tr { display: grid; grid-template-columns: auto 1fr; }
  .swatch-table .swatch-kind { min-width: 0; }
  .swatch-table .swatch-words { grid-column: 1 / -1; padding-top: 0; }
}
.swatches code {
  display: inline-block; margin: 0 2px 4px 0; padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--md-sys-color-surface-container-highest); font-size: 12px;
}

/* --- setup wizard ----------------------------------------------------------------------- */

.setup { max-width: 1120px; margin: 0 auto; padding: 24px 16px 8px; }
.setup-hero { margin: 8px 0 24px; }
.eyebrow { margin: 0 0 4px; color: var(--md-sys-color-primary); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .02em; }
.setup-title { font-size: 36px; line-height: 44px; font-weight: 500; letter-spacing: 0; }
.setup-intro { margin: 8px 0 0; max-width: 62ch; color: var(--md-sys-color-on-surface-variant); font-size: 16px; line-height: 24px; }

/* choices */
.choices-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.choice-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pad-art-wrap {
  padding: 18px; border-radius: var(--r); background: var(--hw-body);
  box-shadow: var(--md-sys-elevation-2);
}
.pad-art { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pad-art-pad {
  position: relative; aspect-ratio: 1; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--pad) 50%, var(--hw-pad));
}
.pad-art-pad::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--pad); box-shadow: 0 0 22px -4px var(--pad);
  opacity: 0; animation: pad-glow 5.6s var(--delay) infinite ease-in-out;
}
@keyframes pad-glow { 0%, 100% { opacity: 0; } 10% { opacity: 1; } 38% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pad-art-pad::after { animation: none; opacity: .75; }
}
@media (max-width: 900px) {
  .choices-layout { grid-template-columns: minmax(0, 1fr); }
  .pad-art-wrap { display: none; }
}
.choice-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-group legend {
  display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 10px;
  font-size: 16px; line-height: 24px; font-weight: 500;
}
.choice-group legend .num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant);
  font-size: 13px; font-weight: 600;
}
.choice-group.answered legend .num { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.choice-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.choice {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px 16px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--r);
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface);
  text-align: left; cursor: pointer;
  transition: background-color var(--md-sys-motion-short) linear, border-color var(--md-sys-motion-short) linear;
}
.choice::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; }
.choice:hover::after { opacity: .06; }
.choice .radio {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid var(--md-sys-color-on-surface-variant); border-radius: var(--r-full);
}
.choice .radio::before { content: ""; width: 10px; height: 10px; border-radius: var(--r-full); background: transparent; }
.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-label { font-size: 16px; line-height: 22px; font-weight: 500; }
.choice-hint { color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; }
.choice-detected { color: var(--md-sys-color-primary); font-size: 12px; line-height: 16px; font-weight: 500; }
.choice[aria-checked="true"] {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.choice[aria-checked="true"] .choice-hint { color: inherit; opacity: .85; }
.choice[aria-checked="true"] .radio { border-color: var(--md-sys-color-primary); }
.choice[aria-checked="true"] .radio::before { background: var(--md-sys-color-primary); }
.choice:focus-visible { outline-offset: 2px; }

.choice-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 4px; }
.choice-actions .hint-text { color: var(--md-sys-color-on-surface-variant); font-size: 12px; }

/* the two guides (#setup): text | video */
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide-cards.single { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.guide-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 220px; padding: 24px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--r);
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface); text-decoration: none;
  transition: border-color var(--md-sys-motion-short) linear;
}
.guide-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; }
.guide-card:hover { border-color: var(--md-sys-color-primary); }
.guide-card:hover::after { opacity: .04; }
.guide-card:focus-visible { outline-offset: 2px; }
.guide-card-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-primary);
}
.guide-card-icon .icon { width: 26px; height: 26px; }
.guide-card-text { display: flex; flex-direction: column; gap: 4px; }
.guide-card-title { font-size: 22px; line-height: 28px; font-weight: 500; }
.guide-card-sub { color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 20px; }
.guide-card-action { margin-top: auto; pointer-events: none; }
.setup-section { margin-top: 24px; max-width: 820px; }
.setup-section .step-title { font-size: 22px; line-height: 28px; }
.guide-more { margin: 16px 0 0; }
@media (max-width: 600px) {
  .guide-cards { grid-template-columns: minmax(0, 1fr); }
  .guide-card { min-height: 0; padding: 20px; }
}

/* the video guide (#setup/video/<os>/<device>) */
.video-frame {
  margin-top: 16px; overflow: hidden; border-radius: var(--r);
  background: #000; aspect-ratio: 16 / 9;
}
.setup-video { display: block; width: 100%; height: 100%; background: #000; }
.video-card .note { margin-top: 16px; }
.video-missing[hidden] { display: none; }
.video-card .step-nav { margin-top: 20px; }

/* stepper */
.wizard { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.wizard.single { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.wizard-summary {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--r);
  color: var(--md-sys-color-on-surface-variant); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.chip .icon { width: 18px; height: 18px; }
.wizard-summary .btn-text { height: 32px; min-height: 32px; }

.progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.progress-track {
  flex: 1; height: 4px; border-radius: var(--r-xs); overflow: hidden;
  background: var(--md-sys-color-surface-container-highest);
}
.progress-bar {
  display: block; height: 100%; border-radius: var(--r-xs); background: var(--md-sys-color-primary);
  transition: width var(--md-sys-motion-medium) var(--md-sys-motion-easing);
}
.progress-label { color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }

.step-list-wrap { position: sticky; top: calc(var(--bar-height) + 16px); }
.step-list-toggle { display: none; }
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step-list li { position: relative; }
.step-list li:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 40px; bottom: -8px; width: 2px; border-radius: var(--r-xs);
  background: var(--md-sys-color-outline-variant);
}
.step-list li.done:not(:last-child)::before { background: var(--md-sys-color-primary); }
.step-link {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px 6px 12px; margin-bottom: 8px;
  border-radius: var(--r); color: var(--md-sys-color-on-surface-variant); text-decoration: none;
  font-size: 14px; line-height: 20px; font-weight: 500;
}
.step-link::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; }
.step-link:hover::after { opacity: .08; }
.step-dot {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full);
  border: 2px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface);
  font-size: 13px; font-weight: 600; color: var(--md-sys-color-on-surface-variant);
}
.step-dot .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.done .step-dot { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.current .step-link { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.current .step-dot { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

.step-card {
  min-width: 0; padding: 28px 28px 20px; border-radius: var(--r);
  background: var(--md-sys-color-surface-container-low);
}
.step-eyebrow { margin: 0 0 4px; color: var(--md-sys-color-primary); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.step-title { font-size: 28px; line-height: 36px; font-weight: 500; outline: none; }
.step-body { margin-top: 16px; font-size: 16px; line-height: 24px; max-width: 70ch; }
.step-body > * { margin: 0 0 16px; }
.step-body > :last-child { margin-bottom: 0; }
.step-body h3 { margin-top: 24px; font-size: 16px; line-height: 24px; font-weight: 600; }
.step-body ol, .step-body ul { padding-left: 0; list-style: none; }
.step-body ol { counter-reset: li; }
.step-body ol > li { position: relative; padding-left: 40px; margin-bottom: 12px; counter-increment: li; }
.step-body ol > li::before {
  content: counter(li); position: absolute; left: 0; top: -1px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface);
  font-size: 13px; font-weight: 600;
}
.step-body ul > li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.step-body ul > li::before {
  content: ""; position: absolute; left: 6px; top: 9px; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--md-sys-color-primary);
}
.step-body code {
  padding: 1px 6px; border-radius: var(--r-xs);
  background: var(--md-sys-color-surface-container-highest); font-size: .88em; overflow-wrap: anywhere;
}
.step-body strong { font-weight: 600; }

.note {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
  font-size: 14px; line-height: 20px;
}
.note .icon { margin-top: 0; color: var(--md-sys-color-tertiary); }
.note.important { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.note.important .icon { color: var(--md-sys-color-primary); }
.note.coming { background: transparent; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.note.coming .icon { color: var(--md-sys-color-on-surface-variant); }
.note code { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }

.copy-list { display: flex; flex-direction: column; gap: 8px; }
.copy-field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 10px 8px 10px 16px; border-radius: var(--r);
  background: var(--md-sys-color-surface-container-highest);
}
.copy-label { grid-column: 1 / -1; color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; font-weight: 500; }
.copy-value { font-family: var(--md-ref-typeface-mono); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; user-select: all; }
.copy-field .btn { min-height: 36px; padding: 0 14px 0 12px; }
.copy-field .btn.copied { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.kv dt, .kv dd { margin: 0; padding: 10px 16px; font-size: 14px; line-height: 20px; }
.kv dt { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }
.kv dd { font-family: var(--md-ref-typeface-mono); overflow-wrap: anywhere; }
.kv dt:not(:first-of-type), .kv dd:not(:first-of-type) { box-shadow: 0 -1px 0 var(--md-sys-color-outline-variant); }

.faq { display: flex; flex-direction: column; gap: 8px; }
.faq details { border-radius: var(--r); background: var(--md-sys-color-surface-container-high); }
.faq summary {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 16px; border-radius: var(--r);
  cursor: pointer; list-style: none; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; }
.faq summary:hover::after { opacity: .06; }
.faq summary .icon { transition: transform var(--md-sys-motion-short) var(--md-sys-motion-easing); color: var(--md-sys-color-on-surface-variant); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .faq-answer { padding: 0 16px 14px; }
.faq .faq-answer p { margin: 0 0 6px; font-size: 14px; line-height: 20px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.step-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--md-sys-color-outline-variant);
}
.step-nav .spacer { flex: 1; }
.key-hint { color: var(--md-sys-color-on-surface-variant); font-size: 12px; }
.key-hint kbd { padding: 0 6px; border-radius: var(--r-xs); border: 1px solid var(--md-sys-color-outline-variant); font-size: 11px; }
@media (hover: none), (max-width: 720px) { .key-hint { display: none; } }

.load-error { padding: 16px; border-radius: var(--r); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

/* --- the Tour: a self-playing card per section (js/tour.js, js/highlights.js) -------------- */

.tour { max-width: var(--page-max); margin: 0 auto; padding: 20px 16px 8px; }
.tour-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 4px 0 16px; }
.tour-title { font-size: 32px; line-height: 40px; font-weight: 500; }
.tour-intro { margin: 6px 0 0; max-width: 70ch; color: var(--md-sys-color-on-surface-variant); font-size: 16px; line-height: 24px; }
.tour-toc { margin: 0 0 8px; }
.toc a.active { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.tour-toc a[hidden] { display: none; }

/* a card: the section's title and a short line, the stage, the controls, the full section */
.tour-cards { display: flex; flex-direction: column; gap: 40px; margin-top: 24px; }
.tour-card { scroll-margin-top: 0; }  /* the page's scroll-padding-top keeps it clear of the app bar */
.tour-card[hidden] { display: none; }
.tour-card-head { margin: 0 0 14px; }
.tour-card-title { font-size: 24px; line-height: 32px; font-weight: 500; }
.tour-card-intro { margin: 4px 0 0; max-width: 80ch; color: var(--md-sys-color-on-surface-variant); font-size: 15px; line-height: 22px; }
.tour-card-more { margin: 4px 0 0; text-align: center; }

/* the stage: the controller large in a soft spotlight, the callout beside or under it */
.tour-stage {
  position: relative; padding: 28px 16px; border-radius: var(--r);
  background:
    radial-gradient(ellipse 60% 70% at 50% 46%, color-mix(in srgb, var(--md-sys-color-primary) 9%, transparent), transparent 72%),
    var(--md-sys-color-surface-container-low);
  -webkit-user-select: none; user-select: none;
}
.tour-device-wrap { position: relative; }
.tour-device { max-height: calc(100vh - var(--bar-height) - 320px); min-height: 160px; overflow: visible; }
.tour-device .hw-body { filter: drop-shadow(0 18px 28px rgb(0 0 0 / .32)); }
@media (min-width: 1180px) {
  /* room beside the controller for the callout */
  .tour-device-wrap { padding: 0 clamp(270px, 20vw, 380px); }
}

/* the glowing controls: an outline that breathes, lit like the manual's related controls */
.tour-outline {
  fill: none; stroke: var(--hw-active); stroke-width: 2.4; pointer-events: none;
  filter: drop-shadow(0 0 5px rgb(239 103 18 / .85));
  animation: tour-breathe 1.8s ease-in-out infinite;
}
@keyframes tour-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.tour-stage.held .tour-outline, .tour-stage.held .tour-device .pad.demo-meter,
.tour-stage:not(.playing) .tour-outline, .tour-stage:not(.playing) .tour-device .pad.demo-meter { animation-play-state: paused; }
.tour-turn { opacity: .95; transition: opacity .2s linear; pointer-events: none; }
.tour-turn.tick { opacity: .6; }
.tour-turn path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.tour-turn polygon { fill: #fff; }
.tour-device .knurl { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--md-sys-motion-easing); }
.tour-device .pad .cap, .tour-device .pad .sheen { transition-duration: .05s; }
/* lit buttons (PLAY while playing, REC while recording, the mode being turned) */
.hw-drawing.real .button.tour-on .cap { fill: #56565b; }
.hw-drawing.real .button.tour-on .label { fill: #fff; }
.hw-drawing.real .button.tour-on .label.green { fill: #6dff7f; filter: drop-shadow(0 0 2px rgb(109 255 127 / .65)); }
.hw-drawing.real .button.tour-on .label.red, .hw-drawing.real .button.tour-on .sublabel.red { fill: #ff6a5c; filter: drop-shadow(0 0 2px rgb(255 106 92 / .6)); }
.hw-drawing.real .encoder.tour-on .ring { stroke: #fff; stroke-width: 2.6; }
/* the touch strip's LEDs as a progress bar */
.hw-drawing.real .hw-dot.on { opacity: 1; filter: drop-shadow(0 0 2px currentColor); }

/* the callout: an elevated card; beside the controller with a leader line on wide windows,
   under it with an arrow on narrow ones */
.tour-bubble {
  position: relative; z-index: 2; max-width: 640px; margin: 22px auto 0; padding: 18px 20px 20px;
  border-radius: var(--r); border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-bright); color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-3);
  transition: opacity .18s linear, transform .3s var(--md-sys-motion-easing);
}
.tour-stage:not(.shown) .tour-bubble { visibility: hidden; }
.tour-stage.wide .tour-bubble { position: absolute; margin: 0; max-width: none; }
.tour-stage.narrow .tour-bubble::before {
  content: ""; position: absolute; top: -9px; left: var(--arrow-x, 50%); width: 16px; height: 16px; margin-left: -8px;
  background: inherit; border: 1px solid var(--md-sys-color-outline-variant); border-right: 0; border-bottom: 0;
  border-radius: var(--r-xs) 0 0 0; transform: rotate(45deg);
}
.tour-stage.changing .tour-bubble { opacity: 0; transform: translateY(8px); }
.tour-count { margin: 0 0 10px; color: var(--md-sys-color-primary); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tour-combo { font-size: inherit; }
.tour-combo .combo { gap: 6px; }
.tour-combo .key { padding: 5px 10px; border-radius: var(--r-s); font-size: 15px; line-height: 20px; }
.tour-combo .plus { font-size: 15px; }
.tour-text { margin: 12px 0 0; font-size: 16px; line-height: 24px; }
.tour-context { font-weight: 600; }
/* every step's combo and text stacked in one place, the current one shown: the callout keeps
   the size of the longest, so a card doesn't jump between steps */
.tour-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
.tour-stack > * { grid-area: 1 / 1; visibility: hidden; }
.tour-stack > .current { visibility: visible; }
.tour-texts > .tour-text { margin: 12px 0 0; }
/* the MIKRO's screen, magnified (its 128 x 32 pixels; syncLoupe() in highlights.js) */
.tour-loupe {
  display: block; box-sizing: content-box; margin-top: 14px; padding: 8px; image-rendering: pixelated;
  border-radius: var(--r-xs); background: #070707; box-shadow: inset 0 0 0 1px #2a2a2d, var(--md-sys-elevation-1);
}
.tour-loupe[hidden] { display: none; }

.tour-leader { position: absolute; inset: 0; z-index: 1; display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .18s linear; }
.tour-stage.wide .tour-leader { display: block; }
.tour-stage.changing .tour-leader { opacity: 0; }
.tour-leader-line { fill: none; stroke: var(--hw-active); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset .5s var(--md-sys-motion-easing) .12s; }
.tour-leader-start { fill: var(--hw-active); }
.tour-leader-end { fill: var(--hw-active); stroke: #fff; stroke-width: 2; }

/* progress: a dot per highlight, the current one a pill that fills while it plays */
.tour-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 16px; }
/* previous / pause / next: one group, so they never wrap apart */
.tour-buttons { display: flex; align-items: center; gap: 4px; }
.tour-dots { display: flex; align-items: center; }
.tour-dot {
  position: relative; display: grid; place-items: center; width: 22px; height: 32px; padding: 0;
  border: 0; background: transparent; cursor: pointer; transition: width var(--md-sys-motion-medium) var(--md-sys-motion-easing);
}
.tour-dot::before {
  content: ""; width: calc(100% - 12px); height: 8px; border-radius: var(--r-full);
  background: var(--md-sys-color-outline-variant); transition: background-color var(--md-sys-motion-short) linear;
}
.tour-dot:hover::before { background: var(--md-sys-color-outline); }
.tour-dot:focus-visible { outline-offset: -4px; border-radius: var(--r-s); }
.tour-dot.active { width: 48px; }
.tour-dot.active::before { background: color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent); }
.tour-dot-fill {
  position: absolute; left: 6px; right: 6px; top: 50%; height: 8px; margin-top: -4px; border-radius: var(--r-full);
  background: var(--md-sys-color-primary); transform-origin: left center; transform: scaleX(0); opacity: 0;
}
.tour-dot.active .tour-dot-fill { opacity: 1; }
/* a card with many steps: narrower dots, so they fit beside the buttons on a phone */
.tour-dots.many .tour-dot { width: 16px; }
.tour-dots.many .tour-dot::before { width: calc(100% - 8px); }
.tour-dots.many .tour-dot.active { width: 34px; }
.tour-dots.many .tour-dot-fill { left: 4px; right: 4px; }
.tour-status { min-width: 56px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tour-banner { max-width: 640px; margin: 12px auto 0; }
.tour-more { margin: 8px 0 0; text-align: center; }
.tour-link { margin: 0 0 12px; }

/* --- cheat sheet ------------------------------------------------------------------------- */
/* On screen a sheet of paper (white in both themes, like the print); printed by /* --- Highlights (js/best.js): one page at a time, the jump list beside it ------------------- */

.best { max-width: var(--page-max); margin: 0 auto; padding: 20px 16px 8px; }
.best-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
@media (min-width: 1100px) {
  .best-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; }
  .best-jump { position: sticky; top: calc(var(--bar-height) + 16px); max-height: calc(100vh - var(--bar-height) - 32px); overflow: auto; }
  .best-jump-head { pointer-events: none; }
  .best-jump-chev { display: none; }
  .best-jump-head::-webkit-details-marker { display: none; }
}
.best-jump { padding: 8px 0; }
.best-jump-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--md-sys-color-on-surface); list-style: none;
}
.best-jump-head::-webkit-details-marker { display: none; }
.best-jump-head .icon { color: var(--md-sys-color-primary); }
.best-jump-head .best-jump-chev { margin-left: auto; color: var(--md-sys-color-on-surface-variant); transition: transform var(--md-sys-motion-short) var(--md-sys-motion-easing); }
.best-jump[open] .best-jump-chev { transform: rotate(180deg); }
.best-jump-list { list-style: none; margin: 0; padding: 0 8px 8px; }
.best-jump-mode { margin: 8px 0 0; }
.best-jump-name {
  margin: 0; padding: 6px 8px 2px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em;
  color: var(--md-sys-color-on-surface-variant);
}
.best-jump-group { list-style: none; margin: 0; padding: 0; }
.best-jump-link {
  display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: var(--r-s);
  color: var(--md-sys-color-on-surface); text-decoration: none; font-size: 13px; line-height: 18px;
}
.best-jump-link:hover { background: var(--md-sys-color-surface-container-high); }
.best-jump-link.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.best-jump-num { flex: none; min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface-variant); }
.best-jump-link.active .best-jump-num { color: inherit; font-weight: 600; }
.best-page { min-width: 0; scroll-margin-top: calc(var(--bar-height) + 8px); }
.best-page-head { margin: 0 0 14px; }
.best-page-head .eyebrow { margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the heading keeps one height on every page (2 lines, 3 on a phone; a longer title ends in an
   ellipsis, the full text in its tooltip), so the previous / next buttons never move */
.best-title {
  font-size: 24px; line-height: 32px; font-weight: 500; max-width: 60ch; outline: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  height: 64px;
}
.best .tour-dots { display: none; }
/* the buttons in the stage, right under the drawing and above the callout */
.best .best-controls { position: relative; z-index: 2; margin-top: 16px; }
.best .tour-status { width: 64px; min-width: 0; }
/* only the current page's callout text takes room (the Tour keeps the longest step's size) */
.best .tour-stack > :not(.current) { display: none; }
.best-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 4px 0 0; }
@media (max-width: 600px) {
  .best-title { font-size: 20px; line-height: 28px; -webkit-line-clamp: 3; line-clamp: 3; height: 84px; }
}
/* four tabs on a phone: the icon above the label */
@media (max-width: 480px) {
  .nav-tab { flex-direction: column; gap: 2px; height: 56px; padding: 0 4px; font-size: 12px; line-height: 16px; }
}

@media print. */

.cs-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  max-width: 1180px; margin: 0 auto; padding: 16px 16px 12px;
}
.cs-toolbar #cs-back { padding-left: 8px; }
.cs-tip { flex: 1 1 260px; margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; }

.cheatsheet {
  --cs-ink: #111; --cs-soft: #555;
  max-width: 1148px; margin: 0 auto 8px; padding: 28px 32px 32px;
  background: #fff; color: var(--cs-ink); border-radius: var(--r-s);
  box-shadow: var(--md-sys-elevation-2);
  font-size: 12.5px; line-height: 1.4; letter-spacing: 0;
  color-scheme: light;
}
.cs-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid var(--cs-ink);
}
.cs-title-row { display: flex; align-items: center; gap: 10px; }
.cs-logo { display: block; flex: none; width: 30px; height: 30px; }
.cs-head h1 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.005em; }
.cs-meta { margin: 3px 0 0; color: var(--cs-ink); }
.cs-meta strong { font-weight: 700; }
.cs-note { margin: 4px 0 0; color: var(--cs-soft); font-style: italic; }
.cs-legend { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 3px 18px; margin: 0; align-content: start; }
.cs-legend div { display: flex; gap: 6px; align-items: baseline; }
.cs-legend dt { flex: none; }
.cs-legend dd { margin: 0; color: var(--cs-soft); }
.cs-columns { column-width: 300px; column-gap: 28px; column-rule: 1px solid #e3e3e3; }
.cs-section { margin: 0 0 12px; }
.cs-keep, .cs-item, .cs-grid { break-inside: avoid; page-break-inside: avoid; }
.cs-section h2 {
  margin: 0 0 4px; padding: 0 0 2px; border-bottom: 1px solid var(--cs-ink);
  font-size: 1.08em; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.cs-item { margin: 0; padding: 2px 0 3px; }
.cs-item + .cs-item, .cs-keep + .cs-item { border-top: 1px solid #ececec; }
.cs-combo { margin-right: .15em; font-weight: 600; }
.cs-key {
  display: inline-block; padding: 0 .35em; border: 1px solid var(--cs-ink); border-radius: var(--r-xs);
  font: 700 .82em/1.45 var(--md-ref-typeface); letter-spacing: .03em; white-space: nowrap; color: var(--cs-ink);
}
.cs-plus { margin: 0 .2em; color: var(--cs-soft); font-weight: 600; }
.cs-does { color: var(--cs-ink); }
.cs-grid { width: 100%; margin: 2px 0 4px; border-collapse: collapse; table-layout: fixed; font-size: .9em; line-height: 1.2; }
.cs-grid td { padding: 3px 4px 4px; border: 1px solid #8a8a8a; vertical-align: top; font-weight: 500; overflow-wrap: anywhere; }
.cs-grid tbody tr { box-shadow: none; }
.cs-pad { display: block; color: var(--cs-soft); font-size: .85em; font-weight: 700; }

/* the overview: the controller as line art (white caps, grey outlines), the labelled controls
   outlined in black, leaders under the controls */
.cs-overview { margin: 0 0 18px; }
.cs-overview svg { display: block; width: 100%; height: auto; }
.cs-drawing .hw-control { cursor: default; pointer-events: none; }
.cs-drawing .hw-body { fill: #fff !important; stroke: #000 !important; stroke-width: 2.2 !important; }
.cs-drawing .hw-glass { fill: #f3f3f3 !important; stroke: #9a9a9a !important; stroke-width: 1 !important; }
.cs-drawing .hw-edge { display: none; }
.cs-drawing .hw-dot { fill: #8a8a8a !important; opacity: 1 !important; }
.cs-drawing .hw-mark { fill: #8a8a8a !important; }
.cs-drawing .cap, .cs-drawing .ring, .cs-drawing .knob-top, .cs-drawing .knob-cap,
.cs-drawing .knurl, .cs-drawing .strip-inner, .cs-drawing .bezel {
  fill: #fff !important; stroke: #9a9a9a !important; stroke-width: 1.1 !important; stroke-dasharray: none !important; filter: none !important;
}
.cs-drawing .knurl { stroke: #c4c4c4 !important; }
.cs-drawing .sheen, .cs-drawing .strip-end, .cs-drawing .strip-edge, .cs-drawing .cap-shadow, .cs-drawing .cap-face, .cs-drawing .cap-rim, .cs-drawing .hw-rim { display: none; }
.cs-drawing .oled, .cs-drawing .lcd { fill: #ececec !important; stroke: #9a9a9a !important; stroke-width: 1 !important; }
.cs-drawing .pixels { fill: #111 !important; shape-rendering: auto; }
.cs-drawing .label, .cs-drawing .label.green, .cs-drawing .label.red { fill: #000 !important; filter: none !important; }
.cs-drawing .sublabel, .cs-drawing .sublabel.red { fill: #777 !important; filter: none !important; }
.cs-drawing .label-box { fill: #000 !important; }
.cs-drawing .label.inverse { fill: #fff !important; }
.cs-drawing .icon-line { stroke: #000 !important; }
.cs-drawing .icon-fill { fill: #000 !important; }
.cs-drawing .pad-print { fill: #666 !important; }
.cs-drawing .cs-target .cap, .cs-drawing .cs-target .ring { stroke: #000 !important; stroke-width: 2.4 !important; }
.cs-leader { fill: none; stroke: #000; stroke-width: 1.4; stroke-linejoin: round; }
.cs-leader-end { fill: #000; }
.cs-callout { font-family: var(--md-ref-typeface); }
.cs-callout-title { fill: #000; font-size: 22px; font-weight: 700; letter-spacing: .03em; }
.cs-callout-text { fill: #333; font-size: 20.5px; font-weight: 400; }

/* --- printable documents (#setup/print..., #whatsnew) --------------------------------------- */
/* A sheet of paper like the cheat sheet, in the site's light colours in both themes (the tokens
   are the light ones, redefined here), printed by @media print on its own named page. */

.print-doc {
  --md-sys-color-primary: #9d3e00;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-secondary-container: #ffdbcc;
  --md-sys-color-on-secondary-container: #5c4033;
  --md-sys-color-tertiary: #005ea6;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-surface: #fff8f6;
  --md-sys-color-surface-container-low: #fcf1ee;
  --md-sys-color-surface-container: #f6ece8;
  --md-sys-color-surface-container-high: #f0e6e2;
  --md-sys-color-surface-container-highest: #ebe0dd;
  --md-sys-color-on-surface: #1f1b19;
  --md-sys-color-on-surface-variant: #51443e;
  --md-sys-color-outline: #83746d;
  --md-sys-color-outline-variant: #d6c3bb;
  max-width: 880px; margin: 0 auto 24px; padding: 36px 48px 32px;
  background: #fff; color: var(--md-sys-color-on-surface); border-radius: var(--r-s);
  box-shadow: var(--md-sys-elevation-2); color-scheme: light;
  font-size: 15px; line-height: 1.5;
}
.print-doc a { color: var(--md-sys-color-primary); }
.pd-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 3px solid var(--md-sys-color-primary);
}
.pd-logo { display: block; flex: none; width: 56px; height: 56px; }
.pd-head-text { min-width: 0; }
.pd-brand { margin: 0; color: var(--md-sys-color-primary); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pd-title { margin: 0; font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: -.01em; }
.pd-sub { margin: 2px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 16px; line-height: 22px; font-weight: 500; }
.pd-version {
  align-self: flex-start; margin-left: auto; padding: 4px 10px; border-radius: var(--r-full);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap;
}

.pd-intro { margin-bottom: 8px; }
.pd-contents {
  padding: 14px 20px 12px; border-radius: var(--r);
  background: var(--md-sys-color-surface-container-low); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}
.pd-contents h2 { margin: 0 0 6px; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.pd-contents ol { margin: 0; padding-left: 22px; }
.pd-contents li { margin: 1px 0; }
.pd-contents-list { columns: 2; column-gap: 28px; }
.pd-contents-list:has(> .pd-contents-group) { columns: auto; display: flex; flex-wrap: wrap; gap: 4px 40px; padding: 0; list-style: none; }
.pd-contents-group { break-inside: avoid; }
.pd-contents-group > span { display: block; font-weight: 600; }
.pd-online { margin: 10px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 14px; }

.pd-section-title {
  margin: 28px 0 0; padding: 8px 0 6px; border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: 22px; line-height: 28px; font-weight: 600; break-after: avoid; page-break-after: avoid;
}
.pd-step { margin: 22px 0 0; }
.pd-step-head { display: flex; align-items: center; gap: 12px; break-after: avoid; page-break-after: avoid; }
.pd-step-num {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font-size: 15px; font-weight: 700;
}
.pd-step-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; }
.pd-only {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-full);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant);
  font-size: 12px; line-height: 18px; font-weight: 600; vertical-align: 2px; white-space: nowrap;
}
.pd-only-lead { font-weight: 700; }
.print-doc .pd-body { max-width: none; margin: 10px 0 0 44px; font-size: 15px; line-height: 22px; }
.print-doc .pd-body > * { margin-bottom: 12px; }
.print-doc .pd-body h3 { margin-top: 16px; }
.print-doc .pd-body ol > li { margin-bottom: 8px; }
.print-doc .pd-body ul > li { margin-bottom: 6px; }
.print-doc .kv { max-width: 560px; }
.print-doc .note, .print-doc .kv, .pd-table-wrap, .pd-faq-item, .pd-actions li { break-inside: avoid; page-break-inside: avoid; }
/* a lead-in line ("You need:", "Still stuck?") stays with what follows it */
.print-doc .pd-body > .pd-lead, .print-doc .pd-body > h3 { break-after: avoid; page-break-after: avoid; }
.print-doc .pd-body p, .print-doc .pd-body li { break-inside: avoid; page-break-inside: avoid; }

.pd-values { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); font-size: 14px; line-height: 20px; }
.pd-values th, .pd-values td { padding: 8px 14px; text-align: left; vertical-align: top; }
.pd-values thead th { color: var(--md-sys-color-on-surface-variant); font-weight: 600; font-size: 12px; letter-spacing: .02em; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.print-doc tbody tr { box-shadow: none; }
.print-doc tbody th { color: var(--md-sys-color-on-surface); font-size: inherit; letter-spacing: 0; }
.pd-values tbody th { font-weight: 500; white-space: nowrap; }
.pd-values td { font-family: var(--md-ref-typeface-mono); }
.pd-values tbody tr + tr > * { border-top: 1px solid var(--md-sys-color-outline-variant); }

.pd-faq { display: flex; flex-direction: column; gap: 8px; }
.pd-faq-item { padding: 10px 16px 4px; border-radius: var(--r); background: var(--md-sys-color-surface-container); }
.print-doc .pd-faq-item p, .print-doc .pd-faq-item ul { margin: 0 0 6px; }
.print-doc .pd-q { font-weight: 600; }
.print-doc .pd-faq-item li { margin-bottom: 4px; }

.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.print-doc .pd-body .pd-actions > li { margin: 0; padding: 0; }
.print-doc .pd-body .pd-actions > li::before { display: none; }
.pd-actions a {
  display: flex; flex-direction: column; padding: 8px 16px; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); text-decoration: none;
}
.pd-action-label { font-weight: 600; }
.pd-url { color: var(--md-sys-color-on-surface-variant); font-size: 12.5px; line-height: 18px; overflow-wrap: anywhere; }

.pd-url-inline { color: var(--md-sys-color-on-surface-variant); font-size: .88em; overflow-wrap: anywhere; }
.pd-foot { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font-size: 12.5px; line-height: 18px; break-inside: avoid; page-break-inside: avoid; }
.pd-foot p { margin: 0; }

.pd-changes { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.pd-changes th, .pd-changes td { padding: 8px 12px 8px 0; text-align: left; vertical-align: top; }
.pd-changes thead th { color: var(--md-sys-color-primary); font-size: 14px; font-weight: 700; letter-spacing: .02em; border-bottom: 2px solid var(--md-sys-color-primary); }
.pd-changes tbody th { width: 24%; font-weight: 600; }
.pd-changes td { width: 38%; }
.pd-changes td:nth-child(2) { color: var(--md-sys-color-on-surface-variant); }
.pd-changes tbody tr { break-inside: avoid; page-break-inside: avoid; }
.pd-changes tbody tr + tr > * { border-top: 1px solid var(--md-sys-color-outline-variant); }

.changes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.changes-head h2 { margin-bottom: 0; }


/* the manual's link box, under the title and at the end */
.pd-manual {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 8px; padding: 12px 16px; border-radius: var(--r);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  break-inside: avoid; page-break-inside: avoid;
}
.pd-manual:not(.first) { margin-top: 24px; }
.pd-manual .icon { flex: none; width: 22px; height: 22px; color: var(--md-sys-color-primary); }
.pd-manual p { margin: 0; }
.pd-manual-line { font-size: 15px; line-height: 22px; }
.pd-manual-line a { font-weight: 600; overflow-wrap: anywhere; }
.pd-manual-sub { margin-top: 2px !important; font-size: 13px; line-height: 18px; }

/* a step with a drawing: the text and the drawing side by side, or the drawing under the text */
.pd-step-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; margin-left: 44px;
}
.pd-step-grid + .pd-body { margin-top: 10px; }
.pd-step-wide { margin-left: 44px; }
.print-doc .pd-step-grid > .pd-body, .print-doc .pd-step-wide > .pd-body { margin-left: 0; }

/* --- the setup drawings (js/setup-figures.js) --- */
.sf { margin: 10px 0 0; break-inside: avoid; page-break-inside: avoid; }
.sf figcaption { margin-top: 4px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; }
.sf-mono { font-family: var(--md-ref-typeface-mono); }
.sf-aside { display: block; color: var(--md-sys-color-on-surface-variant); font-size: 11px; line-height: 14px; }

.sf-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: 6px; align-items: center; }
.sf-box {
  min-width: 0; padding: 8px 10px; border-radius: var(--r); background: var(--md-sys-color-surface-container-low);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}
.sf-box-title { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 4px; color: var(--md-sys-color-on-surface-variant); font-size: 11.5px; line-height: 15px; font-weight: 600; }
.sf-tree, .sf-tree ul { list-style: none; margin: 0; padding: 0; }
.sf-tree ul { margin-left: 7px; padding-left: 10px; border-left: 1px solid var(--md-sys-color-outline-variant); }
.sf-name { display: flex; align-items: center; gap: 5px; padding: 1px 0; font-family: var(--md-ref-typeface-mono); font-size: 11.5px; line-height: 16px; white-space: nowrap; }
.sf-hot > .sf-name { color: var(--md-sys-color-primary); font-family: var(--md-ref-typeface); font-size: 12.5px; font-weight: 700; }
.sf-folder-icon { flex: none; width: 15px; height: 15px; fill: #f0b84d; stroke: #a8741a; stroke-width: 1.1; stroke-linejoin: round; }
.sf-folder-icon.zip { fill: #d9d2ce; stroke: #83746d; }
.sf-folder-icon .zip-teeth { fill: none; stroke: #51443e; stroke-width: 1.4; }
.sf-tag {
  margin-left: 2px; padding: 0 6px; border-radius: var(--r-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font: 600 10px/15px var(--md-ref-typeface); letter-spacing: .02em;
}
.sf-del > .sf-name > span { text-decoration: line-through; text-decoration-color: var(--md-sys-color-error); text-decoration-thickness: 1px; color: var(--md-sys-color-on-surface-variant); }
.sf-del > .sf-name .sf-folder-icon { opacity: .45; }
.sf-arrow { display: grid; justify-items: center; color: var(--md-sys-color-primary); font-size: 11px; font-weight: 700; line-height: 1; }
.sf-arrow::after { content: "\2192"; font-size: 24px; line-height: 24px; }

.sf-panel {
  overflow: hidden; border-radius: var(--r); background: #fff;
  box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant);
}
.sf-panel-bar { margin: 0; padding: 5px 12px; background: #352f2d; color: #f9efeb; font-size: 12px; line-height: 16px; font-weight: 600; }
.sf-field-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px 6px; font-size: 12px; }
.sf-field-label { color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.sf-field {
  flex: 1; min-width: 0; padding: 2px 8px; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
  font-family: var(--md-ref-typeface-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-plus {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--r-s);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 700;
}
.sf-port-list { list-style: none; margin: 0; padding: 0 12px 8px; }
.sf-port-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--md-sys-color-outline-variant); font-size: 12.5px; }
.sf-num {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--md-sys-color-surface-container-highest); font-size: 10.5px; font-weight: 700;
}

.sf-grid { width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 16px; }
.sf-grid th { padding: 7px 8px 3px; color: var(--md-sys-color-on-surface-variant); font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-align: left; }
.sf-grid td { padding: 3px 8px; vertical-align: top; font-weight: 400; }
.sf-grid tbody tr:last-child td { padding-bottom: 8px; }
.sf-ports-grid { border-top: 1px solid var(--md-sys-color-outline-variant); }
.sf-ports-grid th:last-child, .sf-ports-grid td:last-child { width: 1%; text-align: right; }
.sf-select {
  display: inline-block; max-width: 100%; padding: 1px 6px; border-radius: var(--r-xs); background: var(--md-sys-color-surface-container-highest);
  font-family: var(--md-ref-typeface-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top;
}
.sf-select.off { color: var(--md-sys-color-on-surface-variant); }
/* a phone: a long port name wraps in its pill instead of running out of the panel */
@media (max-width: 560px) { .sf-select { white-space: normal; overflow-wrap: anywhere; } }
.sf-on .sf-select { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 600; box-shadow: inset 0 0 0 1px var(--md-sys-color-primary); }
.sf-toggle {
  display: inline-block; min-width: 30px; padding: 1px 8px; border-radius: var(--r-full); text-align: center;
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); font-size: 10.5px; font-weight: 700;
}
.sf-toggle.on { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

.sf-device { display: block; width: 100%; height: auto; }
.sf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sf-screen-label { display: block; margin-top: 3px; color: var(--md-sys-color-on-surface-variant); font-size: 11px; line-height: 14px; }
.sf-keys { white-space: nowrap; }
.sf-screens-all { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 8px; margin-top: 10px; }
.sf-screens-group { display: contents; }
.sf-screens-title { grid-column: 1 / -1; margin: 2px 0 -4px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; font-weight: 600; }
.sf-screens { display: contents; }
.sf-oled { display: block; width: 100%; height: auto; }
.sf-oled-glass { fill: #070707; }
.sf-oled-pixels { fill: #f2f2ee; }

/* phones (screen only: an A4 page is narrower than 720 CSS px too) */
@media screen and (max-width: 720px) {
  .print-doc { padding: 20px 16px 20px; margin: 0 8px 8px; }
  .pd-logo { width: 40px; height: 40px; }
  .pd-title { font-size: 24px; line-height: 30px; }
  .print-doc .pd-body { margin-left: 0; }
  .pd-contents-list { columns: 1; }
  .pd-step-grid, .pd-step-wide { margin-left: 0; grid-template-columns: minmax(0, 1fr); }
  .sf-flow { grid-template-columns: minmax(0, 1fr); }
  .sf-arrow::after { content: "\2193"; }
  .sf-check-top { grid-template-columns: minmax(0, 1fr); }
  .sf-screens-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-table-wrap { overflow-x: auto; }
}

/* --- responsive ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .manual-layout { grid-template-columns: minmax(0, 1fr); }
  .hardware { position: static; }
}

@media (max-width: 860px) {
  .wizard { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .step-list-wrap { position: static; }
  .step-list-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    min-height: 48px; padding: 0 16px; border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--r); background: var(--md-sys-color-surface-container-low);
    cursor: pointer; font-weight: 500; text-align: left;
  }
  .step-list-toggle .icon { transition: transform var(--md-sys-motion-short) var(--md-sys-motion-easing); }
  .step-list-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .step-list { margin-top: 8px; }
  .step-list.collapsed { display: none; }
}

@media (max-width: 720px) {
  :root { --bar-height: 56px; }
  .top-app-bar-inner { flex-wrap: wrap; gap: 0 8px; padding: 0 8px 0 12px; }
  .brand { flex: 1; min-height: 56px; }
  .brand-for { display: none; }
  .nav-tabs { order: 3; width: 100%; margin: 0; gap: 0; border-top: 1px solid var(--md-sys-color-outline-variant); }
  .nav-tab { flex: 1; justify-content: center; gap: 6px; height: 48px; padding: 0 8px; border-radius: 0; }
  .nav-tab[aria-current="page"] { background: transparent; color: var(--md-sys-color-primary); box-shadow: inset 0 -3px 0 var(--md-sys-color-primary); }
  html { scroll-padding-top: 120px; }
  .best { padding-top: 16px; }
  .best .tour-title { font-size: 26px; line-height: 32px; }
  .card { scroll-margin-top: 120px; }
  .hardware { top: auto; }
  .setup { padding-top: 16px; }
  .setup-title { font-size: 28px; line-height: 36px; }
  .setup-hero { margin-bottom: 16px; }
  .step-card { padding: 20px 16px 16px; border-radius: var(--r); }
  .step-title { font-size: 24px; line-height: 32px; }
  .step-body { font-size: 15px; line-height: 23px; }
  .step-nav {
    position: sticky; bottom: 0; z-index: 5; margin: 20px -16px -16px; padding: 12px 16px;
    background: var(--md-sys-color-surface-container); border-radius: 0 0 var(--r) var(--r);
  }
  .step-nav .btn { padding: 0 16px; }
  .items li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #changes-table td:first-child { white-space: normal; }
  .manual-toolbar { padding-top: 12px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding: 0 8px; }
  .card { padding: 16px 16px 8px; }
  .choice-options { grid-template-columns: minmax(0, 1fr); }
  .tour { padding-top: 12px; }
  .tour-title { font-size: 26px; line-height: 34px; }
  .tour-intro { font-size: 15px; line-height: 23px; }
  .tour-stage { padding: 16px 10px 14px; margin: 0 -8px; border-radius: var(--r); }
  .tour-bubble { padding: 16px; }
  .tour-text { font-size: 15px; line-height: 23px; }
  .tour-cards { gap: 32px; }
  .tour-card-title { font-size: 20px; line-height: 28px; }
  .tour-card-intro { font-size: 14px; line-height: 20px; }
  /* the sections in one line that scrolls sideways (the page itself never does) */
  .tour-toc { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 4px; padding: 2px 16px 6px; scrollbar-width: none; }
  .tour-toc::-webkit-scrollbar { display: none; }
  .tour-toc a { flex: none; }
  .manual-toolbar .search-bar { flex-basis: 200px; }
  .search-hint { display: none; }
  .search-group-head { flex-wrap: wrap; }
  .cs-toolbar { padding: 12px 16px; }
  .cs-toolbar #cs-print { margin-left: auto; }
  .cs-toolbar .segmented { order: 3; }
  .cs-tip { order: 4; }
  .cheatsheet { padding: 18px 16px 20px; margin: 0 8px 8px; font-size: 13px; }
  .cs-overview { overflow-x: auto; margin-right: -16px; }
  .cs-overview svg { min-width: 760px; }
  .cs-legend { grid-template-columns: minmax(0, 1fr); }
}

/* The Cheat sheet button always shows its label. At phone widths it is a compact pill (smaller
   label, tighter padding, the search's height) beside a narrower search. */
@media (max-width: 480px) {
  .manual-toolbar .search-bar { flex-basis: 140px; }
  .cheatsheet-button { height: 48px; padding: 0 14px 0 12px; gap: 6px; font-size: 13px; letter-spacing: 0; }
  .cheatsheet-button .icon { width: 18px; height: 18px; }
}

@media (max-width: 400px) {
  .brand-sub { display: none; }
  .step-nav .btn-label-long { display: none; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dd { padding-top: 0; }
  .kv dd:not(:first-of-type) { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

@media print {
  :root { color-scheme: light; }
  html, body { background: #fff !important; color: #000 !important; }
  .top-app-bar, .manual-toolbar, .hardware, .tour-controls, .welcome-card, .toc, .snackbar, .step-list-wrap, .step-nav, .footer,
  .skip-link, .cs-toolbar { display: none !important; }
  .manual-layout, .wizard { display: block; }
  .card, .step-card { break-inside: avoid; box-shadow: none; }

  /* the cheat sheet: black on white, small type, 3 columns, nothing else on the page */
  @page { margin: 10mm 9mm 11mm; }
  body { display: block; min-height: 0; }
  .cheatsheet {
    --cs-ink: #000; --cs-soft: #333;
    max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none;
    font-size: 7pt; line-height: 1.32;
  }
  .cs-head { padding-bottom: 2.2mm; margin-bottom: 3mm; border-bottom-width: 1.2pt; gap: 1.5mm 6mm; }
  .cs-head h1 { font-size: 13pt; }
  .cs-logo { width: 7.5mm; height: 7.5mm; filter: grayscale(1); }
  .cs-meta { font-size: 8pt; }
  .cs-legend { gap: .4mm 5mm; }
  .cs-overview { margin: 2mm 0 0; break-after: page; }
  .cs-columns { column-count: 3; column-width: auto; column-gap: 5mm; column-rule: .5pt solid #bbb; }
  .cs-section { margin-bottom: 2.4mm; }
  .cs-section h2 { border-bottom-width: .8pt; margin-bottom: .6mm; }
  .cs-item { padding: .4mm 0 .5mm; }
  .cs-item + .cs-item, .cs-keep + .cs-item { border-top: .4pt solid #ccc; }
  .cs-key { border-width: .6pt; border-radius: var(--r-xs); }
  .cs-grid td { border-width: .5pt; padding: .5mm .8mm .7mm; }

  /* the printable documents: on their own page (margins, page numbers), colours kept, compact
     (the installation guide fits on 3 A4 pages) */
  @page doc {
    margin: 10mm 11mm 11mm;
    @bottom-right { content: counter(page) " / " counter(pages); font: 500 7.5pt "Roboto Flex", Arial, sans-serif; color: #6b5d57; }
  }
  .print-doc {
    page: doc; max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none;
    font-size: 8.8pt; line-height: 1.34;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pd-head { gap: 4mm; padding-bottom: 2.5mm; margin-bottom: 3mm; border-bottom-width: 1.6pt; }
  .pd-logo { width: 12mm; height: 12mm; }
  .pd-brand { font-size: 7.5pt; line-height: 1.3; }
  .pd-title { font-size: 18pt; line-height: 1.15; }
  .pd-sub { font-size: 10pt; line-height: 1.3; }
  .pd-version { font-size: 7.5pt; padding: .6mm 2.4mm; }
  .pd-manual { gap: 3mm; padding: 2.4mm 3.5mm; margin-bottom: 1mm; }
  .pd-manual:not(.first) { margin-top: 5mm; }
  .pd-manual .icon { width: 5mm; height: 5mm; }
  .pd-manual-line { font-size: 10pt; line-height: 1.35; }
  .pd-manual-sub { font-size: 8pt; line-height: 1.35; }
  .pd-section-title { margin-top: 5mm; padding: 1mm 0; font-size: 12pt; line-height: 1.3; }
  .pd-step { margin-top: 4mm; }
  .pd-step-head { gap: 2.6mm; }
  .pd-step-num { width: 6mm; height: 6mm; font-size: 9.5pt; }
  .pd-step-title { font-size: 11.5pt; line-height: 1.3; }
  .pd-only { font-size: 7pt; line-height: 1.5; padding: 0 2mm; vertical-align: 1pt; }
  .print-doc .pd-body { margin: 1.5mm 0 0 8.6mm; font-size: 8.8pt; line-height: 1.34; }
  .pd-step-grid, .pd-step-wide { margin: 0 0 0 8.6mm; gap: 5mm; }
  .print-doc .pd-step-grid > .pd-body, .print-doc .pd-step-wide > .pd-body { margin: 1.5mm 0 0; }
  .print-doc .pd-step-grid + .pd-body { margin-top: 1.5mm; }
  .pd-step-grid, .sf-pair, .sf-screen { break-inside: avoid; page-break-inside: avoid; }
  .print-doc .pd-body > * { margin-bottom: 1.8mm; }
  .print-doc .pd-body h3 { margin-top: 2.5mm; font-size: 9.5pt; line-height: 1.3; }
  .print-doc .pd-body ol > li { padding-left: 6.4mm; margin-bottom: 1mm; }
  .print-doc .pd-body ol > li::before { width: 4.4mm; height: 4.4mm; font-size: 7.5pt; top: 0; }
  .print-doc .pd-body ul > li { padding-left: 4.4mm; margin-bottom: .8mm; }
  .print-doc .pd-body ul > li::before { left: 1.2mm; top: 1.55mm; width: 1.4mm; height: 1.4mm; }
  .print-doc .key { padding: .2mm 1.4mm; font-size: 7pt; line-height: 1.4; border-radius: var(--r-xs); }
  .print-doc .pd-body code { font-size: .86em; padding: 0 1.2mm; }
  .print-doc .note { gap: 2.4mm; padding: 1.8mm 3mm; font-size: 8.3pt; line-height: 1.35; border-radius: var(--r); }
  .print-doc .note .icon { width: 3.8mm; height: 3.8mm; }
  .print-doc .kv dt, .print-doc .kv dd { font-size: 8.3pt; line-height: 1.35; padding: 1.1mm 3mm; }
  .print-doc .kv { border-radius: var(--r); }
  .pd-values { font-size: 8.3pt; line-height: 1.3; border-radius: var(--r); }
  .pd-values th, .pd-values td { padding: 1mm 3mm; }
  .pd-values thead th { font-size: 7.5pt; }
  .pd-faq { display: block; columns: 2; column-gap: 3.5mm; }
  .print-doc .pd-flow { columns: 2; column-gap: 5mm; }
  .print-doc .pd-flow > * { break-inside: avoid; page-break-inside: avoid; }
  .print-doc .pd-flow > :first-child { margin-top: 0; }
  .pd-faq-item { padding: 1.8mm 3mm .6mm; margin-bottom: 2mm; border-radius: var(--r); font-size: 8.3pt; line-height: 1.35; }
  .print-doc .pd-faq-item p, .print-doc .pd-faq-item ul { margin-bottom: 1.2mm; }
  .print-doc .pd-faq-item li { margin-bottom: .6mm; }
  .pd-actions { gap: 2mm; }
  .pd-actions a { padding: 1.4mm 3mm; border-radius: var(--r); }
  .pd-action-label { font-size: 8.5pt; }
  .pd-url { font-size: 7.5pt; line-height: 1.3; }
  .pd-url-inline { font-size: .85em; }
  .print-doc a { text-decoration: none; }
  .pd-foot { margin-top: 3mm; padding-top: 0; border-top: 0; font-size: 7.5pt; }

  .sf { margin-top: 1.5mm; }
  .sf figcaption { font-size: 7.5pt; line-height: 1.3; margin-top: 1mm; }
  .sf-box { padding: 1.8mm 2.4mm; border-radius: var(--r); }
  .sf-box-title { font-size: 7.5pt; line-height: 1.3; margin-bottom: 1mm; }
  .sf-name { font-size: 6.9pt; line-height: 1.45; gap: 1mm; }
  .sf-tree ul { margin-left: 1.4mm; padding-left: 1.8mm; }
  .sf-flow { gap: 1.2mm; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .sf-hot > .sf-name { font-size: 8.3pt; }
  .sf-folder-icon { width: 3.6mm; height: 3.6mm; }
  .sf-tag { font-size: 6.5pt; line-height: 1.6; padding: 0 1.6mm; }
  .sf-arrow { font-size: 7pt; }
  .sf-arrow::after { font-size: 15pt; line-height: 1; }
  .sf-panel { border-radius: var(--r); }
  .sf-panel-bar { padding: 1.1mm 3mm; font-size: 8pt; }
  .sf-field-row { padding: 2mm 3mm 1.4mm; gap: 2mm; font-size: 8pt; }
  .sf-field { padding: .4mm 2mm; }
  .sf-plus { width: 5mm; height: 5mm; }
  .sf-port-list { padding: 0 3mm 2mm; }
  .sf-port-list li { padding: 1mm 0; font-size: 8.3pt; gap: 2mm; }
  .sf-num { width: 4.2mm; height: 4.2mm; font-size: 7pt; }
  .sf-grid { font-size: 7.8pt; line-height: 1.3; }
  .sf-grid th { padding: 1.6mm 2mm .6mm; font-size: 7pt; }
  .sf-grid td { padding: .7mm 2mm; }
  .sf-grid tbody tr:last-child td { padding-bottom: 2mm; }
  .sf-select { font-size: 6.6pt; padding: .2mm 1.1mm; }
  .sf-grid td, .sf-grid th { padding-left: 1.6mm; padding-right: 1.6mm; }
  .sf-toggle { font-size: 7pt; padding: .2mm 2mm; min-width: 8mm; }
  .sf-aside { font-size: 6.8pt; line-height: 1.3; }
  .sf-pair { gap: 2.4mm; }
  .sf-screen-label { font-size: 7pt; line-height: 1.3; margin-top: .6mm; }
  .sf-screens-all { gap: 1.8mm 2.4mm; margin-top: 2.5mm; }
  .sf-screens-title { font-size: 7.5pt; margin: .5mm 0 -1mm; }
}

/* The Tour's last card: devices on the screens (js/tour-devices.js), stills */
.tour-devices { margin-top: 40px; }
.td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.td-grid.td-grid-mk3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.td-tile { margin: 0; }
.td-screens { display: grid; gap: 4px; background: #000; padding: 4px; }
.td-mk3 { grid-template-columns: 1fr 1fr; }
.td-mk3 img { display: block; width: 100%; height: auto; }
.td-oled { display: block; width: 100%; height: auto; }
.td-oled-glass { fill: #070707; }
.td-oled-pixels { fill: #f2f2ee; }
.td-tile figcaption { display: flex; flex-direction: column; margin-top: 6px; }
.td-group { color: var(--md-sys-color-on-surface-variant); font-size: 12px; line-height: 16px; }
.td-name { font-size: 15px; line-height: 22px; font-weight: 500; }