/* ==========================================================================
   Engineering Atlas — shared design system
   One stylesheet for every page. Page <style> blocks only hold components
   that exist on a single page.

   Contents
   1. Tokens            6. Article typography     11. Tables
   2. Base / reset      7. Code                   12. Cards, chips, badges
   3. Site header       8. Callouts & quotes      13. Learning aids (FAQ, checklist…)
   4. Article header    9. Diagrams               14. End matter, related, footer
   5. Layout + TOC     10. Prompt boxes           15. Homepage · 16. Motion/print

   Breakpoints (CSS custom properties cannot be used in media queries):
   sm 640px · md 980px · lg 1200px
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  /* Surfaces */
  --color-background:#FFFFFF;
  --color-surface:#F7F7FA;
  --color-surface-sunken:#F0F0F5;
  --color-surface-raised:#FFFFFF;
  --color-header-band:#F5F3FB;
  --color-header-band-border:#E7E3F5;

  /* Text */
  --color-text-primary:#15171C;
  --color-text-secondary:#474C5A;
  --color-text-muted:#636878;
  --color-text-inverse:#F3F4F7;

  /* Brand accents: violet = technical/primary, orange = emphasis/markers */
  --color-accent-primary:#5B3CC4;
  --color-accent-primary-strong:#43289E;
  --color-accent-primary-soft:#EFEBFC;
  --color-accent-primary-border:#D9D0F5;
  --color-accent-secondary:#F2662B;
  --color-accent-secondary-text:#B4441A;
  --color-accent-secondary-soft:#FEF1E9;

  /* Links */
  --color-link:var(--color-accent-primary);
  --color-link-hover:var(--color-accent-primary-strong);
  --color-link-underline:rgba(91,60,196,.35);

  /* Lines */
  --color-border:#E3E4EB;
  --color-border-strong:#C9CCD7;
  --color-separator:#ECEDF2;

  /* Semantic (match the palette already used inside the inline SVG diagrams) */
  --color-info:#2C5FD1;     --color-info-soft:#E8EEFC;     --color-info-border:#C6D4F6;     --color-info-text:#1F3A93;
  --color-success:#2F8F63;  --color-success-soft:#E4F3EA;  --color-success-border:#BFDECB;  --color-success-text:#1F6B47;
  --color-warning:#C8862B;  --color-warning-soft:#FBF1DE;  --color-warning-border:#EBD3A6;  --color-warning-text:#7E540F;
  --color-danger:#C7454A;   --color-danger-soft:#FBE9E8;   --color-danger-border:#EDC3C4;   --color-danger-text:#8E2E32;
  --color-violet:#6B4FC8;   --color-violet-soft:#EEEAFB;   --color-violet-border:#D6CCF3;   --color-violet-text:#4A3399;

  /* Code */
  --color-code-bg:#15171E;
  --color-code-header:#1D2029;
  --color-code-border:#2A2E3A;
  --color-code-text:#E4E6EC;
  --color-code-muted:#A2A8B8;
  --color-inline-code-bg:#F3F1FA;
  --color-inline-code-border:#E4DFF4;
  --color-inline-code-text:#3E2A8C;

  /* Tables & diagrams */
  --color-table-head-bg:#1E2029;
  --color-table-head-text:#F1F2F6;
  --color-table-row-border:#E7E3F4;
  --color-table-row-hover:#FAF9FD;
  --color-diagram-surface:#FFFFFF;
  --color-diagram-border:var(--color-border);

  /* Typography */
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading:'Space Grotesk', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs:.6875rem;  /* 11 */
  --text-xs:.75rem;     /* 12 */
  --text-sm:.875rem;    /* 14 */
  --text-md:.9375rem;   /* 15 */
  --text-base:1.0625rem;/* 17 — mobile body */
  --text-body:1.125rem; /* 18 — desktop body */
  --text-lead:1.25rem;  /* 20 */
  --text-h4:1.0625rem;
  --text-h3:1.3125rem;
  --text-h2:clamp(1.5rem, 1.2rem + .9vw, 1.875rem);
  --text-h1:clamp(2rem, 1.45rem + 1.9vw, 2.875rem);

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.7;
  --tracking-tight:-.012em; --tracking-caps:.08em;

  /* Layout */
  --page-width:1240px;
  --content-width:880px;   /* figures, tables, wide components */
  --reading-width:720px;   /* prose */
  --sidebar-width:232px;
  --gutter:24px;
  --header-height:60px;

  /* Spacing (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* Shape & depth */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(21,23,28,.06);
  --shadow-md:0 8px 24px rgba(21,23,28,.08);

  /* Interaction */
  --focus-ring:0 0 0 3px rgba(91,60,196,.38);
  --transition-fast:150ms ease;

  /* Legacy aliases — page-specific rules and inline markup still use these */
  --paper:var(--color-background);
  --paper-2:var(--color-surface-sunken);
  --ink:var(--color-text-primary);
  --ink-soft:var(--color-text-secondary);
  --line:var(--color-border);
  --panel:var(--color-code-bg);
  --panel-2:var(--color-code-header);
  --panel-text:var(--color-code-text);
  --red:var(--color-danger);      --red-bg:var(--color-danger-soft);
  --amber:var(--color-warning);   --amber-bg:var(--color-warning-soft);
  --green:var(--color-success);   --green-bg:var(--color-success-soft);
  --blue:var(--color-info);       --blue-bg:var(--color-info-soft);
  --purple:var(--color-violet);   --purple-bg:var(--color-violet-soft);
  --violet:var(--color-violet);   --violet-bg:var(--color-violet-soft);
  --radius:var(--radius-md);
  --maxw:var(--reading-width);
}

/* 2. Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  margin:0; background:var(--color-background); color:var(--color-text-primary);
  font-family:var(--font-body); font-size:var(--text-body); line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading); color:var(--color-text-primary); text-wrap:balance;}
p,li{text-wrap:pretty;}
strong,b{font-weight:var(--weight-semibold);}
img,svg,video{max-width:100%;}
img{height:auto;}
code,kbd,samp,pre{font-family:var(--font-mono);}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
::selection{background:#DCD3FA; color:var(--color-text-primary);}
hr,hr.rule{border:0; border-top:1px solid var(--color-border); margin:var(--space-8) 0;}

a{color:var(--color-link); text-decoration:underline; text-decoration-color:var(--color-link-underline); text-decoration-thickness:1px; text-underline-offset:.2em; transition:color var(--transition-fast), text-decoration-color var(--transition-fast);}
a:hover{color:var(--color-link-hover); text-decoration-color:currentColor;}

:focus-visible{outline:2px solid var(--color-accent-primary); outline-offset:2px;}
button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--color-accent-primary); outline-offset:2px; box-shadow:var(--focus-ring);}

.skip-link{position:absolute; left:var(--space-4); top:-100px; z-index:200; background:var(--color-text-primary); color:#fff; padding:var(--space-2) var(--space-4); border-radius:var(--radius-md); font-family:var(--font-heading); font-size:var(--text-sm); text-decoration:none;}
.skip-link:focus{top:var(--space-3); color:#fff;}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* Brand glyph (the three-dot “signal”) */
.signal{display:inline-flex; gap:4px; align-items:center; flex:none;}
.signal span{width:8px; height:8px; border-radius:50%; display:inline-block;}
.signal .r{background:var(--color-danger);} .signal .a{background:var(--color-warning);} .signal .g{background:var(--color-success);}

/* 3. Site header ----------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.95); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--color-border);}
.site-header__inner{position:relative; max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter); height:var(--header-height); display:flex; align-items:center; gap:var(--space-6);}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--color-text-primary); font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:1.0625rem; letter-spacing:-.01em; white-space:nowrap;}
.brand:hover{color:var(--color-text-primary);}
.brand__mark{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--radius-md); background:var(--color-text-primary); flex:none;}
.brand__mark .signal{gap:3px;} .brand__mark .signal span{width:6px; height:6px;}
.brand__by{font-weight:var(--weight-medium); color:var(--color-text-muted); font-size:var(--text-sm); letter-spacing:0;}
.site-nav{margin-left:auto;}
.site-nav ul{display:flex; gap:var(--space-1); list-style:none; margin:0; padding:0;}
.site-nav a{display:block; padding:8px 12px; border-radius:var(--radius-md); font-family:var(--font-heading); font-size:var(--text-md); font-weight:var(--weight-medium); color:var(--color-text-secondary); text-decoration:none; position:relative;}
.site-nav a:hover{color:var(--color-text-primary); background:var(--color-surface);}
.site-nav a[aria-current]{color:var(--color-text-primary); font-weight:var(--weight-semibold);}
.site-nav a[aria-current]::after{content:""; position:absolute; left:12px; right:12px; bottom:-11px; height:2px; background:var(--color-accent-secondary); border-radius:2px;}
.nav-toggle{display:none; margin-left:auto; align-items:center; gap:8px; background:none; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:7px 12px; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-text-primary); min-height:40px;}
.nav-toggle__bars{width:16px; height:10px; position:relative; display:inline-block;}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;}
.nav-toggle__bars::before{top:0;} .nav-toggle__bars::after{bottom:0;}
@media (max-width:560px){ .brand__by{display:none;} }
@media (max-width:1100px){
  .js .nav-toggle{display:inline-flex;}
  .js .site-nav{display:none; position:absolute; top:var(--header-height); left:0; right:0; background:#fff; border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-md); margin:0;}
  .js .site-nav.is-open{display:block;}
  .js .site-nav ul{flex-direction:column; padding:var(--space-2) var(--gutter) var(--space-4); gap:0;}
  .js .site-nav a{padding:12px 0; border-bottom:1px solid var(--color-separator); border-radius:0; font-size:1rem;}
  .js .site-nav a:hover{background:none;}
  .site-nav a[aria-current]::after{display:none;}
  html:not(.js) .site-nav ul{overflow-x:auto;}
}
@media (max-width:400px){
  .site-header__inner{gap:var(--space-3);}
  .brand{font-size:1rem; gap:8px;}
  .nav-toggle{padding:7px 10px;}
}
@media (max-width:360px){
  .site-header__inner{gap:var(--space-2);}
  .nav-toggle{font-size:0; gap:0; width:40px; padding:0; justify-content:center;}
}

/* Reading-progress bar (project playbook) */
#progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary)); z-index:100;}

