/* ============================================================
   SHARED DESIGN SYSTEM + HOLY GRAIL LAYOUT
   ============================================================ */

:root {
  --bg: #0f172a; --bg2: #1e293b; --bg3: #334155;
  --tx: #f1f5f9; --tx2: #94a3b8; --tx3: #64748b;
  --acc: #38bdf8; --acc2: #0ea5e9;
  --grn: #4ade80; --red: #f87171; --amb: #fbbf24; --pur: #c084fc;
  --blue: #60a5fa; --teal: #2dd4bf;
  --d1: #60a5fa; --d2: #f87171; --d3: #4ade80; --d4: #c084fc;
  --radius: 12px; --shadow: 0 4px 24px rgba(0,0,0,.3);
  --west-width: 220px;
  --north-height: 48px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--tx); line-height: 1.6; }
a { color: var(--acc); text-decoration: none; }

/* ============================================================
   HOLY GRAIL GRID
   ============================================================ */
body {
  display: grid;
  grid-template-areas:
    "north north north"
    "west  center east"
    "south south south";
  grid-template-rows: var(--north-height) 1fr auto;
  grid-template-columns: var(--west-width) 1fr 0px;
  min-height: 100vh;
}

/* NORTH */
.site-header {
  grid-area: north;
  background: var(--bg2);
  border-bottom: 1px solid var(--bg3);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: .75rem;
  z-index: 100;
}
.site-header .logo {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--acc);
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.site-header .tagline {
  font-size: .8rem;
  color: var(--tx3);
  white-space: nowrap;
}
.site-header .home-link {
  margin-left: auto;
  font-size: .8rem;
  color: var(--tx2);
  text-decoration: none;
  white-space: nowrap;
}
.site-header .home-link:hover { color: var(--acc); }

/* WEST */
.site-sidebar {
  grid-area: west;
  background: var(--bg2);
  border-right: 1px solid var(--bg3);
  padding: .75rem 0;
  overflow-y: auto;
}
.site-sidebar h2 {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tx3);
  padding: .75rem 1rem .35rem;
  margin: 0;
}
.site-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  cursor: pointer;
  color: var(--tx2);
  font-size: .88rem;
  font-weight: 500;
  transition: all .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.site-sidebar .nav-item:hover {
  background: var(--bg3);
  color: var(--tx);
}
.site-sidebar .nav-item.active {
  background: rgba(56,189,248,.1);
  color: var(--acc);
  font-weight: 600;
  border-right: 2px solid var(--acc);
}
.site-sidebar .nav-item .icon {
  font-size: 1rem;
  width: 1.4rem;
  text-align: center;
}
.site-sidebar .nav-item .coming-soon {
  font-size: .65rem;
  background: var(--bg3);
  color: var(--tx3);
  padding: .1rem .4rem;
  border-radius: 4px;
  margin-left: auto;
}

/* CENTER */
#tutorial-content {
  grid-area: center;
  overflow-y: auto;
  padding: 0;
}

/* EAST (collapsed for now) */
.site-east {
  grid-area: east;
}

/* SOUTH */
.site-footer {
  grid-area: south;
  background: var(--bg2);
  border-top: 1px solid var(--bg3);
  padding: .4rem 1rem;
  font-size: .7rem;
  color: var(--tx3);
  text-align: center;
}

/* ============================================================
   TUTORIAL-INTERNAL NAV (replaces the old <nav>)
   ============================================================ */
