/* amp.nihilus.app shared UI layer, cp2a (2026-10-09). Loaded by index.html, control.html and c.html after
   main.v220.css and nihilus-tokens.css. Visual layer only: no element is added, removed or renamed.
   Host and Stage run live audio, so this file is paint-first: no backdrop-filter, modest shadows, no infinite
   animations, transitions only on hover or press, and no rule touches the box size of a lane, board cell,
   pedal, knob, meter or canvas (the board layout is measured by JS).
   cp2a: Host page chrome (banner, header, Control sidebar, pairing panel, chain view toolbar, lanes, footer).
   cp2b: Stage pedals (shell, top plate, switch, remove and menu buttons), knobs, tuner, presets, session rows,
   modals and menus. Pedal artwork (paint, motif, graffiti, grill, logo plate, screws) is left as drawn.
   The remote page keeps its own amp-cp.css; host-only rules here are scoped to html:not(.cs-control). */

/* ---------- page ---------- */
html:not(.cs-control),
html:not(.cs-control) body { background: var(--nx-bg); color-scheme: dark; }
html:not(.cs-control) .cs-root { background: var(--nx-bg); }

/* ---------- Host banner ---------- */
html:not(.cs-control) .cs-host-banner {
  background: linear-gradient(90deg, var(--nx-hot-soft), transparent 70%), var(--nx-bar);
  border-bottom: 1px solid var(--nx-line); box-shadow: none;
}
html:not(.cs-control) .cs-host-banner-kicker {
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-2xs); letter-spacing: var(--nx-track-caps); color: var(--nx-hot);
}
html:not(.cs-control) .cs-host-banner-copy { color: var(--nx-sub); font-family: var(--nx-font-body); }
html:not(.cs-control) .cs-host-banner .cs-btn-primary { border-radius: var(--nx-r-pill); }
html:not(.cs-control) .cs-host-banner-x { color: var(--nx-sub); background: transparent; border: 0; border-radius: var(--nx-r-pill); }
html:not(.cs-control) .cs-host-banner-x:hover { color: var(--nx-text-hi); background: var(--nx-hover); }

/* ---------- header ---------- */
html:not(.cs-control) .cs-header { background: var(--nx-bar); border-bottom: 1px solid var(--nx-line); box-shadow: none; }
html:not(.cs-control) .cs-header::after { display: none; }
html:not(.cs-control) .cs-brand-domain { font-family: var(--nx-font-body); font-weight: var(--nx-fw-semi); letter-spacing: 0.02em; color: var(--nx-text); }
html:not(.cs-control) .cs-ver-link { color: var(--nx-sub); }
html:not(.cs-control) .cs-tag { color: var(--nx-sub); }
html:not(.cs-control) .cs-header .cs-btn {
  border-radius: var(--nx-r-pill); padding-left: 0.7rem; padding-right: 0.7rem;
}

/* ---------- buttons, selects, checks (Host chrome only; pedal faces are cp2b) ---------- */
html:not(.cs-control) :is(.cs-header, .cs-host-banner, .cs-sidebar, .cs-add-bar, .cs-jam-float, .cs-jam-view-banner) .cs-btn {
  background: var(--nx-card-2); border: 1px solid var(--nx-line-2); box-shadow: none; text-shadow: none;
  color: var(--nx-text); font-family: var(--nx-font-body); font-weight: var(--nx-fw-semi); letter-spacing: 0.01em; text-transform: none;
  border-radius: var(--nx-r-sm);
  transition: background-color var(--nx-dur-1) linear, transform var(--nx-dur-1) var(--nx-ease);
}
html:not(.cs-control) .cs-header .cs-btn { border-radius: var(--nx-r-pill); }
html:not(.cs-control) :is(.cs-header, .cs-host-banner, .cs-sidebar, .cs-add-bar, .cs-jam-float, .cs-jam-view-banner) .cs-btn:hover:not(:disabled) {
  background: var(--nx-raised); color: var(--nx-text-hi);
}
html:not(.cs-control) :is(.cs-header, .cs-host-banner, .cs-sidebar, .cs-add-bar, .cs-jam-float, .cs-jam-view-banner) .cs-btn:active:not(:disabled) { transform: scale(0.97); }
html:not(.cs-control) :is(.cs-header, .cs-host-banner, .cs-sidebar, .cs-add-bar, .cs-jam-float, .cs-jam-view-banner) .cs-btn-primary {
  background: linear-gradient(180deg, var(--nx-hot-fill), var(--nx-hot-deep)); border-color: transparent; color: var(--nx-text-hi);
  box-shadow: var(--nx-sh-hot);
}
html:not(.cs-control) :is(.cs-header, .cs-host-banner, .cs-sidebar, .cs-add-bar, .cs-jam-float, .cs-jam-view-banner) .cs-btn-primary:hover:not(:disabled) {
  background: var(--nx-hot-fill); color: var(--nx-text-hi);
}
/* header states: after the generic button blocks and one class stronger, so they always win (rev3, Michael B1).
   The Guide button keeps its red "new" accent but no longer pulses forever (perf rule: no infinite animations). */
