/* PYTHON//30 app styles — developer console meets game command center.
   Visual system: "mission control". A fixed atmospheric backdrop (aurora
   glows + blueprint grid + grain) sits behind translucent gradient panels;
   amber/teal light is used sparingly, as instrument glow. Every effect is
   driven by theme effect-tokens (themes.css), so high-contrast disarms the
   entire decorative layer automatically. */

:root {
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 160ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }
[data-theme="clean-light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- atmospheric backdrop ----------
   Layer 1 (::before): two aurora glows + blueprint grid + vignette.
   Layer 2 (::after): film grain (inline SVG turbulence).
   Both fixed, non-interactive, behind everything; tokens zero them out
   in high-contrast. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, var(--bg-fx-1), transparent 62%),
    radial-gradient(1000px 640px at 105% 112%, var(--bg-fx-2), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--mono); }

h1 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 32px;
  line-height: 1.15;
}
h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* themed slim scrollbars (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }

/* ---------- top nav ---------- */
.topnav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topnav::after {
  /* instrument hairline under the nav */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 4%, var(--glow-accent) 28%, var(--glow-accent-2) 72%, transparent 96%);
}
/* Brand lockup. Two artwork variants ship: cream-on-transparent for the
   dark themes, ink-on-transparent for clean-light. Only one is ever
   displayed, so the header stays legible on every surface. */
.topnav .brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.topnav .brand:hover { text-decoration: none; }
.topnav .brand .brand-lockup {
  display: none;
  height: 34px;
  width: auto;
  /* @3x source: rendered at a third of its pixel size, so it stays sharp
     on retina without a separate srcset */
  image-rendering: auto;
}
.topnav .brand .brand-on-dark { display: block; }
.topnav .brand .brand-on-light { display: none; }
[data-theme="clean-light"] .topnav .brand .brand-on-dark { display: none; }
[data-theme="clean-light"] .topnav .brand .brand-on-light { display: block; }
@media (max-width: 700px) { .topnav .brand .brand-lockup { height: 28px; } }
.topnav nav { display: flex; gap: 4px; }
.topnav nav a {
  position: relative;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--transition), background var(--transition);
}
.topnav nav a:hover { color: var(--text); background: color-mix(in srgb, var(--surface-2) 80%, transparent); text-decoration: none; }
.topnav nav a.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.topnav nav a.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo));
  box-shadow: 0 0 8px var(--glow-accent);
}
.topnav .nav-xp {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-radius: 999px;
  padding: 4px 14px;
}
.topnav .nav-xp:empty { border-color: transparent; background: transparent; }
.topnav .nav-xp .rank { color: var(--accent-2); }

/* ---------- layout ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: 30px 22px 60px; }
.page.wide { max-width: 1240px; }

/* gentle entrance: top-level blocks rise in with a soft stagger.
   Transforms only; globally zeroed under reduced motion. */
.page > * { animation: rise 0.5s var(--ease-out) both; }
.page > *:nth-child(2) { animation-delay: 40ms; }
.page > *:nth-child(3) { animation-delay: 80ms; }
.page > *:nth-child(4) { animation-delay: 120ms; }
.page > *:nth-child(5) { animation-delay: 160ms; }
.page > *:nth-child(n+6) { animation-delay: 200ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- cards ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.card::before {
  /* top-edge light catch */
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
}
.card h2, .card h3 { margin-top: 0; }
.card.accent {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--panel-a), var(--panel-b)) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 70%, var(--border)) 0%,
      color-mix(in srgb, var(--border) 60%, transparent) 38%,
      color-mix(in srgb, var(--border) 60%, transparent) 62%,
      color-mix(in srgb, var(--accent-2) 55%, var(--border)) 100%) border-box;
  box-shadow: var(--shadow-1), 0 0 34px -10px var(--glow-accent);
}
.card.accent::before { background: linear-gradient(90deg, transparent, var(--glow-accent), transparent); }

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .grid.two { grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    transform var(--transition), box-shadow var(--transition);
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn.primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
  border-color: color-mix(in srgb, var(--accent-lo) 80%, var(--border));
  color: var(--accent-contrast);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 16px -6px var(--glow-accent);
}
.btn.primary:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 22px -6px var(--glow-accent); }
.btn.teal {
  background: linear-gradient(180deg, var(--teal-hi), var(--teal-lo));
  border-color: color-mix(in srgb, var(--teal-lo) 80%, var(--border));
  color: var(--accent-contrast);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 16px -6px var(--glow-accent-2);
}
.btn.teal:hover { filter: brightness(1.07); }
.btn.primary::after, .btn.teal::after {
  /* light sweep on hover */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0;
  pointer-events: none;
}
.btn.primary:hover::after, .btn.teal:hover::after {
  animation: sheen 0.7s var(--ease-out);
}
@keyframes sheen {
  from { left: -60%; opacity: 1; }
  to { left: 120%; opacity: 0; }
}
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn.small { padding: 4px 10px; font-size: 13px; }

/* ---------- terminal ---------- */
.terminal {
  background:
    repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px),
    var(--terminal-bg, #0a0e14);
  background-attachment: local, scroll;
  color: var(--terminal-text, var(--text));
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--terminal-bg, #0a0e14));
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 13.5px;
  padding: 12px 14px;
  min-height: 64px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 6px var(--term-glow);
  box-shadow: inset 0 1px 12px rgba(0, 0, 0, 0.35);
}
[data-theme="high-contrast"] .terminal { box-shadow: none; }
.terminal .t-stdout { color: var(--terminal-text, var(--text)); }
.terminal .t-stderr, .terminal .t-trace { color: var(--danger); }
.terminal .t-status { color: var(--muted); margin-bottom: 6px; }
.terminal .t-status.ok { color: var(--success); }
.terminal .t-status.error { color: var(--danger); }
.terminal .t-status.timeout { color: var(--accent); }
.terminal .t-status.blocked { color: var(--accent); }
.terminal:empty::before {
  content: "// output appears here ▍";
  color: var(--muted);
  opacity: 0.6;
  animation: term-blink 1.2s steps(1) infinite;
}
@keyframes term-blink { 50% { opacity: 0.25; } }

