/* Reduced CSS generated from current page */

/* From: <inline style> */
:root { --bg: #0b1220; --card: #0f1a2b; --soft: #0d1627; --ink: #e7eefc; --muted: #9db0d1; --border: #1e2a44; --fx: #4da6ff; --cta: #68b5ff; --radius: 18px; --cta-ink: #06203a; --cta-shadow: rgba(104,181,255,.25); }
* { box-sizing: border-box; }
body { margin: 0px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; background: var(--bg); color: var(--ink); line-height: 1.5; }
a { color: rgb(185, 217, 255); text-decoration: none; }
/* TABLET / MOBILE: stack layout (rail turns into overlay, which we already fixed) */
@media (max-width: 960px) {
  .wrap {
    display: block;
    max-width: 100%;
    
    margin: 0;
    padding: 0 16px 40px;
  }
}

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: rgba(2, 6, 23, 0.35) 0px 14px 40px, rgba(90, 176, 255, 0.08) 0px 0px 0px 1px inset; }
h1 { margin: 8px 0px 14px; font-size: 1.25rem; }
h2 { margin: 6px 0px 2px; font-size: 1.2rem; }
h3 { margin: 14px 0px 6px; color: rgb(168, 212, 255); }
.muted { color: var(--muted); }
.list { display: flex; flex-direction: column; gap: 10px; }
.item { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--border); background: var(--soft); border-radius: 12px; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.item[aria-current="true"] { outline: 2px solid var(--fx); outline-offset: 2px; }
blockquote { background: var(--soft); border-left: 4px solid var(--fx); padding: 8px 12px; border-radius: 10px; }
.rail-toggle { position: absolute; top: 8px; right: 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--ink); border-radius: 10px; padding: 6px 8px; cursor: pointer; }
.lesson-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.breadcrumb { color: var(--muted); font-size: 0.85rem; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; background: rgba(255, 255, 255, 0.03); }
.progress { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; }
.progress > i { position: absolute; inset: 0px; width: 10%; background: linear-gradient(90deg, rgb(119, 195, 255), rgb(181, 167, 255)); box-shadow: rgba(90, 176, 255, 0.25) 0px 0px 0px 1px inset; border-radius: 999px; }
.outcomes { padding: 10px 12px; }
.outcomes h3 { margin: 0px 0px 8px; }
.outcomes ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0px; padding: 0px; }
.outcomes li { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--ink); border-radius: 999px; font-size: 0.95rem; line-height: 1.2; white-space: nowrap; }
.outcomes li .tick { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: rgba(16, 185, 129, 0.18); color: rgb(52, 211, 153); font-weight: 700; font-size: 12px; }
.btn { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--ink); font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--cta); color: var(--cta-ink); border: none; box-shadow: 0 2px 6px var(--cta-shadow); }
.lesson-nav { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.playground-wrap { margin-top: 14px; }
.pg-shell { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }
@media (max-width: 900px) {
.pg-shell { grid-template-columns: 1fr; }
}
.pg-panel { background: var(--soft); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.pg-panel header { font-weight: 800; margin-bottom: 8px; }
.pg-ta { width: 100%; min-height: 140px; resize: vertical; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: rgb(11, 21, 38); color: var(--ink); }
.pg-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.subtle { color: var(--muted); font-size: 0.9rem; }
#xpModal.xp-backdrop { position: fixed; inset: 0px; background: rgba(2, 6, 23, 0.6); display: none; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); }
#xpModal .xp-card { position: relative; width: min(680px, 92vw); background: var(--card); border: 1px solid var(--border); border-radius: 22px; box-shadow: rgba(0, 0, 0, 0.45) 0px 24px 60px; overflow: hidden; }
#xpModal .xp-close { position: absolute; right: 10px; top: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--ink); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
#xpModal .xp-hero { padding: 26px 24px 18px; background: radial-gradient(1200px 400px at 50% -50%, rgba(104, 181, 255, 0.35), transparent 60%); text-align: center; }
#xpModal .xp-hero h3 { margin: 0px 0px 6px; font-size: 1.1rem; }
#xpModal .xp-big { font-size: 48px; font-weight: 900; color: rgb(50, 210, 150); }
#xpModal .xp-sub { margin-top: 10px; display: flex; gap: 10px; justify-content: center; align-items: center; }
#xpModal .xp-badge { position: static; display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); }
#xpModal .xp-actions { display: flex; gap: 10px; justify-content: center; align-items: center; padding: 14px 16px 22px; border-top: 1px solid var(--border); }
#xpModal .xp-confetti { position: absolute; inset: 0px; pointer-events: none; }
@media (max-width: 520px) {
#xpModal .xp-actions { flex-direction: column; }
#xpModal .xp-close { top: 8px; right: 8px; }
}
article section { margin-top: 28px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
article section:first-of-type { margin-top: 0px; padding-top: 0px; border-top: none; }
article section + section { box-shadow: rgba(255, 255, 255, 0.04) 0px -1px 0px inset; }
article section { background: rgba(255, 255, 255, 0.02); border-radius: 12px; padding: 18px 16px; margin-top: 22px; }
article section h3 { margin-top: 0px; }
.rail .list { gap: 8px; }
.rail .list .item { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 10px; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.rail .list .item[aria-current="true"] { outline: none; border-color: var(--fx); box-shadow: rgba(77, 166, 255, 0.35) 0px 0px 0px 1px inset; }
.grid > aside { display: flex; flex-direction: column; gap: 14px; }
.grid > aside .card { background: var(--soft); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; transition: transform 0.2s, box-shadow 0.2s; }
.grid > aside h3 { margin: 0px 0px 6px; display: flex; align-items: center; gap: 8px; }
.grid > aside p { margin: 0px; line-height: 1.55; color: var(--muted); }
:root { color-scheme: dark; }
select.btn, .select-dark { background: var(--soft); color: var(--ink); border: 1px solid var(--border); }
select.btn option, .select-dark option { background: var(--card); color: var(--ink); }
.item.lesson-item { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--border); background: var(--soft); border-radius: 12px; cursor: pointer; transition: transform 0.15s, border-color 0.15s; position: relative; }
#lessonList .lesson-item .lesson-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0px 8px; border-radius: 999px; font-weight: 600; line-height: 1; background: var(--chip-bg, rgba(148,163,184,.15)); border: 1px solid var(--chip-border, rgba(148,163,184,.25)); }
.item.lesson-item.completed { opacity: 0.95; filter: none; }
.badge-completed { position: absolute; top: 8px; right: 8px; font-size: 11px; padding: 2px 6px; border-radius: 8px; background: var(--fx-blue); color: rgb(255, 255, 255); letter-spacing: 0.2px; }
#lessonList .lesson-item.completed, #lessonList .lesson-item[data-completed="1"] { opacity: 1 !important; filter: none !important; pointer-events: auto !important; }

.rail-toggle { position: absolute; right: -12px; top: 10px; z-index: 1001; }
.rail .list .item .phase-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 100px; line-height: 1.05; text-align: center; white-space: normal; padding: 6px 4px; background: var(--fx-blue, #4da6ff); border-radius: 12px; }
@media (max-width: 640px) {
.grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.grid > aside { display: none !important; }
.lesson-header, .lesson-header * { overflow: visible !important; }
}
@media (min-width: 641px) and (max-width: 900px) {
.grid { grid-template-columns: 1fr !important; }
.grid > aside { display: none !important; }
}
.tech-bg, .tech-hex, .tech-map, .tech-traces, .tech-glow, .tech-particles { position: fixed; inset: 0px; pointer-events: none; }

/* From: http://127.0.0.1:5500/styles/main.css?_cacheOverride=1763612882361 */
:root { --bg: #0a0f1a; --card: #0f1625; --soft: #0c1423; --ink: #e5e7eb; --muted: #94a3b8; --border: #0b2a55; --radius: 22px; --shadow: 0 10px 30px rgba(2,6,23,.45); --cta: #3b82f6; --cta-shadow: #1e40af; --cta-grad-start: #2563eb; --cta-grad-end: #1e40af; --chip-bg: rgba(30,58,138,.25); --chip-ink: #e2e8f0; --fx-blue: #60a5fa; --fx-blue-soft: #3b82f6; --fx-grid-stroke: rgba(96,165,250,.35); --fx-trace-grad-1: #93c5fd; --fx-trace-grad-2: #3b82f6; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0px; overflow-x: hidden; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--ink); }
.container { max-width: 1120px; margin: 0px auto; padding: 20px 20px 64px; position: relative; z-index: 2; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 14px; animation: 0.6s ease-out 0s 1 normal both running fadeUp; }

.btn { cursor: pointer; border: 1px solid var(--border); background: rgb(12, 20, 35); color: rgb(203, 213, 225); border-radius: 12px; padding: 10px 12px; }
footer { margin-top: 18px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.tech-hex { position: fixed; right: -40vw; top: 0px; width: 200vw; height: 120vh; opacity: 0.2; animation: 120s linear 0s infinite normal none running tech-drift; }
.tech-map { position: fixed; inset: 0px; opacity: 0.18; }
.tech-traces { position: fixed; inset-inline: 0px; bottom: 0px; height: 55vh; }
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0px); }
}
.container { padding: 14px 14px 56px; }
.tech-hex { position: fixed; right: -40vw; top: 0px; width: 200vw; height: 120vh; opacity: 0.2; animation: 120s linear 0s infinite normal none running tech-drift; }
.card { transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; will-change: transform; }
@keyframes wiggle {
0% { transform: rotate(0deg) translateY(0px); }
25% { transform: rotate(-5deg) translateY(-1px); }
50% { transform: rotate(0deg) translateY(0px); }
75% { transform: rotate(5deg) translateY(-1px); }
100% { transform: rotate(0deg) translateY(0px); }
}
header { transition: box-shadow 0.25s, background 0.25s; }
.btn.btn-primary { background: linear-gradient(135deg, var(--cta-grad-start), var(--cta-grad-end)); color: rgb(230, 240, 255); border: 1px solid var(--cta-shadow); box-shadow: rgba(0, 0, 0, 0.28) 0px 8px 18px, rgba(59, 130, 246, 0.35) 0px 0px 12px; transition: transform 0.12s, box-shadow 0.2s, background 0.2s; }
a.btn.btn-primary { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none !important; }
.btn.btn-ghost { background: transparent; color: rgb(191, 219, 254); border: 1px solid rgba(59, 130, 246, 0.35); text-decoration: none; }
.card { transition: transform 0.18s, box-shadow 0.18s; will-change: transform; }
@media (any-hover: none) {
@keyframes lift-on-enter {
0% { transform: translateY(10px); box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.25)); }
40% { transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.28) 0px 10px 28px; }
100% { transform: translateY(0px); box-shadow: var(--shadow, 0 6px 16px rgba(0,0,0,.25)); }
}
}
@keyframes drift {
0% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0px); }
}
.container, header, .wrap, .card { position: relative; z-index: 2; }
* { transition-property: opacity, transform, box-shadow, border-color, background, color; transition-duration: 0.4s; transition-timing-function: ease; }
.card, .btn { opacity: 0; transform: translateY(10px); will-change: transform, opacity; }
.card, .btn { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
.card, .btn { transform: none !important; opacity: 1 !important; }
}
select, textarea { width: 100%; background: rgb(12, 20, 35); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; appearance: none; }
select { background-image: linear-gradient(45deg, transparent 50%, rgb(147, 197, 253) 50%), linear-gradient(135deg, rgb(147, 197, 253) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
option { background: rgb(12, 20, 35); color: var(--ink); }
.site-shell { max-width: 1120px; margin-inline: auto; padding: 20px 20px 64px; }
.tech-hex { position: fixed; right: -40vw; top: 0px; width: 200vw; height: 120vh; opacity: 0.2; animation: 120s linear 0s infinite normal none running tech-drift; }
.tech-map { position: fixed; inset: 0px; opacity: 0.18; }
.tech-traces { position: fixed; inset-inline: 0px; bottom: 0px; height: 55vh; }
.tech-glow { position: fixed; left: 50%; top: 33%; transform: translate(-50%, -50%); width: 60vmin; height: 60vmin; border-radius: 9999px; filter: blur(28px); background: radial-gradient(circle, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.08) 45%, transparent 60%); }
.tech-particles { position: fixed; inset: 0px; }
@keyframes tech-drift {
0% { transform: translateX(0px); }
100% { transform: translateX(-10%); }
}
@keyframes tech-floatY {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
@keyframes tech-twinkle {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes fadeSlide {
0% { opacity: 0; transform: translateY(14px); }
100% { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
h1 { font-size: 1.6rem; line-height: 1.25; }
.site-shell { padding: 14px 14px 56px; }
.user-email { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@keyframes soup-steam {
0% { transform: translate(-50%, 0px) scale(0.6); opacity: 0.6; }
100% { transform: translate(-50%, -100px) scale(1.4); opacity: 0; }
}
@keyframes soup-bub {
0% { transform: translateY(20px) scale(0.4); opacity: 0; }
30% { opacity: 0.9; }
100% { transform: translateY(-60px) scale(1); opacity: 0; }
}
@keyframes soup-pop {
0% { transform: scale(0.9); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes soup-shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
.grid { display: grid; }
.grid { display: grid; }
@keyframes sidebarPulse {
0%, 100% { box-shadow: 0 3px 0 var(--cta-shadow),
      0 0 12px rgba(59,130,246,.3); }
50% { box-shadow: 0 4px 0 var(--cta-shadow),
      0 0 20px rgba(59,130,246,.55),
      0 0 30px rgba(104,181,255,.25) inset; }
}
.btn { cursor: pointer; }
.muted { color: var(--muted); }

.btn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer; }

.site-shell { padding-top: 70px; }

.techy-title { color: var(--fx-blue); font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; text-shadow: rgba(77, 166, 255, 0.35) 0px 0px 12px, rgba(77, 166, 255, 0.2) 0px 0px 24px; }
.qz-panel { margin: 16px 0px 28px; }
.qz-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.qz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.qz-status { font-size: 0.85rem; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--soft); color: var(--muted); }
html, body { overflow-x: hidden; }
canvas { max-width: 100%; height: auto; }
@media (max-width: 640px) {
main, .site-shell { padding-top: 72px; }
}
@media (max-width: 640px) {
.techy-title { margin-top: 1.25rem; margin-bottom: 0.75rem; font-size: 1.75rem; line-height: 1.2; text-align: center; text-shadow: rgba(80, 140, 255, 0.25) 0px 0px 18px; }
}
@media (max-width: 640px) {
.card { width: 100%; margin: 12px 0px; padding: 16px; border-radius: 18px; }
}
@media (max-width: 640px) {
.btn, button { min-height: 42px; padding: 10px 14px; }
}
@media (max-width: 640px) {
.progress { width: 100%; max-width: 100%; }
}
@media (max-width: 640px) {
body { font-size: 1rem; line-height: 1.6; }
.card { overflow-wrap: anywhere; }
}
.btn.btn-primary, #upgrade-btn, #loginNowBtn { background: rgb(0, 7, 19) !important; color: rgb(250, 250, 255) !important; border-color: rgb(0, 24, 51) !important; }
footer a { color: rgb(250, 250, 255) !important; text-decoration-color: rgba(250, 250, 255, 0.7); }
@media (prefers-reduced-motion: reduce) {
.tech-bg animate { display: none !important; }
}
@keyframes tech-floatY {
0%, 100% { transform: translateY(-2px); }
50% { transform: translateY(2px); }
}
@keyframes tech-twinkle {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
.login-toast { position: fixed; top: 50%; left: 50%; z-index: 99999; transform: translate(-50%, -40%) scale(0.92); opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: 18px; background: color-mix(in srgb, var(--card, #020617) 80%, var(--cta, #38bdf8) 20%); border: 1px solid color-mix(in srgb, var(--border, #1f2937) 60%, var(--cta, #38bdf8) 40%); color: var(--ink, #e5e7eb); box-shadow: rgba(56, 189, 248, 0.25) 0px 0px 0px 1px, rgba(15, 23, 42, 0.65) 0px 18px 45px, rgba(56, 189, 248, 0.45) 0px 0px 36px; font-size: 1.05rem; letter-spacing: 0.02em; pointer-events: none; transition: opacity 0.35s ease-out, transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
@keyframes debug-pulse {
0% { transform: translateY(0px); box-shadow: rgba(59, 130, 246, 0.28) 0px 8px 24px; }
50% { transform: translateY(-2px); box-shadow: rgba(59, 130, 246, 0.45) 0px 14px 40px; }
100% { transform: translateY(0px); box-shadow: rgba(59, 130, 246, 0.28) 0px 8px 24px; }
}


/* =========================
   BASE LAYOUT + RAIL (DESKTOP)
   ========================= */

/* Desktop: content offset for the fixed top bar */
.site-shell {
  padding-top: 70px;
}

/* Desktop: collapse rail when body has .rail-collapsed */
body.rail-collapsed .rail {
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;
}

body.rail-collapsed .rail-open {
  display: inline-flex;
}

/* =========================
   LESSON STATE + BADGES
   ========================= */

#lessonList .lesson-item.locked {
  opacity: .55;
  filter: grayscale(.2);
  cursor: not-allowed;
}

.lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  margin-right: 6px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(148, 163, 184, .12);
  border: 1px solid rgba(148, 163, 184, .4);
}

.review-chip {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(34,197,94,.15);
  color: #bbf7d0;
  border: 1px solid rgba(34,197,94,.4);
}

#xpModal.xp-backdrop.show {
  display: flex;
}

/* Prevent hidden XP modal from eating clicks */
#xpModal.xp-backdrop:not(.show) {
  pointer-events: none !important;
}

/* Tech background should NEVER intercept taps */
.tech-bg,
.tech-bg * {
  pointer-events: none !important;
}

/* Rail overlay safety */
#rail-overlay[hidden] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================
   Login toast
   ========================= */

.login-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  transform: translate(-50%, -40%) scale(.92);
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--card, #020617) 80%, var(--cta, #38bdf8) 20%);
  border: 1px solid color-mix(in srgb, var(--border, #1f2937) 60%, var(--cta, #38bdf8) 40%);
  color: var(--ink, #e5e7eb);
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, .25),
    0 18px 45px rgba(15, 23, 42, .65),
    0 0 36px rgba(56, 189, 248, .45);
  font-size: 1.05rem;
  letter-spacing: .02em;
  pointer-events: none;
  transition:
    opacity .35s ease-out,
    transform .35s cubic-bezier(.18, .89, .32, 1.28);
}

.login-toast.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* ===================================================
   MOBILE (≤ 640px)
   All the “fix the chaos” stuff lives in ONE block
   =================================================== */

@media (max-width: 640px) {

  /* Prevent random horizontal scroll */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* 👇 KEY FIX: space between top bar and lessons */
  main,
  #lessonPage,
  .page,
  .page-content,
  .site-shell {
    padding-top: 80px !important; /* tweak 72–88px if needed */
  }

  /* Gentle spacing and full-width cards on small screens */
  .wrap,
  .container {
    padding: 12px !important;
  }

  .card {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 18px !important;
    margin: 10px 0 !important;
    overflow-wrap: anywhere;
  }

  /* Titles scale down and center */
  h1,
  .techy-title {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* -----------------------------
     MOBILE RAIL: slide-in drawer
     ----------------------------- */
@media (max-width: 640px) {
  .rail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;          /* full width */
    max-width: none;       /* no 360px cap */
    height: 100vh;
    background: var(--card);
    border-right: 1px solid var(--border);
    box-shadow: 0 0 24px rgba(0,0,0,.35);
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 10020;
    padding-top: 80px;     /* avoid topbar overlap */
    overflow-y: auto;
  }

  body.rail-open .rail {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


  /* Overlay (tap to close) */
  #rail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 10010;
  }

  body.rail-open #rail-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Prevent background scroll while rail is open */
  body.rail-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Floating "Lessons" open button */
  .rail-float-open {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 11000;
    background: var(--chip-bg);
    color: var(--chip-ink);
    border: 1px solid var(--border);
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .2px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: opacity .2s, transform .2s;
  }

  /* Hide the floater when rail is open */
  body.rail-open .rail-float-open {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
  }

  /* Close button inside rail */
  .rail-close-btn {
    position: sticky;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chip-bg);
    color: var(--chip-ink);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    cursor: pointer;
    z-index: 20;
  }

  /* When rail is open, everything inside should accept taps */
  body.rail-open #lessonRail,
  body.rail-open #lessonRail * {
    pointer-events: auto !important;
  }

  /* -----------------------------
     LESSON LIST: tappable + neat
     ----------------------------- */

  #lessonList,
  #lessonList .lesson-item,
  .list .item {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
  }

  /* Make everything inside lessonList clickable by default */
  #lessonList > * {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* …except things explicitly marked disabled/locked */
  #lessonList [aria-disabled="true"],
  #lessonList .locked,
  #lessonList .is-locked,
  #lessonList .disabled,
  #lessonList button:disabled,
  #lessonList a[disabled] {
    pointer-events: none !important;
    cursor: default !important;
    opacity: .6 !important;
  }

  /* Lesson card layout on mobile */
  .item.lesson-item {
    flex-direction: row;
    align-items: center;
    padding: 12px !important;
    gap: 12px !important;
  }

  .phase-badge {
    width: 60px !important;
    height: 80px !important;
  }

  /* Current/active lesson highlight */
  #lessonList .item[aria-current="true"],
  #lessonList .lesson-item[aria-current="true"],
  #lessonList [aria-current="page"],
  #lessonList .active,
  #lessonList .current,
  #lessonList button[aria-current="true"],
  #lessonList a[aria-current="true"],
  #phaseList .item[aria-current="true"] {
    border-color: var(--fx) !important;
    box-shadow: 0 0 0 1.5px var(--fx) inset !important;
    outline: none !important;
    background: rgba(59,130,246,0.08) !important;
  }

  /* Tap / focus feedback */
  #lessonList .lesson-item:active:not(.locked):not([aria-disabled="true"]),
  #lessonList .lesson-item:focus-visible:not(.locked):not([aria-disabled="true"]) {
    border-color: var(--fx) !important;
    box-shadow: 0 0 0 2px var(--fx) inset !important;
    background: rgba(59,130,246,.15) !important;
    outline: none !important;
  }

  /* XP modal mobile layout */
  #xpModal .xp-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }

  #xpModal .xp-card {
    width: 94vw !important;
    border-radius: 18px !important;
  }

  /* Playground mobile layout */
  .playground-wrap {
    margin-top: 14px !important;
  }

  .pg-shell {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch;
  }

  .pg-panel {
    width: 100% !important;
    padding: 12px 12px 14px !important;
  }

  .pg-ta {
    min-height: 140px !important;
    font-size: 0.95rem !important;
  }

  .pg-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Buttons bigger for tapping */
  button,
  .btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
  }
}
@media (max-width: 640px) {
  #lessonRail .wrap,
  #phaseRail .wrap,
  .rail .wrap {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
  }
}
/* ================================
   DESKTOP (≥ 961px) ONLY BEHAVIOR
   ================================ */
@media (min-width: 961px) {

  /* 1. Desktop uses its own Lessons button.
        Hide the mobile floating button on desktop. */
  #railOpen {
    display: none !important; /* mobile "Lessons" button */
  }

  /* 2. Desktop Lessons button: floating pill on the left */
  #railOpenDesktop {
    display: inline-flex !important;
    position: fixed;
    left: 24px;
    top: 120px;
    z-index: 2000;

    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--soft);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
  }

  /* When the rail is open on desktop, hide the floating button */
  body.desktop-rail-open #railOpenDesktop {
    display: none !important;
  }

  /* 3. Base lesson-shell layout on desktop:
        - closed: single column, full-width viewer
   */
  .lesson-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 64px;
    display: block !important; /* default = 1 column */
  }

  /* Viewer gets all the width when rail is closed */
  #viewer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Rail is hidden by default on desktop */
  #lessonRail {
    display: none !important;
  }

  /* Ensure old mobile / sticky / transform rules don't mess with desktop rail */
  #lessonRail.rail {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 320px;
  }

  /* 4. OPEN STATE: 2-column layout: rail + viewer side by side */
  body.desktop-rail-open .lesson-shell {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: flex-start;
  }

  /* Show the rail when open */
  body.desktop-rail-open #lessonRail {
    display: block !important;
  }

  /* Viewer just naturally takes the remaining space */
  body.desktop-rail-open #viewer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Desktop: do NOT use the mobile overlay behavior */
  #rail-overlay {
    opacity: 0;
    pointer-events: none;
  }
}
/* DESKTOP: move the X button to the side of the rail */
@media (min-width: 961px) {

  /* Make rail + inner card a positioning context and allow overflow */
  #lessonRail,
  #lessonRail .rail-card {
    position: relative;
    overflow: visible; /* so the button can stick out */
  }

  #lessonRail .rail-close-btn {
    position: absolute;
    top: 24px;
    left: calc(100% + 12px);  /* place it just to the right of the rail */
    margin: 0;

    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    /* keep your existing colors/borders if you already set them elsewhere */
  }
}
@media (min-width: 961px) {

  /* Ensure the rail allows overflow (so button can hang outside) */
  #lessonRail {
    position: relative;
    overflow: visible !important;
  }

  /* Remove sticky/mobile behavior */
  #railClose {
    position: absolute;
    top: 20px;
    left: calc(100% + 14px);  /* place it to the right edge of the rail */
    z-index: 5000;

    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Optional polish */
    background: var(--chip-bg);
    color: var(--chip-ink);
    border: 1px solid var(--border);
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
  }
}