html:not(.cs-control) .cs-header .cs-header-quiet { color: var(--nx-sub); }
html:not(.cs-control) .cs-header .cs-header-quiet:hover { color: var(--nx-text); }
html:not(.cs-control) .cs-header .cs-header-guide.is-new { animation: none; color: var(--nx-hot); border-color: var(--nx-hot-line); }
html:not(.cs-control) .cs-header .cs-header-remote.is-live,
html:not(.cs-control) .cs-header .cs-header-jam.is-live {
  color: var(--nx-text-hi); background: var(--nx-hot-fill); border-color: transparent; box-shadow: var(--nx-sh-hot);
}
html:not(.cs-control) .cs-header .cs-header-remote.is-live:hover:not(:disabled),
html:not(.cs-control) .cs-header .cs-header-jam.is-live:hover:not(:disabled) { background: var(--nx-hot-deep); color: var(--nx-text-hi); }
html:not(.cs-control) .cs-add-bar .cs-add-mutant { border-color: transparent; color: #fff; background: #5b21d6; }
html:not(.cs-control) .cs-add-bar .cs-add-mutant:hover:not(:disabled) { background: #6a32e6; }
html:not(.cs-control) :is(.cs-sidebar, .cs-add-bar) .cs-select {
  background-color: var(--nx-card-2); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-sm); color: var(--nx-text);
  font-family: var(--nx-font-body); box-shadow: none;
}
html:not(.cs-control) .cs-sidebar input[type="checkbox"],
html:not(.cs-control) .cs-sidebar input[type="radio"],
html:not(.cs-control) .cs-sidebar input[type="range"] { accent-color: var(--nx-hot); }
html:not(.cs-control) :is(.cs-header, .cs-sidebar, .cs-add-bar, .cs-host-banner) :is(.cs-btn, .cs-select, .cs-icon-btn, .cs-dock-tab):focus-visible {
  outline: 2px solid var(--nx-hot); outline-offset: 2px;
}

/* ---------- Control sidebar ---------- */
html:not(.cs-control) .cs-sidebar { background: var(--nx-bar); border-right: 1px solid var(--nx-line); box-shadow: none; }
html:not(.cs-control) .cs-sidebar .cs-card {
  background: var(--nx-card); border: 1px solid var(--nx-line); border-radius: var(--nx-r-md); box-shadow: var(--nx-inset);
}
html:not(.cs-control) .cs-sidebar .cs-panel-title h2,
html:not(.cs-control) .cs-sidebar .cs-panel-title h3 {
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-2xs); font-weight: var(--nx-fw-med); letter-spacing: var(--nx-track-caps);
  color: var(--nx-sub); text-shadow: none;
}
html:not(.cs-control) .cs-sidebar .cs-icon-btn,
html:not(.cs-control) .cs-stack-swap,
html:not(.cs-control) .cs-sidebar-toggle {
  background: var(--nx-card-2); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-xs); box-shadow: none; color: var(--nx-sub);
}
html:not(.cs-control) .cs-sidebar .cs-icon-btn:hover,
html:not(.cs-control) .cs-stack-swap:hover,
html:not(.cs-control) .cs-sidebar-toggle:hover { color: var(--nx-text-hi); background: var(--nx-raised); }
/* Control tabs: quiet text tabs with a red underline, like the player tabs */
html:not(.cs-control):not(.cs-phone) .cs-rack .cs-dock-tabs { background: transparent; border-bottom: 1px solid var(--nx-line); }
html:not(.cs-control) .cs-rack .cs-dock-tab {
  background: transparent; border: 1px solid transparent; box-shadow: none; border-radius: var(--nx-r-xs);
  color: var(--nx-sub); font-family: var(--nx-font-body); font-weight: var(--nx-fw-semi); letter-spacing: 0.02em; text-transform: none;
  transition: color var(--nx-dur-1) linear;
}
html:not(.cs-control) .cs-rack .cs-dock-tab:hover { color: var(--nx-text); }
html:not(.cs-control) .cs-rack .cs-dock-tab.is-on {
  color: var(--nx-text-hi); background: var(--nx-hot-soft); border-color: var(--nx-hot-line); box-shadow: inset 0 -2px 0 var(--nx-hot);
}
html:not(.cs-control) .cs-rack .cs-dock-tab.is-live:not(.is-on) { color: var(--nx-hot); }
html:not(.cs-control) .cs-sidebar .cs-dock-subtabs { background: transparent; border-bottom: 1px solid var(--nx-line); }
html:not(.cs-control) .cs-sidebar .cs-dock-subtabs .cs-dock-tab,
html:not(.cs-control) .cs-sidebar .cs-pedal-jump,
html:not(.cs-control) .cs-sidebar .cs-place-btn {
  border-radius: var(--nx-r-sm); box-shadow: none; text-transform: none; letter-spacing: 0.01em; font-family: var(--nx-font-body);
}
html:not(.cs-control) .cs-sidebar :is(.cs-pedal-jump, .cs-place-btn, .cs-dock-subtabs .cs-dock-tab):not(.is-on):not(.is-active) {
  background: var(--nx-card-2); border: 1px solid var(--nx-line-2); color: var(--nx-text);
}
html:not(.cs-control) .cs-sidebar :is(.cs-pedal-jump, .cs-place-btn, .cs-dock-subtabs .cs-dock-tab):is(.is-on, .is-active) {
  background: var(--nx-hot-fill); border: 1px solid transparent; color: var(--nx-text-hi);
}
html:not(.cs-control) .cs-sidebar .cs-hint,
html:not(.cs-control) .cs-sidebar .cs-access-hint { color: var(--nx-sub); }
html:not(.cs-control) .cs-sidebar .cs-lead { color: var(--nx-text); font-family: var(--nx-font-body); }
html:not(.cs-control) .cs-sidebar .cs-label { font-family: var(--nx-font-body); font-weight: var(--nx-fw-semi); letter-spacing: 0.02em; text-transform: none; color: var(--nx-sub); }
html:not(.cs-control) .cs-sidebar a { color: var(--nx-text); }
html:not(.cs-control) .cs-sidebar a:hover { color: var(--nx-hot); }