/* 4. Article header -------------------------------------------------------- */
.hero{position:relative; overflow:hidden; background:var(--color-header-band); border-bottom:1px solid var(--color-header-band-border); color:var(--color-text-primary); padding:var(--space-5) 0 var(--space-7);}
.hero-inner{position:relative; z-index:2; max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter);}
.breadcrumbs{font-family:var(--font-heading); font-size:var(--text-sm); margin:0 0 var(--space-7);}
.breadcrumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.breadcrumbs li{display:inline-flex; align-items:center; gap:6px; color:var(--color-text-muted); min-width:0;}
.breadcrumbs li + li::before{content:"/"; color:var(--color-border-strong);}
.breadcrumbs a{color:var(--color-text-secondary); text-decoration:none;}
.breadcrumbs a:hover{color:var(--color-accent-primary); text-decoration:underline;}
.breadcrumbs [aria-current]{color:var(--color-text-muted); max-width:40ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block;}
@media (max-width:640px){ .breadcrumbs{margin-bottom:var(--space-5);} .breadcrumbs li:last-child{display:none;} }
.eyebrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 var(--space-4); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--color-accent-primary);}
.hero h1{font-size:var(--text-h1); line-height:var(--leading-tight); font-weight:var(--weight-bold); letter-spacing:-.022em; margin:0 0 var(--space-5); max-width:19em;}
.hero h1 em{font-style:normal; color:var(--color-accent-secondary-text);}
.hero .dek{font-family:var(--font-body); font-size:var(--text-lead); line-height:1.6; color:var(--color-text-secondary); max-width:var(--reading-width); margin:0 0 var(--space-6);}
.hero .dek strong{color:var(--color-text-primary);}
.hero-graphic{position:absolute; right:max(var(--gutter), calc((100vw - var(--page-width)) / 2 + var(--gutter))); top:50%; transform:translateY(-50%); width:280px; height:280px; z-index:1; opacity:.6; pointer-events:none;}
.hero-graphic [stroke="#2A3040"]{stroke:#CFC6EE;}
.hero-graphic [fill="#8B93A0"]{fill:var(--color-text-muted);}
.hero-graphic [fill="#E9EBEE"]{fill:#CFC6EE;}
.hero-bg{position:absolute; right:max(var(--gutter), calc((100vw - var(--page-width)) / 2 + var(--gutter))); top:0; bottom:0; width:280px; display:flex; align-items:center; font-family:var(--font-mono); font-size:12px; line-height:2; color:var(--color-accent-primary); opacity:.28; z-index:1; overflow:hidden; pointer-events:none; white-space:nowrap;}
@media (max-width:1200px){ .hero-graphic,.hero-bg{display:none;} }

/* Article metadata (hairline list) */
.byline{display:flex; flex-wrap:wrap; gap:var(--space-3) 0; margin:0; padding-top:var(--space-4); border-top:1px solid var(--color-header-band-border); max-width:var(--content-width); font-family:var(--font-heading); font-size:var(--text-md); color:var(--color-text-primary); font-weight:var(--weight-medium); line-height:1.4;}
.byline > span{display:flex; flex-direction:column; gap:3px; padding:0 var(--space-5); border-left:1px solid var(--color-header-band-border);}
.byline > span:first-child{padding-left:0; border-left:0;}
.byline strong{font-size:var(--text-2xs); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted);}
@media (max-width:640px){
  .byline{flex-direction:column; gap:0;}
  .byline > span{flex-direction:row; justify-content:space-between; gap:var(--space-4); padding:10px 0; border-left:0; border-bottom:1px solid var(--color-header-band-border); text-align:right;}
  .byline > span:last-child{border-bottom:0;}
  .byline strong{text-align:left; padding-top:2px; white-space:nowrap;}
}
/* “How to use this guide” learning aid */
.audience-note{display:block; max-width:var(--reading-width); margin:var(--space-5) 0 0; padding:var(--space-3) var(--space-4); background:var(--color-surface-raised); border:1px solid var(--color-header-band-border); border-left:3px solid var(--color-accent-secondary); border-radius:var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm); font-family:var(--font-body); font-size:var(--text-md); line-height:1.6; color:var(--color-text-secondary);}
.audience-note strong{color:var(--color-text-primary);}
.hero-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-6); max-width:var(--reading-width);}
.hero-stat{background:var(--color-surface-raised); border:1px solid var(--color-header-band-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4);}
.hero-stat b{display:block; font-family:var(--font-heading); font-size:1.625rem; line-height:1.2; color:var(--color-accent-primary);}
.hero-stat span{display:block; font-family:var(--font-heading); font-size:var(--text-xs); line-height:1.35; color:var(--color-text-muted);}
@media (max-width:640px){ .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* 5. Layout + table of contents ------------------------------------------- */
.layout{max-width:var(--page-width); margin:0 auto; padding:var(--space-7) var(--gutter) 0; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); gap:var(--space-8); align-items:start;}
.layout > article{min-width:0; max-width:var(--content-width); width:100%;}
.toc{position:sticky; top:calc(var(--header-height) + var(--space-5)); align-self:start; max-height:calc(100vh - var(--header-height) - var(--space-7)); overflow-y:auto; overscroll-behavior:contain; font-family:var(--font-heading); font-size:var(--text-sm); padding:var(--space-4) var(--space-1) var(--space-4) 0; border-top:2px solid var(--color-accent-primary); scrollbar-width:thin;}
.toc .toc-label{font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-primary); margin:0 0 var(--space-3);}
.toc ol,.toc ul{list-style:none; margin:0; padding:0;}
.toc li{margin:0;}
.toc a{display:block; padding:5px 0 5px 14px; border-left:2px solid var(--color-separator); color:var(--color-text-secondary); text-decoration:none; line-height:1.4; transition:color var(--transition-fast), border-color var(--transition-fast);}
.toc a:hover{color:var(--color-text-primary); border-left-color:var(--color-border-strong);}
.toc a.active{color:var(--color-accent-primary); border-left-color:var(--color-accent-primary); font-weight:var(--weight-semibold);}
.toc .toc-cat,.toc .part{font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted); margin:0; padding:var(--space-4) 0 var(--space-1) 14px; border-left:2px solid var(--color-separator); border-top:0;}
.toc-mobile{display:none;}
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr); gap:0; padding-top:var(--space-5);}
  .layout > .toc{display:none;}
  .layout > article{max-width:none;}
  article > .toc-mobile + *{margin-top:0;}
  .toc-mobile{display:block; margin:0 0 var(--space-6); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); font-family:var(--font-heading); font-size:var(--text-md); max-width:none;}
  .toc-mobile > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:12px var(--space-4); font-weight:var(--weight-bold); min-height:48px;}
  .toc-mobile > summary::-webkit-details-marker{display:none;}
  .toc-mobile > summary::after{content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-4px; transition:transform var(--transition-fast);}
  .toc-mobile[open] > summary::after{transform:rotate(225deg); margin-top:4px;}
  .toc-mobile ol,.toc-mobile ul{list-style:none; margin:0; padding:0 var(--space-4) var(--space-2); max-height:60vh; overflow-y:auto; border-top:1px solid var(--color-border);}
  .toc-mobile li{margin:0; padding:0;}
  .toc-mobile a{display:block; padding:10px 0; color:var(--color-text-secondary); text-decoration:none; border-bottom:1px solid var(--color-separator); line-height:1.4;}
  .toc-mobile li:last-child a{border-bottom:0;}
  .toc-mobile .toc-cat,.toc-mobile .part{font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary); padding:var(--space-4) 0 2px;}
}

/* 6. Article typography ---------------------------------------------------- */
article{overflow-wrap:break-word;}
article > *{max-width:var(--reading-width);}
article > :is(figure,.tablewrap,.table-wrap,.cheat,.overview-grid,.cards,.code-block,.tabs,.bp-grid,.autopsy,.cat-divider,.related,.deep-dives,.author-card,.pager,.toc-mobile,.wide){max-width:none;}
article h2{font-size:var(--text-h2); line-height:1.22; font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); margin:var(--space-8) 0 var(--space-4); scroll-margin-top:calc(var(--header-height) + var(--space-5));}
article h2 .num{display:inline-block; font-family:var(--font-mono); font-size:.5em; font-weight:var(--weight-medium); letter-spacing:0; color:var(--color-accent-primary); background:var(--color-accent-primary-soft); border-radius:var(--radius-sm); padding:3px 7px; margin-right:12px; vertical-align:.35em; line-height:1.3;}
article h3{font-size:var(--text-h3); line-height:var(--leading-snug); font-weight:var(--weight-bold); margin:var(--space-7) 0 var(--space-3); scroll-margin-top:calc(var(--header-height) + var(--space-5));}
article h4{font-size:var(--text-h4); line-height:1.4; font-weight:var(--weight-bold); margin:var(--space-6) 0 var(--space-2); scroll-margin-top:calc(var(--header-height) + var(--space-5));}
article h2 + h3{margin-top:var(--space-5);}
article p{margin:0 0 var(--space-5);}
article ul,article ol{margin:0 0 var(--space-5); padding-left:1.35em;}
article li{margin-bottom:var(--space-2); padding-left:.2em;}
article li > ul,article li > ol{margin:var(--space-2) 0 0;}
article ul:not([class]) > li::marker{color:var(--color-accent-secondary);}
article ol:not([class]) > li::marker{color:var(--color-text-muted); font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:.92em;}
.section-intro{font-size:var(--text-lead); line-height:1.6; color:var(--color-text-secondary);}
.lead{font-size:var(--text-lead); line-height:1.6; color:var(--color-text-secondary);}
article > :first-child{margin-top:0;}
@media (max-width:640px){
  :root{--gutter:18px;}
  body{font-size:var(--text-base);}
  article h2{margin-top:var(--space-7);}
  .section-intro,.lead,.hero .dek{font-size:1.125rem;}
}

