/* Homelab Academy / Classroom */
:root {
  --cr-mean: #8db3d9;
  --cr-more: #39e6c8;
  --cr-baby: #43d98a;
  --cr-mid: #e0a83c;
  --cr-adv: #ef5f6b;
  --cr-win: #5b9fd4;
  --cr-lin: #39e6c8;
}

.cr-subnav {
  position: sticky; top: 52px; z-index: 15;
  background: rgba(9,12,17,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px);
}
.cr-subnav .wrap { display:flex; gap:6px; overflow-x:auto; padding:10px 24px; scrollbar-width:thin; }
.cr-subnav a {
  flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:var(--cream-dim);
  border:1px solid transparent; border-radius:4px; padding:6px 10px;
}
.cr-subnav a:hover, .cr-subnav a.is-active { color:var(--accent-bright); border-color:var(--accent-dim); background:rgba(57,230,200,.06); }

.cr-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid; font-weight:700;
}
.cr-badge.baby { color:var(--cr-baby); border-color:var(--signal-dim); background:rgba(67,217,138,.1); }
.cr-badge.mid { color:var(--cr-mid); border-color:var(--warn-dim); background:rgba(224,168,60,.1); }
.cr-badge.adv { color:#ffb4ba; border-color:rgba(239,95,107,.45); background:rgba(239,95,107,.1); }

.cr-path-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:20px 0;
}
@media (max-width:720px){ .cr-path-grid { grid-template-columns:1fr; } }
.cr-path-card {
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:8px; padding:20px; background:var(--surface);
  transition:border-color .15s, background .15s;
}
.cr-path-card:hover { border-color:var(--accent); background:var(--surface-2); }
.cr-path-card.win { border-top:3px solid var(--cr-win); }
.cr-path-card.lin { border-top:3px solid var(--cr-lin); }
.cr-path-card.dim { opacity:.72; }
.cr-path-card h3 { margin:0 0 8px; font-size:1.2rem; }
.cr-path-card p { margin:0; color:var(--cream-dim); font-size:.95rem; }

.cr-course-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0;
}
@media (max-width:800px){ .cr-course-grid { grid-template-columns:1fr; } }
.cr-course-card {
  display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:start;
  border:1px solid var(--line); border-radius:8px; padding:16px; background:var(--surface);
  text-decoration:none; color:inherit;
}
.cr-course-card:hover { border-color:var(--accent-dim); }
.cr-course-card .num {
  font-family:'Bricolage Grotesque',sans-serif; font-size:1.6rem; font-weight:800; color:var(--accent-bright); line-height:1;
}
.cr-course-card h3 { margin:0 0 6px; font-size:1.05rem; }
.cr-course-card p { margin:0; color:var(--cream-dim); font-size:.9rem; }
.cr-course-card .meta { margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-faint); }

.cr-osbar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:16px 0; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--bg-elevated);
}
.cr-osbar span { color:var(--cream-dim); font-size:.9rem; margin-right:4px; }
.cr-osbar button {
  font-family:'Figtree',sans-serif; font-weight:700; font-size:.8rem;
  border-radius:999px; padding:7px 12px; cursor:pointer; border:1px solid var(--line-bright);
  background:transparent; color:var(--cream);
}
.cr-osbar button[aria-pressed="true"].win { background:rgba(91,159,212,.18); border-color:var(--cr-win); color:#9ec4ef; }
.cr-osbar button[aria-pressed="true"].lin { background:rgba(57,230,200,.14); border-color:var(--cr-lin); color:var(--accent-bright); }

.cr-lesson-head { margin-bottom:8px; }
.cr-lesson-head .row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }

