/* Hardware instructions on the existing cosmos; no commerce or added motion. */
.controllers-page { max-width: 960px; margin-inline: auto; padding-block: 40px 0; text-align: start; }
.controllers-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); margin-block-end: 28px; }
.controllers-trail a, .controllers-page .text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-underline-offset: 5px; }
.controllers-page a:hover { text-decoration: underline; }
.controllers-page a:focus-visible, .controller-help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.controllers-intro { max-width: 760px; margin-block-end: 40px; }
.controllers-intro h1 { font-size: var(--page-title-size); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 24px; max-width: 19ch; overflow-wrap: anywhere; }
.controllers-intro .hero-lead { margin: 0; max-width: 64ch; line-height: 1.85; color: var(--muted); }
.controllers-page h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; margin: 0 0 24px; }
.controllers-page h3 { font-size: 1.6rem; margin: 24px 0 12px; }
.controllers-page p { line-height: 1.85; max-width: 68ch; }
.controllers-choice-title { margin-block-start: 48px; }
.controllers-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.controller-choice { min-width: 0; border-block-start: 1px solid var(--outline); padding-block-start: 24px; }
.controller-choice-art { display: block; }
.controller-choice-art img, .controller-diagram img { display: block; width: 100%; height: auto; }
.controller-choice > p { color: var(--muted); margin: 0 0 8px; }
.controller-diagram { margin: 0 0 48px; }
.controller-diagram > a { display: block; }
.controller-diagram figcaption { font-size: .85rem; color: var(--muted); line-height: 1.7; margin-block-start: 16px; max-width: 70ch; }
.controller-preparation { max-width: 760px; }
.controller-steps { margin: 0; padding-inline-start: 28px; }
.controller-steps li { padding-inline-start: 10px; margin-block: 18px; }
.controller-steps li::marker { color: var(--accent); font-weight: 700; }
.controller-steps p { margin: 0; font-size: 1.15rem; }
.controller-button-notes { margin-block-start: 28px; padding-inline-start: 38px; color: var(--muted); font-size: .95rem; }
.controller-button-notes p { margin-block: 8px; }
.controller-ready { margin-block-start: 48px; padding-block-start: 32px; border-block-start: 1px solid var(--outline); }
.controller-ready p { margin: 0; }
.controller-help { margin-block: 28px 12px; max-width: 760px; }
.controller-help summary { min-height: 44px; padding-block: 10px; cursor: pointer; color: var(--accent); }
.controller-help p { color: var(--muted); margin-block-start: 12px; }
.controller-back { margin-block-start: 20px; }
.controller-scope { color: var(--muted); font-size: .85rem; border-block-start: 1px solid var(--outline); padding-block-start: 24px; margin-block-start: 48px; }
@media (max-width: 640px) {
  .controllers-page { padding-block-start: 24px; }
  .controllers-choices { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .controllers-trail { margin-block-end: 20px; }
  .controllers-intro { margin-block-end: 28px; }
  .controller-diagram { margin-block-end: 32px; }
  .controller-button-notes { padding-inline-start: 0; }
}
@media (forced-colors: active) {
  .controller-help summary, .controllers-page a { color: LinkText; }
  .controller-choice, .controller-ready, .controller-scope { border-color: CanvasText; }
}