/* ==========================================================================
   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-band:#5A2FA8;
  --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);
}

/* 1b. Themes: light (default), dark, eye-safe (warm paper). Set on <html data-theme>, chosen in the header. */
:root{
  --color-glass:rgba(255,255,255,.95);
  --color-on-accent:#fff;
  --color-selection:#DCD3FA;
  --color-band-dark:#16122B;
  --color-panel:#15171C;
  color-scheme:light;
}
[data-theme="dark"]{
  color-scheme:dark;
  --color-background:#0E1016;
  --color-surface:#161922;
  --color-surface-sunken:#1B1F2A;
  --color-surface-raised:#13161E;
  --color-header-band:#131525;
  --color-header-band-border:#252942;
  --color-glass:rgba(14,16,22,.9);
  --color-selection:#3B3170;

  --color-text-primary:#E9EBF1;
  --color-text-secondary:#B8BDCB;
  --color-text-muted:#8D93A5;
  --color-text-inverse:#F3F4F7;

  --color-accent-primary:#8F78F2;
  --color-accent-primary-strong:#B7A8FF;
  --color-accent-primary-soft:#211C38;
  --color-accent-primary-border:#3B3268;
  --color-band:#5B3FC4;
  --color-accent-secondary:#DD6230;
  --color-accent-secondary-text:#FFA27A;
  --color-accent-secondary-soft:#2A1B13;

  --color-link:#A996FF;
  --color-link-hover:#CABDFF;
  --color-link-underline:rgba(169,150,255,.4);

  --color-border:#2A2E3D;
  --color-border-strong:#3B4053;
  --color-separator:#222634;

  --color-info:#6E9BFF;     --color-info-soft:#152038;     --color-info-border:#283B66;     --color-info-text:#A9C2FF;
  --color-success:#46B987;  --color-success-soft:#11261C;  --color-success-border:#24503B;  --color-success-text:#8FDAB5;
  --color-warning:#E0A54A;  --color-warning-soft:#2A2012;  --color-warning-border:#58421F;  --color-warning-text:#F1CB8A;
  --color-danger:#EC6B70;   --color-danger-soft:#2C1416;   --color-danger-border:#5C2A2D;   --color-danger-text:#F5AAAD;
  --color-violet:#9C87F5;   --color-violet-soft:#211C38;   --color-violet-border:#3B3268;   --color-violet-text:#C9BCFF;

  --color-code-bg:#0A0C11;
  --color-code-header:#11141B;
  --color-code-border:#262A37;
  --color-inline-code-bg:#211C38;
  --color-inline-code-border:#3B3268;
  --color-inline-code-text:#D2C7FF;

  --color-table-head-bg:#232737;
  --color-table-row-border:#2A2E3D;
  --color-table-row-hover:#181B25;
  /* diagrams keep a soft light "paper" card so every illustration stays legible */
  --color-diagram-surface:#F1F2F6;
  --color-diagram-border:#2A2E3D;
  --color-band-dark:#0A0B14;
  --color-panel:#1D2131;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 28px rgba(0,0,0,.45);
  --focus-ring:0 0 0 3px rgba(143,120,242,.45);
}
[data-theme="sepia"]{
  color-scheme:light;
  --color-background:#F6EFE1;
  --color-surface:#EFE6D4;
  --color-surface-sunken:#E9DEC8;
  --color-surface-raised:#FBF6EC;
  --color-header-band:#F0E7D5;
  --color-header-band-border:#E2D5BC;
  --color-glass:rgba(246,239,225,.94);
  --color-selection:#E4D3B4;

  --color-text-primary:#2D251A;
  --color-text-secondary:#54483A;
  --color-text-muted:#776A57;

  --color-accent-primary:#5A3DA8;
  --color-accent-primary-strong:#43298A;
  --color-accent-primary-soft:#ECE2EA;
  --color-accent-primary-border:#D8C8D9;
  --color-band:#5A3DA8;
  --color-accent-secondary:#D3582A;
  --color-accent-secondary-text:#9C3F17;
  --color-accent-secondary-soft:#F5E3D1;
  --color-link-underline:rgba(90,61,168,.35);

  --color-border:#E0D3BA;
  --color-border-strong:#CCBB9C;
  --color-separator:#E7DCC6;

  --color-info-soft:#E6E6DC;     --color-info-border:#CFCFC0;
  --color-success-soft:#E2EAD6;  --color-success-border:#C3D4B2;
  --color-warning-soft:#F4E5C6;  --color-warning-border:#E2C996;
  --color-danger-soft:#F5DFD6;   --color-danger-border:#E5C0B3;
  --color-violet-soft:#ECE2EA;   --color-violet-border:#D8C8D9;

  --color-code-bg:#2A241D;
  --color-code-header:#332C23;
  --color-code-border:#40372C;
  --color-code-text:#EDE4D6;
  --color-code-muted:#B3A68F;
  --color-inline-code-bg:#EDE2CF;
  --color-inline-code-border:#DCCDB2;
  --color-inline-code-text:#5A3A7E;

  --color-table-head-bg:#3A3227;
  --color-table-head-text:#F6EFE1;
  --color-table-row-border:#E2D6BF;
  --color-table-row-hover:#F1E8D7;
  --color-diagram-surface:#FCF8F0;
  --color-band-dark:#2A2119;
  --color-panel:#2D251A;

  --shadow-sm:0 1px 2px rgba(60,40,10,.08);
  --shadow-md:0 8px 24px rgba(60,40,10,.1);
}
/* Diagrams on the dark theme: a light card, slightly dimmed so it doesn't glare */
[data-theme="dark"] figure.diagram svg,[data-theme="dark"] figure.diagram img{filter:brightness(.94);}
[data-theme="sepia"] figure.diagram svg,[data-theme="sepia"] figure.diagram img{filter:sepia(.12);}

