/* CyberForge UI. Dark, hairline-bordered surfaces with small lightness steps,
   one soft glow behind the hero, and short eased transitions. Everything
   collapses to instant under prefers-reduced-motion. */
:root {
  --bg: #080b12;
  --bg-2: #0b0f18;
  --panel: #111827;
  --panel-2: #172033;
  --panel-3: #1d2840;
  --line: #1e2638;
  --line-2: #2b3650;
  --line-3: #566180;      /* input borders: 3:1 against --bg so a field is visible without a placeholder */
  --text: #f8fafc;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --accent: #5b5fe8;      /* white on this reads 4.9:1 (the old #6366f1 was 4.47:1) */
  --accent-hover: #5257e0;
  --accent-2: #38bdf8;
  --ok: #3ccf91;
  --warn: #e5b53f;
  --danger: #f06a7e;
  --mastered: #3ccf91;
  --review: #e5b53f;
  --learn: #8f94ab;
  --locked: #666e84;      /* locked outlines, 3.5:1 on a panel */
  --radius: 14px;
  --radius-sm: 11px;
  --shadow: 0 1px 0 rgba(255,255,255,.035) inset;
  --ease: cubic-bezier(.2,.7,.2,1);
  --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Metric matched stand in for Inter while the web font downloads (display=swap),
   so the swap does not reflow the page. Local system font only, nothing is fetched. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 15px/1.6 var(--font); color: var(--text); background: var(--bg);
  font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(1000px 520px at 20% -10%, rgba(99,102,241,.16), transparent 65%);
}
a { color: var(--accent-2); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: #86d6ff; }
/* Links inside running text are underlined so colour is not the only cue. */
p a:not(.btn), .prose li a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
h1 { font-size: 30px; } h2 { font-size: 19px; } h3 { font-size: 15px; }
p { margin: 0 0 .9em; }
code { font-family: var(--mono); font-size: .88em; }
.muted { color: var(--muted); } .small { font-size: 13px; } .lead { font-size: 17px; color: var(--text-2); }
.hidden { display: none !important; }
::selection { background: rgba(110,123,255,.35); }

/* ---- header ---- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px;
  padding: 0 22px; height: 58px; border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; }
.brand:hover { color: var(--text); }
.brand-mark { border-radius: 7px; }
.brand-sub { font-weight: 400; color: var(--muted); font-size: 13px; padding-left: 10px; border-left: 1px solid var(--line-2); }
.nav { display: flex; gap: 2px; margin-left: 8px; }
.nav a { position: relative; color: var(--muted); padding: 7px 12px; border-radius: 8px; font-weight: 500; font-size: 14px; transition: color .15s var(--ease), background .15s var(--ease); }
.nav a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav a.active { color: var(--text); background: rgba(255,255,255,.05); }
.nav a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; animation: grow .3s var(--ease); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.account { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 150px; min-height: 32px; }
.who { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { display: none; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 4px 10px; font-size: 16px; }
.pill { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 108px; text-align: center; }

/* ---- layout ---- */
/* main reserves a viewport of height before the first view renders, so the
   footer starts below the fold and does not jump when content arrives */
main { width: 100%; max-width: 1220px; margin: 0 auto; padding: 32px 24px 88px; flex: 1; min-height: calc(100vh - 58px); }
.view { animation: viewIn .28s var(--ease); }
@keyframes viewIn { from { transform: translateY(6px); } to { transform: none; } }
.view h1:focus { outline: none; }
.view h1:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: 6px; }
.page-head { margin-bottom: 20px; }
.page-head .row { margin-top: 8px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow); transition: border-color .2s var(--ease); }
.card:hover { border-color: var(--line-2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .row.center { justify-content: center; }
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 8px; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.btn:hover { background: var(--panel-3); border-color: #3b4160; color: var(--text); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(110,123,255,.35); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.lg { padding: 12px 22px; font-size: 15px; border-radius: 11px; }
.btn:active { transform: scale(.99); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255,255,255,.04); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #1a0b10; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.link-btn { background: none; border: none; color: var(--accent-2); cursor: pointer; font: inherit; font-size: 13px; padding: 0; margin-left: 10px; }

/* ---- hero ---- */
.hero {
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: center;
  background: radial-gradient(700px 320px at 0% 0%, rgba(99,102,241,.12), transparent 60%), var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 36px; margin-bottom: 18px; overflow: hidden; min-height: 260px;
  box-shadow: var(--shadow);
}
.hero-h { display: flex; flex-direction: column; gap: 2px; }
.hero-h span { display: block; text-wrap: balance; }
.hero-h .accent { color: var(--accent-2); }
.hero-h span { animation: settle .7s var(--ease) both; }
.hero-h span:nth-child(2) { animation-delay: .12s; } .hero-h span:nth-child(3) { animation-delay: .24s; }
/* The headline slides in without a fade: text first painted at opacity 0 is
   never a largest contentful paint candidate, so the fade hid the real LCP. */
@keyframes settle { from { transform: translateY(10px); } to { transform: none; } }
.hero-text > h1 { animation-name: settle; }
.hero-art {
  position: absolute; inset: 0; left: 42%; background: url("hero.jpg") right center / cover no-repeat; pointer-events: none; opacity: .9;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.hero-text { position: relative; z-index: 1; }
.hero-text > * { animation: rise .6s var(--ease) both; }
.hero-text > :nth-child(2) { animation-delay: .08s; } .hero-text > :nth-child(3) { animation-delay: .16s; } .hero-text > :nth-child(4) { animation-delay: .24s; } .hero-text > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-media { position: absolute; inset: 0; }
.hero-stage { position: absolute; inset: 0; left: 38%; pointer-events: auto; cursor: grab; touch-action: pan-y; user-select: none; }
.hero-stage.dragging { cursor: grabbing; }
.hero-stage.loading::after { content: ""; position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(56,189,248,.22), transparent 70%); filter: blur(24px); animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
.hero-stage::before { content: ""; position: absolute; left: 20%; right: 10%; bottom: 8%; height: 30%; background: radial-gradient(closest-side, rgba(56,189,248,.16), transparent 70%); filter: blur(18px); pointer-events: none; }
.hero-3d { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-3d.ready { opacity: 1; }
.hero-media.has-3d .hero-video, .hero-media.has-3d .hero-art { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-media.has-3d .hero-shade { background: linear-gradient(90deg, var(--panel) 30%, rgba(17,24,39,.6) 48%, rgba(17,24,39,0) 62%); }
.hero-media .hero-art { opacity: .6; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-video.ready { opacity: .85; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel) 30%, rgba(17,24,39,.8) 52%, rgba(17,24,39,.1) 100%); pointer-events: none; }
.hero h1 { font-size: 34px; margin-bottom: 10px; letter-spacing: -.03em; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--accent-2); font-weight: 600; margin-bottom: 12px; }

/* ---- dashboard ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); transition: border-color .2s var(--ease); }
.stat:hover { border-color: var(--line-2); }
.stat-n { font-size: 30px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--accent-2); border: 1px solid var(--line-2); margin-bottom: 12px; }
.stat-s { margin-top: 4px; }
.stat-l { color: var(--muted); font-size: 13px; }
.unit-row { display: block; color: var(--text); padding: 10px 0; border-top: 1px solid var(--line); }
.unit-row:first-of-type { border-top: 0; }
.unit-row:hover { color: var(--text); }
.unit-row-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .9s var(--ease); }
.activity .act-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.activity .act-row:first-child { border-top: 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { display: flex; gap: 10px; }
.step-n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text); display: grid; place-items: center; font-weight: 600; flex: none; font-size: 13px; }
.step-t { font-weight: 600; }

/* ---- badges / chips ---- */
.badge { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.badge.mastered { color: var(--mastered); border-color: rgba(60,207,145,.45); background: rgba(60,207,145,.08); }
.badge.review { color: var(--review); border-color: rgba(229,181,63,.45); background: rgba(229,181,63,.08); }
.badge.learn { color: var(--learn); border-color: var(--line-2); }
.badge.done { color: var(--ok); border-color: rgba(60,207,145,.45); background: rgba(60,207,145,.1); }
.badge.locked { color: var(--muted); border-color: var(--line); }
.badge.live { color: var(--ok); border-color: rgba(60,207,145,.45); }
.badge.local { color: var(--muted); border-color: var(--line); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.chip { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; font: inherit; transition: background .15s var(--ease), border-color .15s var(--ease); }
.chip:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.chip { transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.mini { font-size: 12px; padding: 3px 9px; }
.tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }

/* ---- learn ---- */
.unit-block { margin-bottom: 26px; }
.unit-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.unit-block-head h2 { margin: 0; }
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.lesson-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; color: var(--text); transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.lesson-card:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.lesson-card.disabled { opacity: .5; }
.lesson-card.disabled:hover { border-color: var(--line); background: var(--panel); transform: none; box-shadow: none; }
.lc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.lc-title { font-weight: 600; }
.lc-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---- lesson ---- */
.status-note { background: rgba(110,123,255,.08); border: 1px solid rgba(110,123,255,.3); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.prose h2 { font-size: 17px; color: var(--accent-2); margin-top: 22px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 15px; margin-top: 16px; }
.prose p, .prose li { color: var(--text-2); }
.prose pre { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-x: auto; font-size: 13px; font-family: var(--mono); }
.prose code { background: rgba(255,255,255,.05); padding: 1px 5px; border-radius: 4px; }
.prose pre code { background: none; padding: 0; }
.prose ul, .prose ol { padding-left: 22px; }
.lab-head { display: flex; align-items: center; gap: 10px; }
.lab-head h2 { margin: 0; }
.lab-type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; }
.lab-objective { color: var(--text-2); }
.lab-step { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.lab-step h3 { margin-bottom: 6px; }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=search], select, textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--line-3); border-radius: 8px; padding: 9px 12px; font: inherit; min-width: 0;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,123,255,.2); }
.lab-step input[type=text] { flex: 1; min-width: 220px; }
.check-list { list-style: none; padding: 0; margin: 12px 0 0; }
.check-list li { padding: 8px 6px; border-top: 1px solid var(--line); font-size: 14px; display: flex; gap: 10px; }
.check-list li.fail { background: rgba(240,106,126,.05); }
.check-list li > div { flex: 1; }
.mark { font-weight: 700; font-size: 12px; min-width: 36px; text-transform: uppercase; letter-spacing: .04em; } .mark.ok { color: var(--ok); } .mark.bad { color: var(--danger); }
.feedback { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.feedback.ok { background: rgba(60,207,145,.1); border: 1px solid rgba(60,207,145,.4); }
.feedback.bad { background: rgba(240,106,126,.08); border: 1px solid rgba(240,106,126,.4); }

/* ---- quiz ---- */
.quiz .unit-head { margin: 22px 0 8px; color: var(--accent-2); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.quiz .unit-head:first-child { margin-top: 0; }
.q { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 8px; margin: 0 0 10px; }
.qtext { font-weight: 600; padding: 0 6px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border-radius: 7px; cursor: pointer; transition: background .12s var(--ease); }
.opt:hover { background: rgba(255,255,255,.04); }
.opt.chosen { background: rgba(110,123,255,.14); }
.opt input { margin-top: 4px; accent-color: var(--accent); }
.sticky-actions { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 0; background: linear-gradient(transparent, var(--panel) 30%); }
.res-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.res-right { display: flex; gap: 12px; align-items: center; }

/* ---- catalog ---- */
.toolbar { margin-bottom: 6px; }
.search { width: 100%; max-width: 420px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 10px; }
.tool-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; transition: border-color .15s var(--ease); }
.tool-card:hover { border-color: var(--line-2); }
.tool-card { transition: border-color .2s var(--ease), transform .2s var(--ease); }
.tc-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.tc-top h3 { margin: 0 0 6px; }
.tool-card p { margin-bottom: 6px; }
.tc-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---- about ---- */
.arch { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.arch-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--bg-2); }
.arch-t { font-weight: 600; margin-bottom: 4px; }
.scope { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--bg-2); }
.scope.now { border-color: rgba(110,123,255,.5); }
ul.tight { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
ul.tight li { margin: 2px 0; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.member { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-2); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--line-2); color: var(--text); display: grid; place-items: center; font-weight: 600; flex: none; font-size: 13px; }
.member-n { font-weight: 600; }

/* ---- modal / toast / forms ---- */
.modal-back { position: fixed; inset: 0; background: rgba(5,6,10,.7); backdrop-filter: blur(4px); z-index: 50; display: grid; place-items: center; padding: 16px; animation: fadeIn .18s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 14px; padding: 22px; width: 100%; max-width: 460px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); animation: popIn .2s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.form, .field { display: flex; flex-direction: column; gap: 10px; }
.field { gap: 4px; margin-bottom: 8px; }
.field span { font-size: 13px; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px); background: var(--panel-2); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: 10px; opacity: 0; transition: .25s var(--ease); z-index: 60; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); font-size: 14px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: var(--danger); }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 20px; }
.footer-inner { max-width: 1220px; margin: 0 auto; padding: 34px 20px 22px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 24px; }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col a { color: var(--muted); font-size: 14px; }
.footer-col a:hover { color: var(--text); }
.footer-h { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text); margin-bottom: 4px; }
.brandcol .brand { margin-bottom: 6px; }
.footer-bottom { max-width: 1220px; margin: 0 auto; padding: 14px 20px 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- landing ---- */
.hero.landing { min-height: 440px; padding: 60px 48px; }
.hero.landing h1 { font-size: 50px; max-width: 620px; line-height: 1.06; letter-spacing: -.035em; }
.hero-proof { margin-top: 16px; }
.section { margin: 72px 0; }
.section-title { font-size: 26px; margin-bottom: 8px; letter-spacing: -.025em; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s var(--ease); }
.feature:hover { border-color: var(--line-2); }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.feature h3 { margin: 14px 16px 4px; }
.feature p { margin: 0 16px 16px; font-size: 14px; }
.curriculum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.curr-unit { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.curr-head { font-weight: 600; margin-bottom: 6px; color: var(--accent-2); font-size: 14px; }
.curr-unit ul { margin: 0; padding-left: 18px; font-size: 14px; }
.curr-unit li { margin: 2px 0; }
.section.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
.sample { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.sample-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 10px; }
.sample .check-list { margin-top: 6px; }
.sample .mark { min-width: 60px; font-size: 12px; }
.sample-note { margin: 12px 0 0; }
.faq details { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; background: var(--panel); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--text); }
.faq p { margin: 8px 0 0; }
.cta { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin: 48px 0 10px; }
.cta .row.center { justify-content: flex-start; }
.cta h2 { font-size: 28px; }

/* ---- toolkit ---- */
.tk-layout { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; }
.tk-side { position: sticky; top: 74px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.tk-group { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 10px 10px 4px; }
.tk-item { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); transition: background .15s var(--ease); }
.tk-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.tk-item.on { background: rgba(110,123,255,.14); }
.tk-name { display: block; font-weight: 600; font-size: 14px; }
.tk-blurb { display: block; font-size: 12px; color: var(--muted); }
.tk-form { display: flex; flex-direction: column; gap: 6px; }
.tk-form .row { margin-top: 4px; }
.tk-out { margin-top: 14px; }
.tk-summary { font-size: 15px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-legal { margin-top: 10px; }
.card.inner { background: var(--bg-2); padding: 14px 16px; margin-bottom: 12px; box-shadow: none; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl ul.tight { margin: 0; }
.state { font-weight: 600; } .state.open { color: var(--ok); } .state.closed { color: var(--muted); } .state.filtered { color: var(--warn); }
.sev { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; border: 1px solid; }
.sev.critical, .sev.high { color: var(--danger); border-color: rgba(240,106,126,.6); background: rgba(240,106,126,.08); }
.sev.medium { color: var(--warn); border-color: rgba(229,181,63,.6); background: rgba(229,181,63,.08); }
.sev.low, .sev.info { color: var(--muted); border-color: var(--line-2); }
.sev.good { color: var(--ok); border-color: rgba(60,207,145,.6); background: rgba(60,207,145,.08); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }
.grade-row { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.grade { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 32px; font-weight: 700; color: #fff; }
.grade.gA { background: #1f9d6b; } .grade.gB { background: #2f6fe8; } .grade.gC { background: #a3741c; } .grade.gD { background: #b9561f; } .grade.gF { background: #b3304a; }
.findings { list-style: none; padding: 0; margin: 6px 0 0; }
.findings li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.findings li:first-child { border-top: 0; }
pre.raw { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; }
details summary { cursor: pointer; color: var(--muted); font-size: 14px; }
code.wrap { word-break: break-all; }
textarea { width: 100%; resize: vertical; font-family: var(--mono); font-size: 13px; }

/* ---- scroll reveal (ui.js adds .in when a block enters the viewport) ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .two-col, .stat-grid, .steps, .hero { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; padding: 26px; }
  .hero-art { left: 0; opacity: .22; mask-image: none; -webkit-mask-image: none; }
  .hero-shade { background: linear-gradient(180deg, rgba(18,20,28,.6), rgba(18,20,28,.85)); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .feature-grid, .curriculum { grid-template-columns: 1fr; }
  .section.split { grid-template-columns: 1fr; }
  .tk-layout { grid-template-columns: 1fr; }
  .tk-side { position: static; }
  .hero.landing h1 { font-size: 34px; }
}
@media (max-width: 640px) {
  .stat-grid, .steps, .two-col { grid-template-columns: 1fr; }
  .nav { display: none; position: absolute; top: 58px; left: 0; right: 0; flex-direction: column; background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px; }
  .nav.open { display: flex; }
  .icon-btn { display: inline-block; font-size: 14px; padding: 6px 10px; }
  .brand-sub, .who, .pill, .account .btn.primary { display: none; }
  .topbar-right { gap: 6px; }
  .account { min-width: 0; }
  .account .btn.small { padding: 6px 10px; }
  .hero h1, .hero.landing h1 { font-size: 27px; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero.landing { padding: 28px 22px; }
  .topbar { padding: 0 14px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- connected steps (Assess, Learn, Practice) ---- */
.flow { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: center; gap: 0; margin: 18px 0 28px; }
.flow-step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: relative; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.flow-step:hover { border-color: rgba(99,102,241,.5); transform: translateY(-2px); }
.flow-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--text); border: 1px solid var(--line-2); margin-bottom: 10px; }
.flow-t { font-weight: 650; font-size: 17px; margin-bottom: 4px; }
.flow-line { height: 1px; background: var(--line-2); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); position: relative; }
.flow-line::after { content: ""; position: absolute; right: -1px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); opacity: 0; transition: opacity .3s var(--ease) .7s; }
.flow.in .flow-line { transform: scaleX(1); }
.flow.in .flow-line:nth-child(4) { transition-delay: .5s; }
.flow.in .flow-line::after { opacity: 1; }
.flow.in .flow-step { animation: rise .6s var(--ease) both; }
.flow.in .flow-step:nth-child(3) { animation-delay: .45s; } .flow.in .flow-step:nth-child(5) { animation-delay: .95s; }

/* ---- skill graph ---- */
.graph-card { overflow: visible; }
.graph-wrap { position: relative; margin: 10px 0 6px; overflow-x: auto; }
.graph { width: 100%; height: auto; min-width: 720px; display: block; font-family: var(--font); }
.g-unit { fill: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.g-edge { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 45ms); transition: stroke .2s var(--ease), stroke-width .2s var(--ease); }
.g-edge.on { stroke: rgba(60,207,145,.6); }
.g-edge.faint { stroke-dasharray: 4 6; stroke: rgba(148,163,184,.35); animation: none; stroke-dashoffset: 0; }
.g-edge.hot { stroke: var(--accent-2); stroke-width: 2.5; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.g-node { cursor: default; opacity: 0; animation: nodeIn .5s var(--ease) forwards; animation-delay: calc(140ms + var(--i, 0) * 40ms); }
@keyframes nodeIn { from { opacity: 0; } to { opacity: 1; } }
.g-node.learn, .g-node.review, .g-node.mastered, .g-node.done { cursor: pointer; }
.g-node:focus { outline: none; }
.g-node:focus .g-dot, .g-node:hover .g-dot { stroke-width: 3; }
.g-halo { fill: transparent; }
.g-hit { fill: transparent; stroke: none; }
.g-node.pulse .g-halo { fill: rgba(56,189,248,.18); animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 0%, 100% { r: 20; opacity: .5; } 50% { r: 26; opacity: 0; } }
.g-dot { fill: var(--panel-2); stroke-width: 2; transition: stroke-width .15s var(--ease), fill .2s var(--ease); }
.g-node.done .g-dot { fill: #3ccf91; stroke: #3ccf91; }
.g-node.mastered .g-dot { fill: rgba(60,207,145,.18); stroke: #3ccf91; }
.g-node.review .g-dot { fill: rgba(229,181,63,.18); stroke: #e5b53f; }
.g-node.learn .g-dot { fill: rgba(56,189,248,.14); stroke: #38bdf8; }
.g-node.locked .g-dot { fill: var(--panel); stroke: var(--locked); stroke-dasharray: 3 3; }
.g-check { fill: none; stroke: #062a1a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-node.mastered .g-check { stroke: #3ccf91; }
.g-lock { fill: none; stroke: #6b7280; stroke-width: 1.5; }
.g-label { fill: var(--text-2); font-size: 11.5px; }
.g-node.locked .g-label { fill: var(--muted); }
.g-node:hover .g-label { fill: var(--text); }
.g-tip { position: absolute; transform: translate(-50%, 0); background: var(--panel-3); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; min-width: 200px; max-width: 260px; pointer-events: none; z-index: 5; box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); animation: popIn .15s var(--ease); }
.g-tip-t { font-weight: 600; font-size: 14px; }
.g-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.g-key { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; display: inline-block; }
.g-key.done { background: #3ccf91; border-color: #3ccf91; } .g-key.mastered { border-color: #3ccf91; } .g-key.review { border-color: #e5b53f; } .g-key.learn { border-color: #38bdf8; } .g-key.locked { border-color: var(--locked); border-style: dashed; }

/* ---- result rows stagger (toolkit tables, check lists) ---- */
.tk-out .tbl tbody tr, .tk-out .check-list li, .tk-out .findings li { animation: rise .4s var(--ease) both; }
.tk-out .tbl tbody tr:nth-child(1), .tk-out .check-list li:nth-child(1), .tk-out .findings li:nth-child(1) { animation-delay: .02s; }
.tk-out .tbl tbody tr:nth-child(2), .tk-out .check-list li:nth-child(2) { animation-delay: .06s; }
.tk-out .tbl tbody tr:nth-child(3), .tk-out .check-list li:nth-child(3) { animation-delay: .10s; }
.tk-out .tbl tbody tr:nth-child(4), .tk-out .check-list li:nth-child(4) { animation-delay: .14s; }
.tk-out .tbl tbody tr:nth-child(5), .tk-out .check-list li:nth-child(5) { animation-delay: .18s; }
.tk-out .tbl tbody tr:nth-child(6), .tk-out .check-list li:nth-child(6) { animation-delay: .22s; }
.tk-out .tbl tbody tr:nth-child(7), .tk-out .check-list li:nth-child(7) { animation-delay: .26s; }
.tk-out .tbl tbody tr:nth-child(8), .tk-out .check-list li:nth-child(8) { animation-delay: .30s; }
.tk-out .tbl tbody tr:nth-child(n+9), .tk-out .check-list li:nth-child(n+9) { animation-delay: .34s; }

/* ---- lesson grid stagger + unit heads ---- */
.lesson-grid .lesson-card { animation: rise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.unit-block-head h2 { position: relative; padding-left: 14px; }
.unit-block-head h2::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }

@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; gap: 10px; }
  .flow-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-edge, .g-node { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .flow-line, .flow-step { transform: none; }
  .flow-line::after { opacity: 1; }
  .hero-h span, .hero-text > *, .view { animation: none; }
  .hero-3d, .hero-video, .hero-media.has-3d .hero-art { transition: none; }
}

/* ---- mobile overflow guards ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, canvas { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }
.tbl { display: block; overflow-x: auto; }
.graph-wrap { max-width: 100%; }
.hero.landing h1 { overflow-wrap: anywhere; }

/* ---- keyboard focus and touch targets ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
.skip-link { position: absolute; left: 12px; top: -40px; background: var(--panel-3); color: var(--text); padding: 8px 12px; border-radius: 8px; z-index: 100; transition: top .15s; }
.skip-link:focus { top: 12px; }
.sr-heading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.brand { min-height: 44px; }
/* The FAQ: the summary carries the padding so the whole row toggles, not just the text line. */
.faq details { padding: 2px 16px; }
.faq summary { padding: 11px 0; }
.faq p { margin: 0 0 10px; }
@media (max-width: 640px) {
  .btn, .chip, .nav a, .tk-item, .lesson-card, .opt, .icon-btn, .link-btn { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .btn { padding: 11px 16px; }
  .chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
  .chip.pre { min-height: 0; min-width: 0; }
  .link-btn { display: inline-flex; align-items: center; padding: 0 6px; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .footer-col { gap: 0; }
  /* inline links outside prose: grow the hit area without moving the layout */
  .crumbs a, .hero-proof a, .act-link { display: inline-block; padding: 12px 5px; margin: -12px -5px; }
  .tc-top h3 a { display: inline-block; padding: 13px 0; margin: -13px 0; min-width: 44px; }
  .tk-out details summary, .wb details summary { padding: 11px 0; }
  input[type=text], input[type=url], input[type=email], input[type=password], input[type=search], select { min-height: 44px; }
}

/* ---- placement stepper ---- */
.stepper { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 16px; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; min-width: 0; }
.stepper li.now { border-color: var(--accent); color: var(--text); }
.stepper li.done { color: var(--text-2); }
.step-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; flex: none; }
.stepper li.done .step-dot { background: var(--ok); border-color: var(--ok); color: #06281a; }
.stepper li.now .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================================
   Landing polish (feat/landing-polish). Additive: wider container for the
   landing and About pages, hero figures strip, the three feature demos, the
   curriculum path, About alignment, and the hero 3D hand off on scroll.
   ============================================================================ */

/* ---- landing: container and hero ---- */
main:has(> #view-home:not(.hidden) > .hero.landing), main:has(> #view-about:not(.hidden)) { max-width: 1296px; }
.hero.landing { grid-template-columns: 1.4fr 1fr; gap: 32px; min-height: 520px; padding: 64px 56px; margin-bottom: 0; }
/* Three short lines that never wrap: the size follows the viewport between 38 and 52 px. */
.hero.landing h1 { font-size: clamp(38px, 3.4vw, 52px); max-width: 720px; line-height: 1.06; letter-spacing: -.035em; }
.hero.landing .lead { font-size: 18px; max-width: 560px; }
.hero.landing .hero-stage { left: 40%; }
/* Between 820 and 1100 px the stage is nearly square, so the turning model
   reached the card's right edge and was cut by it. A wider stage with a right
   inset keeps the model inside the card at every angle. */
@media (max-width: 1100px) { .hero.landing .hero-stage { left: 28%; right: 28px; } }
.hero-text > :nth-child(6) { animation-delay: .4s; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 0; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 680px; }
.hero-stat { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 14px; }
.hero-stat + .hero-stat { padding-left: 14px; border-left: 1px solid var(--line); }
@media (max-width: 1100px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-stat:nth-child(3) { padding-left: 0; border-left: 0; } }
.hero-stat .stat-n { font-size: 26px; line-height: 1.1; }
.hero-stat-l { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.hero.landing + .section { margin-top: 56px; }

/* hero 3D hand off: hero3d.js writes --hero-fade (1 at the top, 0 once the
   hero has scrolled past) and marks the stage as scrolled so the fade in
   transition does not fight the scroll linked value. */
.hero-3d.ready { opacity: var(--hero-fade, 1); }
.hero-stage.scrolled .hero-3d { transition: opacity .2s linear; }
.hero-stage::before { opacity: var(--hero-fade, 1); }
.hero-art.art-in { animation: artIn 1.2s var(--ease); }
@keyframes artIn { from { opacity: 0; } }
.graph-section .card.reveal { transform: translateY(28px); transition-duration: .7s; }
.graph-section .card.reveal.in { transform: none; }

/* ---- feature rows: copy beside a working demo ---- */
.feature-rows { display: grid; gap: 18px; margin-top: 6px; }
.feature-row { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.35fr); gap: 36px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.feature-row.flip { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr); }
.feature-row.flip .feature-copy { order: 2; }
.feature-copy { min-width: 0; }
.feature-copy h3 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 8px; color: var(--text); }
.feature-copy p { font-size: 15px; }
.feature-note { font-size: 14px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0; }
.feature-demo { min-width: 0; }

/* ---- demo cards (grading, prerequisites) ---- */
.demo { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.demo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.demo-title { font-weight: 600; }
.demo .row { margin-top: 12px; }
.demo .check-list { margin-top: 12px; }
.demo .check-list li { align-items: flex-start; }
.demo .check-list li:first-child { border-top: 0; }
.demo .check-list code { font-size: 12.5px; color: var(--text); }
.mark.pending { color: var(--muted); font-weight: 600; }
.demo .feedback { margin-top: 12px; }
.feedback.idle { background: none; border: 1px solid var(--line); color: var(--muted); }
/* The demo draws its own layout from its container width (pages.js): levels
   left to right above 560 px, top to bottom below it. In the vertical form the
   drawing is kept narrow so dots stay about 30 px and labels about 13 px. */
.pd-svg { width: 100%; height: auto; display: block; font-family: var(--font); margin-top: 12px; }
.pd-svg.vertical { max-width: 300px; margin-left: auto; margin-right: auto; }
.pd .g-label { font-size: 13px; }
.pd .g-edge, .pd .g-node { animation: none; opacity: 1; stroke-dashoffset: 0; }
.pd .g-node { cursor: pointer; }
.pd .g-node.locked { cursor: not-allowed; }
.pd .g-node:focus { outline: none; }
.g-ring { fill: none; stroke: transparent; stroke-width: 2; }
.pd .g-node:focus-visible .g-ring { stroke: var(--accent-2); }
.pd .g-legend { margin-top: 4px; }
.pd-status { margin: 10px 0 0; font-size: 14px; color: var(--text-2); min-height: 2.8em; }

/* ---- the curriculum as a path ---- */
.path { list-style: none; margin: 18px 0 0; padding: 0; }
.path-unit { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; position: relative; padding-bottom: 28px; }
.path-unit::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line-2); }
.path-unit:last-child { padding-bottom: 0; }
.path-unit:last-child::before { display: none; }
.path-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; background: var(--panel); border: 1px solid var(--line-2); color: var(--text); position: relative; z-index: 1; }
.path-unit.capstone .path-n { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 12px; }
.path-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.path-head h3 { font-size: 18px; margin: 0; line-height: 40px; color: var(--text); }
.path-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.path-lesson { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.path-lesson-t { font-weight: 600; font-size: 14px; }
/* The app's difficulty and lab type widgets (app.js) in one row; learning.css
   stacks .path-meta for the path page, so the landing cards reset it here. */
.path-lesson .path-meta { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.path-after { font-size: 12.5px; color: var(--muted); }
.path-unit.capstone .path-lesson { border-color: rgba(99,102,241,.5); }

/* ---- About: same container and heading rhythm as the landing ---- */
.about .page-head { margin-bottom: 28px; }
.about .page-head h1 { font-size: 40px; letter-spacing: -.03em; }
.about .page-head .lead { max-width: 820px; }
.about .card { padding: 28px; }
.about .card h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 10px; color: var(--text); }
.about .prose h2 { color: var(--text); font-size: 20px; }
.repo { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--bg-2); }
.repo-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--accent-2); border: 1px solid var(--line-2); flex: none; }
.repo-t { font-weight: 600; margin-bottom: 2px; }
.repo p { margin-bottom: 10px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  /* header: brand, five nav links, pill and account buttons do not fit side by side between 640 and 900px */
  .topbar { gap: 12px; padding: 0 16px; }
  .brand-sub, .pill { display: none; }
  .nav a { padding: 7px 9px; }
}
@media (max-width: 980px) {
  .feature-row, .feature-row.flip { grid-template-columns: 1fr; gap: 20px; }
  .feature-row.flip .feature-copy { order: 0; }
}
@media (max-width: 820px) {
  .hero.landing { min-height: 0; padding: 30px 28px; gap: 0; }
  .hero.landing h1 { font-size: 36px; }
  .hero.landing .lead { font-size: 16px; }
  .hero.landing + .section { margin-top: 48px; }
  .section { margin: 56px 0; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; max-width: 520px; }
  .hero-stat { padding-right: 12px; }
  .hero-stat + .hero-stat { border-left: 0; padding-left: 0; }
  .hero-stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: 14px; }
}
@media (max-width: 640px) {
  .hero.landing { padding: 26px 18px; }
  .hero.landing h1 { font-size: 30px; }
  .hero-stats { max-width: none; }
  .feature-row { padding: 18px; }
  .demo { padding: 14px; }
  .path-unit { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .path-n { width: 32px; height: 32px; font-size: 12px; }
  .path-unit::before { left: 15px; top: 32px; }
  .path-head h3 { line-height: 32px; font-size: 17px; }
  .path-lessons { grid-template-columns: 1fr; }
  .about .page-head h1 { font-size: 30px; }
  .about .card { padding: 20px; }
}
/* Narrow screens keep the unit names for screen readers but show only the numbers. */
@media (max-width: 820px) {
  .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .stepper li { justify-content: center; position: relative; }
}

/* Narrow screens: one column, and the anvil is a figure under the text rather
   than a dimmed backdrop. Last in the file so it wins over the landing rules. */
@media (max-width: 820px) {
  .hero, .hero.landing { grid-template-columns: 1fr; }
  .hero-media, .hero > .hero-art { position: relative; inset: auto; height: 210px; margin-top: 22px; }
  .hero-art { left: 0; opacity: 1; background-position: center; background-size: contain; mask-image: none; -webkit-mask-image: none; }
  .hero-media .hero-art { opacity: 1; }
  /* The still and the clip are rendered on the panel colour; lighten blends their box into the card's tint. */
  .hero-art, .hero-video { mix-blend-mode: lighten; }
  .hero-video { object-fit: contain; object-position: center; }
  .hero-video.ready { opacity: 1; }
  .hero-shade { display: none; }
}