/* Shared glass language for the guide and installer. Their print layout stays intact. */
@media screen {
  body.guide-body {
    --guide-ink: var(--brand-ink, #0b1934);
    --guide-muted: var(--brand-muted, #65728a);
    --guide-paper: var(--brand-paper, #f4f7ff);
    --guide-surface: var(--brand-surface, #ffffffdc);
    --guide-raised: var(--brand-raised, #f5f9ffeb);
    --guide-line: var(--brand-line, #86a9d742);
    --guide-note: #edf5ffdd;
    --guide-link: var(--brand-blue, #245de8);
    --guide-accent: var(--brand-orange, #ffb45e);
    --guide-glow: #245de814;
    --guide-ribbon-opacity: .13;
    --guide-shadow: var(--brand-shadow, inset 0 1px 0 #ffffff70, 0 14px 38px #153a720e);
    position: relative;
    isolation: isolate;
    color: var(--guide-ink);
    background: radial-gradient(ellipse at 45% 0%, #e6f1ff66, transparent 60%), var(--guide-paper);
    font-family: var(--brand-font, Inter, "Segoe UI", Arial, sans-serif);
    font-size: 17px;
    line-height: 1.7;
    font-synthesis: none;
  }

  :root[data-theme=night] body.guide-body {
    color-scheme: dark;
    --guide-ink: var(--brand-ink, #e6edf9);
    --guide-muted: var(--brand-muted, #adbed3);
    --guide-paper: var(--brand-paper, #091426);
    --guide-surface: var(--brand-surface, #122138e8);
    --guide-raised: var(--brand-raised, #172a43ed);
    --guide-line: var(--brand-line, #89b4e938);
    --guide-note: #172d4be3;
    --guide-link: var(--brand-blue, #99bfff);
    --guide-glow: #48bbdf1c;
    --guide-ribbon-opacity: .24;
    --guide-shadow: var(--brand-shadow, inset 0 1px 0 #ffffff0c, 0 16px 40px #020a2024);
    color: var(--guide-ink);
    background: radial-gradient(ellipse at 45% 0%, #245de814, transparent 60%), var(--guide-paper);
  }

  body.guide-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("/assets/obsidian-ribbons.svg") center / cover no-repeat;
    opacity: var(--guide-ribbon-opacity);
  }

  :root body.guide-body :is(.guide-intro, .guide-content, .install-main, .guide-footer, .install-footer) a {
    color: var(--guide-link);
    text-underline-offset: 4px;
  }

  :root body.guide-body :is(.guide-intro, .guide-content, .install-main, .guide-toc, .guide-footer, .install-footer) :focus-visible {
    outline: 3px solid var(--guide-link);
    outline-offset: 4px;
  }

  :root body.guide-body :is(.guide-intro h1, .install-main h1) {
    color: var(--guide-ink);
    font-size: clamp(36px, 4.2vw, 58px);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.14;
  }

  :root body.guide-body :is(.guide-intro h1 em, .install-main h1 em) { color: var(--guide-link); }
  :root body.guide-body .guide-kicker { color: var(--guide-link); font-size: 11px; font-weight: 650; letter-spacing: .14em; }
  :root body.guide-body :is(.guide-intro > div > p:last-child, .install-lead) { color: var(--guide-muted); font-size: 18px; line-height: 1.75; }
  :root body.guide-body strong { font-weight: 600; }

  :root body.guide-body :is(.guide-edition, .guide-toc, .guide-section, .install-card, .install-network) {
    border-color: var(--guide-line);
    border-radius: 8px 24px 8px 24px;
    color: var(--guide-ink);
    background: linear-gradient(140deg, #ffffff0c, transparent 65%), var(--guide-surface);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--guide-shadow);
  }

  :root body.guide-body .guide-edition { border-left-color: var(--guide-accent); }
  :root body.guide-body .guide-edition strong { font-size: 18px; }
  :root body.guide-body :is(.guide-edition span, .guide-edition small, .guide-toc-note) { color: var(--guide-muted); }
  :root body.guide-body :is(.guide-section, .install-card) { position: relative; min-width: 0; }

  body.guide-body :is(.guide-section, .install-card)::before {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    background: linear-gradient(var(--guide-link), var(--guide-link)) left top / 17px 1px no-repeat,
      linear-gradient(var(--guide-link), var(--guide-link)) left top / 1px 17px no-repeat,
      linear-gradient(var(--guide-link), var(--guide-link)) right bottom / 17px 1px no-repeat,
      linear-gradient(var(--guide-link), var(--guide-link)) right bottom / 1px 17px no-repeat;
    opacity: .2;
  }

  :root body.guide-body .guide-toc {
    top: calc(var(--legion-header-offset, 112px) + 18px);
    max-height: calc(100vh - var(--legion-header-offset, 112px) - 36px);
    max-height: calc(100dvh - var(--legion-header-offset, 112px) - 36px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #8fa7ca transparent;
  }

  :root body.guide-body .guide-toc h2 { color: var(--guide-ink); font-weight: 500; font-size: 23px; letter-spacing: -.03em; }
  :root body.guide-body .guide-toc a { color: var(--guide-ink); }
  :root body.guide-body .guide-toc a:hover { color: var(--guide-link); }
  :root body.guide-body .guide-toc-note { border-color: var(--guide-line); }
  :root body.guide-body .guide-section h2 { color: var(--guide-ink); font-size: 28px; font-weight: 500; line-height: 1.3; letter-spacing: -.035em; }
  :root body.guide-body .guide-section h3 { color: var(--guide-ink); font-size: 20px; font-weight: 550; letter-spacing: -.02em; }

  :root body.guide-body :is(.guide-number, .guide-state, .install-platform) {
    color: var(--guide-link);
    background: var(--guide-glow);
    border-color: var(--guide-line);
    box-shadow: inset 0 1px 0 #ffffff15;
  }

  :root body.guide-body .guide-number { border-radius: 8px; }
  :root body.guide-body .guide-state { border-radius: 9px; }
  :root body.guide-body :is(.guide-mini, .install-note) { background: var(--guide-raised); border-color: var(--guide-line); border-radius: 13px; }
  :root body.guide-body .guide-mini h3 { font-size: 20px; }
  :root body.guide-body .guide-note { color: var(--guide-ink); background: var(--guide-note); border-left-color: var(--guide-accent); border-radius: 0 12px 12px 0; }
  :root body.guide-body .guide-note strong { color: var(--guide-ink); }
  :root body.guide-body .guide-steps li::marker { color: var(--guide-link); }
  :root body.guide-body :is(.guide-table-wrap, .guide-table th, .guide-table td) { border-color: var(--guide-line); }
  :root body.guide-body .guide-table caption { color: var(--guide-muted); background: var(--guide-raised); border-color: var(--guide-line); }
  :root body.guide-body .guide-table thead th { color: var(--guide-link); background: var(--guide-note); }
  :root body.guide-body .guide-table tbody th { color: var(--guide-ink); font-weight: 600; }
  :root body.guide-body .guide-table tbody tr:hover { background: var(--guide-glow); }
  :root body.guide-body code { background: var(--guide-raised); border-color: var(--guide-line); color: var(--guide-ink); }

  :root body.guide-body .install-grid { gap: 24px; }
  :root body.guide-body .install-platform { border: 1px solid var(--guide-line); border-radius: 14px; }
  :root body.guide-body .install-card h2 { color: var(--guide-ink); font-size: 30px; font-weight: 500; line-height: 1.25; letter-spacing: -.035em; }
  :root body.guide-body .install-network h2 { color: var(--guide-ink); font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
  :root body.guide-body :is(.install-card p, .install-card li, .install-network p) { color: var(--guide-muted); font-size: 16px; line-height: 1.75; }
  :root body.guide-body :is(.install-card strong, .install-network strong) { color: var(--guide-ink); }
  :root body.guide-body :is(.install-release, .install-hash, .install-note a, .install-network a) { color: var(--guide-link); }
  :root body.guide-body .install-release { font-size: 14px; font-weight: 600; }

  :root body.guide-body :is(.install-download, .install-secondary) {
    min-width: 0;
    min-height: 50px;
    border: 1px solid var(--guide-line);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  :root body.guide-body a.install-download { color: #fff; background: linear-gradient(115deg, #2869f3, #245de8); border-color: #245de8; box-shadow: inset 0 1px 0 #ffffff20, 0 8px 22px #245de823; }
  :root body.guide-body a.install-download:hover { color: #fff; background: linear-gradient(115deg, #245de8, #1748be); border-color: #1748be; box-shadow: inset 0 1px 0 #ffffff20, 0 10px 25px #245de82c; }
  :root body.guide-body .install-secondary { color: var(--guide-link); background: var(--guide-raised); box-shadow: inset 0 1px 0 #ffffff0e; }
  :root body.guide-body .install-secondary:hover { color: var(--guide-link); background: var(--guide-note); border-color: var(--guide-link); }
  :root body.guide-body .dm-context { color: var(--guide-muted); }
  :root body.guide-body .dm-control { color: var(--guide-link); background: var(--guide-raised); border-color: var(--guide-line); border-radius: 9px; }
  :root body.guide-body .dm-control:hover { background: var(--guide-note); border-color: var(--guide-link); }
  :root body.guide-body :is(.guide-footer, .install-footer) { border-color: var(--guide-line); color: var(--guide-muted); }
  :root body.guide-body .guide-footer strong { color: var(--guide-ink); }

  @media (max-width: 800px) {
    body.guide-body { font-size: 16px; }
    :root body.guide-body .guide-toc { max-height: none; overflow: visible; }
    :root body.guide-body :is(.guide-intro > div > p:last-child, .install-lead) { font-size: 17px; }
    :root body.guide-body .guide-section h2 { font-size: 25px; }
    :root body.guide-body :is(.guide-edition, .guide-toc, .guide-section, .install-card, .install-network) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  }

  @media (max-width: 490px) {
    body.guide-body::before { background-position: 65% center; }
    :root body.guide-body :is(.guide-intro h1, .install-main h1) { font-size: 36px; line-height: 1.15; }
    :root body.guide-body .guide-section h2 { font-size: 23px; }
    :root body.guide-body .install-card h2 { font-size: 27px; }
    :root body.guide-body .install-card { padding: 22px 18px; }
    :root body.guide-body :is(.install-download, .install-secondary) { padding: 16px 14px; font-size: 14px; }
    :root body.guide-body .install-network { padding: 23px 20px; }
    :root body.guide-body :is(.guide-edition, .guide-toc, .guide-section, .install-card, .install-network) { border-radius: 8px 21px 8px 21px; }
    :root body.guide-body :is(.guide-section, .install-card)::before { inset: 9px; opacity: .16; }
    :root body.guide-body .install-lead { font-size: 16px; }
    :root body.guide-body .install-network strong { overflow-wrap: anywhere; }
    :root body.guide-body .install-footer { padding-inline: 20px; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root body.guide-body :is(.install-download, .install-secondary) { transition: none; }
  }

  @media (forced-colors: active) {
    body.guide-body::before, body.guide-body :is(.guide-section, .install-card)::before { display: none; }
    :root body.guide-body :is(.guide-edition, .guide-toc, .guide-section, .guide-mini, .guide-note, .install-card, .install-network, .install-note) { background: Canvas; border-color: CanvasText; color: CanvasText; backdrop-filter: none; }
    :root body.guide-body :is(a.install-download, a.install-secondary, .dm-control) { background: ButtonFace; border-color: ButtonText; color: ButtonText; }
  }
}

@media print {
  body.guide-body::before,
  body.guide-body :is(.guide-section, .install-card)::before { display: none !important; }
}