/* ---------- pairing (Remote tab) ---------- */
html:not(.cs-control) .cs-remote-status {
  gap: 6px; padding: 3px 10px; border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-pill); background: var(--nx-card-2);
  color: var(--nx-text); font-family: var(--nx-font-body); font-size: var(--nx-fs-xs); font-weight: var(--nx-fw-semi); letter-spacing: 0.01em; text-transform: none;
}
html:not(.cs-control) .cs-remote-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-off); flex: none;
}
/* QR: white card with a quiet zone (padding improves scanning); the outer width is unchanged (border-box) */
html:not(.cs-control) .cs-session-qr-mark {
  box-sizing: border-box; padding: 10px; border-radius: var(--nx-r-md); background: #fff; box-shadow: var(--nx-sh-2);
}
html:not(.cs-control) .cs-session-qr input.cs-select { font-family: var(--nx-font-mono); font-size: var(--nx-fs-xs); color: var(--nx-sub); }
html:not(.cs-control) .cs-session-peers {
  border: 1px solid var(--nx-line); border-radius: var(--nx-r-sm); background: var(--nx-bg); padding: 8px 10px;
}
html:not(.cs-control) .cs-session-peers .cs-hint { margin: 0; }

/* ---------- chain view ---------- */
html:not(.cs-control) .cs-stage { background: radial-gradient(900px 240px at 50% -10%, rgba(217, 20, 43, 0.08), transparent 60%), var(--nx-bg); }
html:not(.cs-control) .cs-add-bar { background: var(--nx-bar); border-bottom: 1px solid var(--nx-line); box-shadow: none; }
html:not(.cs-control) .cs-add-bar .cs-label { font-family: var(--nx-font-mono); font-size: var(--nx-fs-2xs); letter-spacing: var(--nx-track-caps); color: var(--nx-sub); }
html:not(.cs-control) :is(.cs-amp-pick-menu, .cs-order-pop) {
  background: var(--nx-card); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-sm); box-shadow: var(--nx-sh-pop);
}
/* lanes: paint only (border width, padding and size untouched so JS measurements stay identical) */
.cs-lanes .cs-lane {
  border-color: var(--nx-line-2); border-radius: var(--nx-r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%), var(--nx-card); box-shadow: var(--nx-inset);
}
.cs-lanes .cs-board-grip { background: var(--nx-off); }
html:not(.cs-control) .cs-jam-view-banner { background: var(--nx-hot-soft); border-color: var(--nx-hot-line); }
html:not(.cs-control) .cs-jam-float { background: var(--nx-card); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-md); box-shadow: var(--nx-sh-pop); }

