/* Documentation and the recorded-results mode share the local lab's palette. */
.site-nav { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:flex-end; }
.site-nav a { color:var(--ink); font-size:.82rem; font-weight:700; text-decoration:none; }
.site-nav a:hover,.site-nav a[aria-current=page] { color:var(--accent); text-decoration:underline; text-underline-offset:5px; }
.skip-link { position:absolute; left:12px; top:-100px; z-index:10; background:var(--panel); padding:12px; }
.skip-link:focus { top:12px; }
.public-notice { margin:0 0 24px; padding:22px 26px; background:var(--cream); color:var(--text-on-light); border-radius:16px; }
.public-notice h2 { margin:0 0 8px; font-size:1.15rem; }
.public-notice p { max-width:90ch; margin:0; font-size:.9rem; color:var(--text-on-light); }
.public-notice a { color:var(--navy); text-decoration-color:#00B4D8; text-decoration-thickness:2px; }
.public-notice p+p { margin-top:10px; }
html[data-mode=public] .tune-panel,
html[data-mode=public] .history-panel,
html[data-mode=public] .experiment-options,
html[data-mode=public] a[href="#tune-heading"] { display:none; }
.site-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.site-links a { display:inline-flex; text-decoration:none; align-items:center; }
.docs-hero { background:var(--panel); border-top:6px solid var(--accent); padding:26px clamp(22px,6vw,88px) 46px; }
.docs-hero .hero-copy { margin-top:42px; }
.docs-hero h1 { font-size:clamp(2.7rem,5.5vw,4.8rem); max-width:1000px; }
.docs-shell { margin:28px auto 0; }
.docs-panel { padding:clamp(24px,4vw,52px); min-width:0; }
.docs-layout { display:grid; grid-template-columns:215px minmax(0,1fr); gap:32px; align-items:start; }
.docs-layout.no-toc { display:block; max-width:85ch; margin:auto; }
.guide-actions { margin:0 0 28px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.docs-toc { position:sticky; top:24px; font-size:.8rem; padding:18px; border-left:3px solid var(--accent); }
.docs-toc ul { list-style:none; margin:0; padding:0; }
.docs-toc li { margin:10px 0; }
.docs-toc ul ul { padding-left:12px; }
.docs-toc a { text-decoration:none; color:var(--muted); }
.docs-toc a:hover { color:var(--accent); text-decoration:underline; }
.prose { min-width:0; overflow-wrap:anywhere; }
.prose p,.prose li { max-width:85ch; }
.prose h2 { font-family:inherit; font-weight:650; font-size:2rem; line-height:1.2; margin-top:36px; scroll-margin-top:20px; }
.prose h3 { font-size:1.1rem; margin-top:30px; scroll-margin-top:20px; }
.prose h2:first-child { margin-top:0; }
.prose li { margin:8px 0; }
.prose a { color:var(--accent); text-underline-offset:3px; }
.prose pre { background:var(--navy); color:#EAEAEA; padding:20px; border-radius:12px; line-height:1.7; overflow-x:auto; white-space:pre; font-size:.83rem; }
.prose code { font-family:ui-monospace,SFMono-Regular,monospace; font-size:.87em; }
.prose p code,.prose li code { background:var(--surface); padding:2px 5px; border-radius:4px; overflow-wrap:anywhere; }
.prose img { display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:12px; }
.prose table { min-width:600px; }
.prose .table-wrap { margin:22px 0; max-height:none; }
.lesson-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:28px 0; }
.lesson-card { padding:28px; box-shadow:none; display:flex; flex-direction:column; }
.lesson-card h2 { font-size:1.3rem; margin-bottom:12px; }
.lesson-card .lesson-number { color:var(--accent); font-size:.74rem; font-weight:800; margin-bottom:12px; }
.lesson-card p { color:var(--muted); font-size:.92rem; }
.lesson-card .site-links { margin-top:auto; padding-top:12px; }
.lesson-card .site-links a { font-size:.8rem; }
.docs-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-top:20px; }
.docs-footer a { color:var(--muted); }
.architecture-image { width:100%; height:auto; border:1px solid var(--line); border-radius:14px; margin:22px 0; background:var(--panel); }
@media(max-width:1000px) {
  .nav { gap:22px; align-items:flex-start; }
  .site-nav { max-width:510px; }
  .docs-layout { grid-template-columns:1fr; }
  .docs-toc { position:static; border-left:0; border-bottom:1px solid var(--line); padding:0 0 18px; }
}
@media(max-width:700px) {
  .nav { flex-direction:column; }
  .site-nav { justify-content:flex-start; gap:10px 18px; }
  .site-nav a { font-size:.76rem; }
  .lesson-cards { grid-template-columns:1fr; }
  .docs-hero { padding-inline:20px; }
  .public-notice { padding:20px; }
  .docs-panel { padding:22px; }
  .prose pre { font-size:.74rem; }
  html[data-mode=public] .hero { min-height:465px; }
}

/* Reading surfaces use the brand's cream / near-black pair. */
.docs-panel { --ink:#1A1A1A; --muted:rgba(26,26,26,.74); --panel:#F8F5F0; --surface:rgba(13,27,42,.045); --line:rgba(13,27,42,.22); --accent:#0D1B2A; --accent-hover:#0D1B2A; background:var(--panel); color:var(--ink); color-scheme:light; }
.docs-panel .prose a,.docs-panel.prose a { text-decoration-color:#00B4D8; text-decoration-thickness:2px; }
.docs-panel .outline-button { border-color:var(--line); }