.cr-box {
  border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:16px 18px; margin:14px 0;
}
.cr-box h3 {
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-bright); margin:0 0 10px;
}
.cr-box ul { margin:0; padding-left:1.15rem; color:var(--cream-dim); }
.cr-box li { margin-bottom:6px; }
.cr-box p { margin:0; color:var(--cream-dim); }
.cr-words { display:flex; flex-wrap:wrap; gap:8px; }
.cr-words a {
  font-family:'JetBrains Mono',monospace; font-size:.72rem; text-decoration:none;
  border:1px solid var(--line-bright); border-radius:4px; padding:5px 8px; color:var(--cr-mean);
}
.cr-words a:hover { border-color:var(--cr-mean); color:#fff; }

.cr-diagram {
  font-family:'JetBrains Mono',monospace; font-size:.8rem; line-height:1.45;
  background:#020806; border:1px solid var(--line-bright); border-radius:8px;
  padding:16px; overflow-x:auto; color:var(--cream); margin:14px 0; white-space:pre;
}
.cr-diagram .hi { color:var(--accent-bright); font-weight:700; }

.cr-step {
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:18px; margin:16px 0;
}
.cr-step h3 { margin:0 0 10px; font-size:1.12rem; }
.cr-step .cr-body { color:var(--cream-dim); margin:0 0 12px; }
.cr-os-block { display:none; margin-top:10px; }
.cr-os-block.active { display:block; }
.cr-step-text .cr-os-block { margin-top:12px; }
.cr-step-text .cr-os-block.active + .cr-os-block.active { margin-top:8px; }
/* When JS has not run yet, show both so commands are never missing */
html:not([data-classroom-os]) .cr-os-block { display:block; }
.cr-os-label {
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:8px; padding:3px 8px; border-radius:4px;
}
.cr-os-label.win { color:#9ec4ef; background:rgba(91,159,212,.15); }
.cr-os-label.lin { color:var(--accent-bright); background:rgba(57,230,200,.12); }
.cr-step pre, .cr-code {
  font-family:'JetBrains Mono',monospace; font-size:.82rem; line-height:1.5;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:6px;
  padding:12px 14px; overflow-x:auto; color:var(--cream); margin:8px 0 0;
}

.cr-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; }
.cr-btn {
  font-family:'Figtree',sans-serif; font-weight:700; font-size:.82rem;
  border-radius:999px; padding:8px 14px; cursor:pointer; background:transparent; color:var(--cream);
  border:1px solid var(--line-bright);
}
.cr-btn[data-cr="mean"] { border-color:color-mix(in srgb, var(--cr-mean) 55%, var(--line)); color:var(--cr-mean); }
.cr-btn[data-cr="more"] { border-color:color-mix(in srgb, var(--cr-more) 55%, var(--line)); color:var(--cr-more); }
.cr-btn[aria-expanded="true"] { background:rgba(57,230,200,.08); }
.cr-panel { margin-top:12px; padding:14px 16px; border-radius:6px; font-size:.98rem; line-height:1.55; }
.cr-panel[hidden] { display:none !important; }
.cr-panel.mean { background:rgba(141,179,217,.1); border:1px solid rgba(141,179,217,.35); color:var(--cream); }
.cr-panel.more { background:rgba(57,230,200,.07); border:1px solid rgba(57,230,200,.28); color:var(--cream-dim); }

.cr-check {
  border:1px solid var(--signal-dim); border-radius:8px; background:rgba(67,217,138,.06);
  padding:16px 18px; margin:20px 0;
}
.cr-check h3 {
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal); margin:0 0 12px;
}
.cr-check label {
  display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; color:var(--cream); cursor:pointer;
}
.cr-check input { margin-top:4px; accent-color:var(--signal); width:16px; height:16px; }
.cr-gate {
  margin-top:14px; padding:12px 14px; border-radius:6px; border:1px dashed var(--line-bright);
  color:var(--cream-dim); font-size:.95rem;
}
.cr-gate.ready { border-color:var(--signal); color:var(--signal); background:rgba(67,217,138,.08); }
.cr-gate a { pointer-events:none; opacity:.45; }
.cr-gate.ready a { pointer-events:auto; opacity:1; font-weight:700; }

.cr-tree {
  display:grid; gap:0; margin:16px 0; font-family:'JetBrains Mono',monospace; font-size:.85rem;
}
.cr-tree .node {
  border:1px solid var(--line); background:var(--surface); padding:10px 12px; text-align:center;
}
.cr-tree .q { border-color:var(--accent-dim); color:var(--accent-bright); font-weight:700; }
.cr-tree .branch {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0;
}
.cr-tree .leaf { border-left:3px solid var(--warn); }
.cr-tree .ok { border-left:3px solid var(--signal); }
.cr-tree .bad { border-left:3px solid var(--danger); }

.cr-pager {
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:28px 0 8px; padding-top:18px; border-top:1px solid var(--line);
}
.cr-pager a {
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--cream-dim); border:1px solid var(--line-bright); border-radius:4px; padding:10px 14px;
}
.cr-pager a:hover { color:var(--accent-bright); border-color:var(--accent); }

