@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Noto Sans SC', 'Space Grotesk', sans-serif;
  background: #06080d;
  color: #c9d1d9;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e2a3a; border-radius: 3px; }
::selection { background: rgba(99,179,237,0.18); }

/* ═══════════ DESIGN TOKENS — CLAUDE CODE PALETTE ═══════════ */
:root {
  --void: #0c0a09;
  --deep: #1a1412;
  --base: #1c1614;
  --raised: #231c19;
  --surface: #2c2420;
  --surface-bright: #362d28;
  --border: #3d322b;
  --border-bright: #544740;
  --text-1: #f5f0ed;
  --text-2: #b8a99c;
  --text-3: #7a6b5e;
  /* Claude Code brand colors */
  --clay: #d97757;        /* primary — Clawd's color */
  --clay-dim: #a85a3f;
  --clay-glow: rgba(217,119,87,0.15);
  --sand: #e8b87a;        /* warm secondary */
  --sand-dim: #a07840;
  --blue: #7cafc4;         /* cool accent — softer, warmer blue */
  --blue-dim: #4a7a8f;
  --cyan: #6db5a8;
  --cyan-dim: #3a7a6e;
  --green: #7ec98a;
  --green-dim: #3a6b42;
  --amber: #e8a850;
  --amber-dim: #8a6430;
  --purple: #b08cc8;
  --purple-dim: #5a3a6e;
  --rose: #d96b6b;
  --rose-dim: #7a3535;
  --pink: #d47a9a;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Noto Sans SC', 'Space Grotesk', sans-serif;
  --display: 'Playfair Display', 'Noto Sans SC', serif;
  --sidebar-w: 272px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --content-max: 960px;
}