/* 7. Code ------------------------------------------------------------------ */
code{font-size:.86em; background:var(--color-inline-code-bg); border:1px solid var(--color-inline-code-border); border-radius:var(--radius-sm); padding:.06em .36em; color:var(--color-inline-code-text); overflow-wrap:anywhere; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
a code{color:inherit;}
pre{background:var(--color-code-bg); color:var(--color-code-text); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); margin:var(--space-5) 0; overflow-x:auto; font-size:.875rem; line-height:1.65; tab-size:4; -moz-tab-size:4; scrollbar-color:#3A3F4E transparent;}
pre code{background:none; border:0; padding:0; color:inherit; font-size:1em; overflow-wrap:normal;}
.code-block{margin:var(--space-5) 0 var(--space-6); border-radius:var(--radius-md); background:var(--color-code-bg); border:1px solid var(--color-code-border); overflow:hidden; position:relative;}
.code-block pre{margin:0; border-radius:0; background:transparent;}
.code-block__header{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:40px; padding:4px 6px 4px var(--space-4); background:var(--color-code-header); border-bottom:1px solid var(--color-code-border);}
.code-block__lang{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-code-muted); letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.code-block--bare .code-block__header{position:absolute; top:0; right:0; background:transparent; border:0; min-height:0; padding:6px; z-index:1;}
.js .code-block--bare pre{padding-right:84px;}
.code-copy{display:inline-flex; align-items:center; gap:6px; flex:none; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-code-muted); background:rgba(255,255,255,.04); border:1px solid var(--color-code-border); border-radius:6px; padding:4px 10px; min-height:30px; transition:color var(--transition-fast), background var(--transition-fast);}
.code-copy:hover{color:#fff; background:rgba(255,255,255,.1);}
.code-copy.is-copied{color:#BDF0D5; border-color:var(--color-success);}
.code-copy svg{width:14px; height:14px;}
.pre-label{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted); margin:var(--space-6) 0 calc(-1 * var(--space-3));}
@media (max-width:640px){ pre{font-size:.8125rem; padding:var(--space-3) var(--space-4);} }

/* 8. Callouts & quotes ----------------------------------------------------- */
.callout{position:relative; margin:var(--space-6) 0; padding:var(--space-4) var(--space-5); background:var(--color-surface); border:1px solid var(--color-border); border-left:4px solid var(--color-accent-primary); border-radius:var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm); font-size:1rem; line-height:1.65;}
.callout > :last-child,.callout p:last-child,.callout ul:last-child,.callout ol:last-child{margin-bottom:0;}
.callout p{margin:0 0 var(--space-3);}
.callout ul,.callout ol{margin:var(--space-2) 0 var(--space-3);}
.callout-title{display:flex; align-items:center; gap:8px; margin:0 0 var(--space-2); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary);}
.callout.green{background:var(--color-success-soft); border-color:var(--color-success-border); border-left-color:var(--color-success);} .callout.green .callout-title{color:var(--color-success-text);}
.callout.amber{background:var(--color-warning-soft); border-color:var(--color-warning-border); border-left-color:var(--color-warning);} .callout.amber .callout-title{color:var(--color-warning-text);}
.callout.red{background:var(--color-danger-soft); border-color:var(--color-danger-border); border-left-color:var(--color-danger);} .callout.red .callout-title{color:var(--color-danger-text);}
.callout.blue{background:var(--color-info-soft); border-color:var(--color-info-border); border-left-color:var(--color-info);} .callout.blue .callout-title{color:var(--color-info-text);}
.callout.purple{background:var(--color-violet-soft); border-color:var(--color-violet-border); border-left-color:var(--color-violet);} .callout.purple .callout-title{color:var(--color-violet-text);}

blockquote{margin:var(--space-6) 0; padding:var(--space-3) var(--space-5); border-left:3px solid var(--color-accent-secondary); background:var(--color-accent-secondary-soft); border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:1.0625rem; line-height:1.6; color:var(--color-text-primary);}
blockquote p{margin:0;}
blockquote p + p{margin-top:var(--space-3);}
blockquote cite{display:block; margin-top:var(--space-2); font-family:var(--font-heading); font-size:var(--text-sm); font-style:normal; color:var(--color-text-muted);}

/* “Say it out loud” prompt used on interview pages */
.say-it{position:relative; margin:var(--space-5) 0; padding:var(--space-4) var(--space-5) var(--space-4) 64px; background:var(--color-surface-raised); border:1px solid var(--color-border-strong); border-radius:var(--radius-md); font-size:1rem;}
.say-it::before{content:"SAY"; position:absolute; left:var(--space-4); top:calc(var(--space-4) + 4px); font-family:var(--font-heading); font-size:10px; line-height:1.4; font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps); color:#fff; background:var(--color-accent-primary); padding:2px 7px; border-radius:var(--radius-sm);}
.say-it em{font-style:italic; color:var(--color-text-primary);}