/* ---------- footer ---------- */
html:not(.cs-control) .cs-footer { background: var(--nx-bar); border-top: 1px solid var(--nx-line); box-shadow: none; font-family: var(--nx-font-body); }
html:not(.cs-control) .cs-footer .cs-legal-links a,
html:not(.cs-control) .cs-footer .cs-phone-foot a { color: var(--nx-sub); }
html:not(.cs-control) .cs-footer .cs-legal-links a:hover { color: var(--nx-text); }

/* ================= cp2b: Stage board, knobs, tuner, presets, session, modals ================= */

/* ---------- pedals: chrome only, paint only (no width, height, padding or position changes) ---------- */
.cs-pedal {
  --pedal-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.4), var(--nx-sh-2);
}
.cs-pedal.is-selected {
  filter: none; outline: 2px solid var(--nx-hot); outline-offset: 3px;
  box-shadow: var(--pedal-shadow), 0 0 0 6px var(--nx-hot-soft);
}
.cs-pedal:focus-visible { outline: 2px solid var(--nx-hot); outline-offset: 3px; }
.cs-pedal-top {
  border-radius: var(--nx-r-xs) var(--nx-r-xs) 3px 3px;
  border-color: color-mix(in srgb, var(--pedal-accent) 30%, rgba(0, 0, 0, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); /* the accent-tinted plate fill is kept: it carries each pedal's identity */
}
.cs-pedal.is-selected .cs-pedal-top {
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-hot) 30%, rgba(0, 0, 0, 0.5)), rgba(0, 0, 0, 0.3));
  border-color: var(--nx-hot-line);
}
.cs-pedal.is-selected .cs-pedal-name { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.cs-pedal-badge { opacity: 0.9; }
/* switch (LED bypass): same 10 px button, calmer glow, a visible keyboard ring */
.cs-pedal-led { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), 0 0 0 3px rgba(0, 0, 0, 0.7); }
.cs-pedal-led.is-lit {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.7), 0 0 6px var(--pedal-led), 0 0 1px #fff;
}
.cs-pedal-led:focus-visible { outline: 2px solid var(--nx-hot); outline-offset: 3px; }
/* remove and menu buttons */
.cs-pedal .cs-pedal-remove {
  border-radius: var(--nx-r-xs); border: 1px solid var(--nx-line-2); background: rgba(10, 8, 9, 0.6); box-shadow: none; text-shadow: none;
  color: var(--nx-text); font-family: var(--nx-font-body); font-weight: var(--nx-fw-semi);
  transition: background-color var(--nx-dur-1) linear, color var(--nx-dur-1) linear;
}
.cs-pedal .cs-pedal-remove:hover { background: var(--nx-hot-fill); border-color: transparent; color: var(--nx-text-hi); }
.cs-pedal-menu-btn { border-radius: var(--nx-r-xs); border: 1px solid var(--nx-line-2); background: rgba(10, 8, 9, 0.72); box-shadow: none; }
.cs-pedal-menu-btn[aria-expanded="true"], .cs-pedal-menu-btn:hover { color: var(--nx-text-hi); background: var(--nx-hot-fill); border-color: transparent; }
:is(.cs-pedal-remove, .cs-pedal-menu-btn):focus-visible { outline: 2px solid var(--nx-hot); outline-offset: 2px; }