/* 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:var(--color-selection); 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-panel); 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:var(--color-glass); 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); white-space:nowrap; flex:none;}
.brand:hover{color:var(--color-text-primary);}
.brand__mark{display:block; width:47px; height:31px; flex:none;}
.brand__type{display:flex; flex-direction:column; line-height:1;}
.brand__name{font-weight:var(--weight-bold); font-size:1.125rem; letter-spacing:-.015em;}
.brand__by{margin-top:4px; font-weight:var(--weight-semibold); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-muted);}
.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; white-space:nowrap; 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:1240px){
  .js .nav-toggle{display:inline-flex;}
  .js .site-nav{display:none; position:absolute; top:var(--header-height); left:0; right:0; background:var(--color-surface-raised); 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{gap:8px;} .brand__mark{width:41px; height:27px;} .brand__name{font-size:1rem;} .brand__by{font-size:.5625rem; letter-spacing:.12em;}
  .nav-toggle{padding:7px 10px;}
}
@media (max-width:440px){
  .nav-toggle{font-size:0; gap:0; width:40px; padding:0; justify-content:center;}
}
@media (max-width:360px){
  .site-header__inner{gap:var(--space-2);}
}

/* 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-panel); 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-panel); 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:var(--color-danger-text); 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:var(--color-danger-text); 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.5fr repeat(4,minmax(0,1fr)); gap:var(--space-6);}
.site-footer a.brand{display:inline-flex; color:#fff;}
.site-footer .brand__mark{width:56px; height:37px;} .site-footer .brand__name{font-size:1.25rem;} .site-footer .brand__by{color:#9195A5;}
.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:var(--color-surface-raised); 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:var(--color-surface-raised);}
.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:var(--color-surface-raised); 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:#15171C; 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:1240px){ .header-search{margin-left:0;} }
/* Account link in the header (signed-out: "Sign in"; signed-in: avatar + first name) */
.header-account{display:inline-flex; align-items:center; gap:8px; flex:none; height:40px; padding:0 14px 0 11px; border-radius:var(--radius-pill); background:var(--color-panel); color:#fff; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold); text-decoration:none; white-space:nowrap;}
.header-account:hover{background:var(--color-accent-primary); color:#fff;}
.header-account__icon{width:18px; height:18px;}
.header-account.is-signed-in{background:var(--color-surface-raised); color:var(--color-text-primary); box-shadow:inset 0 0 0 1px var(--color-border); padding:0 12px 0 6px;}
.header-account.is-signed-in:hover{box-shadow:inset 0 0 0 1px var(--color-accent-primary); color:var(--color-accent-primary); background:var(--color-surface-raised);}
.header-account__avatar{width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none;}
.header-account__avatar--initial{display:inline-flex; align-items:center; justify-content:center; background:var(--color-accent-primary); color:#fff; font-size:var(--text-sm);}
.header-account__label{max-width:9em; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:1240px){ .header-account{margin-left:0;} }
@media (max-width:480px){
  .header-account{width:40px; padding:0; justify-content:center;}
  .header-account.is-signed-in{padding:0;}
  .header-account__label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
}

/* Sign-in and account pages */
.auth-main{display:flex; justify-content:center; padding:clamp(40px,8vw,96px) var(--gutter); background:var(--color-surface); min-height:calc(100vh - var(--header-height) - 280px);}
.auth-card{width:100%; max-width:440px; background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-lg, 12px); box-shadow:var(--shadow-md); padding:clamp(28px,5vw,40px); text-align:center;}
.auth-card__mark{width:44px; height:44px; margin-bottom:var(--space-4, 16px);}
.auth-card h1{font-size:clamp(1.375rem,3vw,1.625rem); margin:0 0 var(--space-2, 8px); overflow-wrap:anywhere;}
.auth-card__lede{color:var(--color-text-secondary); margin:0 0 var(--space-6, 24px); overflow-wrap:anywhere;}
.auth-card__fine{font-size:var(--text-sm); color:var(--color-text-muted); margin:var(--space-3, 12px) 0 0;}
.auth-google{width:100%; justify-content:center; gap:12px; min-height:48px; font-size:var(--text-md); background:var(--color-surface-raised); color:var(--color-text-primary); box-shadow:inset 0 0 0 1px var(--color-border-strong); border-radius:var(--radius-pill);}
.auth-google:hover{background:var(--color-surface); color:var(--color-text-primary); box-shadow:inset 0 0 0 1px var(--color-text-primary);}
.auth-alert{margin:0 0 var(--space-4, 16px); padding:10px 14px; border-radius:var(--radius-md); background:#FDECEC; color:#8A1C1C; font-size:var(--text-sm); text-align:left;}
.account-avatar{width:72px; height:72px; border-radius:50%; object-fit:cover; margin:0 auto var(--space-3, 12px); display:block;}
.account-avatar[hidden]{display:none;}
.order-status{margin:0 0 var(--space-4, 16px); padding:12px 14px; border-radius:8px; text-align:left; font-size:var(--text-sm); line-height:1.5; background:var(--color-surface-2, #f4f5f8); border:1px solid var(--color-separator);}
.order-status--ok{background:#ecfdf3; border-color:#a6e9c0; color:#05603a;}
.order-status--bad{background:#fef3f2; border-color:#fecdca; color:#b42318;}
.account-facts{display:grid; gap:0; margin:0 0 var(--space-4, 16px); text-align:left; border-top:1px solid var(--color-separator);}
.account-facts div{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4, 16px); padding:12px 0; border-bottom:1px solid var(--color-separator);}
.account-facts dt{color:var(--color-text-muted); font-size:var(--text-sm);}
.account-facts dd{margin:0; font-weight:var(--weight-semibold);}
.account-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:var(--space-6, 24px);}
.account-actions .btn{cursor:pointer;}
.auth-main + .site-footer{margin-top:0;}

/* Legal pages (privacy, terms) */
.legal{max-width:var(--reading-width); font-size:var(--text-md, 1rem); line-height:1.7;}
.legal h2{font-size:1.25rem; margin:var(--space-7, 40px) 0 var(--space-3, 12px);}
.legal__updated{color:var(--color-text-muted); font-size:var(--text-sm);}
.legal table{width:100%; border-collapse:collapse; margin:var(--space-4, 16px) 0; font-size:var(--text-sm);}
.legal th,.legal td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--color-separator);}
.legal code{font-size:.9em;}
@media (max-width:560px){ .legal table,.legal tbody,.legal tr,.legal td{display:block;} .legal thead{display:none;} .legal td{border:0; padding:4px 0;} .legal tr{padding:10px 0; border-bottom:1px solid var(--color-separator);} .legal td:first-child{padding-top: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:var(--color-surface-raised); 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; width:48px; height:3px; margin:0 auto var(--space-5); border-radius:2px; background: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-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:var(--color-surface-raised); 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:var(--color-surface-raised); 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:var(--color-surface-raised); 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);} }

.mentor{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:clamp(32px, 5vw, 72px); align-items:center; padding:clamp(24px, 4vw, 56px); border-radius:24px; background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent-secondary) 7%, var(--color-surface-raised)) 0%, color-mix(in srgb, var(--color-accent-primary) 7%, var(--color-surface-raised)) 100%); border:1px solid var(--color-border);}
.mentor__badge{display:inline-flex; margin:0 0 var(--space-4); padding:5px 14px; border-radius:var(--radius-pill); background:var(--color-surface-raised); border:1px solid var(--color-accent-primary-border); color:var(--color-accent-primary); font-size:var(--text-sm); font-weight:var(--weight-semibold);}
.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;}
.mentor__story p{margin:0 0 var(--space-4); max-width:62ch; font-size:1.0625rem; line-height:1.7; color:var(--color-text-secondary);}
.mentor__story strong{color:var(--color-text-primary);}
.mentor__quote{margin:var(--space-5) 0 var(--space-4); padding-left:var(--space-4); border-left:3px solid var(--color-accent-secondary); font-family:var(--font-heading); font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height:1.45; color:var(--color-text-primary);}
.mentor__quote strong{font-weight:var(--weight-bold);}
.mentor__more{margin:0 0 var(--space-5);}
.mentor__more a{font-weight:var(--weight-semibold);}
.mentor__sig{display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--color-separator); font-size:var(--text-sm); color:var(--color-text-secondary);}
.mentor__sig-item{padding-right:14px; margin-right:14px; border-right:1px solid var(--color-border-strong); line-height:1.2;}
.mentor__sig strong{font-family:var(--font-heading); font-size:1rem; color:var(--color-text-primary);}
.mentor__socials{display:inline-flex; gap:6px;}
.mentor__social{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--color-surface-raised); border:1px solid var(--color-border); color:var(--color-text-primary);}
.mentor__social:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}
.mentor__social svg{width:17px; height:17px; margin:0;}
.mentor__photo{margin:0; position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden; contain:paint; box-shadow:0 24px 48px -20px rgba(21,23,28,.35);}
.mentor__photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%;}
.mentor__photo--mono{display:flex; align-items:center; justify-content:center; background:#16122B radial-gradient(rgba(255,255,255,.1) 1.2px, transparent 1.3px) 0 0/18px 18px;}
.mentor__photo--mono::before{content:""; position:absolute; inset:auto -20% -30% -20%; height:70%; background:radial-gradient(closest-side, rgba(242,101,34,.55), transparent), radial-gradient(closest-side at 30% 60%, rgba(124,92,255,.5), transparent); filter:blur(10px);}
.mentor__initials{position:relative; font-family:var(--font-heading); font-size:clamp(4rem, 3rem + 5vw, 7.5rem); font-weight:var(--weight-bold); letter-spacing:-.05em; color:#fff;}
.mentor__photo--mono img.mentor__mark{position:absolute; left:22px; bottom:22px; width:47px; height:auto; opacity:.9;}
.legal.about-page,.about-page > .mentor{max-width:none;}
.home-main:has(.about-page){max-width:var(--page-width);}
.about-page > :not(.mentor){max-width:var(--reading-width);}
.about-page .mentor{grid-template-columns:minmax(0,1fr) minmax(0,300px); align-items:start; margin-bottom:var(--space-6);}
.about-page .mentor__photo{position:sticky; top:96px;}
@media (max-width:860px){ .mentor,.about-page .mentor{grid-template-columns:minmax(0,1fr);} .mentor__photo{order:-1; width:min(240px, 70%); aspect-ratio:1; border-radius:50%;} .about-page .mentor__photo{position:static;} .mentor__photo--mono img.mentor__mark{display:none;} }
@media (max-width:480px){ .mentor__sig-item{border-right:0; padding-right:0; margin-right:0; width:100%;} }

/* 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), var(--color-surface-raised) 60%);}
img.author-card__avatar{object-fit:cover;}
.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 var(--color-background), 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:var(--color-surface-raised); 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);}

/* Scale: listings, pagination, tags */
.search__more{display:flex; justify-content:center; margin-top:var(--space-6);}
.search__more [hidden]{display:none;}
.category__all{margin:var(--space-5) 0 0;}
.pagination{margin:var(--space-7) 0 var(--space-4);}
.pagination ol{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0;}
.pagination li{margin:0;}
.pagination a,.pagination span{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--color-border-strong); border-radius:var(--radius-md); font-family:var(--font-heading); font-weight:var(--weight-semibold); text-decoration:none; color:var(--color-text-primary);}
.pagination a:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}
.pagination [aria-current]{background:var(--color-panel); border-color:var(--color-text-primary); color:#fff;}
.track-pill .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;}
.track-pills--tags{margin-top:var(--space-4);}
.tag-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3); margin:var(--space-8) 0 0; padding-top:var(--space-5); border-top:1px solid var(--color-border);}
.tag-row__label{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-text-muted);}
.tag-row ul{display:flex; flex-wrap:wrap; gap:var(--space-2); list-style:none; margin:0; padding:0;}
.tag-row li{margin:0;}
.tag-pill{display:inline-block; padding:4px 12px; border:1px solid var(--color-border); border-radius:var(--radius-pill); background:var(--color-surface); font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-text-secondary); text-decoration:none;}
.subscribe__actions{display:flex; flex-wrap:wrap; gap:10px; margin:var(--space-4, 16px) 0 var(--space-8, 32px);}
.tag-pill:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}