/* 9. Diagrams -------------------------------------------------------------- */
figure{margin:var(--space-6) 0;}
figure.diagram{margin:var(--space-6) 0 var(--space-7); padding:0; background:var(--color-diagram-surface); border:1px solid var(--color-diagram-border); border-radius:var(--radius-lg); position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(21,23,28,.04);}
figure.diagram svg{display:block; width:100%; height:auto; margin:0 auto;}
figure.diagram figcaption{margin:0; padding:var(--space-3) var(--space-5) var(--space-4); border-top:1px solid var(--color-separator); background:var(--color-surface); font-family:var(--font-body); font-size:var(--text-sm); line-height:1.55; color:var(--color-text-secondary); text-align:left;}
.diagram__head{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--color-separator); background:var(--color-surface-raised);}
.diagram__fig{flex:none; font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--color-accent-secondary-text); background:var(--color-accent-secondary-soft); border-radius:var(--radius-sm); padding:2px 7px; letter-spacing:.02em;}
.diagram__title{flex:1; min-width:0; margin:0; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-text-primary); line-height:1.35;}
.diagram-title{font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted); margin:0 0 var(--space-3);}
.diagram-tools{position:absolute; top:var(--space-3); right:var(--space-3); display:flex; gap:6px; z-index:2;}
.mini-btn{font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); border:1px solid var(--color-border); background:var(--color-surface-raised); color:var(--color-text-primary); border-radius:6px; padding:5px 10px; min-height:30px;}
.mini-btn:hover{border-color:var(--color-text-primary);}
.diagram__replay{flex:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--color-text-secondary); background:none; border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:4px 11px 4px 9px; min-height:30px; cursor:pointer;}
.diagram__replay:hover{color:var(--color-accent-primary); border-color:var(--color-accent-primary-border); background:var(--color-accent-primary-soft);}
figure.diagram .diagram__replay svg{display:inline-block; width:13px; height:13px; margin:0;}
.diagram__canvas{position:relative; padding:var(--space-5) var(--space-4); background-color:#FCFCFD; background-image:radial-gradient(circle, #E4E5EC 1px, transparent 1.2px); background-size:18px 18px; background-position:9px 9px;}

/* Diagram drawing primitives (generated SVG, see ea.py) */
.ea-dg text{font-family:var(--font-body);}
.ea-dg .ea-t{font-family:var(--font-heading); font-weight:600;}
.ea-dg .ea-s{font-family:var(--font-body); font-weight:400;}
.ea-dg .ea-s2{font-family:var(--font-body); font-weight:500;}
.ea-dg .ea-m{font-family:var(--font-mono); font-weight:500;}
.ea-dg .ea-cap{font-family:var(--font-heading); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;}
.ea-dg .ea-cap2{font-family:var(--font-heading); font-weight:600;}

/* Motion: build-in on first view, marching dashes on flow edges, soft halo on key nodes */
.ea-dg{--pace:70ms;}
.js .ea-dg .ea-a{opacity:0;}
.js .ea-dg.is-in .ea-a{animation:ea-in .5s cubic-bezier(.2,.75,.25,1) both; animation-delay:calc(var(--i, 0) * var(--pace));}
.js .ea-dg.is-in .ea-edge{animation-name:ea-fade;}
.ea-dg .ea-a{transform-box:fill-box; transform-origin:center;}
.ea-dg .ea-flow{animation:ea-march 1.6s linear infinite;}
.ea-dg .ea-halo{opacity:0; transform-box:fill-box; transform-origin:center;}
.ea-dg.is-in .ea-halo{animation:ea-halo 2.8s ease-out 1.2s infinite;}
@keyframes ea-in{from{opacity:0; transform:translateY(6px) scale(.985);} to{opacity:1; transform:none;}}
@keyframes ea-fade{from{opacity:0;} to{opacity:1;}}
@keyframes ea-march{to{stroke-dashoffset:-22;}}
@keyframes ea-halo{0%{opacity:.55; transform:scale(1);} 70%,100%{opacity:0; transform:scale(1.04);}}
@media (prefers-reduced-motion:reduce){
  .js .ea-dg .ea-a, .js .ea-dg.is-in .ea-a{opacity:1; animation:none!important;}
  .ea-dg .ea-flow, .ea-dg.is-in .ea-halo{animation:none!important;}
  .diagram__replay{display:none;}
}
@media (max-width:640px){
  .diagram__head{padding:var(--space-3) var(--space-4);}
  .diagram__canvas{padding:var(--space-4) var(--space-3);}
  figure.diagram figcaption{padding:var(--space-3) var(--space-4);}
  .diagram__canvas--wide{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
  .diagram__canvas--wide > svg{min-width:var(--dg-min, 560px);}
  .diagram__canvas--wide + figcaption::before{content:"Swipe sideways to see the full diagram. "; font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted); display:block; margin-bottom:var(--space-1);}
  .diagram__replay span{display:none;}
}

/* 10. Prompt boxes (copy-ready text blocks) -------------------------------- */
.prompt-box{background:var(--color-code-bg); color:var(--color-code-text); border:1px solid var(--color-code-border); border-left:4px solid var(--color-success); border-radius:var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm); padding:var(--space-4) var(--space-5); margin:var(--space-5) 0;}
.pb-head{display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3);}
.pb-label,.prompt-box .pb-label{display:block; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:#86E0C4;}
.pb-head .pb-label{margin-bottom:0;}
.prompt-box p{font-family:var(--font-mono); font-size:.84rem; line-height:1.7; color:#D7DAE1; margin:0;}
.copy-btn{flex:none; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:#D7DAE1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:5px 11px; min-height:30px; transition:background var(--transition-fast);}
.copy-btn:hover{background:rgba(255,255,255,.16);}
.copy-btn.copied{background:var(--color-success); border-color:var(--color-success); color:#06170F;}

/* 11. Tables --------------------------------------------------------------- */
.tablewrap,.table-wrap{margin:var(--space-6) 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-raised); scrollbar-width:thin;}
table{width:100%; border-collapse:collapse; font-size:var(--text-md); line-height:1.5; font-variant-numeric:tabular-nums;}
th,td{padding:12px 16px; text-align:left; vertical-align:top;}
th{background:var(--color-table-head-bg); color:var(--color-table-head-text); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:.06em;}
td{border-top:1px solid var(--color-table-row-border);}
tbody tr:first-child td{border-top:0;}
thead + tbody tr:first-child td{border-top:0;}
tbody tr:hover > td{background:var(--color-table-row-hover);}
tbody th{background:var(--color-surface); color:var(--color-text-primary); text-transform:none; letter-spacing:0; font-size:var(--text-md); border-top:1px solid var(--color-table-row-border);}
/* Header rows written without <thead> (browser puts them in tbody) */
tbody:first-child > tr:first-child:not(:has(td)) > th{background:var(--color-table-head-bg); color:var(--color-table-head-text); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; border-top:0;}
tbody:first-child > tr:first-child:not(:has(td)):hover > th{background:var(--color-table-head-bg);}
td.center,th.center{text-align:center;}
td.mono{font-family:var(--font-mono); font-size:.8125rem;}
td code,th code{font-size:.82em;}
th code{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16); color:inherit;}
caption{caption-side:bottom; padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--color-text-muted); text-align:left;}
@media (max-width:640px){
  table{font-size:var(--text-sm);}
  th,td{padding:10px 12px;}
  .tablewrap > table,.table-wrap > table{min-width:540px;}
}

/* Quick-reference (cheat sheet) panel */
.cheat{margin:var(--space-6) 0; background:var(--color-code-bg); color:var(--color-code-text); border:1px solid var(--color-code-border); border-radius:var(--radius-md); overflow-x:auto;}
.cheat-table{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.84rem; line-height:1.55;}
.cheat-table th,.cheat-table td{padding:11px 16px; border:0; border-top:1px solid var(--color-code-border); text-align:left; vertical-align:top; color:var(--color-code-text); background:transparent;}
.cheat-table tr:first-child > th,.cheat-table tr:first-child > td{border-top:0;}
.cheat-table th{background:var(--color-code-header); color:#C9CEDB; font-family:var(--font-mono); font-size:.8rem; font-weight:var(--weight-semibold); text-transform:none; letter-spacing:0;}
.cheat-table tbody tr:hover > td{background:rgba(255,255,255,.03);}
.cheat-table code{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:#E7E1FF;}
@media (max-width:640px){ .cheat-table{min-width:480px;} }

/* 12. Cards, chips, badges ------------------------------------------------- */
.cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin:var(--space-6) 0;}
@media (max-width:640px){ .cards,.cards[style]{grid-template-columns:minmax(0,1fr)!important;} }
.card{background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-5); min-width:0;}
.card h4{margin:0 0 var(--space-1); font-family:var(--font-heading); font-size:1.0625rem; font-weight:var(--weight-bold); text-transform:none; letter-spacing:0; color:var(--color-text-primary);}
.card .sub{font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-muted); margin:0 0 var(--space-3);}
.card p{font-size:var(--text-md); margin:0 0 var(--space-3);}
.card ul{margin:0; padding-left:1.1em; font-size:var(--text-md);}
.card li{margin-bottom:var(--space-2);}
.card > :last-child{margin-bottom:0;}

.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:1.4; letter-spacing:.02em; padding:2px 10px; border-radius:var(--radius-pill); background:var(--color-surface-sunken); color:var(--color-text-secondary); white-space:nowrap;}
.chip.g{background:var(--color-success-soft); color:var(--color-success-text);}
.chip.a{background:var(--color-warning-soft); color:var(--color-warning-text);}
.chip.r{background:var(--color-danger-soft); color:var(--color-danger-text);}
.chip.b{background:var(--color-info-soft); color:var(--color-info-text);}
.chip.p{background:var(--color-violet-soft); color:var(--color-violet-text);}
.topic-tag{display:inline-block; font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:var(--weight-medium); text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-secondary); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:1px 7px; line-height:1.6;}

.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; flex:none;}
.dot.r{background:var(--color-danger);} .dot.a{background:var(--color-warning);} .dot.g{background:var(--color-success);} .dot.b{background:var(--color-info);} .dot.p{background:var(--color-violet);}

.modebadge{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--radius-md); background:var(--color-text-primary); color:#fff; font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:var(--text-sm); margin-right:var(--space-3); flex:none; vertical-align:middle;}
.mono{font-family:var(--font-mono);}
.mono-label{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted);}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-sm); padding:9px 16px; border-radius:var(--radius-md); background:var(--color-text-primary); color:#fff; text-decoration:none; border:0;}
.btn:hover{background:var(--color-accent-primary-strong); color:#fff;}

/* Section dividers for multi-part references */
.cat-divider{margin:var(--space-9) 0 0; padding-top:var(--space-5); border-top:2px solid var(--color-text-primary);}
.cat-divider .cat-label{display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:.12em; color:var(--color-accent-primary); margin:0 0 var(--space-1);}
.cat-divider h2{margin-top:var(--space-3);}
.part-banner{display:flex; align-items:center; gap:var(--space-3); margin:var(--space-9) 0 calc(-1 * var(--space-5)); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-primary);}
.part-banner::after{content:""; flex:1; height:1px; background:var(--color-border);}
.part-banner:first-child{margin-top:0;}

/* 13. Learning aids -------------------------------------------------------- */
.qa{margin:var(--space-4) 0; padding:var(--space-4) var(--space-5); background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-md);}
.qa .q{font-family:var(--font-heading); font-size:1rem; font-weight:var(--weight-bold); color:var(--color-text-primary); margin:0 0 var(--space-2); line-height:1.4;}
.qa .a{font-size:var(--text-md); margin:0; color:var(--color-text-secondary);}
.qa .a p{margin:0 0 var(--space-2);}
.qa .a p:last-child{margin-bottom:0;}

.faq{margin:var(--space-5) 0;}
.faq details{background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-md); margin-bottom:var(--space-2); padding:0;}
.faq details[open]{border-color:var(--color-border-strong);}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); min-height:52px; font-family:var(--font-heading); font-size:1rem; font-weight:var(--weight-bold); line-height:1.4; color:var(--color-text-primary);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; flex:none; font-size:1.25rem; line-height:1; font-weight:var(--weight-regular); color:var(--color-accent-primary);}
.faq details[open] summary::after{content:"–";}
.faq .faq-a{padding:0 var(--space-5) var(--space-4); font-size:var(--text-md); color:var(--color-text-secondary);}
.faq .faq-a p{margin:0 0 var(--space-2);}
.faq .faq-a strong{color:var(--color-text-primary);}

.checklist{list-style:none; margin:var(--space-5) 0; padding:0;}
.checklist li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--space-3); align-items:start; padding:var(--space-3) 0; margin:0; border-top:1px solid var(--color-separator);}
.checklist li:first-child{border-top:0;}
.check-mark{width:22px; height:22px; border-radius:50%; margin-top:3px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--color-success-soft); border:1.5px solid var(--color-success); color:var(--color-success-text); font-family:var(--font-heading); font-size:12px; font-weight:var(--weight-bold);}
.checklist strong{display:block; margin-bottom:2px; font-family:var(--font-heading); font-size:1rem;}
.checklist span{color:var(--color-text-secondary); font-size:var(--text-md);}
.checklist.danger .check-mark{background:var(--color-danger-soft); border-color:var(--color-danger); color:var(--color-danger-text);}

