:root {
  color-scheme: light;
  --ink: #1b1d22;
  --muted: #606874;
  --line: #d9dde3;
  --soft: #f5f7f8;
  --panel: #ffffff;
  --green: #147d64;
  --green-soft: #eaf7f2;
  --footer: #303846;
  --sidebar-width: 300px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; line-height: 1.62; letter-spacing: 0; }
button, input, select { font: inherit; letter-spacing: 0; }
a { color: inherit; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 750; }
.brand img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.icon-button { display: none; width: 38px; height: 38px; margin-right: 8px; border: 0; background: transparent; cursor: pointer; }
.topbar-actions { display: flex; align-items: center; gap: 28px; margin-left: auto; color: #343840; font-size: 14px; }
.topbar-actions a { text-decoration: none; }
.topbar-actions a[aria-disabled="true"] { color: #7b818a; cursor: default; }

.guide-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: calc(100vh - 58px); }
.sidebar {
  position: sticky;
  top: 58px;
  align-self: start;
  height: calc(100vh - 58px);
  overflow-y: auto;
  padding: 24px 16px 36px;
  border-right: 1px solid var(--line);
  background: #fbfbfc;
}
.sidebar-heading { padding: 0 12px 14px; color: #7b818a; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 3px; }
.sidebar details { border-radius: 5px; }
.sidebar summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 9px 12px; border-radius: 5px; color: #525a66; font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.sidebar summary:hover { background: #f0f2f4; color: #262b32; }
.sidebar summary:focus-visible { outline: 3px solid #d7eee6; outline-offset: 1px; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: 0 3px 0 14px; border-right: 1.5px solid #7c848e; border-bottom: 1.5px solid #7c848e; transform: rotate(-45deg); transition: transform 160ms ease, border-color 160ms ease; }
.sidebar summary:hover::after { border-color: #343a42; }
.sidebar details[open] summary::after { transform: rotate(45deg); }
.submenu { display: grid; padding: 1px 0 7px; }
.submenu a { padding: 7px 12px 7px 28px; border-left: 2px solid transparent; color: #626b77; font-size: 13px; text-decoration: none; }
.submenu a:hover { color: #1d2229; background: #f0f2f4; }
.submenu a.active { border-left-color: var(--green); background: #edf5f2; color: #126c58; font-weight: 750; }

.guide-main { width: min(100%, 1000px); padding: 54px 64px 96px; }
.guide-main-wide { width: min(100%, 1280px); }
.doc-page h1 { max-width: 820px; margin: 10px 0 16px; font-size: 44px; line-height: 1.12; }
.doc-page h2 { margin: 46px 0 16px; font-size: 26px; line-height: 1.25; }
.doc-page h3 { margin: 0 0 4px; font-size: 17px; }
.doc-page h2 { scroll-margin-top: 84px; }
.lead { max-width: 820px; margin: 0 0 36px; color: var(--muted); font-size: 18px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: #7a818c; font-size: 12px; }
.breadcrumbs strong { color: #4e5661; }

.doc-page.has-page-toc { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-areas: "body toc"; gap: 42px; align-items: start; }
.doc-page-body { grid-area: body; min-width: 0; }
.page-toc { grid-area: toc; position: sticky; top: 84px; display: grid; gap: 8px; padding: 3px 0 3px 16px; border-left: 1px solid var(--line); }
.page-toc > strong { margin-bottom: 4px; color: #737b86; font-size: 11px; text-transform: uppercase; }
.page-toc a { color: #59626d; font-size: 12px; line-height: 1.4; text-decoration: none; }
.page-toc a:hover, .page-toc a:focus-visible { color: var(--green); }
.page-toc a:focus-visible { outline: 2px solid #b8dfd1; outline-offset: 3px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 5px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 34px 0 48px; padding: 20px 22px; border: 1px solid #cfe8df; border-left: 4px solid var(--green); border-radius: 6px; background: var(--green-soft); }
.callout p { margin: 2px 0 0; color: #42685e; font-size: 14px; }
.path-list { display: grid; border-top: 1px solid var(--line); }
.path-list > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.path-list > div > span, .outline-grid span { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border: 1px solid #cdd2d8; border-radius: 50%; color: #555e69; font-size: 13px; font-weight: 800; }
.path-list p { margin: 0; color: var(--muted); }

.glossary-summary { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; align-items: end; margin: 0 0 16px; }
.term-count { padding: 11px 14px; border-left: 3px solid var(--green); background: var(--green-soft); }
.term-count strong, .term-count span { display: block; }
.term-count strong { font-size: 23px; line-height: 1.1; }
.term-count span { color: var(--muted); font-size: 12px; }
.glossary-tools { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; }
.glossary-tools label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.glossary-tools input, .glossary-tools select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #cfd3d8; border-radius: 5px; background: #fff; color: var(--ink); }
.glossary-tools input:focus, .glossary-tools select:focus { outline: 3px solid #d7eee6; border-color: var(--green); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.glossary-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.glossary-table th { padding: 12px; border-bottom: 1px solid var(--line); background: #f1f3f5; text-align: left; }
.glossary-table th:nth-child(1) { width: 17%; }
.glossary-table th:nth-child(2) { width: 34%; }
.glossary-table th:nth-child(3) { width: 27%; }
.glossary-table th:nth-child(4) { width: 22%; }
.glossary-table td { padding: 13px 12px; border-bottom: 1px solid #e5e8eb; vertical-align: top; }
.glossary-table tr:last-child td { border-bottom: 0; }
.glossary-table td:first-child { font-weight: 750; }
.glossary-table td:not(:first-child) { color: #505862; }
.empty-state { padding: 28px; color: var(--muted); text-align: center; }

.prerequisite-box, .deployment-status, .completion-box { margin: 18px 0 26px; padding: 16px 18px; border-radius: 6px; }
.prerequisite-box { border-left: 4px solid #7a7d86; background: var(--soft); }
.prerequisite-box p, .deployment-status p, .completion-box p { margin: 3px 0 0; color: var(--muted); }
.deployment-status { border: 1px solid #ead8a7; border-left: 4px solid #9b6b12; background: #fffaf0; }
.completion-box { border-left: 4px solid var(--green); background: var(--green-soft); }
.tutorial-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; margin: 48px 0 62px; }
.step-number { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; }
.step-content h2 { margin: 2px 0 8px; font-size: 22px; }
.step-content > p { color: #444b55; }
.screenshot-link { display: block; margin: 20px 0 14px; border: 1px solid #cfd3d8; border-radius: 6px; overflow: hidden; background: var(--soft); }
.screenshot-link img { display: block; width: 100%; height: auto; }
.screenshot-link:focus-visible { outline: 4px solid #cfe8df; }
.expected-result { padding: 12px 14px; border-left: 3px solid var(--green); background: var(--green-soft); color: #2f554c; font-size: 14px; }

.reference-section { margin: 64px 0; padding-top: 4px; border-top: 1px solid var(--line); }
.reference-section > p { color: #444b55; }
.reference-section h3 { margin: 28px 0 8px; }
.reference-section code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.92em; }
.reference-section p code, .config-grid code { padding: 2px 5px; border-radius: 3px; background: #f0f2f4; color: #263038; overflow-wrap: anywhere; }
.reference-section pre { overflow-x: auto; margin: 10px 0 22px; padding: 16px 18px; border: 1px solid #29313b; border-radius: 5px; background: #20262e; color: #f5f7fa; line-height: 1.55; }
.reference-section pre code { font-size: 12px; }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 30px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.config-grid > div { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.config-grid dt { color: #747c87; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.config-grid dd { margin: 4px 0 0; }
.reference-note { margin-top: 26px; padding: 14px 16px; border-left: 4px solid var(--green); background: var(--green-soft); }
.reference-note p { margin: 4px 0 0; color: #395e55; }

.chapter-outline { margin-top: 52px; padding-top: 1px; border-top: 1px solid var(--line); }
.outline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.outline-grid > div { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 5px; }
.outline-grid span { flex: 0 0 auto; width: 28px; height: 28px; }

.page-pagination { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 70px; padding-top: 28px; border-top: 1px solid var(--line); }
.page-pagination a { display: grid; min-height: 78px; padding: 13px 16px; border: 1px solid #d5d9df; border-radius: 6px; text-decoration: none; }
.page-pagination a:hover { border-color: #9da5af; background: #fafbfb; }
.page-pagination span { color: #737b86; font-size: 12px; }
.page-pagination strong { color: #176cba; font-size: 14px; }
.page-pagination .page-next { text-align: right; }

.site-footer { position: relative; z-index: 5; padding: 36px 48px 18px; background: var(--footer); color: #f5f7fa; }
.footer-inner { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 44px; max-width: 1200px; margin: 0 auto; }
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand img { width: 40px; height: 40px; border-radius: 7px; }
.footer-brand div { display: grid; }
.footer-brand span { color: #c9cfd8; font-size: 13px; }
.footer-column { display: grid; align-content: start; gap: 8px; }
.footer-column h2 { margin: 0 0 4px; font-size: 14px; }
.footer-column a { display: flex; gap: 8px; color: #d7dce4; font-size: 13px; text-decoration: none; }
.footer-column a[aria-disabled="true"] { cursor: default; }
.footer-column a span { color: #9da6b3; font-size: 11px; }
.footer-note { max-width: 1200px; margin: 30px auto 0; padding-top: 14px; border-top: 1px solid #4b5564; color: #aeb6c2; font-size: 12px; text-align: center; }

@media (max-width: 900px) {
  .icon-button { display: inline-flex; align-items: center; justify-content: center; }
  .topbar-actions { gap: 14px; }
  .topbar-actions > span { display: none; }
  .guide-layout { display: block; }
  .sidebar { position: fixed; top: 58px; left: 0; z-index: 25; width: min(88vw, var(--sidebar-width)); transform: translateX(-102%); transition: transform 180ms ease; box-shadow: 10px 0 28px rgba(20, 20, 25, 0.12); }
  .sidebar.open { transform: translateX(0); }
  .guide-main { padding: 42px 26px 80px; }
  .doc-page.has-page-toc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "body"; gap: 28px; }
  .page-toc { position: static; display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 0 0 18px; border-left: 0; border-bottom: 1px solid var(--line); }
  .page-toc > strong { flex: 0 0 100%; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .topbar { padding: 0 14px; }
  .topbar-actions { display: none; }
  .doc-page h1 { font-size: 35px; }
  .lead { font-size: 17px; }
  .callout { align-items: flex-start; flex-direction: column; }
  .glossary-summary { grid-template-columns: 1fr; }
  .glossary-tools, .outline-grid, .config-grid { grid-template-columns: 1fr; }
  .tutorial-step { grid-template-columns: 1fr; }
  .step-number { width: 34px; height: 34px; }
  .glossary-table, .glossary-table tbody, .glossary-table tr, .glossary-table td { display: block; }
  .glossary-table thead { display: none; }
  .glossary-table tr { padding: 14px; border-bottom: 1px solid var(--line); }
  .glossary-table td { padding: 5px 0; border: 0; }
  .glossary-table td::before { display: block; color: #838a94; font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .glossary-table td:nth-child(1)::before { content: "Term"; }
  .glossary-table td:nth-child(2)::before { content: "Meaning"; }
  .glossary-table td:nth-child(3)::before { content: "Example"; }
  .glossary-table td:nth-child(4)::before { content: "Where you see it"; }
  .page-pagination { grid-template-columns: 1fr; }
  .page-pagination .page-next { text-align: left; }
  .pagination-spacer { display: none; }
  .site-footer { padding: 32px 24px 18px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

@media print {
  .topbar, .sidebar, .glossary-tools, .site-footer, .page-pagination, .page-toc { display: none !important; }
  .guide-layout { display: block; }
  .guide-main { width: 100%; padding: 0; }
  .doc-page.has-page-toc { display: block; }
  .tutorial-step, .screenshot-link { break-inside: avoid; }
}