/* ---------- tests panel ---------- */
.tests-panel { display: flex; flex-direction: column; gap: 8px; }
.test-case {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface-2);
  font-size: 13.5px;
}
.test-case.pass {
  border-left-color: var(--success);
  background: linear-gradient(90deg, color-mix(in srgb, var(--success) 8%, var(--surface-2)), var(--surface-2) 40%);
}
.test-case.fail {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 8%, var(--surface-2)), var(--surface-2) 40%);
}
.test-case .tc-name { font-weight: 600; }
.test-case .tc-verdict { float: right; font-family: var(--mono); }
.test-case.pass .tc-verdict { color: var(--success); }
.test-case.fail .tc-verdict { color: var(--danger); }
.test-case .tc-detail { margin-top: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.test-case .tc-detail .exp { color: var(--accent-2); }
.test-case .tc-detail .act { color: var(--danger); }

.ast-feedback {
  border-left: 3px solid var(--info);
  background: var(--surface-2);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.ast-feedback.warning { border-left-color: var(--accent); }

/* ---------- hint drawer ---------- */
.hint-drawer {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 10px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}
.hint-drawer .hint-item {
  border-left: 3px solid var(--accent);
  padding: 6px 10px;
  margin: 8px 0;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.hint-drawer .hint-level { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }

/* ---------- lesson blocks ---------- */
.lesson-block {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  box-shadow: var(--shadow-1);
  padding: 16px 20px;
  margin-bottom: 14px;
}
.lesson-block.done {
  border-color: color-mix(in srgb, var(--success) 60%, var(--border));
  box-shadow: var(--shadow-1), 0 0 22px -12px var(--glow-success);
}
.lesson-block .block-type {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-2);
  margin-bottom: 4px;
}
.lesson-block .block-check { float: right; color: var(--success); font-weight: 700; }
.lesson-block .code-run-row { display: flex; gap: 10px; margin-top: 10px; align-items: center; }
.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.choice {
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.choice:hover { border-color: var(--accent-2); transform: translateX(2px); }
.choice.correct { border-color: var(--success); background: rgba(76, 195, 138, 0.12); }
.choice.wrong { border-color: var(--danger); background: rgba(229, 96, 79, 0.10); }
.choice:disabled { cursor: default; }
.block-explanation {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius-sm);
}

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.tabs button:hover { color: var(--text); }
.tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 14px var(--glow-accent);
}
.tabs button .tab-state { margin-left: 6px; font-family: var(--mono); font-size: 11px; }
.tabs button .tab-state.done { color: var(--success); }

/* ---------- objectives ---------- */
.objectives { list-style: none; padding: 0; margin: 0; }
.objectives li {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.objectives li .obj-box { font-family: var(--mono); color: var(--muted); }
.objectives li.done { color: var(--muted); text-decoration: line-through; }
.objectives li.done .obj-box { color: var(--success); text-shadow: 0 0 10px var(--glow-success); }

/* ---------- map ---------- */
.map-wrap { overflow-x: auto; padding: 10px 0; }
.map-node circle { transition: r var(--transition), fill var(--transition), filter var(--transition); }
.map-node:hover circle.main { stroke-width: 3; }
.map-node .node-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.map-node .node-title { font-family: var(--sans); font-size: 10.5px; fill: var(--text); }
.map-node.locked { cursor: not-allowed; opacity: 0.75; }
.map-node.current { cursor: pointer; }
.map-node.completed { cursor: pointer; }
.map-node.completed circle.main { filter: drop-shadow(0 0 5px var(--glow-success)); }
.map-node.current circle.main { filter: drop-shadow(0 0 8px var(--glow-accent)); }
.map-node.completed:hover circle.main,
.map-node.current:hover circle.main { filter: drop-shadow(0 0 12px var(--glow-accent)); }
.map-node.current circle.pulse {
  animation: nodepulse 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
/* scale-based so it breathes outward from each node's natural radius
   (the finale node is larger than regular nodes) */
@keyframes nodepulse {
  0%, 100% { stroke-opacity: 0.9; transform: scale(1); }
  50% { stroke-opacity: 0.25; transform: scale(1.28); }
}
[data-reduced-motion="true"] .map-node.current circle.pulse { animation: none; }
.map-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 8px; }
.map-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.map-legend .swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid var(--border); }

/* ---------- dashboard bits ---------- */
.ring-wrap { display: flex; align-items: center; gap: 18px; }
.ring { transform: rotate(-90deg); }
.ring .ring-bg { stroke: var(--surface-2); }
.ring .ring-fg {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 400ms ease;
  filter: drop-shadow(0 0 6px var(--glow-accent));
}
.ring-text { font-family: var(--mono); }
.streak-flame { font-size: 22px; display: inline-block; animation: flame-sway 2.6s ease-in-out infinite; }
@keyframes flame-sway {
  0%, 100% { transform: none; }
  30% { transform: scale(1.06) rotate(-2deg); }
  60% { transform: scale(0.97) rotate(2deg); }
}
.streak-num {
  font-family: var(--mono);
  font-size: 26px;
  color: var(--accent);
  text-shadow: 0 0 16px var(--glow-accent);
}
.streak-frozen-note { color: var(--info); font-size: 12.5px; }
.mastery-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  margin: 2px;
  background: var(--surface-2);
}
.mastery-pill.struggling { border-color: var(--danger); color: var(--danger); }
.mastery-pill.mastered { border-color: var(--success); color: var(--success); }
.achievement-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.achievement-row:last-child { border-bottom: none; }
.achievement-row .a-icon { font-size: 22px; }
.achievement-row .a-name { font-weight: 600; }
.achievement-row .a-desc { color: var(--muted); font-size: 13px; }
.achievement-row .a-xp { margin-left: auto; font-family: var(--mono); color: var(--accent); font-size: 13px; }

