/* Headless guide — Brickyard layer. Loaded after styles.css (which remaps the
   Tailwind CDN utilities). Material: stone (a terminal-grey, cool slate). */
:root { --primary: var(--m-ink); --secondary: var(--grass-ink); --accent: var(--m-ink); --neutral: var(--ink);
  --base-100: var(--page); --base-200: var(--page-2); --base-300: var(--line); --muted: var(--ink-2); --faint: var(--ink-3);
  --paper: var(--page); --paper-2: var(--page-2); --line-strong: var(--line-2); --accent-wash: var(--m-soft); }
body { background: var(--page) !important; color: var(--ink-2); font-family: var(--font-ui); }
.font-canela { font-family: var(--display) !important; font-stretch: 116%; letter-spacing: -0.02em; }
.font-inter { font-family: var(--font-ui) !important; }
h1, h2, h3, h4 { color: var(--ink); }
.bg-gray-50, .bg-gray-100 { background-color: var(--page-2) !important; }
.bg-white { background-color: #fff !important; }
.text-gray-600, .text-gray-700 { color: var(--ink-2) !important; }
.text-gray-500 { color: var(--ink-3) !important; }
.shadow, .shadow-md, .shadow-lg, .shadow-sm { box-shadow: none !important; }

/* hero: a sky banner with the guide's scene */
.hero-gradient { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(180deg, var(--sky-a), var(--sky-b) 88%, var(--page)) !important; color: var(--ink) !important; padding-bottom: 5rem !important; }
.hero-gradient::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; background: var(--page); -webkit-mask: var(--strata-mask) repeat-x bottom / 520px 28px; mask: var(--strata-mask) repeat-x bottom / 520px 28px; --strata-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V10h20V18h20V24h20V20h20V20h20V24h20V24h20V12h20V20h20V12h20V20h20V12h20V24h20V8h20V16h20V8h20V16h20V20h20V12h20V12h20V20h20V24h20V16h20V8h20V28H0z'/%3E%3C/svg%3E"); }
.hero-gradient h1 { color: var(--ink) !important; font: 900 clamp(2rem, 4.4vw, 3.5rem)/1.03 var(--display) !important; font-stretch: 120% !important; letter-spacing: -0.028em; }
.hero-gradient p, .hero-gradient span, .hero-gradient li { color: var(--ink-2) !important; opacity: 1 !important; }
.hero-gradient h3 { color: var(--ink) !important; font-family: var(--display); font-stretch: 112%; }
.hero-gradient .bg-white\/10 { background: #fff !important; border: 2px solid var(--ink); border-radius: 0 !important; backdrop-filter: none !important; box-shadow: 4px 4px 0 var(--m-side) !important; }
.hero-gradient .bg-white\/10 p { opacity: 1 !important; }
.hero-gradient svg { color: var(--m-ink); }
.g-scene { position: relative; aspect-ratio: 1.2; width: 100%; min-height: 220px; max-height: 360px; }
.g-scene .vx-canvas { position: absolute; inset: 0; }

/* contents */
.toc-sidebar { background: #fff !important; border-right: 2px solid var(--line-2) !important; }
.toc-sidebar h3 { font-family: var(--display) !important; font-stretch: 116%; }
.toc-link { border-left: 0 !important; padding: 0.4rem 0.6rem !important; font-weight: 600; color: var(--ink-2) !important; transition: background 0.15s, color 0.15s, transform 0.15s var(--ease) !important; }
.toc-link:hover, .toc-link.active { background: var(--m-soft); color: var(--ink) !important; transform: translateX(3px); }
.toc-toggle { background: var(--ink) !important; border-radius: 0 !important; box-shadow: 4px 4px 0 var(--m); }

/* content blocks */
.section-divider { height: 28px !important; margin: 0 !important; background: var(--page-2) !important; -webkit-mask: var(--strata-mask) repeat-x bottom / 520px 28px; mask: var(--strata-mask) repeat-x bottom / 520px 28px; --strata-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V12h20V4h20v10h20V0h20v14h20v8h20V8h20v-6h20v14h20v6h20V6h20v10h20v-8h20V2h20v16h20v-6h20V4h20v12h20v-4h20V8h20v10h20v-6h20V0h20v20H0z'/%3E%3C/svg%3E"); }
.code-block { background: var(--ink) !important; color: #e6edff !important; border-radius: 0 !important; box-shadow: 5px 5px 0 var(--m); font-family: var(--code) !important; }
code { font-family: var(--code); background: var(--m-soft); color: var(--m-ink); padding: 0.05em 0.35em; font-weight: 600; }
.code-block code { background: none; color: inherit; padding: 0; }
.highlight-box, .warning-box { border: 2px solid var(--ink) !important; border-left-width: 2px !important; border-radius: 0 !important; background: var(--m-soft) !important; box-shadow: 5px 5px 0 var(--m); }
.warning-box { background: var(--sand-soft) !important; box-shadow: 5px 5px 0 var(--sand); }
.mermaid-container { border: 2px solid var(--ink) !important; border-radius: 0 !important; box-shadow: 5px 5px 0 var(--m) !important; }
.mermaid-control-btn { border-radius: 0 !important; border: 2px solid var(--ink) !important; }
table { border-collapse: collapse; } th { background: var(--m-soft); color: var(--ink); font-family: var(--font-ui); } th, td { border-color: var(--line-2) !important; }
.rounded-lg, .rounded-xl { border-radius: 0 !important; }
.border.rounded-lg, .bg-white.border { border: 2px solid var(--line-2) !important; }
@media (max-width: 1023px) { .g-scene { max-height: 220px; min-height: 160px; } }
table { display: block; max-width: 100%; overflow-x: auto; }
html, body { overflow-x: clip; }