/* ---------- knobs: matte caps, flat dials, crisp accent arc (sizes untouched) ---------- */
.cs-knob-well {
  background: radial-gradient(circle at 50% 50%, #070506 54%, #161213 72%, #262022 90%, #121011);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.cs-knob-dial {
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.05) 0 2deg, transparent 2deg 9deg),
    radial-gradient(circle at 34% 28%, #6c665f 0 6%, #3a3531 34%, #1a1715 70%, #0a0909);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -4px 6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 0 3px #221d1c, 0 0 0 4px rgba(0, 0, 0, 0.7), var(--nx-sh-1);
}
.cs-knob-cap {
  background: radial-gradient(circle at 38% 30%, #4a4441, #24201e 62%, #121010);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 3px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.8);
}
.cs-knob-glint { opacity: 0.45; }
.cs-knob-tick { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--pedal-accent, var(--nx-hot)) 70%, #fff)); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6); }
/* the glow filter on every arc was a per-knob filter layer; a flat arc is lighter and reads the same */
.cs-knob-arc { filter: none; opacity: 0.9; }
.cs-knob-label { color: rgba(239, 234, 226, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.cs-knob:focus-visible { outline: 2px solid var(--nx-hot); outline-offset: 3px; border-radius: var(--nx-r-xs); }

/* ---------- pedal menu and other popovers ---------- */
.cs-pedal-menu, .cs-slot-menu, .cs-stage-tools-pop, :is(.cs-amp-pick-menu, .cs-order-pop) {
  background: var(--nx-card); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-sm); box-shadow: var(--nx-sh-pop);
}
.cs-pedal-menu-item {
  border-radius: var(--nx-r-xs); color: var(--nx-text); font-family: var(--nx-font-body); font-weight: var(--nx-fw-med);
  letter-spacing: 0.01em; text-transform: none;
}
.cs-pedal-menu-item:hover, .cs-pedal-menu-item:focus-visible { background: var(--nx-hot-soft); color: var(--nx-text-hi); outline: none; }

/* ---------- tuner ---------- */
.cs-tuner-slit { border-radius: var(--nx-r-xs); border-color: rgba(0, 0, 0, 0.8); }
.cs-tuner-slit:focus-visible { outline: 2px solid var(--nx-hot); outline-offset: 2px; }
html:not(.cs-control) .cs-tuner-card .cs-tuner-note { font-family: var(--nx-font-display); color: var(--nx-text-hi); }
html:not(.cs-control) .cs-tuner-card .cs-tuner-cents { font-family: var(--nx-font-mono); font-size: var(--nx-fs-xs); color: var(--nx-sub); }
html:not(.cs-control) .cs-tuner-strings .cs-btn {
  border-radius: var(--nx-r-pill); font-family: var(--nx-font-mono); letter-spacing: 0.04em;
}
html:not(.cs-control) .cs-sidebar .cs-tuner-strings .cs-btn.is-active { background: var(--nx-hot-fill); border-color: transparent; color: var(--nx-text-hi); }
html:not(.cs-control) .cs-tuner-card .cs-tuner-track { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
html:not(.cs-control) .cs-tuner-card .cs-tuner-dot { background: var(--nx-raised); box-shadow: none; }

/* ---------- checkboxes and radios in the sidebar ---------- */
html:not(.cs-control) .cs-sidebar :is(.cs-radio, .cs-check) input:is([type="checkbox"], [type="radio"]) {
  border: 1px solid var(--nx-line-2); border-radius: 4px; background: var(--nx-card-2); box-shadow: none;
}
html:not(.cs-control) .cs-sidebar .cs-radio input[type="radio"] { border-radius: 50%; }
html:not(.cs-control) .cs-sidebar :is(.cs-radio, .cs-check) input:checked {
  background: radial-gradient(circle at 50% 50%, #fff 0 26%, transparent 30%), var(--nx-hot-fill); border-color: transparent;
}
html:not(.cs-control) .cs-sidebar :is(.cs-radio, .cs-check) input:focus-visible { outline: 2px solid var(--nx-hot); outline-offset: 2px; }
html:not(.cs-control) .cs-sidebar .cs-radio { color: var(--nx-text); }

/* ---------- presets: the Name field matches the selects and loses the dropdown arrow it never had ---------- */
html:not(.cs-control) .cs-sidebar input.cs-select {
  font-family: var(--nx-font-body); font-size: 0.85rem; background-image: none; padding-right: 0.5rem; cursor: text;
}
html:not(.cs-control) .cs-sidebar input.cs-select::placeholder { color: var(--nx-sub); }
html:not(.cs-control) .cs-sidebar input.cs-select:focus { border-color: var(--nx-hot-line); }
html:not(.cs-control) .cs-rack-more { border-top-color: var(--nx-line); }
html:not(.cs-control) .cs-rack-more > summary {
  font-family: var(--nx-font-body); font-weight: var(--nx-fw-semi); letter-spacing: 0.01em; text-transform: none; color: var(--nx-sub);
}
html:not(.cs-control) .cs-rack-more > summary:hover { color: var(--nx-text); }
html:not(.cs-control) .cs-route-status { color: var(--nx-sub); font-family: var(--nx-font-mono); font-size: var(--nx-fs-xs); }

/* ---------- session rows (Remote and Jam tabs) ---------- */
html:not(.cs-control) .cs-session-peer {
  padding: 4px 0; border-top: 1px solid var(--nx-line); font-family: var(--nx-font-mono); font-size: var(--nx-fs-xs); color: var(--nx-text);
}
html:not(.cs-control) .cs-session-peer:first-child { border-top: 0; }

/* ---------- modals (guide, install, jam join) and the in-page board layer ---------- */
.cs-guide-overlay, .cs-install-overlay { background: rgba(7, 6, 7, 0.8); }
.cs-guide-sheet {
  background: var(--nx-card); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-lg); box-shadow: var(--nx-sh-pop); overflow: hidden;
}
.cs-guide-bar { border-bottom: 1px solid var(--nx-line); background: var(--nx-bar); }
.cs-guide-title, .cs-install-title { font-family: var(--nx-font-display); letter-spacing: 0.04em; text-transform: none; color: var(--nx-text-hi); }
.cs-guide-body { color: var(--nx-text); font-family: var(--nx-font-body); }
.cs-guide-step { border: 1px solid var(--nx-line); border-radius: var(--nx-r-sm); background: var(--nx-bg); }
.cs-guide-sheet .cs-btn {
  background: var(--nx-card-2); border: 1px solid var(--nx-line-2); border-radius: var(--nx-r-sm); box-shadow: none; text-shadow: none;
  color: var(--nx-text); font-family: var(--nx-font-body); font-weight: var(--nx-fw-semi); letter-spacing: 0.01em; text-transform: none;
}
.cs-guide-sheet .cs-btn:hover { background: var(--nx-raised); color: var(--nx-text-hi); }
.cs-guide-sheet .cs-btn-primary { background: linear-gradient(180deg, var(--nx-hot-fill), var(--nx-hot-deep)); border-color: transparent; color: var(--nx-text-hi); }
.cs-guide-sheet .cs-btn:focus-visible { outline: 2px solid var(--nx-hot); outline-offset: 2px; }
.cs-inpage-bar { background: var(--nx-bar); border-bottom: 1px solid var(--nx-line); box-shadow: none; }
.cs-inpage-title { font-family: var(--nx-font-display); letter-spacing: 0.04em; color: var(--nx-text-hi); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.cs-control) *, html:not(.cs-control) *::before, html:not(.cs-control) *::after { transition: none !important; }
}
.cs-lanes .cs-lane.is-drop-before { box-shadow: inset 4px 0 0 var(--nx-hot); }
.cs-lanes .cs-lane.is-drop-after { box-shadow: inset -4px 0 0 var(--nx-hot); }
.cs-lanes .cs-lane.is-drop-above { box-shadow: inset 0 4px 0 var(--nx-hot); }
.cs-lanes .cs-lane.is-drop-below { box-shadow: inset 0 -4px 0 var(--nx-hot); }
html:not(.cs-control) .cs-tuner-card .cs-tuner-dot.is-on { background: #8ee7ff; box-shadow: 0 0 6px #8ee7ff; }
html:not(.cs-control) :is(.cs-header, .cs-host-banner, .cs-sidebar, .cs-add-bar, .cs-jam-float, .cs-jam-view-banner) .cs-jam-route .cs-btn.is-on { border-color: var(--accent, #7c6cff); background: color-mix(in srgb, var(--accent, #7c6cff) 22%, var(--nx-card-2)); color: var(--nx-text-hi); }
html:not(.cs-control) :is(.cs-header, .cs-host-banner, .cs-sidebar, .cs-add-bar, .cs-jam-float, .cs-jam-view-banner) .cs-mobile-monitor .cs-btn.is-active { background: var(--nx-hot-fill); border-color: transparent; color: var(--nx-text-hi); }
html:not(.cs-control) .cs-sidebar .cs-icon-btn.is-open { color: var(--nx-hot); border-color: var(--nx-hot-line); }