/* ---------- onboarding ---------- */
.onboard-hero { text-align: center; padding: 30px 0 10px; }
.onboard-hero h1 {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 36px;
  margin-bottom: 6px;
  letter-spacing: 0;
  text-shadow: 0 0 30px var(--glow-accent);
}
.onboard-hero p { color: var(--muted); max-width: 560px; margin: 0 auto; }
.onboard-step { max-width: 620px; margin: 26px auto; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input[type="text"], .field select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--sans);
  transition: border-color var(--transition);
}
.field input:hover, .field select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.field input:focus, .field select:focus { outline: none; box-shadow: var(--focus-ring); }
.celebration {
  text-align: center;
  padding: 26px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: radial-gradient(ellipse at center, rgba(242, 163, 60, 0.12), transparent 70%);
  box-shadow: 0 0 44px -12px var(--glow-accent);
}
.celebration .big { font-size: 40px; }
.confetti-burst { font-size: 26px; letter-spacing: 8px; animation: pop 600ms ease; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
[data-reduced-motion="true"] .confetti-burst { animation: none; }

/* ---------- toasts ---------- */
#toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}
.toast {
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  min-width: 260px;
  max-width: 360px;
  box-shadow: var(--shadow-2);
  animation: toast-in 320ms var(--ease-out);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.toast.achievement { border-left-color: var(--accent-2); }
.toast.levelup { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast .t-icon { font-size: 20px; line-height: 1.2; }
.toast .t-text { flex: 1; min-width: 0; }
.toast .t-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: var(--radius-sm);
  align-self: flex-start;
}
.toast .t-close:hover { color: var(--text); }
.toast .t-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.toast .t-title { font-weight: 700; font-size: 14px; }
.toast .t-body { color: var(--muted); font-size: 13px; margin-top: 2px; }
@keyframes toast-in {
  from { transform: translateX(40px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
[data-reduced-motion="true"] .toast { animation: none; }

/* ---------- editor ---------- */
.editor-shell {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.editor-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow-1), 0 0 18px -8px var(--glow-accent);
}
.CodeMirror { font-family: var(--mono) !important; font-size: 13.5px; height: auto; min-height: 120px; }
.editor-toolbar { display: flex; gap: 8px; align-items: center; padding: 8px 0; flex-wrap: wrap; }
.editor-toolbar .spacer { flex: 1; }
.kbd-hint { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ---------- misc ---------- */
.muted { color: var(--muted); }
.story-box {
  position: relative;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface) 45%);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-1);
}
.story-box p:first-child { margin-top: 0; }
.story-box p:last-child { margin-bottom: 0; }
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.badge.xp { color: var(--accent); border-color: var(--accent); }
.exercise-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  box-shadow: var(--shadow-1);
}
.exercise-card.passed {
  border-color: color-mix(in srgb, var(--success) 60%, var(--border));
  box-shadow: var(--shadow-1), 0 0 22px -12px var(--glow-success);
}
.exercise-card h3 { margin-top: 0; }
.exercise-card h3 .state-mark { color: var(--success); margin-left: 8px; }
.code-block {
  background: var(--terminal-bg, #0a0e14);
  color: var(--terminal-text, var(--text));
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--terminal-bg, #0a0e14));
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  overflow-x: auto;
  font-size: 13.5px;
}
footer.footer {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  padding: 30px 0 16px;
  font-family: var(--mono);
  letter-spacing: 0.5px;
}

/* ================= Stage 2: frontend core ================= */

/* ---------- skip link + global focus ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 200;
}
.skip-link:focus { left: 0; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.map-node:focus-visible { outline: none; }
.map-node:focus-visible circle.main { stroke: var(--accent); stroke-width: 4; }

/* ---------- reduced motion (OS setting OR profile toggle) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
[data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ---------- loading skeletons ---------- */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  min-height: 1em;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-line { height: 14px; margin: 8px 0; }
.skel-block { height: 96px; margin-bottom: 18px; }

/* ---------- error banner with retry ---------- */
.error-banner {
  border: 1px solid var(--danger);
  border-left-width: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 8%, var(--surface)), var(--surface) 45%);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.error-banner .eb-icon { font-size: 20px; }
.error-banner .eb-text { flex: 1; min-width: 220px; }

/* ---------- stats page ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.stat-tile {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, var(--edge)), var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.stat-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow-1);
}
.stat-tile .st-icon { font-size: 18px; }
.stat-tile .st-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  display: block;
  margin-top: 2px;
  letter-spacing: -0.5px;
}
.stat-tile .st-label { color: var(--muted); font-size: 12.5px; }

.mastery-bar {
  display: flex;
  height: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.18);
}
.mastery-bar .seg { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.mastery-bar .seg span {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--accent-contrast); padding: 0 6px; white-space: nowrap;
}
.mastery-bar .seg[data-state="introduced"] { background: var(--info); }
.mastery-bar .seg[data-state="practiced"] { background: var(--accent-2); }
.mastery-bar .seg[data-state="struggling"] { background: var(--danger); }
.mastery-bar .seg[data-state="competent"] { background: var(--accent); }
.mastery-bar .seg[data-state="mastered"] { background: var(--success); }
.mastery-bar-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.mastery-bar-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  margin: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
.chip:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 12px -4px var(--glow-accent);
  text-decoration: none;
}

.ach-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.ach-card {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, var(--edge)), var(--surface-2));
  transition: transform var(--transition), box-shadow var(--transition);
}
.ach-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.ach-card.unlocked {
  border-color: color-mix(in srgb, var(--accent-2) 60%, var(--border));
  box-shadow: 0 0 20px -12px var(--glow-accent-2);
}
.ach-card.locked { opacity: 0.65; }
.ach-card .ac-icon { font-size: 24px; }
.ach-card.locked .ac-icon { filter: grayscale(1) brightness(0.6); }
.ach-card .ac-name { font-weight: 700; margin-top: 4px; }
.ach-card .ac-desc { color: var(--muted); font-size: 13px; }
.ach-card .ac-date { font-family: var(--mono); font-size: 11.5px; color: var(--accent-2); margin-top: 6px; }

.heatmap {
  display: grid;
  grid-template-rows: repeat(7, 16px);
  grid-auto-columns: 16px;
  grid-auto-flow: column;
  gap: 4px;
}
.heat-cell {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  display: inline-block;
}
.heat-cell[data-level="1"] { background: var(--accent-2); opacity: 0.45; }
.heat-cell[data-level="2"] { background: var(--accent-2); opacity: 0.75; }
.heat-cell[data-level="3"] { background: var(--accent-2); box-shadow: 0 0 6px -1px var(--glow-accent-2); }
.heat-cell[data-level="4"] { background: var(--accent); box-shadow: 0 0 8px -1px var(--glow-accent); }
.heatmap-legend { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ---------- modal + xp float ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
}
.modal {
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--panel-a), var(--panel-b)) padding-box,
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 75%, var(--border)),
      color-mix(in srgb, var(--border) 55%, transparent) 45%,
      color-mix(in srgb, var(--accent-2) 60%, var(--border))) border-box;
  border-radius: var(--radius);
  padding: 30px 36px;
  max-width: 440px;
  text-align: center;
  box-shadow: var(--shadow-2), 0 0 60px -18px var(--glow-accent);
  animation: modal-in 320ms var(--ease-out);
}
@keyframes modal-in {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal .big { font-size: 42px; }
.xp-float {
  position: fixed;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--glow-accent);
  transform: translateX(-50%);
  animation: floatup 1.5s ease forwards;
  z-index: 160;
  pointer-events: none;
}
@keyframes floatup {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46px); }
}

/* ---------- mission workspace: 2-col → stacked ---------- */
.exercise-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.exercise-grid .ex-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.exercise-grid .ex-main { min-width: 0; }
@media (max-width: 1100px) {
  .exercise-grid { grid-template-columns: 1fr; }
}

.first-try-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
  border-radius: 20px;
  padding: 2px 9px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 12px -5px var(--glow-accent-2);
}