/* 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;}
}
/* Tech Blogs -------------------------------------------------------------- */
.site-nav__group{position:relative;}
.site-nav__btn{display:flex; align-items:center; gap:4px; white-space:nowrap; padding:8px 12px; border:0; border-radius:var(--radius-md); background:none; cursor:pointer; font-family:var(--font-heading); font-size:var(--text-md); font-weight:var(--weight-medium); color:var(--color-text-secondary); position:relative;}
.site-nav__btn svg{width:12px; height:12px; transition:transform .15s;}
.site-nav__btn:hover{color:var(--color-text-primary); background:var(--color-surface);}
.site-nav__btn.is-current{color:var(--color-text-primary); font-weight:var(--weight-semibold);}
.site-nav__btn.is-current::after{content:""; position:absolute; left:12px; right:12px; bottom:-11px; height:2px; background:var(--color-accent-secondary); border-radius:2px;}
.site-nav__btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.site-nav .site-nav__menu{display:none; position:absolute; top:calc(100% + 10px); left:-8px; z-index:60; width:300px; flex-direction:column; gap:2px; padding:8px; background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);}
.site-nav__menu::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px;}
.site-nav__btn[aria-expanded="true"] + .site-nav__menu,html:not(.js) .site-nav__group:focus-within .site-nav__menu{display:flex;}
@media (hover:hover) and (min-width:1241px){ .site-nav__group:hover .site-nav__menu{display:flex;} .site-nav__group:hover .site-nav__btn svg{transform:rotate(180deg);} }
.site-nav__menu a{display:flex; flex-direction:column; gap:2px; padding:10px 12px; white-space:normal;}
.site-nav__menu a[aria-current]::after{display:none;}
.site-nav__menu a[aria-current]{background:var(--color-accent-primary-soft);}
.site-nav__name{color:var(--color-text-primary); font-weight:var(--weight-semibold);}
.site-nav__desc{font-family:var(--font-body); font-size:var(--text-sm); font-weight:400; color:var(--color-text-muted);}
@media (max-width:1240px){
  .js .site-nav__btn{width:100%; justify-content:space-between; padding:12px 0; border-radius:0; border-bottom:1px solid var(--color-separator); font-size:1rem;}
  .js .site-nav__btn:hover{background:none;}
  .site-nav__btn.is-current::after{display:none;}
  .js .site-nav .site-nav__menu{position:static; width:auto; padding:0 0 0 var(--space-4); border:0; box-shadow:none; border-radius:0;}
  .js .site-nav__menu a{padding:10px 0;}
  .js .site-nav__menu a[aria-current]{background:none;}
  .site-nav__menu::before{display:none;}
}
@media (min-width:1241px){ .site-nav__btn{padding:8px 9px;} .site-nav__btn.is-current::after{left:9px; right:9px;} }
.site-nav__extra{margin-left:var(--space-2); padding-left:var(--space-2); border-left:1px solid var(--color-border);}
.site-nav__extra + .site-nav__extra{margin-left:0; padding-left:0; border-left:0;}
@media (max-width:1240px){ .js .site-nav__extra{margin:0; padding:0; border:0;} }
@media (min-width:1241px){ .site-nav a{padding:8px 9px;} .site-nav a[aria-current]::after{left:9px; right:9px;} .site-nav__extra{margin-left:var(--space-1); padding-left:var(--space-1);} }
.blog-mono{display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:10px; background:var(--mono-bg); color:var(--mono-fg); font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:1.125rem; line-height:1; box-shadow:inset 0 0 0 1px rgba(21,23,28,.08);}
.blog-mono--logo{position:relative; background:#fff; overflow:hidden;}
.blog-mono--logo::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(21,23,28,.1); pointer-events:none;}
.blog-mono--logo img{display:block; width:100%; height:100%; object-fit:cover;}
.blog-mono--sm{width:28px; height:28px; border-radius:7px; font-size:.8125rem;}
.ext{width:.8em; height:.8em; margin-left:.3em; vertical-align:-.05em; flex:none; opacity:.7;}
.btn--sm{padding:6px 12px; font-size:var(--text-xs); min-height:34px;}
.btn .ext{opacity:1;}

