/* Floati course platform styles. Scoped under .course / .lesson-page.
   Reuses the site tokens: --bg --bg2 --bg3 --bd --t1..t4 --accent --accent-light
   --radius-lg --shadow-soft --shadow-deep --ease --font --mono --serif. */

/* The hidden attribute must always win, even over our display:flex/grid rules. */
[hidden] { display: none !important; }

.course-main { background: var(--bg); min-height: 100vh; }
.course-wrap { max-width: 1280px; margin: 0 auto; padding: 116px 32px 80px; }
.course-wide { max-width: 1320px; }

/* ---- breadcrumb / eyebrow ---- */
.course-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:5px 13px; border-radius:100px;
  background: var(--accent-light); color: var(--accent); font-family: var(--mono); font-size:.66rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px; }

/* ---- course hero (index) ---- */
.course-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight:500; letter-spacing:-.03em; line-height:1.05;
  color: var(--t1); margin-bottom:14px; }
.course-hero h1 em { font-family: var(--serif); font-style:italic; color: var(--t2); }
.course-hero p.lede { font-size:1.08rem; line-height:1.6; color: var(--t2); max-width:60ch; }
.course-meta { display:flex; flex-wrap:wrap; gap:10px 22px; margin:22px 0 8px; font-family:var(--mono);
  font-size:.8rem; color:var(--t3); }
.course-meta b { color: var(--t1); font-weight:600; }
.course-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* buttons */
.c-btn { display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:100px; font-size:.95rem;
  font-weight:600; border:none; cursor:pointer; transition: all .3s var(--ease); font-family:var(--font); text-decoration:none; }
.c-btn svg { width:18px; height:18px; }
/* Darken the (random per-session) accent fill so white text clears WCAG AA
   for every hue (var(--accent) alone fails AA for cyan/sky/emerald/etc). */
