.guide-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;padding-top:40px;padding-bottom:90px;align-items:start}
.guide-nav{position:sticky;top:120px;font-size:15px;line-height:1.5;max-height:calc(100dvh - 145px);overflow:auto;padding:0 10px 8px 0;scrollbar-width:thin}
.guide-nav summary,.guide-toc summary{font-size:16px;font-weight:700;cursor:pointer;padding:12px 0;color:var(--ink)}
.guide-menu-hint{display:block;margin:5px 0 0;font-size:14px;font-weight:400;color:var(--ink-soft)}
.guide-nav a{display:block;overflow-wrap:anywhere;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.guide-nav a:hover{background:var(--paper-sunk);color:var(--ink)}
.guide-overview{padding:12px 10px;margin:0 0 18px;border:1px solid var(--rule);border-radius:3px}
.guide-nav-group{padding:0;margin:0 0 22px}
.guide-nav-group h2{font:700 14px/1.5 var(--sans);letter-spacing:.025em;margin:0 0 7px;color:var(--ink)}
.guide-nav-group ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.guide-nav-group li{margin:0;padding:0}
.guide-nav-group a{padding:11px 10px;min-height:44px;border-bottom:1px solid var(--rule);border-left:3px solid transparent}
.guide-nav a[aria-current="page"]{border-left:3px solid var(--accent);background:var(--accent-wash);color:var(--ink);font-weight:650;text-decoration:none}
.guide-current{display:block;margin-top:3px;font-size:13px;font-weight:500;color:var(--ink-soft)}
.guide-toc{padding:0 18px;border:1px solid var(--rule);border-radius:3px;background:var(--paper-sunk);margin-bottom:30px}
.guide-prose .guide-toc ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding:0;margin:0 0 14px}
.guide-prose .guide-toc li{margin:0;min-width:0}
.guide-toc a{display:block;padding:9px 0;font-size:15px;line-height:1.5;text-underline-offset:3px}
.guide-directory-group{padding:0;margin:0 0 36px}
.guide-prose .guide-page-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0;margin:18px 0 0}
.guide-prose .guide-page-grid li{margin:0;min-width:0;display:flex}
.guide-page-card{display:flex;flex-direction:column;width:100%;padding:20px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink);text-decoration:none}
.guide-page-card:hover{background:var(--paper-sunk);border-color:var(--accent)}
.guide-prose .guide-page-card h3{margin:0 0 10px;font-size:20px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.guide-prose .guide-page-card p{margin:0 0 18px;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.guide-prose{min-width:0;max-width:820px;font-size:17px;line-height:1.8;overflow-wrap:anywhere}
.guide-prose>p:first-child{margin-top:0}
.guide-prose h2{font-size:clamp(25px,3vw,34px);line-height:1.2;margin:52px 0 20px;scroll-margin-top:125px;letter-spacing:-.03em}
.guide-prose h3{font-size:22px;line-height:1.35;margin:32px 0 14px;scroll-margin-top:125px}
.guide-prose p{margin:0 0 20px}
.guide-prose ul,.guide-prose ol{padding-left:1.5em;margin:18px 0 26px}
.guide-prose li{margin:10px 0}
.guide-prose li p{margin:8px 0}
.guide-prose pre{position:relative;max-width:100%;overflow:auto;padding:24px;background:#243e35;color:#f6f3e9;border:1px solid #3c594e;border-radius:8px;font:var(--text-small)/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;margin:24px 0}
.guide-prose pre code{padding:0;background:none;color:inherit;font:inherit}
.guide-prose code{font-size:max(var(--text-small), .9em);background:#e8e9df;padding:2px 5px;border-radius:3px;overflow-wrap:anywhere}
.guide-prose blockquote{margin:24px 0;border-left:4px solid #ba532f;background:#edece1;padding:20px 24px}
.guide-prose blockquote p:last-child{margin-bottom:0}
.table-scroll{overflow:auto;max-width:100%;margin:24px 0;border:1px solid #cdd1c0;border-radius:6px}
.table-scroll table{width:100%;margin:0;border-collapse:collapse;font-size:1rem;line-height:1.6}
.table-scroll th,.table-scroll td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #d7dacd;min-width:120px}
.table-scroll th{background:#e9ecdf;font-weight:750;color:#293d31}
.table-scroll tr:last-child td{border-bottom:0}
.doc-source{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px;margin-top:24px}
.spec-clause{padding:18px 0;border-bottom:1px solid #d4d8c9;scroll-margin-top:125px}
.spec-clause:target{background:#f0dfb0;outline:10px solid #f0dfb0;color:#24382e}
.copy-code{display:block;margin-top:-14px;margin-bottom:26px;background:transparent;border:1px solid #b9c2af;border-radius:4px;padding:7px 12px;font:var(--text-small) ui-monospace,monospace;color:inherit;cursor:pointer}
.nav-star{white-space:nowrap}
.quickstart{margin:0 0 24px;padding:30px;background:#243e35;color:#fff3d3;border-radius:12px;display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center}
.quickstart h3{font-size:26px;margin:0 0 12px;line-height:1.15}
.quickstart p{margin:0;line-height:1.65}
.quickstart pre{overflow:auto;font:var(--text-small)/1.8 ui-monospace,monospace;border:1px solid #577060;border-radius:6px;padding:18px;white-space:pre-wrap;overflow-wrap:anywhere}
.quickstart code{font:inherit}
.quickstart a{color:#f7d48d}
html[data-power="off"] .guide-prose{color:inherit}
@media(max-width:850px){.guide-layout{grid-template-columns:1fr;gap:32px;padding-top:24px}.guide-nav{position:static;max-height:none;padding:4px 18px;border:1px solid var(--rule);border-radius:3px}.guide-pages-menu[open]>nav{margin-top:12px}.guide-nav-group ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.guide-prose{max-width:none}.quickstart{grid-template-columns:1fr}}
@media(max-width:480px){.guide-prose{font-size:16px}.guide-prose pre{padding:18px;font-size:var(--text-small)}.guide-nav-group ul,.guide-prose .guide-toc ul,.guide-prose .guide-page-grid{grid-template-columns:1fr}.doc-source{gap:10px}.quickstart{padding:22px}.quickstart pre{font-size:var(--text-small)}.table-scroll th,.table-scroll td{padding:12px}.guide-prose blockquote{padding:16px}}
@media print{.guide-nav,.doc-source,.copy-code{display:none}.guide-layout{display:block}.guide-prose{max-width:none}.guide-prose pre{white-space:pre-wrap}.table-scroll{overflow:visible}}

/* Worked examples (learn.html) */
.guide-prose .worked-example { margin: 44px 0; padding: 26px; border: 1px solid var(--rule); border-top: 4px solid var(--eu-blue, #003399); border-radius: 3px; background: var(--paper-sunk); }
.guide-prose .worked-example h2 { margin: 0 0 22px; font-size: clamp(25px, 2.6vw, 32px); line-height: 1.25; }
.example-label { display: table; padding: 6px 10px; margin-bottom: 14px; background: #ffcc00; color: #14244b; font: 700 14px/1.5 var(--mono); letter-spacing: .07em; }
.example-title { display: block; color: var(--ink); }
.guide-prose .example-brief { margin: 0 0 22px; padding: 18px 20px; border-left: 3px solid #003399; background: var(--note-paper, #fff1b8); color: var(--note-ink, #172a55); font-size: 16px; line-height: 1.7; }
.example-brief > strong { display: block; margin-bottom: 5px; }
.guide-prose .example-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; counter-reset: example-step; margin: 0; padding: 0; }
.guide-prose .example-steps > li { counter-increment: example-step; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.example-steps > li::before { content: counter(example-step, decimal-leading-zero); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 13px; background: #003399; color: #fffdf5; box-shadow: 3px 3px 0 #ffcc00; font: 700 16px/1 var(--mono); }
.example-steps > li > strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 18px; line-height: 1.4; }
.guide-prose .worked-example > p:not(.example-brief) { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.7; }
@media (min-width: 851px) and (max-width: 1100px) { .guide-prose .example-steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .guide-prose .worked-example { padding: 18px 14px; margin: 34px 0; }
  .guide-prose .example-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .guide-prose .example-steps > li { padding: 18px; }
  .guide-prose .example-brief { padding: 14px 16px; }
}
@media print {
  .guide-prose .worked-example { background: #fff; padding: 16px; }
  .guide-prose .example-steps { display: block; }
  .guide-prose .example-steps > li { break-inside: avoid; margin: 12px 0; }
}