.blogs-hero__facts{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-5); margin-top:var(--space-5); font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-secondary);}
.blogs-hero__facts strong{color:var(--color-text-primary);}
.blogs-hero__monos{display:inline-flex; flex-wrap:wrap; gap:4px;}

.blogs-main{padding-top:var(--space-6); padding-bottom:var(--space-6);}
.blogs-tabs{display:flex; gap:var(--space-1); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-5);}
.blogs-tab{position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px 12px; background:none; border:0; font-family:var(--font-heading); font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-text-secondary); cursor:pointer;}
.blogs-tab:hover{color:var(--color-text-primary);}
.blogs-tab[aria-selected="true"]{color:var(--color-text-primary);}
.blogs-tab[aria-selected="true"]::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:var(--color-accent-secondary);}
.blogs-tab:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-md);}
.blogs-tab .count,.blogs-group .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:1px 7px;}
html:not(.js) .blogs-tabs,html:not(.js) .blogs-toolbar,html:not(.js) .blogs-chips,html:not(.js) #panel-latest .post-feed{display:none;}

.blogs-toolbar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3) var(--space-4);}
.blogs-toolbar .search{flex:1 1 380px; margin:0; max-width:none;}
.blogs-selects{display:flex; flex-wrap:wrap; gap:var(--space-3);}
.blogs-select{display:flex; flex-direction:column; gap:4px; 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-text-muted);}
.blogs-select select{min-height:50px; min-width:170px; padding:0 36px 0 14px; border:1px solid var(--color-border-strong); border-radius:var(--radius-md); background:var(--color-surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235F6372' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; font:var(--weight-medium) var(--text-sm)/1.2 var(--font-heading); color:var(--color-text-primary); text-transform:none; letter-spacing:0; -webkit-appearance:none; appearance:none; cursor:pointer;}
.blogs-select select:focus{outline:none; border-color:var(--color-accent-primary); box-shadow:var(--focus-ring);}
.blogs-select[hidden]{display:none;}
.blogs-check{display:inline-flex; align-items:center; gap:8px; min-height:50px; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-text-secondary); cursor:pointer;}
.blogs-check input{width:18px; height:18px; margin:0; accent-color:var(--color-accent-primary);}
.blogs-check[hidden]{display:none;}
.blogs-chips{margin-top:var(--space-4);}
.blogs-main .search__status{margin:var(--space-4) 0 var(--space-3);}
.blogs-note{padding:var(--space-4); border:1px dashed var(--color-border-strong); border-radius:var(--radius-md); color:var(--color-text-secondary);}
.blogs-panel[hidden]{display:none;}

.post-feed{min-height:200px;}
.post-day{margin:var(--space-6) 0 0; padding:0 0 var(--space-2); border-bottom:1px solid var(--color-border); 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-text-muted);}
.post-day:first-child{margin-top:0;}
.post-list{list-style:none; margin:0; padding:0;}
.post-row{display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--space-4); padding:var(--space-4) 0; border-bottom:1px solid var(--color-separator);}
.post-row__meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 4px; font-family:var(--font-heading); font-size:var(--text-xs); color:var(--color-text-muted);}
.post-row__blog{padding:0; background:none; border:0; font:inherit; font-weight:var(--weight-bold); color:var(--color-text-secondary); cursor:pointer; text-decoration:none;}
.post-row__blog:hover{color:var(--color-accent-primary); text-decoration:underline;}
.post-row__title{margin:0; font-family:var(--font-heading); font-size:1.0625rem; font-weight:var(--weight-semibold); line-height:1.35; letter-spacing:-.005em;}
.post-row__title a{color:var(--color-text-primary); text-decoration:none;}
.post-row__title a:hover{color:var(--color-accent-primary); text-decoration:underline; text-underline-offset:3px;}
.post-row__title a:visited{color:#5F5873;}
.post-row__cats{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:var(--space-2) 0 0; padding:0;}
.post-skeleton{height:68px; margin:0 0 var(--space-2); border-radius:var(--radius-md); background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-surface-sunken) 50%,var(--color-surface) 75%) 0 0 / 200% 100%; animation:post-shimmer 1.4s linear infinite;}
@keyframes post-shimmer{to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){ .post-skeleton{animation:none;} }