/* hint drawer: progressive level buttons */
.hint-levels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.hint-level-btn { position: relative; }
.hint-level-btn.viewed { border-color: var(--accent-2); color: var(--accent-2); }
.hint-level-btn.viewed::after { content: "✓"; margin-left: 5px; font-size: 10px; }
.hint-empty { color: var(--muted); font-size: 13.5px; }

/* assistance nudge */
.assist-nudge {
  border: 1px solid var(--info);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--info) 8%, var(--surface)), var(--surface) 45%);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.assist-nudge h4 { margin: 0 0 4px; }
.assist-nudge p { margin: 4px 0; font-size: 14px; }

/* debug challenge framing */
.debug-banner {
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 10%, var(--surface-2)), var(--surface-2) 50%);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.debug-banner .db-tag {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--danger);
}
.bug-counter {
  font-family: var(--mono); font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 12px; display: inline-block; margin-top: 8px;
}

/* boss */
.boss-banner {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, var(--panel-a) 0%, var(--panel-b) 100%) padding-box,
    linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 30%, var(--border)) 50%, var(--accent) 100%) border-box;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: var(--shadow-1), 0 0 44px -14px var(--glow-accent);
}
.boss-banner .boss-glyph { font-size: 34px; filter: drop-shadow(0 0 10px var(--glow-accent)); }
.boss-banner h3 { margin: 4px 0; font-family: var(--mono); letter-spacing: 1px; }
.boss-banner p { color: var(--muted); margin: 4px auto; max-width: 560px; }
.boss-checklist { list-style: none; padding: 0; margin: 10px 0; }
.boss-checklist li {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  background: var(--surface-2);
}
.boss-checklist li .bc-box { font-family: var(--mono); color: var(--muted); }
.boss-checklist li.done { border-color: var(--success); }
.boss-checklist li.done .bc-box { color: var(--success); }