/*Lesson Title and Difficulty Badge*/

.course-rail-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-rail-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.course-rail-chip {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-ink);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Tiny tweak for very small screens */
@media (max-width: 480px) {
  .course-rail-header {
    padding: 8px 10px;
    margin-bottom: 8px;
  }

  .course-rail-title {
    font-size: 0.85rem;
  }
  .course-rail-chip {
    font-size: 0.65rem;
    padding: 1px 6px;
  }
}
/* DESKTOP ONLY */
@media (min-width: 641px) {
  .course-rail-header .rail-close-btn {
    position: static !important;
    margin-top: 6px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 500;

    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(15, 23, 42, 0.9);
    color: var(--ink);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s ease;
  }

  .course-rail-header .rail-close-btn:hover {
    background: var(--soft);
    border-color: var(--fx-blue);
    color: var(--fx-blue);
    box-shadow: 0 0 0 1px var(--fx-blue);
  }
}

.tech-bg,
.tech-map,
.tech-hex,
.tech-glow,
.tech-particles {
  position: fixed !important;
  inset: 0 !important;
  z-index: -9999 !important;   /* FORCE behind everything */
  pointer-events: none !important;
}

/* FORCE toast above EVERYTHING */
#login-toast,
#logout-toast {
  position: fixed !important;
  z-index: 999999999 !important; /* nine 9s */
}