.principle{display:grid; grid-template-columns:48px minmax(0,1fr); gap:var(--space-4); margin-bottom:var(--space-5); align-items:start;}
.principle-num{font-family:var(--font-heading); font-size:1.75rem; font-weight:var(--weight-bold); line-height:1; color:#7F6BD6;}
.principle-body h3{margin:0 0 var(--space-1); font-size:1.0625rem;}
.principle-body p{margin:0; color:var(--color-text-secondary); font-size:var(--text-md);}

.autopsy{display:grid; grid-template-columns:minmax(0,1fr); margin:var(--space-6) 0; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; background:var(--color-surface-raised);}
@media (min-width:640px){ .autopsy{grid-template-columns:repeat(2,minmax(0,1fr));} }
.autopsy-col{padding:var(--space-5);}
.autopsy-col.bad{background:var(--color-danger-soft); border-bottom:1px solid var(--color-border);}
.autopsy-col.good{background:var(--color-success-soft);}
@media (min-width:640px){ .autopsy-col.bad{border-bottom:0; border-right:1px solid var(--color-border);} }
.autopsy-label{display:flex; align-items:center; gap:7px; margin-bottom:var(--space-3); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps);}
.autopsy-label.bad-label{color:var(--color-danger-text);} .autopsy-label.good-label{color:var(--color-success-text);}
.autopsy-note{margin:var(--space-3) 0 0; font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-secondary);}
.resume-line{font-family:var(--font-mono); font-size:.8125rem; line-height:1.75; color:var(--color-text-primary); background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-4);}
.hl-bad{color:#A8363B; font-weight:var(--weight-semibold);} .hl-good{color:var(--color-success-text); font-weight:var(--weight-bold);}

.quant-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-3); margin:var(--space-6) 0;}
@media (min-width:640px){ .quant-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.quant-card{background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-4) var(--space-5);}
.quant-card .qc-before{font-family:var(--font-mono); font-size:.8125rem; color:#A8363B; text-decoration:line-through; opacity:.85; margin-bottom:var(--space-2);}
.quant-card .qc-after{font-family:var(--font-mono); font-size:.8125rem; color:var(--color-success-text); font-weight:var(--weight-bold);}

.cta-cards{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); margin:var(--space-6) 0 var(--space-3);}
@media (min-width:640px){ .cta-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
.cta-card{display:block; background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-5); color:var(--color-text-primary); text-decoration:none; transition:border-color var(--transition-fast), box-shadow var(--transition-fast);}
.cta-card:hover{border-color:var(--color-accent-primary); box-shadow:var(--shadow-md); color:var(--color-text-primary);}
.cta-card .cta-icon{display:block; margin-bottom:var(--space-2); font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary);}
.cta-card h4{margin:0 0 var(--space-2); font-family:var(--font-heading); font-size:1.0625rem; font-weight:var(--weight-bold);}
.cta-card p{margin:0; font-size:var(--text-sm); color:var(--color-text-secondary);}
.cta-card .cta-arrow{margin-top:var(--space-3); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-accent-primary);}
.cta-card.highlight{border-color:var(--color-success-border); background:var(--color-success-soft);}
.cta-card.highlight .cta-icon,.cta-card.highlight .cta-arrow{color:var(--color-success-text);}

.ref-group{margin-top:var(--space-5);}
.ref-group .group-title{font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-primary); margin-bottom:var(--space-2);}
.ref-group ul{margin:0; padding-left:1.2em;}
.ref-group li{margin-bottom:var(--space-1); font-size:var(--text-md);}

/* Learning aids for builder-rendered articles (Cloudflare-style objectives, definitions, takeaways) */
.learn-box{margin:var(--space-5) 0 var(--space-7); padding:var(--space-5) var(--space-5) var(--space-4); background:var(--color-accent-primary-soft); border:1px solid var(--color-accent-primary-border); border-radius:var(--radius-md);}
.learn-box__title{display:flex; align-items:center; gap:8px; margin:0 0 var(--space-3); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary-strong);}
.learn-box ul{list-style:none; margin:0; padding:0;}
.learn-box li{position:relative; margin:0 0 var(--space-2); padding-left:28px; font-size:1rem; line-height:1.55; color:var(--color-text-primary);}
.learn-box li::before{content:""; position:absolute; left:2px; top:.32em; width:16px; height:16px; border-radius:50%; background:var(--color-accent-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;}
.definition{margin:var(--space-5) 0; padding:var(--space-4) var(--space-5); border:1px solid var(--color-border); border-top:3px solid var(--color-accent-secondary); border-radius:var(--radius-md); background:var(--color-surface-raised);}
.definition__term{margin:0 0 var(--space-1); font-family:var(--font-heading); font-size:1.0625rem; font-weight:var(--weight-bold); color:var(--color-text-primary);}
.definition__term small{margin-left:8px; font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-secondary-text);}
.definition p{margin:0; font-size:var(--text-md); color:var(--color-text-secondary);}
.definition p + p{margin-top:var(--space-2);}
.takeaways{margin:var(--space-7) 0 var(--space-5); padding:var(--space-5); border-radius:var(--radius-md); background:#16132A; color:#E7E4F5;}
.takeaways__title{margin:0 0 var(--space-4); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:#FFB48F;}
.takeaways ol{list-style:none; margin:0; padding:0; counter-reset:tk;}
.takeaways li{counter-increment:tk; position:relative; margin:0 0 var(--space-3); padding-left:40px; font-size:1rem; line-height:1.6;}
.takeaways li:last-child{margin-bottom:0;}
.takeaways li::before{content:counter(tk); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:#2B2550; color:#fff; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-bold); display:flex; align-items:center; justify-content:center;}
.takeaways strong{color:#fff;}
.takeaways code{background:#2B2550; border-color:#3B3470; color:#F1EDFF;}
.code-block--bad,.code-block--good{border-left-width:4px;}
.code-block--bad{border-left-color:var(--color-danger);} .code-block--good{border-left-color:var(--color-success);}
.code-block--bad .code-block__lang::before,.code-block--good .code-block__lang::before{display:inline-block; margin-right:8px; padding:1px 7px; border-radius:999px; font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps); text-transform:uppercase;}
.code-block--bad .code-block__lang::before{content:"Broken"; background:#5A1F24; color:#FFC9CB;}
.code-block--good .code-block__lang::before{content:"Correct"; background:#173F2C; color:#BDF0D5;}
/* Build-time Java highlighting (tools/build.py) */
.tok-k{color:#C9A7FF;} .tok-t{color:#8FD3FF;} .tok-s{color:#A8E6A1;} .tok-c{color:#8A8FA3; font-style:italic;} .tok-n{color:#FFB48F;} .tok-a{color:#FFD479;}

/* 14. End matter, related guides, site footer ------------------------------ */
.article-endnote{margin:var(--space-8) 0 0; padding:var(--space-5) 0 0; border-top:1px solid var(--color-border); font-size:var(--text-md); line-height:1.65; color:var(--color-text-secondary);}
.article-endnote p{margin:0 0 var(--space-3);}
.article-endnote p.article-endnote__title{font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-primary); margin:0 0 var(--space-3);}
.article-endnote strong{color:var(--color-text-primary);}
.footer-refs{list-style:none; padding:0; margin:0;}
.footer-refs li{margin-bottom:var(--space-2); padding-left:var(--space-4); position:relative;}
.footer-refs li::before{content:""; position:absolute; left:0; top:.72em; width:7px; height:2px; background:var(--color-accent-secondary);}

.related{margin:var(--space-8) 0 0; padding-top:var(--space-6); border-top:2px solid var(--color-text-primary);}
.related__title{font-family:var(--font-heading); font-size:1.375rem; font-weight:var(--weight-bold); margin:0 0 var(--space-4); letter-spacing:var(--tracking-tight);}
.related__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--space-3); list-style:none; margin:0; padding:0;}
.related__grid li{margin:0; padding:0;}
.guide-link{display:flex; flex-direction:column; height:100%; gap:var(--space-1); padding:var(--space-4); background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-md); text-decoration:none; color:var(--color-text-primary); transition:border-color var(--transition-fast), box-shadow var(--transition-fast);}
.guide-link:hover{border-color:var(--color-accent-primary); box-shadow:var(--shadow-sm); color:var(--color-text-primary);}
.guide-link__cat{font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary);}
.guide-link__title{font-family:var(--font-heading); font-size:1rem; font-weight:var(--weight-bold); line-height:1.35;}
.guide-link__meta{margin-top:auto; padding-top:var(--space-2); font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}

.pager{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin:var(--space-5) 0 0;}
.pager a{display:flex; flex-direction:column; gap:2px; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); text-decoration:none; color:var(--color-text-primary); font-family:var(--font-heading); font-weight:var(--weight-bold); line-height:1.35;}
.pager a:hover{border-color:var(--color-accent-primary); color:var(--color-text-primary);}
.pager a span{font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted);}
.pager .pager__next{grid-column:2; text-align:right;}
@media (max-width:640px){ .pager{grid-template-columns:minmax(0,1fr);} .pager .pager__next{grid-column:1;} }