/* mission progress within briefing */
.block-progress { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.block-progress .bp-track {
  flex: 1; height: 8px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
}
.block-progress .bp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-hi), var(--teal-lo));
  box-shadow: 0 0 10px var(--glow-accent-2);
  width: 0;
  transition: width 300ms ease;
}
.block-progress .bp-text { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------- dashboard: mini map strip ---------- */
.minimap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.minimap .mm-node {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  background: var(--surface-2);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.minimap .mm-node:not(.locked):hover { transform: translateY(-2px); box-shadow: var(--shadow-1); text-decoration: none; }
.minimap .mm-node.completed { border-color: var(--success); color: var(--success); }
.minimap .mm-node.current {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 0 14px -3px var(--glow-accent);
}
.minimap .mm-node.locked { cursor: default; }
.minimap .mm-node.boss::after { content: "⚔"; position: absolute; top: -7px; right: -5px; font-size: 10px; }
.minimap .mm-ellipsis { color: var(--muted); font-family: var(--mono); }

/* streak freeze explainer */
.freeze-info { position: relative; display: inline-block; }
.freeze-info .fi-tip {
  position: absolute;
  bottom: 130%;
  left: 0;
  width: 240px;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-2);
  z-index: 60;
}
.freeze-info .fi-tip[hidden] { display: none; }

/* ---------- onboarding steps ---------- */
.step-dots { display: flex; gap: 8px; justify-content: center; margin: 18px 0 4px; }
.step-dots .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background var(--transition), box-shadow var(--transition);
}
.step-dots .dot.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--glow-accent); }
.step-dots .dot.done { background: var(--accent-2); border-color: var(--accent-2); }
.step-label { text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.onboard-step { transition: opacity 240ms ease, transform 240ms ease; }
.onboard-step.leaving { opacity: 0; transform: translateY(10px); }
.onboard-step.entering { opacity: 0; transform: translateY(-10px); }

.confetti-piece {
  position: absolute;
  width: 8px; height: 12px;
  border-radius: 2px;
  animation: confetti-fall 1.6s ease-in forwards;
  pointer-events: none;
}
@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(220px) rotate(320deg); opacity: 0; }
}
.celebration { position: relative; overflow: hidden; }

/* map intro overlay */
.map-intro {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.map-intro .mi-box {
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-2), 0 0 44px -14px var(--glow-accent);
}

/* ---------- map scroll hint ---------- */
.map-scroll-hint {
  display: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  padding: 4px 8px 0;
}
@media (max-width: 1160px) { .map-scroll-hint { display: block; } }
.map-node .node-state { font-family: var(--mono); font-size: 9px; fill: var(--muted); }