/* Cookie banner styles */

  .cookie-banner {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 90%;
    background: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #4b5563;
    font-size: 0.9rem;
    z-index: 9999;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  }
  .cookie-banner button {
    margin-right: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
  }
  #acceptCookies { background: #22c55e; color: #022c22; font-weight: 600; }
  #rejectCookies { background: #4b5563; color: #f3f4f6; }

  /* Streak toast styles */

.toast.streak-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  background: var(--card);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow);
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  z-index: 1200;
}
.toast.streak-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Global streak badge – top-left under nav */
.streak-badge {
  position: fixed;
  left: 1rem;
  top: 4.25rem; /* sits just under your navbar */
  z-index: 1100;

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  padding: 0.35rem 0.75rem;
  border-radius: 999px;

  background: rgba(15, 22, 37, 0.95); /* var(--card) vibe */
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 160ms ease-out,
    transform 160ms ease-out;
}

.streak-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.streak-badge .streak-emoji {
  font-size: 1rem;
}

.streak-badge .streak-text {
  white-space: nowrap;
}

/* Slightly nudge position on big screens if you want */
@media (min-width: 1024px) {
  .streak-badge {
    left: 1.5rem;
    top: 4.5rem;
  }
}

/* Utility */
.hidden {
  display: none !important;
}
.streak-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.streak-badge.hidden {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
/* Streak toast styles */

.toast.streak-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  background: var(--card);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow);
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  z-index: 1200;
}
.toast.streak-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Global streak badge – top-left under nav */
/* Global Streak + XP container – fixed under nav */
#streak-container {
  position: fixed;
  top: 4.25rem;   /* just under your navbar */
  left: 1rem;
  z-index: 1100;

  display: flex;
  align-items: center;
  gap: 0.5rem;    /* space between streak + XP */
}