/* ═══════════ LIGHT THEME ═══════════ */
[data-theme="light"] {
  --void: #ffffff;
  --deep: #f7f2ec;
  --base: #efe8e0;
  --raised: #ffffff;
  --surface: #f4ede5;
  --surface-bright: #eae0d4;
  --border: #ddd0c2;
  --border-bright: #c8b8a6;
  --text-1: #1c1210;
  --text-2: #5a4535;
  --text-3: #9a846e;
  --clay: #c4603c;
  --clay-dim: #f0d4c4;
  --blue: #4a88a0;
  --blue-dim: #d0e4ee;
  --cyan: #3a8a7e;
  --cyan-dim: #d0ede8;
  --green: #3a8a4a;
  --green-dim: #d4f0da;
  --amber: #c08030;
  --amber-dim: #f8e8c8;
  --purple: #7a5a9a;
  --purple-dim: #e8d8f4;
  --rose: #b44a4a;
  --rose-dim: #f4d4d4;
  --pink: #b05878;
}
[data-theme="light"] body { background: #f7f2ec; color: #5a4535; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d4c4b4; }
[data-theme="light"] ::selection { background: rgba(217,119,87,0.15); }
[data-theme="light"] .side { background: rgba(255,255,255,0.96); border-right-color: var(--border); }
[data-theme="light"] .codeblock { background: #f5ede6; }
[data-theme="light"] .cb-bar { background: #ede4da; }
[data-theme="light"] pre { color: #3d2e22; }
[data-theme="light"] .kw { color: #7a5a9a; }
[data-theme="light"] .fn { color: #4a88a0; }
[data-theme="light"] .str { color: #3a8a4a; }
[data-theme="light"] .cm { color: #a89484; }
[data-theme="light"] .ty { color: #c08030; }
[data-theme="light"] .num { color: #b44a4a; }
[data-theme="light"] .op { color: #3a8a7e; }
[data-theme="light"] .hl-line { background: rgba(217,119,87,0.06); border-left-color: var(--clay); }
[data-theme="light"] .card { background: #fff; box-shadow: 0 1px 6px rgba(44,30,20,0.1); }
[data-theme="light"] .acc { background: #fff; }
[data-theme="light"] .acc-head:hover { background: rgba(217,119,87,0.04); }
[data-theme="light"] .arch { background: #faf6f2; }
[data-theme="light"] .arch::before { background: radial-gradient(ellipse at 30% 20%, rgba(217,119,87,0.05) 0%, transparent 50%); }
[data-theme="light"] .flow-box { background: #faf6f2; }
[data-theme="light"] .fs-code { background: #f5ede6; }
[data-theme="light"] .tok-viz { background: #faf6f2; }
[data-theme="light"] .tok-bar { background: #e8ddd2; }
[data-theme="light"] .tok-seg { color: #fff; }
[data-theme="light"] .atree { background: #faf6f2; }
[data-theme="light"] .quiz { background: #faf6f2; }
[data-theme="light"] .quiz-q { background: #fff; }
[data-theme="light"] .quiz-opt { background: #faf6f2; }
[data-theme="light"] .quiz-opt:hover:not(.locked) { background: rgba(217,119,87,0.06); }
[data-theme="light"] .quiz-opt.correct { background: rgba(58,138,74,0.08); color: #3a8a4a; }
[data-theme="light"] .quiz-opt.wrong { background: rgba(180,74,74,0.06); color: #b44a4a; }
[data-theme="light"] .terminal-demo { background: #1c1614; }
[data-theme="light"] .term-bar { background: #2c2420; }
[data-theme="light"] .term-body { color: #f5f0ed; }
[data-theme="light"] .term-body .prompt { color: #7ec98a; }
[data-theme="light"] .term-body .hi { color: #7cafc4; }
[data-theme="light"] .term-body .dim { color: #7a6b5e; }
[data-theme="light"] .term-body .warn { color: #e8a850; }
[data-theme="light"] .term-body .out { color: #b8a99c; }
[data-theme="light"] .boot-logo { color: #fff; }
[data-theme="light"] #boot { background: #faf5f0; }
[data-theme="light"] .boot-lines { color: #3a8a4a; }
[data-theme="light"] .boot-line .dim { color: #a89484; }
[data-theme="light"] .stat-n {
  background: linear-gradient(135deg, #c4603c, #c08030);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="light"] .mod-title em {
  background: linear-gradient(135deg, #c4603c, #3a8a7e);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% auto;
}
[data-theme="light"] .nav-i:hover { background: rgba(217,119,87,0.06); }
[data-theme="light"] .nav-i.on { background: rgba(217,119,87,0.08); }
[data-theme="light"] .dtable tr:hover td { background: rgba(217,119,87,0.03); }
[data-theme="light"] .perm-detail-inner { background: rgba(217,119,87,0.04); }
[data-theme="light"] .detail { background: #fff; box-shadow: 0 2px 12px rgba(44,30,20,0.12); }
[data-theme="light"] #grid-canvas { opacity: 0.06; }
[data-theme="light"] .fbtn.act { color: #fff; }
[data-theme="light"] .fstep { opacity: 0.35; }
[data-theme="light"] .fstep.on { opacity: 1; }
[data-theme="light"] .fstep.done { opacity: 0.65; }
[data-theme="light"] .fs-num { border-color: var(--border-bright); }
[data-theme="light"] .flow-box { border-color: var(--border); }
[data-theme="light"] .fs-code { background: var(--deep); }
[data-theme="light"] .summary-card { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* ═══════════ THEME TOGGLE ═══════════ */
.theme-toggle {
  width: 100%; padding: 8px 0; margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  cursor: pointer; border: none; background: none;
  transition: color 0.2s;
}
.theme-toggle:hover { color: var(--text-1); }
.theme-toggle .toggle-track {
  width: 36px; height: 20px;
  background: var(--border);
  border-radius: 10px;
  position: relative;
  transition: background 0.3s;
}
.theme-toggle .toggle-thumb {
  width: 16px; height: 16px;
  background: var(--text-1);
  border-radius: 50%;
  position: absolute;
  top: 2px; left: 2px;
  transition: transform 0.3s var(--ease);
}
[data-theme="light"] .toggle-thumb { transform: translateX(16px); }
[data-theme="light"] .toggle-track { background: var(--clay); }
[data-theme="light"] .toggle-thumb { background: #fff; }

/* ═══════════ BOOT SCREEN ═══════════ */
#boot {
  position: fixed; inset: 0; z-index: 9999;
  background: #06080d;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 1s cubic-bezier(0.4, 0, 0, 1), visibility 1s;
}
#boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
[data-theme="light"] #boot { background: #f0f4f8; }

/* Floating orbs */
.boot-orbs { position: absolute; inset: 0; pointer-events: none; }
.boot-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.4;
  animation: orbFloat 8s ease-in-out infinite;
}
.orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(99,179,237,0.35), transparent 70%);
  top: 10%; left: 15%;
  animation-delay: 0s;
}
.orb-2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(183,148,244,0.3), transparent 70%);
  bottom: 10%; right: 15%;
  animation-delay: -3s;
}
.orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(79,209,197,0.25), transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation-delay: -5s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-15px, 25px) scale(0.95); }
  75% { transform: translate(20px, 10px) scale(1.02); }
}
[data-theme="light"] .orb-1 { background: radial-gradient(circle, rgba(49,130,206,0.2), transparent 70%); }
[data-theme="light"] .orb-2 { background: radial-gradient(circle, rgba(124,58,237,0.15), transparent 70%); }
[data-theme="light"] .orb-3 { background: radial-gradient(circle, rgba(13,148,136,0.12), transparent 70%); }

/* Center content */
.boot-center {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}
.boot-logo-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 36px;
  animation: logoEnter 0.8s var(--ease) both;
  animation-delay: 0.1s;
}
@keyframes logoEnter {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.boot-logo {
  width: 72px; height: 72px; margin-bottom: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--clay), var(--clay-dim));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(99,179,237,0.2),
    0 8px 32px rgba(99,179,237,0.15),
    0 0 80px rgba(99,179,237,0.08);
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(99,179,237,0.2), 0 8px 32px rgba(99,179,237,0.15), 0 0 80px rgba(99,179,237,0.08); }
  50% { box-shadow: 0 0 0 1px rgba(99,179,237,0.3), 0 12px 48px rgba(99,179,237,0.2), 0 0 120px rgba(183,148,244,0.12); }
}
.boot-logo img { display: block; }

.boot-title {
  font-family: var(--display); font-size: 28px; font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #f5f0ed 30%, var(--clay) 60%, var(--sand));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: titleShimmer 3s ease-in-out infinite;
  background-size: 200% auto;
}
@keyframes titleShimmer {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}
[data-theme="light"] .boot-title {
  background: linear-gradient(135deg, #1a202c 30%, #3182ce 60%, #0d9488);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% auto;
}

.boot-subtitle {
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  color: var(--text-3); letter-spacing: 3px; text-transform: uppercase;
  margin-top: 6px;
  animation: subtitleIn 0.6s var(--ease) both;
  animation-delay: 0.4s;
}
@keyframes subtitleIn { from { opacity: 0; letter-spacing: 8px; } to { opacity: 1; letter-spacing: 3px; } }

/* Boot lines */
.boot-lines {
  font-family: var(--mono); font-size: 12px;
  color: var(--green); text-align: left;
  width: 380px; max-width: 85vw;
  min-height: 180px;
}
[data-theme="light"] .boot-lines { color: #16a34a; }
.boot-line {
  opacity: 0; transform: translateY(6px);
  padding: 2px 0;
}
.boot-line.show { animation: lineIn 0.3s var(--ease) forwards; }
.boot-line .dim { color: var(--text-3); }
@keyframes lineIn { to { opacity: 1; transform: translateY(0); } }

/* Progress bar */
.boot-bar {
  width: 380px; max-width: 85vw;
  height: 3px; background: rgba(255,255,255,0.06);
  border-radius: 2px; margin-top: 20px; overflow: hidden;
  position: relative;
}
[data-theme="light"] .boot-bar { background: rgba(0,0,0,0.06); }
.boot-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--clay), var(--sand), var(--clay-dim));
  background-size: 200% 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
  animation: barShimmer 2s linear infinite;
}
@keyframes barShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* Module counter */
.boot-modules-counter {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-3); margin-top: 12px;
  letter-spacing: 0.5px;
  min-height: 16px;
}

/* ═══════════ CANVAS BG ═══════════ */
#grid-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.3;
}

/* ═══════════ APP LAYOUT ═══════════ */
#app { display: flex; min-height: 100vh; opacity: 0; transition: opacity 0.6s ease; position: relative; z-index: 1; }
#app.on { opacity: 1; }

/* ═══════════ SIDEBAR ═══════════ */
.side {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: rgba(11,15,24,0.92);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 100;
  transition: transform 0.4s var(--ease);
}
.side-head {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
}
.side-brand {
  display: flex; align-items: center; gap: 10px;
}
.side-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--clay), var(--clay-dim));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 800; font-size: 11px;
  color: var(--void);
}
.side-brand h1 {
  font-family: var(--mono); font-size: 14px;
  font-weight: 600; color: var(--text-1); letter-spacing: -0.3px;
}
.side-sub {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-3); margin-top: 4px;
}
.side-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.side-sec {
  font-family: var(--mono); font-size: 10px;
  font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-3);
  padding: 10px 18px 4px;
}
.nav-i {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 18px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: rgba(217,119,87,0.15);
  touch-action: manipulation;
  user-select: none;
}
.nav-i:hover { background: rgba(30,45,66,0.4); }
.nav-i.on {
  background: rgba(217,119,87,0.08);
  border-left-color: var(--clay);
}
.nav-i.on .nav-lbl { color: var(--clay); }
.nav-i.done .nav-dot { background: var(--green); box-shadow: 0 0 6px rgba(104,211,145,0.5); }
.nav-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); flex-shrink: 0;
  transition: all 0.25s ease;
}
.nav-i.on .nav-dot { background: var(--clay); box-shadow: 0 0 8px rgba(217,119,87,0.5); }
.nav-num { font-family: var(--mono); font-size: 10px; color: var(--text-3); min-width: 16px; }
.nav-lbl { font-size: 13px; color: var(--text-2); transition: color 0.15s; }
.side-foot {
  padding: 14px 18px; border-top: 1px solid var(--border);
}
.side-foot .ptext { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.pbar { height: 2px; background: var(--raised); border-radius: 1px; margin-top: 8px; overflow: hidden; }
.side-author {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-3);
  display: flex; flex-direction: column; gap: 6px;
}
.author-card {
  display: flex; align-items: center; gap: 10px;
}
.author-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--clay); flex-shrink: 0;
  background: linear-gradient(135deg, var(--clay), var(--sand));
}
.author-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.avatar-fallback {
  display: none; width: 100%; height: 100%;
  align-items: center; justify-content: center;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: #fff;
}
.author-info {
  display: flex; flex-direction: column; gap: 1px;
}
.author-info strong { color: var(--text-1); font-size: 12px; }
.author-bio { font-size: 10px; color: var(--text-3); }
.side-author-links {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; flex-wrap: wrap;
}
.side-author-links a {
  color: var(--clay); text-decoration: none;
  transition: opacity 0.2s;
}
.side-author-links a:hover { opacity: 0.7; }
.author-disclaimer {
  font-size: 9px; color: var(--text-3); opacity: 0.7;
  padding: 4px 8px; margin-top: 2px;
  background: var(--surface); border-radius: 4px;
  text-align: center; letter-spacing: 0.2px;
}
.pbar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--clay), var(--sand));
  transition: width 0.6s var(--ease);
}

/* ═══════════ MAIN ═══════════ */
.main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; }
.mod {
  display: none;
  padding: 44px 64px 88px;
  max-width: var(--content-max);
  margin: 0 auto;
  animation: modIn 0.45s var(--ease);
}
.mod.on { display: block; }
@keyframes modIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Module header */
.mod-head { margin-bottom: 44px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.mod-tag {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--clay); letter-spacing: 0.5px;
  background: rgba(217,119,87,0.07);
  border: 1px solid rgba(217,119,87,0.15);
  padding: 3px 12px; border-radius: 4px;
  margin-bottom: 14px;
}
.mod-title {
  font-family: var(--display);
  font-size: 38px; font-weight: 900;
  line-height: 1.15; letter-spacing: -0.5px;
  color: var(--text-1);
  margin-bottom: 14px;
}
.mod-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--clay), var(--sand));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: 0.05em;
  display: inline-block;
}
.mod-desc { font-size: 15px; color: var(--text-2); max-width: 620px; }

/* Typography */
.h2 {
  font-family: var(--sans); font-size: 22px; font-weight: 700;
  color: var(--text-1); margin: 44px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.h2-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.h3 {
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  color: var(--text-1); margin: 28px 0 10px;
}
p { margin-bottom: 14px; color: var(--text-2); font-size: 14.5px; }
strong { color: var(--text-1); font-weight: 600; }
code {
  font-family: var(--mono); font-size: 12.5px;
  background: rgba(217,119,87,0.07); color: var(--clay);
  padding: 2px 6px; border-radius: 3px;
}

/* ═══════════ CODE BLOCK ═══════════ */
.codeblock {
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 18px 0; overflow: hidden;
  transition: border-color 0.3s ease;
}
.codeblock:hover { border-color: var(--border-bright); }
.cb-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: rgba(20,28,43,0.6);
  border-bottom: 1px solid var(--border);
}
.cb-dots { display: flex; gap: 5px; }
.cb-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.cb-dots i:nth-child(1) { background: #ff5f57; }
.cb-dots i:nth-child(2) { background: #febc2e; }
.cb-dots i:nth-child(3) { background: #28c840; }
.cb-file { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.cb-copy {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-3); background: none; border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 3px; cursor: pointer;
  transition: all 0.2s;
}
.cb-copy:hover { color: var(--clay); border-color: var(--clay); }
pre {
  padding: 14px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px;
  line-height: 1.65; color: var(--text-2);
  counter-reset: line;
}
pre .ln {
  display: inline-block; width: 28px;
  color: var(--text-3); text-align: right;
  margin-right: 16px; user-select: none; opacity: 0.5;
}
.kw { color: var(--purple); }
.fn { color: var(--blue); }
.str { color: var(--green); }
.cm { color: var(--text-3); font-style: italic; }
.ty { color: var(--amber); }
.num { color: var(--rose); }
.op { color: var(--cyan); }
.hl-line {
  display: block; margin: 0 -18px; padding: 0 18px;
  background: rgba(217,119,87,0.08);
  border-left: 2px solid var(--clay);
}

/* ═══════════ CARDS ═══════════ */
.card {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
  margin: 14px 0;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.card:hover {
  border-color: var(--border-bright);
  transform: translateY(-1px);
}
.card.glow-blue:hover { box-shadow: 0 0 24px rgba(99,179,237,0.08); }
.card.glow-green:hover { box-shadow: 0 0 24px rgba(104,211,145,0.08); }
.card.glow-amber:hover { box-shadow: 0 0 24px rgba(246,173,85,0.08); }
.card.glow-purple:hover { box-shadow: 0 0 24px rgba(183,148,244,0.08); }
.card-stripe { border-left: 3px solid; }
.card-stripe.s-blue { border-left-color: var(--clay); }
.card-stripe.s-green { border-left-color: var(--green); }
.card-stripe.s-amber { border-left-color: var(--amber); }
.card-stripe.s-purple { border-left-color: var(--purple); }
.card-stripe.s-rose { border-left-color: var(--rose); }
.card-stripe.s-cyan { border-left-color: var(--cyan); }
.card-h {
  font-family: var(--mono); font-size: 13px;
  font-weight: 600; margin-bottom: 6px;
}

/* ═══════════ STATS ═══════════ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin: 18px 0; }
.stat {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 16px; text-align: center;
  transition: border-color 0.25s, transform 0.25s;
}
.stat:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.stat-n {
  font-family: var(--mono); font-size: 32px; font-weight: 700;
  background: linear-gradient(135deg, var(--clay), var(--sand));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-l { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ═══════════ TAGS ═══════════ */
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.tag {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: 4px; border: 1px solid;
}
.t-blue { color: var(--blue); border-color: rgba(99,179,237,0.25); background: rgba(99,179,237,0.05); }
.t-green { color: var(--green); border-color: rgba(104,211,145,0.25); background: rgba(104,211,145,0.05); }
.t-amber { color: var(--amber); border-color: rgba(246,173,85,0.25); background: rgba(246,173,85,0.05); }
.t-purple { color: var(--purple); border-color: rgba(183,148,244,0.25); background: rgba(183,148,244,0.05); }
.t-cyan { color: var(--cyan); border-color: rgba(79,209,197,0.25); background: rgba(79,209,197,0.05); }
.t-rose { color: var(--rose); border-color: rgba(252,129,129,0.25); background: rgba(252,129,129,0.05); }

/* ═══════════ ACCORDION ═══════════ */
.acc {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 8px; margin: 10px 0;
  overflow: hidden;
}
.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer; transition: background 0.15s; user-select: none;
}
.acc-head:hover { background: rgba(30,45,66,0.3); }
.acc-head .lbl { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.acc-head .arr {
  font-size: 11px; color: var(--text-3);
  transition: transform 0.25s var(--ease);
}
.acc.open .acc-head .arr { transform: rotate(90deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.acc.open .acc-body { max-height: 1200px; }
.acc-inner { padding: 0 16px 16px; }
.acc-inner p { font-size: 13.5px; }

/* ═══════════ ARCHITECTURE DIAGRAM ═══════════ */
.arch {
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px; margin: 20px 0;
  position: relative; overflow: hidden;
}
.arch::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(99,179,237,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(183,148,244,0.03) 0%, transparent 50%);
  pointer-events: none;
}
.arch-row {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 10px 0; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.arch-n {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 18px;
  font-family: var(--mono); font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center; min-width: 110px;
  position: relative;
}
.arch-n:hover, .arch-n.hl {
  border-color: var(--clay);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(217,119,87,0.1);
}
.arch-n.hl { background: rgba(217,119,87,0.08); }
.arch-n .nt { font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.arch-n .ns { font-size: 11px; color: var(--text-3); }
.arch-n.core { border-color: var(--clay); border-width: 2px; }
.arch-n.core .nt { color: var(--clay); }
.arch-arr {
  color: var(--text-3); font-size: 16px; text-align: center;
  animation: arrPulse 2.5s ease-in-out infinite;
  margin: 2px 0; position: relative; z-index: 1;
}
@keyframes arrPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.8; } }

.detail {
  display: none; background: var(--surface);
  border: 1px solid var(--clay); border-radius: 10px;
  padding: 18px; margin: 14px 0;
  box-shadow: 0 0 20px rgba(217,119,87,0.08);
  animation: modIn 0.25s var(--ease);
}
.detail.vis { display: block; }
.detail-h {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--clay); margin-bottom: 8px;
}
.detail p { font-size: 13.5px; margin-bottom: 8px; }

/* ═══════════ FLOW STEPPER ═══════════ */
.flow-box {
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px; margin: 20px 0;
}
.flow-ctrls {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.fbtn {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  padding: 7px 16px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface);
  color: var(--text-1); cursor: pointer;
  transition: all 0.2s;
}
.fbtn:hover { border-color: var(--clay); color: var(--clay); }
.fbtn.act { background: var(--clay); color: var(--void); border-color: var(--clay); }
.flow-ind { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-left: auto; }

.fstep {
  display: flex; gap: 18px;
  padding: 14px 0;
  opacity: 0.2;
  transition: all 0.45s var(--ease);
  position: relative;
}
.fstep.on { opacity: 1; }
.fstep.done { opacity: 0.5; }
.fstep::before {
  content: '';
  position: absolute; left: 16px; top: 48px; bottom: -14px;
  width: 2px; background: var(--border);
}
.fstep:last-child::before { display: none; }
.fstep.done::before { background: var(--green); }
.fstep.on::before { background: linear-gradient(180deg, var(--clay), var(--border)); }
.fs-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--text-3); flex-shrink: 0;
  transition: all 0.25s ease;
}
.fstep.on .fs-num {
  background: var(--clay); border-color: var(--clay);
  color: var(--void); box-shadow: 0 0 14px rgba(217,119,87,0.3);
}
.fstep.done .fs-num {
  background: var(--green); border-color: var(--green); color: var(--void);
}
.fs-body { flex: 1; }
.fs-title { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
.fs-desc { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.fs-code {
  margin-top: 8px;
  background: var(--void); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  overflow-x: auto; max-height: 0; opacity: 0;
  transition: all 0.35s var(--ease);
}
.fstep.on .fs-code { max-height: 350px; opacity: 1; }

/* ═══════════ TOOL GRID ═══════════ */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; margin: 14px 0; }
.tchip {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 8px; padding: 13px 14px;
  cursor: pointer; transition: all 0.2s ease;
}
.tchip:hover { border-color: var(--clay); transform: translateY(-1px); }
.tchip .tn { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--text-1); margin-bottom: 3px; }
.tchip .td { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.badge {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  padding: 2px 7px; border-radius: 3px; margin-top: 5px;
}
.b-file { background: rgba(99,179,237,0.1); color: var(--blue); }
.b-shell { background: rgba(104,211,145,0.1); color: var(--green); }
.b-agent { background: rgba(183,148,244,0.1); color: var(--purple); }
.b-web { background: rgba(246,173,85,0.1); color: var(--amber); }
.b-mcp { background: rgba(252,129,129,0.1); color: var(--rose); }
.b-ui { background: rgba(79,209,197,0.1); color: var(--cyan); }

/* ═══════════ PERMISSION CARDS ═══════════ */
.perm-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.perm-i {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: all 0.25s;
}
.perm-i:hover { border-color: var(--border-bright); }
.perm-i.sel { border-color: var(--blue); box-shadow: 0 0 16px rgba(217,119,87,0.08); }
.perm-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.perm-info { flex: 1; }
.perm-name { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.perm-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.perm-detail {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s var(--ease), margin 0.35s;
  margin-top: 0;
}
.perm-i.sel .perm-detail { max-height: 300px; margin-top: 10px; }
.perm-detail-inner {
  background: rgba(99,179,237,0.04);
  border-radius: 6px; padding: 12px 14px;
  font-size: 12.5px; color: var(--text-2);
  border-left: 2px solid var(--clay);
}

/* ═══════════ TOKEN VIZ ═══════════ */
.tok-viz {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: 10px; padding: 22px; margin: 18px 0;
}
.tok-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.tok-top span { font-family: var(--mono); font-size: 12px; }
.tok-bar {
  height: 26px; background: var(--void);
  border-radius: 5px; overflow: hidden;
  display: flex; border: 1px solid var(--border);
  margin-bottom: 4px;
}
.tok-seg {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  color: var(--void); overflow: hidden; white-space: nowrap;
  transition: width 0.8s var(--ease);
}
.tok-warn {
  font-family: var(--mono); font-size: 11px;
  color: var(--rose); text-align: right;
  height: 16px; margin-bottom: 6px;
}
.tok-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.tok-legend-i { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.tok-dot { width: 8px; height: 8px; border-radius: 2px; }

/* ═══════════ AGENT TREE ═══════════ */
.atree {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px; margin: 20px 0;
}
.anode {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; margin: 7px 0;
  transition: all 0.25s;
}
.anode:hover { border-color: var(--border-bright); }
.anode.parent { border-color: var(--amber); border-width: 2px; }
.anode-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.anode-head .icon { font-size: 18px; }
.anode-name { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.anode-desc { font-size: 11.5px; color: var(--text-3); }
.achildren { margin-left: 32px; padding-left: 18px; border-left: 2px dashed var(--border); }

/* ═══════════ MCP PIPELINE ═══════════ */
.mcp-pipe {
  display: flex; align-items: center; gap: 0;
  margin: 18px 0; overflow-x: auto; padding-bottom: 6px;
}
.mcp-stage {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px;
  text-align: center; min-width: 128px;
  transition: all 0.25s; cursor: pointer;
}
.mcp-stage:hover { border-color: var(--purple); box-shadow: 0 0 12px rgba(183,148,244,0.08); }
.mcp-stage .ms-icon { font-size: 18px; margin-bottom: 3px; }
.mcp-stage .ms-title { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text-1); }
.mcp-stage .ms-sub { font-size: 10.5px; color: var(--text-3); }
.mcp-conn { font-family: var(--mono); color: var(--text-3); font-size: 14px; padding: 0 3px; flex-shrink: 0; }

/* ═══════════ TABLE ═══════════ */
.dtable { width: 100%; border-collapse: collapse; margin: 16px 0; }
.dtable th {
  text-align: left; padding: 9px 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--raised); border-bottom: 1px solid var(--border);
}
.dtable td {
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  color: var(--text-2); font-size: 13.5px;
}
.dtable tr:hover td { background: rgba(30,45,66,0.25); }

/* ═══════════ NAV BUTTONS ═══════════ */
.mod-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border);
}
.nbtn {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12.5px;
  padding: 9px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-2); cursor: pointer;
  transition: all 0.2s; text-decoration: none;
}
.nbtn:hover { border-color: var(--clay); color: var(--clay); transform: translateY(-1px); }

/* ═══════════ MOBILE TOGGLE ═══════════ */
.menu-btn {
  display: none; position: fixed; top: 10px; left: 10px; z-index: 400;
  width: 36px; height: 36px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 7px;
  cursor: pointer; align-items: center; justify-content: center;
  color: var(--text-1); font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  /* Sidebar */
  .side { transform: translateX(-100%); width: 260px; }
  .side.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.15); z-index: 300; }
  .main { margin-left: 0; width: 100%; overflow-x: hidden; }
  .menu-btn { display: flex; }

  /* Module layout */
  .mod { padding: 20px 16px 72px; max-width: 100%; width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .mod-title { font-size: 24px; line-height: 1.3; }
  .mod-desc { font-size: 14px; }

  /* Module tags - prevent overflow */
  .mod-tags-row { gap: 6px; flex-wrap: wrap; }
  .mod-tag { font-size: 9px; padding: 2px 8px; letter-spacing: -0.3px; max-width: calc(100vw - 120px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .diff-tag { font-size: 9px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; }

  /* Force single-column grids for inline-styled grids */
  .card [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Offset mod-head for hamburger menu */
  .mod-head { padding-top: 40px; }

  /* Typography */
  .h2 { font-size: 18px; margin: 28px 0 12px; }
  .h2-icon { width: 28px; height: 28px; font-size: 13px; }
  .h3 { font-size: 15px; }
  p { font-size: 14px; line-height: 1.7; }

  /* Tables - horizontal scroll */
  .dtable { font-size: 12px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dtable th, .dtable td { padding: 6px 8px; white-space: nowrap; }

  /* Architecture diagram */
  .arch-row { flex-direction: column; gap: 8px; }
  .arch-n { min-width: 100%; }

  /* Tool grid */
  .tgrid { grid-template-columns: 1fr; }

  /* Stats */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-n { font-size: 24px; }
  .stat-l { font-size: 11px; }

  /* MCP pipeline */
  .mcp-pipe { flex-direction: column; gap: 8px; }
  .mcp-conn { display: none; }
  .mcp-stage { min-width: 100%; }

  /* Code blocks */
  .codeblock { max-width: 100%; overflow: hidden; }
  .codeblock pre { font-size: 11px; padding: 12px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .cb-bar { padding: 6px 12px; }
  .cb-title { font-size: 10px; }

  /* Prevent all wide content from overflowing */
  .arch-row, .fstep, .card, .flow-box, .tok-viz, .atree, .perm-list { max-width: 100%; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
  pre, code { word-break: break-word; }

  /* Fix inline-style width elements */
  [style*="width:"] { max-width: 100% !important; }
  .terminal-demo, .term-body { max-width: 100%; overflow-x: auto; }

  /* Cards */
  .card { padding: 16px; }
  .card h3 { font-size: 14px; }

  /* Flow stepper */
  .flow-box { padding: 16px 14px; }
  .fstep { gap: 10px; padding: 10px 12px; }
  .fs-icon { width: 28px; height: 28px; font-size: 12px; }
  .fs-title { font-size: 12.5px; }
  .fs-desc { font-size: 12px; }

  /* Quiz */
  .quiz { padding: 16px 14px; }
  .quiz-header h3 { font-size: 13px; }
  .quiz-header h3::before { font-size: 14px; }
  .quiz-q { padding: 16px 14px; }
  .quiz-title { font-size: 13.5px; line-height: 1.6; }
  .quiz-opt { padding: 10px 12px; font-size: 12.5px; }
  .quiz-fb { font-size: 12px; padding: 8px 12px; }
  .quiz-nav-btn { width: 28px; height: 28px; font-size: 13px; }
  .quiz-counter { font-size: 10px; }
  .quiz-score { font-size: 14px; padding: 12px 16px; }

  /* Permissions */
  .perm-i { padding: 12px 14px; gap: 8px; }
  .perm-i .pi-icon { width: 28px; height: 28px; font-size: 13px; }
  .perm-i .pi-title { font-size: 13px; }

  /* Token viz */
  .tok-viz { padding: 14px; }

  /* Agent tree */
  .atree { padding: 14px; }
  .achildren { margin-left: 12px; padding-left: 10px; }

  /* Summary grid */
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .summary-card { padding: 12px; }
  .summary-card .sc-title { font-size: 12px; }
  .summary-card .sc-desc { font-size: 10.5px; }

  /* Module navigation */
  .mod-nav { flex-direction: column; gap: 10px; }
  .nbtn { width: 100%; justify-content: center; font-size: 13px; padding: 10px 16px; }

  /* Terminal demo */
  .term-body { padding: 10px 14px; font-size: 11.5px; min-height: 140px; }
  .term-bar .title { font-size: 10px; }

  /* Tags */
  .tags { gap: 6px; flex-wrap: wrap; }
  .tag { font-size: 11px; padding: 3px 8px; }

  /* Mascot */
  .claude-mascot { bottom: 12px; right: 12px; padding: 6px; }
  .claude-mascot img { width: 30px; height: 24px; }
  .mascot-bubble { font-size: 11px; white-space: normal; max-width: 200px; right: -10px; }

  /* Boot screen */
  .boot-title { font-size: 20px; }
  .boot-subtitle { font-size: 12px; }
  .boot-lines { font-size: 10px; width: 280px; }
  .boot-bar { width: 280px; }
  .boot-logo { width: 48px; height: 48px; }

  /* Sidebar footer */
  .side-author { font-size: 10px; }
  .author-avatar { width: 30px; height: 30px; }
  .author-info strong { font-size: 11px; }
  .author-bio { font-size: 9px; }

  /* Inline diagram */
  .inline-diagram { font-size: 11px; overflow-x: auto; }

  /* Accordion */
  .acc-head { font-size: 13px; padding: 12px 14px; }
  .acc-body { padding: 12px 14px; font-size: 13px; }
}

/* Extra small phones */
@media (max-width: 380px) {
  .mod { padding: 14px 12px 60px; }
  .mod-title { font-size: 21px; }
  .mod-tags-row { gap: 4px; }
  .mod-tag { font-size: 8px; padding: 2px 6px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-n { font-size: 20px; }
  .tags { gap: 4px; }
  .tag { font-size: 10px; padding: 2px 6px; }
  .h2 { font-size: 17px; }
  .card { padding: 14px; }
  .quiz { padding: 14px 12px; }
  .quiz-q { padding: 14px 12px; }
  .quiz-opt { font-size: 12px; padding: 8px 10px; }
  .summary-grid { grid-template-columns: 1fr; }
  .mcp-stage { font-size: 12px; }
  .boot-lines { width: 240px; font-size: 9px; }
  .boot-bar { width: 240px; }
}

/* ═══════════ MISC ═══════════ */
.sep { height: 1px; background: var(--border); margin: 32px 0; }
.inline-diagram {
  font-family: var(--mono); font-size: 12.5px;
  line-height: 1.5; color: var(--text-2);
  padding: 16px 0;
}
.glow-text {
  text-shadow: 0 0 12px currentColor;
}
.summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin: 18px 0;
}
.summary-card {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; text-align: center;
  border-top: 3px solid;
  transition: transform 0.25s;
}
.summary-card:hover { transform: translateY(-2px); }
.summary-card .sc-icon { font-size: 22px; margin-bottom: 8px; }
.summary-card .sc-title { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.summary-card .sc-desc { font-size: 11.5px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }

/* Terminal demo */
.terminal-demo {
  background: var(--void); border: 1px solid var(--border);
  border-radius: 10px; margin: 18px 0; overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--raised);
  border-bottom: 1px solid var(--border);
}
.term-bar .dots { display: flex; gap: 5px; }
.term-bar .dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.term-bar .dots i:nth-child(1) { background: #ff5f57; }
.term-bar .dots i:nth-child(2) { background: #febc2e; }
.term-bar .dots i:nth-child(3) { background: #28c840; }
.term-bar .title { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-left: auto; }
.term-body {
  padding: 14px 18px; font-family: var(--mono); font-size: 13px;
  line-height: 1.7; min-height: 180px;
}
.term-body .prompt { color: var(--green); }
.term-body .out { color: var(--text-2); }
.term-body .dim { color: var(--text-3); }
.term-body .hi { color: var(--blue); }
.term-body .warn { color: var(--amber); }

/* Animate terminal typing */
.term-line {
  opacity: 0; transform: translateY(4px);
}
.term-line.vis {
  animation: lineIn 0.2s var(--ease) forwards;
}

/* ═══════════ AUTHOR PROMO CARD ═══════════ */
.author-promo-card {
  position: relative;
  margin: 40px 0 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--raised);
}
.apc-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(217,119,87,0.08) 0%, rgba(183,148,244,0.06) 50%, rgba(104,211,145,0.06) 100%);
  pointer-events: none;
}
.apc-content {
  position: relative;
  display: flex; align-items: center; gap: 24px;
  padding: 28px 32px 20px;
}
.apc-left {
  position: relative; flex-shrink: 0;
}
.apc-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--clay);
  box-shadow: 0 0 0 4px rgba(217,119,87,0.15);
  display: block;
}
.apc-avatar-fallback {
  display: none;
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--clay);
  box-shadow: 0 0 0 4px rgba(217,119,87,0.15);
  background: linear-gradient(135deg, var(--clay), var(--sand));
  align-items: center; justify-content: center;
  font-family: var(--display); font-size: 28px; font-weight: 700;
  color: #fff;
}
.apc-dot {
  position: absolute; bottom: 3px; right: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--raised);
  box-shadow: 0 0 6px rgba(104,211,145,0.6);
}
.apc-right {
  flex: 1; min-width: 0;
}
.apc-name {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  color: var(--text-1); margin-bottom: 8px;
}
.apc-bio {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 10px;
}
.apc-bio span {
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
.apc-stats {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  margin-bottom: 14px;
}
.apc-sep { margin: 0 6px; opacity: 0.4; }
.apc-links {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.apc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.apc-btn-red {
  background: #ff2741; color: #fff;
  box-shadow: 0 2px 12px rgba(255,39,65,0.3);
}
.apc-btn-red:hover { background: #e01f34; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,39,65,0.4); }
.apc-btn-dark {
  background: var(--surface); color: var(--text-1);
  border: 1px solid var(--border);
}
.apc-btn-dark:hover { border-color: var(--clay); color: var(--clay); transform: translateY(-1px); }
.apc-footer {
  position: relative;
  padding: 12px 32px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3); text-align: center;
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .apc-footer { background: rgba(0,0,0,0.02); }

/* Mobile */
@media (max-width: 600px) {
  .apc-content { padding: 20px 18px 16px; gap: 16px; }
  .apc-avatar { width: 56px; height: 56px; }
  .apc-name { font-size: 17px; }
  .apc-bio span { font-size: 12px; }
  .apc-btn { padding: 7px 13px; font-size: 12px; }
  .apc-footer { padding: 10px 18px; font-size: 11px; }
}

/* ═══════════ QUIZ COMPONENT — CARD CAROUSEL ═══════════ */
.quiz {
  background: var(--deep); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 28px; margin: 28px 0;
  position: relative; overflow: hidden;
}
.quiz::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--clay), var(--green));
}
.quiz-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.quiz-header h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: var(--text-1); margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.quiz-header h3::before { content: '📝'; font-size: 16px; }
.quiz-nav {
  display: flex; align-items: center; gap: 6px;
}
.quiz-nav-btn {
  width: 30px; height: 30px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-2);
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.quiz-nav-btn:hover { border-color: var(--clay); color: var(--clay); }
.quiz-nav-btn:disabled { opacity: 0.3; cursor: default; }
.quiz-counter {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  min-width: 40px; text-align: center;
}
.quiz-reset {
  font-family: var(--mono); font-size: 10px;
  padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--surface);
  color: var(--text-3); cursor: pointer;
  transition: all 0.2s; margin-left: 8px;
}
.quiz-reset:hover { border-color: var(--amber); color: var(--amber); }

/* Card carousel viewport */
.quiz-viewport {
  overflow: hidden; border-radius: 10px;
}
.quiz-q {
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 10px; padding: 22px 24px;
  display: none; /* hidden by default, JS shows current */
  animation: quizCardIn 0.3s var(--ease);
}
.quiz-q.active { display: block; }
@keyframes quizCardIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.quiz-q.answered { border-color: var(--border-bright); }
.quiz-title {
  font-size: 15px; font-weight: 600; color: var(--text-1);
  margin-bottom: 16px; line-height: 1.65;
}
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.quiz-opt {
  padding: 12px 16px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 13.5px; color: var(--text-2);
  cursor: pointer; transition: all 0.2s;
  user-select: none; line-height: 1.5;
  position: relative; overflow: hidden;
}
.quiz-opt:hover:not(.locked) {
  border-color: var(--clay); background: rgba(217,119,87,0.04);
  color: var(--text-1); transform: translateX(3px);
}
.quiz-opt.correct {
  border-color: var(--green); background: rgba(104,211,145,0.1);
  color: var(--green); cursor: default; font-weight: 500;
}
.quiz-opt.wrong {
  border-color: var(--rose); background: rgba(252,129,129,0.06);
  color: var(--rose); cursor: default; opacity: 0.7;
}
.quiz-opt.locked { cursor: default; opacity: 0.4; }
.quiz-opt.correct::after { content: '  ✓'; font-weight: 700; }
.quiz-opt.wrong::after { content: '  ✗'; font-weight: 700; }
.quiz-fb {
  margin-top: 12px; padding: 10px 14px; font-size: 13px;
  color: var(--text-2); line-height: 1.7;
  background: rgba(104,211,145,0.04);
  border-left: 2px solid var(--green);
  border-radius: 0 6px 6px 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.35s var(--ease), opacity 0.3s, padding 0.3s;
  padding: 0 14px;
}
.quiz-fb.show { max-height: 200px; opacity: 1; padding: 10px 14px; }

/* Progress dots */
.quiz-dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 16px;
}
.quiz-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: all 0.25s;
}
.quiz-dot.active { background: var(--clay); transform: scale(1.3); }
.quiz-dot.correct { background: var(--green); }
.quiz-dot.wrong { background: var(--rose); }

.quiz-score {
  margin-top: 16px; padding: 16px 20px;
  background: linear-gradient(135deg, rgba(217,119,87,0.08), rgba(126,201,138,0.08));
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--mono); font-size: 16px; font-weight: 600;
  color: var(--text-1); text-align: center;
  display: none;
}
.quiz-score.show { display: block; animation: modIn 0.3s var(--ease); }

/* ═══════════ DIFFICULTY TAGS ═══════════ */
.mod-tags-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.mod-tags-row .mod-tag { margin-bottom: 0; }
.diff-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 3px;
  letter-spacing: 0.3px;
}
.diff-beginner { background: rgba(104,211,145,0.12); color: var(--green); }
.diff-intermediate { background: rgba(246,173,85,0.12); color: var(--amber); }
.diff-advanced { background: rgba(252,129,129,0.12); color: var(--rose); }

/* ═══════════ CLAUDE MASCOT ═══════════ */
.claude-mascot {
  position: fixed;
  bottom: 20px; right: 24px;
  z-index: 50;
  opacity: 0.7;
  transition: all 0.3s var(--ease);
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 2px 12px rgba(217,119,87,0.3));
  animation: mascotFloat 4s ease-in-out infinite;
  padding: 8px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.claude-mascot:hover {
  opacity: 1;
  transform: scale(1.2);
}
.claude-mascot .mascot-bubble {
  position: absolute;
  bottom: 100%; right: 0;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--text-2);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.25s var(--ease);
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 8px;
}
.claude-mascot .mascot-bubble::after {
  content: '';
  position: absolute;
  top: 100%; right: 16px;
  border: 6px solid transparent;
  border-top-color: var(--border);
}
.claude-mascot:hover .mascot-bubble {
  opacity: 1;
  transform: translateY(0);
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ═══════════ ENHANCED HOVER EFFECTS ═══════════ */
.card {
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(217,119,87,0.04) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::after { opacity: 1; }

/* Sidebar active glow line */
.nav-i.on::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--clay), var(--sand));
  box-shadow: 0 0 8px var(--clay);
}
.nav-i { position: relative; }

/* Code block shimmer on hover */
.codeblock::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(217,119,87,0.03), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.codeblock { position: relative; overflow: hidden; }
.codeblock:hover::after { left: 100%; }

/* Stat card number pulse on hover */
.stat:hover .stat-n {
  animation: numPop 0.4s var(--ease);
}
@keyframes numPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* h2 icon float on scroll */
.h2-icon {
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.h2:hover .h2-icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(217,119,87,0.15);
}

/* Module title gradient animation */
.mod-title em {
  background-size: 200% auto;
  animation: titleGrad 4s ease-in-out infinite;
}
@keyframes titleGrad {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Quiz option ripple effect */
.quiz-opt {
  position: relative; overflow: hidden;
}
.quiz-opt::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(217,119,87,0.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
  pointer-events: none;
}
.quiz-opt:hover:not(.locked)::before {
  width: 300px; height: 300px;
}

/* Navigation button shine */
.nbtn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: left 0.4s;
  pointer-events: none;
}
.nbtn { position: relative; overflow: hidden; }
.nbtn:hover::after { left: 150%; }

/* (mascot replaces the old > prompt decoration) */