.blogs-group{display:flex; align-items:center; gap:10px; margin:var(--space-6) 0 var(--space-4); font-size:var(--text-lg, 1.25rem);}
.blogs-group:first-child{margin-top:0;}
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-4); list-style:none; margin:0 0 var(--space-6); padding:0;}
.blog-card{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-lg); scroll-margin-top:calc(var(--header-height) + 16px); transition:border-color .15s, box-shadow .15s;}
.blog-card:hover{border-color:var(--color-border-strong); box-shadow:var(--shadow-sm);}
.blog-card:target{border-color:var(--color-accent-secondary); box-shadow:0 0 0 3px var(--color-accent-secondary-soft);}
.blog-card[hidden]{display:none;}
.blog-card__head{display:flex; align-items:center; gap:var(--space-3); min-width:0;}
.blog-card__head > div{min-width:0;}
.blog-card__name{margin:0; font-size:1.0625rem; line-height:1.25;}
.blog-card__name a{color:var(--color-text-primary); text-decoration:none;}
.blog-card__name a:hover{color:var(--color-accent-primary); text-decoration:underline;}
.blog-card__host{margin:2px 0 0; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--color-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.blog-card__blurb{margin:0; font-size:var(--text-sm); line-height:1.55; color:var(--color-text-secondary); flex:1;}
.blog-card__cats{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0;}
.blog-card__actions{display:flex; flex-wrap:wrap; gap:var(--space-2); padding-top:var(--space-3); border-top:1px solid var(--color-separator);}
html:not(.js) .blog-card__latest{display:none;}
.blogs-footnote{margin:var(--space-6) 0 0; padding-top:var(--space-4); border-top:1px solid var(--color-border); font-size:var(--text-sm); color:var(--color-text-muted);}

.lp-blogs{background:var(--color-surface);}
.blogs-teaser{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-3); list-style:none; margin:0; padding:0;}
.blogs-teaser__item{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-lg); font-family:var(--font-heading); font-weight:var(--weight-semibold); color:var(--color-text-primary); text-decoration:none;}
.blogs-teaser__item:hover{border-color:var(--color-accent-primary); color:var(--color-accent-primary);}
.blogs-teaser__cta{margin:var(--space-5) 0 0;}
@media (max-width:640px){
  .blogs-chips{flex-wrap:nowrap; overflow-x:auto; margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); padding:2px var(--gutter) 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .blogs-chips::-webkit-scrollbar{display:none;}
  .blogs-chips .filter-chip{flex:none; min-height:36px; padding:6px 13px;}
  .blogs-select{flex:1 1 140px;} .blogs-select select{min-width:0; width:100%;}
  .blogs-check{min-height:0;}
  .post-row{grid-template-columns:28px minmax(0,1fr); gap:var(--space-3);}
  .post-row .blog-mono{width:28px; height:28px; border-radius:7px; font-size:.8125rem;}
  .post-row__title{font-size:1rem;}
  .blog-grid{grid-template-columns:minmax(0,1fr);}
}


/* ---------- About ---------- */

