:root {
  color-scheme: light;
  --navy: #202723;
  --blue: #145e8a;
  --green: #155432;
  --ink: #242824;
  --muted: #58645b;
  --line: #d8e3dc;
  --soft: #eef5ef;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-wrap: break-word; }
button { font: inherit; cursor: pointer; }
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.wrap { width: min(100% - 40px, 1120px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 30; top: -100px; left: 16px; padding: .6rem 1rem; background: var(--navy); color: #fff; }
.skip-link:focus { top: 12px; color: #fff; }
main { min-width: 0; }
main :is(section, article, details) { scroll-margin-top: 20px; }
main :is(h1, h2, h3, h4) { color: var(--navy); line-height: 1.2; letter-spacing: -.02em; }
main h1 { margin: .25em 0 .35em; font-size: clamp(1.85rem, 3vw, 2.4rem); }
main h2 { margin: 0 0 .4em; font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
main h3 { margin: 0 0 .45em; font-size: 1.2rem; }
main h4 { margin: 0 0 .4em; font-size: 1rem; }
main p { margin: 0 0 1em; }
main p:last-child { margin-bottom: 0; }
.eyebrow { margin: 0 0 .55em; color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lead { max-width: 850px; color: #405767; font-size: 1.06rem; line-height: 1.5; }
.note, .source { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.source { margin-top: 1rem; }
.site-header.wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px 25px; min-height: 70px; }
.site-header { border-bottom: 1px solid var(--line); }
.brand { flex: 0 0 auto; color: var(--navy); font-size: 1rem; font-weight: 800; text-decoration: none; }
.header-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 17px; font-size: .85rem; font-weight: 700; }
.header-links a:not(.button) { color: var(--navy); text-decoration: none; }
.header-links a:not(.button):hover { color: var(--green); text-decoration: underline; }
.menu-toggle { display: none; }
.breadcrumbs { padding-block: 12px; color: var(--muted); font-size: .77rem; }
.breadcrumbs a { color: var(--muted); }
.hero { padding: 26px 30px; border-radius: 22px; background: var(--soft); }
.hero-copy { max-width: 930px; }
.hero .lead { margin-bottom: .9rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 1rem 0; }
.hero-actions a:not(.button) { display: inline-flex; align-items: center; min-height: 43px; padding-inline: .5rem; font-size: .9rem; font-weight: 700; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: .6rem 1rem; border: 1px solid var(--green); border-radius: 10px; background: var(--green); color: #fff; font-size: .88rem; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; }
.button:hover { background: #0d5846; border-color: #0d5846; color: #fff; }
.button.secondary { border-color: #bbd0d0; background: #fff; color: var(--navy); }
.button.secondary:hover { border-color: var(--green); background: var(--soft); color: var(--navy); }

.section { padding-block: 32px; }
#website-plan { margin-top: 20px; padding: 26px 28px; border-radius: 20px; background: #f8fbf8; }
.section-head { max-width: 820px; margin-bottom: 23px; }
.section-head .lead { margin-bottom: 0; }
.section-number { display: none; }
.tree-caption { margin: 0 0 15px; color: var(--muted); font-size: .9rem; }
.architecture { min-width: 0; }

/* The graph and the menu describe the same hierarchy: home, groups, pages, sub-pages. */
.graph-wrap { overflow-x: auto; padding: 10px 6px 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overscroll-behavior-inline: contain; }
.site-graph { display: block; width: 100%; min-width: 760px; height: auto; }
.site-graph line, .site-graph path { stroke: #b9cbc9; stroke-width: 1; fill: none; }
.site-graph circle { stroke: #fff; stroke-width: 2; }
.site-graph a:hover circle, .site-graph a:focus-visible circle { stroke: var(--navy); }
.site-graph text { fill: var(--ink); font: 600 10.5px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; }
.graph-note { margin-top: .7rem; }
.site-tree, .site-tree ul { margin: 0; padding: 0; list-style: none; }
.site-tree { margin-top: 22px; }
.site-tree ul { margin: 10px 0 0 10px; padding-left: 20px; border-left: 1px solid #cfe0d6; }
.map-node { position: relative; margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.site-tree ul > .map-node::before { position: absolute; top: 26px; right: 100%; width: 20px; height: 1px; background: #cfe0d6; content: ""; }
.map-home-node { background: #f8fbf8; border-color: #bcd6c6; }
.map-group-node { background: #f4f8f6; }
.map-branch { border-left: 3px solid #d7e6dc; }
.tree-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tree-row strong { color: var(--navy); font-size: 1.02rem; line-height: 1.3; }
.tree-url { color: var(--blue); font: .8rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.tree-why { max-width: 760px; margin: .35rem 0 .55rem; color: #405767; font-size: .93rem; }
.tree-parent { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; }
.map-node .node-keywords, .map-node .page-outline, .connection-list { margin: .25rem 0 .4rem; padding-left: 1.2rem; }
.connection-list { margin-bottom: 0; }
.map-node .node-keywords li, .map-node .page-outline li, .connection-list li { padding: .1rem 0; }

.guide-layout { display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 26px 46px; padding-block: 6px 4px; }
.topic-toc { position: sticky; top: 18px; align-self: start; }
.topic-toc-title { margin: 0 0 .55rem; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.topic-toc ul { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.topic-toc a { display: block; margin-left: -2px; padding: .3rem .85rem; border-left: 2px solid transparent; color: var(--muted); font-size: .86rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.topic-toc a:hover { border-left-color: var(--green); color: var(--green); }
.guide-content { min-width: 0; }
.guide-topic { padding-block: 26px 30px; border-top: 1px solid var(--line); }
.guide-topic:first-child { padding-top: 4px; border-top: 0; }
.topic-body { max-width: 900px; }
.topic-body > :first-child { margin-top: 0; }
.node-label { margin: 0 0 .35rem; color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.hero-points { margin: .1rem 0 1.05rem; padding-left: 1.2rem; color: #405767; font-size: .95rem; }
.hero-points li { padding: .12rem 0; }
.hero-byline { display: flex; align-items: center; gap: 9px; }
.author-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.map-support-title { margin: 20px 0 0; color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 50px; }
.split > * { min-width: 0; }
.editorial-list { margin: 0; padding: 0; list-style: none; }
.editorial-list > article, .editorial-list > li { padding: .75rem 0; }
.editorial-list h3 { font-size: 1.1rem; }
.keyword-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); overscroll-behavior-inline: contain; }
.keyword-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .88rem; }
.keyword-table caption { padding: .6rem .8rem; color: var(--navy); font-size: .82rem; font-weight: 700; text-align: left; }
.keyword-table :is(th, td) { padding: .7rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.keyword-table thead th { background: #f4f8f8; }
.topic-body details:not(.guide-topic), .faq details, .worked-example { max-width: 860px; margin: .9rem 0; border: 1px solid var(--line); }
.topic-body details:not(.guide-topic) > summary, .faq summary, .worked-example > summary { padding: .85rem 1rem; color: var(--navy); font-size: .94rem; font-weight: 700; cursor: pointer; }
.topic-body details:not(.guide-topic) > :not(summary), .faq details > :not(summary), .worked-example > :not(summary) { margin-inline: 1rem; }
.topic-body details:not(.guide-topic) > :last-child, .faq details > :last-child { margin-bottom: 1rem; }
.code-wrap { position: relative; min-width: 0; margin-block: 1rem; background: var(--navy); }
.code-wrap pre { max-width: 100%; margin: 0; padding: 1rem; overflow: auto; color: #ecf3f5; font: .8rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.js-enabled .code-wrap pre { padding-top: 3.1rem; }
.code-wrap code { font: inherit; }
.copy-code { display: none; position: absolute; top: .6rem; right: .6rem; padding: .22rem .5rem; border: 1px solid #8eabb5; background: #1f455c; color: #fff; font-size: .76rem; }
.js-enabled .copy-code { display: block; }
.copy-status { display: block; min-height: 1.2em; margin: .25rem 0; color: var(--green); font-size: .82rem; }
.roadmap { margin: 0; padding-left: 1.5rem; }
.roadmap li { padding: .25rem 0 .8rem .2rem; }
.roadmap li::marker { color: var(--green); font-weight: 700; }
.inline-links, .download-list { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; list-style: none; }
.inline-links a, .download-list a { display: inline-flex; align-items: center; min-height: 40px; }
.service-example { margin: 1rem 0; padding: 1rem 1.2rem; border-left: 3px solid var(--green); background: #f5f8f8; }

.offer { padding: 32px 0 36px; background: var(--green); box-shadow: 0 0 0 100vmax var(--green); clip-path: inset(0 -100vmax); color: #edf4f5; }
.offer :is(h2, h3, p) { color: inherit; }
.offer h2 { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.offer .eyebrow { color: #a8ddca; }
.offer a:not(.button) { color: #c4eee1; }
.offer .button { background: #49b893; border-color: #49b893; color: #092920; }
.offer .button:hover { background: #8bd8bb; border-color: #8bd8bb; }
footer { padding: 28px 0; background: #0b2236; box-shadow: 0 0 0 100vmax #0b2236; clip-path: inset(0 -100vmax); color: #d2e0e5; font-size: .84rem; }
footer a { color: #d2eee9; }
footer .note { color: #c4d5da; }
.offer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.related { margin: 0; padding: 22px 0; line-height: 1.7; }
.mobile-action { display: none; }

@media (max-width: 900px) {
  .guide-layout { grid-template-columns: 1fr; gap: 10px; }
  .topic-toc { position: static; }
  .topic-toc ul { display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .topic-toc a { margin: 0; padding: .42rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
  .topic-toc a:hover { border-color: var(--green); color: var(--green); }
}
@media (max-width: 700px) {
  .site-header.wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: 12px; }
  .js-enabled .menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy); font-size: .85rem; font-weight: 700; }
  .header-links { grid-column: 1 / -1; justify-content: flex-start; gap: 8px 18px; padding: 8px 0 4px; }
  .js-enabled .site-header:not(.menu-open) .header-links { display: none; }
  .site-header.menu-open .header-links { display: flex; }
  .js-enabled .mobile-action.is-visible { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 9px max(14px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -8px 24px rgb(20 45 30 / 9%); }
  .mobile-action .button { width: 100%; min-height: 44px; padding-inline: .5rem; }
  .mobile-action a:not(.button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem; border: 1px solid #b5cfbb; border-radius: 10px; color: var(--green); font-size: .88rem; font-weight: 700; text-align: center; text-decoration: none; }
  .mobile-action a:not(.button):hover { background: var(--soft); }
  .js-enabled body.has-mobile-action { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .mobile-menu-open .mobile-action { display: none !important; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .wrap { width: min(100% - 28px, 1120px); }
  .hero { padding: 24px; border-radius: 20px; }
  main h1 { font-size: clamp(1.75rem, 8.5vw, 2rem); }
  .section { padding-block: 26px; }
  #website-plan { padding: 20px 16px; }
  .map-node { padding: 10px 12px; }
  .tree-row strong { font-size: .98rem; }
  .site-tree ul { margin-left: 6px; padding-left: 14px; }
  .site-tree ul > .map-node::before { width: 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  html { scroll-behavior: auto; }
  body { color: #000; font-size: 10pt; }
  .site-header, .copy-code, .copy-status, #page-inspector { display: none !important; }
  .hero, .section, .offer, footer { padding-block: 15px; background: #fff !important; box-shadow: none; clip-path: none; color: #000 !important; }
  .offer :is(h2, h3, p), footer a { color: #000 !important; }
  .map-columns, .map-branches, .map-support { list-style: none; }
  .graph-wrap { overflow: visible; border: 0; padding: 0; }
  .site-graph { min-width: 0; }
  .map-node { break-inside: avoid-page; }
  .keyword-table { overflow: visible; }
  .keyword-table table { min-width: 0; }
  a { color: #000; }
}