.hero { width: var(--page-frame); margin: auto; padding: var(--page-hero-top-space) 0 28px; }
.hero h1 { max-width: 860px; margin: 12px 0 16px; font-size: var(--type-page-title); line-height: 1.05; letter-spacing: -.055em; }
.hero-copy { max-width: 650px; color: var(--muted); font-size: var(--type-body-large); line-height: 1.7; }
.guide { width: var(--page-frame); margin: auto; padding-bottom: 90px; }
.guide p, .guide li { line-height: 1.7; color: var(--muted); }
.guide strong, .guide h2, .guide h3 { color: var(--ink); }
.guide a:not(.button) { color: var(--lime); }
.guide a:focus-visible, .guide summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
.guide [id] { scroll-margin-top: 24px; }
.guide-outline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide-outline button { display: grid; gap: 6px; min-height: 44px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.guide-outline button:hover { border-color: var(--lime); }
.guide-outline button[aria-selected="true"] { border-color: var(--lime); background: rgb(52 211 153 / 10%); }
.guide-outline button:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.guide-section[hidden] { display: none; }
.guide-outline strong { font-size: var(--type-body-large); }
.guide-outline span { color: var(--muted); font-size: var(--type-label); line-height: 1.5; }
.guide-section { margin-top: 32px; }
.guide .section-heading { margin-bottom: 24px; }
.guide .section-heading h2 { margin: 8px 0 12px; font-size: var(--type-section-title); letter-spacing: -.04em; }
.guide .section-heading p { max-width: 720px; margin: 0; }
.guide-steps { margin: 0; padding: 0; list-style: none; counter-reset: setup; }
.guide-steps > li { position: relative; margin-top: 14px; padding: 24px 28px 24px 76px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); counter-increment: setup; }
.guide-steps > li::before { content: counter(setup); position: absolute; top: 24px; left: 24px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); font-weight: 700; }
.guide h3 { margin: 0 0 12px; font-size: var(--type-card-title); line-height: 1.4; }
.guide ol:not(.guide-steps), .guide ul { padding-left: 22px; }
.guide li + li { margin-top: 8px; }
.guide-topic, .guide-question { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.guide-question { padding: 0 18px; background: rgb(0 0 0 / 12%); }
.guide summary { min-height: 44px; padding-block: 14px; cursor: pointer; font-weight: 600; color: var(--ink); line-height: 1.5; }
.guide-topic > summary { padding: 20px 24px; font-size: var(--type-body-large); }
.guide-topic[open] > summary { border-bottom: 1px solid var(--line); }
.guide-topic-body { padding: 8px 24px 24px; }
.guide-topic-body > :last-child { margin-bottom: 0; }
.guide-transports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.guide-note, .doc-note { padding: 14px 18px; border-left: 3px solid var(--lime); background: rgb(52 211 153 / 5%); }
.guide-board-list { margin: 0 0 16px; }
.guide-board-list > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.guide-board-list dt { color: var(--ink); font-weight: 600; }
.guide-board-list dd { margin: 0; }
.board-reference { max-width: 620px; margin: 20px auto; }
.board-reference img { display: block; width: 100%; height: auto; filter: invert(1); }
.board-reference figcaption { margin-top: 10px; color: var(--muted); font-size: var(--type-label); line-height: 1.6; }
.control-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.control-item { padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.control-item:last-child { grid-column: 1 / -1; }
.control-item p { margin-bottom: 0; }
.keycap { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--muted); border-radius: 6px; color: var(--ink); font-family: var(--font-mono); }
.guide code { overflow-wrap: anywhere; }
.video-tutorial-collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.video-tutorial-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.video-tutorial-player { aspect-ratio: 16 / 9; background: #080d0f; }
.video-tutorial-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-tutorial-copy { padding: 20px; }
.video-tutorial-copy h3 { margin-top: 8px; }
.video-tutorial-copy p { margin-bottom: 0; }
.doc-label { color: var(--lime); font-size: var(--type-label); }
@media (max-width: 900px) {
  .video-tutorial-collection { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .guide-transports, .guide-board-list > div, .control-list { grid-template-columns: minmax(0, 1fr); }
  .guide-outline { gap: 8px; }
  .guide-outline button { padding: 12px 6px; text-align: center; }
  .guide-outline strong { font-size: var(--type-button); }
  .guide-outline span { display: none; }
  .guide-section { margin-top: 24px; }
  .guide-steps > li { padding: 64px 18px 18px; }
  .guide-steps > li::before { top: 18px; left: 18px; }
  .guide-topic > summary, .guide-topic-body { padding-inline: 18px; }
}

.guide-learning { margin-bottom: 40px; }
.guide-comparison { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; line-height: 1.6; }
.guide-comparison th, .guide-comparison td { padding: 14px 16px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: top; }
.guide-comparison th { color: var(--ink); }
.guide-comparison td { color: var(--muted); }
.guide-comparison th:last-child, .guide-comparison td:last-child { background: rgb(52 211 153 / 5%); color: var(--ink); }
@media (max-width: 600px) {
  .guide-comparison th, .guide-comparison td { padding: 12px 8px; }
}