.site-footer{background:#14121C; color:#B9BCC9; margin-top:var(--space-9); font-family:var(--font-heading); font-size:var(--text-sm);}
.site-footer__inner{max-width:var(--page-width); margin:0 auto; padding:var(--space-8) var(--gutter) var(--space-6);}
.site-footer__grid{display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:var(--space-6);}
.site-footer a.brand{display:inline-flex; color:#fff;}
.site-footer .brand__mark{background:#2A2638;}
.site-footer__about{margin:var(--space-4) 0 0; max-width:32ch; line-height:1.6; color:#A9ADBC;}
.site-footer h2{font-size:var(--text-sm); font-weight:var(--weight-bold); color:#fff; margin:0 0 var(--space-3); letter-spacing:0;}
.site-footer ul{list-style:none; margin:0; padding:0;}
.site-footer li{margin:0 0 var(--space-2);}
.site-footer a{color:#B9BCC9; text-decoration:none; line-height:1.45; display:inline-block;}
.site-footer a:hover{color:#fff; text-decoration:underline;}
.site-footer__base{margin-top:var(--space-7); padding-top:var(--space-4); border-top:1px solid #2A2738; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); color:#9195A5; font-size:var(--text-xs);}
@media (max-width:980px){ .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));} .site-footer__brand{grid-column:1 / -1;} }
@media (max-width:420px){ .site-footer__grid{grid-template-columns:minmax(0,1fr);} }

/* 15. Homepage ------------------------------------------------------------- */
.home-hero{background:var(--color-header-band); border-bottom:1px solid var(--color-header-band-border); padding:var(--space-8) 0 var(--space-7);}
.home-hero__inner{max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--space-8); align-items:end;}
.home-hero h1{font-size:clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem); line-height:1.08; letter-spacing:-.028em; margin:0 0 var(--space-5); max-width:14em;}
.home-hero .lead{margin:0; max-width:36em;}
.home-hero__aside{border-left:1px solid var(--color-header-band-border); padding-left:var(--space-6);}
.home-hero__aside h2{font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); margin:0 0 var(--space-4);}
.objectives{list-style:none; margin:0; padding:0;}
.objectives li{position:relative; padding:0 0 var(--space-3) var(--space-4); font-size:var(--text-md); line-height:1.5; color:var(--color-text-secondary);}
.objectives li::before{content:""; position:absolute; left:0; top:.3em; width:3px; height:1em; background:var(--color-accent-secondary); border-radius:2px;}
@media (max-width:980px){ .home-hero{padding-top:var(--space-7);} .home-hero__inner{grid-template-columns:minmax(0,1fr); gap:var(--space-6);} .home-hero__aside{border-left:0; padding-left:0; border-top:1px solid var(--color-header-band-border); padding-top:var(--space-5);} }

.search{margin-top:var(--space-6); max-width:560px;}
.search label{display:block; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); margin-bottom:var(--space-2);}
.search__field{position:relative;}
.search__field svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--color-text-muted); pointer-events:none;}
.search input{width:100%; min-height:50px; padding:12px 56px 12px 44px; font-size:1rem; font-family:var(--font-body); background:#fff; border:1px solid var(--color-border-strong); border-radius:var(--radius-md); color:var(--color-text-primary); -webkit-appearance:none; appearance:none;}
.search input::placeholder{color:var(--color-text-muted);}
.search input:focus{outline:none; border-color:var(--color-accent-primary); box-shadow:var(--focus-ring);}
.search input::-webkit-search-cancel-button{cursor:pointer;}
.search kbd{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:var(--text-xs); color:var(--color-text-muted); border:1px solid var(--color-border); border-bottom-width:2px; border-radius:var(--radius-sm); padding:1px 7px; background:var(--color-surface);}
.search__status{margin:var(--space-2) 0 0; font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-muted); min-height:1.5em;}
@media (hover:none){ .search kbd{display:none;} }

.subnav{border-bottom:1px solid var(--color-border); background:#fff;}
.subnav__inner{max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter); display:flex; gap:var(--space-6); overflow-x:auto; scrollbar-width:none;}
.subnav__inner::-webkit-scrollbar{display:none;}
.subnav__label{flex:none; display:inline-flex; align-items:center; font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:var(--text-md); color:var(--color-text-primary);}
.subnav a{flex:none; display:inline-flex; align-items:center; gap:8px; padding:14px 0; font-family:var(--font-heading); font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-text-secondary); text-decoration:none; border-bottom:2px solid transparent;}
.subnav a:hover{color:var(--color-text-primary); border-bottom-color:var(--color-accent-secondary);}
.subnav .count{font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-medium); color:var(--color-text-muted); background:var(--color-surface-sunken); border-radius:var(--radius-pill); padding:0 7px;}

.home-main{max-width:var(--page-width); margin:0 auto; padding:var(--space-5) var(--gutter) 0;}
.category{padding:var(--space-7) 0; border-top:1px solid var(--color-border); display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); gap:var(--space-8); scroll-margin-top:var(--header-height);}
.category:first-of-type{border-top:0;}
.category__head h2{font-size:var(--text-h2); line-height:1.2; letter-spacing:var(--tracking-tight); margin:0 0 var(--space-3);}
.category__head p{margin:0; font-size:var(--text-md); color:var(--color-text-secondary); line-height:1.6;}
.category__head .category__kicker{font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary); margin:0 0 var(--space-2);}
.guide-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4);}
.guide-list > li{margin:0; min-width:0;}
.guide-card{position:relative; display:flex; flex-direction:column; height:100%; padding:var(--space-5); background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); transition:border-color var(--transition-fast), box-shadow var(--transition-fast);}
.guide-card:hover{border-color:var(--color-accent-primary); box-shadow:var(--shadow-md);}
.guide-card:focus-within{border-color:var(--color-accent-primary); box-shadow:var(--focus-ring);}
.guide-card h3{font-size:1.25rem; line-height:1.3; margin:0 0 var(--space-2); letter-spacing:-.008em;}
.guide-card h3 a{color:var(--color-text-primary); text-decoration:none;}
.guide-card h3 a::after{content:""; position:absolute; inset:0; border-radius:inherit;}
.guide-card h3 a:focus-visible{outline:none;}
.guide-card p{margin:0 0 var(--space-4); font-size:var(--text-md); line-height:1.6; color:var(--color-text-secondary);}
.guide-card__meta{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}
.guide-card__meta .sep{width:3px; height:3px; border-radius:50%; background:var(--color-border-strong);}
[hidden]{display:none!important;}
.empty-state{padding:var(--space-7) 0; text-align:center; color:var(--color-text-secondary);}
mark{background:#FFE7A8; color:inherit; border-radius:2px; padding:0 1px;}
@media (max-width:980px){ .category{grid-template-columns:minmax(0,1fr); gap:var(--space-5);} }
@media (max-width:720px){ .guide-list{grid-template-columns:minmax(0,1fr);} }

/* 15b. Landing page, track hubs, author identity ----------------------------- */
.header-search{display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; margin-left:var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-md); color:var(--color-text-secondary);}
.header-search svg{width:18px; height:18px;}
.header-search:hover{color:var(--color-accent-primary); border-color:var(--color-accent-primary);}
@media (max-width:1100px){ .header-search{margin-left:0;} }
.ui-icon{width:1.15em; height:1.15em; flex:none;}