/* Streak badge pill */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  padding: 0.35rem 0.75rem;
  border-radius: 999px;

  background: rgba(15, 22, 37, 0.95); /* var(--card) vibe */
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 160ms ease-out,
    transform 160ms ease-out;
}

.streak-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.streak-badge .streak-emoji {
  font-size: 1rem;
}

.streak-badge .streak-text {
  white-space: nowrap;
}

/* Utility hidden */
.hidden {
  display: none !important;
}

/* Slightly nudge position on big screens if you want */
@media (min-width: 1024px) {
  .streak-badge {
    left: 1.5rem;
    top: 4.5rem;
  }
}

/* Utility */
.hidden {
  display: none !important;
}
.streak-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.streak-badge.hidden {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
/* Global Streak + XP container – fixed under nav, top-right */
#streak-container {
  position: fixed;
  top: 4.25rem;      /* just under navbar */
  right: 1rem;       /* move to right side */
  left: auto;
  z-index: 1100;

  display: flex;
  align-items: center;
  gap: 0.5rem;       /* space between streak + XP */
}
/* Global Streak + XP container – full row under nav */
#streak-container {
  position: fixed;
  top: 4.6rem;           /* just under navbar */
  left: 0;
  right: 0;
  z-index: 950;          /* below nav (1000), above content */

  display: flex;
  align-items: center;
  justify-content: space-between;  /* streak left, XP right */
  padding: 0 1.25rem;   /* match page padding */
}
/* Desktop: keep streak + XP aligned with main content width */
@media (min-width: 980px) {
  #streak-container {
    max-width: 1120px;        /* match your site shell width */
    margin: 0 auto;           /* center it */
    padding-left: 1.25rem;    /* same as your SiteShell left padding */
    padding-right: 1.25rem;   /* same as your SiteShell right padding */
  }
}


@media (max-width: 640px) {
  #streak-container {
    top: 4.1rem;
    padding: 0 0.9rem;
  }
  

  .streak-badge {
    max-width: 70%;
  }

  #xp-total-pill {
    flex-shrink: 0;
  }
}
/* XP pill specific styling */
#xp-total-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.35rem 0.75rem;
  border-radius: 999px;

  background: rgba(15, 22, 37, 0.95);   /* match streak badge / card vibe */
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Centered Course Cap Toast (modal-ish) */
.cap-toast{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 999999 !important;
  background: rgba(2,6,23,.55) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.cap-toast.show{
  opacity: 1;
  pointer-events: auto;
}

.cap-toast__card{
  width: min(560px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.cap-toast__title{
  font-weight: 800;
  margin-bottom: 6px;
}

.cap-toast__sub{
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

.cap-toast__actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}