.cr-glossary details {
  border:1px solid var(--line); border-radius:6px; background:var(--surface); margin-bottom:8px; padding:10px 14px;
}
.cr-glossary summary { cursor:pointer; font-weight:700; color:var(--cream); }
.cr-glossary details[open] summary { color:var(--accent-bright); margin-bottom:6px; }
.cr-glossary .baby { color:var(--cream-dim); margin:0; }
.cr-glossary .tech { color:var(--cream-faint); font-size:.9rem; margin:6px 0 0; }

.cr-lab-evidence label { display:flex; gap:10px; margin-bottom:8px; color:var(--cream-dim); }

.cr-callout {
  border-left:4px solid var(--warn); background:rgba(224,168,60,.08);
  padding:12px 16px; border-radius:0 6px 6px 0; margin:16px 0; color:var(--cream);
}
.cr-callout.tip { border-left-color:var(--accent-bright); background:rgba(57,230,200,.07); }

/* Markdown pack pages */
.cr-md .cr-article {
  max-width: 52rem;
  color: var(--cream-dim);
  line-height: 1.65;
  font-size: 1.02rem;
}
.cr-md .cr-article h1 { display:none; } /* title already in hero */
.cr-md .cr-article h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.35rem;
  color: var(--cream);
  margin: 1.8rem 0 .7rem;
  padding-top: .4rem;
  border-top: 1px solid var(--line);
}
.cr-md .cr-article h3 {
  font-size: 1.08rem;
  color: var(--accent-bright);
  margin: 1.3rem 0 .5rem;
}
.cr-md .cr-article p { margin: .7rem 0; }
.cr-md .cr-article ul, .cr-md .cr-article ol { margin: .6rem 0 .9rem 1.2rem; }
.cr-md .cr-article li { margin: .25rem 0; }
.cr-md .cr-article a { color: var(--accent-bright); }
.cr-md .cr-article strong { color: var(--cream); }
.cr-md .cr-article code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .86em;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .35em;
}
.cr-md .cr-article pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  line-height: 1.45;
  background: #0b0f14;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--cream);
  margin: 1rem 0;
}
.cr-md .cr-article pre code {
  background: none; border: 0; padding: 0; font-size: inherit;
}
.cr-md .cr-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.4rem;
  font-size: .92rem;
}
.cr-md .cr-article th, .cr-md .cr-article td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.cr-md .cr-article th {
  background: var(--surface);
  color: var(--cream);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cr-md .cr-article blockquote {
  margin: 1rem 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(57,230,200,.06);
  color: var(--cream);
}
.cr-class-list { margin: 0; padding-left: 1.2rem; }
.cr-class-list li { margin: .45rem 0; }
.cr-class-list a { color: var(--cream); text-decoration: none; }
.cr-class-list a:hover { color: var(--accent-bright); }

/* Do not use homepage FREE sticker chrome on Academy heroes */
.cr-md .hero.is-free,
.hero.flush.is-free { padding-top: inherit; }
.hero.flush > .free-sticker { display: none !important; }

/* Meta strip under class hero: matches KeepRoute/FAQ density */
.cr-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
@media (max-width: 800px) {
  .cr-meta-grid { grid-template-columns: 1fr; }
}
.cr-meta-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px 14px;
}
.cr-meta-grid span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 6px;
}
.cr-meta-grid p,
.cr-meta-grid > div > p { margin: 0; color: var(--cream-dim); font-size: .95rem; }
.cr-meta-grid a { color: var(--accent-bright); }

/* Color-coded section shells */
.cr-box-lab {
  border-color: rgba(57,230,200,.4);
  border-left: 4px solid var(--cr-lin);
  background: linear-gradient(180deg, rgba(57,230,200,.06), var(--surface) 48px);
}
.cr-box-break {
  border-color: rgba(224,168,60,.45);
  border-left: 4px solid var(--cr-mid);
  background: linear-gradient(180deg, rgba(224,168,60,.07), var(--surface) 48px);
}
.cr-box-quiz {
  border-color: rgba(141,179,217,.45);
  border-left: 4px solid var(--cr-mean);
  background: linear-gradient(180deg, rgba(141,179,217,.07), var(--surface) 48px);
}
.cr-box-diagram {
  border-color: rgba(91,159,212,.4);
  border-left: 4px solid var(--cr-win);
}
.cr-box-vocab {
  border-color: rgba(67,217,138,.35);
  border-left: 4px solid var(--cr-baby);
}
.cr-box-trouble {
  border-color: rgba(239,95,107,.4);
  border-left: 4px solid var(--cr-adv);
  background: linear-gradient(180deg, rgba(239,95,107,.06), var(--surface) 48px);
}
.cr-box-gate, .cr-check {
  border-left: 4px solid var(--signal);
}