.tutorial-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--bg3);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  height: 44px;
  gap: .35rem;
  overflow-x: auto;
}
.tutorial-nav button {
  background: none;
  border: none;
  color: var(--tx2);
  padding: .4rem .65rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .82rem;
  white-space: nowrap;
  transition: all .15s;
  font-weight: 500;
}
.tutorial-nav button:hover { background: var(--bg3); color: var(--tx); }
.tutorial-nav button.active { background: var(--acc); color: var(--bg); font-weight: 700; }
.tutorial-nav .spacer { flex:1; }
.tutorial-nav .progress-pill {
  font-size: .7rem;
  background: var(--bg3);
  padding: .2rem .6rem;
  border-radius: 99px;
  color: var(--grn);
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   TUTORIAL CONTENT AREA
   ============================================================ */
.tutorial-body {
  padding: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
section { display: none; }
section.active { display: block; animation: fadeIn .3s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   SHARED COMPONENTS (used by all tutorials)
   ============================================================ */

/* Typography */
h1 { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; letter-spacing: -1px; }
h2 { font-size: 1.4rem; font-weight: 700; margin: 2rem 0 1rem; letter-spacing: -0.5px; }
h3 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
p, li { color: var(--tx2); }
strong { color: var(--tx); }

/* Cards */
.card { background: var(--bg2); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; border: 1px solid var(--bg3); transition: all .2s; }
.card:hover { border-color: var(--acc); }
.card h3 { margin-top: 0; }

/* Grids */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

/* Badges */
.badge { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font-size: .75rem; font-weight: 700; margin-right: .5rem; }
.badge-d1 { background: rgba(96,165,250,.15); color: var(--d1); }
.badge-d2 { background: rgba(248,113,113,.15); color: var(--d2); }
.badge-d3 { background: rgba(74,222,128,.15); color: var(--d3); }
.badge-d4 { background: rgba(192,132,252,.15); color: var(--d4); }

/* Tips */
.tip { background: rgba(56,189,248,.08); border-left: 3px solid var(--acc); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0; }
.tip::before { content: "EXAM TIP"; display: block; font-size: .7rem; font-weight: 800; color: var(--acc); letter-spacing: 1px; margin-bottom: .25rem; }
.tip p { color: var(--tx); }

.cheat-tip { background: rgba(251,191,36,.08); border-left: 3px solid var(--amb); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0; }
.cheat-tip::before { content: "CHEAT CODE"; display: block; font-size: .7rem; font-weight: 800; color: var(--amb); letter-spacing: 1px; margin-bottom: .25rem; }
.cheat-tip p { color: var(--tx); }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th { text-align: left; padding: .75rem 1rem; background: var(--bg3); color: var(--tx); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; }
th:first-child { border-radius: var(--radius) 0 0 0; }
th:last-child { border-radius: 0 var(--radius) 0 0; }
td { padding: .6rem 1rem; border-bottom: 1px solid var(--bg3); font-size: .9rem; }
td:first-child { color: var(--tx2); }
td:last-child { color: var(--acc); font-weight: 600; }
tr:hover td { background: rgba(56,189,248,.05); }

/* Expandable details */
details { margin: .5rem 0; }
summary { cursor: pointer; padding: .75rem 1rem; background: var(--bg2); border-radius: var(--radius); font-weight: 600; list-style: none; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--bg3); transition: all .2s; }
summary:hover { border-color: var(--acc); }
summary::before { content: "\25B6"; font-size: .7rem; transition: transform .2s; }
details[open] summary::before { transform: rotate(90deg); }
details .detail-body { padding: 1rem 1.25rem; background: var(--bg2); border: 1px solid var(--bg3); border-top: none; border-radius: 0 0 var(--radius) var(--radius); }

/* Diagrams */
.diagram { background: var(--bg2); border-radius: var(--radius); padding: 2rem; margin: 1.5rem 0; border: 1px solid var(--bg3); text-align: center; overflow-x: auto; }
.diagram-title { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--tx3); margin-bottom: 1rem; }

/* Service category boxes */
.svc-box { display: inline-block; padding: .5rem 1rem; border-radius: 8px; margin: .25rem; font-size: .85rem; font-weight: 600; }
.svc-compute { background: rgba(251,146,60,.15); color: #fb923c; border: 1px solid rgba(251,146,60,.3); }
.svc-storage { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.3); }
.svc-db { background: rgba(96,165,250,.15); color: #60a5fa; border: 1px solid rgba(96,165,250,.3); }
.svc-network { background: rgba(192,132,252,.15); color: #c084fc; border: 1px solid rgba(192,132,252,.3); }
.svc-security { background: rgba(248,113,113,.15); color: #f87171; border: 1px solid rgba(248,113,113,.3); }
.svc-mgmt { background: rgba(45,212,191,.15); color: #2dd4bf; border: 1px solid rgba(45,212,191,.3); }
.svc-integ { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }

/* Temperature scale */
.temp-scale { display: flex; flex-direction: column; gap: .5rem; max-width: 500px; margin: 1rem auto; }
.temp-bar { display: flex; align-items: center; padding: .75rem 1rem; border-radius: 8px; font-weight: 600; font-size: .9rem; }
.temp-bar .label { flex:1; }
.temp-bar .cost { font-size: .8rem; opacity: .8; }

/* Flashcard */
.fc-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 0; }
.fc-progress { font-size: .85rem; color: var(--tx2); }
.fc-card { width: 100%; max-width: 600px; min-height: 280px; perspective: 1000px; cursor: pointer; }
.fc-inner { position: relative; width: 100%; min-height: 280px; transition: transform .5s; transform-style: preserve-3d; }
.fc-card.flipped .fc-inner { transform: rotateY(180deg); }
.fc-front, .fc-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius); padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.fc-front { background: linear-gradient(135deg, var(--bg2), var(--bg3)); border: 2px solid var(--bg3); }
.fc-back { background: linear-gradient(135deg, #1a2744, #1e3a5f); border: 2px solid var(--acc); transform: rotateY(180deg); }
.fc-front h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.fc-back p { font-size: 1.1rem; color: var(--tx); line-height: 1.6; }
.fc-hint { font-size: .8rem; color: var(--tx3); margin-top: 1rem; }
.fc-controls { display: flex; gap: .75rem; }
.fc-btn { padding: .6rem 1.5rem; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: .9rem; transition: all .15s; }
.fc-btn:hover { transform: translateY(-1px); }
.fc-btn.know { background: var(--grn); color: var(--bg); }
.fc-btn.skip { background: var(--bg3); color: var(--tx); }
.fc-btn.again { background: var(--amb); color: var(--bg); }
.fc-btn.nav { background: var(--bg2); color: var(--tx2); border: 1px solid var(--bg3); }
.fc-filter { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1rem; }
.fc-filter button { padding: .35rem .75rem; border-radius: 99px; border: 1px solid var(--bg3); background: var(--bg2); color: var(--tx2); cursor: pointer; font-size: .8rem; transition: all .15s; }
.fc-filter button.active { background: var(--acc); color: var(--bg); border-color: var(--acc); font-weight: 600; }

/* Quiz */
.quiz-q { background: var(--bg2); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; border: 1px solid var(--bg3); }
.quiz-q h3 { margin-bottom: 1rem; }
.quiz-q .options { display: flex; flex-direction: column; gap: .5rem; }
.quiz-q .opt { padding: .75rem 1rem; border-radius: 8px; border: 1px solid var(--bg3); cursor: pointer; transition: all .15s; display: flex; gap: .75rem; align-items: flex-start; }
.quiz-q .opt:hover:not(.disabled) { border-color: var(--acc); background: rgba(56,189,248,.05); }
.quiz-q .opt.selected { border-color: var(--acc); background: rgba(56,189,248,.1); }
.quiz-q .opt.correct { border-color: var(--grn); background: rgba(74,222,128,.1); }
.quiz-q .opt.wrong { border-color: var(--red); background: rgba(248,113,113,.1); }
.quiz-q .opt .letter { font-weight: 700; color: var(--tx3); min-width: 1.5rem; }
.quiz-q .opt.correct .letter { color: var(--grn); }
.quiz-q .opt.wrong .letter { color: var(--red); }
.quiz-q .opt.disabled { cursor: default; opacity: .7; }
.quiz-q .explain { margin-top: 1rem; padding: 1rem; background: var(--bg3); border-radius: 8px; animation: fadeIn .3s; }
.quiz-q .explain strong { color: var(--grn); }

.quiz-controls { display: flex; gap: 1rem; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; }
.quiz-btn { padding: .6rem 1.5rem; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; font-size: .9rem; background: var(--acc); color: var(--bg); transition: all .15s; }
.quiz-btn:hover { transform: translateY(-1px); }
.quiz-btn.secondary { background: var(--bg3); color: var(--tx); }
.quiz-score { text-align: center; padding: 2rem; }
.quiz-score .big { font-size: 3rem; font-weight: 800; }
.quiz-score .pct { font-size: 1.2rem; color: var(--tx2); }

/* Mnemonic cards */
.mnem { background: var(--bg2); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; border-left: 3px solid var(--pur); }
.mnem-title { font-weight: 700; margin-bottom: .5rem; font-size: 1.05rem; }
.mnem-visual { font-size: 1.5rem; margin: .75rem 0; text-align: center; padding: 1rem; background: var(--bg); border-radius: 8px; line-height: 2; }
.mnem-explain { color: var(--tx2); font-size: .9rem; }

/* Responsibility diagram */
.resp-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 600px; margin: 1rem auto; border-radius: var(--radius); overflow: hidden; }
.resp-col { padding: 1.25rem; }
.resp-col.aws { background: rgba(251,146,60,.08); }
.resp-col.you { background: rgba(96,165,250,.08); }
.resp-col h4 { font-size: .9rem; margin-bottom: .75rem; }
.resp-col.aws h4 { color: #fb923c; }
.resp-col.you h4 { color: #60a5fa; }
.resp-col ul { list-style: none; }
.resp-col li { padding: .25rem 0; font-size: .85rem; color: var(--tx2); }
.resp-col li::before { content: "\25B8 "; color: var(--tx3); }

/* Weight bar */
.weight-bar { display: flex; height: 32px; border-radius: 8px; overflow: hidden; margin: 1rem 0; }
.weight-seg { display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--bg); transition: all .3s; }
.weight-seg:hover { filter: brightness(1.2); }

/* Progress dashboard */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.dash-stat { background: var(--bg2); border-radius: var(--radius); padding: 1.25rem; text-align: center; border: 1px solid var(--bg3); }
.dash-stat .num { font-size: 2rem; font-weight: 800; }
.dash-stat .lbl { font-size: .8rem; color: var(--tx2); text-transform: uppercase; letter-spacing: .5px; }

/* Search */
.search-box { width: 100%; padding: .75rem 1rem; background: var(--bg2); border: 1px solid var(--bg3); border-radius: var(--radius); color: var(--tx); font-size: 1rem; outline: none; transition: all .2s; margin-bottom: 1rem; }
.search-box:focus { border-color: var(--acc); }
.search-box::placeholder { color: var(--tx3); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }

/* Drill mode */
.drill-bar { display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem; background:var(--bg2); border-radius:var(--radius); margin-bottom:1.5rem; border:1px solid var(--amb); }
.drill-bar .drill-timer { font-size:1.5rem; font-weight:800; color:var(--amb); font-variant-numeric:tabular-nums; min-width:4rem; }
.drill-bar .drill-stats { font-size:.9rem; color:var(--tx2); }
.drill-bar .drill-stats strong { color:var(--tx); }
.drill-progress-bar { height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; margin-bottom:1rem; }
.drill-progress-fill { height:100%; background: linear-gradient(90deg,var(--amb),var(--grn)); transition:width .3s; border-radius:3px; }
.drill-results { text-align:center; padding:2rem; }
.drill-results .big { font-size:3.5rem; font-weight:800; margin-bottom:.5rem; }
.drill-results .sub { color:var(--tx2); font-size:1.1rem; margin-bottom:1.5rem; }
.drill-btns { display:flex; gap:1rem; justify-content:center; }
.drill-btns button { padding:1rem 2.5rem; border-radius:12px; border:none; cursor:pointer; font-weight:700; font-size:1.1rem; transition:all .15s; }
.drill-btns button:hover { transform:translateY(-2px); }
.drill-btns .nope { background:var(--red); color:#fff; }
.drill-btns .got-it { background:var(--grn); color:var(--bg); }

/* Confidence dots */
.conf-dots { display:flex; gap:3px; margin-top:.5rem; justify-content:center; }
.conf-dot { width:8px; height:8px; border-radius:50%; background:var(--bg3); }
.conf-dot.filled { background:var(--grn); }
.conf-dot.wrong { background:var(--red); }

/* Exam sim nav grid */
.exam-nav-cell { width:36px; height:36px; border-radius:6px; border:1px solid var(--bg3); background:var(--bg2); color:var(--tx2); font-size:.75rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.exam-nav-cell:hover { border-color:var(--acc); }
.exam-nav-cell.current { border-color:var(--acc); background:rgba(56,189,248,.15); color:var(--acc); }
.exam-nav-cell.answered { background:var(--bg3); color:var(--tx); }
.exam-nav-cell.flagged { border-color:var(--amb); background:rgba(251,191,36,.1); color:var(--amb); }
.exam-nav-cell.flagged.answered { background:rgba(251,191,36,.15); color:var(--amb); }

/* Keyboard hint */
.kbd-hint { text-align:center; padding:.5rem; font-size:.75rem; color:var(--tx3); }
kbd { display:inline-block; padding:.1rem .4rem; background:var(--bg3); border-radius:4px; font-family:inherit; font-size:.75rem; border:1px solid var(--tx3); }

/* Domain breakdown */
.domain-breakdown { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin:1.5rem 0; }
.domain-score { text-align:center; padding:1rem 1.5rem; background:var(--bg2); border-radius:var(--radius); border:1px solid var(--bg3); min-width:140px; }
.domain-score .pct { font-size:1.5rem; font-weight:800; }
.domain-score .dlabel { font-size:.8rem; color:var(--tx2); }

/* Stub placeholder */
.stub-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--tx3);
  text-align: center;
  gap: 1rem;
}
.stub-placeholder .icon { font-size: 4rem; opacity: .5; }
.stub-placeholder h1 { color: var(--tx2); }

/* ============================================================
   ALGORITHM SANDBOX (reusable across tutorials)
   ============================================================ */
.algo-sandbox {
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid var(--bg3);
  margin: 1.5rem 0;
  overflow: hidden;
}
.algo-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 350px;
}
@media (max-width: 850px) { .algo-layout { grid-template-columns: 1fr; } }

.algo-viz {
  position: relative;
  background: var(--bg);
  border-right: 1px solid var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
}
.algo-viz svg {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

/* SVG graph node/edge styles */
.graph-edge { stroke: var(--bg3); stroke-width: 2; transition: stroke .3s, stroke-width .3s; }
.graph-edge.considering { stroke: var(--amb); stroke-width: 3; stroke-dasharray: 6 3; }
.graph-edge.active { stroke: var(--acc); stroke-width: 3; }
.graph-edge.used { stroke: var(--grn); stroke-width: 3; }
.graph-edge.path { stroke: var(--pur); stroke-width: 3.5; }
.graph-edge.rejected { stroke: var(--red); stroke-width: 2; opacity: .4; }

.graph-arrow { fill: var(--bg3); transition: fill .3s; }
.graph-arrow.active { fill: var(--acc); }
.graph-arrow.used { fill: var(--grn); }

.graph-node { transition: fill .3s, stroke .3s; cursor: default; }
.graph-node circle { fill: var(--bg2); stroke: var(--tx3); stroke-width: 2; transition: fill .3s, stroke .3s; }
.graph-node text { fill: var(--tx); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.graph-node.queued circle { fill: rgba(251,191,36,.2); stroke: var(--amb); }
.graph-node.current circle { fill: rgba(56,189,248,.25); stroke: var(--acc); stroke-width: 3; }
.graph-node.visited circle { fill: rgba(74,222,128,.15); stroke: var(--grn); }
.graph-node.path circle { fill: rgba(192,132,252,.2); stroke: var(--pur); stroke-width: 3; }
.graph-node.start circle { fill: rgba(56,189,248,.3); stroke: var(--acc); stroke-width: 3; }

.graph-weight {
  fill: var(--amb);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.graph-dist {
  fill: var(--tx3);
  font-size: 10px;
  text-anchor: middle;
  dominant-baseline: hanging;
}

/* Info panel (pseudocode + state) */
.algo-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.algo-pseudocode {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  border-bottom: 1px solid var(--bg3);
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: .82rem;
  line-height: 1.8;
}
.algo-pseudocode .line {
  padding: 0 .5rem;
  border-radius: 4px;
  transition: background .2s;
  white-space: pre;
  color: var(--tx2);
}
.algo-pseudocode .line.highlight {
  background: rgba(56,189,248,.12);
  color: var(--tx);
}
.algo-pseudocode .line .kw { color: var(--pur); }
.algo-pseudocode .line .fn { color: var(--acc); }
.algo-pseudocode .line .cm { color: var(--tx3); font-style: italic; }

.algo-state {
  padding: .75rem 1rem;
  font-size: .82rem;
  color: var(--tx2);
  background: var(--bg);
  max-height: 140px;
  overflow-y: auto;
}
.algo-state .ds-label { color: var(--tx3); font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .15rem; }
.algo-state .ds-val { color: var(--tx); font-family: 'Consolas', monospace; font-size: .85rem; margin-bottom: .5rem; word-break: break-all; }

/* Step description */
.algo-step-desc {
  padding: .75rem 1rem;
  font-size: .9rem;
  color: var(--tx);
  border-top: 1px solid var(--bg3);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

/* Playback controls */
.algo-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--bg3);
  flex-wrap: wrap;
}
.algo-controls button {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--tx2);
  padding: .35rem .65rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.algo-controls button:hover { border-color: var(--acc); color: var(--tx); }
.algo-controls button.playing { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.algo-controls .step-indicator { font-size: .8rem; color: var(--tx3); margin-left: auto; font-variant-numeric: tabular-nums; }
.algo-controls select {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--tx2);
  padding: .3rem .4rem;
  border-radius: 6px;
  font-size: .8rem;
  cursor: pointer;
}

/* Small static graph examples (taxonomy section) */
.graph-example-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; }
.graph-example-card {
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid var(--bg3);
  overflow: hidden;
  transition: border-color .2s;
}
.graph-example-card:hover { border-color: var(--acc); }
.graph-example-card svg { width: 100%; height: 180px; background: var(--bg); display: block; }
.graph-example-card .caption { padding: .75rem 1rem; }
.graph-example-card .caption h4 { font-size: .95rem; font-weight: 700; margin-bottom: .25rem; color: var(--tx); }
.graph-example-card .caption p { font-size: .8rem; color: var(--tx2); margin: 0; }

/* Glossary */
.glossary-grid { columns: 2; column-gap: 1.5rem; }
@media (max-width: 700px) { .glossary-grid { columns: 1; } }
.glossary-entry { break-inside: avoid; padding: .5rem 0; border-bottom: 1px solid var(--bg3); }
.glossary-entry dt { font-weight: 700; color: var(--acc); font-size: .95rem; }
.glossary-entry dd { color: var(--tx2); font-size: .85rem; margin: .15rem 0 0; }

/* ============================================================
   UV SANDBOX (canvas-based interactive demos)
   ============================================================ */
.uv-sandbox {
  background: var(--bg2);
  border-radius: var(--radius);
  border: 1px solid var(--bg3);
  margin: 1.5rem 0;
  overflow: hidden;
}
.uv-sandbox-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 350px;
}
@media (max-width: 850px) { .uv-sandbox-layout { grid-template-columns: 1fr; } }

.uv-sandbox-panel {
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.uv-sandbox-panel:first-child { border-right: 1px solid var(--bg3); }
.uv-sandbox-panel canvas {
  width: 100%;
  height: 100%;
  min-height: 300px;
  cursor: grab;
  display: block;
}
.uv-sandbox-panel canvas:active { cursor: grabbing; }
.uv-sandbox-panel .panel-label {
  position: absolute;
  top: .5rem;
  left: .75rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tx3);
  background: rgba(15,23,42,.8);
  padding: .15rem .5rem;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

.uv-sandbox-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: var(--bg);
  border-top: 1px solid var(--bg3);
  flex-wrap: wrap;
}
.uv-sandbox-controls select {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--tx2);
  padding: .3rem .5rem;
  border-radius: 6px;
  font-size: .8rem;
  cursor: pointer;
}
.uv-sandbox-controls button {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  color: var(--tx2);
  padding: .35rem .65rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .82rem;
  transition: all .15s;
}
.uv-sandbox-controls button:hover { border-color: var(--acc); color: var(--tx); }
.uv-sandbox-controls button.active { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.uv-sandbox-controls label {
  font-size: .8rem;
  color: var(--tx3);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.uv-sandbox-controls .separator { width: 1px; height: 20px; background: var(--bg3); }

/* Key concept tip (rebranded from exam tip) */
.key-tip { background: rgba(56,189,248,.08); border-left: 3px solid var(--acc); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0; }
.key-tip::before { content: "KEY CONCEPT"; display: block; font-size: .7rem; font-weight: 800; color: var(--acc); letter-spacing: 1px; margin-bottom: .25rem; }
.key-tip p { color: var(--tx); }

.pro-tip { background: rgba(251,191,36,.08); border-left: 3px solid var(--amb); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0; }
.pro-tip::before { content: "PRO TIP"; display: block; font-size: .7rem; font-weight: 800; color: var(--amb); letter-spacing: 1px; margin-bottom: .25rem; }
.pro-tip p { color: var(--tx); }

/* Distortion legend */
.distortion-legend { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; font-size: .75rem; color: var(--tx2); }
.distortion-legend .gradient-bar { width: 120px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--grn), var(--amb), var(--red)); }

/* UV utilization display */
.uv-utilization { font-size: .85rem; color: var(--tx2); padding: .25rem .75rem; }
.uv-utilization strong { color: var(--grn); font-variant-numeric: tabular-nums; }

/* ============================================================
   TROUBLESHOOTING TUTORIAL
   ============================================================ */

/* Observation checklist */
.ts-checklist { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.ts-check-item { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--tx2); cursor: pointer; padding: .3rem 0; }
.ts-check-item input[type="checkbox"] { accent-color: var(--grn); width: 16px; height: 16px; cursor: pointer; }
.ts-check-item:has(input:checked) { color: var(--tx3); text-decoration: line-through; }

/* Layer stack */
.ts-layer-stack { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.ts-layer { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-radius: 8px; border-left: 3px solid; }
.ts-layer-name { font-weight: 700; font-size: .9rem; color: var(--tx); }
.ts-layer-hint { font-size: .8rem; color: var(--tx2); text-align: right; }

/* Verify levels */
.ts-verify-levels { display: flex; flex-direction: column; gap: 1rem; margin-top: .75rem; }
.ts-verify-level { display: flex; gap: 1rem; align-items: flex-start; }
.ts-verify-num { min-width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; flex-shrink: 0; }
.ts-verify-level p { color: var(--tx2); margin-top: .25rem; font-size: .9rem; }

/* Binary search pipeline demo */
.ts-binary-demo { text-align: center; }
.ts-pipeline { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.ts-pipe-stage { background: var(--bg3); color: var(--tx); padding: .5rem .75rem; border-radius: 6px; font-size: .8rem; font-weight: 600; }
.ts-pipe-arrow { color: var(--tx3); font-size: .9rem; padding: 0 .25rem; }

/* ============================================================
   ENTERPRISE ARCHITECTURE TUTORIAL
   ============================================================ */

/* CAP diagram */
.ea-cap-diagram { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0; }
.ea-cap-node { flex: 1; min-width: 180px; padding: 1rem; border-radius: var(--radius); border-left: 3px solid; text-align: center; }
.ea-cap-node p { font-size: .85rem; margin-top: .35rem; }

/* Flow diagrams */
.ea-flow { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; margin: .75rem 0; }
.ea-flow-box { padding: .6rem 1rem; border-radius: 8px; border: 2px solid; background: var(--bg); font-size: .85rem; font-weight: 600; color: var(--tx); }
.ea-flow-arrow { color: var(--tx3); font-size: 1.1rem; padding: 0 .5rem; }

/* Auth flow steps */
.ea-auth-flow { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.ea-auth-step { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--tx2); padding: .4rem 0; }
.ea-auth-num { min-width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; flex-shrink: 0; }

/* ============================================================
   NETWORKING TUTORIAL
   ============================================================ */

/* Encapsulation diagram */
.net-encap { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.net-encap-row { display: flex; align-items: center; gap: .75rem; }
.net-encap-label { min-width: 90px; font-size: .8rem; font-weight: 700; color: var(--tx2); text-align: right; }
.net-encap-bar { display: flex; gap: 2px; }
.net-encap-seg { padding: .4rem .75rem; border-radius: 4px; font-size: .75rem; font-weight: 700; color: #fff; white-space: nowrap; }
.net-encap-hdr { opacity: .85; }

/* ============================================================
   PYTHON SYNTAX TUTORIAL
   ============================================================ */

/* Code blocks */
.py-code {
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-family: 'Consolas', 'Fira Code', 'JetBrains Mono', monospace;
  font-size: .85rem;
  line-height: 1.75;
  overflow-x: auto;
  color: var(--tx2);
  margin: .5rem 0;
  white-space: pre;
}
.py-code .kw { color: var(--pur); }       /* keywords: def, class, if, for, return, import, etc. */
.py-code .fn { color: var(--acc); }       /* function/class names, built-in functions */
.py-code .str { color: var(--grn); }      /* strings */
.py-code .num { color: var(--amb); }      /* numbers */
.py-code .cm { color: var(--tx3); font-style: italic; }  /* comments */
.py-code .bi { color: var(--red); }       /* built-in constants: True, False, None */

/* ============================================================
   MATH — EULER
   ============================================================ */
.euler-matrix {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  margin: .5rem 0 1rem;
  position: relative;
}
/* bracket decorations */
.euler-matrix::before,
.euler-matrix::after {
  content: '';
  position: absolute;
  top: .5rem; bottom: .5rem;
  width: 4px;
  border: 2px solid var(--tx3);
  border-radius: 2px;
}
.euler-matrix::before { left: .4rem; border-right: none; }
.euler-matrix::after  { right: .4rem; border-left: none; }

.matrix-table {
  border-collapse: collapse;
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: .95rem;
}
.matrix-table td {
  padding: .3rem .75rem;
  text-align: center;
  color: var(--tx);
  white-space: nowrap;
}

/* ============================================================
   POWERSHELL
   ============================================================ */
.ps-code {
  background: #0c0e1a;
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-family: 'Consolas', 'Cascadia Code', 'Fira Code', monospace;
  font-size: .88rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.ps-code .kw     { color: #569cd6; }            /* keywords: if, else, function, foreach */
.ps-code .cmdlet { color: #dcdcaa; }            /* cmdlets: Get-Process, Set-Location */
.ps-code .param  { color: #9cdcfe; }            /* parameters: -Path, -Recurse */
.ps-code .var    { color: #4ec9b0; }            /* variables: $name, $_, $true */
.ps-code .str    { color: #ce9178; }            /* strings */
.ps-code .num    { color: var(--amb); }          /* numbers */
.ps-code .cm     { color: #6a9955; font-style: italic; }  /* comments */
.ps-code .type   { color: #4ec9b0; }            /* type accelerators: [int], [string] */

/* ============================================================
   ELECTRON & TAURI
   ============================================================ */
.el-code {
  background: #0c0e1a;
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-family: 'Consolas', 'Cascadia Code', 'Fira Code', monospace;
  font-size: .88rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.el-code .kw  { color: #569cd6; }
.el-code .fn  { color: #dcdcaa; }
.el-code .str { color: #ce9178; }
.el-code .num { color: var(--amb); }
.el-code .cm  { color: #6a9955; font-style: italic; }

/* Tauri reuses .el-code plus Rust-specific */
.ta-code {
  background: #0c0e1a;
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-family: 'Consolas', 'Cascadia Code', 'Fira Code', monospace;
  font-size: .88rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.ta-code .kw      { color: #569cd6; }
.ta-code .fn      { color: #dcdcaa; }
.ta-code .str     { color: #ce9178; }
.ta-code .num     { color: var(--amb); }
.ta-code .cm      { color: #6a9955; font-style: italic; }
.ta-code .type    { color: #4ec9b0; }
.ta-code .rs-attr { color: #c586c0; }   /* Rust attributes #[...] */

/* Architecture diagrams (shared Electron/Tauri) */
.el-arch-diagram {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
.el-arch-box {
  flex: 1;
  min-width: 220px;
  background: var(--bg);
  border: 2px solid var(--acc);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.el-arch-box h3 { margin-bottom: .5rem; }
.el-arch-box ul { margin-left: 1.25rem; font-size: .9rem; }
.el-arch-box li { margin-bottom: .25rem; }
.el-arch-arrow {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--amb);
  min-width: 60px;
  justify-content: center;
}
.el-arch-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 1.5rem 0;
}
.el-arch-step {
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: .75rem 1.5rem;
  text-align: center;
  min-width: 280px;
}
.el-arch-step small { color: var(--tx3); }
.el-arch-step-arrow {
  font-size: 1.3rem;
  color: var(--acc);
  padding: .15rem 0;
}
.el-arch-num {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  background: var(--acc);
  color: var(--bg);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
  margin-right: .5rem;
}
.el-arch-main { border-color: var(--grn); }
.el-arch-renderer { border-color: var(--acc); }

/* ============================================================
   ELECTRICITY
   ============================================================ */
.elec-formula {
  background: var(--bg);
  border: 1px solid var(--bg3);
  border-radius: var(--radius);
  padding: .6rem 1.25rem;
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: 1.15rem;
  text-align: center;
  margin: .75rem 0;
  color: var(--amb);
  letter-spacing: .5px;
}
.sym-cell {
  font-family: 'Consolas', monospace;
  font-size: .95rem;
  color: var(--acc);
  letter-spacing: 1px;
}

/* Print */
@media print { .site-header,.site-sidebar,.site-footer,.site-east{display:none;} body{display:block;} section{display:block!important;} .fc-card,.quiz-q{break-inside:avoid;} }

/* Responsive */
@media (max-width: 768px) {
  body { grid-template-columns: 0px 1fr 0px; }
  .site-sidebar { display: none; }
}