.btn--light{background:#fff; color:#16122B;} .btn--light:hover{background:#FFE9DE; color:#16122B;}
.btn--outline{background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);} .btn--outline:hover{background:rgba(255,255,255,.1); color:#fff;}
.btn--primary{background:var(--color-accent-primary); color:#fff;} .btn--primary:hover{background:var(--color-accent-primary-strong); color:#fff;}
.btn--quiet{background:#fff; color:var(--color-text-primary); box-shadow:inset 0 0 0 1px var(--color-border-strong);} .btn--quiet:hover{background:var(--color-surface); color:var(--color-accent-primary);}
.btn .social-icon,.btn .ui-icon{width:18px; height:18px;}
.lp-hero .btn,.lp-about .btn,.nf-actions .btn{padding:12px 20px; font-size:var(--text-md); border-radius:var(--radius-pill); min-height:46px;}

.badge{display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:1px 8px; border-radius:var(--radius-pill); font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps); text-transform:uppercase; line-height:1.6; vertical-align:middle;}
.badge--new{background:var(--color-accent-secondary-soft); color:var(--color-accent-secondary-text); box-shadow:inset 0 0 0 1px #F8CDB5;}
.badge--members{background:#16122B; color:#FFD479;}
.badge__icon{width:11px; height:11px;}

/* Hero: dark dot-matrix canvas, warm horizon glow, floating icon tiles */
.lp-hero{position:relative; overflow:hidden; isolation:isolate; background:#16122B; color:#fff; padding:clamp(72px, 9vw, 132px) 0 clamp(80px, 10vw, 148px); text-align:center;}
.lp-hero::before{content:""; position:absolute; inset:0; z-index:-2; background-image:radial-gradient(rgba(255,255,255,.13) 1.2px, transparent 1.3px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 45%, #000 40%, transparent 100%); mask-image:radial-gradient(ellipse 80% 75% at 50% 45%, #000 40%, transparent 100%);}
.lp-hero::after{content:""; position:absolute; left:50%; bottom:-46%; z-index:-1; width:min(1400px, 160%); aspect-ratio:2.2; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(242,102,43,.85), rgba(166,71,180,.45) 55%, rgba(22,18,43,0) 100%); filter:blur(8px); animation:lp-glow 9s ease-in-out infinite alternate;}
@keyframes lp-glow{from{opacity:.82; transform:translateX(-50%) scale(1);} to{opacity:1; transform:translateX(-50%) scale(1.06);}}
.lp-hero__inner{position:relative; max-width:920px; margin:0 auto; padding:0 var(--gutter);}
.lp-hero__eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 var(--space-5); padding:6px 14px 6px 10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-medium); color:#E6E1FA;}
.lp-hero__title{margin:0; font-family:var(--font-heading); font-size:clamp(3rem, 1.6rem + 6.4vw, 6.75rem); font-weight:var(--weight-bold); line-height:.98; letter-spacing:-.045em; color:#fff;}
.lp-quote{margin:var(--space-6) auto 0; max-width:760px;}
.lp-quote blockquote{margin:0; padding:0; border:0; background:none;}
.lp-quote blockquote p{position:relative; margin:0; font-family:var(--font-heading); font-size:clamp(1.3rem, 1rem + 1.3vw, 2rem); font-weight:var(--weight-medium); line-height:1.3; letter-spacing:-.015em; color:#fff;}
.lp-quote blockquote p::before{content:"“"; display:block; height:.55em; margin-bottom:.1em; font-size:2.4em; line-height:1; color:var(--color-accent-secondary);}
.lp-quote figcaption{margin-top:var(--space-4); font-size:1.0625rem; line-height:1.6; color:#CFC8F0;}
.lp-hero__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); margin-top:var(--space-7);}
.lp-hero a:focus-visible{outline:2px solid #fff; outline-offset:3px;}
.lp-hero__tiles{position:absolute; inset:0; z-index:-1; pointer-events:none;}
.lp-tile{position:absolute; left:var(--x); top:var(--y); display:flex; align-items:center; justify-content:center; width:clamp(52px, 5vw, 72px); aspect-ratio:1; margin:-36px 0 0 -36px; border-radius:16px; background:rgba(255,255,255,.04); border:1.5px dashed rgba(255,255,255,.28); color:rgba(255,255,255,.8); transform:rotate(var(--r)); animation:lp-float 7s ease-in-out infinite; animation-delay:calc(var(--d) * -1);}
.lp-tile .ui-icon{width:46%; height:46%;}
@keyframes lp-float{0%,100%{translate:0 0;} 50%{translate:0 -12px;}}
@media (max-width:900px){ .lp-tile{opacity:.5;} .lp-tile:nth-child(n+5){display:none;} }
@media (max-width:640px){ .lp-hero__tiles{display:none;} .lp-hero__eyebrow{font-size:var(--text-xs); padding:5px 12px 5px 9px;} .lp-hero__cta .btn{width:100%; justify-content:center; max-width:340px;} }

.lp-ticker{overflow:hidden; background:var(--color-accent-secondary); color:#16122B; border-block:1px solid #D9551F;}
.lp-ticker__track{display:flex; width:max-content; margin:0; padding:0; list-style:none; animation:lp-marquee 60s linear infinite;}
.lp-ticker:hover .lp-ticker__track{animation-play-state:paused;}
.lp-ticker li{display:flex; align-items:center; gap:22px; margin:0; padding:13px 0 13px 22px; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-bold); letter-spacing:.01em; white-space:nowrap;}
.lp-ticker li::after{content:"✦"; font-size:.75em; opacity:.6;}
@keyframes lp-marquee{to{transform:translateX(-50%);}}

.lp-stats{border-bottom:1px solid var(--color-border);}
.lp-stats__inner{max-width:var(--page-width); margin:0 auto; padding:var(--space-6) var(--gutter); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4);}
.lp-stats__inner div{display:flex; flex-direction:column-reverse; gap:4px; padding-left:var(--space-4); border-left:2px solid var(--color-accent-primary-border);}
.lp-stats dt{font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-muted);}
.lp-stats dd{margin:0; font-family:var(--font-heading); font-size:clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight:var(--weight-bold); line-height:1.05; letter-spacing:-.02em; color:var(--color-text-primary);}
@media (max-width:720px){ .lp-stats__inner{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-5);} }

.lp-section{padding:clamp(64px, 7vw, 104px) 0; scroll-margin-top:var(--header-height);}
.lp-section__inner{max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter);}
.lp-section__head{max-width:720px; margin:0 0 var(--space-6);}
.lp-section__head h2{margin:0 0 var(--space-3); font-size:clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); line-height:1.1; letter-spacing:-.03em;}
.lp-section__head p{margin:0; font-size:1.125rem; line-height:1.6; color:var(--color-text-secondary);}
.lp-kicker{display:inline-flex; align-items:center; gap:8px; margin:0 0 var(--space-3) !important; font-family:var(--font-heading); font-size:var(--text-xs) !important; font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-secondary-text) !important;}
.lp-kicker::before{content:""; width:18px; height:2px; border-radius:2px; background:var(--color-accent-secondary);}
.lp-tracks,.lp-principles{background:var(--color-surface); border-block:1px solid var(--color-border);}

.search--xl{max-width:760px; margin-top:0;}
.search--xl input{min-height:60px; font-size:1.125rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);}
.filter-chips{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-4) 0 0;}
.filter-chip{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 15px; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); background:#fff; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-text-secondary); cursor:pointer; transition:background-color .15s, color .15s, border-color .15s;}
.filter-chip:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}
.filter-chip[aria-pressed="true"]{background:#16122B; border-color:#16122B; color:#fff;}
.filter-chip:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.lp-explore .search__status{margin:var(--space-5) 0 var(--space-4);}
.guide-list > li[hidden]{display:none;}
@media (min-width:1100px){ .guide-list--3{grid-template-columns:repeat(3,minmax(0,1fr));} }
.guide-card__track{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 var(--space-3) !important; font-family:var(--font-heading); font-size:var(--text-xs) !important; font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary) !important;}
.guide-card__track .badge{margin-left:2px;}

.track-grid,.spot-grid,.path-grid,.why-grid{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4);}
.track-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.track-grid > li,.spot-grid > li{margin:0; min-width:0;}
.track-card{--tc:var(--color-accent-primary); --tc-soft:var(--color-accent-primary-soft); display:flex; flex-direction:column; height:100%; padding:var(--space-5); background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); text-decoration:none; color:var(--color-text-primary); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.track-card:hover{transform:translateY(-3px); border-color:var(--tc); box-shadow:var(--shadow-md); color:var(--color-text-primary);}
.track-card--java{--tc:#C2410C; --tc-soft:#FFF0E6;} .track-card--backend{--tc:#1F6B47; --tc-soft:#E4F3EA;} .track-card--system-design{--tc:#2C5FD1; --tc-soft:#E8EEFC;}
.track-card--distributed-systems{--tc:#5B3CC4; --tc-soft:#EFEBFC;} .track-card--ai{--tc:#0F766E; --tc-soft:#E0F4F1;} .track-card--career{--tc:#7E540F; --tc-soft:#FBF1DE;}
.track-card__icon{display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:var(--space-4); border-radius:12px; background:var(--tc-soft); color:var(--tc);}
.track-card__icon .ui-icon{width:26px; height:26px;}
.track-card__kicker{font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--tc);}
.track-card__name{margin:4px 0 var(--space-2); font-family:var(--font-heading); font-size:1.5rem; font-weight:var(--weight-bold); letter-spacing:-.02em;}
.track-card__summary{font-size:var(--text-md); line-height:1.6; color:var(--color-text-secondary);}
.track-card__topics{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:var(--space-4) 0 0; padding:0;}
.track-card__topics li{margin:0; padding:3px 9px; border-radius:var(--radius-pill); background:var(--color-surface); border:1px solid var(--color-border); font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-secondary);}
.track-card__count{margin-top:auto; padding-top:var(--space-4); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--tc);}
@media (max-width:1000px){ .track-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .track-grid{grid-template-columns:minmax(0,1fr);} }