.cr-box-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cr-box-head h3 {
  margin: 0;
  flex: 1 1 auto;
}
.cr-box-head strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.cr-chip {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid;
  flex: 0 0 auto;
}
.cr-chip-lab { color: var(--cr-lin); border-color: rgba(57,230,200,.45); background: rgba(57,230,200,.1); }
.cr-chip-break { color: var(--cr-mid); border-color: rgba(224,168,60,.45); background: rgba(224,168,60,.1); }
.cr-chip-quiz { color: var(--cr-mean); border-color: rgba(141,179,217,.45); background: rgba(141,179,217,.1); }
.cr-chip-map { color: #9ec4ef; border-color: rgba(91,159,212,.45); background: rgba(91,159,212,.12); }
.cr-chip-words { color: var(--cr-baby); border-color: rgba(67,217,138,.4); background: rgba(67,217,138,.1); }
.cr-chip-fix { color: #ffb4ba; border-color: rgba(239,95,107,.45); background: rgba(239,95,107,.1); }
.cr-chip-tip { color: var(--accent-bright); border-color: var(--accent-dim); background: rgba(57,230,200,.08); }
.cr-chip-gate { color: var(--signal); border-color: var(--signal-dim); background: rgba(67,217,138,.1); }
.cr-chip-learn { color: var(--cream-dim); border-color: var(--line-bright); background: rgba(255,255,255,.03); }

.cr-help { margin: 10px 0 4px; }
.cr-help .cr-actions { margin-top: 6px; }
.cr-prose-block {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.02);
}
.cr-prose-block:hover { border-color: var(--line); }
.cr-prose-block h4 { margin-top: 0; }
.cr-prose-code { background: transparent; padding: 0; }
.cr-break-card {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(224,168,60,.28);
  background: rgba(224,168,60,.05);
}
.cr-break-card h4 { margin: 0 0 8px; color: var(--cr-mid); }

.cr-step-list { display: grid; gap: 12px; margin-top: 14px; }
.cr-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(57,230,200,.28);
  border-radius: 8px;
  background: rgba(57,230,200,.04);
  padding: 14px 16px;
  margin: 0;
}
.cr-step-num {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 1rem;
  color: var(--cr-lin);
  background: rgba(57,230,200,.12);
  border: 1px solid rgba(57,230,200,.35);
}
.cr-step-body { min-width: 0; }
.cr-step-text { margin: 0; color: var(--cream); line-height: 1.55; }
.cr-step-text p { margin: 0 0 .65rem; color: inherit; }
.cr-step-text p:last-child { margin-bottom: 0; }
.cr-step-text ul, .cr-step-text ol {
  margin: .4rem 0 .7rem 1.15rem;
  color: var(--cream-dim);
}
.cr-step-text li { margin: .28rem 0; }
.cr-step-text pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  line-height: 1.45;
  background: #0b0f14;
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: .55rem 0;
}
.cr-step-text code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .86em;
}
.cr-step-text strong { color: var(--cream); }
.cr-step-do {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cr-lin);
  margin-bottom: 6px;
}

.cr-check-item {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(67,217,138,.2);
  background: rgba(67,217,138,.04);
}
.cr-check-item label {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 0; color: var(--cream); cursor: pointer;
}
.cr-check .cr-help { margin-left: 26px; }

