/* The Desi Architect · System Design Notes
   Generated into public/system-design-notes/assets/notes.css by notes/_build/build-notes.mjs.
   Tokens follow src/styles.css (dark theme). Edit here, never in public/. */

:root {
  --base: #0f0f0f;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --surface-3: #222226;
  --border: #2a2a2a;
  --border-soft: #1f1f22;
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --blue: #60a5fa;
  --blue-soft: #93c5fd;
  --blue-deep: #3b82f6;
  --violet: #a78bfa;
  --violet-soft: #c4b5fd;
  --amber: #f59e0b;
  --green: #10b981;
  --red: #ef4444;
  --pre-bg: #111827;
  --radius: 12px;
  --content: 780px;
  --rail: 276px;
  --site-nav-h: 56px;
  --tabs-h: 46px;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--base);
  color: var(--text-2);
  font: 400 1.0625rem/1.75 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: rgba(96, 165, 250, .3); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 22px 16px 28px; display: flex; flex-direction: column;
}
.wordmark { font: 700 1.05rem/1.2 var(--font-display); color: var(--text); letter-spacing: .02em; }
.wordmark span { color: var(--blue); }
.wordmark:hover { text-decoration: none; }
.rail-sub { font-size: .85rem; color: var(--text-3); margin: 4px 0 20px; }
.rail-track { margin-bottom: 16px; }
.rail-track-title {
  display: flex; gap: 8px; align-items: baseline;
  font: 600 .875rem/1.3 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 0 6px 6px;
}
.rail-track-title b { color: var(--violet); font-weight: 700; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li a {
  display: block; padding: 5px 10px; border-radius: 8px;
  color: var(--text-2); font-size: .88rem; line-height: 1.45;
}
.rail li a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.rail li a.active { background: rgba(96, 165, 250, .12); color: var(--blue-soft); font-weight: 600; }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-3); }

.main { min-width: 0; }
.topbar {
  position: sticky; top: calc(var(--site-nav-h) + var(--tabs-h)); z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 10px 28px; background: rgba(15, 15, 15, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft); font-size: .875rem; color: var(--text-3);
}
.topbar .crumbs { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumbs a { color: var(--text-3); }
.topbar .crumbs a:hover { color: var(--text); }
.icon-btn {
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px; font: 500 .82rem var(--font-sans); cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--blue-deep); }
.menu-btn { display: none; }

.page { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; padding: 40px 28px 80px; max-width: 1120px; margin: 0 auto; }
.page > main { min-width: 0; }
.page.no-toc, .page:not(:has(.toc)) { grid-template-columns: minmax(0, 1fr); max-width: 860px; justify-content: center; }
.toc { position: sticky; top: calc(122px + var(--site-nav-h)); align-self: start; font-size: .875rem; max-height: calc(100vh - 146px - var(--site-nav-h)); overflow-y: auto; }
.toc-title { font: 600 .875rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc a { display: block; padding: 3px 0 3px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-3); line-height: 1.4; }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.on { color: var(--blue-soft); border-left-color: var(--blue); }

/* ---------- Page header ---------- */
.page-head { margin-bottom: 36px; }
.eyebrow { font: 600 .8rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.page-head h1 { font: 700 clamp(1.9rem, 4vw, 2.6rem)/1.15 var(--font-display); color: var(--text); margin: 10px 0 14px; letter-spacing: -.01em; }
.lead { font-size: 1.15rem; color: var(--text-2); margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 .8rem var(--font-mono); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-3); background: var(--surface); }
.chip.kind { color: var(--blue-soft); border-color: rgba(96, 165, 250, .35); }
.bar { height: 3px; width: 72px; border-radius: 3px; margin-top: 22px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6); }

