/* ───────────────────────────────────────────────────────────────────────────
DevHub — shared design system
Link it from any visualizer:
Pick the track accent on : e.g.
Pages keep ONLY their page-specific styles inline (those override these).
─────────────────────────────────────────────────────────────────────────── */
/* ── design tokens ─────────────────────────────────────────────────────── */
:root{
/* surfaces — three deliberate tiers so the eye can parse containers at a
glance: page bg darkest → cards/panels one step lighter → code blocks a
third, near-black "terminal" tone (see pre{}). Don't flatten these. */
--bg:#0a0f1e; --panel:#161f38; --panel2:#111a2e; --border:#213150;
--text:#e2e8f0; --muted:#94a3b8;
/* semantic */
--good:#4ade80; --warn:#facc15; --bad:#f87171; --info:#22d3ee;
/* named palette used across pages */
--blue:#22d3ee; --green:#4ade80; --purple:#a78bfa; --amber:#f59e0b;
--red:#f87171; --orange:#fb923c; --ng:#fda4af; --sp:#a6e07f;
/* accent — default is purple; track classes below override per section */
--accent:#a78bfa; --accent2:#22d3ee;
}
/* ── light theme (opt-in via ) ──────────────────
Dark is still the default look everywhere (no attribute = unchanged).
Code/console-style panels (pre, .rt-headers, .cw-code/.cw-out/.cw-vis,
.rt-result, .cw-callout) deliberately STAY dark in both themes — that's
a normal "terminal" convention and keeps this override small & safe. */
:root[data-theme="light"]{
--bg:#f3f5fb; --panel:#ffffff; --panel2:#eef1f8; --border:#d7deec;
--text:#1b2536; --muted:#5b6b85;
--blue:#0284c7; --info:#0e7490;
}
/* ── per-track accents (one body class re-themes the whole page) ────────── */
body.track-angular { --accent:#dd0031; --accent2:#38bdf8; }
body.track-spring { --accent:#6db33f; --accent2:#a78bfa; }
body.track-ts { --accent:#3178c6; --accent2:#22d3ee; }
body.track-debug { --accent:#fb923c; --accent2:#f87171; }
body.track-identity { --accent:#22d3ee; --accent2:#a78bfa; }
body.track-data { --accent:#f59e0b; --accent2:#22d3ee; }
body.track-ping { --accent:#be1522; --accent2:#ff6070; }
body.track-java { --accent:#e76f00; --accent2:#f89820; } /* coffee orange */
body.track-config { --accent:#818cf8; --accent2:#c4b5fd; } /* settings indigo */
body.track-interview{ --accent:#fb7185; --accent2:#fbbf24; } /* target rose→gold */
body.track-tools { --accent:#2dd4bf; --accent2:#22d3ee; } /* tooling teal */
body.track-cloud { --accent:#ff9900; --accent2:#fbbf24; } /* AWS orange */
body.track-playground{ --accent:#10b981; --accent2:#22d3ee; } /* live emerald → cyan */
body.track-python { --accent:#3776ab; --accent2:#ffd43b; } /* Python blue → yellow */
body.track-react { --accent:#61dafb; --accent2:#0ea5e9; } /* React cyan → sky blue */
body.track-go { --accent:#00acd7; --accent2:#5dc9e2; } /* Go gopher blue */
body.track-kubernetes { --accent:#326ce5; --accent2:#54c3f1; } /* K8s blue */
body.track-sql { --accent:#cc6600; --accent2:#f59e0b; } /* SQL amber */
body.track-nodejs { --accent:#83cd29; --accent2:#3c873a; } /* Node green */
body.track-csharp { --accent:#9b6dde; --accent2:#9078e3; } /* .NET purple — accent2 lightened from the #512bd4 logo mark (1.95:1 as text on a dark panel) to the same hue at higher lightness */
body.track-php { --accent:#8892bf; --accent2:#777bb4; } /* PHP indigo */
body.track-ruby { --accent:#e0544a; --accent2:#cc342d; } /* Ruby red */
body.track-rust { --accent:#dea584; --accent2:#f74c00; } /* Rust rust */
body.track-stacks { --accent:#a78bfa; --accent2:#22d3ee; } /* full-stack violet */
body.track-mulesoft { --accent:#00a0df; --accent2:#5b9bd5; } /* Anypoint blue */
body.track-devops { --accent:#34d399; --accent2:#a78bfa; } /* CI green → IaC violet */
body.track-azure { --accent:#0078d4; --accent2:#50e6ff; } /* Azure blue → light cyan */
body.track-gcp { --accent:#4285f4; --accent2:#34a853; } /* Google blue → green */
body.track-ai-dev { --accent:#d97757; --accent2:#8b5cf6; } /* Anthropic clay → violet */
body.track-data-science { --accent:#4d77cf; --accent2:#ff6f00; } /* pandas blue → data-viz orange */
body.track-web-fundamentals { --accent:#e34c26; --accent2:#f06529; } /* HTML5 orange → red-orange */
body.track-ai-engineering { --accent:#10a37f; --accent2:#ab68ff; } /* GPT green → Claude/LLM violet */
/* ── difficulty-themed page background (the hub sets on load) ──
ambient glow keyed to the page's level: beginner→green … expert→rose */
body[data-level]::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(ellipse 80% 55% at 50% -10%, var(--lvl-tint,transparent) 0%, transparent 62%); }
body[data-level="beginner"] { --lvl-tint:rgba(74,222,128,.14); } /* green */
body[data-level="intermediate"]{ --lvl-tint:rgba(34,211,238,.14); } /* cyan */
body[data-level="advanced"] { --lvl-tint:rgba(167,139,250,.16); } /* violet */
body[data-level="expert"] { --lvl-tint:rgba(251,113,133,.17); } /* rose */
/* ── base ──────────────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
/* Global text-size lever — one knob to bump every px font-size on every page
at once (raise/lower this single value instead of editing per-page CSS). */
html{ zoom:1.12; }
body{
margin:0;
background:var(--bg);
background-image:radial-gradient(ellipse at 20% 0%,rgba(10,28,60,.6) 0%,transparent 55%),
radial-gradient(ellipse at 80% 100%,rgba(4,12,28,.5) 0%,transparent 45%);
color:var(--text); line-height:1.6;
font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.page,.container{ max-width:clamp(40rem,94vw,90rem); margin:0 auto; padding:1.75rem 1.5rem 3.5rem; }
a.back{ color:var(--blue); text-decoration:none; font-size:14px; }
a.back:hover{ text-decoration:underline; }
/* ── typography ────────────────────────────────────────────────────────── */
/* Editorial title: big, confident, near-white with only a hint of the track
accent at the tail. The old full-rainbow gradient made the title compete
with everything else on the page; reserving color is what makes the accent
mean something when it does appear (labels, kickers, marks). */
h1{
margin:10px 0 10px; font-size:34px; font-weight:900;
background:linear-gradient(115deg,#f8fafc 0%,#e4ebf5 55%,var(--accent2) 160%);
-webkit-background-clip:text; background-clip:text; color:transparent;
letter-spacing:-.035em; line-height:1.15;
}
/* Vertical rhythm: markedly more space ABOVE a section header than below it,
so headers visually attach to the content they introduce and the page
chunks into scannable sections instead of a continuous column. Headings are
clean bold near-white — no colored bars/borders; the accent lives in the
small uppercase kicker labels (h3 / .hf-kicker) instead. */
h2{
color:#e9eef7; font-size:20px; font-weight:800;
margin:46px 0 12px; letter-spacing:-.015em; line-height:1.3;
}
h2:first-child{ margin-top:6px; }
h3{
color:#445a76; font-size:13px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; margin:14px 0 8px;
}
.subtitle, p.sub, .sub{ color:var(--muted); font-size:13px; line-height:1.6; margin:0 0 22px; }
.note{ color:var(--muted); font-size:12.5px; line-height:1.65; margin:10px 0 0; max-width:78ch; }
.note.top{ margin:0 0 12px; }
/* ── code & syntax highlighting ────────────────────────────────────────── */
pre{
background:#040810; border:1px solid var(--border); border-radius:12px;
padding:13px 16px; margin:10px 0 0; overflow-x:auto;
font-family:'Cascadia Code',ui-monospace,Consolas,monospace; font-size:12.5px; line-height:1.7; color:#cbd5e1;
}
/* Editor-window chrome on real code blocks (anything the highlighter touched
or that's hand-annotated): a slim title bar with traffic-light dots, like
an IDE. Purely decorative — dynamic inspector panes and plain-text pres
never match these selectors, so they stay chromeless. Add data-file="x.java"
to show a filename in the bar. */
pre[data-hl-done], pre:has(.kw), pre[data-file]{ position:relative; padding-top:38px; }
pre[data-hl-done]::before, pre:has(.kw)::before, pre[data-file]::before{
content:''; position:absolute; top:0; left:0; right:0; height:27px;
background:rgba(255,255,255,.035); border-bottom:1px solid rgba(255,255,255,.06);
border-radius:12px 12px 0 0;
}
pre[data-hl-done]::after, pre:has(.kw)::after, pre[data-file]::after{
content:'\25CF\2002\25CF\2002\25CF' '\2003\2003' attr(data-file);
position:absolute; top:7px; left:13px; font-size:8.5px; letter-spacing:.5px;
color:#39496a; font-family:ui-monospace,monospace;
}
pre[data-file]::after{ font-size:10px; color:#5b6b85; }
/* Inline code stays quiet: colored mono text with a whisper of tint, no
border. The old bordered "pill" made prose exhausting — the eye tripped on
a chip every few words. Reserve full styling for real
blocks. */
code{
background:rgba(125,211,252,.07); border:none; border-radius:4px;
padding:1px 4px; font-family:ui-monospace,monospace; font-size:12px; color:#7dd3fc;
}
pre .kw{ color:#c084fc; } pre .str{ color:#fbbf24; }
/* Comments are the widest-reaching offender in the audit (every
on the
site, not just CodeWalk): #64748b measured 4.23:1 on pre's #040810 ground.
Same hue, stepped up to clear AA (4.89:1). */
pre .cm{ color:#6c7f97; font-style:italic; } pre .fn{ color:#22d3ee; }
pre .dec{ color:#f472b6; } pre .tag{ color:#4ade80; }
pre .attr{ color:#facc15; } pre .num{ color:#fb923c; } pre .type{ color:#5eead4; }
pre .hl{ background:rgba(221,0,49,.15); display:inline-block; padding:0 4px; border-radius:3px; }
pre .hlgood{ background:rgba(74,222,128,.15); display:inline-block; padding:0 4px; border-radius:3px; }
/* ── generic table ─────────────────────────────────────────────────────── */
table{ width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
th{
background:var(--panel2); color:var(--muted); font-size:10px; text-transform:uppercase;
letter-spacing:.07em; padding:8px 10px; text-align:left; border-bottom:1px solid var(--border);
}
td{ padding:8px 10px; border-bottom:1px solid rgba(148,163,184,.1); vertical-align:top; }
tr:last-child td{ border-bottom:none; }
/* ── callout ───────────────────────────────────────────────────────────── */
.callout{
background:rgba(250,204,21,.08); border:1px solid rgba(250,204,21,.35); border-radius:8px;
padding:10px 14px; margin:12px 0 0; font-size:13px; line-height:1.65; color:#fde68a;
max-width:88ch; /* edge-to-edge paragraphs are past comfortable reading length */
}
.callout code{ color:var(--warn); }
/* ── intro primer ("what is this / why it matters") ─────────────────────────
Scannable replacement for the old wall-of-text intro paragraph. Accent-aware
(uses --accent/--accent2), so one markup works on every track.
Structure: .intro > .intro-head, .intro-tldr, .intro-gist, .intro-cards, .intro-ciam */
.intro{ background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
border:1px solid var(--border);
border-radius:16px; padding:22px 26px; margin:0 0 26px;
box-shadow:0 10px 28px rgba(0,0,0,.28); /* lift the card off the page tier */ }
.intro-head{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800;
color:var(--accent2); margin:0 0 12px; letter-spacing:-.01em; }
.intro-head .ico{ font-size:18px; line-height:1; }
.intro-kicker{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
color:var(--accent); margin:0 0 4px; }
.intro-lead,.intro-tldr{ font-size:14px; color:#dbe6f3; line-height:1.62; margin:0 0 13px; max-width:72ch; }
.intro-lead b,.intro-tldr b{ color:#fff; }
.intro-lead code,.intro-tldr code{ font-size:12px; }
.intro-lead + .intro-lead{ margin-top:-4px; }
.intro-gist{ list-style:none; margin:0 0 15px; padding:0; display:grid; gap:7px; max-width:78ch; }
.intro-gist li{ position:relative; padding-left:21px; font-size:13px; color:#cbd5e1; line-height:1.6; }
.intro-gist li b{ color:#eef4fb; }
.intro-gist li::before{ content:"\25B8"; position:absolute; left:3px; top:2px; color:var(--accent2); font-size:11px; }
.intro-gist code{ font-size:11.5px; }
.intro-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin:0 0 12px; }
/* A card holding a real code block goes full-width: code crammed into a
narrow column forces awkward wrapping and unreadably tiny lines. */
.intro-mini:has(pre){ grid-column:1 / -1; }
.intro-mini{ background:var(--panel2); border:1px solid var(--border); border-radius:14px; padding:11px 13px; }
.intro-mini h4{ margin:0 0 6px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--accent2); }
.intro-mini ul,.intro-mini ol{ margin:0; padding-left:15px; font-size:12px; color:var(--muted); line-height:1.8; }
.intro-mini li b{ color:#cdd8e6; }
.intro-mini p{ margin:0; font-size:12px; color:var(--muted); line-height:1.68; }
.intro-mini code{ font-size:11px; }
.intro-ciam{ background:var(--panel2); border-radius:12px; border-left:3px solid var(--amber);
padding:9px 13px; font-size:12.5px; color:#cbd5e1; line-height:1.6; max-width:92ch; }
.intro-ciam .tag{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--amber); margin-right:6px; }
.intro-ciam code{ font-size:11px; }
/* ── layout: deep-dive cards & grids (pages may override) ──────────────── */
section{ margin-bottom:2.375rem; }
.grid{ display:grid; gap:.875rem; margin-bottom:2.125rem; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(27.5rem,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
/* book-style two/three-column layouts for page content */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; align-items:start; }
.three-col{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.25rem; align-items:start; }
.two-col-wide{ display:grid; grid-template-columns:1.4fr 1fr; gap:1.75rem; align-items:start; }
/* code + explanation pairs that go side-by-side on wide screens */
.code-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
/* explanation / description text on left, code block on right */
.explain-pair{ display:grid; grid-template-columns:1fr 1.6fr; gap:1.5rem; align-items:start; }
@media(max-width:51.25rem){ .two-col,.three-col,.two-col-wide,.code-pair,.explain-pair{ grid-template-columns:1fr; } }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:18px 20px; }
.card-accent{ border-left:3px solid var(--accent); }
.card-blue{ border-left:3px solid var(--blue); }
.card-green{ border-left:3px solid var(--green); }
.card-purple{ border-left:3px solid var(--purple); }
.card-amber{ border-left:3px solid var(--amber); }
.card-red{ border-left:3px solid var(--red); }
/* ── interactive controls (steppers / segmented toggles / run buttons) ──── */
.ctlbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.ctlbar .lbl{ font-size:11.5px; color:var(--muted); font-weight:700; }
.runbtn{ padding:9px 16px; border-radius:9px; border:1px solid var(--accent); background:var(--panel2); color:var(--accent2); font-size:12.5px; font-weight:800; cursor:pointer; }
.runbtn:hover:not(:disabled){ background:var(--accent); color:#fff; }
.runbtn:disabled{ opacity:.45; cursor:default; }
.seg{ display:flex; gap:6px; flex-wrap:wrap; }
.seg button{ padding:7px 11px; border-radius:12px; border:1px solid var(--border); background:var(--panel2); color:var(--muted); font-size:11.5px; font-weight:700; cursor:pointer; }
.seg button.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.seg button:disabled{ opacity:.5; cursor:default; }
/* ── in-hub cross-link (pairs with the page's dlh-navigate click script) ─── */
.dd-link{ color:#38bdf8; text-decoration:none; white-space:nowrap; border-bottom:1px dashed rgba(56,189,248,.5); transition:color .15s,border-color .15s; }
.dd-link:hover{ color:#7dd3fc; border-bottom-color:#7dd3fc; }
/* ── EXTREME-VIZ HERO KIT (the shared rt-* animated-walk + live-inspector) ──
Pages built before 2026-06-10 ship an identical copy inline (which wins via
the cascade); newer pages rely on this one. Colors follow the track accent,
so a hero re-themes itself per with zero page CSS. */
.rt-ctlbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 12px; }
.rt-ctlbar .lbl{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.userseg{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.userseg button{ background:var(--panel2); border:1px solid var(--border); color:var(--muted); font-size:12px; padding:6px 12px; border-radius:999px; cursor:pointer; font-weight:600; }
.userseg button.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
.userseg button:disabled{ opacity:.5; cursor:default; }
/* ── a phone gets ONE column ────────────────────────────────────────────────
35 pages give their table of contents `columns: 3`, dropping to 2 under
800px. Nobody carried that down to a phone, so at 390px each column is about
107px and an entry like "Modern: ViewContainerRef.createComponent()" is
clipped by 138px — the link text simply ends mid-word.
`body .toc` rather than `.toc`: the page's own rule lives in a