/* ---------- high-contrast theme: thicker borders, stronger separation ---------- */
[data-theme="high-contrast"] .card,
[data-theme="high-contrast"] .exercise-card,
[data-theme="high-contrast"] .lesson-block,
[data-theme="high-contrast"] .terminal,
[data-theme="high-contrast"] .test-case,
[data-theme="high-contrast"] .ach-card,
[data-theme="high-contrast"] .stat-tile,
[data-theme="high-contrast"] .editor-shell { border-width: 2px; border-color: var(--border); }
[data-theme="high-contrast"] .btn { border-width: 2px; }
[data-theme="high-contrast"] .card.accent { border: 2px solid var(--accent); background: var(--surface); }
[data-theme="high-contrast"] .modal { border: 2px solid var(--accent); background: var(--surface); }
[data-theme="high-contrast"] .boss-banner { border: 2px solid var(--accent); background: var(--surface); }
[data-theme="high-contrast"] .topnav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--border);
}
[data-theme="high-contrast"] .toast { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- responsive ---------- */
@media (max-width: 700px) {
  .topnav { flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; }
  .topnav .nav-xp { width: auto; margin-left: auto; }
  .page { padding: 18px 14px 50px; }
  .grid.two { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .ach-gallery { grid-template-columns: 1fr; }
  .heatmap { max-width: 100%; }
  h1 { font-size: 24px; }
}

/* ---------- CodeMirror theme pairing ---------- */
/* Dark themes use the vendored material-darker; clean-light uses CM's
   default theme with token-matched overrides; high-contrast forces black. */
[data-theme="clean-light"] .CodeMirror { background: #ffffff; color: #1c2330; }
[data-theme="clean-light"] .CodeMirror-gutters { background: #eceff4; border-right: 1px solid #c2ccd8; }
[data-theme="clean-light"] .CodeMirror-linenumber { color: #5b6779; }
[data-theme="clean-light"] .CodeMirror-cursor { border-left: 1px solid #1c2330; }
[data-theme="clean-light"] .CodeMirror-selected { background: #d8e2f0; }
[data-theme="clean-light"] .CodeMirror-focused .CodeMirror-selected { background: #c9d8ec; }
[data-theme="high-contrast"] .CodeMirror,
[data-theme="high-contrast"] .CodeMirror-gutters { background: #000000; }

/* AST tip cards: visually distinct from test failures */
.ast-tips { margin-top: 10px; }
.ast-tips-label { font-family: var(--mono); font-size: 11px; color: var(--info); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.ast-tips .ast-feedback { margin-bottom: 6px; }
.tc-detail .diff-label { color: var(--muted); }

/* ---------- profile: theme picker + danger zone ---------- */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--sans);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.theme-option:hover { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.theme-option.selected { border-color: var(--accent); box-shadow: 0 0 16px -6px var(--glow-accent); }
.theme-option .theme-swatches { display: flex; gap: 5px; }
.theme-option .theme-swatches span {
  width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid var(--border); display: inline-block;
}
.theme-option .theme-name { font-weight: 700; font-size: 14px; }
.theme-option .theme-desc { font-size: 12.5px; }

.danger-zone { border-color: color-mix(in srgb, var(--danger) 70%, var(--border)); }
.danger-zone h3 { color: var(--danger); }
.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}
[data-theme="high-contrast"] .btn.danger { color: #000000; }
.btn.danger:hover { filter: brightness(1.08); }
.btn.danger:disabled { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* streak freeze "?" button */
.fi-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
}
.fi-btn:hover { color: var(--accent); border-color: var(--accent); }

/* map finale node */
.map-node.finale .node-label { fill: var(--accent); font-weight: 700; }
.map-node .node-state { fill: var(--muted); }

/* ================= Stage 4B: capstone / graduation / developer mode ================= */

/* ---------- capstone: planning wizard ---------- */
.cap-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.cap-pick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  border: 2px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--sans);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.cap-pick-card:hover { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow-1), 0 0 20px -10px var(--glow-accent-2); }
.cap-pick-card:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.cap-pick-card .cpc-glyph { color: var(--accent); font-size: 16px; }
.cap-pick-card .cpc-name { font-weight: 600; font-size: 14px; }

.cap-custom-card { display: block; }
.cap-custom-row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.cap-custom-row input {
  flex: 1;
  min-width: 220px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--sans);
}
.cap-custom-row input:focus { outline: none; box-shadow: var(--focus-ring); }

.cap-list-field { margin-bottom: 16px; }
.cap-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cap-list-label { font-weight: 600; }
.cap-list-rows { display: flex; flex-direction: column; gap: 8px; }
.cap-list-row { display: flex; gap: 8px; align-items: center; }
.cap-list-row input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--sans);
}
.cap-list-row input:focus { outline: none; box-shadow: var(--focus-ring); }

/* ---------- capstone: workspace ---------- */
.cap-ws-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.cap-status { text-transform: uppercase; letter-spacing: 1px; }
.cap-status.planning { color: var(--info); border-color: var(--info); }
.cap-status.building { color: var(--accent); border-color: var(--accent); }
.cap-status.complete { color: var(--success); border-color: var(--success); }

.cap-milestones { list-style: none; padding: 0; margin: 0; }
.cap-milestones li {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: 6px;
  transition: border-color var(--transition);
}
.cap-milestones li label { display: flex; gap: 10px; align-items: baseline; cursor: pointer; }
.cap-milestones li.done { border-color: var(--success); }
.cap-milestones li.done span { color: var(--muted); text-decoration: line-through; }
.cap-milestones input[type="checkbox"] { accent-color: var(--accent-2); width: 16px; height: 16px; }
.cap-milestones input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cap-filebar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cap-file-tabs { flex: 1; min-width: 240px; margin-bottom: 12px; }
.cap-file-tabs button { font-family: var(--mono); font-size: 13px; padding: 8px 14px; }
.cap-addfile { display: flex; gap: 8px; margin-bottom: 12px; }
.cap-addfile input {
  width: 170px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--mono);
}
.cap-addfile input:focus { outline: none; box-shadow: var(--focus-ring); }
.cap-file-note { font-size: 13px; min-height: 1.4em; margin: 0 0 10px; }
.cap-danger-text { color: var(--danger); }
.cap-danger-text:hover { border-color: var(--danger); }

.cap-stdin { margin: 4px 0 12px; }
.cap-stdin summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13.5px;
  font-family: var(--mono);
  padding: 6px 0;
}
.cap-stdin summary:hover { color: var(--text); }
.cap-stdin textarea {
  width: 100%;
  margin-top: 8px;
  background: var(--terminal-bg, #0a0e14);
  color: var(--terminal-text, var(--text));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 13px;
  padding: 9px 12px;
  resize: vertical;
}
.cap-stdin textarea:focus { outline: none; box-shadow: var(--focus-ring); }

/* ---------- graduation: locked + claim ---------- */
.grad-ring-accent { stroke: var(--accent-2); }
.grad-claim-stage {
  text-align: center;
  padding: 40px 24px 34px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  margin-top: 18px;
  background: radial-gradient(ellipse at center 30%, rgba(242, 163, 60, 0.10), transparent 70%), linear-gradient(180deg, var(--panel-a), var(--panel-b));
  box-shadow: var(--shadow-1), 0 0 60px -18px var(--glow-accent);
}
.grad-reveal-ring { margin: 0 auto; display: block; transform: none; }
/* counter the global .ring rotation on the circles only, so the inner
   glyph/caption text stays upright while the sweep still starts at 12 o'clock */
.grad-reveal-ring circle { transform: rotate(-90deg); transform-origin: center; }
.grad-reveal-ring .ring-fg { stroke: var(--accent); transition: stroke-dashoffset 1.6s ease; }
.grad-claim-glyph { font-size: 30px; }
.grad-claim-sub {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 2px;
  fill: var(--muted);
}

/* ---------- graduation: certificate ---------- */
.grad-certificate {
  border: 3px double var(--accent);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at top, rgba(242, 163, 60, 0.08), transparent 60%),
    linear-gradient(180deg, var(--panel-a), var(--panel-b));
  padding: 10px;
  margin-top: 18px;
  box-shadow: var(--shadow-2), 0 0 60px -20px var(--glow-accent);
}
.grad-cert-inner {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 30px 34px;
  text-align: center;
}
.grad-seal { width: 84px; height: 84px; color: var(--accent); margin-bottom: 10px; filter: drop-shadow(0 0 14px var(--glow-accent)); }
.grad-cert-over { color: var(--muted); font-size: 13.5px; margin: 4px 0; letter-spacing: 0.5px; }
.grad-cert-name {
  font-family: var(--display);
  color: var(--accent);
  font-size: 34px;
  font-weight: 700;
  margin: 6px 0;
  letter-spacing: 0.5px;
  text-shadow: 0 0 24px var(--glow-accent);
}
.grad-cert-title {
  font-family: var(--mono);
  color: var(--accent-2);
  font-size: 16px;
  letter-spacing: 1.5px;
  margin: 4px 0 8px;
}
.grad-cert-meta { color: var(--muted); font-size: 13.5px; margin: 4px 0 16px; }
.grad-cert-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  margin-bottom: 12px;
}
.grad-cert-stats .grad-cs-num {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.grad-cert-stats .grad-cs-label { color: var(--muted); font-size: 11.5px; }
.grad-cert-capstone { font-size: 14px; margin: 8px 0 12px; }
.grad-cert-capstone span { font-family: var(--mono); color: var(--accent-2); }
.grad-cert-concepts { max-width: 640px; margin: 0 auto; }
.grad-roadmap { margin: 0; padding-left: 22px; }
.grad-roadmap li { padding: 6px 0; }
.grad-roadmap li::marker { color: var(--accent); font-family: var(--mono); }

/* ---------- graduation: print (certificate only, clean white) ---------- */
@media print {
  :root { color-scheme: light; }
  .topnav, .footer, .skip-link, #toast-stack, #modal-root, .grad-screen,
  #grad-skeleton, #grad-error, #grad-locked, #grad-claim,
  #graduation-root > h1, #graduation-root > p.muted { display: none !important; }
  html, body { background: #ffffff !important; color: #000000 !important; }
  body::before, body::after { display: none !important; }
  .page { max-width: none; margin: 0; padding: 0; }
  .page > * { animation: none !important; }
  .grad-certificate {
    border: 3px double #000000;
    background: #ffffff;
    margin: 0;
    padding: 6px;
    box-shadow: none;
  }
  .grad-cert-inner { border-color: #000000; padding: 24px 28px; }
  .grad-certificate, .grad-certificate * { color: #000000 !important; text-shadow: none !important; }
  .grad-certificate .grad-seal { filter: none; }
  .grad-certificate .mastery-pill { border-color: #000000 !important; background: #ffffff !important; }
  .grad-cert-stats { border-color: #000000; grid-template-columns: repeat(3, 1fr); }
}

/* ---------- dev: shared ---------- */
.dev-chip-on { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.dev-filter-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dev-filter-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  min-width: 76px;
}

/* ---------- dev: challenge library ---------- */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 14px 0 10px;
}
.dev-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, var(--edge)), var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--sans);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.dev-card:hover:not(:disabled) { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow-1), 0 0 18px -10px var(--glow-accent-2); }
.dev-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dev-card:disabled { cursor: not-allowed; opacity: 0.65; }
.dev-card.passed { border-color: color-mix(in srgb, var(--success) 60%, var(--border)); }
.dev-card-top { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.dev-card-title { font-weight: 700; font-size: 14px; }
.dev-card-passed { color: var(--success); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.dev-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dev-card-lock { color: var(--muted); font-size: 12.5px; font-family: var(--mono); }
.dev-diff-easy { color: var(--success); border-color: var(--success); }
.dev-diff-medium { color: var(--accent); border-color: var(--accent); }
.dev-diff-hard { color: var(--danger); border-color: var(--danger); }

.dev-challenge-ws .dev-ws-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.dev-challenge-ws .tests-panel { margin-top: 12px; }
.dev-challenge-ws #dev-ws-meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- dev: replay ---------- */
.dev-week { margin-bottom: 18px; }
.dev-week:last-child { margin-bottom: 0; }
.dev-week h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); }
.dev-week-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dev-day {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  background: var(--surface-2);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.dev-day:hover { border-color: var(--accent-2); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-1); }
.dev-day.completed { border-color: var(--success); color: var(--success); }
.dev-day.current { border-color: var(--accent); color: var(--accent); font-weight: 700; box-shadow: 0 0 14px -3px var(--glow-accent); }
.dev-day.finale { border-style: double; }
.dev-boss-mark { position: absolute; top: -9px; right: -6px; font-size: 11px; }

/* ---------- stage 4b responsive ---------- */
@media (max-width: 700px) {
  .cap-picker { grid-template-columns: 1fr; }
  .dev-grid { grid-template-columns: 1fr; }
  .grad-cert-inner { padding: 20px 16px; }
  .grad-cert-name { font-size: 24px; }
  .cap-ws-head { flex-direction: column; }
}

/* ================= Stage 5: game feel =================
   One-shot feedback classes applied by fx.js, plus ambient game-board
   motion. Every animation here dies under the global reduced-motion
   kill-switches above; glow intensity rides the theme effect tokens, so
   high-contrast keeps the state change but drops the light show. */

/* one-shot result flashes (terminal, cards) */
.fx-flash-ok { animation: fx-flash-ok 700ms var(--ease-out); }
@keyframes fx-flash-ok {
  0% { box-shadow: 0 0 0 1px var(--success), 0 0 26px -2px var(--glow-success); border-color: var(--success); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.fx-flash-bad { animation: fx-flash-bad 600ms var(--ease-out); }
@keyframes fx-flash-bad {
  0% { box-shadow: 0 0 0 1px var(--danger), 0 0 22px -2px color-mix(in srgb, var(--danger) 45%, transparent); border-color: var(--danger); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.fx-flash-warn { animation: fx-flash-warn 600ms var(--ease-out); }
@keyframes fx-flash-warn {
  0% { box-shadow: 0 0 0 1px var(--accent), 0 0 22px -2px var(--glow-accent); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.fx-shake { animation: fx-shake 360ms ease; }
@keyframes fx-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* nav XP counter tick — applied by api.js when the number changes */
.fx-xp-tick { animation: fx-xp-tick 500ms var(--ease-out); }
@keyframes fx-xp-tick {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); color: var(--accent); text-shadow: 0 0 14px var(--glow-accent); }
  100% { transform: scale(1); }
}

/* campaign map: energy flowing through the completed circuit */
.map-path {
  animation: fx-path-flow 26s linear infinite;
}
@keyframes fx-path-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -240; }
}

/* campaign map: completed nodes stamp in with a stagger (delay set inline) */
.map-node.completed { animation: fx-stamp 420ms var(--ease-out) both; }
@keyframes fx-stamp {
  0% { opacity: 0; transform: scale(0.6); transform-origin: center; transform-box: fill-box; }
  70% { opacity: 1; transform: scale(1.08); transform-origin: center; transform-box: fill-box; }
  100% { opacity: 1; transform: scale(1); transform-origin: center; transform-box: fill-box; }
}

/* beacon: the one thing to do next breathes gently (hero resume button) */
.fx-beacon { animation: fx-beacon 2.6s ease-in-out infinite; }
@keyframes fx-beacon {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 16px -6px var(--glow-accent); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 26px -4px var(--glow-accent), 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }
}

/* boss terminal: the door hums — opacity pulse on a pseudo-element
   carrying a static shadow (compositable; no per-frame shadow repaint) */
.boss-banner::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 58px -10px var(--glow-accent);
  opacity: 0;
  animation: fx-boss-hum 3.2s ease-in-out infinite;
}
@keyframes fx-boss-hum {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* tactile buttons */
.btn:active { transform: translateY(1px) scale(0.985); }

/* wrong-answer text signal — feedback is never color/motion alone */
.choice-feedback {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--danger);
  margin: 8px 0 0;
}

/* ================= Stage 6: the Bridge (3D mission sim) ================= */

.bridge-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 18px;
  align-items: start;
  margin-top: 16px;
}
@media (max-width: 1100px) { .bridge-grid { grid-template-columns: 1fr; } }

.bridge-stage {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 420px;
  height: calc(100vh - 210px);
  max-height: 860px;
  background: #05080f;   /* deep space regardless of theme — it's a window */
}
.bridge-stage::before { display: none; }  /* no hairline over the viewport */
#bridge-canvas { display: block; width: 100%; height: 100%; }

.bridge-fallback[hidden] { display: none; }  /* author display beats [hidden] */
.bridge-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: #e6e9ee;
}

.bridge-chips {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bridge-chip {
  font-family: var(--mono);
  font-size: 12px;
  color: #9aa7b8;
  background: rgba(10, 14, 20, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(154, 167, 184, 0.25);
  border-radius: 999px;
  padding: 4px 12px;
}
.bridge-chip[data-on="true"] {
  color: #4de3cc;
  border-color: rgba(77, 227, 204, 0.45);
  text-shadow: 0 0 10px rgba(77, 227, 204, 0.35);
}

.bridge-side { display: flex; flex-direction: column; min-width: 0; }
.bridge-side .terminal { margin-top: 10px; max-height: 200px; }

.bridge-manual summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.bridge-manual summary:hover { color: var(--text); }
.bridge-manual pre { font-size: 12.5px; }

.bridge-events {
  max-height: 180px;
  overflow-y: auto;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bridge-event { color: var(--muted); }
.bridge-event.ok { color: var(--text); }
.bridge-event.warn { color: var(--danger); }
.bridge-event:first-child { animation: rise 0.3s var(--ease-out); }

/* ================= Stage 9: legal pages ================= */
.legal { max-width: 720px; margin: 0 auto; padding-bottom: 30px; }
.legal h1 { font-size: 32px; margin: 8px 0 4px; }
.legal h2 {
  font-size: 17px;
  margin: 26px 0 6px;
  color: var(--accent);
  font-family: var(--display);
}
.legal p { line-height: 1.65; }
.legal-list { padding-left: 20px; margin: 8px 0; }
.legal-list li { padding: 4px 0; line-height: 1.6; }
.legal-foot {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
}
footer.footer a { color: var(--muted); }
footer.footer a:hover { color: var(--accent); }

/* ================= Stage 8: leaderboard ================= */
.lb-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lb-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--border);
}
.lb-table td { padding: 11px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.lb-table tbody tr:last-child td { border-bottom: none; }
.lb-table .lb-rank { width: 52px; font-family: var(--mono); font-weight: 700; color: var(--muted); }
.lb-table .lb-score { text-align: right; font-family: var(--mono); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.lb-table tbody tr { transition: background var(--transition); }
.lb-table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.lb-table tr.lb-me { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lb-table tr.lb-me:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lb-table tr:nth-child(1) .lb-rank,
.lb-table tr:nth-child(2) .lb-rank,
.lb-table tr:nth-child(3) .lb-rank { font-size: 17px; }
.lb-tag {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--accent-contrast); background: var(--accent);
  border-radius: 20px; padding: 1px 7px; margin-left: 4px; vertical-align: middle;
}
.lb-you { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); font-size: 14px; }
.lb-empty { padding: 10px 4px 0; }
.lb-earn-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.lb-earn-list li { display: flex; gap: 10px; align-items: baseline; }
.lb-earn-xp {
  font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 6px; padding: 1px 7px;
  min-width: 62px; text-align: center; flex-shrink: 0;
}

/* ================= Stage 7: hosted mode (landing / auth / account) ======= */

.landing { max-width: 980px; margin: 0 auto; }
.landing-hero { text-align: center; padding: 56px 0 34px; }
.landing-kicker {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--accent-2);
  text-transform: uppercase;
}
.landing-title { font-size: 44px; margin: 10px 0 14px; }
.landing-sub { color: var(--muted); max-width: 640px; margin: 0 auto 22px; font-size: 16px; }
.landing-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-note { margin-top: 14px; font-size: 13px; }
.landing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 26px 0; }
@media (max-width: 900px) { .landing-grid { grid-template-columns: 1fr; } .landing-title { font-size: 32px; } }
.landing-pricing { text-align: center; padding: 30px; }

.auth-wrap { display: flex; justify-content: center; padding: 40px 0; }
.auth-card { width: 100%; max-width: 440px; }

.nav-account { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.nav-email {
  font-size: 12px;
  color: var(--muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 900px) { .nav-email { display: none; } }

/* terminal "running" status shimmer */
.terminal .t-status.running { color: var(--muted); }
.terminal .t-status.running::after {
  content: "▁▂▃▄▅▄▃▂";
  display: inline-block;
  margin-left: 8px;
  color: var(--accent-2);
  animation: fx-eq 900ms steps(8) infinite;
  overflow: hidden;
  vertical-align: baseline;
}
@keyframes fx-eq { to { transform: translateY(0); opacity: 0.55; } }