/* ---------- Prose ---------- */
.prose { min-width: 0; max-width: 100%; }
.prose h2 {
  font: 700 1.55rem/1.25 var(--font-display); color: var(--text);
  margin: 56px 0 18px; padding-top: 4px; letter-spacing: -.005em;
}
.prose h2 .num { display: block; font: 600 .78rem var(--font-mono); color: var(--violet); letter-spacing: .06em; margin-bottom: 6px; }
.prose h2::after { content: ''; display: block; height: 2px; width: 48px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); }
.prose h3 { font: 600 1.18rem/1.35 var(--font-display); color: var(--text); margin: 34px 0 10px; }
.prose h4 { font: 600 1rem/1.4 var(--font-display); color: var(--text); margin: 24px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose strong { color: var(--blue-soft); font-weight: 600; }
.prose em { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 18px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--blue-deep); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.prose blockquote { margin: 20px 0; padding: 12px 18px; border-left: 3px solid var(--blue-deep); background: rgba(59, 130, 246, .06); border-radius: 0 8px 8px 0; color: var(--text); }
.prose blockquote p:last-child { margin: 0; }

.prose code { font: 500 .86em var(--font-mono); color: var(--violet-soft); background: rgba(139, 92, 246, .1); border: 1px solid rgba(139, 92, 246, .18); padding: 1px 6px; border-radius: 5px; }
.codeblock { position: relative; margin: 18px 0 22px; }
.codeblock pre { margin: 0; background: var(--pre-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; font: 400 .85rem/1.65 var(--font-mono); color: #e2e8f0; }
.codeblock pre code { all: unset; font: inherit; white-space: pre; }
.codeblock .lang { position: absolute; top: 8px; right: 64px; font: 500 .8rem var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.copy-btn { position: absolute; top: 6px; right: 8px; font: 500 .8rem var(--font-sans); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-3); cursor: pointer; }
.copy-btn:hover { color: var(--text); }

/* Prism tokens, tuned to the site palette */
.token.comment, .token.prolog { color: #94a3b8; font-style: italic; }
.token.keyword, .token.important, .token.atrule { color: #c4b5fd; }
.token.string, .token.attr-value, .token.char { color: #86efac; }
.token.number, .token.boolean, .token.constant { color: #fcd34d; }
.token.function, .token.class-name { color: #93c5fd; }
.token.operator, .token.punctuation { color: #94a3b8; }
.token.property, .token.variable, .token.parameter { color: #f9a8d4; }
.token.builtin, .token.tag { color: #67e8f9; }

/* Tables */
.table-scroll { overflow-x: auto; margin: 18px 0 24px; border: 1px solid var(--border); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose th { text-align: left; font: 600 .8rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-soft); background: var(--surface); padding: 12px 14px; border-bottom: 1px solid var(--border); }
.prose td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: rgba(255, 255, 255, .015); }
.estimate td:nth-child(2) { font: 600 .9rem var(--font-mono); color: var(--text); white-space: nowrap; }
.estimate td:nth-child(3) { color: var(--text-3); font-size: .88rem; }

/* ---------- Blocks ---------- */
.callout { margin: 24px 0; padding: 16px 20px; border-radius: 10px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 7%, transparent); }
.callout-label { font: 700 .8rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin-bottom: 6px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout.war-room { --c: var(--amber); }
.callout.tradeoff { --c: var(--green); }
.callout.interview { --c: var(--blue); }
.callout.trap { --c: var(--red); }
.callout.note { --c: var(--violet); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 20px 0 26px; }
.card { background: var(--surface); border: 1px solid var(--border-soft); border-top: 3px solid var(--c, var(--blue)); border-radius: 10px; padding: 16px 18px 6px; }
.card:nth-child(2) { --c: var(--violet); }
.card:nth-child(3) { --c: var(--green); }
.card:nth-child(4) { --c: var(--amber); }
.card h4 { margin: 0 0 8px; font: 600 .82rem var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.card ul { padding-left: 1.1em; }
.card li { margin: 7px 0; font-size: .96rem; }

details.reveal { margin: 10px 0; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; }
details.reveal summary { cursor: pointer; padding: 12px 16px; color: var(--text); font-weight: 500; list-style: none; display: flex; gap: 10px; }
details.reveal summary::-webkit-details-marker { display: none; }
details.reveal summary::before { content: '+'; font: 700 1rem var(--font-mono); color: var(--violet); width: 14px; flex: none; }
details.reveal[open] summary::before { content: '\2212'; }
details.reveal > div { padding: 0 18px 8px 40px; }
.crossq-head { font: 600 .8rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 22px 0 8px; }

.predict { margin: 24px 0; padding: 16px 20px; border: 1px dashed rgba(167, 139, 250, .45); border-radius: 10px; }
.predict-q { color: var(--text); font-weight: 500; margin-bottom: 8px; }
.predict details summary { cursor: pointer; color: var(--violet-soft); font-size: .9rem; }
.predict details > div { margin-top: 10px; }

/* ---------- Diagrams ---------- */
figure.diagram { margin: 26px 0 30px; }
.diagram-frame {
  position: relative;
  background: #121620;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  overflow-x: auto;
  cursor: zoom-in;
  -webkit-overflow-scrolling: touch;
}
.diagram-frame::before {
  content: 'Tap to enlarge';
  position: sticky;
  top: 4px;
  float: right;
  z-index: 5;
  margin-bottom: -28px;
  font: 500 0.76rem var(--font-sans);
  color: var(--text-3);
  background: rgba(18, 22, 32, 0.92);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.diagram-frame:hover::before {
  color: var(--blue-soft);
  border-color: rgba(96, 165, 250, 0.4);
}
.diagram-frame svg { display: block; width: 100%; height: auto; min-width: 640px; }
.diagram-frame img { display: block; max-width: 100%; margin: 0 auto; }
figure.diagram figcaption { font-size: .86rem; color: var(--text-3); margin-top: 10px; }
figure.diagram figcaption b { color: var(--text-2); font-weight: 600; }

/* Diagram vocabulary: authors use classes, never hex. */
.diagram-frame svg text, dialog.zoom svg text { fill: #cbd5e1; font-family: var(--font-sans); }
.d-bg { fill: #121620; }
.d-box { fill: #1b2230; stroke: #475569; stroke-width: 1.5; }
.d-box.blue { fill: rgba(59, 130, 246, .14); stroke: #60a5fa; }
.d-box.violet { fill: rgba(139, 92, 246, .14); stroke: #a78bfa; }
.d-box.green { fill: rgba(16, 185, 129, .13); stroke: #34d399; }
.d-box.amber { fill: rgba(245, 158, 11, .13); stroke: #fbbf24; }
.d-box.red { fill: rgba(239, 68, 68, .13); stroke: #f87171; }
.d-box.ghost { fill: none; stroke: #334155; stroke-dasharray: 6 5; }
.d-line { stroke: #64748b; stroke-width: 1.8; fill: none; }
.d-line.blue { stroke: #60a5fa; } .d-line.green { stroke: #34d399; } .d-line.red { stroke: #f87171; }
.d-line.amber { stroke: #fbbf24; } .d-line.violet { stroke: #a78bfa; }
.d-line.ghost { stroke: #475569; }
.d-line.dash { stroke-dasharray: 6 5; }
.d-cut { stroke: #f87171; stroke-width: 3; }
.d-head { fill: #64748b; } .d-head.blue { fill: #60a5fa; } .d-head.green { fill: #34d399; } .d-head.red { fill: #f87171; } .d-head.amber { fill: #fbbf24; } .d-head.violet { fill: #a78bfa; }
.d-title { fill: #f1f5f9; font: 600 16px var(--font-display); }
.d-text { fill: #cbd5e1; font: 400 14px var(--font-sans); }
.d-bold { fill: #f1f5f9; font: 600 14px var(--font-sans); font-weight: 600; }
.d-small { fill: #94a3b8; font: 400 13px var(--font-sans); }
.d-mono { fill: #c4b5fd; font: 500 12.5px var(--font-mono); }
.d-label-blue { fill: #93c5fd; } .d-label-green { fill: #6ee7b7; } .d-label-red { fill: #fca5a5; } .d-label-amber { fill: #fcd34d; } .d-label-violet { fill: #c4b5fd; }
.d-dot { fill: #60a5fa; }
@media (prefers-reduced-motion: no-preference) {
  .d-flow { stroke-dasharray: 6 6; animation: d-flow 1.2s linear infinite; }
  @keyframes d-flow { to { stroke-dashoffset: -12; } }
}

/* Compare mode (preview only) */
.compare-bar { position: sticky; top: 49px; z-index: 15; display: flex; gap: 8px; align-items: center; padding: 8px 28px; background: #1c1917; border-bottom: 1px solid #44403c; font-size: .82rem; color: #fcd34d; }
.compare { display: grid; grid-template-columns: 1fr; gap: 14px; }
.compare > div > .tag { font: 700 .8rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; color: var(--text-3); }
.compare > div.ours > .tag { color: var(--blue-soft); }
.compare iframe { display: block; width: 100%; height: auto; border: 1px solid #44403c; border-radius: var(--radius); background: #0f1115; }
.compare .flag { margin-top: 6px; font-size: .78rem; color: #fca5a5; }
.compare .diagram-frame svg { min-width: 0; }
.compare .diagram-frame::before { display: none; }
body.only-ours .compare .orig { display: none; }
body.only-orig .compare .ours { display: none; }

/* ---------- Demos ---------- */
.demo { margin: 28px 0 32px; background: linear-gradient(180deg, #151a24, #12151c); border: 1px solid #263044; border-radius: 14px; padding: 18px 20px 20px; }
.demo-label { font: 700 .8rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.demo h3 { margin: 6px 0 4px !important; }
.demo-hint { font-size: .9rem; color: var(--text-3); margin: 0 0 14px; }
.demo-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.btn { font: 600 .82rem var(--font-sans); padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--blue); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: #2563eb; border-color: #2563eb; }
.btn.primary:hover:not(:disabled) { background: #1d4ed8; }
.btn.danger { border-color: rgba(239, 68, 68, .5); color: #fca5a5; }
.demo-log { font: 400 .8rem/1.6 var(--font-mono); background: var(--pre-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; height: 150px; overflow-y: auto; color: var(--text-2); }
.demo-log .ok { color: #6ee7b7; } .demo-log .bad { color: #fca5a5; } .demo-log .warn { color: #fcd34d; } .demo-log .dim { color: var(--text-3); }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.stat { flex: 1 1 120px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 12px; }
.stat span { display: block; font-size: .8rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.stat b { font: 600 1.1rem var(--font-mono); color: var(--text); }

/* Stepper */
.stepper-status { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 16px; min-height: 120px; }
.stepper-status strong { color: var(--text); }
.stepper-status p { margin: 6px 0 10px; font-size: .95rem; }
.stepper-count { font: 500 .78rem var(--font-mono); color: var(--text-3); margin-right: auto; }
details.transcript { margin-top: 10px; font-size: .88rem; }
details.transcript summary { cursor: pointer; color: var(--text-3); }

/* ---------- Index pages ---------- */
.track-grid { display: grid; gap: 14px; margin: 24px 0; }
.track-card { display: block; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px 20px; color: var(--text-2); transition: border-color .15s; }
.track-card:hover { border-color: var(--blue-deep); text-decoration: none; }
.track-card .eyebrow { font-size: .8rem; }
.track-card h3 { font: 600 1.15rem var(--font-display); color: var(--text); margin: 6px 0 6px; }
.track-card p { margin: 0; font-size: .95rem; }
.track-card .meta { margin-top: 10px; font: 500 .74rem var(--font-mono); color: var(--text-3); }

.page-nav { display: flex; gap: 14px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
.page-nav a { flex: 1; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-weight: 500; }
.page-nav a:hover { border-color: var(--blue-deep); text-decoration: none; }
.page-nav a.next { text-align: right; }
.page-nav small { display: block; font-size: .8rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }

/* Enlarge dialog */
dialog.zoom { width: min(96vw, 1400px); max-height: 92vh; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: #121620; color: var(--text-2); }
dialog.zoom::backdrop { background: rgba(0, 0, 0, .75); }
dialog.zoom .zoom-body { padding: 20px; overflow: auto; max-height: calc(92vh - 50px); }
dialog.zoom .zoom-body svg { width: 100%; height: auto; min-width: 900px; }
dialog.zoom .zoom-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: .85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .page { grid-template-columns: minmax(0, 1fr); justify-content: center; gap: 0; }
  .toc { display: none; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: fixed; z-index: 40; left: 0; top: 0; width: 290px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
  body.rail-open .rail { transform: none; }
  body.rail-open::after { content: ''; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55); }
  .menu-btn { display: inline-block; }
  .topbar { padding: 10px 16px; }
  .page { padding: 28px 16px 64px; }
  .compare { grid-template-columns: 1fr; }
  .compare-bar { padding: 8px 16px; }
  .page-nav { flex-direction: column; }
}
@media print {
  .rail, .topbar, .site-topbar, .section-tabs, .toc, .page-nav, .copy-btn, .demo-controls, .compare-bar, .paid-content-gate { display: none !important; }
  .shell, .page { display: block; }
  body { background: #fff; color: #111; }
  .prose strong, .prose h2, .prose h3, .page-head h1 { color: #111; }
}

/* ---------- Paywall Gate & Card ---------- */
.paid-content-gate {
  margin: 36px 0 60px;
  min-width: 0;
  max-width: 100%;
}
.paywall-card {
  background: linear-gradient(180deg, #151921 0%, #0d1117 100%);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  max-width: 680px;
}
.paywall-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue-soft);
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.35);
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.paywall-card h2 {
  font: 700 1.45rem/1.3 var(--font-display);
  color: var(--text);
  margin: 0 0 10px;
}
.paywall-lead {
  font-size: 0.98rem;
  color: var(--text-2);
  margin: 0 0 20px;
  line-height: 1.6;
}
.paywall-points {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paywall-points li {
  font-size: 0.92rem;
  color: var(--text-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.paywall-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.paywall-cta-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.paywall-price-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.paywall-price {
  font: 700 1.75rem/1 var(--font-display);
  color: var(--text);
}
.paywall-duration {
  font-size: 0.82rem;
  color: var(--text-3);
}
.paywall-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.paywall-btn {
  background: #2563eb;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
  transition: background .15s ease;
}
.paywall-btn:hover {
  background: #1d4ed8;
  text-decoration: none;
}
.paywall-login-link {
  font-size: 0.82rem;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Content Skeleton Loader ---------- */
.lab-skeleton {
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  max-width: 760px;
  margin: 20px 0 40px;
}
.lab-skeleton-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.lab-skeleton-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(96, 165, 250, 0.2);
  border-top-color: var(--blue-soft);
  border-radius: 50%;
  animation: lab-spin 0.8s linear infinite;
  flex: none;
}
@keyframes lab-spin {
  to { transform: rotate(360deg); }
}
.lab-skeleton-title {
  font: 600 0.95rem var(--font-display);
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.lab-skeleton-bar {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, rgba(255, 255, 255, 0.06) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: lab-shimmer 1.8s infinite ease-in-out;
  margin-bottom: 12px;
}
.lab-skeleton-bar.w-75 { width: 75%; }
.lab-skeleton-bar.w-90 { width: 90%; }
.lab-skeleton-bar.w-60 { width: 60%; }
.lab-skeleton-bar.w-40 { width: 40%; }
.lab-skeleton-bar.h-32 { height: 32px; border-radius: 8px; margin: 20px 0 14px; }
.lab-skeleton-bar.code-box {
  height: 140px;
  border-radius: 8px;
  margin: 18px 0 8px;
  background: linear-gradient(90deg, #121620 25%, #1b2230 50%, #121620 75%);
  background-size: 200% 100%;
}
@keyframes lab-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Shared Lab Components ---------- */

/* Lab Header Download Action */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blue-deep);
  color: #ffffff !important;
  font: 600 0.8rem var(--font-sans);
  text-decoration: none;
  border: 1px solid rgba(96, 165, 250, 0.4);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-download:hover {
  background: #1d4ed8;
  color: #ffffff !important;
  text-decoration: none;
}
.btn-download:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Learn Box */
.learn-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0 32px;
}
.learn-title {
  font: 700 0.92rem/1.3 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin: 0 0 12px;
}
.learn-box ul {
  margin: 0 0 14px;
  padding-left: 1.2em;
}
.learn-box li {
  margin: 6px 0;
  font-size: 0.95rem;
  color: var(--text-2);
}
.learn-meta {
  font-size: 0.88rem;
  color: var(--text-3);
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
  margin-top: 10px;
}

/* Accessible OS Switcher (aria-pressed toggle group) */
.os-switcher {
  margin: 20px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.os-prompt {
  font: 500 0.82rem var(--font-sans);
  color: var(--text-3);
}
.os-btn-group {
  display: inline-flex;
  gap: 8px;
}
.os-btn {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.15s ease;
}
.os-btn:hover {
  color: var(--text);
  border-color: var(--blue-soft);
}
.os-btn[aria-pressed="true"] {
  background: var(--blue-deep);
  color: #ffffff;
  border-color: var(--blue);
  font-weight: 600;
}
.os-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.os-block {
  margin: 12px 0;
}

/* Collapsibles */
details.code-explainer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 18px 0;
}
details.code-explainer summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--blue-soft);
  font-size: 0.98rem;
  font-family: var(--font-display);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.code-explainer summary::-webkit-details-marker { display: none; }
details.code-explainer summary::before {
  content: '▶';
  font-size: 0.72rem;
  color: var(--violet);
  transition: transform 0.15s ease;
}
details.code-explainer[open] summary::before {
  transform: rotate(90deg);
}
details.code-explainer summary:hover {
  color: var(--text);
}
details.code-explainer summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.explainer-content {
  margin-top: 14px;
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-2);
}
.explainer-content h4 {
  color: var(--text);
  margin: 16px 0 6px;
  font-size: 0.98rem;
}

/* Callout Architecture / Production Caveat */
.callout-architect,
.callout-note {
  background: rgba(167, 139, 250, 0.08);
  border-left: 3px solid var(--violet);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 20px 0;
}
.callout-architect h4,
.callout-note h4 {
  color: var(--violet-soft);
  margin: 0 0 6px;
  font-size: 0.95rem;
}

/* Sidebar Tier Headings (WCAG AA compliant contrast) */
.rail-tier-heading {
  font: 600 0.82rem/1.4 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 10px 4px;
  margin-top: 6px;
  list-style: none;
}

/* Sidebar Planned / Coming Soon Items */
.rail-soon {
  margin: 1px 0;
  list-style: none;
}
.rail-soon-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--text-3);
  font-size: 0.86rem;
  line-height: 1.45;
  cursor: default;
  user-select: none;
}
.badge-soon {
  font: 700 0.65rem var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.badge-new {
  font: 700 0.65rem var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.25);
  vertical-align: middle;
}
html[data-theme="light"] .badge-new,
html.light .badge-new {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.15);
}
.badge-new-track {
  font: 700 0.65rem var(--font-mono);
  padding: 1px 7px;
  border-radius: 9999px;
  background: rgba(14, 165, 233, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 0 6px rgba(14, 165, 233, 0.25);
  vertical-align: middle;
}
html[data-theme="light"] .badge-new-track,
html.light .badge-new-track {
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 1px 2px rgba(14, 165, 233, 0.15);
}
.card-new-badge {
  font: 700 0.68rem var(--font-mono);
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.28);
}
html[data-theme="light"] .card-new-badge,
html.light .card-new-badge {
  background: rgba(16, 185, 129, 0.14);
  color: #065f46;
  border-color: rgba(5, 150, 105, 0.45);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
}

/* Mobile Diagram Swipe Hint */
.diagram-scroll-hint {
  display: none;
  font-size: 0.78rem;
  color: var(--text-3);
  text-align: center;
  margin-top: 6px;
}
@media (max-width: 768px) {
  .diagram-scroll-hint { display: block; }
}

/* Terminal Output Block */
.terminal-block {
  background: #090d16;
  border: 1px solid #1e293b;
  border-radius: 10px;
  overflow: hidden;
  margin: 18px 0 24px;
  font-family: var(--font-mono);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.terminal-header {
  background: #111827;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1f2937;
  font-size: 0.78rem;
  color: var(--text-3);
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: var(--red); }
.dot-yellow { background: var(--amber); }
.dot-green { background: var(--green); }
.terminal-body {
  padding: 16px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #e2e8f0;
  overflow-x: auto;
  white-space: pre;
}
.term-prompt { color: #38bdf8; font-weight: 600; }
.term-success { color: #4ade80; }
.term-warn { color: #facc15; }
.term-dim { color: #64748b; }

/* Runbook Table */
.runbook-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.88rem;
}
.runbook-table th, .runbook-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  vertical-align: top;
}
.runbook-table th {
  background: var(--surface);
  color: var(--blue-soft);
  font-weight: 600;
  text-align: left;
}

/* "Before you start" box on every lab page (generated by scripts/generate-lab-index.py) */
.prereq-box { margin: 0 0 28px; padding: 16px 20px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid #60a5fa; background: color-mix(in srgb, #60a5fa 7%, transparent); }
.prereq-title { font: 700 .85rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 8px; }
.prereq-box p { margin: 0 0 8px; font-size: .95rem; }
.prereq-box .prereq-next { margin-top: 12px; color: var(--text-3); }
.prereq-box ul { margin: 0 0 4px; padding-left: 20px; }
.prereq-box li { margin: 4px 0; }

/* ---------- Site topbar: global navigation above section tabs ---------- */
.site-topbar {
  position: sticky; top: 0; z-index: 30; height: var(--site-nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px;
  background: var(--glass, rgba(15, 15, 15, .98)); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-topbar-brand {
  font: 700 .95rem var(--font-display); color: var(--text); letter-spacing: .02em; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.site-topbar-brand span { color: var(--blue); }
.site-topbar-brand:hover { text-decoration: none; }
.site-topbar-links {
  display: flex; align-items: center; gap: 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.site-topbar-links::-webkit-scrollbar { display: none; }
.site-topbar-link {
  color: var(--text-3); font-weight: 500; font-size: .84rem; white-space: nowrap; transition: color .15s ease;
}
.site-topbar-link:hover { color: var(--text); text-decoration: none; }
.site-topbar-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 600 .68rem/1.5 var(--font-mono); color: var(--blue-soft); background: color-mix(in srgb, var(--blue) 14%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); vertical-align: 1px; }
.site-topbar-badge.is-amber { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.site-topbar-link.is-active { color: var(--blue-soft); font-weight: 600; }

/* ---------- Section tabs: sub-navigation bar matching site sub-nav ---------- */
.section-tabs {
  position: sticky; top: var(--site-nav-h); z-index: 25; height: var(--tabs-h);
  display: flex; align-items: center; gap: 6px; padding: 0 20px;
  background: rgba(15, 15, 15, .96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 9999px; white-space: nowrap;
  font: 500 .82rem/1.4 var(--font-sans);
  color: var(--text-3); border: 1px solid transparent; transition: all .15s ease;
}
.section-tab b { color: var(--text-3); font-weight: 600; font-size: .75rem; }
.section-tab:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.section-tab.is-active { color: var(--blue-soft); background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .3); font-weight: 600; }
.section-tab.is-active b { color: var(--blue); }
.section-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.badge-trending {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 .62rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: #fbbf24; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 999px; padding: 3px 7px;
}
.badge-trending::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; }
@media (prefers-reduced-motion: no-preference) {
  .badge-trending::before { animation: trending-pulse 1.8s ease-in-out infinite; }
  @keyframes trending-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.rail .rail-num { color: var(--violet); font-weight: 700; margin-right: 2px; }
@media (max-width: 900px) {
  .site-topbar { padding: 0 12px; gap: 12px; }
  .site-topbar-links { gap: 12px; }
  .section-tabs { padding: 0 8px; }
  .section-tab { padding: 0 11px; }
}

/* ---------- Printing is for admins only (auth-gate.js adds .da-admin to <html>) ---------- */
html:not(.da-admin) .print-btn { display: none !important; }
@media print {
  html:not(.da-admin) body > * { display: none !important; }
  html:not(.da-admin) body::before { content: "Printing is available to admins only."; display: block; padding: 24px; font: 16px sans-serif; color: #111; }
}

/* ==========================================================================
   Revamp layer. Design tokens and shared components used by every lab, note
   and index page. Older class names keep working as aliases of these.
   ========================================================================== */
:root {
  --blue-fill: #2f6fe4;      /* white text on this is 4.7:1 */
  --on-fill: #ffffff;
  --code-bg: #0f1218;
  --code-comment: #8b97ab;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
}

/* Buttons: one family. .btn.primary, .btn-download and .paywall-btn stay as aliases. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 .88rem/1 var(--font-sans); padding: 10px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { text-decoration: none; }
.btn-primary, .btn.primary, .btn-download { background: var(--blue-fill); border-color: transparent; color: var(--on-fill) !important; }
.btn-primary:hover, .btn.primary:hover:not(:disabled), .btn-download:hover { background: #3b7cf0; color: var(--on-fill) !important; }
.btn-secondary { background: transparent; border-color: #3a4052; color: var(--text); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--blue); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 7px 12px; font-size: .8rem; border-radius: var(--r-sm); }
.btn-lg { padding: 13px 22px; font-size: .98rem; }
.btn-download { padding: 7px 14px; border-radius: var(--r-md); font-size: .82rem; }
.paywall-btn { background: var(--blue-fill); border-radius: var(--r-md); }
.btn:focus-visible, .btn-download:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Tags and fact tiles */
.tag { display: inline-flex; align-items: center; gap: 6px; font: 500 .72rem/1 var(--font-mono); letter-spacing: .02em; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: var(--surface); }
.tag.free { color: var(--green); border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .08); }
.tag.verified { color: var(--blue-soft); border-color: rgba(96, 165, 250, .4); background: rgba(96, 165, 250, .08); }
.tag.soon { color: var(--text-3); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 22px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.tile .k { display: block; font: 500 .68rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.tile .v { display: block; font: 600 1.02rem/1.25 var(--font-display); color: var(--text); overflow-wrap: anywhere; }
.tile .v small { display: block; font: 400 .8rem/1.3 var(--font-sans); color: var(--text-3); margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.subtitle { font: 500 clamp(1.05rem, 2.2vw, 1.3rem)/1.35 var(--font-display); color: var(--text-3); margin: -4px 0 14px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 .78rem var(--font-mono); color: var(--text-3); margin: 0 0 6px; }

/* Callouts: a tinted card with a mono label, no heavy side bar */
.callout { border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--c) 7%, var(--surface)); padding: 14px 18px; }
.callout-label { font: 600 .72rem/1.2 var(--font-mono); letter-spacing: .08em; }
.callout-architect, .callout-note { border-left-width: 1px; border-radius: var(--r-md); }
.prereq-box { border-left-width: 1px; border-radius: var(--r-md); border-color: color-mix(in srgb, var(--blue) 35%, transparent); background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.learn-box { border-left-width: 1px; border-radius: var(--r-md); }

/* Code and terminal panels share one header pattern */
.codeblock { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--code-bg); overflow: hidden; }
.codeblock::before { content: ''; display: block; height: 34px; background: var(--surface); border-bottom: 1px solid var(--border); }
.codeblock pre { border: 0; border-radius: 0; background: transparent; }
.codeblock .lang { top: 9px; left: 14px; right: auto; letter-spacing: .06em; }
.codeblock .copy-btn { top: 4px; right: 6px; border-color: transparent; background: transparent; }
.codeblock .copy-btn:hover { background: var(--surface-2); }
.token.comment, .token.prolog { color: var(--code-comment); }
.terminal-block { border-radius: var(--r-md); background: var(--code-bg); border-color: var(--border); box-shadow: none; }
.terminal-header { background: var(--surface); border-bottom-color: var(--border); }

/* Question rows and previous/next cards */
details.reveal, .predict, details.code-explainer { border-radius: var(--r-md); }
details.reveal summary { display: block; position: relative; padding: 13px 16px 13px 42px; }
details.reveal summary::before { position: absolute; left: 16px; top: 12px; }
.page-nav a { border-radius: var(--r-md); background: var(--surface); }
.page-nav a:hover { border-color: var(--blue); }

/* Contents rail and a mobile "On this page" */
.toc a { padding: 5px 12px; }
.toc a.on { font-weight: 600; }
.toc .toc-top { display: inline-block; margin-top: 14px; padding: 0; border: 0; font-size: .78rem; color: var(--text-3); }
.mobile-toc { display: none; margin: 0 0 20px; }
.mobile-toc summary { cursor: pointer; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: 600 .84rem var(--font-display); }
.mobile-toc ol { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; }
.mobile-toc a { display: block; padding: 6px 12px; color: var(--text-2); }
@media (max-width: 1100px) { .mobile-toc { display: block; } }

/* Guided path strip under a lab or case file hero */
.path { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.path a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: 600 .88rem/1.2 var(--font-display); }
.path a small { font: 400 .76rem/1.35 var(--font-sans); color: var(--text-3); }
.path a:hover { border-color: var(--blue); background: var(--surface-2); text-decoration: none; }
.path .n { font: 500 .7rem var(--font-mono); color: var(--violet); }

/* Sidebar groups (a tier of labs) */
.rail .grp { margin: 2px 0; }
.rail .grp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--r-sm); font: 600 .8rem/1.2 var(--font-display); color: var(--text-2); }
.rail .grp > summary::-webkit-details-marker { display: none; }
.rail .grp > summary::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg); transition: transform .15s; }
.rail .grp[open] > summary::before { transform: rotate(45deg); }
.rail .grp > summary:hover { background: var(--surface-2); color: var(--text); }
.rail .grp .count { margin-left: auto; font: 500 .7rem var(--font-mono); color: var(--text-3); }
.rail .grp > ul { margin: 2px 0 8px 14px; padding: 0 0 0 8px; border-left: 1px solid var(--border); }
.rail .grp li a { position: relative; padding: 4px 8px; font-size: .82rem; color: var(--text-3); }
.rail .grp li a:hover { color: var(--text); }
.rail .grp li a.active { color: var(--blue-soft); }
.rail .grp li a.active::before { content: ''; position: absolute; left: -9px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--blue); }
.rail .free-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--green); vertical-align: middle; }

/* Numbered rows for track indexes and the Docker hub */
.modules { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin: 24px 0; }
.mod { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); color: inherit; }
.mod:last-child { border-bottom: 0; }
.mod:hover { background: var(--surface-2); text-decoration: none; }
.mod .no { font: 500 .8rem var(--font-mono); color: var(--violet); }
.mod .t { color: var(--text); font: 600 1rem/1.3 var(--font-display); }
.mod .t small { display: block; margin-top: 3px; font: 400 .86rem/1.45 var(--font-sans); color: var(--text-3); }
.mod .end { display: flex; align-items: center; gap: 10px; font: 500 .74rem var(--font-mono); color: var(--text-3); white-space: nowrap; }
.mod.is-soon { opacity: .75; cursor: default; }
@media (max-width: 560px) {
  .mod { grid-template-columns: 34px minmax(0, 1fr); }
  .mod .end { grid-column: 2; }
}
@media (max-width: 380px) {
  .facts { grid-template-columns: 1fr; }
}

/* Injected by auth-gate.js (was inline style) */
.user-badge { font-size: .8rem; color: var(--text-3); padding: 12px 4px 4px; border-top: 1px solid var(--border-soft); margin-top: 16px; }
.user-badge .who { font-weight: 600; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.user-badge .links { display: flex; flex-direction: column; gap: 5px; }
.user-badge .links a { color: var(--text-3); font-size: .75rem; }
.user-badge .links a.main { color: var(--blue); font-weight: 600; font-size: .8rem; }
.role-pill { font: 700 .65rem/1 var(--font-sans); padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.role-pill.admin { background: rgba(16, 185, 129, .2); color: #34d399; border: 1px solid rgba(16, 185, 129, .4); }
.role-pill.pass { background: rgba(37, 99, 235, .2); color: var(--blue); border: 1px solid rgba(37, 99, 235, .4); }
.free-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; padding: 12px 18px; border: 1px solid rgba(16, 185, 129, .35); border-radius: var(--r-md); background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(15, 23, 42, .92)); }
.free-banner .what { display: flex; align-items: center; gap: 10px; }
.free-banner .pill { background: #10b981; color: #022c22; font: 800 .72rem/1 var(--font-sans); padding: 3px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; }
.free-banner .msg { color: #e2e8f0; font-size: .86rem; font-weight: 500; }
.free-banner .cta { background: var(--blue-fill); color: var(--on-fill); padding: 8px 14px; border-radius: var(--r-md); font-size: .82rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.free-banner .cta:hover { background: #3b7cf0; text-decoration: none; }

/* ==========================================================================
   Desi Dark (default) and Desi Light. theme.js sets html[data-style].
   Neutrals and reading rhythm follow the calm "classic" look that tested best;
   links and actions stay our blue, labels and numbers use the warm amber, fonts stay ours.
   ========================================================================== */
.style-pick { flex: none; max-width: 150px; font: 500 .8rem var(--font-sans); color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.style-pick:hover { color: var(--text); border-color: var(--blue-deep); }
.style-pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

html[data-style="dark"] {
  --base: #0e0f12; --surface: #16191b; --surface-2: #1b1e22; --surface-3: #23272c;
  --border: #2c3238; --border-soft: #1f2328;
  --text: #eceff3; --text-2: #c9ccd2; --text-3: #9aa3ad;
  --violet: #ff8a3d; --violet-soft: #ffb27a;
  --pre-bg: #111418; --code-bg: #0c0e11; --glass: rgba(14, 15, 18, .94);
  --read-size: 1.1875rem; --read-lh: 1.7; --read-gap: 24px; --measure: 64ch;
}
html[data-style="light"] {
  --base: #ffffff; --surface: #f9fafc; --surface-2: #eef3fa; --surface-3: #e4e9f0;
  --border: #d3dce6; --border-soft: #e4e9f0;
  --text: #101828; --text-2: #1f2937; --text-3: #4a5a75;
  --blue: #1d4ed8; --blue-soft: #1e40af; --blue-deep: #2563eb;
  --violet: #c2410c; --violet-soft: #9a3412;
  --green: #047857; --amber: #b45309; --red: #b91c1c;
  --blue-fill: #1d4ed8; --on-fill: #ffffff;
  --pre-bg: #152238; --code-bg: #111b2e; --glass: rgba(255, 255, 255, .94);
  --read-size: 1.1875rem; --read-lh: 1.7; --read-gap: 24px; --measure: 64ch;
  color-scheme: light;
}

/* Reading rhythm: bigger text, a shorter line, more air between blocks. */
html[data-style] body { font: 400 var(--read-size)/var(--read-lh) var(--font-sans); }
html[data-style] .prose p,
html[data-style] .prose ul,
html[data-style] .prose ol,
html[data-style] .prose blockquote,
html[data-style] .lead { max-width: var(--measure); }
html[data-style] .prose p { margin-bottom: var(--read-gap); }
html[data-style] .prose li { margin: 8px 0; }
html[data-style] .prose h2 { margin-top: 68px; }
html[data-style] .prose h3 { margin-top: 40px; }
html[data-style] .callout,
html[data-style] .table-scroll,
html[data-style] .codeblock,
html[data-style] figure.diagram { margin-top: 28px; margin-bottom: 32px; }
html[data-style] .prose table { font-size: .95rem; }
html[data-style] .prose td { padding: 12px 16px; }
html[data-style] .topbar,
html[data-style] .section-tabs { background: var(--glass); }
html[data-style] .rail li a.active,
html[data-style] .section-tab.is-active { background: color-mix(in srgb, var(--blue) 13%, transparent); }
html[data-style] ::selection { background: color-mix(in srgb, var(--blue) 30%, transparent); }

/* Light: code, terminals, diagrams and the enlarge dialog stay dark.
   Everything else that used a hard-coded dark colour follows the light tokens. */
html[data-style="light"] .codeblock::before,
html[data-style="light"] .terminal-header { background: #232a36; border-bottom-color: #2f3746; }
html[data-style="light"] .codeblock .lang,
html[data-style="light"] .terminal-header { color: #aab4c3; }
html[data-style="light"] .codeblock .copy-btn { color: #cbd5e1; }
html[data-style="light"] .terminal-block { border-color: #2f3746; }
html[data-style="light"] .demo-log { color: #e2e8f0; }
html[data-style="light"] .demo { background: var(--surface); border-color: var(--border); }
html[data-style="light"] dialog.zoom { color: #cbd5e1; }
html[data-style="light"] .paywall-card { background: var(--surface); border-color: var(--border); box-shadow: 0 8px 24px rgba(16, 24, 40, .08); }
html[data-style="light"] .paywall-cta-box { background: var(--base); }
html[data-style="light"] .lab-skeleton-bar { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; }
html[data-style="light"] .badge-trending { color: #b45309; background: rgba(245, 158, 11, .12); }
html[data-style="light"] .badge-trending::before { background: #b45309; }
html[data-style="light"] .tag.free { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
html[data-style="light"] .free-banner { background: color-mix(in srgb, var(--green) 8%, var(--surface)); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
html[data-style="light"] .free-banner .msg { color: var(--text-2); }
html[data-style="light"] .user-badge .who { color: var(--text); }
html[data-style="light"] .os-btn[aria-pressed="true"] { color: var(--on-fill); background: var(--blue-fill); }
html[data-style="light"] .prose tbody tr:hover td { background: var(--surface); }
html[data-style="light"] .rail { background: var(--surface); }

/* ---------- Less pinned chrome on small and short screens ----------
   Three bars used to stay stuck to the top: site bar 44px, section tabs 46px and the Notes bar 50px. That is
   140px, about 22% of a 650px laptop screen and 17% of a phone. On phones, iPads and short laptop windows the
   site bar and the section tabs now scroll away and only the Notes bar (menu, theme) stays pinned. */
@media (max-width: 900px), (max-height: 760px) {
  .site-topbar, .section-tabs { position: static; }
  .topbar { top: 0; }
  .toc { top: 70px; max-height: calc(100vh - 90px); }
}
@media print { .mobile-toc { display: none; } }

/* Live counters (allowed 44, tokens 9.8, [t=5.0s]) change every 100ms. Equal-width digits stop the text
   from jittering sideways while the reader watches. The property inherits, so the demo container is enough. */
.demo, .demo-controls, .stepper { font-variant-numeric: tabular-nums; }

/* ---------- One reading column (same rule as the lessons in the app) ----------
   Title, intro, contents box, headings, paragraphs, lists, code, tables, callouts and
   previous/next all share one left edge and stop at about 80 characters (44 times the
   body size; 64ch was really about 84 characters of Inter). Diagrams and live demos may
   use the full column, centred on the same axis, so they never stick out on one side. */
html[data-style="dark"], html[data-style="light"] { --read-size: 1.125rem; --read-lh: 1.75; --measure: calc(var(--read-size) * 44); }
.page > main > :is(.page-head, .mobile-toc, .free-banner, .page-nav, .paid-content-gate),
.page > main > .prose > :not(figure, .demo, .stepper, .compare) {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.page > main > .prose > :is(figure, .demo, .stepper, .compare) {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Less chrome, more room for the text ----------
   Measured at 1900x940: three pinned bars (140px), a 276px rail, a 220px contents panel with its own scrollbar,
   and the text was 36% of the screen. Now: on wide screens the contents list sits beside the text by default
   with a Hide button (remembered as html.toc-closed); hidden, or below 1101px, it is a box under the title. The
   notes bar (crumbs, theme, print) is gone on wide screens because the theme picker and print live in the site
   bar, and the text is 18px in a wider column. */
.page { grid-template-columns: minmax(0, 1fr); max-width: 1060px; }
.page .toc { display: none; }
.mobile-toc { display: block; }
@media (min-width: 1101px) {
  html:not(.toc-closed) .page:has(.toc) { grid-template-columns: minmax(0, 1fr) 220px; max-width: 1240px; }
  html:not(.toc-closed) .page .toc { display: block; }
  html:not(.toc-closed) .page .mobile-toc { display: none; }
}
@media (max-width: 1100px) { .toc-pin { display: none; } }

.toc {
  top: calc(var(--site-nav-h) + var(--tabs-h) + 24px);
  max-height: calc(100vh - var(--site-nav-h) - var(--tabs-h) - 48px);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.toc::-webkit-scrollbar { width: 6px; }
.toc::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.toc-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.toc-toggle {
  font: 500 .78rem var(--font-sans); letter-spacing: 0; text-transform: none;
  color: var(--text-3); background: transparent; border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 8px; cursor: pointer;
}
.toc-toggle:hover { color: var(--text); border-color: var(--blue-deep); }
.toc-pin { margin: 10px 0 2px 12px; }

@media (min-width: 901px) {
  .topbar { display: none; }
}
.site-topbar .style-pick { margin-left: 4px; }
.site-topbar .print-btn { flex: none; }

/* Headings reached from the contents list land below the pinned bars, not under them. */
.prose :is(h2, h3) { scroll-margin-top: calc(var(--site-nav-h) + var(--tabs-h) + 16px); }
@media (max-width: 900px), (max-height: 760px) {
  .prose :is(h2, h3) { scroll-margin-top: 64px; }
}
@media print { .toc-toggle { display: none; } }

/* ---------- Section list can hide on a wide screen ----------
   Same idea as the lesson list in the app. Open by default (276px). Hide collapses it to a 48px strip.
   The article column does not grow: text stays on the 792px measure and diagrams stay in the page width.
   Under 900px the Menu drawer is the only control, so these buttons stay hidden. */
.rail-hide {
  align-self: flex-end;
  margin: 0 0 14px;
  font: 500 .78rem var(--font-sans);
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
}
.rail-hide:hover { color: var(--text); border-color: var(--blue-deep); }
.rail-show { display: none; }
.rail-show-icon { font-size: 1rem; line-height: 1; }
.rail-show-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 .75rem var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (min-width: 901px) {
  /* Only pages that ship the Show button collapse. A lab page with the older rail stays open. */
  html.rail-closed .shell:has(.rail-show) { grid-template-columns: 48px minmax(0, 1fr); }
  html.rail-closed .rail:has(.rail-show) {
    width: 48px;
    padding: 16px 0 24px;
    align-items: center;
    overflow: hidden;
  }
  html.rail-closed .rail:has(.rail-show) > :not(.rail-show) { display: none; }
  html.rail-closed .rail-show {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 8px 0;
    background: transparent;
    border: 0;
    color: var(--text-3);
    cursor: pointer;
    font: inherit;
  }
  html.rail-closed .rail-show:hover { color: var(--text); }
}
.rail-hide:focus-visible, .rail-show:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 900px) {
  .rail-hide, .rail-show { display: none; }
}

/* ---------- Quieter headings (same spec as the app lessons) ----------
   No accent bar under every H2; the amber number stays as the only marker, a little smaller and softer. */
.prose h2 { font-size: 1.5rem; }
.prose h2::after { display: none; }
.prose h2 .num { font-size: .75rem; font-weight: 500; opacity: .85; margin-bottom: 8px; }
html[data-style="light"] .prose h2 .num { opacity: 1; }
html[data-style] .prose h2 { margin-top: 56px; }

/* The locked-page card (and its loading skeleton) sits outside the article, so it follows the same column
   as the title above it. It fills the column instead of stopping at 680px on the left. */
.page > main > .paid-content-gate .paywall-card { max-width: none; }

/* ---------- Scrollbars (same rule as the app) ----------
   Thin, no arrows, a soft thumb on a clear track. The page bar stays visible; bars inside panels (section list,
   contents, code blocks) are quieter until the pointer is over them. Elements that hide their own bar keep
   doing so, because their own rule is more specific than this one. */
html {
  --scroll-thumb: color-mix(in srgb, var(--text-3) 42%, transparent);
  --scroll-thumb-quiet: color-mix(in srgb, var(--text-3) 22%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--text-3) 70%, transparent);
}
html, * { scrollbar-width: thin; }
html { scrollbar-color: var(--scroll-thumb) transparent; }
*:not(html) { scrollbar-color: var(--scroll-thumb-quiet) transparent; }
*:not(html):hover { scrollbar-color: var(--scroll-thumb-hover) transparent; }
.toc { scrollbar-color: var(--scroll-thumb-quiet) transparent; }
.toc:hover { scrollbar-color: var(--scroll-thumb-hover) transparent; }
@supports not (scrollbar-width: thin) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
  ::-webkit-scrollbar-button { display: none; }
}


/* ---------- Docker Labs Hub & Sandboxes Cards ---------- */
.lab-card {
  display: block;
  background: linear-gradient(135deg, rgba(20,20,20,0.9) 0%, rgba(30,30,38,0.9) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.lab-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  text-decoration: none;
}
.lab-card.is-new {
  border-color: rgba(52, 211, 153, 0.45);
}
.lab-card .tag {
  display: inline-block;
  font: 600 0.72rem var(--font-mono);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.tag-ref { background: rgba(96, 165, 250, 0.15); color: #93c5fd; }
.tag-tier-0 { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.tag-tier-1 { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.tag-tier-2 { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.tag-tier-3 { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.tag-tier-4 { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.tag-tier-5 { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }

.badge-free {
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
  letter-spacing: 0.03em;
}
.badge-pro {
  color: #cbd5e1;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-pro-icon {
  color: #fbbf24;
}
.badge-coming-soon {
  color: #94a3b8;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.coming-soon-link {
  color: #64748b;
  font-style: italic;
}
.download-link, .read-guide-link {
  color: #60a5fa;
  font-family: var(--font-mono);
  text-decoration: none;
}
.download-link {
  font-size: 0.8rem;
}
.read-guide-link {
  font-size: 0.78rem;
}
.download-link:hover, .read-guide-link:hover {
  text-decoration: underline;
}

.lab-card h3 {
  font: 700 1.2rem var(--font-display);
  color: var(--text);
  margin: 0 0 8px;
}
.lab-card p {
  font-size: 0.92rem;
  color: var(--text-2);
  margin: 0 0 14px;
  line-height: 1.55;
}
.lab-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}
.badge-ram, .badge-ports, .badge-diff {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.badge-diff {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

/* Light Mode Overrides for Docker Labs Cards */
html[data-style="light"] .filter-btn,
html[data-theme="light"] .filter-btn,
html.light .filter-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
}
html[data-style="light"] .filter-btn:hover,
html[data-theme="light"] .filter-btn:hover,
html.light .filter-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--blue);
}
html[data-style="light"] .filter-btn.active,
html[data-theme="light"] .filter-btn.active,
html.light .filter-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

html[data-style="light"] .tier-badge.tier0,
html[data-theme="light"] .tier-badge.tier0,
html.light .tier-badge.tier0 {
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
html[data-style="light"] .tier-badge.tier1,
html[data-theme="light"] .tier-badge.tier1,
html.light .tier-badge.tier1 {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.35);
}
html[data-style="light"] .tier-badge.tier2,
html[data-theme="light"] .tier-badge.tier2,
html.light .tier-badge.tier2 {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.3);
}
html[data-style="light"] .tier-badge.tier3,
html[data-theme="light"] .tier-badge.tier3,
html.light .tier-badge.tier3 {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
html[data-style="light"] .tier-badge.tier4,
html[data-theme="light"] .tier-badge.tier4,
html.light .tier-badge.tier4 {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
html[data-style="light"] .tier-badge.tier5,
html[data-theme="light"] .tier-badge.tier5,
html.light .tier-badge.tier5 {
  background: rgba(6, 182, 212, 0.12);
  color: #0e7490;
  border: 1px solid rgba(6, 182, 212, 0.35);
}

html[data-style="light"] .lab-card,
html[data-theme="light"] .lab-card,
html.light .lab-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}
html[data-style="light"] .lab-card:hover,
html[data-theme="light"] .lab-card:hover,
html.light .lab-card:hover {
  background: #ffffff;
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}
html[data-style="light"] .lab-card.is-new,
html[data-theme="light"] .lab-card.is-new,
html.light .lab-card.is-new {
  border-color: rgba(16, 185, 129, 0.5);
}

html[data-style="light"] .tag-ref,
html[data-theme="light"] .tag-ref,
html.light .tag-ref {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.25);
}
html[data-style="light"] .tag-tier-0,
html[data-theme="light"] .tag-tier-0,
html.light .tag-tier-0 {
  background: rgba(168, 85, 247, 0.12);
  color: #7e22ce;
  border: 1px solid rgba(168, 85, 247, 0.25);
}
html[data-style="light"] .tag-tier-1,
html[data-theme="light"] .tag-tier-1,
html.light .tag-tier-1 {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
html[data-style="light"] .tag-tier-2,
html[data-theme="light"] .tag-tier-2,
html.light .tag-tier-2 {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.25);
}
html[data-style="light"] .tag-tier-3,
html[data-theme="light"] .tag-tier-3,
html.light .tag-tier-3 {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
html[data-style="light"] .tag-tier-4,
html[data-theme="light"] .tag-tier-4,
html.light .tag-tier-4 {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
html[data-style="light"] .tag-tier-5,
html[data-theme="light"] .tag-tier-5,
html.light .tag-tier-5 {
  background: rgba(6, 182, 212, 0.12);
  color: #0e7490;
  border: 1px solid rgba(6, 182, 212, 0.25);
}

html[data-style="light"] .badge-free,
html[data-theme="light"] .badge-free,
html.light .badge-free {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.4);
}
html[data-style="light"] .badge-pro,
html[data-theme="light"] .badge-pro,
html.light .badge-pro {
  color: var(--text-2);
}
html[data-style="light"] .badge-pro-icon,
html[data-theme="light"] .badge-pro-icon,
html.light .badge-pro-icon {
  color: #b45309;
}
html[data-style="light"] .badge-coming-soon,
html[data-theme="light"] .badge-coming-soon,
html.light .badge-coming-soon {
  color: var(--text-3);
}
html[data-style="light"] .coming-soon-link,
html[data-theme="light"] .coming-soon-link,
html.light .coming-soon-link {
  color: var(--text-3);
}

html[data-style="light"] .download-link,
html[data-theme="light"] .download-link,
html.light .download-link,
html[data-style="light"] .read-guide-link,
html[data-theme="light"] .read-guide-link,
html.light .read-guide-link {
  color: var(--blue);
  font-weight: 600;
}

html[data-style="light"] .lab-meta,
html[data-theme="light"] .lab-meta,
html.light .lab-meta {
  color: var(--text-3);
}
html[data-style="light"] .badge-ram,
html[data-theme="light"] .badge-ram,
html.light .badge-ram,
html[data-style="light"] .badge-ports,
html[data-theme="light"] .badge-ports,
html.light .badge-ports {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
html[data-style="light"] .badge-diff,
html[data-theme="light"] .badge-diff,
html.light .badge-diff {
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: #1d4ed8;
}