@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono&display=swap');

/* =========================================================
   1. COLORS: change these to restyle the whole site
   ========================================================= */
:root {
  --bg: #07070d;
  --card: #12121c;
  --border: #25253a;
  --text: #ececf5;
  --muted: #8b8ba7;
  --accent: #a855f7;
  --accent-2: #22d3ee;
}

/* light theme: only the colors change */
[data-theme="light"] {
  --bg: #f5f4fb;
  --card: #ffffff;
  --border: #e3e0f0;
  --text: #1b1b2f;
  --muted: #66667f;
  --accent: #7c3aed;
  --accent-2: #0e7490;
}

/* =========================================================
   2. RESET AND BASE
   ========================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}

/* =========================================================
   3. SHARED ANIMATIONS
   ========================================================= */
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(40px) scale(1.1); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* scroll reveal: elements start hidden and fade in when scrolled into view */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.show { opacity: 1; transform: translateY(0); }

/* =========================================================
   4. NAVBAR
   ========================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 8%;
  background: rgba(7, 7, 13, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] .navbar { background: rgba(245, 244, 251, 0.75); }

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.logo span { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color 0.25s;
}

.nav-links a:hover { color: var(--text); }

/* underline that grows on hover */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s;
}

.nav-links a:hover::after { width: 100%; }

.icon-btn {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.icon-btn:hover { border-color: var(--accent); transform: rotate(20deg); }

/* scroll progress bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  z-index: 300;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent);
}

/* =========================================================
   5. HERO
   ========================================================= */
.hero {
  position: relative;
  text-align: center;
  padding: 110px 8% 90px;
  overflow: hidden;
}

/* glowing background blobs */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  z-index: -1;
  animation: float 9s ease-in-out infinite;
}

.hero::before { background: var(--accent); top: -120px; left: 10%; }
.hero::after  { background: var(--accent-2); bottom: -160px; right: 10%; animation-delay: -4s; }

[data-theme="light"] .hero::before,
[data-theme="light"] .hero::after { opacity: 0.2; }

.badge {
  display: inline-block;
  padding: 6px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--accent-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.06);
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -2px;
  max-width: 800px;
  margin: 0 auto 20px;
}

.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 auto 36px;
}

/* hero items fade up when the page loads */
.hero > * {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
}

.hero > *:nth-child(1) { animation-delay: 0.1s; }
.hero > *:nth-child(2) { animation-delay: 0.25s; }
.hero > *:nth-child(3) { animation-delay: 0.4s; }
.hero > *:nth-child(4) { animation-delay: 0.55s; }

/* =========================================================
   6. BUTTONS
   ========================================================= */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.btn:hover { transform: translateY(-3px); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  color: white;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.4);
}

.btn-primary:hover { box-shadow: 0 0 38px rgba(168, 85, 247, 0.7); }

.btn-ghost {
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--card);
}

.btn-ghost:hover { border-color: var(--accent); }

.btn-block {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}

.btn-small {
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: 0.25s;
}

.btn-small:hover { border-color: var(--accent); }
.btn-small.danger:hover { border-color: #ef4444; color: #ef4444; }

.add-btn {
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.25s;
}

.add-btn:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(168, 85, 247, 0.55); }
.add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================================
   7. STATS STRIP
   ========================================================= */
.stats {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat {
  text-align: center;
  padding: 28px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.num {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.label {
  color: var(--muted);
  font-size: 0.85rem;
  font-family: 'JetBrains Mono', monospace;
}

/* =========================================================
   8. ARTICLES SECTION
   ========================================================= */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 8% 100px;
  scroll-margin-top: 60px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-head h2 { font-size: 2rem; letter-spacing: -1px; }
.head-right { display: flex; align-items: center; gap: 16px; }

.count {
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  font-size: 0.85rem;
}

/* search bar */
.search {
  width: 100%;
  padding: 16px 20px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  outline: none;
  transition: 0.25s;
}

.search::placeholder { color: var(--muted); }

.search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.3);
}

/* category filter buttons */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 30px;
}

.chip {
  padding: 8px 18px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: 0.25s;
}

.chip:hover { color: var(--text); border-color: var(--accent); }

.chip.active {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
}

/* article cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  animation: fadeUp 0.6s ease backwards;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 10px 40px rgba(168, 85, 247, 0.2);
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--accent-2);
  background: rgba(34, 211, 238, 0.08);
  border-radius: 999px;
}

.card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.card p { color: var(--muted); line-height: 1.6; font-size: 0.95rem; }

.card .time {
  display: block;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--muted);
  line-height: 1.7;
}

/* highlighted search matches */
mark {
  background: rgba(168, 85, 247, 0.35);
  color: var(--text);
  padding: 0 3px;
  border-radius: 4px;
}

/* bookmark star on cards */
.bookmark {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.3rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: 0.25s;
}

.bookmark:hover { color: var(--accent); transform: scale(1.25); }
.bookmark.saved { color: #facc15; text-shadow: 0 0 14px rgba(250, 204, 21, 0.6); }

/* =========================================================
   9. POP-UP (article reader and new-article form)
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: rgba(3, 3, 8, 0.75);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

[data-theme="light"] .modal { background: rgba(30, 20, 60, 0.35); }

.modal.open { opacity: 1; pointer-events: auto; }

.modal-box {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.25);
  transform: translateY(30px) scale(0.96);
  transition: transform 0.3s;
}

.modal.open .modal-box { transform: translateY(0) scale(1); }

.close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.25s;
}

.close:hover { color: white; border-color: var(--accent); }

.modal-box h2 { font-size: 2.2rem; letter-spacing: -1px; margin-bottom: 8px; }

.modal-box .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 24px;
}

.modal-box p { line-height: 1.8; color: #c9c9dd; margin-bottom: 16px; }
[data-theme="light"] .modal-box p { color: #3a3a55; }

.actions { display: flex; gap: 10px; margin-top: 28px; }

/* the "new article" form */
.modal-box form { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; }

.modal-box label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

.modal-box input,
.modal-box textarea {
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  resize: vertical;
  transition: 0.25s;
}

.modal-box input:focus,
.modal-box textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);
}

/* =========================================================
   10. TOAST NOTIFICATION AND FOOTER
   ========================================================= */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  z-index: 400;
  padding: 12px 22px;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.35);
  opacity: 0;
  transform: translate(-50%, 30px);
  pointer-events: none;
  transition: 0.3s;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.footer {
  text-align: center;
  padding: 40px 8%;
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
}

/* =========================================================
   11. INTERACTIVE LABS
   ========================================================= */
.labs { padding-bottom: 20px; scroll-margin-top: 60px; }

.lab {
  display: none;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.lab.active {
  display: block;
  animation: fadeUp 0.5s ease both;
}

.lab-intro {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.explain {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* form fields inside the labs */
.lab-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.lab-field b { color: var(--accent-2); font-family: 'JetBrains Mono', monospace; }

.lab input[type="number"],
.lab textarea,
.lab select {
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: 0.25s;
}

.lab input[type="number"]:focus,
.lab textarea:focus,
.lab select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);
}

.lab textarea { resize: vertical; }
.lab input[type="range"] { accent-color: var(--accent); width: 100%; }

/* result boxes */
.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.readout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.readout span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted);
}

.readout strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.3rem;
  color: var(--accent-2);
  word-break: break-word;
}

.readout.wide { margin: 16px 0; }
.readout.wide strong { font-size: 1.1rem; line-height: 1.6; white-space: pre-wrap; }

/* ----- binary lab ----- */
.bits {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  max-width: 520px;
  margin: 0 auto 28px;
}

.bit-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bit-weight {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--muted);
}

.bit {
  width: 100%;
  height: 64px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.6rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: 0.2s;
}

.bit:hover { border-color: var(--accent); transform: translateY(-3px); }