/* ---------- Pricing & support pages ---------- */
.pricing-page,.pricing-page > .pricing{max-width:none;}
.home-main:has(.pricing-page){max-width:var(--page-width);}
/* paywall (course lessons and members-only articles) */
.paywall{position:relative; margin:calc(-1 * var(--space-8)) 0 var(--space-7); padding-top:var(--space-8); background:linear-gradient(to bottom, transparent, var(--color-background) var(--space-8));}
.paywall__card{padding:var(--space-6); border:1px solid var(--color-accent-primary-border); border-radius:var(--radius-lg); background:linear-gradient(160deg,var(--color-accent-primary-soft), var(--color-surface-raised) 60%); box-shadow:var(--shadow-md); text-align:center;}
.paywall__kicker{display:inline-flex; align-items:center; gap:6px; margin:0 0 var(--space-2) !important; 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);}
.paywall__title{margin:0 0 var(--space-3) !important; font-size:var(--text-h3) !important;}
.paywall__card > p{max-width:52ch; margin-left:auto; margin-right:auto; color:var(--color-text-secondary);}
.paywall__list{list-style:none; margin:0 auto var(--space-5) !important; padding:0 !important; max-width:420px; text-align:left; border-top:1px solid var(--color-accent-primary-border);}
.paywall__list li{display:flex; gap:10px; align-items:center; margin:0; padding:9px 4px; border-bottom:1px solid var(--color-accent-primary-border); font-family:var(--font-heading); font-weight:var(--weight-semibold); font-size:var(--text-md); color:var(--color-text-secondary);}
.paywall__list .ci,.paywall__lock{width:14px; height:14px; color:var(--color-accent-primary);}
.paywall__actions{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); margin-bottom:var(--space-3);}
.paywall__note{margin:0 !important; font-family:var(--font-heading); font-size:var(--text-sm); color:var(--color-text-muted);}
.paywall__kicker .paywall__lock{color:inherit;}
.toc-locked a{display:flex; align-items:center; gap:6px; color:var(--color-text-muted);}
.toc-lock{flex:none; width:12px; height:12px; color:var(--color-accent-primary);}
@media (max-width:640px){ .paywall__card{padding:var(--space-5) var(--space-4);} .paywall__actions .btn{flex:1 1 100%; justify-content:center;} }
@media print{ .paywall{display:none !important;} }

