/* CODEYA motion and surface system. No runtime library or image download. */
:root {
  --bg: #080d19;
  --side: #0c1220;
  --panel: #111a2b;
  --panel2: #19243a;
  --line: #27344c;
  --text: #edf3ff;
  --muted: #a4b1c9;
  --purple: #b5a1ff;
  --purple-soft: #a18af51c;
  --green: #8ce2c1;
  --orange: #f1c38d;
  --red: #ffa9b9;
  --cyan: #76def4;
  --surface-glow: #a993ff18;
  --ease-out: cubic-bezier(.2,.75,.25,1);
  --duration-fast: 160ms;
  --duration-enter: 450ms;
}

body {
  background-image: radial-gradient(ellipse at 70% 0%, #49347c1a 0%, transparent 48%), radial-gradient(ellipse at 5% 45%, #11667e0d 0%, transparent 50%);
  background-attachment: fixed;
}
.sidebar {
  background: linear-gradient(180deg, #101729, var(--side) 50%, #0c1220);
  box-shadow: 12px 0 45px #0000000c;
}
.brand { letter-spacing: -1.2px; }
.brand-logo {
  position: relative;
  background: linear-gradient(135deg, #c3a9ff, #9678ed 60%, #72cfe7);
  box-shadow: 0 5px 20px #a087ee26, inset 0 1px 0 #ffffff5c;
  animation: codeya-logo-glow 7s ease-in-out infinite;
}
.brand-logo svg { transition: transform 300ms var(--ease-out); }
.brand:hover .brand-logo svg { transform: rotate(-9deg) scale(1.08); }
.brand em { color: var(--cyan); }
.nav-heading { color: #8798b4; font-size: 9px; letter-spacing: 1.9px; }
.nav-btn {
  position: relative;
  color: #b1bed2;
  min-height: 43px;
  transition: color var(--duration-fast), background var(--duration-fast), transform 220ms var(--ease-out);
}
.nav-btn:hover { background: #b29dff0a; transform: translateX(3px); }
.nav-btn.active {
  background: linear-gradient(90deg, #a895f324, #a895f309);
  color: #d0c1ff;
  box-shadow: inset 2px 0 #b8a2ff;
}
.nav-btn.active:after { background: var(--cyan); box-shadow: 0 0 9px #76def44d; }
.sidebar-note { background: linear-gradient(135deg, #22243b, #131d2d); border-color: #3a3c58; }
.user-mini { border-top-color: var(--line); }
.avatar { color: #e5d6ff; background: linear-gradient(135deg, #382e56, #27374a); border-color: #5b537b; }
.topbar { background: #0c1220b3; border-bottom-color: #27344c99; }
#breadcrumb strong { color: #d3def1; }
#breadcrumb span { color: #6d7d99; }
.save-status { color: #a6b6c9; }
.save-status i { background: var(--green); }
.icon-btn { transition: color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
.icon-btn:hover { transform: translateY(-1px); }
main { padding-top: 37px; }
.page-intro h1 { font-size: clamp(25px, 2.1vw, 33px); letter-spacing: -.9px; }
.page-intro p { color: #a6b3ca; }
.date-chip { background: #131d2d; border-color: #2b3a53; color: #bac9de; }
.eyebrow { color: #bca9ff; }
.fade-in { animation: codeya-section-enter 360ms var(--ease-out) both; }

/* The main scene uses two moving composited layers, not a particle canvas. */
.hero-grid { gap: 20px; }
.hero {
  min-height: 332px;
  padding: 36px;
  border-radius: 19px;
  border-color: #69528e78;
  background: radial-gradient(ellipse at 95% 20%, #4a479543, transparent 55%), linear-gradient(120deg, #231d3a, #17223b 66%, #102b38);
  box-shadow: inset 0 1px 0 #d7caff14, 0 18px 70px #00000018;
  isolation: isolate;
}
.hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 270px;
  height: 270px;
  top: -145px;
  right: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, #ba94ff38, #ba94ff00 70%);
  animation: codeya-ambient-light 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .65;
  background: linear-gradient(125deg, transparent 70%, #76def40b);
}
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-particles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; left: calc(47% + var(--i) * 6%); top: calc(11% + var(--i) * 9%); background: #c9afff; opacity: .4; animation: codeya-particle-dot calc(10s + var(--i) * 1s) ease-in-out calc(var(--i) * -1s) infinite alternate; }
.hero-particles i:nth-child(2n) { background: #83e1ed; width: 2px; height: 2px; }
.hero-copy { width: 65%; }
.hero .eyebrow { font-size: 9px; letter-spacing: 1.9px; color: #c5b3ff; }
.hero h2 {
  font-size: clamp(31px, 2.9vw, 47px);
  line-height: 1.12;
  letter-spacing: -1.7px;
  margin: 20px 0 16px;
  animation: codeya-text-enter 650ms var(--ease-out) both;
}
.hero h2 span {
  color: #cbb8ff;
  background: linear-gradient(100deg, #c7b1ff, #b5b4ff 56%, #86e4ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p { font-size: 12px; color: #bac5de; max-width: 330px; margin-bottom: 25px; }
.hero-art { width: 41%; opacity: .95; }
.art-dots { opacity: .55; }
.orbit { border-color: #c2adff18; top: 45px; }
.orbit.o2 { top: 0; border-color: #7ad9e91c; }
.floating-bracket { color: #bba0f277; top: 39px; right: 19px; font-size: 49px; }
.code-float {
  top: 104px;
  left: 4px;
  border-color: #756293;
  background: #101b2dec;
  box-shadow: 0 25px 44px #050b2080, inset 0 1px 0 #ffffff0a;
  border-radius: 12px;
  padding: 15px;
  animation-duration: 9s;
}
.code-float pre { color: #d2ddf4; font-size: 10px; }
.code-chip { bottom: 43px; background: #1d3246f2; border-color: #476f88; color: #9ce5f3; }
.btn {
  border-radius: 9px;
  font-weight: 550;
  transition: transform 200ms var(--ease-out), border-color var(--duration-fast), background var(--duration-fast), box-shadow 200ms var(--ease-out);
}
.btn:hover:not(:disabled) { background: #26344d; border-color: #5d5a81; transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }
.btn-primary {
  background: linear-gradient(115deg, #c4b0ff, #a996ee 62%, #98b8ed);
  border-color: #c1aff7;
  color: #131d30;
  box-shadow: 0 4px 15px #a994ed24, inset 0 1px 0 #ffffff4f;
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(115deg, #d2c2ff, #b8a5f8 62%, #aecdf6); border-color: #ded3ff; box-shadow: 0 8px 24px #ad96f033; }
.hero .btn-primary { min-height: 44px; padding: 12px 17px; font-size: 12px; }
.hero .btn-primary svg:last-child { transition: transform 200ms var(--ease-out); }
.hero .btn-primary:hover svg:last-child { transform: translateX(3px); }
.btn:focus-visible, .icon-btn:focus-visible, .nav-btn:focus-visible, .journey-node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.panel, .track-card, .stat, .goal-card { background: linear-gradient(145deg, #142035, #10192b 80%); border-color: #2b3950; box-shadow: inset 0 1px 0 #d7e2ff08; }
.goal-card { border-radius: 17px; padding: 26px 21px; }
.card-heading { color: #dce6f9; }
.goal-ring { width: 73px; height: 73px; box-shadow: 0 0 25px #a48ff00b; }
.goal-ring:before { background: #142035; }
.goal-ring span { font-size: 20px; }
.goal-top { margin: 23px 0 20px; }
.goal-item { color: #bfcee1; font-size: 11px; margin-bottom: 12px; }
.goal-caption { color: #a0adc3; }
.goal-item input, .check input { width: 15px; height: 15px; transition: transform 150ms var(--ease-out); }
.goal-item input:checked, .check input:checked { animation: codeya-check 280ms var(--ease-out); }
.stats-row { gap: 16px; margin-top: 25px; }
.stat { border-radius: 12px; padding: 18px; transition: border-color 220ms, transform 220ms var(--ease-out); }
.stat:hover { border-color: #675887; transform: translateY(-2px); }
.stat-icon { width: 41px; height: 41px; background: #b39aff12; border: 1px solid #b39aff16; border-radius: 12px; }
.stat:nth-child(2) .stat-icon { color: var(--cyan); background: #76def40d; border-color: #76def424; }
.stat:nth-child(3) .stat-icon { color: var(--orange); background: #f1c38d0d; border-color: #f1c38d24; }
.stat strong, .games-score, .goal-ring span, .game-variable-box strong { font-variant-numeric: tabular-nums; }
.stat strong { font-size: 26px; letter-spacing: -.7px; }
.stat p { color: #a6b4cb; }
.stat-aside { background: #8ce2c109; color: #a7ddc9; }
.section-heading h2 { letter-spacing: -.5px; }
.track-grid { gap: 17px; }
.track-card { border-radius: 15px; transition: transform 300ms var(--ease-out), border-color 240ms, box-shadow 240ms; }
.track-card:hover { transform: translateY(-5px); border-color: #9b83c5; box-shadow: 0 15px 35px #0000001f, inset 0 1px 0 #ffffff0b; }
.track-art { height: 130px; background: radial-gradient(ellipse at 50% 120%, #7657c047, transparent 70%), #211d36; color: #c5acf8; }
.track-card.c .track-art { background: radial-gradient(ellipse at 50% 120%, #387d943d, transparent 70%), #142d38; color: #9ddfeb; }
.track-card.math .track-art { background: radial-gradient(ellipse at 50% 120%, #9b724439, transparent 70%), #2e2530; color: #edc197; }
.track-art svg { transition: transform 400ms var(--ease-out); }
.track-card:hover .track-art svg { transform: translateY(-3px) scale(1.04); }
.track-body { padding: 21px; }
.track-body h3 { font-size: 19px; }
.track-body > p { font-size: 11px; color: #a6b5cc; }
.track-meta, .progress-label { color: #a5b2c6; }
.progress-bar { background: #28354a; height: 5px; }
.progress-bar i { background: linear-gradient(90deg, #9070e9, #c4b0ff); box-shadow: 0 0 11px #ba9aff33; transition: width 600ms var(--ease-out); }
.c .progress-bar i { background: linear-gradient(90deg, #58b9c7, #9ceadf); }
.math .progress-bar i { background: linear-gradient(90deg, #d6a171, #f1cfad); }
.track-open { color: #d0c1f2; min-height: 40px; }
.c .track-open { color: #a2e1e6; }
.challenge { border-color: #4f466b; background: linear-gradient(115deg, #1e2240, #142135); }
.challenge-icon { background: #b39aff11; border-color: #a992f631; }
.tip { background: linear-gradient(145deg, #282433, #1d2530); border-color: #514553; }
.tip p { color: #d2c9bc; }
.tip small { color: #b2a795; }
.achievement { border-radius: 13px; transition: transform 220ms var(--ease-out), border-color 180ms; }
.achievement.earned { background: linear-gradient(145deg, #272744, #162a39); border-color: #80689d; color: #d1befe; }
.achievement.earned:hover { transform: translateY(-3px); }
.achievement.earned > svg { color: #d9bcff; filter: drop-shadow(0 0 7px #c4a8ff33); }
.badge { border-radius: 6px; color: #adbed5; background: #1b2840; border-color: #34435d; }
.badge.purple { color: #d0bdff; border-color: #8e72bc5e; background: #a38aec14; }
.badge.green { color: #a7e7ce; border-color: #72bba256; background: #67c7a70d; }

/* Journey states come from actual curriculum progress. No artificial locks. */
.journey-map { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; counter-reset: journey; padding: 21px 0 8px; position: relative; }
.journey-node {
  position: relative; isolation: isolate; min-width: 0; min-height: 135px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  border: 1px solid var(--line); border-radius: 13px; padding: 18px; text-align: left; color: var(--text); background: linear-gradient(150deg,#17213a,#111c2f); cursor: pointer;
  transition: transform 240ms var(--ease-out), border-color 220ms, background 220ms, box-shadow 220ms;
}
.journey-node:before { counter-increment: journey; content: counter(journey,decimal-leading-zero); display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 3px; border: 1px solid #7562947a; border-radius: 10px; background: #b298ee0b; color: #cbb4fb; font: 11px var(--mono); }
.journey-node:not(:nth-child(4n)):after { content: ""; position: absolute; width: 18px; height: 2px; top: 33px; right: -19px; background: linear-gradient(90deg,#66527e,#3c4963); pointer-events: none; }
.journey-node:hover { transform: translateY(-3px); border-color: #9b80cb; background: linear-gradient(150deg,#242842,#17233b); }
.journey-node strong, .journey-node h3 { font-family: var(--display); font-size: 13px; line-height: 1.45; }
.journey-node p, .journey-node small { font-size: 10px; color: var(--muted); line-height: 1.65; }
.journey-node.complete { border-color: #509a8e83; background: linear-gradient(145deg,#172e35,#122332); }
.journey-node.complete:before { content: "✓"; color: #a0eed9; border-color: #69b7a591; background: #8ce2c10d; }
.journey-node.complete:after { background: linear-gradient(90deg,#71b9aa,#6f8a92); }
.journey-node.recommended { border-color: #b498e8; box-shadow: 0 0 0 3px #b59af60b, 0 8px 20px #a489f00b; }
.journey-node.recommended:before { border-color: #c3a7f8; background: #ba9cec1c; box-shadow: 0 0 20px #c6aaff17; }
.journey-node.locked { opacity: .7; }
.journey-node.available { color: var(--text); }
.journey-node:before, .journey-node.complete:before { content: none; }
.journey-index { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 3px; border: 1px solid #7562947a; border-radius: 10px; background: #b298ee0b; color: #cbb4fb; font: 11px var(--mono); }
.journey-node.complete .journey-index { color: #a0eed9; border-color: #69b7a591; background: #8ce2c10d; }
.journey-node.recommended .journey-index { border-color: #c3a7f8; background: #ba9cec1c; box-shadow: 0 0 20px #c6aaff17; }
.journey-connection { height: 2px; border: 0; background: linear-gradient(90deg,#6a5790,#5d8d9d); transform-origin: left; animation: codeya-connect 550ms var(--ease-out) both; }
.chapter-row { border-radius: 11px; transition: background 180ms, border-color 180ms, transform 220ms var(--ease-out); }
.chapter-row:hover { background: #17243a; border-color: #4b5a77; transform: translateX(2px); }
.chapter-row.completed { background: linear-gradient(110deg,#12313644,#122131); border-color: #477d7673; }
.chapter-row.completed .chapter-num { color: #92e3c8; }
.summary-unlock { border-color: #6d5d8878; background: #a18af506; }
.tabs { border-color: #35425a; gap: 26px; }
.tab { position: relative; transition: color 160ms, border-color 180ms; min-height: 44px; }
.tab:hover { color: #d4c5f7; }
.tab.active { color: #c6acfa; border-bottom-color: #ad92ec; }
.tab.active:before { content: ""; position: absolute; inset: auto 0 0; height: 14px; pointer-events: none; background: linear-gradient(transparent,#b399ee0b); }
.compare-grid { border-radius: 13px; border-color: #3a435d; }
.compare-label { color: #c7b0fa; background: #1c2940; }
.compare-grid pre, .code-block { background: #0a1322; color: #d4dff3; border-color: #2a3b56; }
.lesson-prose p { color: #b9c7db; }
.lesson-prose h2 { color: #edf3ff; }
.objective-card { background: linear-gradient(145deg,#1a263f,#131d30); border-color: #41516c; }
.darija { background: #f1c38d08; border-left-color: #dfb987; }
.darija p { color: #d4c7b6; }
.common-errors h3 { color: #efc393; }
.quiz-option { transition: border-color 180ms, background 180ms, transform 180ms var(--ease-out); }
.quiz-option:hover { border-color: #7d6b9d; background: #1a2640; transform: translateX(2px); }
.quiz-option:has(input:checked) { border-color: #b49be9; background: #a18af511; }
.quiz-feedback.correct, .game-feedback.success { animation: codeya-success-in 400ms var(--ease-out) both; }
.quiz-feedback.correct { color: #a9e9cf; background: #76c9ab10; border: 1px solid #71b89e3d; }
.hint { background: #9a7df30e; border-color: #ac92ef; color: #d2c5f5; }
.saved-label { color: #a0d4c2; }
.exercise-card, .quiz-q { border-radius: 14px; }
input:focus, textarea:focus, select:focus { border-color: #b49be9; outline: 2px solid #b49be930; }

.mission-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 20px 0 28px; }
.mission-card { padding: 19px; border: 1px solid #394561; border-radius: 13px; background: linear-gradient(130deg,#1b2540,#132133); min-width: 0; position: relative; overflow: hidden; }
.mission-card h3 { font-size: 14px; margin: 9px 0 6px; }
.mission-card p, .mission-card small { color: var(--muted); font-size: 11px; }
.mission-card strong { color: #cdb6ff; }
.mission-card .badge { font-size: 9px; }
.mission-card.complete { border-color: #6da896; background: linear-gradient(130deg,#183238,#142837); }
.mission-card.complete strong { color: #a8e7cd; }
.mission-card.complete:after { content: "✓"; position: absolute; right: 15px; top: 13px; color: #9ae1c8; font-size: 19px; }
.mission-card .progress-bar { margin-top: 13px; }
.mission-card .btn { margin-top: 13px; }
.mission-track { display: block; margin: 14px 0 10px; height: 5px; border-radius: 5px; background: #29364c; overflow: hidden; }
.mission-track > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9476da,#abdcf2); transition: width 550ms var(--ease-out); }
.mission-card.complete .mission-track > i { background: linear-gradient(90deg,#65bda7,#a5dfce); }

/* Rewards sit outside navigation and never capture pointer input. */
.reward-overlay { position: fixed; z-index: 95; bottom: 29px; right: 29px; pointer-events: none; max-width: min(385px,calc(100vw - 36px)); visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity 200ms, transform 250ms var(--ease-out), visibility 200ms; }
.reward-overlay.visible { visibility: visible; opacity: 1; transform: translateY(0); }
.reward-card { position: relative; overflow: hidden; border: 1px solid #a78ace; border-radius: 17px; padding: 23px 25px; background: linear-gradient(125deg,#292547f5,#153641f5); color: #eaf3ff; box-shadow: 0 15px 60px #02071570,inset 0 1px 0 #f2e7ff26; animation: codeya-reward-in 500ms var(--ease-out) both; }
.reward-card h2, .reward-card h3 { font-size: 20px; margin: 8px 0; color: #f2ecff; }
.reward-card p { color: #bcd5e2; font-size: 12px; }
.reward-card strong { color: #bdece6; font-variant-numeric: tabular-nums; }
.reward-card .reward-xp { font: 25px var(--display); color: #d9c7ff; }
.reward-card > .reward-kicker { display: block; font: 9px var(--mono); letter-spacing: 1.5px; color: #a7e4e7; margin-bottom: 10px; }
.reward-card > strong { display: block; font: 600 20px/1.3 var(--display); color: #eadcff; margin-bottom: 9px; }
.reward-confetti { position: absolute; pointer-events: none; width: 5px; height: 8px; top: -6px; left: calc(8% + var(--i) * 10%); background: #c8acff; border-radius: 1px; animation: codeya-confetti 900ms var(--ease-out) calc(var(--i) * 25ms) both; }
.reward-confetti:nth-child(2n) { background: #8ae3df; }
.reward-confetti:nth-child(3n) { background: #f1c38d; }
.reward-confetti i { --x: 0; --delay: 0ms; position: absolute; width: 5px; height: 8px; left: calc(50% + var(--x) * 1px); top: 22px; background: #c8acff; border-radius: 1px; animation: codeya-confetti 850ms var(--ease-out) var(--delay) both; }
.reward-confetti i:nth-child(2n) { background: #8ae3df; transform: rotate(24deg); }
.reward-confetti i:nth-child(3n) { background: #f1c38d; }
.reward-confetti i:nth-child(1) { --x: -90; --delay: 10ms; }
.reward-confetti i:nth-child(2) { --x: -63; --delay: 90ms; }
.reward-confetti i:nth-child(3) { --x: -36; --delay: 40ms; }
.reward-confetti i:nth-child(4) { --x: -9; --delay: 110ms; }
.reward-confetti i:nth-child(5) { --x: 18; --delay: 50ms; }
.reward-confetti i:nth-child(6) { --x: 45; --delay: 120ms; }
.reward-confetti i:nth-child(7) { --x: 72; --delay: 70ms; }
.reward-confetti i:nth-child(8) { --x: 99; --delay: 20ms; }
.toast { background: linear-gradient(120deg,#312b4b,#183342); border-color: #8971ab; color: #e5e7ff; box-shadow: 0 8px 30px #00000035; }

/* Increased specificity keeps this stylesheet above module-injected rules. */
body .games-v2 { gap: 24px; }
body .games-v2 .games-picker { gap: 12px; }
body .games-v2 .games-pick { border-radius: 12px; background: linear-gradient(140deg,#162039,#111c2e); padding: 17px 14px; transition: transform 240ms var(--ease-out), border-color 180ms, background 180ms; }
body .games-v2 .games-pick:hover { border-color: #9176b5; transform: translateY(-3px); }
body .games-v2 .games-pick[aria-pressed="true"] { background: linear-gradient(135deg,#302645,#172c40); border-color: #b197df; box-shadow: inset 0 1px 0 #dcc6ff16; }
body .games-v2 .games-symbol { width: 33px; height: 33px; border-radius: 10px; color: #c8b0f7; background: #b096e916; border: 1px solid #ae94db25; }
body .games-v2 .games-pick strong { color: #e0e8f7; font-size: 11px; }
body .games-v2 .games-pick small { color: #afbdd1; }
body .games-v2 .game-workspace { border: 1px solid #3f4c67; border-radius: 17px; background: linear-gradient(135deg,#172239,#101b2f); animation: codeya-section-enter 320ms var(--ease-out) both; }
body .games-v2 .game-work-head h3 { font-size: 25px; }
body .games-v2 .game-level-btn { min-width: 33px; min-height: 33px; border-radius: 9px; transition: background 180ms,border-color 180ms,transform 180ms; }
body .games-v2 .game-level-btn[aria-current="step"] { background: #b096e91b; border-color: #b49be9; color: #d8c5ff; }
body .games-v2 .game-level-btn.done { border-color: #65a291; background: #8ce2c10a; }
body .games-v2 .game-level-btn:hover { transform: translateY(-2px); }
body .games-v2 .game-code-v2 { background: #0a1425; border-color: #34435e; border-radius: 12px; color: #d7e3f5; }
body .games-v2 .game-choice { border-radius: 10px; background: #101c30; border-color: #344560; padding: 16px; transition: border-color 180ms,background 180ms,transform 180ms var(--ease-out); }
body .games-v2 .game-choice:hover:not(:disabled) { transform: translateY(-2px); border-color: #ad93d9; background: #1a2740; }
body .games-v2 .game-choice.correct { background: #1b3637; border-color: #6bc6a8; color: #c4f2de; animation: codeya-check 300ms var(--ease-out); }
body .games-v2 .game-choice.wrong { background: #38273b; border-color: #c4829c; color: #f3c3d0; }
body .games-v2 .game-feedback { border-color: #9d82cc; background: #a18af510; color: #d4c9eb; border-radius: 0 10px 10px 0; }
body .games-v2 .game-feedback.success { border-color: #8ce2c1; background: #8ce2c10d; color: #b3e7d3; }
body .games-v2 .game-memory-cell { background: #111f34; border-radius: 12px; border-color: #364960; transition: border-color 180ms,background 180ms,transform 180ms; }
body .games-v2 .game-memory-cell:hover { transform: translateY(-2px); border-color: #8bcddb; }
body .games-v2 .game-memory-cell[aria-pressed="true"] { background: #21324b; border-color: #90d3df; }
body .games-v2 .game-memory-cell strong { color: #a3e2ed; }
body .games-v2 .game-variable-box { background: #0d1a2d; border-color: #3b4967; border-radius: 12px; }
body .games-v2 .game-variable-box strong { color: #cbb1fc; }
body .games-v2 .game-order-row { background: #111e33; border-color: #334560; border-radius: 10px; }
body .games-v2 .game-order-actions button { background: #20314b; }
body .games-v2 .game-hint { color: #e5c49c; }
body .games-v2 .games-help, body .games-v2 .game-save-note, body .games-v2 .game-score-detail { color: #a7b8cf; }

body .lab-ide { border-color: #3b4c69; border-radius: 15px; box-shadow: 0 15px 45px #0000001f; }
body .lab-titlebar { background: #152038; color: #a9b9d1; padding: 15px 19px; }
body .lab-toolbar { background: #101c31; border-color: #30415d; }
body .lab-files { background: #101a2c; border-color: #34445f; }
body .lab-file { border-radius: 8px 8px 0 0; transition: background 160ms,color 160ms; }
body .lab-file.active { background: #24314a; color: #c8b2ff; border-color: #b299e8; }
body .lab-file-add { color: #a9d8e6; }
body .lab-file-tools { background: #17243a; color: #a4b7ce; border-color: #30435b; }
body .lab-bottom { background: #101a2c; border-color: #34445f; }
body .lab-input-zone { border-color: #34445f; }
body .lab-label { color: #acbed7; }
body .lab-terminal { background: radial-gradient(ellipse at top right,#24504a0a,transparent 70%),#0b1727; }
body .lab-output { color: #aee3ca; font-size: 12px; line-height: 1.85; }
body .lab-output.is-error { color: #ffc1c8; }
body .lab-status { background: #1b3540; color: #bbdcd8; }
body .lab-key-hints { color: #9faec6; line-height: 1.9; }
body .lab-help { border-color: #35445f; background: #111c30; border-radius: 10px; }
body .lab-help summary { color: #c1b3e3; }
body .lab-help p, body .lab-note { color: #a5b6cd; }
body .lab-key-hints, body .lab-file-backups { font-size: 10px; }
body .lab-stdin-notice { background: #3a342e; border-color: #bd9b6973; border-left-color: #dab77e; color: #f1d3a9; }
body .lab-stdin-notice p { color: #f1d3a9; }
.modal { border-color: #56617c; background: #152137; }
.modal-backdrop { background: #030712bd; backdrop-filter: blur(4px); }
.footer { color: #97a6bd; border-color: #26344a; }
.footer b { color: #b8c8e1; }

/* Light mode has its own surfaces and text colors, not an inverted dark palette. */
body.light {
  --bg: #f3f6fc;
  --side: #ffffff;
  --panel: #ffffff;
  --panel2: #e9eef9;
  --line: #d4ddef;
  --text: #18283e;
  --muted: #5c6e89;
  --purple: #7351b2;
  --purple-soft: #8360c60d;
  --green: #26785f;
  --orange: #94602f;
  --red: #ad3e5b;
  --cyan: #146e83;
  background-image: radial-gradient(ellipse at 70% 0%,#dacef93a,transparent 48%),radial-gradient(ellipse at 5% 45%,#d9f1fa40,transparent 50%);
}
.light .sidebar { background: linear-gradient(180deg,#fff,#f9fbff); }
.light .topbar { background: #ffffffa8; }
.light .nav-heading { color: #6f7c93; }
.light .nav-btn { color: #596981; }
.light .nav-btn:hover { background: #eee9f740; }
.light .nav-btn.active { background: linear-gradient(90deg,#e8e2f6,#f2f2fb); color: #6b47a5; box-shadow: inset 2px 0 #9777c2; }
.light .nav-btn.active:after { background: #408ba6; }
.light .sidebar-note { background: linear-gradient(135deg,#f1eaf9,#edf4fb); border-color: #d8d5e7; }
.light .avatar { background: #e6ddf6; color: #644b88; border-color: #cdbfe0; }
.light #breadcrumb strong { color: #3f526d; }
.light #breadcrumb span { color: #8794aa; }
.light .save-status, .light .page-intro p { color: #60728c; }
.light .date-chip { background: #fff; color: #5d708b; border-color: #d3def0; }
.light .eyebrow { color: #7052a4; }
.light .hero { background: radial-gradient(ellipse at 95% 20%,#b6dff043,transparent 55%),linear-gradient(120deg,#eae1fc,#e7eefc 66%,#dff2f5); border-color: #ccbee5; }
.light .hero .eyebrow { color: #7653a6; }
.light .hero h2 span { color: #7553af; background: linear-gradient(100deg,#8053b9,#7557b0 56%,#277f92); -webkit-background-clip: text; background-clip: text; }
.light .hero p { color: #596b86; }
.light .hero .code-float { background: #15263bec; }
.light .hero .code-chip { color: #a5dbe8; background: #254258f2; }
.light .btn { background: #eaf0f9; border-color: #cfdbef; }
.light .btn:hover:not(:disabled) { background: #dfe7f5; border-color: #b8a8d0; }
.light .btn-primary { background: linear-gradient(115deg,#e0d3fd,#cdbbeb 62%,#bcd7f1); color: #25314b; border-color: #b7a1d3; }
.light .btn-primary:hover:not(:disabled) { background: linear-gradient(115deg,#d7c6fb,#c0aadd 62%,#adcae9); }
.light .panel, .light .track-card, .light .stat, .light .goal-card { background: linear-gradient(145deg,#fff,#f8faff); border-color: #d2dced; box-shadow: 0 7px 20px #293b5704; }
.light .goal-ring:before { background: #fcfdff; }
.light .card-heading, .light .goal-item { color: #465b76; }
.light .goal-caption { color: #677991; }
.light .stat p { color: #60738d; }
.light .stat-icon { background: #eee6fa; border-color: #d7c6eb; }
.light .stat:nth-child(2) .stat-icon { background: #e5f3f8; border-color: #bfdfeb; }
.light .stat:nth-child(3) .stat-icon { background: #f9edde; border-color: #ead1b2; }
.light .stat-aside { color: #307d69; background: #eaf6ef; }
.light .track-body > p, .light .track-meta, .light .progress-label { color: #62758f; }
.light .progress-bar { background: #e0e7f3; }
.light .progress-label b { color: #7351a5; }
.light .track-open { color: #7351a5; }
.light .c .track-open { color: #317f8b; }
.light .math .track-open { color: #916238; }
.light .challenge { background: linear-gradient(115deg,#efe9fb,#ecf4fd); border-color: #d4c9ea; }
.light .tip { background: linear-gradient(145deg,#fff9f0,#f9f6f1); border-color: #e3d2ba; }
.light .tip p { color: #786349; }
.light .tip small { color: #8e795e; }
.light .achievement.earned { background: linear-gradient(145deg,#efe7fa,#eaf5f6); border-color: #bda6d8; color: #6d4d99; }
.light .achievement.earned > svg { color: #7c54a8; }
.light .badge { color: #536a86; background: #edf2fb; border-color: #d0dcef; }
.light .badge.purple { color: #7852a6; background: #f1eafa; border-color: #d2bee7; }
.light .badge.green { color: #2e7862; background: #edf8f1; border-color: #b9ddcc; }
.light .journey-node { background: linear-gradient(150deg,#fff,#f4f7ff); border-color: #d4dced; }
.light .journey-node:before { border-color: #c8b8de; color: #7954a9; background: #f1ebf8; }
.light .journey-node:not(:nth-child(4n)):after { background: #c8d3e6; }
.light .journey-node:hover { background: #f2eef9; border-color: #bca2d7; }
.light .journey-node.complete { background: linear-gradient(145deg,#eff8f3,#f5fbfc); border-color: #a2d0be; }
.light .journey-node.complete:before { background: #e6f4ed; color: #367d65; border-color: #90bea9; }
.light .journey-node.complete:after { background: #9fc5b9; }
.light .journey-node.recommended { border-color: #ad90d0; box-shadow: 0 0 0 3px #8d6fb70a; }
.light .journey-index { border-color: #c8b8de; color: #7954a9; background: #f1ebf8; }
.light .journey-node.complete .journey-index { background: #e6f4ed; color: #367d65; border-color: #90bea9; }
.light .journey-node.recommended .journey-index { border-color: #ac8dcd; }
.light .chapter-row:hover { background: #f3f6fd; border-color: #b9c8e3; }
.light .chapter-row.completed { background: linear-gradient(110deg,#eef8f3,#f8fbff); border-color: #b3d5c6; }
.light .chapter-row.completed .chapter-num { color: #34866a; }
.light .tab:hover, .light .tab.active { color: #7750a9; }
.light .compare-label { background: #eaf0fa; color: #6d4e9e; }
.light .compare-grid pre, .light .code-block { color: #344a69; background: #f0f4fb; border-color: #d6e0ef; }
.light .lesson-prose p { color: #516681; }
.light .lesson-prose h2 { color: #24384f; }
.light .objective-card { background: linear-gradient(145deg,#fff,#f4f7fe); border-color: #cbd8ec; }
.light .darija { background: #f7ebd650; }
.light .darija p { color: #78644d; }
.light .common-errors h3 { color: #966734; }
.light .quiz-option:hover { background: #f2edf9; border-color: #b8a4ce; }
.light .quiz-option:has(input:checked) { background: #f1eaf8; border-color: #aa8fc9; }
.light .quiz-feedback.correct { color: #2b765c; background: #e9f6ee; border-color: #afd8c3; }
.light .hint { color: #705492; background: #f0eaf9; }
.light .saved-label { color: #3c806c; }
.light .mission-card { background: linear-gradient(130deg,#fff,#f2f5fc); border-color: #cdd8ed; }
.light .mission-card strong { color: #7955a4; }
.light .mission-card.complete { background: linear-gradient(130deg,#f0f8f3,#f3fafc); border-color: #abd1bd; }
.light .mission-card.complete strong { color: #337760; }
.light .mission-card.complete:after { color: #397b67; }
.light .mission-track { background: #dbe5f4; }
.light .reward-card { background: linear-gradient(125deg,#f0e8fbf5,#e3f5f8f5); border-color: #baa5d4; color: #31445b; box-shadow: 0 15px 50px #435b7933; }
.light .reward-card h2, .light .reward-card h3 { color: #644b87; }
.light .reward-card p { color: #5c7087; }
.light .reward-card strong { color: #3e7c78; }
.light .reward-card .reward-xp { color: #7954a5; }
.light .reward-card > .reward-kicker { color: #3b7e88; }
.light .reward-card > strong { color: #715295; }
.light .toast { background: linear-gradient(120deg,#eee5f9,#e5f4fa); border-color: #b9a2d1; color: #5d4b7b; }
body.light .games-v2 .games-pick { background: linear-gradient(140deg,#fff,#f3f7fe); border-color: #d1dced; }
body.light .games-v2 .games-pick[aria-pressed="true"] { background: linear-gradient(135deg,#eee6f8,#eaf2fc); border-color: #b59acc; }
body.light .games-v2 .games-pick strong { color: #354b66; }
body.light .games-v2 .games-pick small { color: #637891; }
body.light .games-v2 .games-symbol { color: #7851a5; background: #eee5f8; border-color: #d9c9ed; }
body.light .games-v2 .game-workspace { background: linear-gradient(135deg,#fff,#f6f9ff); border-color: #c9d5eb; }
body.light .games-v2 .game-level-btn[aria-current="step"] { background: #ede4f8; color: #73509c; border-color: #af95cc; }
body.light .games-v2 .game-level-btn.done { border-color: #99c7b4; background: #eef9f2; }
body.light .games-v2 .game-code-v2 { background: #eff4fc; color: #364f70; border-color: #d4deef; }
body.light .games-v2 .game-choice { background: #f7f9ff; border-color: #cbd8ec; color: #314861; }
body.light .games-v2 .game-choice:hover:not(:disabled) { background: #f0eaf8; border-color: #ae95cb; }
body.light .games-v2 .game-choice.correct { background: #edf7f0; color: #337760; border-color: #8cbea6; }
body.light .games-v2 .game-choice.wrong { background: #fcf0f4; color: #97475e; border-color: #d6a0b4; }
body.light .games-v2 .game-feedback { background: #f2edf9; color: #73538d; }
body.light .games-v2 .game-feedback.success { background: #eef8f2; color: #35755d; }
body.light .games-v2 .game-memory-cell { background: #f1f6fd; border-color: #ccdced; }
body.light .games-v2 .game-memory-cell[aria-pressed="true"] { background: #e5f1f6; border-color: #92bfce; }
body.light .games-v2 .game-memory-cell strong { color: #357789; }
body.light .games-v2 .game-variable-box { background: #f5f7fc; border-color: #d2dbee; }
body.light .games-v2 .game-variable-box strong { color: #77529f; }
body.light .games-v2 .game-order-row { background: #f5f8ff; border-color: #d3deef; }
body.light .games-v2 .game-order-actions button { background: #e9f0fb; }
body.light .games-v2 .game-hint { color: #936638; }
body.light .games-v2 .games-help, body.light .games-v2 .game-save-note, body.light .games-v2 .game-score-detail { color: #62748e; }
.light .modal { background: #fff; border-color: #c4d1e7; }
.light .modal-backdrop { background: #1d2f4b72; }
.light .footer { color: #667a94; border-color: #d0dced; }
.light .footer b { color: #526b8a; }

@keyframes codeya-logo-glow { 0%,100% { box-shadow: 0 5px 20px #a087ee26,inset 0 1px 0 #ffffff5c; } 50% { box-shadow: 0 5px 26px #91b9ed33,inset 0 1px 0 #ffffff5c; } }
@keyframes codeya-ambient-light { from { transform: translate3d(-20px,0,0); opacity: .65; } to { transform: translate3d(45px,35px,0); opacity: 1; } }
@keyframes codeya-particles { from { transform: translate3d(0,0,0); opacity: .4; } to { transform: translate3d(-8px,12px,0); opacity: .8; } }
@keyframes codeya-particle-dot { from { transform: translate3d(0,0,0); opacity: .2; } to { transform: translate3d(-10px,-22px,0); opacity: .7; } }
@keyframes codeya-section-enter { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes codeya-text-enter { from { opacity: .2; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes codeya-check { 0% { transform: scale(.9); } 65% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes codeya-success-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes codeya-connect { from { transform: scaleX(.4); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }
@keyframes codeya-reward-in { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes codeya-confetti { 0% { transform: translateY(-10px) rotate(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(130px) rotate(150deg); opacity: 0; } }

@media(min-width:1500px) { .hero { min-height: 360px; } .hero h2 { font-size: 47px; } .hero p { font-size: 13px; } .track-art { height: 145px; } }
@media(max-width:1200px) { .hero { padding: 29px; min-height: 314px; } .hero h2 { font-size: 35px; } .hero-art { width: 35%; opacity: .8; } .hero-copy { width: 75%; } .track-body { padding: 18px; } .track-body h3 { font-size: 17px; } .journey-map { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; } .journey-node:not(:nth-child(4n)):after { display: none; } .journey-node:not(:nth-child(3n)):after { display: block; width: 14px; right: -15px; } }
@media(max-width:980px) { .hero { min-height: 305px; } .hero-copy { width: 64%; } .hero h2 { font-size: 39px; } .hero-art { width: 39%; opacity: .9; } .track-art { height: 100%; } .track-body { padding: 21px; } .track-body h3 { font-size: 20px; } .mission-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:700px) {
  main { padding-top: 27px; }
  .hero { min-height: 323px; padding: 28px 24px; border-radius: 16px; }
  .hero h2 { font-size: 35px; letter-spacing: -1.4px; margin-top: 19px; }
  .hero-copy { width: 88%; }
  .hero-art { width: 37%; opacity: .31; right: -10px; }
  .hero p { font-size: 11px; max-width: 260px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
  .hero:before { right: -100px; }
  .goal-card { padding: 21px; }
  .goal-ring { width: 64px; height: 64px; }
  .stat { padding: 12px 9px; }
  .stat-icon { width: 28px; height: 28px; border-radius: 8px; }
  .stat strong { font-size: 22px; }
  .stat p { font-size: 9px; }
  .track-body { padding: 18px 15px; }
  .track-body h3 { font-size: 17px; }
  .track-body > p { font-size: 10px; }
  .track-card:hover { transform: none; }
  .track-card:hover .track-art svg { transform: none; }
  .journey-map { grid-template-columns: 1fr 1fr; gap: 12px; }
  .journey-node { min-height: 136px; padding: 15px; }
  .journey-node:not(:nth-child(3n)):after { display: none; }
  .journey-node:not(:nth-child(2n)):after { display: block; width: 12px; right: -13px; }
  .journey-node strong, .journey-node h3 { font-size: 12px; }
  .mission-grid { gap: 11px; }
  .mission-card { padding: 16px; }
  .reward-overlay { right: 18px; bottom: 18px; }
  .reward-card { padding: 20px; }
  body .games-v2 .games-picker { gap: 9px; }
  body .games-v2 .games-pick { padding: 13px 10px; gap: 8px; }
  body .games-v2 .games-symbol { width: 27px; height: 27px; border-radius: 8px; }
  body .games-v2 .games-pick strong { font-size: 10px; }
  body .games-v2 .game-work-head h3 { font-size: 22px; }
  body .games-v2 .game-choice { padding: 13px; }
  body .lab-toolbar .lab-actions { gap: 7px; }
  body .lab-toolbar .btn { padding: 8px 9px !important; font-size: 10px !important; }
  .footer { font-size: 9px; }
}
@media(max-width:420px) { .hero h2 { font-size: 32px; } .hero-copy { width: 95%; } .mission-grid { grid-template-columns: 1fr; } .journey-node { padding: 13px; } }
@media(hover:none) { .nav-btn:hover, .stat:hover, .chapter-row:hover, .journey-node:hover, body .games-v2 .games-pick:hover, .quiz-option:hover, body .games-v2 .game-memory-cell:hover { transform: none; } }

/* Both system preference and in-app choice win over injected component motion. */
body.motion-reduced *, body.motion-reduced *:before, body.motion-reduced *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.motion-reduced .reward-confetti { display: none; }
body.motion-reduced .btn:hover, body.motion-reduced .track-card:hover, body.motion-reduced .track-card:hover .track-art svg, body.motion-reduced .journey-node:hover, body.motion-reduced .brand:hover .brand-logo svg { transform: none; }
body.motion-paused .brand-logo, body.motion-paused .hero:before, body.motion-paused .hero:after, body.motion-paused .code-float, body.motion-paused .hero-particles i { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reward-confetti { display: none; }
  .btn:hover, .track-card:hover, .track-card:hover .track-art svg, .journey-node:hover, .brand:hover .brand-logo svg { transform: none; }
}
.lab-guided{margin-top:24px;border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--panel)}.lab-guided summary{cursor:pointer;color:var(--purple);font:500 14px var(--display)}.lab-guided>p{margin-top:12px}.light .lab-guided{background:#fff}