.spot-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));}
.spot{position:relative; display:flex; flex-direction:column; gap:var(--space-2); height:100%; padding:var(--space-6); border-radius:var(--radius-lg); background:linear-gradient(160deg,#1E1840 0%,#16122B 70%); color:#E6E1FA; text-decoration:none; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;}
.spot::after{content:""; position:absolute; right:-80px; bottom:-120px; width:280px; height:280px; border-radius:50%; background:radial-gradient(closest-side, rgba(242,102,43,.45), rgba(242,102,43,0)); pointer-events:none;}
.spot:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(22,18,43,.28); color:#E6E1FA;}
.spot:focus-visible{outline:3px solid var(--color-accent-secondary); outline-offset:3px;}
.spot__track{display:flex; align-items:center; gap:7px; font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:#FFB48F;}
.spot__title{font-family:var(--font-heading); font-size:clamp(1.375rem, 1.1rem + .8vw, 1.75rem); font-weight:var(--weight-bold); line-height:1.2; letter-spacing:-.02em; color:#fff;}
.spot__summary{font-size:var(--text-md); line-height:1.6; color:#CFC8F0;}
.spot__meta{margin-top:auto; padding-top:var(--space-3); font-family:var(--font-heading); font-size:var(--text-sm); color:#B7AEE0;}

.path-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.path-card{margin:0; padding:var(--space-5); background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);}
.path-card h3{margin:0 0 var(--space-1); font-size:1.25rem;}
.path-card > p{margin:0 0 var(--space-4); font-size:var(--text-md); color:var(--color-text-secondary);}
.path-card__steps{list-style:none; margin:0; padding:0; counter-reset:ps;}
.path-card__steps li{counter-increment:ps; position:relative; margin:0; padding:0 0 var(--space-4) 44px;}
.path-card__steps li::before{content:counter(ps); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:var(--color-accent-primary-soft); color:var(--color-accent-primary); box-shadow:inset 0 0 0 1px var(--color-accent-primary-border); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-bold); display:flex; align-items:center; justify-content:center;}
.path-card__steps li:not(:last-child)::after{content:""; position:absolute; left:13.5px; top:32px; bottom:4px; width:1px; background:repeating-linear-gradient(to bottom, var(--color-accent-primary-border) 0 4px, transparent 4px 8px);}
.path-card__steps li:last-child{padding-bottom:0;}
.path-card__steps a{display:block; font-family:var(--font-heading); font-weight:var(--weight-semibold); line-height:1.35; text-decoration:none;}
.path-card__steps a:hover{text-decoration:underline;}
.path-card__steps span{display:block; font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}
@media (max-width:1000px){ .path-grid{grid-template-columns:minmax(0,1fr);} }

.why-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6);}
.why-card{margin:0;}
.why-card__icon{display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:var(--space-4); border-radius:14px; background:#16122B; color:#FFB48F;}
.why-card__icon .ui-icon{width:26px; height:26px;}
.why-card h3{margin:0 0 var(--space-2); font-size:1.25rem;}
.why-card p{margin:0; font-size:var(--text-md); line-height:1.65; color:var(--color-text-secondary);}
@media (max-width:860px){ .why-grid{grid-template-columns:minmax(0,1fr);} }

.lp-about__inner{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(32px, 6vw, 88px); align-items:center;}
.lp-about__avatar{position:relative; aspect-ratio:1; border-radius:50%; padding:6px; background:conic-gradient(from 210deg, var(--color-accent-secondary), #A647B4, var(--color-accent-primary), var(--color-accent-secondary));}
.lp-about__avatar span{display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; background:#16122B radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.3px) 0 0/18px 18px; font-family:var(--font-heading); font-size:clamp(3rem, 2rem + 4vw, 5.5rem); font-weight:var(--weight-bold); letter-spacing:-.04em; color:#fff;}
.lp-about h2{margin:0 0 var(--space-4); font-size:clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); line-height:1.1; letter-spacing:-.03em;}
.lp-about__body > p{max-width:62ch; font-size:1.0625rem; line-height:1.7; color:var(--color-text-secondary);}
.lp-about__cta{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5);}
@media (max-width:760px){ .lp-about__inner{grid-template-columns:minmax(0,1fr);} .lp-about__avatar{width:160px;} }

/* Track hubs */
.hub-hero{background:var(--color-header-band); border-bottom:1px solid var(--color-header-band-border); padding:var(--space-5) 0 var(--space-6);}
.hub-hero__inner{max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter);}
.hub-hero__grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-6); align-items:center;}
.hub-hero h1{margin:var(--space-3) 0 var(--space-4); font-size:clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height:1.04; letter-spacing:-.035em;}
.hub-hero .dek{max-width:44em; margin:0;}
.hub-hero__icon{display:flex; align-items:center; justify-content:center; width:148px; height:148px; border-radius:36px; background:#16122B radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.3px) 0 0/16px 16px; color:#FFB48F; box-shadow:0 18px 40px rgba(22,18,43,.22); transform:rotate(-4deg);}
.hub-hero__icon .ui-icon{width:64px; height:64px;}
.hub-stats{display:flex; flex-wrap:wrap; gap:var(--space-6); margin:var(--space-6) 0 0;}
.hub-stats div{display:flex; flex-direction:column-reverse;}
.hub-stats dt{font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-muted);}
.hub-stats dd{margin:0; font-family:var(--font-heading); font-size:1.75rem; font-weight:var(--weight-bold); line-height:1.1; color:var(--color-accent-primary);}
@media (max-width:640px){ .hub-hero__badge{display:none;} .hub-hero__grid{grid-template-columns:minmax(0,1fr);} }
.hub-more{padding:var(--space-7) 0 0; border-top:1px solid var(--color-border);}
.hub-more h2{margin:0 0 var(--space-4); font-size:1.375rem;}
.track-pills{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0;}
.track-pills li{margin:0;}
.track-pill{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); font-family:var(--font-heading); font-weight:var(--weight-semibold); text-decoration:none; color:var(--color-text-primary);}
.track-pill:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}

/* Author identity on every article */
.byline__author a{color:inherit; font-weight:var(--weight-semibold); text-decoration:none; border-bottom:1px solid var(--color-link-underline);}
.byline__author a:hover{color:var(--color-accent-primary);}
.author-card{display:grid; grid-template-columns:72px minmax(0,1fr); gap:var(--space-5); margin:var(--space-7) 0 0; padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--color-accent-primary-soft), #fff 60%);}
.author-card__avatar{display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; background:#16122B; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--color-accent-secondary); font-family:var(--font-heading); font-size:1.5rem; font-weight:var(--weight-bold); color:#fff;}
.author-card__kicker{margin:0 !important; font-family:var(--font-heading); font-size:var(--text-2xs) !important; font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted) !important;}
.author-card__name{margin:2px 0 var(--space-2) !important; padding:0 !important; border:0 !important; font-size:1.375rem !important;}
.author-card__name::before{display:none !important;}
.author-card p{margin:0 0 var(--space-3); font-size:var(--text-md); color:var(--color-text-secondary);}
@media (max-width:520px){ .author-card{grid-template-columns:minmax(0,1fr);} }
.social-links{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0;}
.social-links li{margin:0; padding:0;}
.social-links a{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); background:#fff; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-text-primary); text-decoration:none;}
.social-links a:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}
.social-icon{width:17px; height:17px; flex:none;}
.site-footer .social-links{margin-top:var(--space-4);}
.site-footer .social-links a{background:transparent; border-color:#3A3650; color:#E6E1FA;}
.site-footer .social-links a:hover{border-color:#fff; color:#fff; text-decoration:none;}
.deep-dives{margin:var(--space-8) 0 0; padding:var(--space-5); border-radius:var(--radius-lg); background:var(--color-accent-secondary-soft); border:1px solid #F8CDB5;}
.deep-dives__kicker{margin:0 0 var(--space-1) !important; font-family:var(--font-heading); font-size:var(--text-2xs) !important; font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-secondary-text) !important;}
.deep-dives + .related{margin-top:var(--space-7);}
.hero--compact{padding-bottom:var(--space-6);}
.nf-actions{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5);}

/* Sub-topic pages */
.category__link{color:inherit; text-decoration:none;}
.category__link:hover{color:var(--color-accent-primary);}
.category__more{display:inline-flex; gap:6px; margin-top:var(--space-3); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); text-decoration:none;}
.hub-hero--topic h1{margin-top:var(--space-3);}
.topic-main{max-width:960px;}
.topic-list{list-style:none; margin:var(--space-6) 0 0; padding:0;}
.topic-item{display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--space-4); margin:0; padding:var(--space-6) 0; border-top:1px solid var(--color-border);}
.topic-item:first-child{border-top:0; padding-top:var(--space-4);}
.topic-item--deep{margin-left:40px; grid-template-columns:48px minmax(0,1fr);}
.topic-item--deep .topic-item__num{font-size:1.25rem; color:var(--color-accent-secondary);}
.topic-item__num{font-family:var(--font-heading); font-size:2rem; font-weight:var(--weight-bold); line-height:1; color:var(--color-accent-primary-border);}
.topic-item__kind{margin:0 0 var(--space-1); font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-primary);}
.topic-item--deep .topic-item__kind{color:var(--color-accent-secondary-text);}
.topic-item__title{margin:0 0 var(--space-2); font-size:clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height:1.25; letter-spacing:-.015em;}
.topic-item__title a{color:var(--color-text-primary); text-decoration:none;}
.topic-item__title a:hover{color:var(--color-accent-primary); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
.topic-item__summary{margin:0 0 var(--space-2); max-width:68ch; font-size:var(--text-md); line-height:1.65; color:var(--color-text-secondary);}
.topic-item__meta{margin:0; font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}
@media (max-width:640px){ .topic-item,.topic-item--deep{grid-template-columns:minmax(0,1fr); gap:var(--space-2);} .topic-item--deep{margin-left:var(--space-4); padding-left:var(--space-4); border-left:2px solid #F8CDB5;} }

/* Inline "Go deeper" link from a pillar guide to one of its deep dives */
.go-deeper{position:relative; display:block; margin:var(--space-6) 0; padding:var(--space-4) var(--space-5) var(--space-4) 68px; border:1px solid #F8CDB5; border-radius:var(--radius-md); background:var(--color-accent-secondary-soft); color:var(--color-text-primary); text-decoration:none;}
.go-deeper::before{content:"↳"; position:absolute; left:20px; top:var(--space-4); width:32px; height:32px; border-radius:50%; background:var(--color-accent-secondary); color:#fff; font-size:1.1rem; display:flex; align-items:center; justify-content:center;}
.go-deeper:hover{border-color:var(--color-accent-secondary); color:var(--color-text-primary);}
.go-deeper__kicker{display:block; font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-accent-secondary-text);}
.go-deeper__title{display:block; margin:2px 0 4px; font-family:var(--font-heading); font-size:1.0625rem; font-weight:var(--weight-bold); line-height:1.35;}
.go-deeper:hover .go-deeper__title{text-decoration:underline; text-underline-offset:3px;}
.go-deeper__text{display:block; font-size:var(--text-md); color:var(--color-text-secondary);}

/* 16. Motion & print ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important;}
}
@media print{
  .site-header,.toc,.toc-mobile,.code-copy,.copy-btn,.diagram-tools,#progress,.site-footer,.related,.pager,.nav-toggle,.skip-link,.header-search,.author-card,.deep-dives,.diagram__replay{display:none!important;}
  body{font-size:11pt; background:#fff;}
  .hero{background:none; border:0; padding:0 0 12pt;}
  .layout{display:block; padding:0;}
  article > *{max-width:none;}
  pre,.code-block,.cheat{background:#f6f6f6!important; color:#111!important; border:1px solid #ccc;}
  .cheat-table th,.cheat-table td{color:#111!important;}
  figure,pre,table,.callout{break-inside:avoid;}
  a{color:inherit;}
}