.cr-lab-path {
  margin: 16px 0 8px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(57,230,200,.22);
  background: rgba(57,230,200,.03);
}
.cr-lab-path h4 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--cr-lin);
}
.cr-lab-path + .cr-lab-path {
  border-color: rgba(91,159,212,.28);
  background: rgba(91,159,212,.04);
}
.cr-lab-path + .cr-lab-path h4 { color: #9ec4ef; }

.cr-btn:hover { filter: brightness(1.08); }
.cr-btn:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.cr-box .cr-diagram {
  margin: 10px 0 0;
}
.cr-box table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 0;
  font-size: .92rem;
}
.cr-box th, .cr-box td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.cr-box th {
  background: rgba(255,255,255,.03);
  color: var(--cream);
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cr-box td { color: var(--cream-dim); }
.cr-box pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  line-height: 1.45;
  background: #0b0f14;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  color: var(--cream);
  margin: 10px 0 0;
}
.cr-box ul, .cr-box ol { margin: 8px 0 0 1.15rem; color: var(--cream-dim); }
.cr-box li { margin: .28rem 0; }
.cr-box p { margin: .55rem 0 0; color: var(--cream-dim); }
.cr-box p:first-child { margin-top: 0; }
.cr-box h4 {
  margin: 1rem 0 .35rem;
  font-size: 1rem;
  color: var(--cream);
}
.cr-callout .cr-box { margin: 0; border: 0; background: transparent; padding: 0; }
.cr-callout p { margin: .4rem 0 0; }
.cr-callout p:first-child { margin-top: 0; }

.cr-class-list .meta {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* Learning-system sections */
.cr-box-feynman {
  border:1px solid rgba(224,168,60,.55);
  background:rgba(224,168,60,.07);
}
.cr-box-objective { border-left:4px solid var(--signal); }
.cr-box-why { border-left:4px solid var(--accent-bright); }
.cr-box-prior { border-left:4px solid var(--warn); }
.cr-box-learn { border-left:4px solid var(--cream-dim); }
.cr-box-example { border-left:4px solid #8db3d9; }
.cr-box-practice { border-left:4px solid var(--signal-dim); }
.cr-box-reflect { border-left:4px solid #c9a0dc; }
.cr-box-spiral { border-left:4px solid #39e6c8; }
.cr-chip-feynman { background:rgba(224,168,60,.2); color:#f0c674; }
.cr-chip-goal { background:rgba(67,217,138,.15); color:var(--signal); }
.cr-chip-why { background:rgba(57,230,200,.12); color:var(--accent-bright); }
.cr-chip-prior { background:rgba(224,168,60,.12); color:var(--warn); }
.cr-chip-example { background:rgba(141,179,217,.15); color:#8db3d9; }
.cr-chip-practice { background:rgba(67,217,138,.1); color:var(--signal); }
.cr-chip-reflect { background:rgba(201,160,220,.15); color:#c9a0dc; }
.cr-chip-spiral { background:rgba(57,230,200,.12); color:#39e6c8; }
.cr-feynman-form { margin-top:14px; display:grid; gap:14px; }
.cr-feynman-field label {
  display:block; margin-bottom:6px; color:var(--cream); font-size:.95rem;
}
.cr-feynman-field textarea {
  width:100%; box-sizing:border-box; min-height:96px; resize:vertical;
  background:var(--surface); color:var(--cream); border:1px solid var(--line-bright);
  border-radius:6px; padding:10px 12px; font:inherit; line-height:1.5;
}
.cr-feynman-field textarea:focus {
  outline:2px solid rgba(224,168,60,.55); border-color:rgba(224,168,60,.7);
}
.cr-feynman-note {
  margin:4px 0 0; color:var(--cream-dim); font-size:.88rem;
  font-family:'JetBrains Mono',monospace;
}

/* Mobile containment: wide tables/code scroll inside cards, not the page */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.wrap {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}
.cr-box,
.cr-prose-block,
.cr-md .cr-article {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cr-box table,
.cr-prose-block table,
.cr-md .cr-article table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.cr-box pre,
.cr-prose-block pre,
.cr-md .cr-article pre {
  max-width: 100%;
  overflow-x: auto;
}

.class-visual {
  margin: 1.25rem 0 1.5rem;
  border: 1px solid rgba(86, 214, 255, .22);
  border-radius: 18px;
  overflow: hidden;
  background: #05080d;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
.class-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.class-visual figcaption {
  padding: .8rem 1rem;
  color: #8ea1b5;
  font-size: .9rem;
  background: #0d151e;
}
.cr-course-card .class-icon {
  width: 64px;
  height: 64px;
  display: block;
  border-radius: 8px;
  background: #05080d;
}