.pass-grid{list-style:none; margin:0 0 var(--space-5); padding:var(--space-5) 0 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--space-6) var(--space-4); align-items:start;}
.pass-grid > .pass-card{grid-column:span 2;}
.pass-grid > .pass-card--live{grid-column:span 3;}
.pass-card{position:relative; display:flex; flex-direction:column; background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:16px; box-shadow:var(--shadow-sm);}
.pass-card__body{display:flex; flex-direction:column; padding:var(--space-5); flex:1;}
.pass-card--live{border:2px solid var(--color-accent-primary); box-shadow:var(--shadow-md); margin-top:-36px;}
.pass-card__flag{margin:0; padding:8px 12px; border-radius:14px 14px 0 0; background:var(--color-accent-primary); color:#fff; text-align:center; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-semibold);}
.pass-card--soon{background:var(--color-surface);}
.pass-card__name{margin:0; font-size:1.1875rem; line-height:1.25; letter-spacing:-.01em;}
.pass-card__soon{display:inline-block; align-self:flex-start; margin-top:var(--space-2); padding:2px 10px; border-radius:var(--radius-pill); background:var(--color-warning-soft); color:var(--color-warning-text); border:1px solid var(--color-warning-border); font-size:var(--text-xs); font-weight:var(--weight-semibold);}
.pass-card__summary{margin:var(--space-3) 0 var(--space-4); font-size:var(--text-sm); line-height:1.55; color:var(--color-text-secondary); min-height:4.65em;}
.dur{--fill:1; margin:0 0 var(--space-1);}
.dur__head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2); margin-bottom:6px;}
.dur__label{font-size:var(--text-xs); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--color-text-muted);}
.dur__value{font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--color-accent-primary);}
.pass-card--soon .dur__value{color:var(--color-text-secondary);}
.dur__range{--track:6px; --thumb:22px; display:block; width:100%; height:var(--thumb); margin:0; background:none; -webkit-appearance:none; appearance:none; cursor:pointer;}
.dur__range:focus-visible{outline:2px solid var(--color-accent-primary); outline-offset:4px; border-radius:var(--radius-pill);}
.dur__range::-webkit-slider-runnable-track{height:var(--track); border-radius:var(--radius-pill); background:linear-gradient(to right, var(--color-accent-primary) calc(var(--fill) * 100%), var(--color-separator) 0);}
.dur__range::-moz-range-track{height:var(--track); border-radius:var(--radius-pill); background:var(--color-separator);}
.dur__range::-moz-range-progress{height:var(--track); border-radius:var(--radius-pill); background:var(--color-accent-primary);}
.dur__range::-webkit-slider-thumb{-webkit-appearance:none; width:var(--thumb); height:var(--thumb); margin-top:calc((var(--track) - var(--thumb)) / 2); border-radius:50%; background:var(--color-surface-raised); border:2px solid var(--color-accent-primary); box-shadow:0 1px 4px rgba(21,23,28,.22);}
.dur__range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--color-surface-raised); border:2px solid var(--color-accent-primary); box-shadow:0 1px 4px rgba(21,23,28,.22);}
.pass-card--soon .dur__range{--accent:var(--color-text-muted);}
.pass-card--soon .dur__range::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-text-muted) calc(var(--fill) * 100%), var(--color-separator) 0);}
.pass-card--soon .dur__range::-moz-range-progress{background:var(--color-text-muted);}
.pass-card--soon .dur__range::-webkit-slider-thumb{border-color:var(--color-text-muted);}
.pass-card--soon .dur__range::-moz-range-thumb{border-color:var(--color-text-muted);}
.dur__ticks{position:relative; height:26px; margin:4px 0 0;}
.dur__pick{position:absolute; top:0; left:calc(11px + var(--at) * (100% - 22px)); transform:translateX(-50%); padding:3px 6px; border:0; border-radius:var(--radius-pill); background:none; font:inherit; font-size:var(--text-xs); color:var(--color-text-muted); cursor:pointer; white-space:nowrap;}
.dur__pick:hover{color:var(--color-text-primary); background:var(--color-surface);}
.dur__pick.is-on{color:var(--color-text-primary); font-weight:var(--weight-semibold);}
.pass-card__price{margin:var(--space-4) 0 var(--space-4);}
.pass-card__amount{margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.pass-card__amount span{font-family:var(--font-heading); font-size:2.25rem; font-weight:var(--weight-bold); line-height:1.1; letter-spacing:-.02em; color:var(--color-text-primary);}
.pass-card__amount small{font-size:var(--text-sm); color:var(--color-text-muted);}
.pass-card__per{margin:4px 0 0; font-size:var(--text-sm); color:var(--color-text-secondary);}
.pass-card__btn{width:100%; justify-content:center; min-height:44px;}
.pass-card__btn.is-disabled,.pass-card__btn:disabled{opacity:.7; cursor:default; pointer-events:none;}
button.pass-card__btn:disabled{pointer-events:auto;}
.pass-card__msg{margin:var(--space-3) 0 0; padding:10px 12px; border-radius:var(--radius-md); background:var(--color-success-soft); border:1px solid var(--color-success-border); color:var(--color-success-text); font-size:var(--text-sm); line-height:1.5;}
.pass-card__features{margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-separator); font-size:var(--text-sm);}
.pass-card__features li{padding:4px 0 4px 26px;}
.pass-card__features li::before{top:9px;}
.pass-card--soon .pass-card__features li::before{border-color:var(--color-text-muted);}
.pass-card__topics-title{margin:var(--space-4) 0 var(--space-2); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted);}
.pass-card__topics{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.pass-card__topics li{padding:3px 10px; border-radius:var(--radius-pill); background:var(--color-accent-primary-soft); color:var(--color-accent-primary-strong); font-size:var(--text-xs); font-weight:var(--weight-medium);}
.pricing-note{margin:0 0 var(--space-6); font-size:var(--text-sm); color:var(--color-text-muted); text-align:center;}
.pricing__free{margin:var(--space-7) 0; padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface);}
.pricing__free h2{margin:0 0 var(--space-2);}
.check-list--inline{display:flex; flex-wrap:wrap; column-gap:var(--space-6);}
.pricing-page .faq,.pricing-page > section > h2,.pricing__legal{max-width:880px;}
@media (max-width:1180px){ .pass-grid{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:var(--space-6);} .pass-grid > .pass-card,.pass-grid > .pass-card--live{grid-column:auto;} .pass-card--live{margin-top:0;} .pass-card__summary{min-height:0;} }
@media (max-width:640px){ .pass-grid{grid-template-columns:minmax(0,1fr);} }
.pricing-page h2{font-size:1.25rem; margin:0 0 var(--space-3);}
.pricing-page > section > h2{margin-top:var(--space-7);}
.check-list{list-style:none; margin:var(--space-3) 0 0; padding:0;}
.check-list li{position:relative; padding:6px 0 6px 28px; line-height:1.55;}
.check-list li::before{content:""; position:absolute; left:2px; top:11px; width:14px; height:8px; border-left:2px solid var(--color-success); border-bottom:2px solid var(--color-success); transform:rotate(-45deg);}
.check-list--muted li::before{border-color:var(--color-text-muted);}
.faq__item summary{cursor:pointer; padding:var(--space-4) 52px var(--space-4) var(--space-5); position:relative; min-height:52px; font-family:var(--font-heading); font-weight:var(--weight-semibold); list-style:none;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{content:"+"; position:absolute; right:var(--space-5); top:50%; transform:translateY(-50%); font-size:1.25rem; color:var(--color-accent-primary);}
.faq__item[open] summary::after{content:"\2212";}
.faq__item > p{margin:0; padding:0 var(--space-5) var(--space-4); color:var(--color-text-secondary); line-height:1.65;}
.pricing__legal{margin-top:var(--space-6); font-size:var(--text-sm); color:var(--color-text-muted);}
.contact-list{list-style:none; padding:0; margin:var(--space-3) 0;}
.contact-list li{padding:4px 0;}

@media print{
  .site-header,.toc,.toc-mobile,.code-copy,.copy-btn,.diagram-tools,#progress,.site-footer,.related,.pager,.nav-toggle,.skip-link,.header-search,.header-account,.author-card,.deep-dives,.diagram__replay,.tag-row,.pagination{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;}
}

/* Landing: flagship Java course card */
.lp-course{padding-top:var(--space-8);}
.lpc{position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr); gap:var(--space-7); padding:clamp(28px,4vw,52px); border-radius:20px; background:#16122B; color:#fff; text-decoration:none; box-shadow:0 18px 48px rgba(22,18,43,.18); transition:transform var(--transition-fast), box-shadow var(--transition-fast);}
.lpc:hover{color:#fff; transform:translateY(-2px); box-shadow:0 24px 60px rgba(22,18,43,.26);}
.lpc:focus-visible{outline:3px solid var(--color-accent-primary); outline-offset:4px;}
.lpc::before{content:""; position:absolute; inset:0; z-index:-2; background-image:radial-gradient(rgba(255,255,255,.1) 1.1px, transparent 1.2px); background-size:24px 24px; -webkit-mask-image:linear-gradient(110deg,#000 20%,transparent 75%); mask-image:linear-gradient(110deg,#000 20%,transparent 75%);}
.lpc__glow{position:absolute; right:-18%; bottom:-60%; z-index:-1; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgba(242,102,43,.55), rgba(166,71,180,.3) 55%, transparent); filter:blur(10px); animation:lp-glow-b 10s ease-in-out infinite alternate;}
@keyframes lp-glow-b{from{opacity:.75; transform:scale(1);} to{opacity:1; transform:scale(1.08);}}
.lpc__main{display:flex; flex-direction:column; gap:var(--space-4); min-width:0;}
.lpc__kicker{align-self:flex-start; padding:5px 12px; border-radius:var(--radius-pill); background:rgba(242,102,43,.16); box-shadow:inset 0 0 0 1px rgba(242,102,43,.45); font-family:var(--font-heading); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:#FFB892;}
.lpc__title{font-family:var(--font-heading); font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem); font-weight:var(--weight-bold); line-height:1.05; letter-spacing:-.03em;}
.lpc__dek{font-size:1.0625rem; line-height:1.6; color:#D6D0F2; max-width:58ch;}
.lpc__stats{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); font-family:var(--font-heading); font-size:var(--text-sm); color:#B9B1E0;}
.lpc__stats strong{font-size:1.25rem; color:#fff; margin-right:4px;}
.lpc__vouch{display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); border-radius:var(--radius-lg); background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); font-size:var(--text-md); line-height:1.55; color:#CFC8F0;}
.lpc__vouch img{flex:none; width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--color-accent-secondary);}
.lpc__vouch strong{display:block; margin-bottom:4px; font-family:var(--font-heading); font-size:1.0625rem; color:#fff;}
.lpc__cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-4); margin-top:var(--space-2);}
.lpc__btn{display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:12px 22px; border-radius:var(--radius-pill); background:#fff; color:#16122B; font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:var(--text-md);}
.lpc:hover .lpc__btn{background:var(--color-accent-secondary); color:#fff;}
.lpc__price{font-family:var(--font-heading); font-size:var(--text-sm); color:#B9B1E0;}
.lpc__side{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); border-radius:var(--radius-lg); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); align-self:center;}
.lpc__side-label{font-family:var(--font-heading); font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:#B9B1E0;}
.lpc-mods{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.lpc-mod{display:flex; align-items:center; gap:10px; margin:0; padding:6px 8px; border-radius:6px; font-family:var(--font-heading); font-size:var(--text-sm); font-weight:var(--weight-medium); color:#E6E1FA;}
.lpc-mod span{font-family:var(--font-mono); font-size:var(--text-xs); color:#8F86BD;}
.lpc-mod--free::after{content:"Free"; margin-left:auto; padding:2px 7px; border-radius:var(--radius-pill); background:rgba(47,143,99,.25); color:#8FE0B5; font-size:10px; font-weight:var(--weight-bold); letter-spacing:.06em; text-transform:uppercase;}
@media (max-width:900px){ .lpc{grid-template-columns:minmax(0,1fr);} .lpc__side{display:none;} }
@media (prefers-reduced-motion:reduce){ .lpc__glow{animation:none;} .lpc,.lpc:hover{transform:none;} }

/* Theme switcher (header) */
.theme-menu{position:relative; flex:none; margin-left:var(--space-2);}
.theme-btn{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid var(--color-border); border-radius:var(--radius-md); background:none; color:var(--color-text-secondary);}
.theme-btn:hover,.theme-btn[aria-expanded="true"]{color:var(--color-accent-primary); border-color:var(--color-accent-primary);}
.theme-ico{display:none; width:18px; height:18px;}
:root:not([data-theme]) .theme-ico--light,[data-theme="light"] .theme-ico--light,[data-theme="dark"] .theme-ico--dark,[data-theme="sepia"] .theme-ico--sepia{display:block;}
.theme-list{display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:70; width:236px; margin:0; padding:6px; list-style:none; background:var(--color-surface-raised); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);}
.theme-btn[aria-expanded="true"] + .theme-list{display:block;}
.theme-list li{margin:0;}
.theme-list button{display:flex; align-items:center; gap:12px; width:100%; padding:9px 10px; border:0; border-radius:var(--radius-md); background:none; text-align:left; color:var(--color-text-secondary); font-family:var(--font-heading);}
.theme-list button:hover{background:var(--color-surface); color:var(--color-text-primary);}
.theme-list button[aria-checked="true"]{background:var(--color-accent-primary-soft); color:var(--color-accent-primary-strong);}
.theme-list strong{display:block; font-size:var(--text-sm); font-weight:var(--weight-semibold); line-height:1.3;}
.theme-list small{display:block; font-size:var(--text-xs); color:var(--color-text-muted); line-height:1.3;}
.theme-opt{flex:none; width:30px; height:30px; padding:6px; border-radius:var(--radius-md); border:1px solid var(--color-border);}
.theme-opt--light{background:#fff; color:#5B3CC4; border-color:#E3E4EB;}
.theme-opt--dark{background:#161922; color:#B7A8FF; border-color:#2A2E3D;}
.theme-opt--sepia{background:#F6EFE1; color:#9C3F17; border-color:#E0D3BA;}
@media (max-width:1240px){ .theme-menu{margin-left:0;} }
@media (max-width:420px){ .theme-btn{width:36px; height:36px;} }
[data-theme="dark"] .header-account:not(.is-signed-in){background:var(--color-accent-primary);}
[data-theme="dark"] .header-account:not(.is-signed-in):hover{background:#7A62E0;}

/* Dark theme: per-component tweaks where the light palette is hard-wired */
[data-theme="dark"] .track-card--java{--tc:#FF9A63; --tc-soft:#2A1B13;}
[data-theme="dark"] .track-card--backend{--tc:#6FD3A3; --tc-soft:#11261C;}
[data-theme="dark"] .track-card--system-design{--tc:#8FB0FF; --tc-soft:#152038;}
[data-theme="dark"] .track-card--distributed-systems{--tc:#B7A8FF; --tc-soft:#211C38;}
[data-theme="dark"] .track-card--ai{--tc:#5FD4C6; --tc-soft:#0F2624;}
[data-theme="dark"] .track-card--career{--tc:#F1CB8A; --tc-soft:#2A2012;}
[data-theme="dark"] .topic-item__num{color:#5E50A8;}
[data-theme="dark"] .qnum.g{background:var(--color-success-soft); color:var(--color-success-text);}
[data-theme="dark"] .qnum.b{background:var(--color-info-soft); color:var(--color-info-text);}
[data-theme="dark"] .qnum.a{background:var(--color-warning-soft); color:var(--color-warning-text);}
[data-theme="dark"] .qnum.r{background:var(--color-danger-soft); color:var(--color-danger-text);}
[data-theme="dark"] .qnum.p{background:var(--color-violet-soft); color:var(--color-violet-text);}

/* Header fits five controls on small phones */
.theme-menu + .header-search{margin-left:calc(var(--space-2) - var(--space-6));}
@media (max-width:1240px){ .theme-menu + .header-search{margin-left:0;} }
@media (max-width:400px){
  .site-header__inner{padding:0 14px; gap:6px;}
  .theme-btn,.header-search,.nav-toggle{width:36px; height:36px; min-height:36px;}
  .header-account{height:36px;}
}
@media (max-width:374px){ .brand__type{display:none;} .brand{margin-right:auto;} }
.brand__mark--dark{display:none !important;}
[data-theme="dark"] .brand__mark--light{display:none !important;}
[data-theme="dark"] .brand__mark--dark{display:block !important;}