.bit.on {
  color: white;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

/* ----- sorting lab ----- */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

.controls input[type="range"] { width: 110px; }

.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 260px;
  padding: 12px;
  margin-bottom: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.bar {
  flex: 1;
  background: linear-gradient(to top, var(--accent), #7c3aed);
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
}

.bar.done { background: #22c55e; opacity: 1; }

.bar.cmp {
  background: var(--accent-2);
  opacity: 1;
  box-shadow: 0 0 14px var(--accent-2);
}

.stats-line {
  display: flex;
  gap: 24px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--muted);
}

.stats-line b { color: var(--text); }

/* ----- cipher lab ----- */
.mode-switch { display: flex; gap: 10px; margin-bottom: 20px; }

.wheel {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.w-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.w-col i { font-style: normal; color: var(--muted); }

.w-col i + i {
  padding-top: 6px;
  font-weight: 700;
  color: var(--accent-2);
  border-top: 1px solid var(--border);
}

/* =========================================================
   12. PHONES
   ========================================================= */
@media (max-width: 600px) {
  .nav-links { gap: 16px; }
  .nav-links a { display: none; }
  .stats { grid-template-columns: 1fr; }
  .modal-box { padding: 30px 22px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lab { padding: 20px 16px; }
  .bit { height: 52px; font-size: 1.3rem; }
  .bars { height: 200px; }
}

/* =========================================================
   CS Wiki · editorial refresh
   ========================================================= */
:root {
  --bg: #08080d;
  --card: #111119;
  --border: rgba(193, 181, 224, .15);
  --text: #f4f0fa;
  --muted: #a39ab5;
  --accent: #b681ff;
  --accent-2: #71e4df;
  --ink: #17131e;
}
html { scroll-padding-top: 90px; }
body { background:var(--bg); background-image:radial-gradient(ellipse at 50% -25%,rgba(89,55,126,.23),transparent 55%); }
.navbar { padding:15px max(6%, calc((100% - 1240px)/2)); background:rgba(8,8,13,.76); border-bottom-color:rgba(255,255,255,.09); }
.logo { text-decoration:none; color:var(--text); font-size:1.35rem; letter-spacing:-1px; }
.logo span { color:var(--accent); }
.logo i { display:inline-block; margin-left:8px; color:var(--accent-2); font-size:.8rem; font-style:normal; vertical-align:top; }
.nav-links { gap:30px; }
.nav-links a { font-size:.92rem; }
.nav-links a[aria-current="page"] { color:var(--text); }
.nav-links a[aria-current="page"]::after { width:100%; background:var(--accent-2); }
.icon-btn { border-radius:50%; background:rgba(255,255,255,.04); }
.hero { min-height:590px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding-top:110px; padding-bottom:100px; }
.hero::before,.hero::after { width:560px; height:560px; filter:blur(145px); opacity:.25; }
.hero::before { top:-210px; left:-5%; }
.hero::after { right:-6%; bottom:-250px; }
.badge { display:flex; align-items:center; gap:10px; padding:8px 15px; background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.12); color:#c6b8d9; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; }
.badge-dot { width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 14px var(--accent-2); }
.hero-kicker,.eyebrow { display:block; color:var(--accent-2); font: .7rem 'JetBrains Mono',monospace; letter-spacing:.17em; text-transform:uppercase; }
.hero-kicker { margin:22px 0 15px; }
.hero h1 { max-width:900px; font-size:clamp(3.3rem,8vw,7rem); line-height:.98; letter-spacing:-.075em; }
.gradient-text { background:linear-gradient(100deg,#c88bff 6%,#8f94ff 54%,#69ded9 100%); -webkit-background-clip:text; background-clip:text; }
.hero p { margin-top:23px; max-width:480px; font-size:1.05rem; line-height:1.8; }
.hero-buttons { margin-top:5px; gap:12px; }
.btn { border-radius:999px; padding:14px 23px; }
.btn-primary { background:linear-gradient(110deg,#bd78f8,#8159ef); box-shadow:0 8px 35px rgba(151,95,229,.22); }
.btn-primary span,.text-link span { margin-left:10px; }
.btn-ghost { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.14); }
.sparkle { margin-right:7px; color:var(--accent-2); }
.ticker { overflow:hidden; border-block:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.015); }
.ticker div { width:max-content; padding:17px 0; color:#92899f; font: .67rem 'JetBrains Mono',monospace; letter-spacing:.16em; animation:ticker 32s linear infinite; }
.ticker b { color:var(--accent-2); margin:0 24px; }
@keyframes ticker { to { transform:translateX(-35%); } }
.stats { max-width:1100px; padding-top:34px; }
.stat { border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); }
.num { background:linear-gradient(90deg,#c68cff,#68ded9); -webkit-background-clip:text;background-clip:text; }
.container { max-width:1150px; padding-top:86px; }
.section-head { margin-bottom:24px; }
.section-head h2 { margin-top:8px; font-size:clamp(1.8rem,4vw,2.7rem); letter-spacing:-.055em; }
.text-link { display:inline-block; color:var(--text); text-decoration:none; font-size:.9rem; }
.text-link:hover { color:var(--accent-2); }
.search { border-radius:999px; background:rgba(255,255,255,.035); }
.chip { padding:9px 17px; }
.chip.active { background:linear-gradient(110deg,#b679f6,#8756ec); }
.grid { gap:16px; }
.card { min-height:230px; padding:27px; border-radius:18px; background:linear-gradient(155deg,rgba(255,255,255,.052),rgba(255,255,255,.018)); overflow:hidden; }
.card::after { content:'↗'; position:absolute; right:24px; bottom:21px; color:rgba(196,177,220,.42); transition:transform .25s,color .25s; }
.card:hover { transform:translateY(-7px); border-color:rgba(190,135,255,.6); box-shadow:0 20px 55px rgba(74,42,108,.21); }
.card:hover::after { transform:translate(3px,-3px); color:var(--accent-2); }
.card h3 { letter-spacing:-.03em; }
.card .tag { border-radius:999px; background:rgba(113,228,223,.09); }
.card p { max-width:31ch; }
.labs { padding-top:70px; padding-bottom:100px; }
.lab { border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); }
.page-intro { position:relative; max-width:1150px; margin:0 auto; padding:105px 8% 66px; overflow:hidden; }
.page-intro::after { content:''; position:absolute; right:10%; top:18%; width:180px; height:180px; border:1px solid rgba(192,145,255,.16); border-radius:50%; box-shadow:0 0 0 24px rgba(192,145,255,.025),0 0 0 48px rgba(192,145,255,.02); }
.page-intro h1 { max-width:760px; margin-top:17px; font-size:clamp(3rem,7vw,5.4rem); letter-spacing:-.075em; line-height:1; }
.page-intro p { max-width:520px; margin-top:18px; color:var(--muted); line-height:1.8; }
.intro-index { position:absolute; bottom:65px; right:9%; font: .72rem 'JetBrains Mono',monospace; color:#b5a6c9; }
.intro-index span { color:var(--accent-2); margin:0 6px; }
.page-intro + .hero { display:none; }
body.page-home .page-intro { display:none; }
body.page-home .hero { min-height:610px; }
body.page-home .container#articles { padding-top:62px; padding-bottom:35px; }
body.page-home #search,body.page-home #filters,body.page-home #add-btn { display:none; }
body.page-home .head-right { flex-direction:row-reverse; }
body.page-home #count { display:none; }
body.page-home .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.page-home .grid .card:nth-child(n+4) { display:none; }
body.page-home .labs { padding-top:45px; }
body.page-home .footer { margin-top:10px; }
body.page-articles .hero,body.page-articles .ticker,body.page-articles .stats,body.page-articles .labs { display:none; }
body.page-articles #articles { padding-top:0; }
body.page-labs .hero,body.page-labs .ticker,body.page-labs .stats,body.page-labs #articles { display:none; }
body.page-labs .labs { padding-top:8px; }
body.page-labs .lab-tabs { margin-bottom:28px; }
body.page-about .hero,body.page-about .ticker,body.page-about .stats,body.page-about #articles,body.page-about .labs { display:none; }
body.page-about .about-page { padding-top:0; }
body.page-about .page-intro { padding-inline:0; }
.about-story { display:grid; grid-template-columns:minmax(150px,.7fr) 2fr; gap:70px; align-items:center; padding:45px 0 95px; }
.about-stamp { display:grid; place-content:center; width:170px; height:190px; border:1px solid rgba(255,255,255,.15); border-radius:46% 46% 42% 42%; color:var(--text); text-align:center; font-weight:700; letter-spacing:.14em; transform:rotate(-8deg); background:radial-gradient(circle at 50% 40%,rgba(177,121,246,.19),transparent 70%); }
.about-stamp span { color:var(--accent-2); font-size:2rem; }
.about-story h2 { max-width:600px; margin:12px 0 18px; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.06em; line-height:1.08; }
.about-story p { max-width:660px; margin-bottom:15px; color:var(--muted); line-height:1.85; }
.about-story .btn { display:inline-block; margin-top:12px; }
.about-values { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; padding-bottom:95px; }
.about-values article { padding:25px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.025); }
.about-values article>span { color:var(--accent-2); font: .68rem 'JetBrains Mono',monospace; letter-spacing:.1em; }
.about-values h3 { margin:23px 0 9px; font-size:1.15rem; }
.about-values p { color:var(--muted); font-size:.9rem; line-height:1.65; }
.footer { background:rgba(255,255,255,.015); line-height:1.9; }
.footer-logo { display:inline-block; margin-bottom:8px; }
.reveal { transform:translateY(26px); }
@media(max-width:700px) {
 .navbar { padding:13px 5%; }
 .nav-links { gap:12px; }
 .nav-links a { display:inline-block; font-size:.76rem; }
 .nav-links a::after { bottom:-4px; }
 .icon-btn { width:34px;height:34px;font-size:.9rem; }
 .hero { min-height:550px;padding:85px 7% 70px; }
 .hero h1 { font-size:clamp(3rem,13vw,5rem); }
 .hero p { font-size:.98rem; }
 .badge { font-size:.58rem; }
 .stats { grid-template-columns:repeat(3,1fr); gap:8px; padding-inline:5%; }
 .stat { padding:19px 5px; }
 .num { font-size:2rem; }
 .label { font-size:.65rem; }
 .container { padding-inline:5%; }
 .page-intro { padding:78px 5% 52px; }
 .page-intro::after { right:7%; top:16%; width:105px;height:105px; }
 .intro-index { bottom:50px;right:6%; }
 body.page-home .grid { grid-template-columns:1fr; }
 .about-story { grid-template-columns:1fr; gap:35px; padding:25px 0 65px; }
 .about-stamp { width:125px;height:140px; }
 .about-values { grid-template-columns:1fr; padding-bottom:65px; }
 .section-head { flex-direction:row; align-items:end; }
 .text-link { font-size:.8rem; }
}
@media(max-width:400px) { .nav-links { gap:8px; }.nav-links a{font-size:.69rem}.logo{font-size:1.12rem}.icon-btn{width:30px;height:30px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; } }
/* Gentle route motion */
body { animation: pageEnter .55s cubic-bezier(.2,.7,.2,1) both; }
body.page-leave { opacity:0; transform:translateY(8px); transition:opacity .16s ease,transform .16s ease; }
@keyframes pageEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1;transform:translateY(0); } }
.card:nth-child(3n + 2) { transition-delay:.035s; }
.card:nth-child(3n) { transition-delay:.07s; }
.lab-tabs { margin-bottom:28px; }
/* =========================================================
   CS Wiki — cinematic edition
   ========================================================= */
:root { --bg:#09070d; --card:#14111a; --border:rgba(224,204,255,.13); --text:#f8f4fb; --muted:#b1a5bb; --accent:#9d4cff; --accent-2:#56dfd4; }
body { background-color:#09070d; background-image:radial-gradient(ellipse at 18% 5%,rgba(92,28,118,.30),transparent 36%),radial-gradient(ellipse at 86% 42%,rgba(0,105,111,.14),transparent 34%); }
.navbar { min-height:70px; padding-inline:max(5%,calc((100% - 1340px)/2)); background:rgba(10,8,13,.84); border-bottom:1px solid rgba(255,255,255,.1); }
.nav-links a[aria-current="page"] { color:#fff; }
.nav-links a[aria-current="page"]::after { width:100%; background:#9b45ff; }
.logo { font-size:1.4rem; }
.hero { position:relative; z-index:1; display:grid; grid-template-columns:minmax(400px,.96fr) minmax(420px,1.04fr); align-items:center; gap:30px; max-width:1440px; min-height:660px; margin:0 auto; padding:82px max(6%,calc((100% - 1260px)/2)); text-align:left; overflow:hidden; }
.hero::before { width:610px;height:610px;left:-180px;top:-250px;filter:blur(125px);opacity:.29; }
.hero::after { width:590px;height:590px;right:-175px;bottom:-290px;filter:blur(130px);opacity:.28; }
.hero-copy { position:relative; z-index:2; }
.badge { display:inline-flex; align-items:center; gap:9px; padding:9px 14px; color:#d6c7e6; border-color:rgba(223,199,255,.2); background:rgba(255,255,255,.045); font-size:.67rem; letter-spacing:.09em; }
.badge-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:#7ee8da;box-shadow:0 0 14px #7ee8da; }
.hero-kicker { margin:32px 0 14px; color:#d1a6ff; font-size:.68rem; letter-spacing:.25em; }
.hero h1 { max-width:700px; margin:0 0 18px; font-size:clamp(3.6rem,6.1vw,6.6rem); line-height:.94; letter-spacing:-.085em; }
.gradient-text { background:linear-gradient(105deg,#e8b6ff 1%,#a363ff 50%,#59e4d4 105%); -webkit-background-clip:text;background-clip:text; }
.hero p { max-width:470px; margin:0 0 24px; font-size:1.04rem; line-height:1.85; }
.hero-buttons { justify-content:flex-start; }
.btn { padding:14px 22px; border-radius:999px; }
.btn-primary { background:linear-gradient(110deg,#aa37f5,#7127ed); box-shadow:0 8px 32px rgba(139,48,237,.31); }
.btn-ghost { border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04); }
.hero-scene { position:relative; z-index:1; height:490px; min-width:0; perspective:1000px; }
.scene-orbit { position:absolute; left:50%;top:50%; border:1px solid rgba(201,144,255,.18); border-radius:50%; transform:translate(-50%,-50%) rotate(-20deg); }
.orbit-one { width:440px;height:295px;animation:orbitDrift 18s linear infinite; }
.orbit-two { width:520px;height:360px;border-color:rgba(89,228,212,.12);transform:translate(-50%,-50%) rotate(36deg);animation:orbitDrift 27s linear infinite reverse; }
.scene-card { position:absolute; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; border:1px solid rgba(255,255,255,.23); border-radius:16px; box-shadow:0 25px 75px rgba(0,0,0,.48); transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s; }
.scene-card::before { content:'';position:absolute;inset:0;opacity:.88;z-index:-1; }
.scene-card strong { color:#fff; font-size:1.45rem;line-height:.88;letter-spacing:-.06em; }
.scene-card small { margin-top:10px;color:rgba(255,255,255,.7);font: .59rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase; }
.scene-number { position:absolute;left:19px;top:17px;color:rgba(255,255,255,.75);font: .57rem 'JetBrains Mono',monospace;letter-spacing:.14em; }
.scene-algorithm { width:196px;height:270px;left:13%;top:15%;transform:rotate(-9deg);animation:posterFloat 7s ease-in-out infinite; }
.scene-algorithm::before { background:linear-gradient(165deg,transparent 15%,rgba(8,7,13,.08) 30%,#27133c 100%),radial-gradient(ellipse at 67% 34%,#dd87ff,transparent 34%),linear-gradient(135deg,#44145b,#111722 72%); }
.scene-algorithm strong { font-size:2rem; }
.algorithm-mark { position:absolute;left:25px;top:90px;display:flex;align-items:flex-end;gap:7px;height:88px;transform:skewY(-18deg); }
.algorithm-mark i { width:19px;border-radius:12px 12px 2px 2px;background:linear-gradient(#f5c1ff,#a63bff);box-shadow:0 0 20px #b746ff;animation:barPulse 1.8s ease-in-out infinite alternate; }
.algorithm-mark i:nth-child(1){height:32px}.algorithm-mark i:nth-child(2){height:56px;animation-delay:.15s}.algorithm-mark i:nth-child(3){height:82px;animation-delay:.3s}.algorithm-mark i:nth-child(4){height:47px;animation-delay:.45s}.algorithm-mark i:nth-child(5){height:68px;animation-delay:.6s}
.scene-network { width:212px;height:292px;right:8%;top:9%;transform:rotate(8deg);animation:posterFloat 8s -2s ease-in-out infinite; }
.scene-network::before { background:linear-gradient(170deg,transparent 5%,rgba(6,8,17,.18) 45%,#09141a 100%),radial-gradient(ellipse at 48% 45%,#27bfc4,transparent 34%),linear-gradient(135deg,#17234b,#081014 90%); }
.scene-network strong { font-size:1.78rem; }
.network-mark { position:absolute;inset:70px 25px 80px; }
.network-mark::before { content:'';position:absolute;inset:13px 18px;background:linear-gradient(30deg,transparent 48%,rgba(119,247,237,.72) 49%,transparent 50%),linear-gradient(145deg,transparent 48%,rgba(119,247,237,.6) 49%,transparent 50%),linear-gradient(90deg,transparent 49%,rgba(119,247,237,.48) 50%,transparent 51%); }
.network-mark i,.network-mark b { position:absolute;width:10px;height:10px;border:2px solid #c6fff5;border-radius:50%;background:#1ebbb7;box-shadow:0 0 14px #43f8e5; }
.network-mark i:nth-child(1){left:5%;top:35%}.network-mark i:nth-child(2){left:30%;top:6%}.network-mark i:nth-child(3){right:8%;top:20%}.network-mark i:nth-child(4){left:20%;bottom:8%}.network-mark i:nth-child(5){right:26%;bottom:12%}.network-mark i:nth-child(6){right:1%;bottom:37%}.network-mark b{left:52%;top:47%;width:14px;height:14px;background:#e9a6ff;border-color:#f0d5ff;box-shadow:0 0 18px #d782ff;}
.scene-binary { width:134px;height:154px;left:44%;bottom:7%;transform:rotate(7deg);animation:posterFloat 6s -1s ease-in-out infinite; }
.scene-binary::before { background:linear-gradient(160deg,transparent,#092a2c),radial-gradient(circle at 50% 25%,#42dcca,transparent 32%),linear-gradient(135deg,#134b51,#10131f); }
.scene-binary strong { font:1.42rem 'JetBrains Mono',monospace;color:#8affec;letter-spacing:.16em; }
.scene-binary small { font-size:.48rem; }
.scene-orb { position:absolute;right:38%;top:17%;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;color:#24122e;font-size:1.8rem;background:linear-gradient(145deg,#fff0b6,#d887ff);box-shadow:0 0 55px rgba(218,130,255,.58);animation:orbPulse 4s ease-in-out infinite; }
.scene-caption { position:absolute;right:0;bottom:9%;color:#b9adc4;font: .62rem 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase; }
@keyframes posterFloat { 0%,100%{translate:0 0}50%{translate:0 -13px} }
@keyframes orbitDrift { to { rotate:360deg } }
@keyframes barPulse { from {filter:brightness(.72);scale:1 .84}to{filter:brightness(1.3);scale:1 1} }
@keyframes orbPulse { 0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(218,130,255,.4)}50%{transform:scale(1.09);box-shadow:0 0 70px rgba(218,130,255,.72)} }
.ticker { border-block-color:rgba(255,255,255,.09);background:linear-gradient(90deg,rgba(103,27,128,.17),rgba(15,81,80,.13)); }
.ticker div { padding:19px 0;color:#c0b3cd;letter-spacing:.2em; }
.ticker b { color:#c46fff; }
.stats { max-width:1120px;padding-top:35px; }
.stat { border-radius:16px;background:rgba(255,255,255,.035);backdrop-filter:blur(10px); }
.container { max-width:1240px;padding-top:82px;padding-bottom:80px; }
.section-head h2 { font-size:clamp(2rem,4vw,3rem);letter-spacing:-.07em; }
.eyebrow { color:#dc9eff;font-size:.65rem;letter-spacing:.21em; }
.text-link { color:#e8dfef; }
.grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:16px; }
.card { min-height:340px;padding:205px 22px 24px;overflow:hidden;border-radius:15px;background:#14111a;border-color:rgba(255,255,255,.11); }
.card::before { content:'';position:absolute;z-index:0;inset:0 0 auto;height:70%;opacity:.94;mask-image:linear-gradient(#000 68%,transparent 100%);background:radial-gradient(ellipse at 50% 25%,rgba(232,166,255,.85),transparent 20%),radial-gradient(ellipse at 66% 52%,rgba(117,48,174,.7),transparent 43%),linear-gradient(140deg,#321843,#131a28 62%,#101014);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s; }
.card:nth-child(4n+2)::before { background:radial-gradient(ellipse at 28% 43%,rgba(100,228,215,.78),transparent 23%),radial-gradient(ellipse at 64% 38%,rgba(38,111,146,.65),transparent 43%),linear-gradient(145deg,#132d42,#101018 75%); }
.card:nth-child(4n+3)::before { background:radial-gradient(ellipse at 50% 35%,rgba(250,168,109,.8),transparent 24%),radial-gradient(ellipse at 60% 50%,rgba(176,62,71,.65),transparent 47%),linear-gradient(145deg,#3e202b,#111018 76%); }
.card:nth-child(4n)::before { background:radial-gradient(ellipse at 42% 33%,rgba(159,151,255,.8),transparent 26%),radial-gradient(ellipse at 65% 52%,rgba(69,60,166,.7),transparent 48%),linear-gradient(145deg,#252047,#111018 78%); }
.card:hover::before { transform:scale(1.08);filter:saturate(1.3); }
.card > * { position:relative;z-index:1; }
.card::after { z-index:2;right:21px;bottom:20px;color:rgba(255,255,255,.65); }
.card .tag { color:#e3fcf7;background:rgba(24,27,35,.63);backdrop-filter:blur(8px); }
.card h3 { font-size:1.18rem;margin-bottom:7px; }
.card p { color:#c5bacd;font-size:.87rem;line-height:1.55; }
.card .time { margin-top:11px;color:#aaa0b3; }
.bookmark { z-index:2; }
.topic-wall { padding-top:68px;padding-bottom:95px; }
.topic-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px; }
.topic-tile { position:relative;display:flex;min-height:236px;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:23px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#17111f;isolation:isolate;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s; }
.topic-tile::before { content:'';position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 68% 30%,rgba(195,87,255,.77),transparent 30%),linear-gradient(145deg,#451849,#14121a 72%);transition:transform .7s; }
.topic-tile::after { content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(9,7,13,.02),rgba(9,7,13,.78)); }
.topic-tile:hover { transform:translateY(-7px) rotateX(2deg);border-color:rgba(223,158,255,.55);box-shadow:0 24px 60px rgba(104,40,133,.2); }
.topic-tile:hover::before { transform:scale(1.1); }
.topic-tile>span { position:absolute;top:19px;left:20px;color:rgba(255,255,255,.74);font: .56rem 'JetBrains Mono',monospace;letter-spacing:.13em; }
.topic-tile strong { font-size:1.48rem;line-height:1.03;letter-spacing:-.05em; }
.topic-tile>i { position:absolute;right:20px;bottom:23px;color:#fff;font-style:normal; }
.topic-networks::before { background:radial-gradient(ellipse at 62% 32%,rgba(40,232,212,.75),transparent 31%),linear-gradient(145deg,#153947,#13131c 77%); }
.topic-security::before { background:radial-gradient(ellipse at 55% 34%,rgba(255,166,117,.72),transparent 29%),linear-gradient(145deg,#4a2631,#15121b 76%); }
.topic-systems::before { background:radial-gradient(ellipse at 55% 30%,rgba(132,144,255,.78),transparent 30%),linear-gradient(145deg,#272751,#15121b 76%); }
.tile-art { position:absolute;top:51px;left:50%;width:130px;height:105px;display:flex;align-items:center;justify-content:center;transform:translateX(-50%);color:rgba(255,255,255,.8);font-size:3rem;opacity:.76; }
.network-art { border:1px solid rgba(146,255,240,.6);border-radius:50%;width:74px;height:74px;box-shadow:0 0 0 17px rgba(80,232,220,.05),0 0 0 34px rgba(80,232,220,.04); }
.network-art b { position:absolute;width:8px;height:8px;border-radius:50%;background:#a5fff0;box-shadow:0 0 13px #73ffe9; }
.network-art b:nth-child(2){left:-4px;top:18px}.network-art b:nth-child(3){right:8px;top:-4px}.network-art b:nth-child(4){right:-4px;bottom:14px}.network-art b:nth-child(5){left:14px;bottom:-4px}
.data-art { display:grid;grid-template-columns:repeat(2,1fr);width:100px;height:82px;gap:5px;transform:translateX(-50%) rotate(-8deg); }
.data-art b { display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.09);font: .85rem 'JetBrains Mono',monospace; }
.security-art { color:#ffe3b7;font-size:5rem;text-shadow:0 0 30px #ffad78; }
.system-art { display:grid;grid-template-columns:1fr 1fr;width:80px;height:80px;gap:6px;transform:translateX(-50%) rotate(45deg); }
.system-art b { border:1px solid rgba(220,218,255,.65);background:rgba(196,188,255,.14);border-radius:5px; }
.labs { padding-top:74px; }
.lab { border-radius:18px;background:rgba(255,255,255,.035); }
.page-intro { padding-top:108px;padding-bottom:74px; }
.page-intro h1 { font-size:clamp(3.3rem,7vw,6.2rem); }
.page-intro::after { width:230px;height:230px;right:13%;border-color:rgba(209,126,255,.24);box-shadow:0 0 0 32px rgba(193,104,255,.04),0 0 0 64px rgba(193,104,255,.025),0 0 95px rgba(154,52,255,.12); }
.about-stamp { background:radial-gradient(circle at 50% 40%,rgba(187,86,255,.28),transparent 70%);box-shadow:0 0 65px rgba(169,71,244,.14); }
.about-values article { transition:transform .3s,border-color .3s,background .3s; }
.about-values article:hover { transform:translateY(-5px);border-color:rgba(199,131,255,.42);background:rgba(255,255,255,.05); }
.footer { background:linear-gradient(90deg,rgba(99,29,118,.08),rgba(255,255,255,.015),rgba(17,101,97,.06)); }
body { animation:pageEnter .7s cubic-bezier(.2,.7,.2,1) both; }
.reveal { transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }
@media(max-width:1050px){ .hero{grid-template-columns:1fr 1fr;padding-inline:5%;min-height:610px}.scene-algorithm{left:5%}.scene-network{right:1%}.grid,.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card{min-height:320px;} }
@media(max-width:700px){ .hero{grid-template-columns:1fr;gap:0;padding:75px 6% 50px;min-height:0;text-align:left}.hero h1{font-size:clamp(3.8rem,14vw,5.7rem)}.hero-scene{height:360px;width:100%;max-width:470px;margin:0 auto}.scene-algorithm{width:160px;height:225px;left:8%;top:13%}.scene-network{width:174px;height:236px;right:7%;top:8%}.scene-binary{width:110px;height:125px;left:42%;bottom:3%}.scene-caption{right:0;bottom:0;font-size:.5rem}.orbit-one{width:340px;height:230px}.orbit-two{width:400px;height:285px}.scene-orb{right:37%;top:13%;width:44px;height:44px}.topic-wall{padding-top:52px;padding-bottom:65px}.topic-grid{gap:10px}.topic-tile{min-height:205px;padding:17px}.tile-art{top:43px;scale:.82}.topic-tile>span{left:15px;font-size:.48rem}.topic-tile strong{font-size:1.25rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card{min-height:300px;padding:166px 15px 20px}.card h3{font-size:1.05rem}.card p{font-size:.79rem}.page-intro{padding-top:80px;padding-bottom:55px}.page-intro::after{width:130px;height:130px;right:7%;top:18%}.about-story{gap:30px} }
@media(max-width:450px){.grid{grid-template-columns:1fr}.card{min-height:330px;padding-top:200px}.topic-grid{grid-template-columns:1fr 1fr}.topic-tile{min-height:180px}.stats .label{font-size:.58rem}.hero-buttons{gap:8px}.hero-buttons .btn{padding:13px 15px;font-size:.86rem}}
@media(prefers-reduced-motion:reduce){.scene-card,.scene-orbit,.scene-orb,.algorithm-mark i{animation:none!important}.topic-tile,.card{transition:none!important}}
/* Poster artwork + depth on hover */
.card .card-cover { position:absolute!important;inset:0 0 auto;height:190px;z-index:0!important;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none; }
.card .card-cover::before { content:'';position:absolute;inset:17px 26px 4px;border:1px solid rgba(255,255,255,.18);border-radius:48% 48% 8px 8px;transform:rotate(-7deg);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,0)); }
.card .card-cover b { position:relative;color:rgba(255,255,255,.88);font-size:4.5rem;font-weight:500;letter-spacing:-.08em;text-shadow:0 8px 35px rgba(0,0,0,.35);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .4s; }
.card .card-cover span,.card .card-cover i { position:absolute;top:15px;color:rgba(255,255,255,.7);font: .48rem 'JetBrains Mono',monospace;letter-spacing:.15em; }
.card .card-cover span {left:19px}.card .card-cover i {right:19px;top:auto;bottom:12px;font-style:normal;}
.card:nth-child(3n+2) .card-cover::before { border-radius:10px 50% 8px 8px;transform:rotate(8deg); }
.card:nth-child(3n) .card-cover::before { border-radius:50%;transform:rotate(-14deg) scale(.84); }
.card:hover { transform:perspective(900px) rotateX(1.2deg) translateY(-7px);border-color:rgba(223,158,255,.58);box-shadow:0 22px 60px rgba(0,0,0,.38),0 0 32px rgba(155,70,255,.12); }
.card:hover .card-cover b { transform:scale(1.12) rotate(-7deg);filter:drop-shadow(0 0 20px rgba(246,176,255,.65)); }
.topic-tile:hover { transform:perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-7px); }
.topic-tile:focus-visible,.btn:focus-visible,.text-link:focus-visible,.nav-links a:focus-visible { outline:2px solid #8df3e0;outline-offset:4px; }
.hero-copy > * { opacity:0;animation:slideFromLeft .8s cubic-bezier(.2,.75,.2,1) forwards; }
.hero-copy > :nth-child(1){animation-delay:.08s}.hero-copy > :nth-child(2){animation-delay:.17s}.hero-copy > :nth-child(3){animation-delay:.27s}.hero-copy > :nth-child(4){animation-delay:.38s}.hero-copy > :nth-child(5){animation-delay:.49s}
.hero-scene { opacity:0;animation:slideFromRight 1s cubic-bezier(.18,.72,.2,1) .19s forwards; }
.page-intro { animation:slideFromLeft .8s cubic-bezier(.2,.75,.2,1) both; }
@keyframes slideFromLeft { from{opacity:0;transform:translate3d(-36px,0,0)}to{opacity:1;transform:translate3d(0,0,0)} }
@keyframes slideFromRight { from{opacity:0;transform:translate3d(38px,0,0)}to{opacity:1;transform:translate3d(0,0,0)} }
@media(max-width:700px){.hero-scene{animation:slideFromRight .85s cubic-bezier(.18,.72,.2,1) .2s both}}
@media(prefers-reduced-motion:reduce){.hero-copy>* ,.hero-scene,.page-intro{animation:none!important;opacity:1!important;transform:none!important}}
/* =========================================================
   Interactive concept map
   ========================================================= */
.page-map { background-image:radial-gradient(ellipse at 50% 17%,rgba(103,38,131,.20),transparent 43%),radial-gradient(ellipse at 90% 60%,rgba(18,101,99,.12),transparent 33%); }
.map-page { overflow:hidden; }
.map-intro { max-width:1320px;padding-top:85px;padding-bottom:48px; }
.map-intro h1 { font-size:clamp(3.5rem,7.5vw,6.4rem); }
.map-intro::after { width:250px;height:250px;top:11%;right:10%;border-color:rgba(199,120,255,.19);box-shadow:0 0 0 34px rgba(184,103,255,.035),0 0 0 68px rgba(184,103,255,.025),0 0 110px rgba(148,57,241,.16); }
.map-explorer { max-width:1320px;margin:0 auto;padding:0 8% 25px; }
.map-tools { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:17px; }
.map-search-wrap { display:flex;align-items:center;gap:10px;min-width:220px;padding:9px 13px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.035);color:var(--muted); }
.map-search-wrap>span { color:#d8a0ff;font-size:1.3rem;line-height:1; }
.map-search-wrap input { width:100%;border:0;outline:0;background:transparent;color:var(--text);font: .82rem 'Space Grotesk',sans-serif; }
.map-search-wrap input::placeholder { color:#94889e; }
.map-search-wrap:focus-within { border-color:#b770ff;box-shadow:0 0 24px rgba(162,81,230,.16); }
.map-search-wrap kbd { padding:2px 6px;border:1px solid rgba(255,255,255,.14);border-radius:5px;color:#94889e;font: .62rem 'JetBrains Mono',monospace; }
.map-filters { display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap; }
.map-filter { padding:7px 11px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.025);color:#b7aabd;font: .7rem 'Space Grotesk',sans-serif;cursor:pointer;transition:color .2s,background .2s,border-color .2s,transform .2s; }
.map-filter:hover { color:#fff;border-color:rgba(190,118,255,.65);transform:translateY(-1px); }
.map-filter.is-active { color:#fff;border-color:transparent;background:linear-gradient(110deg,#a947ef,#702de4);box-shadow:0 4px 18px rgba(151,62,225,.26); }
.map-stage-viewport { overflow-x:auto;overflow-y:hidden;padding-bottom:5px;scrollbar-color:rgba(181,118,228,.5) rgba(255,255,255,.035);scrollbar-width:thin; }
.map-stage { position:relative;isolation:isolate;width:100%;min-width:900px;aspect-ratio:1000/620;overflow:hidden;border:1px solid rgba(218,185,255,.15);border-radius:19px;background-color:#0e0c13;background-image:radial-gradient(ellipse at 49% 48%,rgba(133,51,166,.14),transparent 35%),radial-gradient(ellipse at 80% 26%,rgba(13,106,102,.10),transparent 32%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,auto,32px 32px,32px 32px;box-shadow:inset 0 0 75px rgba(0,0,0,.38),0 22px 75px rgba(0,0,0,.2); }
.map-stage::before { content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 42%,rgba(4,4,8,.36));z-index:4; }
.map-lines { position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible; }
.map-edge { fill:none;stroke:rgba(178,131,215,.39);stroke-width:1.7;vector-effect:non-scaling-stroke;stroke-dasharray:4 6;transition:stroke .3s,opacity .3s,stroke-width .3s;animation:mapFlow 22s linear infinite; }
.map-edge.is-active { stroke:url(#lineGradient);stroke-width:2.5;stroke-dasharray:7 8;opacity:.95;filter:drop-shadow(0 0 5px rgba(186,99,255,.46)); }
.map-edge.is-filtered { opacity:.08; }
@keyframes mapFlow { to { stroke-dashoffset:-200; } }
.map-core { position:absolute;z-index:2;left:50%;top:50%;width:105px;height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid rgba(209,158,255,.45);border-radius:50%;background:radial-gradient(circle at 40% 20%,rgba(179,95,240,.26),rgba(23,17,31,.95) 70%);box-shadow:0 0 0 12px rgba(167,93,221,.055),0 0 48px rgba(152,76,220,.19);transform:translate(-50%,-50%);pointer-events:none;text-align:center; }
.map-core::after { content:'';position:absolute;inset:-10px;border:1px solid rgba(127,218,209,.16);border-radius:50%;animation:corePulse 4s ease-out infinite; }
.map-core span { color:#fff;font-size:1.65rem;font-weight:700;letter-spacing:-.09em; }
.map-core small { color:#b9a9c6;font: .48rem 'JetBrains Mono',monospace;line-height:1.3;letter-spacing:.08em;text-transform:uppercase; }
@keyframes corePulse { 0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.34);opacity:0} }
.map-node { position:absolute;z-index:3;left:var(--x);top:var(--y);width:176px;min-height:72px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(224,205,240,.19);border-radius:12px;background:linear-gradient(135deg,rgba(31,25,39,.96),rgba(14,13,20,.96));color:#fff;text-align:left;transform:translate(-50%,-50%);cursor:pointer;box-shadow:0 10px 27px rgba(0,0,0,.33);transition:opacity .25s,filter .25s,background .25s,border-color .25s,box-shadow .25s,scale .25s; }
.map-node:hover { z-index:5;border-color:rgba(211,154,255,.72);background:linear-gradient(135deg,rgba(65,35,81,.98),rgba(20,17,29,.98));box-shadow:0 12px 34px rgba(117,44,161,.28);scale:1.045; }
.map-node.is-selected { border-color:#ca85ff;background:linear-gradient(125deg,rgba(112,46,145,.97),rgba(22,18,31,.98));box-shadow:0 0 0 3px rgba(185,105,242,.11),0 0 35px rgba(160,72,225,.27); }
.map-node.is-related { border-color:rgba(99,224,207,.45); }
.map-node.is-dimmed { opacity:.45; }
.map-node.is-filtered { opacity:.12;filter:grayscale(.8);pointer-events:none; }
.node-icon { flex:0 0 37px;width:37px;height:37px;display:grid;place-items:center;border:1px solid rgba(219,159,255,.28);border-radius:10px;background:linear-gradient(145deg,rgba(180,102,237,.22),rgba(84,217,201,.1));color:#e8bcff;font: .95rem 'JetBrains Mono',monospace; }
.map-node[data-category="Networks"] .node-icon,.map-node[data-category="Systems"] .node-icon { border-color:rgba(94,226,208,.31);color:#86f0dd;background:rgba(45,202,174,.1); }
.map-node[data-category="Security"] .node-icon { border-color:rgba(255,166,128,.32);color:#ffc49b;background:rgba(245,129,97,.1); }
.node-copy { display:flex;min-width:0;flex-direction:column;gap:4px; }
.node-copy small { color:#aa9ab5;font: .47rem 'JetBrains Mono',monospace;letter-spacing:.1em; }
.node-copy b { overflow:hidden;color:#f6effa;font-size:.86rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap; }
.node-no { align-self:flex-start;margin-left:auto;color:rgba(225,208,240,.48);font: .52rem 'JetBrains Mono',monospace; }
.map-legend { display:flex;justify-content:space-between;gap:16px;padding:12px 3px;color:#93889b;font: .57rem 'JetBrains Mono',monospace;letter-spacing:.09em;text-transform:uppercase; }
.map-legend span:first-child { display:flex;align-items:center;gap:8px; }
.map-legend i { width:23px;border-top:1px dashed #b77be5; }
.map-legend b { color:#74e1d3;font-size:.9rem; }
.concept-detail { position:relative;display:grid;grid-template-columns:80px minmax(0,1fr) auto;align-items:center;gap:25px;max-width:1140px;margin:29px auto 100px;padding:30px 34px;border:1px solid rgba(209,172,236,.16);border-radius:17px;background:linear-gradient(120deg,rgba(37,21,48,.72),rgba(17,16,23,.88) 45%,rgba(15,35,35,.42));box-shadow:0 20px 60px rgba(0,0,0,.2); }
.detail-number { color:rgba(201,144,246,.52);font: 2.6rem 'JetBrains Mono',monospace;letter-spacing:-.12em; }
.detail-main { min-width:0; }
.detail-main h2 { margin:6px 0 7px;color:#fff;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.07em; }
.detail-main>p { max-width:660px;margin:0;color:#b9adbf;line-height:1.7;font-size:.91rem; }
.related-list { display:flex;flex-wrap:wrap;gap:7px;margin-top:14px; }
.related-concept { padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.035);color:#d8c7e6;font: .67rem 'Space Grotesk',sans-serif;cursor:pointer;transition:all .2s; }
.related-concept:hover { border-color:#69dccc;color:#fff;background:rgba(58,184,164,.1); }
.detail-actions { display:flex;flex-direction:column;align-items:flex-start;gap:9px; }
.detail-actions .btn { white-space:nowrap;font-size:.8rem;padding:11px 16px; }
.copy-map-link { border-color:rgba(255,255,255,.13);color:#c3b5cc; }
.map-status { min-height:1em;color:#7ae1d2;font-size:.67rem; }
body.page-map .footer { margin-top:0; }
body.page-map .navbar { position:sticky; }
.page-map .nav-links a[data-page="map"]::after { width:100%; }
.page-map .nav-links a[data-page="map"] { color:#fff; }
@media(max-width:1050px){ .map-tools{align-items:flex-start;flex-direction:column}.map-filters{justify-content:flex-start}.concept-detail{margin-inline:5%;} }
@media(max-width:700px){ .map-intro{padding-top:70px;padding-bottom:40px}.map-intro::after{width:145px;height:145px;right:7%;top:15%}.map-explorer{padding:0 5% 20px}.map-search-wrap{width:100%}.map-stage{width:950px;min-width:950px;aspect-ratio:1000/620}.map-stage-viewport::after{content:'Scroll sideways to see the whole map  →';display:block;padding:7px 2px 4px;color:#84768c;font: .58rem 'JetBrains Mono',monospace;letter-spacing:.08em}.map-legend{align-items:flex-start;flex-direction:column;gap:6px;font-size:.52rem}.concept-detail{grid-template-columns:46px minmax(0,1fr);gap:14px;margin:20px 5% 65px;padding:22px 18px}.detail-number{font-size:1.8rem;align-self:start}.detail-actions{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center}.detail-main h2{font-size:2rem}.detail-main>p{font-size:.84rem} }
@media(prefers-reduced-motion:reduce){.map-edge,.map-core::after{animation:none!important}}
[data-theme="light"] .page-map { background-color:#f7f3fa;background-image:radial-gradient(ellipse at 50% 17%,rgba(199,132,228,.15),transparent 43%); }
[data-theme="light"] .map-stage { background-color:#f0eaf4;background-image:radial-gradient(ellipse at 49% 48%,rgba(179,111,202,.15),transparent 35%),radial-gradient(ellipse at 80% 26%,rgba(56,160,148,.10),transparent 32%),linear-gradient(rgba(38,24,48,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(38,24,48,.06) 1px,transparent 1px);box-shadow:inset 0 0 75px rgba(65,38,76,.05),0 22px 75px rgba(0,0,0,.08); }
[data-theme="light"] .map-node { color:#21182a;border-color:rgba(90,61,108,.2);background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,236,249,.97));box-shadow:0 10px 27px rgba(60,34,71,.12); }
[data-theme="light"] .node-copy b,[data-theme="light"] .detail-main h2 { color:#23172b; }
[data-theme="light"] .node-copy small,[data-theme="light"] .map-legend,[data-theme="light"] .detail-main>p { color:#685b70; }
[data-theme="light"] .concept-detail { background:linear-gradient(120deg,rgba(243,225,250,.93),rgba(255,255,255,.95) 48%,rgba(225,247,243,.8)); }
[data-theme="light"] .map-filter { color:#66576e;background:rgba(255,255,255,.55); }
[data-theme="light"] .map-filter.is-active { color:#fff; }
/* =========================================================
   Guided learning paths
   ========================================================= */
.paths-page { max-width:1350px;margin:0 auto;overflow:hidden; }
.paths-intro { max-width:none;padding:86px 8% 55px; }
.paths-intro::after { width:220px;height:220px;right:12%;top:16%; }
.learning-overview { position:relative;display:grid;grid-template-columns:minmax(250px,1fr) minmax(210px,.55fr) auto;align-items:center;gap:28px;margin:5px 8% 80px;padding:25px 28px;border:1px solid rgba(223,191,250,.16);border-radius:17px;background:linear-gradient(110deg,rgba(66,32,81,.45),rgba(23,19,30,.88) 55%,rgba(20,64,62,.28));box-shadow:0 18px 55px rgba(0,0,0,.18); }
.learning-overview::before { content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 8% 50%,rgba(166,83,229,.11),transparent 42%); }
.overview-copy h2 { margin:8px 0 5px;font-size:1.45rem;letter-spacing:-.05em; }
.overview-copy p { margin:0;color:var(--muted);font-size:.82rem;line-height:1.6; }
.overview-progress { display:flex;align-items:center;gap:15px; }
.overview-numbers { display:flex;flex-direction:column;gap:2px; }
.overview-numbers strong { color:#fff;font: 1.9rem 'JetBrains Mono',monospace;letter-spacing:-.1em; }
.overview-numbers span { color:#d7ccdf;font-size:.75rem; }
.overview-numbers small { color:#96889f;font:.58rem 'JetBrains Mono',monospace; }
.overview-ring { width:57px;height:57px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#78e2d4 var(--completion,0%),rgba(255,255,255,.1) 0);position:relative; }
.overview-ring::before { content:'';position:absolute;inset:4px;border-radius:50%;background:#19141f; }
.overview-ring span { position:relative;color:#dba5ff;font-size:1.25rem; }
.resume-button { white-space:nowrap;font-size:.8rem;padding:12px 16px; }
.paths-catalog { padding:0 8% 10px; }
.paths-catalog .section-head { margin-bottom:23px; }
.path-grid { display:grid;grid-template-columns:1fr;gap:22px; }
.path-card { display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr);overflow:hidden;border:1px solid rgba(226,203,246,.14);border-radius:19px;background:linear-gradient(110deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 20px 65px rgba(0,0,0,.16);scroll-margin-top:90px;transition:border-color .3s,box-shadow .3s; }
.path-card:hover { border-color:rgba(211,157,255,.34);box-shadow:0 24px 74px rgba(0,0,0,.22); }
.path-cover { position:relative;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:20px;background:radial-gradient(ellipse at 45% 41%,rgba(207,98,255,.73),transparent 28%),linear-gradient(145deg,#54236e,#191222 72%);isolation:isolate; }
.path-cover::before { content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(8,6,12,.04) 35%,rgba(8,6,12,.77)); }
.path-cover>span,.path-cover>small { color:rgba(255,255,255,.72);font:.54rem 'JetBrains Mono',monospace;letter-spacing:.17em; }
.path-cover>strong { position:absolute;left:50%;top:48%;color:rgba(255,255,255,.84);font:700 clamp(3rem,7vw,5.7rem) 'JetBrains Mono',monospace;letter-spacing:-.14em;transform:translate(-50%,-50%) rotate(-8deg);text-shadow:0 0 45px rgba(247,197,255,.4); }
.path-cover>small { z-index:1; }
.path-cover-art { position:absolute;z-index:-1;left:50%;top:45%;width:165px;height:150px;transform:translate(-50%,-50%) rotate(-18deg); }
.path-cover-art::before,.path-cover-art::after { content:'';position:absolute;inset:10px 26px;border:1px solid rgba(255,255,255,.46);border-radius:50%;transform:rotate(57deg); }
.path-cover-art::after { inset:0 48px;border-color:rgba(129,248,228,.45);transform:rotate(-42deg); }
.path-cover-art i,.path-cover-art b,.path-cover-art em { position:absolute;width:12px;height:12px;border-radius:50%;background:#9fffea;box-shadow:0 0 25px #76ffdf; }
.path-cover-art i{left:20%;top:28%}.path-cover-art b{right:17%;top:37%;width:8px;height:8px;background:#ffd4ff;box-shadow:0 0 22px #e18bff}.path-cover-art em{left:50%;bottom:12%;width:6px;height:6px;}
.path-02 .path-cover { background:radial-gradient(ellipse at 54% 39%,rgba(42,223,211,.65),transparent 28%),linear-gradient(145deg,#164d57,#101921 74%); }
.path-02 .path-cover-art::before { transform:rotate(-30deg) scaleX(1.7);border-color:rgba(138,255,241,.56); }
.path-02 .path-cover-art::after { transform:rotate(43deg) scaleX(1.8);border-color:rgba(185,161,255,.46); }
.path-card-body { min-width:0;padding:25px 29px; }
.path-card-meta { display:flex;justify-content:space-between;gap:10px;color:#d8a3ff;font:.55rem 'JetBrains Mono',monospace;letter-spacing:.12em; }
.path-card-meta i { color:#9a8da3;font-style:normal; }
.path-card-body h3 { margin:13px 0 8px;color:#fff;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.07em;line-height:1.05; }
.path-card-body>p { max-width:580px;margin:0;color:#b9adbf;font-size:.86rem;line-height:1.7; }
.path-facts { display:flex;align-items:center;gap:8px;margin:16px 0 17px;color:#b7a8c3;font:.57rem 'JetBrains Mono',monospace;letter-spacing:.1em; }
.path-facts b { color:#60dfd1; }
.path-progress { max-width:580px;margin-bottom:17px; }
.path-progress-label { display:flex;justify-content:space-between;margin-bottom:7px;color:#96899c;font:.53rem 'JetBrains Mono',monospace;letter-spacing:.12em; }
.path-progress-label b { color:#d5c8dd;font-weight:400; }
.path-progress-track { height:4px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1); }
.path-progress-track i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a755ec,#6de0d1);box-shadow:0 0 12px rgba(114,219,210,.45);transition:width .5s cubic-bezier(.2,.7,.2,1); }
.path-card-actions { display:flex;align-items:center;gap:13px;flex-wrap:wrap; }
.path-card-actions .btn { font-size:.75rem;padding:11px 15px; }
.path-expand,.path-restart { padding:8px 0;border:0;background:transparent;color:#b6a8c0;font:.7rem 'Space Grotesk',sans-serif;cursor:pointer; }
.path-expand:hover,.path-restart:hover { color:#fff; }
.path-expand span { margin-left:5px;color:#d49aff;font-size:1rem; }
.path-restart { color:#8bded2; }
.path-steps { grid-column:1/-1;display:flex;flex-direction:column;margin:0;padding:0 28px 12px;list-style:none; }
.path-steps[hidden] { display:none; }
.path-step { display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:start;gap:15px;padding:20px 0;border-top:1px solid rgba(255,255,255,.085); }
.step-marker { width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(205,167,231,.24);border-radius:50%;color:#be9ad6;background:rgba(255,255,255,.03);font:.62rem 'JetBrains Mono',monospace; }
.step-current .step-marker { border-color:#bc7ce7;color:#fff;background:rgba(158,73,206,.2);box-shadow:0 0 20px rgba(174,96,232,.17); }
.step-done .step-marker { border-color:rgba(112,231,209,.48);color:#7fe4d4;background:rgba(49,181,157,.12); }
.step-locked { opacity:.5; }
.step-copy { min-width:0; }
.step-meta { display:flex;gap:10px;align-items:center;color:#d5a3f4;font:.52rem 'JetBrains Mono',monospace;letter-spacing:.13em; }
.step-meta i { color:#918696;font-style:normal; }
.step-copy h3 { margin:6px 0 4px;color:#f7f1fb;font-size:1rem;letter-spacing:-.025em; }
.step-copy p { max-width:650px;margin:0;color:#a99eaf;font-size:.77rem;line-height:1.55; }
.step-links { display:flex;flex-wrap:wrap;gap:14px;margin-top:9px; }
.step-resource,.step-extra { color:#e4c4ff;text-decoration:none;font-size:.7rem; }
.step-resource:hover,.step-extra:hover { color:#79eadb; }
.step-extra { color:#8de4d5; }
.step-resource span,.step-extra span { margin-left:3px; }
.step-lock { color:#918694;font-size:.66rem; }
.step-complete { align-self:center;min-width:127px;padding:8px 11px;border:1px solid rgba(205,171,228,.19);border-radius:999px;background:rgba(255,255,255,.035);color:#e4d9eb;font:.65rem 'Space Grotesk',sans-serif;cursor:pointer;transition:all .2s; }
.step-complete:not(:disabled):hover { border-color:#74ddcf;color:#fff;background:rgba(57,167,149,.12); }
.step-complete:disabled { color:#766c7c;cursor:default; }
.step-done .step-complete { border-color:rgba(111,217,193,.19);color:#80ccbc; }
.local-progress-note { display:flex;justify-content:center;align-items:center;gap:8px;margin:0 8% 85px;color:#918499;font:.62rem 'JetBrains Mono',monospace;letter-spacing:.05em; }
.local-progress-note span { color:#74dccc; }
.path-callout { display:grid;grid-template-columns:125px minmax(0,1fr) auto;align-items:center;gap:24px;margin:30px auto 20px;padding:24px 27px;border:1px solid rgba(216,175,244,.17);border-radius:17px;background:linear-gradient(105deg,rgba(63,31,83,.47),rgba(19,18,25,.91) 57%,rgba(22,70,65,.24)); }
.path-callout h2 { margin:6px 0;font-size:1.45rem;letter-spacing:-.05em; }
.path-callout p { margin:0;color:#b7abbf;font-size:.8rem;line-height:1.55; }
.path-callout-art { position:relative;width:94px;height:74px;display:grid;place-items:center;color:#e4b6ff;font:1rem 'JetBrains Mono',monospace; }
.path-callout-art span { position:relative;z-index:2; }
.path-callout-art i,.path-callout-art b,.path-callout-art em { position:absolute;width:51px;height:51px;border:1px solid rgba(211,143,255,.5);border-radius:50%;transform:rotate(48deg) scaleX(1.55); }
.path-callout-art b { border-color:rgba(104,225,210,.48);transform:rotate(-48deg) scaleX(1.55); }
.path-callout-art em { width:6px;height:6px;border:0;background:#9c54ef;box-shadow:0 0 13px #bd7fff; }
.path-callout .btn { white-space:nowrap;font-size:.75rem;padding:12px 15px; }
[data-theme="light"] .learning-overview,[data-theme="light"] .path-card,[data-theme="light"] .path-callout { background:linear-gradient(110deg,rgba(244,226,251,.95),rgba(255,255,255,.95) 55%,rgba(225,248,242,.85)); }
[data-theme="light"] .path-card-body h3,[data-theme="light"] .step-copy h3,[data-theme="light"] .overview-copy h2 { color:#23172b; }
[data-theme="light"] .path-card-body>p,[data-theme="light"] .step-copy p,[data-theme="light"] .overview-copy p { color:#695d70; }
[data-theme="light"] .step-complete { color:#574b5e;background:#fff; }
@media(max-width:1000px){.learning-overview{grid-template-columns:1fr auto;}.resume-button{grid-column:1/-1;justify-self:start}.path-card{grid-template-columns:220px 1fr}.path-cover{min-height:350px}.path-card-body{padding:23px}.path-steps{padding-inline:22px}}
@media(max-width:700px){.paths-intro{padding:73px 5% 45px}.paths-intro::after{width:135px;height:135px;right:7%;top:17%}.learning-overview{grid-template-columns:1fr auto;gap:14px;margin:0 5% 55px;padding:19px}.overview-copy{grid-column:1/-1}.overview-progress{grid-column:1}.resume-button{grid-column:2;grid-row:2;justify-self:end}.paths-catalog{padding-inline:5%}.path-card{grid-template-columns:1fr}.path-cover{min-height:220px}.path-cover>strong{font-size:4rem}.path-card-body{padding:21px}.path-steps{padding:0 19px}.path-step{grid-template-columns:32px minmax(0,1fr);gap:11px}.step-complete{grid-column:2;justify-self:start}.path-callout{grid-template-columns:70px minmax(0,1fr);gap:14px;padding:19px;margin-inline:5%}.path-callout-art{width:65px;scale:.78}.path-callout .btn{grid-column:2;justify-self:start}.path-callout h2{font-size:1.2rem}.path-callout .eyebrow{font-size:.53rem}.local-progress-note{margin-inline:6%;font-size:.55rem}.nav-links{gap:8px}.nav-links a{font-size:.66rem}.navbar{padding-inline:4%}.icon-btn{width:31px;height:31px}}
/* =========================================================
   Rich, shareable concept articles
   ========================================================= */
.card .card-open { position:relative;z-index:1;display:block;height:100%;color:inherit;text-decoration:none; }
.card .card-open:focus-visible { outline:2px solid #83f1df;outline-offset:4px;border-radius:8px; }
.card .card-open:hover h3 { color:#e7baff; }
.card .bookmark { z-index:3; }
.article-page { max-width:1280px;margin:0 auto;padding:35px 8% 100px; }
.article-crumb { display:flex;align-items:center;gap:10px;margin:7px 0 28px;color:#8e8498;font:.63rem 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase; }
.article-crumb a { color:#d1b1e5;text-decoration:none;transition:color .2s; }
.article-crumb a:hover { color:#fff; }
.article-crumb span:nth-child(2) { color:#5b505e; }
.article-hero { position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:40px;min-height:330px;padding:35px 0 52px;border-bottom:1px solid rgba(255,255,255,.09); }
.article-hero-copy { max-width:780px;position:relative;z-index:2; }
.article-hero .tag { margin:0 0 20px;border-radius:999px;background:rgba(96,211,196,.11);color:#91ebdc;font: .6rem 'JetBrains Mono',monospace;letter-spacing:.11em;text-transform:uppercase; }
.article-kicker { display:block;margin:4px 0 11px;color:#d69df9;font: .62rem 'JetBrains Mono',monospace;letter-spacing:.19em; }
.article-hero h1 { margin:0;color:#fff;font-size:clamp(3.2rem,7vw,6.4rem);font-weight:700;line-height:.98;letter-spacing:-.085em; }
.article-lead { max-width:650px;margin:18px 0 17px;color:#b8adbf;font-size:1.04rem;line-height:1.75; }
.article-meta { display:flex;align-items:center;gap:10px;color:#968a9f;font: .55rem 'JetBrains Mono',monospace;letter-spacing:.1em; }
.article-meta i { color:#65dbcd;font-style:normal; }
.article-hero-art { position:relative;width:260px;height:270px;justify-self:center;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:46% 46% 14px 14px;background:radial-gradient(ellipse at 51% 35%,rgba(212,133,255,.73),transparent 27%),linear-gradient(150deg,#482257,#11141f 77%);box-shadow:0 20px 70px rgba(0,0,0,.32),0 0 70px rgba(165,76,219,.1);animation:articleArtIn .75s cubic-bezier(.2,.75,.2,1) both; }
.article-hero-art::before,.article-hero-art::after { content:'';position:absolute;width:190px;height:240px;border:1px solid rgba(255,255,255,.32);border-radius:50%;transform:rotate(37deg); }
.article-hero-art::after { width:130px;height:225px;border-color:rgba(113,235,218,.55);transform:rotate(-37deg); }
.article-hero-art>span { position:absolute;left:18px;top:17px;color:rgba(255,255,255,.65);font:.55rem 'JetBrains Mono',monospace;letter-spacing:.17em; }
.article-hero-art>b { position:relative;z-index:1;color:#fff;font:500 5rem 'JetBrains Mono',monospace;letter-spacing:-.13em;text-shadow:0 0 30px rgba(236,188,255,.6); }
.article-hero-art>i { position:absolute;right:16px;bottom:16px;width:7px;height:7px;border-radius:50%;background:#83f3dd;box-shadow:0 0 16px #83f3dd; }
.article-hero-art[data-category="binary"],.article-hero-art[data-category="internet"] { background:radial-gradient(ellipse at 51% 35%,rgba(70,229,215,.68),transparent 27%),linear-gradient(150deg,#14424b,#10141e 77%); }
.article-hero-art[data-category="database"],.article-hero-art[data-category="encryption"] { background:radial-gradient(ellipse at 51% 35%,rgba(255,164,116,.7),transparent 27%),linear-gradient(150deg,#4a2633,#11141e 77%); }
.article-hero-art[data-category="variable"],.article-hero-art[data-category="loop"] { background:radial-gradient(ellipse at 51% 35%,rgba(173,138,255,.74),transparent 27%),linear-gradient(150deg,#28234e,#11141e 77%); }
.article-actions { display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:16px 0 34px;border-bottom:1px solid rgba(255,255,255,.09); }
.article-action { display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.025);color:#c6b8d0;text-decoration:none;font:.68rem 'Space Grotesk',sans-serif;cursor:pointer;transition:all .2s; }
.article-action:hover { border-color:rgba(195,129,247,.55);color:#fff;background:rgba(166,87,218,.1); }
.article-action[aria-pressed="true"] { border-color:rgba(255,211,121,.36);color:#ffe2a1;background:rgba(240,182,78,.07); }
.article-action-status { color:#7ee1d3;font:.64rem 'JetBrains Mono',monospace; }
.article-layout { display:grid;grid-template-columns:180px minmax(0,760px);justify-content:space-between;gap:70px;padding-top:43px; }
.article-sidebar { position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:14px;padding-top:8px; }
.article-sidebar>span { margin-bottom:6px;color:#8f8296;font:.55rem 'JetBrains Mono',monospace;letter-spacing:.14em; }
.article-sidebar a { padding-left:11px;border-left:1px solid rgba(255,255,255,.12);color:#93869b;text-decoration:none;font-size:.73rem;transition:color .2s,border-color .2s; }
.article-sidebar a:hover,.article-sidebar a.is-current { border-color:#cc8bff;color:#f3e4ff; }
.article-body { min-width:0; }
.article-body section { scroll-margin-top:100px; }
.idea-in-a-minute { position:relative;overflow:hidden;margin:0 0 42px;padding:23px 25px;border:1px solid rgba(201,149,229,.2);border-radius:14px;background:linear-gradient(110deg,rgba(92,45,112,.2),rgba(39,27,48,.43)); }
.idea-in-a-minute>span { color:#d5a3f3;font:.57rem 'JetBrains Mono',monospace;letter-spacing:.16em; }
.idea-in-a-minute p { max-width:660px;margin:11px 0 0;color:#f0e8f3;font-size:1.02rem;line-height:1.75; }
.idea-mark { position:absolute;right:24px;top:17px;color:rgba(211,151,255,.2);font-size:3.3rem; }
.article-prose { margin:0 0 46px; }
.article-prose h2,.article-section-head h2,.example-section h2,.quick-check h2,.glossary-section h2,.related-section h2,.sources-section h2 { margin:8px 0 15px;color:#f9f4fb;font-size:clamp(1.65rem,3.3vw,2.35rem);letter-spacing:-.065em;line-height:1.12; }
.article-prose p { margin:0 0 17px;color:#c4b9cb;font-size:.95rem;line-height:1.9; }
.article-visual-section { margin:0 0 48px; }
.article-section-head p,.example-section>div>p,.quick-check-head p,.sources-section>p { color:#a99daf;font-size:.82rem;line-height:1.7; }
.diagram-panel { min-height:195px;display:grid;place-items:center;overflow:hidden;margin-top:18px;padding:24px;border:1px solid rgba(214,187,235,.15);border-radius:15px;background:radial-gradient(ellipse at 50% 44%,rgba(102,57,128,.15),transparent 65%),linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,.008)); }
.example-section { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:22px;margin:0 0 52px; }
.example-section h2 { margin-bottom:9px; }
.example-section>div>p { margin:0; }
.code-card { position:relative;min-height:130px;margin:0;padding:42px 18px 17px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:#0c0b10;color:#c5f2e9;white-space:pre-wrap;overflow-x:auto; }
.code-card code { font: .72rem/1.8 'JetBrains Mono',monospace; }
.code-lang { position:absolute;top:15px;left:18px;color:#a78bb9;font: .52rem 'JetBrains Mono',monospace;letter-spacing:.14em; }
.quick-check { display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;margin:0 0 51px;padding:22px;border:1px solid rgba(119,214,194,.17);border-radius:15px;background:linear-gradient(125deg,rgba(24,74,68,.14),rgba(255,255,255,.018)); }
.quick-check h2 { margin:8px 0; }
.quick-check-head p { margin:0; }
#article-quiz fieldset { padding:0;border:0; }
#article-quiz legend { margin-bottom:12px;color:#eee5f3;font-size:.84rem;font-weight:600;line-height:1.5; }
.quiz-option { display:flex;align-items:center;gap:9px;margin:7px 0;padding:9px 11px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(0,0,0,.11);color:#bdb1c4;font-size:.75rem;cursor:pointer; }
.quiz-option:has(input:checked) { border-color:rgba(186,119,232,.55);background:rgba(167,87,211,.1);color:#fff; }
.quiz-option input { accent-color:#b35ef0; }
.quiz-submit { margin-top:6px;padding:9px 14px;font-size:.7rem; }
.quiz-feedback { min-height:1.25em;margin:9px 0 0;color:#c3b7ca;font-size:.7rem;line-height:1.5; }
.quiz-feedback.is-correct { color:#87e6d4; }.quiz-feedback.is-incorrect { color:#ffb5a9; }.quiz-feedback.is-neutral { color:#f0d18b; }
.glossary-section { margin:0 0 53px; }
.glossary-section dl { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0 0; }
.glossary-term { padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.02); }
.glossary-term dt { color:#e5c0ff;font-size:.79rem;font-weight:600; }
.glossary-term dd { margin:5px 0 0;color:#a99eaf;font-size:.7rem;line-height:1.6; }
.related-section { margin:0 0 49px; }
.related-article-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.related-article-card { position:relative;display:flex;min-height:110px;flex-direction:column;gap:6px;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.025);color:#f5edf8;text-decoration:none;transition:transform .25s,border-color .25s,background .25s; }
.related-article-card:hover { transform:translateY(-3px);border-color:rgba(200,140,240,.48);background:rgba(164,79,204,.08); }
.related-article-card>span { color:#8adfd3;font:.5rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase; }
.related-article-card>b { padding-right:17px;font-size:.83rem; }
.related-article-card>small { color:#a99daf;font-size:.66rem;line-height:1.45; }
.related-article-card>i { position:absolute;top:12px;right:13px;color:#c997ef;font-style:normal; }
.sources-section { margin:0 0 45px; }
.sources-section ol { display:flex;flex-direction:column;gap:12px;margin:20px 0 0;padding:0;list-style:none;counter-reset:refs; }
.sources-section li { display:grid;grid-template-columns:25px 1fr;gap:9px;counter-increment:refs; }
.sources-section li::before { content:'0' counter(refs);padding-top:2px;color:#8c7f93;font:.55rem 'JetBrains Mono',monospace; }
.sources-section li a,.sources-section li span { color:#dac2ec;text-decoration:none;font-size:.76rem;font-weight:600; }
.sources-section li a:hover { color:#83e6d7;text-decoration:underline; }
.sources-section li p { margin:4px 0 0;color:#998e9e;font-size:.68rem;line-height:1.55; }
.back-to-library { display:inline-block;margin-top:4px;color:#d0ade8;text-decoration:none;font-size:.77rem; }
.back-to-library:hover { color:#fff; }
.custom-article-note,.no-related { color:#a89aaf;font-size:.8rem; }
.flow-diagram,.route-diagram { width:100%;display:flex;align-items:center;justify-content:center;gap:14px; }
.flow-box { min-width:145px;display:flex;flex-direction:column;gap:7px;padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(255,255,255,.035); }
.flow-box small,.db-query small { color:#ae9bb7;font:.48rem 'JetBrains Mono',monospace;letter-spacing:.13em; }
.flow-box b { color:#f7eff9;font-size:.83rem; }.flow-box i { color:#a99daf;font-size:.64rem;font-style:normal; }
.flow-highlight { border-color:rgba(201,135,247,.44);background:rgba(145,70,189,.11);box-shadow:0 0 27px rgba(154,78,192,.11); }
.flow-arrow,.db-arrow { color:#6de0cf;font-size:1.25rem; }
.binary-diagram { display:grid;grid-template-columns:repeat(8,minmax(42px,1fr));gap:7px;width:100%;max-width:600px; }
.bit-place { display:flex;flex-direction:column;align-items:center;gap:8px; }
.bit-place small { color:#988ba1;font:.53rem 'JetBrains Mono',monospace; }
.bit-place b { width:100%;padding:14px 0;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#0d0b11;color:#bdafd0;text-align:center;font:1rem 'JetBrains Mono',monospace; }
.bit-place.is-on b { border-color:#a954eb;background:#9035ca;color:#fff;box-shadow:0 0 22px rgba(160,70,224,.3); }
.binary-sum { grid-column:1/-1;margin-top:11px;color:#bcaec5;text-align:center;font:.7rem 'JetBrains Mono',monospace; }.binary-sum span{color:#70dfd0;}
.route-stop { width:135px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border:1px solid rgba(255,255,255,.11);border-radius:11px;background:rgba(255,255,255,.035);text-align:center; }
.route-stop>i { color:#82e7d9;font-size:1.55rem;font-style:normal; }.route-stop>b { color:#e9e1ed;font-size:.74rem; }.route-stop>small{color:#998da0;font:.52rem 'JetBrains Mono',monospace;letter-spacing:.09em;text-transform:uppercase;}
.route-router { border-color:rgba(111,213,198,.35); }.route-server{border-color:rgba(188,127,233,.32);}
.route-line { position:relative;width:clamp(30px,8vw,75px);height:1px;background:linear-gradient(90deg,#b460e6,#5ce1d0); }
.route-line span { position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #8cf8e2;animation:packetTravel 2s linear infinite; }.route-line span:nth-child(2){animation-delay:.65s}.route-line span:nth-child(3){animation-delay:1.3s}
@keyframes packetTravel { to { left:100%;opacity:.2; } }
.database-diagram { display:grid;grid-template-columns:auto 25px minmax(220px,1fr);align-items:center;gap:13px;width:min(100%,570px); }
.db-query { padding:13px;border:1px solid rgba(191,130,231,.32);border-radius:9px;background:rgba(142,63,184,.09); }
.db-query code { display:block;margin-top:8px;color:#e4c3f3;font:.6rem/1.65 'JetBrains Mono',monospace; }
.database-diagram table { width:100%;border-collapse:collapse;color:#c7bdce;font:.65rem 'JetBrains Mono',monospace; }
.database-diagram th,.database-diagram td { padding:8px;border:1px solid rgba(255,255,255,.1);text-align:left; }
.database-diagram th { color:#86ddd0;background:rgba(90,203,190,.07); }.database-diagram .db-hit{background:rgba(147,79,185,.15);color:#f3dcff;}
.db-arrow { text-align:center; }.db-result { grid-column:3;color:#8ddecf;font:.54rem 'JetBrains Mono',monospace; }
.variable-diagram { display:flex;align-items:center;gap:15px;flex-wrap:wrap;justify-content:center; }
.var-label,.var-foot { flex-basis:100%;color:#9c8da5;text-align:center;font:.52rem 'JetBrains Mono',monospace;letter-spacing:.1em; }
.var-cell { min-width:138px;display:flex;flex-direction:column;gap:8px;padding:15px;border:1px solid rgba(190,125,226,.36);border-radius:11px;background:rgba(142,70,184,.1); }
.var-cell span { color:#a99aaf;font:.5rem 'JetBrains Mono',monospace;letter-spacing:.1em; }.var-cell b{color:#eacbff;font:1.3rem 'JetBrains Mono',monospace;}
.var-value { border-color:rgba(112,224,207,.36);background:rgba(60,165,150,.09); }.var-value b{color:#8ce8d9;}.var-arrow{color:#77ded0;font-size:1.4rem;}
.loop-diagram { position:relative;width:min(100%,540px);height:190px;display:grid;grid-template-columns:100px 150px 100px;grid-template-rows:75px 65px;align-items:center;justify-content:center;gap:5px 19px;text-align:center; }
.loop-start,.loop-node,.loop-work,.loop-stop { padding:12px;border:1px solid rgba(194,141,231,.3);border-radius:10px;background:rgba(144,69,183,.1);color:#f0def9;font-size:.7rem; }
.loop-start { grid-column:1;grid-row:1; }.loop-node{grid-column:2;grid-row:1;border-radius:50%;padding:22px 8px;}.loop-work{grid-column:3;grid-row:1;border-color:rgba(100,214,196,.34);background:rgba(47,150,137,.1);}.loop-branch{grid-column:2;grid-row:2;color:#83ded0;font:.5rem 'JetBrains Mono',monospace;}.loop-branch i{display:block;width:1px;height:20px;margin:4px auto;background:#6fdccd;}.loop-back{grid-column:1/3;grid-row:2;justify-self:center;color:#c091df;font:.55rem 'JetBrains Mono',monospace;}.loop-stop{grid-column:3;grid-row:2;padding:9px;color:#a89aaf;font:.56rem 'JetBrains Mono',monospace;}
.cipher-diagram { position:relative;display:flex;align-items:center;gap:25px;flex-wrap:wrap;justify-content:center;width:100%; }
.cipher-state { min-width:150px;display:flex;flex-direction:column;gap:10px;padding:15px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.025); }
.cipher-state small { color:#a99aaf;font:.5rem 'JetBrains Mono',monospace;letter-spacing:.11em; }.cipher-state b{color:#f2e9f4;font:1.15rem 'JetBrains Mono',monospace;letter-spacing:.14em;}
.cipher-key { display:flex;flex-direction:column;align-items:center;gap:5px;color:#cf9cf0;font:.5rem 'JetBrains Mono',monospace; }.cipher-key i{font-size:1.5rem;font-style:normal;}.cipher-key strong{color:#86e8d6;font-size:.85rem;}.cipher-arrow{display:none;}
.os-diagram { width:min(100%,510px);display:flex;flex-direction:column;align-items:center;gap:6px; }
.os-layer { width:100%;padding:11px 15px;border:1px solid rgba(203,146,233,.28);border-radius:9px;background:rgba(135,71,176,.085); }
.os-layer small { color:#b29bbf;font:.49rem 'JetBrains Mono',monospace;letter-spacing:.11em; }.os-layer b,.os-layer i{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:#e9ddec;font-size:.72rem;font-style:normal;}.os-layer i{color:#9f91a7;font:.55rem 'JetBrains Mono',monospace;}
.os-connector { color:#78e0d3;font-size:.9rem;line-height:1; }.os-hardware{border-color:rgba(113,217,201,.26);background:rgba(50,151,139,.08);}
.article-page .footer { margin-top:0; }
.article-page .nav-links a[data-page="articles"] { color:#fff; }
.article-page .nav-links a[data-page="articles"]::after { width:100%; }
[data-theme="light"] .article-hero h1,[data-theme="light"] .article-prose h2,[data-theme="light"] .article-section-head h2,[data-theme="light"] .example-section h2,[data-theme="light"] .quick-check h2,[data-theme="light"] .glossary-section h2,[data-theme="light"] .related-section h2,[data-theme="light"] .sources-section h2 { color:#23172b; }
[data-theme="light"] .article-lead,[data-theme="light"] .article-prose p,[data-theme="light"] .idea-in-a-minute p { color:#65596a; }
[data-theme="light"] .article-actions .article-action,[data-theme="light"] .glossary-term,[data-theme="light"] .related-article-card { background:rgba(255,255,255,.65);color:#47374f; }
@keyframes articleArtIn { from{opacity:0;transform:translateY(20px) rotate(4deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)} }
@media(max-width:1000px){.article-page{padding-inline:6%}.article-layout{grid-template-columns:145px minmax(0,1fr);gap:35px}.article-hero{grid-template-columns:minmax(0,1fr) 230px}.article-hero-art{width:220px;height:235px}.article-hero-art>b{font-size:4.2rem}}
@media(max-width:700px){.article-page{padding:25px 5% 70px}.article-hero{grid-template-columns:1fr;min-height:auto;gap:22px;padding:23px 0 34px}.article-hero h1{font-size:clamp(3rem,13vw,5rem)}.article-hero-art{position:absolute;right:0;top:6px;width:96px;height:110px;opacity:.57;border-radius:50% 50% 10px 10px}.article-hero-art>b{font-size:2rem}.article-hero-art::before{width:70px;height:85px}.article-hero-art::after{width:54px;height:80px}.article-hero-copy{padding-right:8px}.article-kicker{margin-top:16px}.article-lead{font-size:.9rem;max-width:520px}.article-meta{flex-wrap:wrap;font-size:.48rem}.article-layout{display:block;padding-top:23px}.article-sidebar{position:relative;top:auto;flex-direction:row;gap:13px;overflow-x:auto;margin-bottom:28px;padding:0 0 9px;white-space:nowrap}.article-sidebar>span{display:none}.article-sidebar a{padding:4px 0;border:0;border-bottom:1px solid rgba(255,255,255,.15);font-size:.68rem}.article-sidebar a.is-current{border-color:#ce8aff}.article-prose p{font-size:.87rem}.example-section,.quick-check{grid-template-columns:1fr;gap:13px}.quick-check{padding:17px}.flow-diagram,.route-diagram{gap:6px}.flow-box{min-width:0;width:31%;padding:10px 7px}.flow-box b{font-size:.7rem}.flow-box i{font-size:.54rem}.flow-box small{font-size:.42rem}.flow-arrow{font-size:.9rem}.route-stop{width:29%;padding:10px 5px}.route-stop>b{font-size:.62rem}.route-line{width:5vw}.database-diagram{grid-template-columns:1fr 20px 1.5fr;gap:7px}.db-query{padding:8px}.db-query code{font-size:.48rem}.database-diagram th,.database-diagram td{padding:6px;font-size:.54rem}.glossary-section dl{grid-template-columns:1fr}.related-article-grid{grid-template-columns:1fr 1fr}.article-crumb{margin-bottom:14px}.article-actions{padding-bottom:21px}.article-action{font-size:.62rem;padding:7px 9px}}
@media(max-width:400px){.article-meta{gap:6px}.article-action{gap:5px}.related-article-grid{grid-template-columns:1fr}.binary-diagram{grid-template-columns:repeat(8,minmax(27px,1fr));gap:3px}.bit-place b{padding:11px 0;font-size:.8rem}.loop-diagram{scale:.84;transform-origin:center}.nav-links{gap:7px}.nav-links a{font-size:.62rem}.logo{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.article-hero-art,.route-line span{animation:none!important}}

/* Point 4 — expanded interactive lab collection */
.lab-tabs { display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 25px; }
.lab-tabs .tab { padding:10px 15px;white-space:nowrap; }
.lab-tabs .tab:focus-visible,.structure-mode:focus-visible,.gate-input:focus-visible { outline:2px solid var(--accent-2);outline-offset:3px; }
.lab[aria-hidden="true"] { display:none; }
.lab-toolbar { display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:20px 0 24px; }
.lab-toolbar .lab-field { margin:0; }
.compact-field { min-width:190px; }
.compact-field select,.route-controls select,.cpu-controls select,.sql-editor-head select,.regex-controls select { min-width:150px;padding:10px 13px;border:1px solid var(--border);border-radius:10px;background:#0d0c13;color:var(--text);font:inherit; }
.gate-inputs { display:flex;gap:10px; }
.gate-input { display:flex;align-items:center;gap:13px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.035);color:var(--muted);font: .7rem 'JetBrains Mono',monospace;cursor:pointer; }
.gate-input b { display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#08080d;color:#91a0c2;font-size:1rem;transition:background .2s,color .2s,box-shadow .2s; }
.gate-input[aria-pressed="true"] b { color:#fff;background:linear-gradient(135deg,#a752ef,#536ef2);box-shadow:0 0 20px rgba(164,83,239,.32); }
.gate-input[hidden] { display:none; }
.gate-circuit { display:grid;grid-template-columns:100px minmax(30px,1fr) 92px minmax(30px,1fr) 110px;align-items:center;gap:10px;min-height:155px;margin:22px 0;padding:24px clamp(16px,5vw,60px);border:1px solid var(--border);border-radius:18px;background:radial-gradient(ellipse at 50% 55%,rgba(149,73,208,.12),transparent 55%),rgba(255,255,255,.018); }
.gate-input-lines { display:flex;flex-direction:column;gap:12px; }
.circuit-input,.circuit-output { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--border);border-radius:11px;background:rgba(5,5,10,.68); }
.circuit-input span,.circuit-output span { color:var(--muted);font:.5rem 'JetBrains Mono',monospace;letter-spacing:.09em; }
.circuit-input b,.circuit-output b { display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#171521;color:#b6a9c6;font:1rem 'JetBrains Mono',monospace; }
.circuit-output b { background:rgba(65,73,93,.45); }
.circuit-output b.is-one { background:#2fd0c5;color:#071414;box-shadow:0 0 18px rgba(47,208,197,.35); }
.circuit-wire { height:2px;background:linear-gradient(90deg,rgba(155,107,198,.18),#a875ed,rgba(99,221,210,.55)); }
.gate-symbol { display:grid;place-items:center;aspect-ratio:1;border:1px solid rgba(195,135,255,.35);border-radius:26px;background:linear-gradient(145deg,rgba(182,101,239,.2),rgba(31,29,47,.8));color:#e9c3ff;font:1.45rem 'JetBrains Mono',monospace;box-shadow:0 0 28px rgba(164,83,239,.13); }
.gate-readouts { grid-template-columns:repeat(2,minmax(0,1fr)); }
.truth-table-wrap { margin-top:26px; }
.truth-table-wrap h3,.cpu-processes h3 { margin:0 0 12px;color:var(--text);font-size:1rem; }
.data-table { width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:rgba(4,4,9,.36); }
.data-table th,.data-table td { padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left; }
.data-table th { color:#c8aadf;background:rgba(181,113,226,.08);font:.58rem 'JetBrains Mono',monospace;letter-spacing:.09em;text-transform:uppercase; }
.data-table td { color:#c1b8cb;font-size:.78rem; }
.data-table tr:last-child td { border-bottom:0; }
.data-table .truth-current td { color:#fff;background:rgba(114,79,153,.23); }
.structure-controls { flex-wrap:wrap;align-items:end; }
.structure-controls label,.route-controls label,.cpu-controls label { display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.72rem; }
.structure-controls input,.cpu-controls input { min-width:120px;max-width:180px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0a0910;color:var(--text);font:inherit; }
.structure-stage { min-height:190px;margin:23px 0;padding:20px 22px;border:1px solid var(--border);border-radius:17px;background:radial-gradient(ellipse at center,rgba(112,91,163,.11),transparent 68%),rgba(255,255,255,.014); }
.structure-caption { color:var(--accent-2);font:.55rem 'JetBrains Mono',monospace;letter-spacing:.12em; }
.structure-view { display:flex;align-items:center;gap:9px;min-height:110px;padding:12px 0; }
.stack-view { flex-direction:column-reverse;justify-content:flex-start;align-items:center; }
.queue-view { justify-content:flex-start;overflow:auto; }
.structure-item { display:grid;place-items:center;min-width:58px;height:48px;padding:0 12px;border:1px solid rgba(181,134,241,.35);border-radius:12px;background:linear-gradient(145deg,rgba(155,84,227,.3),rgba(48,39,73,.55));color:#f2e7ff;font:.7rem 'JetBrains Mono',monospace;animation:structurePop .3s ease both; }
.queue-view .structure-item:first-child { border-color:rgba(82,222,208,.65);box-shadow:0 0 22px rgba(82,222,208,.12); }
.stack-view .structure-item:last-child { border-color:rgba(82,222,208,.65);box-shadow:0 0 22px rgba(82,222,208,.12); }
.structure-empty { color:var(--muted);font-size:.78rem; }
.structure-tail { color:#988ba0; }
@keyframes structurePop { from{opacity:0;transform:scale(.8) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)} }
.route-controls { align-items:end;flex-wrap:wrap; }
.route-controls label { min-width:150px; }
.network-scroll { width:100%;overflow-x:auto;margin:22px 0 16px;padding-bottom:8px; }
.network-stage { position:relative;width:100%;min-width:650px;height:340px;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:radial-gradient(ellipse at 50% 50%,rgba(79,107,154,.13),transparent 68%),rgba(255,255,255,.015); }
.network-links { position:absolute;inset:0;width:100%;height:100%;overflow:visible; }
.network-links line { stroke:rgba(154,158,186,.28);stroke-width:2;stroke-dasharray:5 7;transition:stroke .25s,stroke-width .25s,filter .25s; }
.network-links line.is-route { stroke:#63e4d4;stroke-width:3.5;stroke-dasharray:12 7;filter:drop-shadow(0 0 5px rgba(99,228,212,.8));animation:packetFlow 1.2s linear infinite; }
@keyframes packetFlow { to{stroke-dashoffset:-38} }
.router-node { position:absolute;left:var(--rx);top:var(--ry);z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:108px;transform:translate(-50%,-50%);color:var(--muted);text-align:center;transition:transform .25s,color .25s; }
.router-node span { display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(180,156,209,.3);border-radius:16px;background:#11111b;color:#baa4d7;font:.6rem 'JetBrains Mono',monospace;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:all .25s; }
.router-node b { font-size:.64rem;font-weight:500;white-space:nowrap; }
.router-node.is-route span { border-color:#64dfd2;background:rgba(24,105,101,.45);color:#9cfff1;box-shadow:0 0 28px rgba(89,225,210,.19); }
.router-node.is-route { color:var(--text); }
.router-node.is-source span { border-color:#bd8afa;background:rgba(124,70,169,.48); }
.router-node.is-target span { border-color:#66e3d2;background:rgba(30,126,113,.5); }
.route-result { display:flex;flex-direction:column;gap:7px;padding:17px 19px;border:1px solid rgba(97,220,205,.2);border-radius:14px;background:linear-gradient(105deg,rgba(37,113,106,.11),rgba(166,104,218,.07)); }
.route-result strong { color:#f1eaff;font-size:.9rem;line-height:1.6; }
.route-result>span { color:var(--accent-2);font:.62rem 'JetBrains Mono',monospace; }
.route-hop-list { display:flex;flex-wrap:wrap;gap:8px;margin-top:4px; }
.route-hop-list small { padding:6px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font:.53rem 'JetBrains Mono',monospace; }
.sql-editor { overflow:hidden;margin:20px 0 12px;border:1px solid rgba(179,124,224,.26);border-radius:15px;background:#090910;box-shadow:0 16px 40px rgba(0,0,0,.18); }
.sql-editor-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.025); }
.sql-editor-head>span { color:#a69bb4;font:.52rem 'JetBrains Mono',monospace;letter-spacing:.09em;white-space:nowrap; }
.sql-editor-head>span i { display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#ed7a8b; }
.sql-editor-head>span i:nth-child(2){background:#e6bd69}.sql-editor-head>span i:nth-child(3){background:#6cdbb0}
.sql-editor-head select { max-width:230px;padding:7px 9px;font-size:.68rem; }
.sql-editor textarea { display:block;width:100%;min-height:105px;padding:17px 19px;border:0;outline:none;resize:vertical;background:transparent;color:#75e1d4;font: .78rem/1.7 'JetBrains Mono',monospace; }
.sql-editor .btn-small { margin:0 15px 15px; }
.sql-message { min-height:20px;margin:11px 2px;color:#a69bb4;font:.62rem 'JetBrains Mono',monospace; }
.sql-message.is-success { color:#71e2c7; }.sql-message.is-error { color:#ff91a3; }
.sql-result-wrap { max-width:100%;overflow:auto;border-radius:12px; }
.sql-result-table { min-width:420px; }
.regex-controls { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.8fr);gap:18px;align-items:end;margin:20px 0; }
.regex-controls>label { display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.72rem; }
.regex-input-wrap { display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:11px;background:#090910;color:#a18db6;font: .75rem 'JetBrains Mono',monospace; }
.regex-input-wrap input { min-width:0;width:100%;border:0;outline:none;background:transparent;color:#72e1d4;font:inherit; }
.regex-input-wrap input:last-child { max-width:45px;color:#d0a7f4; }
.regex-controls select { width:100%; }
.lab-field textarea#regex-text { font: .76rem/1.65 'JetBrains Mono',monospace; }
.regex-preview { overflow:hidden;margin:20px 0 12px;border:1px solid var(--border);border-radius:14px;background:#08080e; }
.regex-preview-head { display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);color:#a79caf;font:.52rem 'JetBrains Mono',monospace;letter-spacing:.1em; }
.regex-preview-head b { color:var(--accent-2);font-weight:400;letter-spacing:0; }
.regex-preview pre { min-height:95px;margin:0;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;color:#d2c8d8;font:.74rem/1.8 'JetBrains Mono',monospace; }
.regex-preview mark { border-radius:4px;background:rgba(173,100,236,.34);color:#f0d8ff;box-shadow:0 0 0 1px rgba(198,146,255,.34); }
.regex-match-list { display:grid;gap:7px;margin-top:12px; }
.regex-match { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.018); }
.regex-match>b { color:#94869e;font:.56rem 'JetBrains Mono',monospace; }.regex-match code { color:#e8caff;font:.7rem 'JetBrains Mono',monospace; }.regex-match span,.regex-match small { color:#9b909f;font:.57rem 'JetBrains Mono',monospace; }.regex-match small { flex-basis:100%;padding-left:32px; }
.regex-empty,.regex-error { margin:0;padding:12px;color:var(--muted);font-size:.72rem; }.regex-error { color:#ff91a3; }
.cpu-controls { align-items:end;flex-wrap:wrap; }
.cpu-controls label { min-width:190px; }
.cpu-controls label[hidden] { display:none; }
.cpu-processes { margin:25px 0 20px; }
.cpu-process-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.cpu-process { display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--border);border-top:2px solid var(--process-color);border-radius:12px;background:rgba(255,255,255,.025); }
.cpu-process b { color:var(--process-color);font:.75rem 'JetBrains Mono',monospace; }.cpu-process span,.cpu-process i { color:var(--muted);font-size:.61rem;font-style:normal; }
.cpu-gantt-wrap { margin:20px 0;padding:16px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.018); }
.cpu-gantt-label { margin-bottom:13px;color:#9f91a7;font:.52rem 'JetBrains Mono',monospace;letter-spacing:.12em; }
.cpu-gantt { display:flex;min-height:58px;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:#090910; }
.cpu-segment { display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;border-right:1px solid rgba(5,5,10,.55);background:color-mix(in srgb,var(--process-color) 70%,#15131e);color:#fff;animation:segmentReveal .38s ease both;overflow:hidden; }
.cpu-segment b { font:.66rem 'JetBrains Mono',monospace; }.cpu-segment small { margin-top:3px;color:rgba(255,255,255,.76);font:.47rem 'JetBrains Mono',monospace;white-space:nowrap; }
.cpu-segment.is-idle { background:#282631;color:#a69dab; }
@keyframes segmentReveal { from{opacity:.25;transform:scaleY(.55)}to{opacity:1;transform:scaleY(1)} }
.cpu-time-scale { display:flex;justify-content:space-between;margin-top:7px;color:#95899d;font:.5rem 'JetBrains Mono',monospace; }
.cpu-readouts { grid-template-columns:repeat(3,minmax(0,1fr)); }
[data-theme="light"] .gate-input b,[data-theme="light"] .sql-editor,[data-theme="light"] .regex-preview,[data-theme="light"] .regex-input-wrap { background:#fff; }
[data-theme="light"] .gate-circuit,[data-theme="light"] .structure-stage,[data-theme="light"] .network-stage { background-color:rgba(255,255,255,.65); }
@media(max-width:700px){.lab-tabs{flex-wrap:nowrap;overflow:auto;padding-bottom:8px;scrollbar-width:thin}.lab-toolbar{align-items:stretch}.gate-circuit{grid-template-columns:74px minmax(14px,1fr) 64px minmax(14px,1fr) 82px;gap:6px;padding:18px 10px}.circuit-input,.circuit-output{padding:7px}.circuit-input span,.circuit-output span{font-size:.42rem}.circuit-input b,.circuit-output b{width:23px;height:23px}.gate-symbol{border-radius:18px;font-size:1rem}.cpu-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.regex-controls{grid-template-columns:1fr}.sql-editor-head{align-items:flex-start;flex-direction:column}.sql-editor-head select{max-width:none;width:100%}.cpu-readouts{grid-template-columns:1fr}.route-controls label{min-width:calc(50% - 8px);flex:1}.route-controls .btn-small{width:100%}}
@media(max-width:420px){.gate-circuit{grid-template-columns:62px minmax(10px,1fr) 52px minmax(10px,1fr) 72px;padding-inline:7px}.circuit-input span,.circuit-output span{display:none}.gate-readouts{grid-template-columns:1fr}.structure-controls>*{flex:1}.route-controls label{min-width:100%}.network-stage{min-width:600px}.cpu-segment small{font-size:.4rem}}
@media(prefers-reduced-motion:reduce){.network-links line.is-route,.structure-item,.cpu-segment{animation:none!important}}

/* Point 5 — daily challenge and optional local rewards */
.daily-callout { display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:21px;margin:10px auto 25px;padding:22px 25px;border:1px solid rgba(108,213,203,.2);border-radius:18px;background:linear-gradient(105deg,rgba(20,74,73,.24),rgba(18,17,25,.92) 58%,rgba(98,56,135,.22)); }
.daily-callout h2 { margin:6px 0;font-size:1.35rem;letter-spacing:-.045em; }
.daily-callout p { margin:0;color:var(--muted);font-size:.78rem;line-height:1.55; }
.daily-callout-mark { position:relative;display:grid;place-items:center;width:60px;height:60px;border:1px solid rgba(103,221,207,.44);border-radius:20px;background:rgba(39,140,130,.12);color:#9df3df;font:1.65rem 'JetBrains Mono',monospace;transform:rotate(-6deg); }
.daily-callout-mark span { position:absolute;right:10px;top:6px;color:#d5a1ff;font-size:.82rem; }
.daily-callout .btn { white-space:nowrap;font-size:.74rem; }
.challenge-intro { padding-bottom:52px; }
.challenge-page { max-width:1150px;margin:0 auto;padding:0 7% 80px; }
.challenge-layout { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.8fr);gap:18px;align-items:start; }
.daily-challenge,.streak-card,.badge-card { border:1px solid var(--border);border-radius:19px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.014));box-shadow:0 20px 55px rgba(0,0,0,.16); }
.daily-challenge { position:relative;overflow:hidden;padding:clamp(22px,4vw,38px); }
.daily-challenge::before { content:'';position:absolute;right:-100px;top:-130px;width:310px;height:310px;border:1px solid rgba(187,131,234,.1);border-radius:50%;box-shadow:0 0 0 30px rgba(187,131,234,.025),0 0 0 65px rgba(98,213,205,.02);pointer-events:none; }
.daily-topline,.challenge-topic-row,.challenge-footer { position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.daily-stamp,.daily-date,.challenge-number,.challenge-topic,.challenge-footer>span { color:#a89cb3;font:.55rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase; }
.daily-stamp { display:inline-flex;align-items:center;gap:9px;color:#70e4d4; }
.daily-stamp i { width:7px;height:7px;border-radius:50%;background:#70e4d4;box-shadow:0 0 13px #70e4d4; }
.daily-date { letter-spacing:.02em;text-transform:none; }
.challenge-topic-row { margin-top:35px; }
.challenge-topic { padding:7px 10px;border:1px solid rgba(111,222,206,.2);border-radius:999px;background:rgba(65,166,154,.08);color:#8cead9; }
.challenge-number { color:#8f829b; }
.daily-challenge h2 { position:relative;max-width:610px;margin:17px 0 11px;color:var(--text);font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.065em;line-height:1.05; }
.challenge-prompt { position:relative;max-width:650px;margin:0 0 22px;color:#b9afc3;font-size:.9rem;line-height:1.75; }
.challenge-options { position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.challenge-option { display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:11px;min-height:58px;padding:10px 12px;border:1px solid rgba(196,180,214,.15);border-radius:12px;background:rgba(255,255,255,.025);color:#d3cbd9;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s,background .2s; }
.challenge-option:hover:not(:disabled) { transform:translateY(-2px);border-color:rgba(185,132,235,.55);background:rgba(168,103,222,.09); }
.challenge-option:focus-visible,.hint-button:focus-visible,.quiet-button:focus-visible { outline:2px solid #7be6d6;outline-offset:3px; }
.challenge-option:disabled { cursor:default; }
.option-key { display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--border);border-radius:9px;color:#9d90aa;font:.62rem 'JetBrains Mono',monospace; }
.option-copy { font-size:.75rem;line-height:1.45;overflow-wrap:anywhere; }
.option-mark { color:#8a7c95;font-style:normal;text-align:center; }
.challenge-option.is-wrong { border-color:rgba(245,118,145,.42);background:rgba(180,55,83,.1);color:#e6a6b4; }
.challenge-option.is-wrong .option-key,.challenge-option.is-wrong .option-mark { border-color:rgba(245,118,145,.38);color:#ff9caf; }
.challenge-option.is-correct { border-color:rgba(83,224,190,.5);background:rgba(46,148,129,.13);color:#d3fff0; }
.challenge-option.is-correct .option-key,.challenge-option.is-correct .option-mark { border-color:rgba(83,224,190,.4);color:#7af0d4; }
.hint-box { position:relative;margin-top:20px;padding:15px 16px;border:1px solid rgba(178,131,224,.2);border-radius:13px;background:linear-gradient(110deg,rgba(141,85,182,.09),rgba(255,255,255,.015)); }
.hint-heading { display:flex;justify-content:space-between;gap:10px;color:#d4b0f4;font:.51rem 'JetBrains Mono',monospace;letter-spacing:.1em; }
.hint-heading span:last-child { color:#94879d;letter-spacing:0; }
.hint-text { min-height:20px;margin:9px 0 12px;color:#b7adbf;font-size:.72rem;line-height:1.55; }
.hint-button { border-color:rgba(180,129,226,.3);color:#e5c8ff; }
.hint-button:disabled,.quiet-button:disabled { opacity:.48;cursor:default; }
.challenge-feedback { position:relative;margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.025); }
.challenge-feedback[hidden] { display:none; }
.challenge-feedback strong { display:block;margin-bottom:5px;color:#eee4f5;font-size:.91rem; }
.challenge-feedback p { margin:0 0 10px;color:#b9afc3;font-size:.75rem;line-height:1.65; }
.challenge-feedback .text-link { color:#8ae6d8;font-size:.72rem; }
.challenge-feedback.is-correct { border-color:rgba(83,224,190,.28);background:rgba(39,128,111,.1); }
.challenge-feedback.is-reveal { border-color:rgba(187,131,234,.25); }
.challenge-feedback.is-try-again { border-color:rgba(236,176,107,.25);background:rgba(171,114,54,.07); }
.challenge-feedback.is-try-again strong { color:#f3d09b; }
.challenge-footer { margin-top:17px;padding-top:15px;border-top:1px solid rgba(255,255,255,.07); }
.quiet-button { border:0;background:none;color:#9c8fa7;font: .63rem 'JetBrains Mono',monospace;cursor:pointer; }
.quiet-button:hover:not(:disabled) { color:#dbbcf3; }
.challenge-sidebar { display:grid;gap:14px; }
.streak-card { position:relative;overflow:hidden;padding:22px; }
.streak-orbit { position:absolute;right:-21px;top:-31px;display:grid;place-items:center;width:102px;height:102px;border:1px solid rgba(107,222,204,.18);border-radius:50%;color:#84e6d5;box-shadow:0 0 0 15px rgba(107,222,204,.025),0 0 0 31px rgba(185,130,229,.025); }
.streak-orbit span { font-size:1.35rem;animation:orbitSpark 4.5s ease-in-out infinite; }
@keyframes orbitSpark { 50%{transform:rotate(45deg) scale(1.12)} }
.streak-card>.eyebrow { position:relative;font-size:.54rem; }
.streak-metrics { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0 19px; }
.streak-metrics>div { display:flex;flex-direction:column;gap:4px; }
.streak-metrics strong { color:#f4e8ff;font-size:2.3rem;letter-spacing:-.07em;line-height:1; }
.streak-metrics span { color:#9f93a9;font:.55rem 'JetBrains Mono',monospace; }
.week-track { display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:17px 0 18px; }
.week-day { display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px;border:1px solid rgba(255,255,255,.06);border-radius:9px;color:#92869a;background:rgba(255,255,255,.018); }
.week-day span { font:.48rem 'JetBrains Mono',monospace; }.week-day b { display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:.52rem 'JetBrains Mono',monospace;font-weight:400; }
.week-day.is-solved b { background:rgba(77,209,182,.2);color:#7be6d2; }.week-day.is-today { border-color:rgba(190,132,236,.35);color:#d2b3eb; }
.reward-toggle { display:flex;align-items:center;gap:9px;color:#b2a6ba;font-size:.62rem;cursor:pointer; }
.reward-toggle input { position:absolute;opacity:0;width:1px;height:1px; }
.toggle-track { position:relative;width:34px;height:19px;border-radius:999px;background:#34303d;transition:background .2s; }
.toggle-track::after { content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#a9a0b2;transition:transform .2s,background .2s; }
.reward-toggle input:checked+.toggle-track { background:rgba(98,189,174,.4); }.reward-toggle input:checked+.toggle-track::after { transform:translateX(15px);background:#85f0da; }
.reward-toggle input:focus-visible+.toggle-track { outline:2px solid #7be6d6;outline-offset:3px; }
.local-rewards-note { margin:13px 0 0;color:#82768c;font-size:.58rem;line-height:1.55; }
.badge-card { padding:20px 19px;transition:opacity .2s,transform .2s; }
.badge-card[hidden] { display:none; }
.streak-card.rewards-off .streak-metrics,.streak-card.rewards-off .week-track { display:none; }
.badge-head { display:flex;align-items:end;justify-content:space-between;gap:8px;margin-bottom:13px; }
.badge-head .eyebrow { font-size:.51rem; }.badge-head h3 { margin:6px 0 0;color:#eee6f3;font-size:1.2rem;letter-spacing:-.045em; }.badge-head>strong { color:#93869c;font:.54rem 'JetBrains Mono',monospace; }
.badge-list { display:grid;gap:7px; }
.reward-badge { display:grid;grid-template-columns:32px minmax(0,1fr) 15px;align-items:center;gap:9px;padding:9px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.018); }
.reward-badge>span { display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(179,131,222,.22);border-radius:10px;color:#c7a1e6;background:rgba(162,101,214,.08);font-size:.84rem; }
.reward-badge>div { display:flex;flex-direction:column;gap:3px; }.reward-badge b { color:#e0d7e6;font-size:.61rem;font-weight:600; }.reward-badge small { color:#908497;font-size:.53rem;line-height:1.35; }.reward-badge>i { color:#766b7b;font-style:normal;font-size:.8rem;text-align:center; }
.reward-badge.is-locked { opacity:.47; }.reward-badge.is-earned { border-color:rgba(98,211,190,.2);background:rgba(51,143,126,.06); }.reward-badge.is-earned>span { border-color:rgba(98,211,190,.28);color:#7be4cb; }.reward-badge.is-earned>i { color:#78e0c9; }
.challenge-note { display:flex;align-items:center;gap:13px;max-width:780px;margin:25px auto 0;padding:16px 19px;border-left:2px solid rgba(105,220,207,.46);background:rgba(255,255,255,.015); }
.challenge-note>span { color:#87e8d7;font-size:1.2rem; }.challenge-note p { margin:0;color:#a69aaf;font-size:.7rem;line-height:1.6; }
body.page-challenges .footer { margin-top:5px; }
[data-theme="light"] .daily-challenge,[data-theme="light"] .streak-card,[data-theme="light"] .badge-card { background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(248,241,251,.92)); }
[data-theme="light"] .daily-challenge h2,[data-theme="light"] .badge-head h3 { color:#26192c; }
[data-theme="light"] .challenge-prompt,[data-theme="light"] .challenge-feedback p,[data-theme="light"] .challenge-note p { color:#6b6070; }
[data-theme="light"] .challenge-option { background:rgba(48,36,58,.025);color:#41364a; }
[data-theme="light"] .hint-text,[data-theme="light"] .reward-badge b { color:#5c5063; }
@media(max-width:900px){.challenge-page{padding-inline:5%}.challenge-layout{grid-template-columns:minmax(0,1.25fr) minmax(245px,.8fr)}.daily-callout{margin-inline:5%}}
@media(max-width:800px){.navbar{gap:10px}.nav-links{flex:1;min-width:0;justify-content:flex-start;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.nav-links::-webkit-scrollbar{display:none}.nav-links a,.nav-links .icon-btn{flex-shrink:0;white-space:nowrap}}
@media(max-width:700px){.challenge-layout{grid-template-columns:1fr}.challenge-sidebar{grid-template-columns:1fr 1fr;align-items:start}.challenge-intro{padding:73px 5% 45px}.daily-callout{grid-template-columns:56px minmax(0,1fr);gap:14px;padding:18px}.daily-callout-mark{width:48px;height:48px;border-radius:15px;font-size:1.3rem}.daily-callout .btn{grid-column:2;justify-self:start}.challenge-page{padding-bottom:60px}}
@media(max-width:500px){.challenge-sidebar{grid-template-columns:1fr}.challenge-options{grid-template-columns:1fr}.daily-challenge{padding:20px 16px}.challenge-topic-row{margin-top:26px}.daily-date{font-size:.48rem}.challenge-page{padding-inline:4%}.week-track{gap:3px}.week-day{padding-inline:0}}
@media(prefers-reduced-motion:reduce){.streak-orbit span{animation:none!important}.challenge-option{transition:none!important}}