.c-btn-primary { background: var(--accent); background: color-mix(in srgb, var(--accent) 76%, #000); color:#fff; box-shadow: 0 14px 30px -14px var(--accent); }
.c-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px var(--accent); }
.c-btn-ghost { background: var(--bg2); color: var(--t1); border:1px solid var(--bd); }
.c-btn-ghost:hover { background: var(--bg3); }
.c-btn:disabled { opacity:.55; cursor:default; transform:none; }

/* progress */
.progress-card { margin:34px 0; padding:20px 22px; border:1px solid var(--bd); border-radius: var(--radius-lg);
  background: var(--bg2); box-shadow: var(--shadow-soft); }
.progress-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.progress-row .pl { font-family:var(--mono); font-size:.78rem; color: var(--t2); letter-spacing:.04em; }
.progress-track { height:9px; border-radius:100px; background: var(--bg3); overflow:hidden; }
.progress-fill { height:100%; border-radius:100px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #16a34a)); transition: width .6s var(--ease); }
/* progress tools: streak chip + search + backup/restore */
.streak-chip { font-family:var(--mono); font-size:.66rem; letter-spacing:.02em; color: var(--accent); background: var(--accent-light); padding:2px 8px; border-radius:100px; margin-left:6px; }
.streak-chip:empty { display:none; }
.progress-tools { display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.progress-tools #syllabus-search { flex:1; min-width:180px; padding:9px 13px; border:1px solid var(--bd); border-radius:10px; background: var(--bg); color: var(--t1); font-size:.9rem; }
.progress-tools #syllabus-search:focus { outline:none; border-color: var(--accent); }
.pt-btn { font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color: var(--t2); background: var(--bg2); border:1px solid var(--bd); border-radius:10px; padding:9px 13px; cursor:pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.pt-btn:hover { color: var(--t1); border-color: color-mix(in srgb, var(--accent) 40%, var(--bd)); }
/* forgiving daily-goal picker (Casual / Regular / Serious) */
.goal-pick { display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.gp-label { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--t3); }
.gp-btn { font-family:var(--font); font-size:.78rem; color: var(--t2); background: var(--bg); border:1px solid var(--bd);
  border-radius:100px; padding:6px 13px; cursor:pointer; display:inline-flex; align-items:baseline; gap:6px; transition: all .2s var(--ease); }
.gp-btn em { font-family:var(--mono); font-style:normal; font-size:.64rem; color: var(--t4); }
.gp-btn:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--bd)); color: var(--t1); }
.gp-btn.on { background: var(--accent-light); border-color: color-mix(in srgb, var(--accent) 55%, var(--bd)); color: var(--accent); font-weight:600; }
.gp-btn.on em { color: var(--accent); }
/* onboarding head-start card (new learners only; honest, dismissible) */
.onboard-card { margin:30px 0 6px; padding:22px 24px; border-radius: var(--radius-lg); position:relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg2)), var(--bg2));
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--bd)); box-shadow: var(--shadow-soft); }
.ob-badge { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color: var(--accent); background: var(--accent-light); padding:4px 11px; border-radius:100px; }
.ob-badge::before { content:""; width:7px; height:7px; border-radius:100px; background: var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%, transparent); }
.onboard-card h3 { margin:13px 0 6px; font-size:1.22rem; font-weight:500; letter-spacing:-.02em; color: var(--t1); }
.onboard-card p { color: var(--t2); line-height:1.55; max-width:60ch; font-size:.96rem; }
.ob-actions { display:flex; gap:12px; align-items:center; margin-top:16px; flex-wrap:wrap; }
/* "My Python Run" share-card modal (the canvas is drawn 100% on-device) */
.share-modal { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }
.share-modal[hidden] { display:none; }
.sm-box { position:relative; background: var(--bg2); border:1px solid var(--bd); border-radius: var(--radius-lg); padding:24px; max-width:420px; width:100%; max-height:92vh; overflow:auto; box-shadow: var(--shadow-deep, 0 30px 70px -30px rgba(0,0,0,.7)); }
.sm-box h3 { color: var(--t1); font-size:1.2rem; margin-bottom:4px; }
.sm-note { color: var(--t3); font-size:.84rem; line-height:1.5; margin-bottom:14px; }
.sm-canvas-wrap { display:flex; justify-content:center; }
.sm-canvas-wrap canvas { width:auto; max-width:282px; height:auto; max-height:60vh; border-radius:14px; border:1px solid var(--bd); }
.sm-actions { display:flex; gap:10px; margin-top:16px; justify-content:center; flex-wrap:wrap; }
.sm-close { position:absolute; top:10px; right:14px; background:none; border:none; color: var(--t3); font-size:1.7rem; line-height:1; cursor:pointer; }
.sm-close:hover { color: var(--t1); }
/* quiz lessons (client-side MCQ concept checks) */
.quiz-box { display:flex; flex-direction:column; gap:14px; }
.qz-q { border:1px solid var(--bd); border-radius:12px; padding:14px 16px; background: var(--bg2); }
.qz-q.qz-ok { border-color: color-mix(in srgb, #16a34a 50%, var(--bd)); }
.qz-q.qz-no { border-color: color-mix(in srgb, #dc2626 45%, var(--bd)); }
.qz-prompt { color: var(--t1); font-weight:500; margin-bottom:10px; line-height:1.5; }
.qz-opt { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; color: var(--t2); line-height:1.45; }
.qz-opt:hover { background: var(--bg3); }
.qz-opt input { margin-top:3px; accent-color: var(--accent); }
#qz-check { align-self:flex-start; }
.qz-result { font-size:.92rem; font-weight:500; min-height:1.2em; }
.qz-result.ok { color:#16a34a; }
.qz-result.no { color: var(--t2); }
.qz-explain { margin-top:10px; padding-top:10px; border-top:1px dashed var(--bd); font-size:.86rem; line-height:1.5; color: var(--t2); }
.qz-explain b { color:#dc2626; }
.qz-explain.ok b { color:#16a34a; }
/* community: course reviews wall (opt-in, public) */
.course-reviews { margin-top:48px; }
.course-reviews .cr-head { margin-bottom:18px; }
.course-reviews h2 { font-size:1.5rem; font-weight:600; color: var(--t1); letter-spacing:-.01em; }
.cr-sub { color: var(--t3); font-size:.92rem; margin-top:4px; }
.cr-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; }
.cr-card { border:1px solid var(--bd); border-radius:12px; background: var(--bg2); padding:14px 16px; }
.cr-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.cr-card-stars { color: var(--accent); letter-spacing:1px; font-size:.9rem; }
.cr-card-top time { font-family:var(--mono); font-size:.68rem; color: var(--t4); }
.cr-card-body { color: var(--t2); line-height:1.55; font-size:.93rem; white-space:pre-wrap; }
.cr-card-who { color: var(--t3); font-size:.82rem; margin-top:8px; font-weight:500; }
.cr-form-wrap { margin-top:18px; border:1px solid var(--bd); border-radius:12px; padding:14px 16px; background: var(--bg2); }
.cr-form-wrap summary { cursor:pointer; font-weight:500; color: var(--t1); }
.cr-privacy { color: var(--t3); font-size:.8rem; line-height:1.5; margin:10px 0 12px; }
.cr-form { display:flex; flex-direction:column; gap:10px; max-width:520px; }
.cr-stars { display:flex; gap:4px; }
.cr-stars button { background:none; border:none; cursor:pointer; font-size:1.6rem; color: var(--bd); line-height:1; padding:0 2px; transition: color .15s var(--ease); }
.cr-stars button.on { color: var(--accent); }
.cr-form input[type=text], .cr-form textarea { border:1px solid var(--bd); border-radius:10px; background: var(--bg); color: var(--t1); padding:10px 12px; font-size:.92rem; font-family:inherit; }
.cr-form textarea { min-height:80px; resize:vertical; }
.cr-form input:focus, .cr-form textarea:focus { outline:none; border-color: var(--accent); }
.cr-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.cr-form-actions { display:flex; align-items:center; gap:12px; }
.cr-status { font-size:.85rem; color: var(--t2); }

/* syllabus -> every module card is the SAME full width (equal); the lessons fill
   that width as a responsive chip grid so the laptop width is used either way. */
.syllabus { margin-top:40px; display:flex; flex-direction:column; gap:18px; }
.module-lessons { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:10px; padding:16px; }
.module-card { border:1px solid var(--bd); border-radius: var(--radius-lg); background: var(--bg2); overflow:hidden; box-shadow: var(--shadow-soft); }
.module-head { padding:18px 22px; border-bottom:1px solid var(--bd); }
.module-head .mnum { font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); }
.module-head h3 { font-size:1.18rem; font-weight:600; color: var(--t1); margin:5px 0 4px; letter-spacing:-.01em; }
.module-head p { font-size:.88rem; color: var(--t3); line-height:1.5; }
.lesson-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--bd); border-radius:10px; background: var(--bg); color: var(--t1);
  text-decoration:none; transition: background .2s var(--ease), border-color .2s var(--ease); }
.lesson-row:hover { background: var(--bg3); border-color: color-mix(in srgb, var(--accent) 40%, var(--bd)); }
.lesson-row .lr-check { width:22px; height:22px; border-radius:50%; border:2px solid var(--bd); flex-shrink:0; display:grid; place-items:center; color:transparent; font-size:.7rem; }
.lesson-row.done .lr-check { background: #16a34a; border-color:#16a34a; color:#fff; }
.lesson-row .lr-title { font-size:.95rem; font-weight:500; flex:1; }
.lesson-row .lr-meta { font-family:var(--mono); font-size:.72rem; color: var(--t3); }
.lesson-row .lr-tag { font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); background: var(--accent-light); padding:3px 8px; border-radius:100px; }
.lesson-row .lr-tag.watch { color:#fff; background: var(--accent); }
/* sequential gating */
.lr-lock { display:none; width:22px; height:22px; flex-shrink:0; align-items:center; justify-content:center; color: var(--t4); }
.lr-lock svg { width:14px; height:14px; }
.lesson-row.locked { opacity:.55; cursor:not-allowed; }
.lesson-row.locked:hover { background:transparent; }
.lesson-row.locked .lr-check { display:none; }
.lesson-row.locked .lr-lock { display:inline-flex; }
.lesson-row.locked .lr-tag { display:none; }
.lesson-locked { max-width:560px; margin:0 auto; padding:150px 24px 90px; text-align:center; }
.lesson-locked .ll-icon { display:inline-flex; width:64px; height:64px; border-radius:50%; background:var(--bg2); border:1px solid var(--bd); align-items:center; justify-content:center; color:var(--t3); margin-bottom:22px; }
.lesson-locked .ll-icon svg { width:28px; height:28px; }
.lesson-locked h2 { font-size:1.6rem; font-weight:600; color:var(--t1); margin-bottom:10px; letter-spacing:-.02em; }
.lesson-locked p { color:var(--t2); line-height:1.6; margin-bottom:24px; }
.lesson-locked .ll-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* certificate cta */
.cert-cta { margin-top:40px; padding:30px 26px; border-radius: var(--radius-lg); text-align:center;
  background: radial-gradient(ellipse 60% 120% at 50% 0%, var(--accent-light), transparent 70%), var(--bg2);
  border:1px solid var(--bd); }
.cert-cta h3 { font-size:1.4rem; font-weight:600; color: var(--t1); margin-bottom:8px; }
.cert-cta p { color: var(--t2); font-size:.95rem; margin-bottom:18px; }
.cert-locked { margin-top:40px; padding:20px; border:1px dashed var(--bd); border-radius: var(--radius-lg);
  text-align:center; color: var(--t3); font-size:.9rem; }

/* ---- lesson page layout ---- */
.lesson-layout { display:grid; grid-template-columns: 1fr 1fr; gap:0; min-height: calc(100vh - 60px); }
.lesson-content { padding:128px 36px 60px; overflow-y:auto; max-height:100vh; border-right:1px solid var(--bd); }
.lesson-content .lc-inner { max-width:680px; margin:0 auto; }
.lesson-kicker { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--t3); margin-bottom:10px; }
.lesson-content h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight:600; letter-spacing:-.02em; color: var(--t1); margin-bottom:18px; }
.lesson-body { color: var(--t2); line-height:1.7; font-size:1rem; }
.lesson-body p { margin-bottom:14px; }
.lesson-body code { font-family: var(--mono); font-size:.86em; background: var(--bg3); padding:2px 6px; border-radius:6px; color: var(--t1); }
.lesson-body pre { background: var(--bg3); border:1px solid var(--bd); border-radius:10px; padding:14px 16px; overflow-x:auto; margin:6px 0 16px; }
.lesson-body pre code { background:none; padding:0; font-size:.85rem; line-height:1.55; }
.lesson-body ul { margin:0 0 14px 20px; }
.lesson-body strong { color: var(--t1); font-weight:600; }
.exercise-box { margin-top:24px; padding:18px 20px; border-radius:12px; border:1px solid var(--accent);
  background: var(--accent-light); }
.exercise-box .eb-label { font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); font-weight:600; margin-bottom:8px; }
.exercise-box p { color: var(--t1); font-size:.95rem; line-height:1.6; margin:0; }
.exercise-box code { background: color-mix(in srgb, var(--accent) 14%, transparent); }

.lesson-done { margin-top:20px; padding:14px 18px; border-radius:12px; background: color-mix(in srgb, #16a34a 12%, transparent);
  border:1px solid color-mix(in srgb, #16a34a 40%, transparent); color: var(--t1); font-weight:500; display:flex; align-items:center; gap:10px; }
.lesson-done svg { width:18px; height:18px; color:#16a34a; }

/* editor pane */
.editor-pane { display:flex; flex-direction:column; padding:128px 36px 28px; background: var(--bg); max-height:100vh; overflow-y:auto; }
.editor-pane .ep-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.editor-pane .ep-head .ep-title { font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--t3); }
.editor-pane .ep-mini { display:flex; gap:6px; }
.ep-mini button { background:none; border:none; cursor:pointer; color: var(--t3); font-size:.72rem; font-family:var(--mono); padding:4px 8px; border-radius:6px; }
.ep-mini button:hover { color: var(--t1); background: var(--bg3); }
.cv-editor { border:1px solid var(--bd); border-radius:12px; overflow:hidden; flex-shrink:0; }
.cv-editor .CodeMirror { height:auto; min-height:240px; font-family: var(--mono); font-size:13.5px; border-radius:12px; }
.cv-editor textarea#code-input { width:100%; min-height:240px; border:none; padding:14px; font-family:var(--mono); font-size:13.5px; background:#212121; color:#eee; resize:vertical; }
.cv-editor .CodeMirror textarea { background:transparent !important; box-shadow:none !important; border:none !important; width:auto !important; }
.editor-actions { display:flex; gap:10px; align-items:center; margin:14px 0; flex-wrap:wrap; }
.py-status { font-family:var(--mono); font-size:.74rem; color: var(--accent); min-height:1em; }
.out-wrap { margin-top:4px; }
.out-label { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--t3); margin-bottom:6px; }
.out { background:#0d0b0a; color:#e8e3da; font-family:var(--mono); font-size:13px; line-height:1.5; border-radius:10px;
  padding:14px 16px; min-height:60px; max-height:240px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.dark .out { background:#000; }
.out.err { color:#ff9b8a; }
.test-results { margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.tr-head { font-family:var(--mono); font-size:.78rem; font-weight:600; color: var(--amber, #b45309); margin-bottom:4px; }
.tr-head.all { color:#16a34a; }
.tr { display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color: var(--t2); }
.tr .tr-i { font-weight:700; flex-shrink:0; }
.tr.ok .tr-i { color:#16a34a; }
.tr.no .tr-i { color:#dc2626; }
/* ---- the Green Check Moment: real hidden tests flip red->green like a CI run,
   then a code-themed particle pop + a monospace "all checks passed" stamp ---- */
.tr.run { color: var(--t3); }
.tr.run .tr-i { color: var(--t4); }
.tr.flip { animation: tr-flip .34s var(--ease); }
@keyframes tr-flip { 0% { transform: translateX(-3px); } 40% { transform: none; } }
.tr.flip .tr-i { animation: tr-pop .42s var(--ease); }
@keyframes tr-pop { 0% { transform: scale(.4); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
.tr-stamp { font-family: var(--mono); font-size:.82rem; font-weight:600; color:#16a34a; margin-top:9px;
  letter-spacing:.02em; opacity:0; transform: translateY(4px); display:flex; align-items:center;
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.tr-stamp.show { opacity:1; transform:none; }
.tr-stamp::before { content:"\2713"; margin-right:8px; display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:6px; background: color-mix(in srgb,#16a34a 20%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb,#16a34a 35%, transparent); }
.tr-caret { width:7px; height:1.05em; margin-left:6px; background:#16a34a; display:inline-block; border-radius:1px;
  animation: tr-blink 1.1s steps(1) infinite; }
@keyframes tr-blink { 50% { opacity:0; } }
.tr-particles { position:fixed; inset:0; pointer-events:none; z-index:60; }
.tr-particles .tp { position:absolute; font-family:var(--mono); font-size:13px; font-weight:700; color: var(--accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); will-change: transform, opacity; }
.tr-particles .tp.tp-green { color:#16a34a; text-shadow: 0 0 10px color-mix(in srgb,#16a34a 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .tr.flip, .tr.flip .tr-i, .tr-caret { animation:none; } .tr-stamp { transition:none; } }
.hint-out { margin-top:12px; padding:12px 15px; border-radius:10px; background: var(--accent-light);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--t1); font-size:.9rem; line-height:1.55; }

/* failure-aware diagnose button (revealed only when a check fails) */
.c-btn-diagnose { background: var(--accent-light); color: var(--t1); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.c-btn-diagnose:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg2)); }

/* report-an-issue link */
.lesson-report { margin-top:22px; font-size:.82rem; }
.lesson-report a { color: var(--t2); opacity:.82; text-decoration:none; border-bottom:1px dotted var(--bd); }
.lesson-report a:hover { color: var(--accent); opacity:1; }

/* lesson nav */
.lesson-nav { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:18px; gap:12px; }
.lesson-nav a { display:inline-flex; align-items:center; gap:7px; font-size:.88rem; font-weight:500; color: var(--t2);
  text-decoration:none; padding:9px 15px; border-radius:100px; border:1px solid var(--bd); background: var(--bg2); transition: all .2s var(--ease); }
.lesson-nav a:hover { color: var(--t1); background: var(--bg3); }
.lesson-nav a.next { background: var(--accent); color:#fff; border-color: var(--accent); }
.lesson-nav a.next.ready { box-shadow: 0 0 0 4px var(--accent-light); }
.lesson-nav svg { width:15px; height:15px; }

/* lesson top strip (back to syllabus + progress) */
.lesson-strip { position:fixed; top:76px; left:0; right:0; z-index:30; display:flex; align-items:center; gap:16px;
  padding:10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--bd); }
.lesson-strip a.back { font-family:var(--mono); font-size:.76rem; color: var(--t2); text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
.lesson-strip a.back:hover { color: var(--t1); }
.lesson-strip .ls-prog { flex:1; max-width:260px; height:6px; border-radius:100px; background: var(--bg3); overflow:hidden; }
.lesson-strip .ls-prog i { display:block; height:100%; background: var(--accent); border-radius:100px; }
.lesson-strip .ls-count { font-family:var(--mono); font-size:.72rem; color: var(--t3); }

/* ---- certificate: Floati Learn "boarding pass" credential ----
   Always light/cream (a printable, shareable artifact), so the neutral tokens are
   pinned here regardless of page theme; only the accent stays the session hue. */
.cert-page { --bg:#f0ede6; --bg2:#fbf8f1; --bg3:#e6e1d6; --t1:#1a1614; --t2:#4a4540; --t3:#6e6862; --t4:#857d73; --bd:rgba(26,22,20,.10);
  background: var(--bg3); min-height:100vh; padding:120px 20px 60px; }

/* the ticket: a main stub + a torn-off side stub, split by a perforation seam */
.ticket { max-width:1040px; margin:0 auto; position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 312px;
  background: var(--bg2); color: var(--t1); font-family: var(--font);
  border:1px solid var(--bd); border-radius:22px; box-shadow: var(--shadow-deep); }
/* round notches sitting on the perforation seam (punched through to the page) */
.ticket::before, .ticket::after { content:''; position:absolute; right:312px; width:26px; height:26px;
  background: var(--bg3); border-radius:50%; transform:translateX(50%); z-index:3; }
.ticket::before { top:-13px; } .ticket::after { bottom:-13px; }

.cert-main { padding:34px 38px 32px; position:relative; }
.cert-carrier { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--bd); }
.cert-brand { display:flex; align-items:center; gap:9px; }
.cert-brand img { width:38px; height:38px; border-radius:10px; display:block; object-fit:cover; }
.cert-wordmark { font-family: var(--serif); font-style:italic; font-weight:600; font-size:30px; line-height:1; color: var(--t1); letter-spacing:.2px; margin-left:-3px; }
.cert-cmeta { text-align:right; }
.cert-eyebrow { font-family: var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color: var(--t4); }
.cert-cmeta .doc { font-family: var(--mono); font-weight:600; font-size:11px; letter-spacing:.16em; color: var(--t3); margin-top:5px; }
.cert-cmeta .doc b { color: var(--accent); font-weight:700; }

.cert-route { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; margin:30px 0 6px; }
.cert-ep .lbl { font-family: var(--mono); font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color: var(--t4); margin-bottom:7px; }
.cert-ep .code { font-family: var(--mono); font-weight:700; font-size:34px; line-height:.95; color: var(--t1); letter-spacing:.01em; }
.cert-ep.to { text-align:right; }
.cert-ep.to .code { color: var(--accent); }
.cert-ep .sub { font-size:12px; color: var(--t3); margin-top:8px; font-weight:500; }
.cert-path { position:relative; height:46px; display:flex; align-items:center; }
.cert-path .line { flex:1; border-top:2px dotted color-mix(in srgb, var(--t1) 26%, transparent); margin:0 6px; }
.cert-path .plane { width:30px; height:30px; border-radius:50%; background: var(--accent); color: var(--bg2);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:0 6px 14px -6px var(--accent); }
.cert-path .plane svg { width:16px; height:16px; display:block; }
.cert-path .dot { position:absolute; top:50%; width:7px; height:7px; border-radius:50%; background: var(--bg2);
  border:2px solid color-mix(in srgb, var(--t1) 32%, transparent); transform:translateY(-50%); }
.cert-path .dot.l { left:0; } .cert-path .dot.r { right:0; }

.cert-statement { margin:24px 0 26px; font-size:15px; line-height:1.65; color: var(--t2); max-width:560px; }
.cert-statement .name { font-family: var(--serif); font-style:italic; font-weight:600; font-size:27px; line-height:1.1; color: var(--t1); display:block; margin-bottom:9px; }
.cert-statement b { color: var(--t1); font-weight:600; }
.cert-statement .acc { color: var(--accent); font-weight:600; font-style:italic; font-family: var(--serif); font-size:16px; }

.cert-stops-h { font-family: var(--mono); font-weight:600; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color: var(--t4); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.cert-stops-h::after { content:''; flex:1; border-top:1px solid var(--bd); }
.cert-stops { display:flex; flex-wrap:wrap; gap:8px; }
.cert-stamp { font-family: var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.02em; color: var(--t2);
  background: var(--bg); border:1px solid var(--bd); border-radius:999px; padding:7px 13px 7px 11px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.cert-stamp::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--accent); opacity:.85; flex:0 0 auto; }

.cert-mfoot { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:30px; padding-top:18px; border-top:1px solid var(--bd); }
.cert-sig .ln { font-family: var(--serif); font-style:italic; font-weight:500; font-size:21px; color: var(--t1); border-bottom:1.5px solid color-mix(in srgb, var(--t1) 30%, transparent); padding:0 26px 4px 2px; display:inline-block; }
.cert-sig .cap { font-family: var(--mono); font-weight:500; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--t4); margin-top:8px; }
.cert-seat { text-align:right; flex:0 0 auto; }
.cert-seat .lbl { font-family: var(--mono); font-weight:600; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--t4); margin-bottom:5px; }
.cert-seat .val { font-family: var(--mono); font-weight:700; font-size:19px; color: var(--t1); letter-spacing:.04em; }

.cert-stub { background: var(--bg); padding:32px 28px 30px; display:flex; flex-direction:column; border-left:1px solid var(--bd); position:relative; }
.cert-stub::before { content:''; position:absolute; top:18px; bottom:18px; left:-1px; border-left:2px dashed color-mix(in srgb, var(--t1) 22%, transparent); pointer-events:none; }
.cert-stub-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cert-stub-top .cert-brand img { width:30px; height:30px; border-radius:8px; }
.cert-stub-top .cert-wordmark { font-size:23px; }
.cert-stub-tag { font-family: var(--mono); font-weight:600; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color: var(--t4); text-align:right; line-height:1.5; }
.cert-stub-route { margin-top:22px; padding:14px 16px; background: var(--bg2); border:1px solid var(--bd); border-radius:12px;
  font-family: var(--mono); font-weight:700; font-size:13px; letter-spacing:.04em; color: var(--t1); display:flex; align-items:center; justify-content:center; gap:10px; }
.cert-stub-route span { color: var(--t4); font-weight:600; }
.cert-stub-route .ar { color: var(--accent); }
.cert-sf { margin-top:18px; }
.cert-sf .k { font-family: var(--mono); font-weight:600; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color: var(--t4); margin-bottom:6px; }
.cert-sf .v { font-size:14px; font-weight:600; color: var(--t1); letter-spacing:.01em; }
.cert-sf .v.pax { font-family: var(--serif); font-style:italic; font-weight:600; font-size:20px; }
.cert-ref { margin-top:auto; padding-top:22px; }
.cert-ref .k { font-family: var(--mono); font-weight:600; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color: var(--t4); margin-bottom:9px; }
.cert-ref .code { font-family: var(--mono); font-weight:700; font-size:21px; letter-spacing:.14em; color: var(--t1);
  background: var(--bg2); border:1px solid var(--bd); border-radius:10px; padding:13px 14px; text-align:center; position:relative; }
.cert-ref .code::before, .cert-ref .code::after { content:''; position:absolute; top:50%; width:9px; height:9px; border-radius:50%; background: var(--bg); transform:translateY(-50%); }
.cert-ref .code::before { left:-5px; } .cert-ref .code::after { right:-5px; }
.cert-verify { font-family: var(--mono); font-weight:500; font-size:10px; letter-spacing:.04em; color: var(--t3); text-align:center; margin-top:11px; line-height:1.5; }
.cert-verify b { color: var(--accent); font-weight:600; }

@media (max-width:880px){
  .ticket { grid-template-columns:1fr; max-width:560px; }
  .ticket::before, .ticket::after { display:none; }
  .cert-stub { border-left:none; border-top:1px solid var(--bd); }
  .cert-stub::before { top:-1px; left:18px; right:18px; bottom:auto; border-left:none; border-top:2px dashed color-mix(in srgb, var(--t1) 22%, transparent); }
  .cert-ref { margin-top:24px; }
}
@media (max-width:560px){
  .cert-main { padding:28px 24px; }
  .cert-ep .code { font-size:27px; }
  .cert-statement .name { font-size:23px; }
}
.cert-actions { max-width:940px; margin:24px auto 0; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cert-verifyline { text-align:center; color: var(--t3); font-family:var(--mono); font-size:.78rem; margin-top:16px; }

/* ---- verify ---- */
.verify-card { max-width:560px; margin:0 auto; padding:30px 28px; border:1px solid var(--bd); border-radius: var(--radius-lg); background: var(--bg2); box-shadow: var(--shadow-soft); }
.verify-form { display:flex; gap:10px; margin-top:18px; }
.verify-form input { flex:1; padding:12px 14px; border:1px solid var(--bd); border-radius:10px; background: var(--bg); color: var(--t1); font-family:var(--mono); font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; }
.verify-result { margin-top:22px; padding:18px 20px; border-radius:12px; }
.verify-result.ok { background: color-mix(in srgb,#16a34a 12%,transparent); border:1px solid color-mix(in srgb,#16a34a 40%,transparent); }
.verify-result.no { background: color-mix(in srgb,#dc2626 10%,transparent); border:1px solid color-mix(in srgb,#dc2626 35%,transparent); }
.verify-result h3 { color: var(--t1); font-size:1.1rem; margin-bottom:8px; }
.verify-result p { color: var(--t2); font-size:.92rem; line-height:1.55; }

/* modal */
.cert-modal { position:fixed; inset:0; z-index:200; background: rgba(20,16,14,.55); backdrop-filter: blur(4px); display:grid; place-items:center; padding:20px; }
.cert-modal .cm-box { background: var(--bg2); border:1px solid var(--bd); border-radius: var(--radius-lg); max-width:440px; width:100%; padding:28px; box-shadow: var(--shadow-deep); }
.cert-modal h3 { font-size:1.3rem; color: var(--t1); margin-bottom:8px; }
.cert-modal p { color: var(--t2); font-size:.92rem; margin-bottom:16px; line-height:1.5; }
.cert-modal input { width:100%; padding:13px 15px; border:1px solid var(--bd); border-radius:10px; background: var(--bg); color: var(--t1); font-size:1rem; margin-bottom:6px; }
.cert-modal .cm-err { color:#dc2626; font-size:.82rem; min-height:1.1em; margin-bottom:10px; }
.cert-modal .cm-actions { display:flex; gap:10px; justify-content:flex-end; }

/* ---- mobile gate: Floati Learn is a laptop/desktop coding experience ---- */
.mobile-gate { display:none; position:fixed; inset:0; z-index:1000; background: var(--bg);
  align-items:center; justify-content:center; padding:28px; text-align:center; }
@media (max-width: 760px) { .mobile-gate:not([hidden]) { display:flex; } }
.mobile-gate .mg-card { max-width:400px; }
.mobile-gate .mg-icon { width:64px; height:64px; margin:0 auto 18px; border-radius:18px;
  display:flex; align-items:center; justify-content:center; color: var(--accent);
  background: var(--accent-light); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.mobile-gate .mg-icon svg { width:32px; height:32px; }
.mobile-gate h2 { font-size:1.4rem; font-weight:600; letter-spacing:-.02em; color: var(--t1); margin-bottom:12px; }
.mobile-gate p { color: var(--t2); line-height:1.6; font-size:.98rem; margin-bottom:10px; }
.mobile-gate .mg-sub { color: var(--t3); font-size:.9rem; }
.mobile-gate .mg-continue { margin-top:20px; }

@media (max-width: 900px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-content { max-height:none; border-right:none; border-bottom:1px solid var(--bd); padding:24px 22px 36px; }
  .editor-pane { max-height:none; padding:24px 22px 36px; }
  /* static (not fixed) so it scrolls, but pad past the floating nav pill so it
     is never hidden behind it. */
  .lesson-strip { position:static; backdrop-filter:none; padding-top:84px; }
}
@media print {
  @page { size: landscape; margin: 0; }
  .nav, .footer, .dark-fab, .cert-actions, .cert-verifyline, .lesson-strip { display:none !important; }
  .cert-page { padding:0; background:#fff; }
  .ticket { box-shadow:none; max-width:100%; width:100%; border-radius:0; }
  .ticket::before, .ticket::after { background:#fff; }
  /* force the cream + accent fills to actually print/export */
  .cert-page, .cert-page * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ---------- hidden usage panel (PIN-gated "started vs finished") ---------- */
.lstats-bg { position:fixed; inset:0; z-index:1000; background:rgba(15,14,13,.62);
  backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; }
.lstats-modal { width:min(680px,100%); max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }
.lstats-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--bd); }
.lstats-head h3 { margin:0; font-size:1.02rem; color:var(--t1); font-weight:600; }
.lstats-x { background:none; border:none; font-size:1.5rem; line-height:1; color:var(--t3); cursor:pointer; padding:2px 6px; border-radius:8px; }
.lstats-x:hover { color:var(--t1); background:var(--bg3); }
.lstats-body { padding:18px 20px 22px; overflow-y:auto; }
.lstats-badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.02em; color:var(--t3); margin:0 0 16px; }
.lstats-dot { width:7px; height:7px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px color-mix(in srgb,#16a34a 22%,transparent); }

.lstats-gate-label { display:block; font-family:var(--mono); font-size:.74rem; color:var(--t2); margin-bottom:8px; letter-spacing:.03em; }
.lstats-gate-row { display:flex; gap:8px; }
.lstats-pin { flex:1; padding:10px 13px; border:1px solid var(--bd); border-radius:10px; background:var(--bg); color:var(--t1);
  font-size:1.1rem; letter-spacing:.4em; text-align:center; }
.lstats-pin:focus { outline:none; border-color:var(--accent); }
.lstats-gate-error { color:#dc2626; font-size:.82rem; margin:10px 0 0; }
.lstats-loading, .lstats-error { font-family:var(--mono); font-size:.82rem; color:var(--t2); padding:14px 0; }

.lstats-funnel { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:22px; }
.lstats-fcard { border:1px solid var(--bd); border-radius:12px; padding:13px 14px; background:var(--bg); }
.lstats-fcard .fn { display:block; font-size:1.55rem; font-weight:700; color:var(--t1); line-height:1.1; }
.lstats-fcard .fl { display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--t3); margin-top:5px; text-transform:uppercase; }
.lstats-fcard.is-accent .fn { color:var(--accent); }
.lstats-fcard.is-green .fn { color:#16a34a; }

.lstats-group { margin-bottom:18px; }
.lstats-group-head { display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.lstats-group-head h4 { margin:0; font-size:.92rem; color:var(--t1); font-weight:600; }
.lstats-swatch { width:10px; height:10px; border-radius:3px; }
.lstats-sub { font-family:var(--mono); font-size:.66rem; color:var(--t3); letter-spacing:.02em; }
.lstats-cells { display:grid; grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); gap:8px; }
.lstats-cell { display:flex; flex-direction:column; gap:3px; padding:10px 8px; border:1px solid var(--bd); border-radius:10px; background:var(--bg); text-align:center; }
.lstats-num { font-size:1.15rem; font-weight:700; color:var(--t1); }
.lstats-label { font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; color:var(--t3); text-transform:uppercase; }

.lstats-chart-block { margin-top:16px; }
.lstats-chart-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.lstats-chart-head h4 { margin:0; font-size:.82rem; color:var(--t2); font-weight:600; }
.lstats-busiest { font-family:var(--mono); font-size:.66rem; color:var(--t3); }
.lstats-bars { display:flex; align-items:flex-end; gap:3px; height:74px; padding:4px 0; border-bottom:1px solid var(--bd); }
.lstats-bars-month { gap:6px; }
.lstats-bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; }
.lstats-bar-fill { width:100%; max-width:18px; border-radius:3px 3px 0 0; background:var(--accent); opacity:.85; transition:opacity .15s; }
.lstats-bar:hover .lstats-bar-fill { opacity:1; }
.lstats-bar-x { font-family:var(--mono); font-size:.54rem; color:var(--t3); margin-top:4px; white-space:nowrap; }
.lstats-foot { font-family:var(--mono); font-size:.66rem; color:var(--t3); margin:18px 0 0; line-height:1.6; }

/* lab lessons: on-device live-model demo (ungraded) */
.lab-panel { display:flex; flex-direction:column; gap:14px; }
.lab-intro { color: var(--t2); line-height:1.6; }
.lab-intro p { margin:0 0 10px; }
.lab-intro p:last-child { margin-bottom:0; }
.lab-intro code { background: var(--accent-light); color: var(--accent); padding:1px 5px; border-radius:5px; font-family:var(--mono); font-size:.86em; }
.lab-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lab-stage { min-height:36px; color: var(--t3); font-size:.9rem; line-height:1.5; }
.lab-answer { background: var(--bg2); border:1px solid var(--bd); border-radius:12px; padding:14px 16px; color: var(--t1); line-height:1.6; white-space:pre-wrap; font-size:.95rem; }
.lab-watch { margin-top:12px; padding:10px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--bd)); background: var(--accent-light); color: var(--t2); font-size:.88rem; line-height:1.5; }
.lab-fallback { background:#0d0b0a; color:#e8e3da; font-family:var(--mono); font-size:13px; line-height:1.55; border-radius:10px; padding:14px 16px; white-space:pre-wrap; overflow-x:auto; margin:0; }
.dark .lab-fallback { background:#000; }

/* ---- Daily Review (spaced repetition) ---- */
.review-card { margin:14px 0 6px; padding:16px 20px; border-radius: var(--radius-lg); border:1px solid color-mix(in srgb, var(--accent) 26%, var(--bd)); background: linear-gradient(180deg, var(--accent-light), var(--bg2)); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.review-card[hidden] { display:none; }
.rc-info { display:flex; align-items:center; gap:14px; min-width:0; }
.rc-icon { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background: var(--accent); color:#fff; }
.rc-icon svg { width:21px; height:21px; }
.rc-text h3 { margin:0; font-size:1.06rem; font-weight:600; letter-spacing:-.01em; color: var(--t1); }
.rc-text p { margin:2px 0 0; color: var(--t2); font-size:.9rem; line-height:1.4; }
#review-start { flex:none; }
.review-modal { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }
.review-modal[hidden] { display:none; }
.rv-box { position:relative; background: var(--bg2); border:1px solid var(--bd); border-radius: var(--radius-lg); padding:24px; max-width:560px; width:100%; max-height:92vh; overflow:auto; box-shadow: var(--shadow-deep, 0 30px 70px -30px rgba(0,0,0,.7)); }
.rv-close { position:absolute; top:12px; right:14px; background:none; border:none; font-size:26px; line-height:1; color: var(--t3); cursor:pointer; }
.rv-close:hover { color: var(--t1); }
.rv-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.rv-head h3 { color: var(--t1); font-size:1.2rem; margin:0; }
.rv-progress { color: var(--t3); font-family:var(--mono); font-size:.85rem; }
.rv-src { font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color: var(--t3); margin-bottom:8px; }
.rv-q { color: var(--t1); font-size:1.04rem; line-height:1.5; font-weight:500; margin:0 0 14px; }
.rv-opts { display:flex; flex-direction:column; gap:6px; }
.rv-opt { display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-radius:10px; cursor:pointer; color: var(--t2); line-height:1.45; border:1px solid var(--bd); }
.rv-opt:hover { background: var(--bg3); }
.rv-opt input { margin-top:3px; accent-color: var(--accent); }
.rv-opt.correct { border-color:#16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); color: var(--t1); }
.rv-opt.wrong { border-color:#dc2626; background: color-mix(in srgb, #dc2626 12%, transparent); color: var(--t1); }
.rv-explain { margin-top:12px; padding-top:12px; border-top:1px dashed var(--bd); font-size:.9rem; line-height:1.55; color: var(--t2); }
.rv-explain b { color:#dc2626; }
.rv-explain.ok b { color:#16a34a; }
.rv-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.rv-rate { color: var(--t3); font-size:.86rem; margin-right:2px; }
.rv-done { text-align:center; padding:14px 0; }
.rv-done svg { width:46px; height:46px; color:#16a34a; margin-bottom:8px; }
.rv-done h4 { margin:0 0 6px; color: var(--t1); font-size:1.16rem; }
.rv-done p { color: var(--t2); line-height:1.55; max-width:46ch; margin:0 auto 16px; font-size:.94rem; }

/* ---- "Your journey": a right-edge drawer sidebar with a vertical route line ----
   A progress tab is pinned to the right edge -- it breathes (a soft glow) and its
   fill rises to your percent, so finishing lessons visibly entices you to open it.
   Tap it and a drawer slides in; inside, the course is a vertical transit line you
   ride top to bottom: behind you a solid accent rail that flows, ahead a dashed
   track still to be laid; modules are stations, phases are quiet mono-caps markers,
   from a trailhead down to your certificate. */
.journey { --jr-pct: 0%; }
.journey[hidden] { display:none; }
.jr-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- the edge tab (the collapsed handle) ---- */
.jr-tab { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:95;
  width:48px; height:158px; padding:0; cursor:pointer; overflow:hidden; font:inherit; color: var(--t1);
  border:1px solid var(--bd); border-right:0; border-radius:15px 0 0 15px; background: var(--bg2);
  box-shadow: -10px 0 30px -18px color-mix(in srgb, var(--accent) 60%, rgba(20,16,14,.5));
  transition: width .2s var(--ease), box-shadow .3s, transform .4s var(--ease);
  animation: jr-tab-glow 3s ease-in-out infinite; }
.jr-tab:hover { width:56px; }
.jr-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.journey.jr-open .jr-tab { transform: translateY(-50%) translateX(120%); pointer-events:none; animation:none; }
/* the rising progress fill: a translucent wash with a bright level line at --jr-pct */
.jr-tab-fill { position:absolute; left:0; right:0; bottom:0; height: var(--jr-pct); z-index:0;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-top: 2.5px solid var(--accent);
  box-shadow: 0 -7px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent);
  transition: height 1.1s var(--ease); }
.journey.jr-alldone .jr-tab-fill { border-top-color: var(--green, #059669); background: color-mix(in srgb, var(--green, #059669) 16%, transparent); }
.jr-tab-in { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:13px 0; }
.jr-tab-chev { width:18px; height:18px; color: var(--t2); animation: jr-chev-peek 2.4s var(--ease) infinite; }
.jr-tab-text { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color: var(--t2); }
.jr-tab-pct { font-family: var(--mono); font-size:.78rem; font-weight:700; color: var(--accent); }
.journey.jr-alldone .jr-tab-pct { color: var(--green, #059669); }

/* ---- the drawer ---- */
.jr-scrim { position:fixed; inset:0; z-index:990; background: rgba(20,16,14,.34);
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease); }
.journey.jr-open .jr-scrim { opacity:1; pointer-events:auto; }
.jr-drawer { position:fixed; top:0; right:0; z-index:991; height:100vh; height:100dvh; width: min(420px, 92vw);
  display:flex; flex-direction:column; background: var(--bg2); border-left:1px solid var(--bd);
  box-shadow: -30px 0 70px -34px rgba(20,16,14,.55);
  transform: translateX(100%); transition: transform .42s var(--ease); will-change: transform; }
.journey.jr-open .jr-drawer { transform: translateX(0); }

.jr-dhead { flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:20px 20px 14px; border-bottom:1px solid var(--bd);
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--bg2); }
.jr-dtitle h3 { margin:0; font-size:1.08rem; font-weight:600; color: var(--t1); }
.jr-sub { display:block; margin-top:3px; font-family: var(--mono); font-size:.73rem; color: var(--t3); }
.jr-close { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; color: var(--t2);
  background: var(--bg); border:1px solid var(--bd); border-radius:10px; transition: background .15s, color .15s; }
.jr-close:hover { background: var(--bg3); color: var(--t1); }
.jr-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.jr-close svg { width:17px; height:17px; }

/* ---- the vertical rail ---- */
.jr-rail { --jr-x: 32px;        /* x of the line within the rail */
  --jr-dot: 26px;
  --jr-todo: color-mix(in srgb, var(--t3) 32%, transparent);
  flex:1 1 auto; min-height:0; position:relative;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden; padding:12px 0 18px; outline:none;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.jr-rail:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }

/* each row = a station or terminus; the dot/mark sits on the line at --jr-x */
.jr-rail > * { position:relative; display:flex; align-items:center; min-height:52px;
  padding: 2px 18px 2px calc(var(--jr-x) + 30px); }
/* the vertical line segment spanning this row (rows abut -> one continuous line) */
.jr-rail > *::before { content:''; position:absolute; left: var(--jr-x); transform:translateX(-50%); top:0; bottom:0; width:3px; z-index:0;
  background: repeating-linear-gradient(180deg, var(--jr-todo) 0 5px, transparent 5px 11px); }
.jr-rail > *.traveled::before { width:5px; border-radius:100px;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, #fff 42%, transparent) 0 2px, transparent 2px 13px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, #fff), var(--accent));
  background-size: 100% 13px, 100% 100%;
  box-shadow: 0 0 14px -3px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: jr-flow-v 8s linear infinite; }
.jr-rail > *:first-child::before { top:50%; }       /* trailhead: line starts at its dot */
.jr-rail > *:last-child::before { bottom:50%; }      /* certificate: line ends at its dot */
.jr-rail > *.jr-todo::before { opacity: calc(1 - .5 * var(--ahead, 0)); }
.jr-rail.jr-draw > *.traveled::before { transform: translateX(-50%) scaleY(0); transform-origin: top center;
  animation: jr-flow-v 8s linear infinite, jr-grow-v .5s var(--ease) forwards; animation-delay: 0s, calc(var(--i, 0) * 45ms); }

/* the station marker */
.jr-dot { position:absolute; left: var(--jr-x); top:50%; transform: translate(-50%,-50%); z-index:3;
  width: var(--jr-dot); height: var(--jr-dot); border-radius:100px; display:grid; place-items:center;
  border:2.5px solid var(--jr-todo); background: var(--bg2); color: var(--t4);
  font-family: var(--mono); font-size:.6rem; font-weight:700; cursor:pointer; padding:0;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), border-color .18s; }
.jr-dot svg { width:13px; height:13px; }
.jr-dot:hover { transform: translate(-50%,-50%) scale(1.13); }
.jr-dot:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.jr-done .jr-dot { background: var(--accent); border-color: var(--accent); color:#fff;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.jr-current .jr-dot { border-color: var(--accent); color: var(--accent); border-width:3px; transform: translate(-50%,-50%) scale(1.2);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg2));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.jr-current .jr-dot:hover { transform: translate(-50%,-50%) scale(1.26); }
.jr-current .jr-dot::after { content:''; position:absolute; inset:-3px; border-radius:100px; border:2px solid var(--accent);
  animation: jr-ping 2.4s var(--ease) infinite; }
.jr-leg-open:not(.jr-current) .jr-dot::before { content:''; position:absolute; inset:-4px; border-radius:100px;
  border:1.5px solid color-mix(in srgb, var(--accent) 40%, var(--bg2)); }

/* the station text */
.jr-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; padding:8px 0; }
.jr-leg-n { font-family: var(--mono); font-size:.56rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: color-mix(in srgb, var(--accent) 42%, var(--t3)); margin-bottom:1px; }
.jr-name { font-size:.85rem; line-height:1.25; font-weight:500; color: var(--t3); transition: color .2s; }
.jr-done .jr-name { color: var(--t2); }
.jr-current .jr-name { color: var(--t1); font-weight:700; }
.jr-meta { display:flex; align-items:center; gap:8px; margin-top:2px; }
.jr-count { font-family: var(--mono); font-size:.62rem; color: var(--t4); letter-spacing:.02em; }
.jr-current .jr-count { color: var(--accent); font-weight:600; }
.jr-here { font-family: var(--mono); font-size:.53rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background: color-mix(in srgb, var(--accent) 90%, #000); padding:2px 7px; border-radius:6px; }

/* termini */
.jr-term .jr-mark { position:absolute; left: var(--jr-x); top:50%; transform: translate(-50%,-50%); z-index:3;
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color: var(--t2); background: var(--bg3); border:1.5px solid var(--bd);
  padding:0; cursor:pointer; transition: transform .2s var(--ease), box-shadow .25s, background .2s; }
.jr-term .jr-mark:hover { transform: translate(-50%,-50%) scale(1.08); }
.jr-term .jr-mark:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.jr-term .jr-mark svg { width:17px; height:17px; }
.jr-cap { font-family: var(--mono); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--t3); }
.jr-term-start .jr-mark { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg3)); border-color: color-mix(in srgb, var(--accent) 26%, var(--bd)); }
.jr-term-end.traveled .jr-mark { background: var(--accent); border-color: var(--accent); color:#fff; transform: translate(-50%,-50%) scale(1.06);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 85%, transparent); }
.jr-term-end.traveled .jr-cap { color: var(--accent); }
.jr-term-end.traveled .jr-mark::after { content:''; position:absolute; inset:-4px; border-radius:12px; border:2px solid var(--accent);
  animation: jr-ping 2.6s var(--ease) infinite; }

/* legend (drawer footer) */
.jr-legend { flex:0 0 auto; margin:0; padding:12px 20px 16px; border-top:1px solid var(--bd);
  color: var(--t3); font-size:.74rem; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.jr-k { display:inline-block; width:12px; height:12px; border-radius:100px; margin-left:12px; }
.jr-k:first-child { margin-left:0; }
.jr-k-done { background: var(--accent); box-shadow: 0 0 8px -2px color-mix(in srgb, var(--accent) 70%, transparent); }
.jr-k-cur { background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); border:2.5px solid var(--accent); }
.jr-k-todo { width:14px; height:14px; border-radius:100px; background: var(--bg2);
  background-image: repeating-linear-gradient(180deg, var(--jr-todo) 0 3px, transparent 3px 6px); }

/* award banner inside the drawer: surfaces a milestone/certificate where the
   progress lives, and celebrates a fresh unlock the first time you open it */
.jr-award { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--bd);
  background: radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg2); }
.jr-award[hidden] { display:none; }
.jr-award-mark { position:relative; flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background: var(--accent); color:#fff; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.jr-award-mark svg { width:20px; height:20px; }
.jr-award-tx { flex:1 1 auto; min-width:0; }
.jr-award-t { display:block; font-size:.92rem; font-weight:700; color: var(--t1); }
.jr-award-s { display:block; font-size:.73rem; color: var(--t3); margin-top:1px; }
.jr-award-btn { flex:0 0 auto; font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; color:#fff;
  background: color-mix(in srgb, var(--accent) 80%, #000); border:0; border-radius:9px; padding:8px 14px;
  transition: transform .12s var(--ease), box-shadow .2s; }
.jr-award-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px -8px color-mix(in srgb, var(--accent) 85%, transparent); }
.jr-award-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* an unseen award gently breathes; the tab wears a pip to pull you in */
.jr-award-new .jr-award-mark { animation: jr-award-breathe 2.4s var(--ease) infinite; }
.journey.jr-has-award .jr-tab::after { content:''; position:absolute; top:9px; right:9px; width:9px; height:9px; border-radius:100px; z-index:2;
  background: var(--accent); box-shadow: 0 0 0 3px var(--bg2), 0 0 9px 1px color-mix(in srgb, var(--accent) 80%, transparent);
  animation: jr-pip 1.6s var(--ease) infinite; }
/* the one-shot celebration on the first open after an unlock */
.jr-celebrate { animation: jr-award-in .55s cubic-bezier(.34,1.56,.64,1) both; }
.jr-celebrate .jr-award-mark { animation: jr-stamp .6s cubic-bezier(.34,1.56,.64,1) both; }
.jr-celebrate .jr-award-mark::after { content:''; position:absolute; inset:-7px; border-radius:15px; border:2px solid var(--accent); animation: jr-ping 1.1s var(--ease) 1; }

@keyframes jr-award-in { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes jr-stamp { 0% { transform: scale(1.55) rotate(-9deg); } 60% { transform: scale(.93) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes jr-award-breathe { 0%,100% { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); } 50% { box-shadow: 0 6px 22px -3px color-mix(in srgb, var(--accent) 100%, transparent); } }
@keyframes jr-pip { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes jr-ping { 0% { transform:scale(1); opacity:.5; } 70%,100% { transform:scale(1.9); opacity:0; } }
@keyframes jr-flow-v { to { background-position: 0 130px, 0 0; } }
@keyframes jr-grow-v { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
@keyframes jr-tab-glow {
  0%,100% { box-shadow: -10px 0 26px -18px color-mix(in srgb, var(--accent) 45%, rgba(20,16,14,.45)); }
  50%     { box-shadow: -12px 0 36px -12px color-mix(in srgb, var(--accent) 85%, rgba(20,16,14,.4)); } }
@keyframes jr-chev-peek { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .jr-tab, .jr-tab-chev, .jr-current .jr-dot::after, .jr-term-end.traveled .jr-mark::after,
  .jr-award-new .jr-award-mark, .journey.jr-has-award .jr-tab::after,
  .jr-celebrate, .jr-celebrate .jr-award-mark, .jr-celebrate .jr-award-mark::after { animation:none; }
  .jr-tab-fill, .jr-drawer, .jr-scrim { transition:none; }
  .jr-rail > *.traveled::before, .jr-rail.jr-draw > *.traveled::before { animation:none; transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .jr-tab { width:42px; height:140px; }
  .jr-tab:hover { width:48px; }
}

/* ---- reward toast: level up / streak milestone / freeze earned ---- */
.xp-toast { position:fixed; left:50%; top:84px; transform: translateX(-50%) translateY(-16px); z-index:140;
  display:flex; align-items:center; gap:11px; padding:10px 18px 10px 11px; border-radius:100px;
  background: var(--bg2); border:1px solid color-mix(in srgb, var(--accent) 32%, var(--bd));
  box-shadow: 0 22px 48px -18px color-mix(in srgb, var(--accent) 55%, rgba(20,16,14,.5)), 0 4px 14px -8px rgba(20,16,14,.25);
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1); }
.xp-toast.in { opacity:1; transform: translateX(-50%) translateY(0); }
.xp-ic { flex:0 0 auto; width:36px; height:36px; border-radius:100px; display:grid; place-items:center; color:#fff;
  background: var(--accent); box-shadow: 0 5px 14px -5px color-mix(in srgb, var(--accent) 80%, transparent); }
.xp-ic svg { width:20px; height:20px; }
.xp-streak .xp-ic { background: var(--amber, #d97706); box-shadow: 0 5px 14px -5px color-mix(in srgb, var(--amber, #d97706) 80%, transparent); }
.xp-freeze .xp-ic { background: var(--sky, #0891b2); box-shadow: 0 5px 14px -5px color-mix(in srgb, var(--sky, #0891b2) 80%, transparent); }
.xp-tx { display:flex; flex-direction:column; line-height:1.18; }
.xp-tx strong { font-size:.94rem; font-weight:700; color: var(--t1); }
.xp-tx span { font-family: var(--mono); font-size:.66rem; color: var(--t3); margin-top:1px; }
@media (prefers-reduced-motion: reduce) { .xp-toast, .xp-toast.in { transition: opacity .2s; transform: translateX(-50%); } }

/* ---- certificate one-time arrival animation (first open per credential) ---- */
.cert-arrive { animation: cert-rise .7s cubic-bezier(.32,.72,0,1) both; }
.cert-arrive .cert-statement .name { animation: cert-fadeup .7s var(--ease) .24s both; }
.cert-arrive .cert-path .plane { animation: cert-seal .7s cubic-bezier(.34,1.56,.64,1) .3s both; }
.cert-arrive::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5;
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 62%);
  background-size: 260% 100%; animation: cert-sweep 1.15s var(--ease) .12s 1; }
@keyframes cert-rise { from { opacity:0; transform: translateY(20px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes cert-fadeup { from { opacity:0; transform: translateY(9px); } to { opacity:1; transform:none; } }
@keyframes cert-seal { 0% { opacity:0; transform: scale(1.6) rotate(-14deg); } 60% { opacity:1; transform: scale(.92) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes cert-sweep { from { background-position: 190% 0; } to { background-position: -90% 0; } }
@media (prefers-reduced-motion: reduce) { .cert-arrive, .cert-arrive .cert-statement .name, .cert-arrive .cert-path .plane, .cert-arrive::after { animation:none; } }