* { box-sizing: border-box; }
body { margin: 0; background: var(--mf-surface-canvas); color: var(--mf-text-primary); font-family: var(--mf-font-sans); line-height: var(--mf-line-height-reading); }
a { color: var(--mf-signal-accent-ink); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--mf-signal-accent-ink); outline-offset: 4px; border-radius: var(--mf-radius-xs); }
.guide-header, .guide-main { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--mf-space-8); }
.guide-header { display: flex; align-items: center; justify-content: space-between; gap: var(--mf-space-6); padding-block: var(--mf-space-6); }
.guide-brand { display: flex; align-items: center; }
.guide-brand img { display: block; width: 180px; height: auto; }
.guide-header nav { display: flex; gap: var(--mf-space-6); }
.guide-header nav a { color: var(--mf-text-primary); font-size: var(--mf-font-size-body); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.guide-header nav a:hover, .guide-header nav a[aria-current] { color: var(--mf-signal-accent-ink); text-decoration: underline; }
.guide-skip { position: absolute; inset-block-start: var(--mf-space-2); inset-inline-start: var(--mf-space-4); transform: translateY(-200%); background: var(--mf-surface-panel); padding: var(--mf-space-3) var(--mf-space-4); }
.guide-skip:focus { transform: translateY(0); }
.guide-main { padding-block: var(--mf-space-6) var(--mf-space-20); }
.guide-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--mf-space-3); align-items: center; font-size: var(--mf-font-size-body-sm); color: var(--mf-text-secondary); }
.guide-breadcrumbs a { color: inherit; }
.guide-hero { max-width: 820px; padding-block: var(--mf-space-12) var(--mf-space-10); }
.guide-eyebrow { margin: 0 0 var(--mf-space-4); color: var(--mf-text-secondary); font-size: var(--mf-font-size-body-sm); }
h1, h2 { color: var(--mf-text-strong); letter-spacing: var(--mf-letter-spacing-title); line-height: var(--mf-line-height-title); text-wrap: balance; }
h1 { font-size: var(--mf-font-size-display); font-weight: var(--mf-font-weight-semibold); margin: 0 0 var(--mf-space-5); }
h2 { font-size: var(--mf-font-size-title-md); font-weight: var(--mf-font-weight-semibold); }
.guide-deck { font-size: var(--mf-font-size-body-lg); color: var(--mf-text-secondary); max-width: 66ch; margin: 0; }
.guide-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mf-space-4); }
.guide-index article { padding: var(--mf-space-8); background: var(--mf-surface-panel); border-radius: var(--mf-radius-lg); display: flex; flex-direction: column; align-items: flex-start; }
.guide-index h2 { margin: 0 0 var(--mf-space-4); }
.guide-index h2 a { color: var(--mf-text-strong); text-decoration: none; }
.guide-index p { font-size: var(--mf-font-size-body); margin: 0 0 var(--mf-space-8); }
.guide-read { margin-top: auto; font-size: var(--mf-font-size-body); min-height: 44px; display: inline-flex; align-items: center; gap: var(--mf-space-3); }
.guide-topics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mf-space-12); padding-top: var(--mf-space-12); }
.guide-topics h2 { margin-top: 0; }
.guide-topics p { font-size: var(--mf-font-size-body); color: var(--mf-text-secondary); }
.guide-topics nav { display: flex; flex-wrap: wrap; gap: var(--mf-space-3) var(--mf-space-5); align-content: start; }
.guide-topics nav a { min-height: 44px; display: inline-flex; align-items: center; }
.guide-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--mf-space-12); }
.guide-contents { font-size: var(--mf-font-size-body-sm); }
.guide-contents p { margin: 0 0 var(--mf-space-3); font-weight: var(--mf-font-weight-semibold); }
.guide-contents a { display: block; padding-block: var(--mf-space-3); color: var(--mf-text-secondary); }
.guide-article { max-width: 68ch; font-size: var(--mf-font-size-body-lg); }
.guide-article section { margin-bottom: var(--mf-space-12); }
.guide-article h2 { margin-top: 0; margin-bottom: var(--mf-space-4); scroll-margin-top: var(--mf-space-6); }
.guide-article p { margin: 0 0 var(--mf-space-5); }
.guide-example-list { margin: var(--mf-space-6) 0 0; padding: 0; list-style: none; }
.guide-example-list li { background: var(--mf-surface-panel); border-radius: var(--mf-radius-md); padding: var(--mf-space-6); margin-bottom: var(--mf-space-3); }
.guide-example-title { font-weight: var(--mf-font-weight-semibold); color: var(--mf-text-strong); }
.guide-example-list p { font-size: var(--mf-font-size-body); margin-block: var(--mf-space-2) var(--mf-space-3); }
.guide-example-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mf-space-3); font-size: var(--mf-font-size-body); }
.guide-example-views a { display: inline-flex; align-items: center; min-height: 44px; }
.guide-example-views span { color: var(--mf-text-secondary); }
.guide-next nav { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--mf-space-4); gap: var(--mf-space-3); }
@media (max-width: 760px) {
  .guide-header, .guide-main { padding-inline: var(--mf-space-5); }
  .guide-header { flex-wrap: wrap; gap: var(--mf-space-3); padding-block: var(--mf-space-4); }
  .guide-header nav { gap: var(--mf-space-5); }
  .guide-brand img { width: 156px; }
  .guide-hero { padding-block: var(--mf-space-8); }
  h1 { font-size: var(--mf-font-size-title-lg); }
  .guide-index, .guide-topics, .guide-layout { grid-template-columns: 1fr; gap: var(--mf-space-5); }
  .guide-index article { padding: var(--mf-space-6); }
  .guide-contents { margin-bottom: var(--mf-space-6); }
  .guide-contents nav { padding: var(--mf-space-5); border-radius: var(--mf-radius-md); background: var(--mf-surface-panel); }
  .guide-article section { margin-bottom: var(--mf-space-10); }
}
@media (forced-colors: active) {
  .guide-index article, .guide-contents nav, .guide-example-list li { border: 1px solid CanvasText; }
}