/* Syntax visual system: motion, depth, game cues, and responsive assistant. */
:root {
  --motion-smooth: cubic-bezier(.2, .75, .25, 1);
  --motion-spring: cubic-bezier(.16, 1, .3, 1);
  --glow-violet: rgba(116, 91, 236, .18);
  --glow-mint: rgba(74, 202, 165, .15);
}

html { scroll-padding-top: 24px; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 14% 9%, rgba(184, 173, 255, .12), transparent 31rem),
    radial-gradient(ellipse at 91% 59%, rgba(116, 210, 190, .08), transparent 28rem),
    var(--paper);
}
.app { max-width: 1880px; }
.sidebar, .rightbar { box-shadow: 0 0 0 1px rgba(30, 32, 56, .015); }
.brand-mark { animation: brand-breathe 5s ease-in-out infinite; }
.nav-btn { position: relative; overflow: hidden; }
.nav-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.72) 48%, transparent 72%);
  transform: translateX(-140%);
  transition: transform .65s var(--motion-smooth);
  pointer-events: none;
}
.nav-btn:hover::after { transform: translateX(140%); }
.nav-btn.active { box-shadow: inset 3px 0 0 var(--violet); }
.welcome { animation: enter-soft .62s var(--motion-spring) both; }
.welcome .eyebrow { animation: enter-soft .7s .04s var(--motion-spring) both; }
.welcome h1 { animation: enter-soft .72s .09s var(--motion-spring) both; }
.welcome p { animation: enter-soft .72s .16s var(--motion-spring) both; }
.week-chip { animation: enter-soft .72s .2s var(--motion-spring) both; }
.hero {
  background-size: 180% 180%;
  animation: hero-gradient 18s ease-in-out infinite, enter-soft .76s .08s var(--motion-spring) both;
  transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform .25s ease, box-shadow .35s ease;
  box-shadow: 0 20px 46px rgba(60, 48, 126, .18), inset 0 1px 0 rgba(255,255,255,.16);
}
.hero:hover { box-shadow: 0 25px 60px rgba(60, 48, 126, .24), inset 0 1px 0 rgba(255,255,255,.2); }
.hero-grid { animation: grid-drift 24s linear infinite; }
.hero::before { animation: halo-breathe 8s ease-in-out infinite alternate; }
.hero::after { animation: halo-breathe 10s 1s ease-in-out infinite alternate-reverse; }
.code-window { backdrop-filter: blur(10px); }
.code-window::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 12px;
  right: 15px;
  bottom: 16px;
  border-radius: 4px;
  background: #b8aaff;
  box-shadow: 0 0 12px #b8aaff;
  animation: caret-blink 1.1s steps(2, start) infinite;
}
.hero-spark { animation: sparkle 2.5s ease-in-out infinite; }
.float-tag { backdrop-filter: blur(12px); }
.stats .stat-card {
  animation: enter-soft .65s var(--motion-spring) both;
  transition: transform .24s var(--motion-smooth), box-shadow .24s ease, border-color .24s ease;
}
.stats .stat-card:nth-child(2) { animation-delay: .06s; }
.stats .stat-card:nth-child(3) { animation-delay: .12s; }
.stats .stat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(54, 52, 92, .08); border-color: #ded8fb; }
.stat-icon { transition: transform .3s var(--motion-spring); }
.stat-card:hover .stat-icon { transform: rotate(-8deg) scale(1.08); }

/* Daily missions turn the home screen into a small playable learning loop. */
.quest-hub {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: -7px 0 31px;
  padding: 22px;
  border: 1px solid rgba(220, 216, 245, .9);
  border-radius: 22px;
  background: linear-gradient(125deg, rgba(255,255,255,.97), rgba(250,249,255,.96) 56%, rgba(243,250,248,.96));
  box-shadow: 0 16px 38px rgba(48, 45, 91, .045), inset 0 1px 0 #fff;
  animation: enter-soft .72s .18s var(--motion-spring) both;
}
.quest-hub::before, .quest-hub::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}
.quest-hub::before { width: 290px; height: 290px; right: -105px; top: -170px; background: radial-gradient(circle, rgba(159,143,255,.17), transparent 69%); animation: cloud-drift 13s ease-in-out infinite alternate; }
.quest-hub::after { width: 230px; height: 230px; left: 24%; bottom: -188px; background: radial-gradient(circle, rgba(82,201,165,.13), transparent 69%); }
.quest-hub-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.quest-kicker, .puzzle-kicker { display: flex; align-items: center; gap: 7px; color: #8171ce; font-size: 9px; font-weight: 800; letter-spacing: 1.45px; }
.quest-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #51c9a6; box-shadow: 0 0 0 4px rgba(81,201,166,.12); animation: dot-pulse 2.3s ease-out infinite; }
.quest-hub-head h2 { margin: 8px 0 4px; color: #25263d; font: 800 clamp(18px, 2vw, 23px)/1.15 Manrope, sans-serif; letter-spacing: -.75px; }
.quest-hub-head p { margin: 0; color: #9295a7; font-size: 11px; line-height: 1.55; }
.level-orb {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  flex: 0 0 71px;
  width: 71px;
  height: 71px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 33% 22%, #ac9cff, #7258e8 65%, #5944c8);
  box-shadow: 0 10px 22px rgba(105, 83, 220, .26), inset 0 1px 0 rgba(255,255,255,.5);
  animation: orb-hover 4.4s ease-in-out infinite;
}
.level-orb::before { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(128,106,225,.26); border-radius: inherit; animation: orb-ring 3s ease-out infinite; }
.level-orb span { font-size: 7px; letter-spacing: 1px; font-weight: 800; opacity: .8; }
.level-orb b { margin-top: 1px; font: 800 25px/1 Manrope, sans-serif; letter-spacing: -1px; }
.level-progress { margin-top: 17px; }
.level-progress-meta { display: flex; align-items: center; justify-content: space-between; color: #a2a3b2; font-size: 9px; font-weight: 700; }
.level-progress-meta b { color: #595470; font-size: 11px; }
.level-track { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 9px; background: #eceaf5; }
.level-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7258e8, #a68fff 58%, #63d2ad); box-shadow: 0 0 12px rgba(122,98,232,.35); transition: width .8s var(--motion-spring); }
.quest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 14px; }
.quest-card {
  --quest-accent: #755ce6;
  --quest-wash: #f3f0ff;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(230,228,242,.9);
  border-radius: 15px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 5px 15px rgba(47,45,78,.025);
  transition: transform .28s var(--motion-spring), box-shadow .28s ease, border-color .28s ease, background .28s ease;
  animation: quest-rise .68s var(--motion-spring) both;
}
.quest-card:nth-child(2) { animation-delay: .08s; --quest-accent: #c27b45; --quest-wash: #fff3e9; }
.quest-card:nth-child(3) { animation-delay: .16s; --quest-accent: #35a98c; --quest-wash: #e9f8f3; }
.quest-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--quest-accent), white 68%); box-shadow: 0 15px 25px rgba(47,45,78,.085); background: #fff; }
.quest-card.is-done { border-color: color-mix(in srgb, var(--quest-accent), white 63%); background: linear-gradient(145deg, #fff, var(--quest-wash)); }
.quest-card-top, .quest-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.quest-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--quest-accent); background: var(--quest-wash); font-size: 17px; font-weight: 800; transition: transform .3s var(--motion-spring); }
.quest-card:hover .quest-icon { transform: rotate(-9deg) scale(1.08); }
.quest-reward { padding: 5px 7px; border-radius: 8px; background: #f7f6fb; color: #8e87b6; font-size: 8px; font-weight: 800; letter-spacing: .3px; }
.quest-card-copy { display: grid; gap: 4px; min-height: 51px; margin-top: 11px; }
.quest-card-copy b { color: #34354c; font: 800 12px Manrope, sans-serif; }
.quest-card-copy span { color: #999cad; font-size: 9px; line-height: 1.45; }
.quest-progress { height: 4px; margin: 11px 0 9px; overflow: hidden; border-radius: 8px; background: #f0eff5; }
.quest-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--quest-accent); transition: width .55s var(--motion-spring); }
.quest-card.is-done .quest-progress i { width: 100%; }
.quest-card-bottom { color: #a3a5b2; font-size: 8px; }
.quest-action { border: 0; padding: 5px 7px; border-radius: 7px; background: transparent; color: var(--quest-accent); font-size: 9px; font-weight: 800; transition: background .2s, transform .2s; }
.quest-action:hover { background: var(--quest-wash); transform: translateX(2px); }
.quest-card.is-done .quest-action { color: #fff; background: var(--quest-accent); cursor: default; }

/* A quick visual puzzle gives the dashboard something to play with. */
.puzzle-card {
  position: relative;
  display: grid;
  grid-template-columns: 91px minmax(0, 1fr) 53px;
  align-items: center;
  gap: 16px;
  min-height: 146px;
  margin-top: 13px;
  padding: 15px 18px;
  overflow: hidden;
  border: 1px solid rgba(237,224,247,.95);
  border-radius: 17px;
  background: linear-gradient(108deg, #fffaf4 0%, #fff 45%, #f8f5ff 100%);
  transition: box-shadow .3s ease, transform .3s var(--motion-spring);
}
.puzzle-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.72) 48%, transparent 63%); transform: translateX(-120%); }
.puzzle-card.is-correct::after { animation: answer-sweep .8s ease both; }
.puzzle-card.is-correct { box-shadow: 0 13px 30px rgba(65,184,148,.11); }
.puzzle-art { position: relative; display: grid; place-items: center; width: 75px; height: 75px; margin: 0 auto; }
.puzzle-orbit { position: absolute; inset: 0; border: 1px dashed rgba(159,128,219,.4); border-radius: 50%; animation: orbit-turn 20s linear infinite; }
.puzzle-orbit::before, .puzzle-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ffa77d; box-shadow: 0 0 10px rgba(255,167,125,.75); }
.puzzle-orbit::before { top: 7px; left: 11px; }
.puzzle-orbit::after { right: 3px; bottom: 19px; background: #55c5a5; box-shadow: 0 0 10px rgba(85,197,165,.75); }
.puzzle-tile { display: grid; place-items: center; width: 45px; height: 49px; border: 1px solid #fff; border-radius: 14px; color: #755ce0; background: linear-gradient(145deg,#fff,#eeeaff); box-shadow: 0 9px 20px rgba(89,69,168,.15); font: 800 25px Manrope,sans-serif; animation: tile-float 3.8s ease-in-out infinite; }
.puzzle-star, .puzzle-spark { position: absolute; color: #f0a362; animation: sparkle 2.3s ease-in-out infinite; }
.puzzle-star { top: 0; right: 4px; font-size: 13px; }
.puzzle-spark { left: 0; bottom: 4px; color: #8c76e4; font-size: 9px; animation-delay: .7s; }
.puzzle-content { min-width: 0; }
.puzzle-kicker { color: #bb855d; font-size: 8px; }
.puzzle-content h3 { margin: 5px 0 8px; color: #34354b; font: 800 14px Manrope,sans-serif; letter-spacing: -.25px; }
.puzzle-code { display: grid; gap: 2px; width: max-content; max-width: 100%; padding: 7px 10px; border: 1px solid #eeecf5; border-radius: 9px; background: rgba(255,255,255,.82); color: #716989; font: 9px/1.35 'DM Mono',monospace; }
.puzzle-code span:nth-child(2) { padding-left: 10px; }
.puzzle-code .puzzle-output { color: #42a68d; }
.puzzle-answers { display: flex; gap: 7px; margin-top: 9px; }
.puzzle-answers button { min-width: 33px; height: 30px; border: 1px solid #eae7f2; border-radius: 8px; color: #68627d; background: #fff; font: 800 10px Manrope,sans-serif; transition: transform .18s var(--motion-spring), color .18s, background .18s, border-color .18s; }
.puzzle-answers button:hover { transform: translateY(-2px); border-color: #cfc6f8; background: #f7f5ff; color: #634cd5; }
.puzzle-answers button.is-wrong { animation: nudge .28s ease; border-color: #f0c7be; background: #fff1ee; color: #bd756a; }
.puzzle-answers button.is-right { border-color: #65c6a7; background: #e8f8f2; color: #309b7c; }
.puzzle-answers button:disabled { cursor: default; }
.puzzle-feedback { min-height: 13px; margin: 6px 0 0; color: #a3a1ae; font-size: 8px; line-height: 1.4; }
.puzzle-feedback.is-good { color: #319779; font-weight: 700; }
.puzzle-stamp { display: grid; justify-items: center; gap: 1px; color: #ad9dc5; font-size: 7px; font-weight: 800; letter-spacing: 1px; transform: rotate(8deg); }
.puzzle-stamp b { color: #efb25f; font-size: 22px; line-height: 1; }

/* Lesson cards pair each short explanation with a small animated model. */
.lesson-visual {
  position: relative;
  overflow: hidden;
  margin: 15px 0;
  padding: 12px 15px 13px;
  border: 1px solid #e8e4f5;
  border-radius: 14px;
  background: linear-gradient(115deg,#f7f5ff,#fff 54%,#f2fbf8);
}
.lesson-visual::before { content: ""; position: absolute; width: 190px; height: 190px; right: -85px; top: -142px; border-radius: 50%; background: radial-gradient(circle,rgba(146,126,241,.17),transparent 70%); }
.lesson-visual-heading { display: flex; align-items: center; justify-content: space-between; color: #8980b9; font-size: 8px; font-weight: 800; letter-spacing: 1.25px; }
.lesson-visual-heading i { color: #eda96a; font-size: 14px; font-style: normal; animation: sparkle 2s infinite; }
.lesson-visual-scene { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(5px,2vw,14px); min-height: 81px; padding: 10px 4px 4px; }
.lesson-visual > p { position: relative; margin: 1px 0 0; color: #8c8fa2; text-align: center; font-size: 9px; line-height: 1.45; }
.visual-step { display: grid; justify-items: center; gap: 5px; min-width: 57px; color: #5e5e79; font-size: 9px; animation: step-bob 3.1s ease-in-out infinite; }
.visual-step:nth-of-type(3) { animation-delay: .3s; }
.visual-step i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #e5e0fa; border-radius: 10px; color: #806bdb; background: #fff; box-shadow: 0 5px 12px rgba(87,71,152,.09); font-size: 8px; font-style: normal; font-weight: 800; }
.visual-step-glow i { border-color: #cbeee2; color: #3da687; background: #f1fcf8; box-shadow: 0 0 0 4px rgba(79,198,163,.09); }
.visual-arrow { color: #b1a6da; font-size: 16px; animation: arrow-pulse 1.8s ease-in-out infinite; }
.visual-console { position: relative; display: flex; align-items: center; gap: 7px; min-width: min(300px,90%); padding: 13px 12px 13px 45px; border: 1px solid #3a3657; border-radius: 11px; color: #c6c2e6; background: #29263f; box-shadow: 0 8px 18px rgba(51,41,105,.15); font: 10px 'DM Mono',monospace; }
.visual-console::before { content: ""; position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 8px; background: #6656a5; box-shadow: inset 0 0 0 1px #ffffff22; }
.visual-console span { position: absolute; left: 17px; top: 17px; width: 4px; height: 4px; border-radius: 50%; background: #ff9994; }
.visual-console span:nth-child(2) { left: 23px; background: #ffc774; }
.visual-console span:nth-child(3) { left: 29px; background: #78d8ab; }
.visual-console b { color: #a8eccb; font-weight: 500; }
.visual-console i { color: #a78df9; font-style: normal; animation: caret-blink 1s steps(2,start) infinite; }
.visual-variable { position: relative; display: grid; justify-items: center; gap: 5px; min-width: 68px; padding: 17px 14px 9px; border: 1px solid #e2dcf6; border-radius: 12px 12px 15px 15px; background: linear-gradient(145deg,#fff,#f2efff); box-shadow: 0 7px 16px rgba(79,63,144,.09); animation: step-bob 3.2s ease-in-out infinite; }
.visual-variable::before { content: ""; position: absolute; top: -4px; left: 12px; right: 12px; height: 8px; border-radius: 5px; background: #b9aafa; }
.visual-label { color: #9691af; font: 8px 'DM Mono',monospace; }
.visual-variable b { color: #6652c9; font: 800 14px Manrope,sans-serif; }
.visual-output { color: #8d8c9e; font-size: 8px; text-align: center; line-height: 1.5; }
.visual-output i { color: #56ad95; font-style: normal; font-weight: 800; }
.visual-branch { display: grid; justify-items: center; gap: 10px; }
.visual-branch > b { padding: 9px 13px; border: 1px solid #e8e3f8; border-radius: 10px; color: #6758af; background: #fff; box-shadow: 0 5px 14px rgba(79,63,144,.08); font: 700 10px 'DM Mono',monospace; }
.visual-branch > div { display: flex; gap: 14px; }
.visual-branch span { padding: 6px 8px; border-radius: 7px; font-size: 8px; font-weight: 800; animation: step-bob 2.8s ease-in-out infinite; }
.branch-yes { color: #319a7c; background: #e9f8f2; }
.branch-no { color: #bf805b; background: #fff2e8; animation-delay: .4s !important; }
.visual-loop { position: relative; display: flex; gap: 7px; padding: 8px 18px; border: 1px dashed #c7bced; border-radius: 999px; background: rgba(255,255,255,.68); }
.visual-loop i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 8px; color: #6654c3; background: #eeeaff; font: 800 9px Manrope,sans-serif; font-style: normal; animation: loop-pop 1.8s ease-in-out infinite; }
.visual-loop i:nth-child(2) { animation-delay: .2s; background: #f7edff; color: #9b5cb5; }
.visual-loop i:nth-child(3) { animation-delay: .4s; background: #e5f8f1; color: #3c9c83; }
.visual-loop span { position: absolute; right: 50%; top: -8px; padding: 2px 6px; border-radius: 5px; color: #a196c8; background: #fff; font-size: 7px; font-weight: 800; letter-spacing: .5px; transform: translateX(50%); }
.visual-port { display: grid; justify-items: center; gap: 4px; color: #a0a1af; font-size: 7px; }
.visual-port b { padding: 7px 9px; border: 1px solid #dcd8ea; border-radius: 8px; color: #69647e; background: #fff; font: 9px 'DM Mono',monospace; }
.visual-function { display: grid; justify-items: center; gap: 4px; min-width: 75px; padding: 11px 9px; border: 1px solid #c9bdf9; border-radius: 10px; color: #5d49c4; background: linear-gradient(135deg,#f6f2ff,#fff); box-shadow: 0 6px 15px rgba(98,75,192,.12); font: 800 10px 'DM Mono',monospace; animation: step-bob 3s ease-in-out infinite; }
.visual-function i { color: #a49bbb; font: 7px 'DM Sans',sans-serif; }
.visual-stack { display: grid; gap: 3px; transform: rotate(-4deg); }
.visual-stack i { min-width: 62px; padding: 5px 8px; border: 1px solid #e7e2f2; border-radius: 6px; color: #6f6a82; background: #fff; box-shadow: 0 3px 7px rgba(76,65,115,.05); font-size: 8px; font-style: normal; }
.visual-stack i:nth-child(2) { transform: translateX(6px); background: #fffaf0; }
.visual-stack i:nth-child(3) { transform: translateX(12px); background: #f0fbf7; }
.visual-picked { color: #9493a5; text-align: center; font-size: 8px; line-height: 1.5; }
.visual-picked b { color: #4aa98d; font-size: 11px; }
.visual-debug-lines { display: grid; gap: 5px; width: 120px; padding: 9px; border: 1px solid #e5e2ef; border-radius: 9px; background: #fff; }
.visual-debug-lines i { display: block; height: 4px; width: 74%; border-radius: 5px; background: #eceaf3; }
.visual-debug-lines i:nth-child(2) { width: 92%; }
.visual-debug-lines i:nth-child(4) { width: 61%; }
.visual-debug-lines .debug-highlight { width: 83%; background: #ffcbb9; box-shadow: 0 0 0 3px #fff2ed; }
.visual-magnify { margin-left: -11px; color: #957ce8; font-size: 27px; transform: rotate(-22deg); animation: step-bob 2.4s ease-in-out infinite; }
.visual-fix { position: absolute; right: 18%; bottom: 10px; padding: 5px 7px; border-radius: 7px; color: #3b9d80; background: #e8f8f1; font-size: 7px; font-weight: 800; }
.visual-project { display: grid; justify-items: center; gap: 3px; min-width: 75px; padding: 9px 8px; border: 1px solid #dfdaf1; border-radius: 10px; color: #6a6188; background: #fff; box-shadow: 0 6px 14px rgba(68,57,123,.08); transform: rotate(-3deg); }
.visual-project i { color: #957eea; font-size: 14px; font-style: normal; }
.visual-project b { font: 800 9px Manrope,sans-serif; }
.visual-project span { color: #a7a5b4; font-size: 7px; }
.visual-project-next { transform: rotate(3deg) translateY(-3px); background: linear-gradient(145deg,#fff,#f2fbf8); animation: step-bob 3.4s ease-in-out infinite; }

.stage { transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--motion-spring); animation: stage-enter .55s var(--motion-spring) both; }
.stage:nth-child(2) { animation-delay: .04s; }
.stage:nth-child(3) { animation-delay: .08s; }
.stage:nth-child(4) { animation-delay: .12s; }
.stage:nth-child(5) { animation-delay: .16s; }
.stage:nth-child(6) { animation-delay: .2s; }
.page-heading, .page-card, .badge-card, .lab-panel { animation: enter-soft .48s var(--motion-spring) both; }
.page-arrive { animation: enter-soft .42s var(--motion-spring) both; }
.rightbar { transition: transform .35s var(--motion-spring), box-shadow .35s ease; }
.tutor-card { transition: transform .3s var(--motion-spring), box-shadow .3s ease; }
.tutor-card:hover { transform: translateY(-3px); box-shadow: 0 15px 28px rgba(90,78,140,.1); }
.message { animation: message-pop .28s var(--motion-spring) both; }
.suggestion, .primary-button, .solid-button, .exam-button, .icon-button { transition-timing-function: var(--motion-smooth); }
.toast.show { animation: toast-pop .28s var(--motion-spring) both; }
.modal-backdrop.open .modal { animation: modal-arrive .33s var(--motion-spring) both; }
.visual-confetti { position: absolute; z-index: 2; top: 48%; width: 6px; height: 9px; border-radius: 2px; pointer-events: none; animation: puzzle-confetti 1.35s var(--motion-smooth) both; }

.mobile-tutor-toggle, .mobile-tutor-backdrop, .tutor-close { display: none; }

body[data-theme="dark"] .quest-hub { border-color: #353449; background: linear-gradient(125deg,rgba(34,35,50,.98),rgba(33,32,48,.97) 56%,rgba(29,42,44,.97)); box-shadow: 0 16px 38px rgba(0,0,0,.13); }
body[data-theme="dark"] .quest-hub-head h2, body[data-theme="dark"] .quest-card-copy b, body[data-theme="dark"] .puzzle-content h3 { color: #f0eff8; }
body[data-theme="dark"] .quest-hub-head p, body[data-theme="dark"] .quest-card-copy span, body[data-theme="dark"] .quest-card-bottom, body[data-theme="dark"] .puzzle-feedback { color: #a9a8b8; }
body[data-theme="dark"] .quest-card { border-color: #39384d; background: rgba(41,40,57,.82); }
body[data-theme="dark"] .quest-card.is-done { background: linear-gradient(145deg,#2a293b,#303047); }
body[data-theme="dark"] .quest-reward { background: #343247; color: #c4bbec; }
body[data-theme="dark"] .puzzle-card { border-color: #454050; background: linear-gradient(108deg,#332e35,#292936 54%,#302b40); }
body[data-theme="dark"] .puzzle-code, body[data-theme="dark"] .puzzle-answers button { border-color: #464454; background: #292936; color: #d2cde4; }
body[data-theme="dark"] .level-progress-meta { color: #aaa8bb; }
body[data-theme="dark"] .level-progress-meta b { color: #e1dcf7; }
body[data-theme="dark"] .level-track, body[data-theme="dark"] .quest-progress { background: #424052; }
body[data-theme="ocean"] .quest-hub { border-color: #d4e9eb; background: linear-gradient(125deg,#fbffff,#f2fafa 56%,#eaf7f5); }
body[data-theme="ocean"] .quest-card { border-color: #dcebed; background: rgba(251,254,254,.85); }
body[data-theme="ocean"] .puzzle-card { border-color: #dcebed; background: linear-gradient(108deg,#fffaf3,#fbffff 54%,#f0f8f8); }
body[data-theme="dark"] .lesson-visual { border-color: #48455d; background: linear-gradient(115deg,#302d43,#292936 54%,#27383a); }
body[data-theme="dark"] .lesson-visual > p { color: #afadbf; }
body[data-theme="dark"] .lesson-visual-heading { color: #b4a9e7; }
body[data-theme="dark"] .visual-step i, body[data-theme="dark"] .visual-variable, body[data-theme="dark"] .visual-console, body[data-theme="dark"] .visual-branch > b, body[data-theme="dark"] .visual-port b, body[data-theme="dark"] .visual-function, body[data-theme="dark"] .visual-stack i, body[data-theme="dark"] .visual-debug-lines, body[data-theme="dark"] .visual-project { border-color: #4b4860; background-color: #333144; color: #d0cae5; }
body[data-theme="dark"] .visual-stack i:nth-child(2), body[data-theme="dark"] .visual-stack i:nth-child(3), body[data-theme="dark"] .visual-project-next { background: #303542; }
body[data-theme="ocean"] .lesson-visual { border-color: #dcebed; background: linear-gradient(115deg,#f2f6ff,#fbffff 54%,#eef9f6); }

@media (max-width: 1230px) {
  .rightbar {
    display: flex;
    position: fixed;
    z-index: 18;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(350px, calc(100vw - 18px));
    height: 100dvh;
    border-left: 1px solid var(--line);
    border-radius: 18px 0 0 18px;
    box-shadow: -24px 0 65px rgba(25,24,47,.2);
    transform: translateX(105%);
    pointer-events: none;
  }
  .rightbar.mobile-tutor-open { transform: translateX(0); pointer-events: auto; }
  .tutor-close { display: grid; place-items: center; width: 29px; height: 29px; margin-left: 7px; border: 1px solid var(--line); border-radius: 9px; color: #797c8e; background: var(--white); font-size: 17px; }
  .mobile-tutor-toggle {
    position: fixed;
    z-index: 16;
    right: 17px;
    bottom: max(17px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 45px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg,#886ff0,#674dd6);
    box-shadow: 0 12px 27px rgba(94,69,203,.3), inset 0 1px 0 rgba(255,255,255,.35);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1px;
    transition: transform .2s var(--motion-spring), box-shadow .2s ease;
    animation: tutor-button-in .65s .7s var(--motion-spring) both;
  }
  .mobile-tutor-toggle:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(94,69,203,.36); }
  .mobile-tutor-toggle span { font-size: 15px; animation: sparkle 2.4s infinite; }
  .mobile-tutor-backdrop { display: block; position: fixed; z-index: 17; inset: 0; background: rgba(23,23,42,.3); opacity: 0; visibility: hidden; backdrop-filter: blur(3px); transition: opacity .25s ease, visibility .25s; }
  body.tutor-drawer-open .mobile-tutor-backdrop { opacity: 1; visibility: visible; }
  body.tutor-drawer-open .mobile-tutor-toggle { opacity: 0; pointer-events: none; transform: translateY(12px); }
}
@media (max-width: 760px) {
  .hero { transform: perspective(1200px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) scale(.83); }
  .quest-hub { padding: 17px; border-radius: 19px; margin-top: -3px; }
  .quest-grid { grid-template-columns: 1fr; gap: 8px; }
  .quest-card { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; column-gap: 10px; padding: 10px 11px; }
  .quest-card-top { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .quest-icon { width: 34px; height: 34px; }
  .quest-reward { display: none; }
  .quest-card-copy { grid-column: 2; grid-row: 1 / span 2; min-height: 0; margin: 0; gap: 3px; }
  .quest-card-copy b { font-size: 11px; }
  .quest-card-copy span { font-size: 8px; }
  .quest-progress { grid-column: 2 / 4; grid-row: 3; margin: 8px 0 0; }
  .quest-card-bottom { display: contents; }
  .quest-card-bottom [data-quest-status] { grid-column: 2; grid-row: 4; margin-top: 5px; }
  .quest-action { grid-column: 3; grid-row: 1 / span 2; padding: 7px 8px; }
  .puzzle-card { grid-template-columns: 55px minmax(0,1fr); gap: 10px; padding: 14px 12px; }
  .puzzle-art { width: 52px; height: 52px; }
  .puzzle-orbit { inset: 3px; }
  .puzzle-tile { width: 35px; height: 37px; border-radius: 11px; font-size: 21px; }
  .puzzle-stamp { position: absolute; right: 13px; top: 13px; transform: scale(.82) rotate(8deg); }
  .puzzle-content { padding-right: 28px; }
  .puzzle-content h3 { max-width: 215px; font-size: 13px; }
  .puzzle-kicker { font-size: 7px; letter-spacing: 1px; }
  .lesson-visual { margin: 12px 0; padding: 10px 10px 11px; }
  .lesson-visual-scene { gap: 4px; min-height: 75px; }
  .visual-step { min-width: 48px; font-size: 8px; }
  .visual-console { min-width: 0; width: 96%; font-size: 8px; }
}
@media (max-width: 450px) {
  body { background: var(--paper); }
  .main { overflow: clip; }
  .topbar { height: auto; min-height: 42px; gap: 8px; align-items: center; margin-bottom: 19px; }
  .top-actions { flex: 1; min-width: 0; gap: 4px; justify-content: flex-end; }
  .top-actions .icon-button { width: 32px; height: 32px; border-radius: 10px; }
  #notificationButton { display: none; }
  .sign-in-button { padding: 8px 9px; font-size: 9px; white-space: nowrap; }
  .lang-select { max-width: 83px; gap: 4px; padding: 4px 6px 4px 4px; overflow: hidden; font-size: 9px; white-space: nowrap; }
  .lang-flag { width: 24px; height: 24px; flex: 0 0 24px; }
  #selectedLanguage { overflow: hidden; text-overflow: ellipsis; }
  .welcome h1 { font-size: 29px; }
  .hero { height: 222px; }
  .hero-content { max-width: 79%; }
  .hero-art { opacity: .54; right: -88px; top: 48px; transform: scale(.78); transform-origin: center right; }
  .hero p { max-width: 210px; }
  .stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-bottom: 22px; }
  .stat-card { min-height: 63px; padding: 8px 7px; gap: 5px; border-radius: 12px; }
  .stat-icon { width: 25px; height: 25px; border-radius: 8px; font-size: 12px; }
  .stat-copy span { font-size: 7px; letter-spacing: -.15px; }
  .stat-copy b { font-size: 13px; }
  .section-heading h2 { font-size: 15px; }
  .stage { grid-template-columns: 36px minmax(0,1fr) 63px; gap: 7px; padding: 10px 8px; }
  .stage-progress { width: 63px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .hero, .hero-grid, .hero::before, .hero::after, .hero-spark, .quest-kicker i,
  .level-orb, .level-orb::before, .puzzle-orbit, .puzzle-tile, .puzzle-star, .puzzle-spark,
  .mobile-tutor-toggle, .mobile-tutor-toggle span, .welcome, .welcome .eyebrow, .welcome h1,
  .welcome p, .week-chip, .stats .stat-card, .quest-card, .stage, .page-heading, .page-card,
  .badge-card, .lab-panel, .toast.show, .modal-backdrop.open .modal {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .lesson-visual-heading i, .visual-step, .visual-variable, .visual-branch span, .visual-loop i,
  .visual-function, .visual-magnify, .visual-project-next, .visual-console i, .visual-confetti {
    animation: none !important;
    transition: none !important;
  }
}

/* First visit: an editorial welcome page with a live language constellation. */
#welcomeView[hidden], #appShell[hidden] { display: none !important; }
html.is-welcome #mobileTutorButton { display:none !important; }
html.syntax-first-visit .app { display: none !important; }
.welcome-stage {
  --welcome-ink: #202237;
  --welcome-muted: #75798d;
  --welcome-line: #e8e7ef;
  --welcome-paper: #fbfaf8;
  --welcome-lilac: #ede9ff;
  --welcome-violet: #7258e8;
  --welcome-mint: #61c6a8;
  display: block;
  min-height: 100vh;
  overflow: hidden;
  color: var(--welcome-ink);
  background:
    radial-gradient(ellipse at 89% 11%, rgba(208, 201, 255, .34), transparent 31rem),
    radial-gradient(ellipse at 5% 57%, rgba(202, 237, 226, .25), transparent 25rem),
    var(--welcome-paper);
  font-family: 'DM Sans', sans-serif;
}
.welcome-stage button, .welcome-stage a { -webkit-tap-highlight-color: transparent; }
.welcome-nav {
  height: 82px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(224, 222, 234, .64);
}
.welcome-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--welcome-ink); font: 800 20px Manrope, sans-serif; letter-spacing: -.9px; }
.welcome-brand .brand-dot { color: var(--welcome-violet); }
.welcome-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--welcome-violet); box-shadow: 0 8px 18px rgba(114, 88, 232, .24); font: 700 12px 'DM Mono', monospace; letter-spacing: -1px; }
.welcome-nav nav, .welcome-nav-actions { display: flex; align-items: center; gap: 26px; }
.welcome-nav nav a { color: #777b8e; font-size: 12px; font-weight: 700; text-decoration: none; transition: color .2s ease; }
.welcome-nav nav a:hover { color: var(--welcome-violet); }
.welcome-nav-actions { gap: 10px; }
.welcome-theme, .welcome-login, .welcome-nav-cta { height: 39px; border: 1px solid var(--welcome-line); border-radius: 11px; background: rgba(255,255,255,.65); color: #5d6074; font-size: 11px; font-weight: 800; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.welcome-theme { width: 39px; font-size: 16px; }
.welcome-login { padding: 0 15px; }
.welcome-nav-cta { padding: 0 15px; border-color: var(--welcome-violet); background: var(--welcome-violet); color: #fff; box-shadow: 0 5px 13px rgba(114, 88, 232, .18); }
.welcome-theme:hover, .welcome-login:hover, .welcome-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(50, 44, 86, .1); }
.welcome-hero { max-width: 1320px; min-height: 580px; margin: 0 auto; padding: 64px 52px 57px; display: grid; grid-template-columns: minmax(0, .98fr) minmax(440px, 1.02fr); gap: 22px; align-items: center; }
.welcome-copy { position: relative; z-index: 2; padding: 13px 0 19px; }
.welcome-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; color: #7865ce; font-size: 9px; line-height: 1.4; font-weight: 800; letter-spacing: 1.45px; }
.welcome-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #57c6a4; box-shadow: 0 0 0 4px rgba(87, 198, 164, .13); }
.welcome-copy h1 { margin: 0; max-width: 680px; font: 800 clamp(48px, 5.7vw, 75px)/.99 Manrope, sans-serif; letter-spacing: -4.9px; }
.welcome-copy h1 span, .welcome-section-head h2 span { color: var(--welcome-violet); }
.welcome-intro { max-width: 480px; margin: 21px 0 24px; color: var(--welcome-muted); font-size: 15px; line-height: 1.75; }
.welcome-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.welcome-primary, .welcome-secondary, .coach-open { min-height: 47px; border-radius: 12px; padding: 0 17px; font-size: 11px; font-weight: 800; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.welcome-primary { border: 1px solid #6950df; background: linear-gradient(115deg,#7258e8,#806bea); color: #fff; box-shadow: 0 10px 22px rgba(114, 88, 232, .24); }
.welcome-primary span { padding-left: 14px; font-size: 16px; vertical-align: -1px; }
.welcome-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 27px rgba(114, 88, 232, .3); }
.welcome-secondary { border: 1px solid #e5e3ec; background: rgba(255,255,255,.7); color: #676a7e; }
.welcome-secondary:hover { transform: translateY(-2px); border-color: #cec7f1; background: #fff; }
.welcome-secondary span { padding-left: 7px; color: var(--welcome-violet); }
.welcome-proof { display: flex; align-items: center; gap: 12px; margin-top: 31px; color: #888b9c; font-size: 10px; line-height: 1.65; }
.welcome-proof b { color: #53566c; font-size: 11px; }
.proof-avatars { display: flex; padding-left: 2px; }
.proof-avatars i { width: 29px; height: 29px; display: grid; place-items: center; margin-left: -3px; border: 2px solid var(--welcome-paper); border-radius: 50%; background: #f1eaff; color: #7258e8; font: 700 8px 'DM Mono', monospace; font-style: normal; }
.proof-avatars i:nth-child(2) { background: #e3f5ef; color: #319578; }
.proof-avatars i:nth-child(3) { background: #fff0e7; color: #bb774f; }
.welcome-visual { min-height: 466px; position: relative; isolation: isolate; display: grid; place-items: center; }
.welcome-visual-halo { position: absolute; inset: 8% 3% 7%; z-index: -2; border-radius: 46% 54% 54% 46% / 48% 45% 55% 52%; background: radial-gradient(ellipse at 56% 47%, rgba(222,216,255,.83), rgba(237,233,255,.47) 44%, rgba(230,245,238,.22) 72%, transparent 73%); filter: blur(2px); animation: welcome-halo 11s ease-in-out infinite alternate; }
.welcome-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.welcome-links path { fill: none; stroke: #a89ded; stroke-width: 1.15; stroke-dasharray: 3 8; opacity: .55; animation: constellation-drift 28s linear infinite; }
.welcome-links circle { fill: #947fe9; opacity: .75; filter: drop-shadow(0 0 5px rgba(135,111,224,.42)); }
.welcome-code-card { position: relative; z-index: 1; width: min(405px, 82%); min-height: 270px; margin-top: -12px; padding: 18px 20px 15px; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; background: linear-gradient(145deg, rgba(38,37,59,.97), rgba(31,34,49,.98)); color: #f0edf9; box-shadow: 0 30px 72px rgba(47, 43, 92, .24), 0 5px 14px rgba(44, 38, 76, .12); transform: rotate(-1.1deg); }
.welcome-code-top, .welcome-code-meta, .welcome-result, .welcome-code-foot { display: flex; align-items: center; justify-content: space-between; }
.welcome-code-top { padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.09); }
.welcome-code-top>span { display: flex; gap: 5px; }
.welcome-code-top>span i { width: 7px; height: 7px; border-radius: 50%; background: #fb9094; }
.welcome-code-top>span i:nth-child(2) { background: #ffc779; }
.welcome-code-top>span i:nth-child(3) { background: #70d5aa; }
.welcome-code-top>b { color: #a7a4bd; font-size: 8px; letter-spacing: 1.35px; }
.welcome-code-top button { width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; background: rgba(255,255,255,.05); color: #d5ceff; font-size: 14px; transition: transform .35s ease, background .2s ease; }
.welcome-code-top button:hover { transform: rotate(-45deg); background: rgba(255,255,255,.12); }
.welcome-code-meta { margin-top: 15px; color: #aaa7c4; font: 9px 'DM Mono', monospace; }
.run-status { display: flex; align-items: center; gap: 5px; color: #8fdbb8; font-size: 8px; }
.run-status i { width: 5px; height: 5px; border-radius: 50%; background: #72d5aa; box-shadow: 0 0 8px rgba(114,213,170,.7); }
.welcome-code { min-height: 65px; margin: 12px 0 13px; padding: 13px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(14,16,27,.48); color: #e3dcff; font: 11px/1.8 'DM Mono', monospace; white-space: pre-wrap; }
.welcome-code code { color: #dcd5ff; }
.welcome-code code::first-letter { color: #c69aff; }
.welcome-result { min-height: 46px; padding: 0 12px; border: 1px solid rgba(109,203,169,.18); border-radius: 10px; background: rgba(63,149,121,.1); }
.welcome-result span { color: #81d2b1; font: 8px 'DM Mono', monospace; letter-spacing: .7px; }
.welcome-result span i { padding-right: 5px; font-style: normal; }
.welcome-result b { max-width: 68%; overflow: hidden; color: #e1f2e9; font: 10px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.welcome-code-foot { margin-top: 12px; color: #88869f; font: 8px 'DM Mono', monospace; }
.welcome-node { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(228,225,241,.9); border-radius: 11px; background: rgba(255,255,255,.87); color: #65687c; box-shadow: 0 7px 20px rgba(48,43,83,.09); font-size: 9px; font-weight: 800; text-decoration: none; backdrop-filter: blur(10px); animation: node-drift 6.8s ease-in-out infinite; }
button.welcome-node { cursor: pointer; }
.welcome-node.is-selected { border-color:#bcb0f0; box-shadow:0 0 0 3px rgba(114,88,232,.1),0 9px 22px rgba(48,43,83,.1); }
.welcome-node>span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #eeeaff; color: #735ade; font: 700 8px 'DM Mono', monospace; }
.welcome-node:hover { border-color: #bfb3f1; box-shadow: 0 11px 24px rgba(48,43,83,.15); }
.node-python { top: 54px; left: 41px; animation-delay: -.7s; }
.node-js { top: 55px; right: 11px; animation-delay: -2s; }
.node-js>span { background: #fff3cb; color: #9b7612; }
.node-web { bottom: 73px; left: 10px; animation-delay: -3.1s; }
.node-web>span { width: 31px; background: #e2f4ef; color: #288d75; }
.node-rust { right: 24px; bottom: 59px; animation-delay: -4.5s; }
.node-rust>span { background: #fff0e8; color: #b56845; }
.welcome-agent { position: absolute; z-index: 3; left: 17%; bottom: 15px; display: flex; align-items: center; gap: 10px; min-width: 178px; padding: 10px 12px; border: 1px solid rgba(235,232,245,.9); border-radius: 13px; background: #fff; box-shadow: 0 12px 27px rgba(48,43,83,.1); }
.agent-spark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: #eeeaff; color: #7158de; font-size: 15px; }
.welcome-agent b, .welcome-agent small { display: block; }
.welcome-agent b { color: #45485d; font-size: 9px; }
.welcome-agent small { margin-top: 3px; color: #9598a7; font-size: 8px; }
.agent-arrow { margin-left: auto; color: #8d7ae7; font-size: 14px; }
.welcome-confetti-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #efb388; box-shadow: 0 0 0 5px rgba(239,179,136,.12); }
.dot-a { top: 117px; right: 87px; }.dot-b { bottom: 145px; right: 56px; width: 4px; height: 4px; background: #7bc9af; }.dot-c { top: 101px; left: 125px; width: 4px; height: 4px; background: #9e91e9; }
.welcome-language-strip { max-width: 1320px; margin: 0 auto; padding: 18px 52px 23px; border-top: 1px solid rgba(224,222,234,.66); border-bottom: 1px solid rgba(224,222,234,.66); overflow: hidden; }
.strip-label { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; color: #8b8d9e; font-size: 8px; font-weight: 800; letter-spacing: 1.35px; }
.strip-live { width: 6px; height: 6px; border-radius: 50%; background: #52bf9c; box-shadow: 0 0 0 4px rgba(82,191,156,.12); }
.welcome-marquee { overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.welcome-marquee-track { width: max-content; display: flex; align-items: center; gap: 9px; animation: language-travel 64s linear infinite; }
.welcome-marquee:hover .welcome-marquee-track { animation-play-state: paused; }
.ticker-language { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #e8e6ef; border-radius: 9px; background: rgba(255,255,255,.67); color: #666a7e; font-size: 9px; font-weight: 700; white-space: nowrap; }
.ticker-language i { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; background: #f0edff; color: #7258e8; font: 700 7px 'DM Mono', monospace; font-style: normal; }
.welcome-method, .welcome-courses { max-width: 1320px; margin: 0 auto; padding: 83px 52px 80px; }
.welcome-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 31px; }
.welcome-section-head .welcome-kicker { margin-bottom: 13px; }
.welcome-section-head h2, .coach-copy h2 { margin: 0; font: 800 clamp(34px, 4vw, 50px)/1.03 Manrope, sans-serif; letter-spacing: -2.4px; }
.welcome-section-head>p { max-width: 440px; margin: 0 0 3px; color: var(--welcome-muted); font-size: 12px; line-height: 1.8; }
.method-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.method-card { min-height: 237px; position: relative; padding: 20px 21px 22px; border: 1px solid #e9e7ef; border-radius: 17px; background: rgba(255,255,255,.76); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.method-card:hover { transform: translateY(-4px); border-color: #d9d2f4; box-shadow: 0 15px 32px rgba(44,42,79,.07); }
.method-number { position: absolute; top: 20px; right: 21px; color: #bab9c5; font: 10px 'DM Mono', monospace; }
.method-illustration { height: 78px; position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 0 3px; }
.mini-code-line { height: 9px; border-radius: 5px; background: #9e8feb; }.violet-line { width: 87px; }.mint-line { width: 65px; background: #80cbb3; }.short-line { width: 41px; position: absolute; top: 51px; left: 3px; background: #f2b58b; }
.see-illustration i { position: absolute; top: 9px; left: 58px; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #dfd9f9; border-radius: 10px; background: white; color: #826de0; font-style: normal; box-shadow: 0 5px 12px rgba(56,48,106,.08); }
.try-illustration { gap: 7px; }.try-chip { padding: 8px 9px; border: 1px solid #e9e7ef; border-radius: 9px; color: #888b9a; font-size: 8px; font-weight: 700; }.try-chip.selected { border-color: #cfc5f7; background: #f2efff; color: #6f58d5; }.try-illustration i { margin-left: auto; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #f3dfc9; border-radius: 50%; color: #d29766; font: 700 14px Manrope; font-style: normal; }
.build-illustration { align-items: center; }.build-illustration span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #e8e7ee; border-radius: 11px; background: white; color: #9a9cad; font: 9px 'DM Mono', monospace; }.build-illustration span:nth-child(2) { transform: translateY(-7px); border-color: #cdeade; background: #effaf5; color: #3c9a7c; }.build-illustration i { color: #54b894; font-size: 13px; font-style: normal; }
.method-card h3 { margin: 0 0 8px; color: #34374c; font: 800 14px Manrope, sans-serif; letter-spacing: -.3px; }.method-card p { max-width: 310px; margin: 0; color: #85899a; font-size: 10px; line-height: 1.75; }
.welcome-courses { padding-top: 77px; border-top: 1px solid rgba(224,222,234,.66); }
.courses-head { margin-bottom: 26px; }
.welcome-course-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.welcome-course-card { min-width: 0; position: relative; padding: 17px 17px 15px; border: 1px solid #e8e6ef; border-radius: 15px; background: rgba(255,255,255,.8); transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease; }
.welcome-course-card:hover { transform: translateY(-4px); border-color: #d7d0f4; box-shadow: 0 15px 28px rgba(49,45,85,.08); }
.course-card-top { display: flex; align-items: center; gap: 8px; min-height: 33px; }.course-mark { min-width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #f0edff; color: #7157df; font: 700 8px 'DM Mono', monospace; }.course-tone-1 .course-mark { background: #e7f7f1; color: #339477; }.course-tone-2 .course-mark { background: #fff1e8; color: #b6774c; }.course-tone-3 .course-mark { background: #eaf1ff; color: #527aca; }
.course-level { overflow: hidden; color: #a0a2b0; font-size: 7px; font-weight: 800; letter-spacing: .75px; text-overflow: ellipsis; white-space: nowrap; }
.course-arrow { margin-left: auto; color: #b1accc; font-size: 13px; }.welcome-course-card h3 { overflow: hidden; margin: 14px 0 5px; color: #34374c; font: 800 13px Manrope, sans-serif; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; }.welcome-course-card>p { min-height: 36px; margin: 0; color: #86899a; font-size: 9px; line-height: 1.6; }
.course-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; margin-top: 13px; padding: 10px 0; border-top: 1px solid #f0eff3; color: #9699a8; font-size: 8px; }.course-meta span:first-child { display: flex; align-items: center; gap: 5px; }.course-meta i { width: 5px; height: 5px; border-radius: 50%; background: #70c6a5; }
.welcome-course-card>button { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border: 1px solid #e6e2f4; border-radius: 9px; background: #faf9ff; color: #6655b1; font-size: 9px; font-weight: 800; transition: background .2s ease, border-color .2s ease; }.welcome-course-card>button:hover { border-color: #c9c0f2; background: #f1eeff; }.welcome-course-card>button b { font-size: 14px; font-weight: 500; }
.welcome-courses-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: #9295a4; font-size: 9px; }.welcome-courses-foot button { padding: 8px 0 8px 8px; border: 0; background: transparent; color: #6c56d2; font-size: 10px; font-weight: 800; }.welcome-courses-foot button b { padding-left: 5px; }
.welcome-coach { max-width: 1216px; margin: 7px auto 79px; padding: 43px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, .86fr); align-items: center; gap: 55px; border: 1px solid #3b375a; border-radius: 25px; background: radial-gradient(ellipse at 89% 3%,rgba(129,109,216,.33),transparent 36rem),linear-gradient(122deg,#29283e,#312d4d 62%,#263d42); color: #fff; box-shadow: 0 22px 52px rgba(42,39,78,.16); }
.light-kicker { color: #c1b5ff; }.light-kicker i { background: #64d0ac; }
.coach-copy h2 { color: #fff; font-size: clamp(36px,4vw,48px); }.coach-copy h2 span { color: #c3b8ff; }.coach-copy>p { max-width: 435px; margin: 16px 0 17px; color: #c2bfd5; font-size: 11px; line-height: 1.8; }.coach-copy ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: #dad6e9; font-size: 9px; }.coach-copy li { display: flex; align-items: center; gap: 8px; }.coach-copy li i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: rgba(97,198,168,.16); color: #86dfbf; font-size: 8px; font-style: normal; }
.coach-open { margin-top: 23px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.09); color: #fff; }.coach-open:hover { transform: translateY(-2px); background: rgba(255,255,255,.15); }.coach-open span { padding-left: 12px; color: #c7bbff; font-size: 15px; }
.coach-demo { overflow: hidden; min-height: 300px; padding: 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(22,24,38,.65); box-shadow: 0 15px 38px rgba(15,15,29,.18); }
.coach-demo-top { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.09); }.coach-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg,#a694ff,#7258e8); color: white; font-size: 16px; }.coach-demo-top b,.coach-demo-top small { display: block; }.coach-demo-top b { color: #f1eef9; font-size: 10px; }.coach-demo-top small { margin-top: 3px; color: #a8a5bb; font-size: 8px; }.coach-ready { display: flex; align-items: center; gap: 5px; margin-left: auto; color: #95d7ba; font-size: 7px; font-weight: 800; letter-spacing: .7px; }.coach-ready i { width: 5px; height: 5px; border-radius: 50%; background: #7ad5ae; }
.coach-demo-chat { min-height: 72px; max-height: 145px; display: flex; flex-direction: column; gap: 8px; overflow: auto; padding: 14px 0 8px; scrollbar-width: thin; }.coach-message { max-width: 91%; align-self: flex-start; padding: 9px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px 11px 11px 3px; background: rgba(255,255,255,.075); color: #d4d1e1; font-size: 9px; line-height: 1.6; white-space: pre-wrap; animation: coach-pop .22s ease both; }.coach-message.user-message { align-self: flex-end; border-color: rgba(157,139,249,.3); border-radius: 11px 11px 3px 11px; background: rgba(124,101,231,.27); color: #eeeaff; }
.coach-prompts { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 11px; }.coach-prompts button { padding: 7px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.045); color: #c8c4dc; font-size: 8px; transition: border-color .18s ease, background .18s ease; }.coach-prompts button:hover { border-color: #8172c4; background: rgba(124,101,231,.15); }
.coach-demo-form { display: flex; gap: 6px; padding: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(11,13,24,.32); }.coach-demo-form:focus-within { border-color: #8c7be0; box-shadow: 0 0 0 3px rgba(124,101,231,.15); }.coach-demo-form input { flex: 1; min-width: 0; padding: 8px; border: 0; outline: 0; background: transparent; color: white; font-size: 9px; }.coach-demo-form input::placeholder { color: #85839b; }.coach-demo-form button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #7962e2; color: #fff; font-size: 16px; font-weight: 700; }.coach-demo-form button:disabled { opacity: .58; cursor: wait; }.coach-demo-foot { margin-top: 8px; text-align: center; color: #88869d; font-size: 7px; }
.welcome-footer { max-width: 1320px; min-height: 77px; margin: 0 auto; padding: 15px 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(224,222,234,.66); color: #9295a4; font-size: 9px; }.welcome-footer .welcome-brand { font-size: 16px; }.welcome-footer .welcome-brand-mark { width: 29px; height: 29px; border-radius: 9px; font-size: 10px; }.welcome-footer>button { border: 0; background: transparent; color: #6d57d4; font-size: 9px; font-weight: 800; }.welcome-footer>button b { padding-left: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
@keyframes welcome-halo { to { transform: rotate(4deg) scale(1.035); opacity: .78; } }
@keyframes constellation-drift { to { stroke-dashoffset: -88; } }
@keyframes node-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes language-travel { to { transform: translateX(-50%); } }
@keyframes coach-pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
body[data-theme="dark"] .welcome-stage { --welcome-ink:#f0eef9; --welcome-muted:#aaa8ba; --welcome-line:#38374b; --welcome-paper:#191a25; --welcome-violet:#a293ff; background:radial-gradient(ellipse at 89% 11%,rgba(102,84,177,.18),transparent 31rem),radial-gradient(ellipse at 5% 57%,rgba(58,130,110,.12),transparent 25rem),#191a25; }
body[data-theme="dark"] .welcome-nav { border-color:#343346; } body[data-theme="dark"] .welcome-brand,body[data-theme="dark"] .welcome-copy h1,body[data-theme="dark"] .welcome-section-head h2 { color:#f0eef9; }
body[data-theme="dark"] .welcome-nav nav a,body[data-theme="dark"] .welcome-proof,body[data-theme="dark"] .welcome-section-head>p,body[data-theme="dark"] .welcome-footer { color:#aaa8ba; }
body[data-theme="dark"] .welcome-proof b { color:#e4e1ee; } body[data-theme="dark"] .welcome-theme,body[data-theme="dark"] .welcome-login,body[data-theme="dark"] .welcome-secondary { border-color:#3c3a50; background:#222331; color:#d9d6e5; }
body[data-theme="dark"] .welcome-language-strip,body[data-theme="dark"] .welcome-courses { border-color:#343346; } body[data-theme="dark"] .ticker-language,body[data-theme="dark"] .method-card,body[data-theme="dark"] .welcome-course-card { border-color:#37364a; background:rgba(34,35,49,.87); color:#e7e4f1; }
body[data-theme="dark"] .method-card h3,body[data-theme="dark"] .welcome-course-card h3 { color:#e7e4f1; } body[data-theme="dark"] .method-card p,body[data-theme="dark"] .welcome-course-card>p,body[data-theme="dark"] .course-meta,body[data-theme="dark"] .welcome-courses-foot { color:#aaa8ba; }
body[data-theme="dark"] .ticker-language { color:#d3d0df; } body[data-theme="dark"] .method-illustration span:not(.mini-code-line),body[data-theme="dark"] .see-illustration i,body[data-theme="dark"] .build-illustration span { border-color:#49465c; background:#2d2c3d; color:#d4d0e5; }
body[data-theme="dark"] .welcome-course-card>button { border-color:#49445f; background:#2c293d; color:#d0c6ff; } body[data-theme="dark"] .welcome-agent { border-color:#464359; background:#272738; } body[data-theme="dark"] .welcome-agent b { color:#edeaf7; } body[data-theme="dark"] .welcome-agent small { color:#a8a6b7; }
body[data-theme="ocean"] .welcome-stage { --welcome-violet:#287f91; --welcome-paper:#f2f8f8; --welcome-ink:#203842; --welcome-muted:#68828c; background:radial-gradient(ellipse at 87% 10%,rgba(157,214,217,.3),transparent 31rem),radial-gradient(ellipse at 5% 57%,rgba(202,237,226,.25),transparent 25rem),#f2f8f8; }
body[data-theme="ocean"] .welcome-copy h1 span,body[data-theme="ocean"] .welcome-section-head h2 span { color:#287f91; }
@media (max-width: 1050px) {
  .welcome-nav,.welcome-hero,.welcome-language-strip,.welcome-method,.welcome-courses,.welcome-footer { padding-left:30px; padding-right:30px; }
  .welcome-hero { grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr); gap:5px; }.welcome-copy h1 { font-size:clamp(48px,6vw,65px); letter-spacing:-3.8px; }.welcome-course-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }.welcome-course-card { padding:14px 13px; }
  .welcome-coach { margin-left:30px; margin-right:30px; padding:34px; gap:30px; }
}
@media (max-width: 760px) {
  .welcome-nav { height:70px; padding:0 21px; }.welcome-nav nav { display:none; }.welcome-nav-actions { gap:7px; }.welcome-theme { width:35px; height:35px; }.welcome-login { height:35px; padding:0 11px; }.welcome-nav-cta { height:35px; padding:0 11px; font-size:9px; }
  .welcome-hero { min-height:unset; grid-template-columns:1fr; gap:10px; padding:57px 25px 39px; }.welcome-copy { padding:0; }.welcome-copy h1 { font-size:clamp(52px,10vw,72px); letter-spacing:-4px; }.welcome-intro { max-width:520px; margin:17px 0 21px; font-size:13px; }.welcome-proof { margin-top:24px; }.welcome-visual { width:min(100%,560px); min-height:410px; justify-self:center; margin-top:4px; }.welcome-code-card { width:min(405px,77%); }.node-python { top:31px; left:5%; }.node-js { top:33px; right:2%; }.node-web { bottom:53px; left:1%; }.node-rust { right:3%; bottom:44px; }.welcome-agent { left:16%; bottom:2px; }
  .welcome-language-strip,.welcome-method,.welcome-courses { padding-left:25px; padding-right:25px; }.welcome-method,.welcome-courses { padding-top:62px; padding-bottom:61px; }.welcome-section-head { align-items:start; flex-direction:column; gap:14px; margin-bottom:22px; }.welcome-section-head h2 { font-size:clamp(35px,7vw,47px); }.welcome-section-head>p { max-width:580px; }.method-grid { gap:9px; }.method-card { min-height:220px; padding:17px; }.welcome-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .welcome-coach { margin:0 20px 57px; padding:26px 22px; grid-template-columns:1fr; gap:25px; }.coach-copy h2 { font-size:42px; }.coach-demo { min-height:280px; }.welcome-footer { padding:15px 23px; }
}
@media (max-width: 500px) {
  .welcome-nav { padding:0 15px; }.welcome-brand { gap:7px; font-size:17px; }.welcome-brand-mark { width:30px; height:30px; border-radius:9px; }.welcome-nav-cta { max-width:114px; }.welcome-login { font-size:9px; }.welcome-hero { padding:48px 18px 31px; }.welcome-copy h1 { font-size:clamp(45px,11.5vw,61px); letter-spacing:-3.4px; }.welcome-intro { font-size:12px; }.welcome-hero-actions { align-items:stretch; }.welcome-primary { flex:1; padding:0 12px; }.welcome-secondary { padding:0 11px; font-size:9px; }.welcome-proof { font-size:9px; }.welcome-visual { min-height:350px; margin-top:12px; }.welcome-code-card { width:82%; min-height:250px; padding:15px; }.welcome-code { min-height:58px; font-size:9px; }.welcome-node { gap:5px; padding:6px 8px; font-size:8px; }.welcome-node>span { width:20px; height:20px; }.node-python { top:17px; left:0; }.node-js { top:18px; right:0; }.node-web { bottom:50px; left:0; }.node-rust { right:0; bottom:39px; }.welcome-agent { left:50%; bottom:0; translate:-50% 0; transform:none; }
  .welcome-language-strip,.welcome-method,.welcome-courses { padding-left:18px; padding-right:18px; }.welcome-method,.welcome-courses { padding-top:51px; padding-bottom:51px; }.method-grid { grid-template-columns:1fr; }.method-card { min-height:180px; }.method-illustration { height:55px; margin-bottom:12px; }.short-line { top:39px; }.welcome-course-grid { gap:8px; }.welcome-course-card { padding:12px 10px; }.course-level { max-width:86px; }.welcome-course-card h3 { font-size:11px; }.welcome-course-card>p { min-height:45px; font-size:8px; }.course-meta { flex-direction:column; }.welcome-courses-foot { align-items:flex-start; flex-direction:column; }.welcome-coach { margin:0 12px 45px; padding:23px 16px; }.coach-demo { padding:12px; }.coach-prompts { gap:5px; }.coach-prompts button { font-size:7px; }.welcome-footer { padding:14px 17px; }.welcome-footer>span { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-stage *, .welcome-stage *::before, .welcome-stage *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .welcome-marquee-track { transform:none !important; }
}

@keyframes enter-soft { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes stage-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes quest-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-gradient { 0%,100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
@keyframes grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 35px 35px, 35px 35px; } }
@keyframes halo-breathe { from { opacity: .45; transform: scale(.96) translateX(-4px); } to { opacity: 1; transform: scale(1.04) translateX(7px); } }
@keyframes cloud-drift { from { transform: translate(-5px,4px) scale(.94); } to { transform: translate(9px,-8px) scale(1.08); } }
@keyframes sparkle { 0%,100% { opacity: .6; transform: scale(.88) rotate(0); } 50% { opacity: 1; transform: scale(1.18) rotate(12deg); } }
@keyframes caret-blink { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
@keyframes brand-breathe { 0%,100% { box-shadow: 0 8px 18px #7258e83b; } 50% { box-shadow: 0 9px 24px #7258e866; } }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(81,201,166,.22); } 70%,100% { box-shadow: 0 0 0 7px rgba(81,201,166,0); } }
@keyframes orb-hover { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes orb-ring { 0% { opacity: .65; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes tile-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes answer-sweep { to { transform: translateX(120%); } }
@keyframes nudge { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes message-pop { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-pop { from { transform: translate(-50%,13px) scale(.96); } to { transform: translate(-50%,0) scale(1); } }
@keyframes modal-arrive { from { opacity: .3; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tutor-button-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes puzzle-confetti { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--confetti-drift),-90px) rotate(220deg) scale(.9); } }
@keyframes step-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes arrow-pulse { 0%,100% { opacity: .55; transform: translateX(0); } 50% { opacity: 1; transform: translateX(2px); } }
@keyframes loop-pop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* A focused code studio: the example is the visual anchor, while the lesson stays scannable. */
.hero {
  display: flex;
  align-items: center;
  min-height: 264px;
  height: auto;
  padding: 25px 28px;
  background: linear-gradient(112deg, #282640 0%, #463a80 54%, #6958c1 100%);
  background-size: auto;
  transform: none;
}
.hero::before, .hero::after { display: none; }
.hero-content { max-width: 48%; }
.hero h2 { max-width: 390px; font-size: clamp(21px, 2.15vw, 27px); line-height: 1.18; }
.hero p { max-width: 340px; font-size: 11px; }
.hero-art { top: 50%; right: 24px; width: min(43%, 355px); height: auto; transform: translateY(-50%); opacity: 1; }
.code-window {
  position: relative;
  inset: auto;
  display: grid;
  gap: 9px;
  width: 100%;
  height: auto;
  min-height: 184px;
  padding: 13px 14px 12px;
  transform: none;
  animation: none;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: #1d1e2e;
  box-shadow: 0 19px 45px rgba(17,15,37,.34), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: none;
}
.code-window::after { display: none; }
.code-window-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.window-dots { margin: 0 auto 0 0; }
.demo-label { display: inline-flex; align-items: center; gap: 6px; color: #9fa2b6; font: 700 7px/1 'DM Sans', sans-serif; letter-spacing: 1px; white-space: nowrap; }
.demo-label i { width: 5px; height: 5px; border-radius: 50%; background: #4ac8a2; }
.trace-button { border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 8px; color: #e7e4fb; background: rgba(255,255,255,.07); font-size: 8px; font-weight: 700; white-space: nowrap; transition: background .2s ease, transform .2s var(--motion-spring); }
.trace-button:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.trace-button span { padding-left: 4px; color: #b9adff; }
.demo-language { color: #aaa7c4; font: 500 8px/1.2 'DM Mono', monospace; }
.hero-demo-code { display: grid; gap: 2px; min-height: 35px; max-height: 63px; overflow: auto; margin: 0; padding: 3px 0; color: #d2ceeb; font: 9px/1.65 'DM Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.trace-line { display: grid; grid-template-columns: 23px minmax(0,1fr); align-items: start; border-left: 2px solid transparent; padding: 0 5px; transition: background .2s ease, border-color .2s ease; }
.trace-line i { color: #74758b; font-size: 8px; font-style: normal; user-select: none; }
.trace-line b { color: #d8c7ff; font: inherit; }
.trace-line.is-active { border-left-color: #55cfad; background: rgba(83,202,168,.1); }
.demo-output { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.035); transition: border-color .25s ease, background .25s ease; }
.demo-output > span { color: #8e90a7; font: 700 7px/1 'DM Sans', sans-serif; letter-spacing: .9px; white-space: nowrap; }
.demo-output b { color: #9be3c5; font: 9px/1.4 'DM Mono', monospace; text-align: right; }
.demo-output.is-revealed { border-color: rgba(85,207,173,.36); background: rgba(85,207,173,.07); }
.hero-proof { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; color: rgba(240,237,255,.76); font-size: 8px; letter-spacing: .1px; }
.hero-proof-dot { width: 4px; height: 4px; border-radius: 50%; background: #6bd8b8; }

.lesson-body { padding-top: 18px; }
.modal { width: min(760px,100%); max-height: min(92dvh,900px); }
.lesson-body { padding-top: 13px; }
.lesson-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; color: #a0a1b0; }
.lesson-sub { margin-bottom: 12px; }
.lesson-steps span { display: inline-flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.lesson-steps span.is-current { color: #6b58c8; }
.lesson-steps i { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #e8e5f1; border-radius: 7px; background: #fff; color: #9b9cac; font: 700 7px 'DM Mono', monospace; font-style: normal; }
.lesson-steps span.is-current i { color: #fff; border-color: #7258e8; background: #7258e8; box-shadow: 0 4px 10px rgba(114,88,232,.2); }
.lesson-steps > b { width: 25px; height: 1px; background: #e8e7ef; }
.lesson-callout { display: flex; align-items: center; gap: 9px; margin: 8px 0; padding: 7px 11px; font-size: 9px; }
.lesson-callout > b { color: #6453bd; font-size: 9px; letter-spacing: .2px; }
.lesson-callout > span { color: #68647e; }
.lesson-sample-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 1px 7px; color: #9694a6; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.lesson-sample-head span:last-child { color: #6e5fc5; font: 700 8px 'DM Mono', monospace; letter-spacing: 0; }
.lesson-body .code-block { min-height: 48px; padding: 12px 15px; border: 1px solid #312f4a; box-shadow: 0 8px 20px rgba(36,33,66,.08); }
.practice-box { margin-top: 15px; padding: 14px; border-color: #e8e7ef; background: linear-gradient(150deg,#fff,#fbfaff); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.practice-box.is-passed { border-color: #a7ddcc; background: linear-gradient(145deg,#fff,#f2fbf7); box-shadow: 0 9px 24px rgba(59,156,125,.07); }
.practice-box.is-retry { border-color: #ead5cb; }
.practice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.practice-kicker { display: block; margin-bottom: 4px; color: #7a69c5; font-size: 8px; font-weight: 800; letter-spacing: 1.05px; }
.practice-heading h3 { margin: 0; color: #29283e; font: 800 15px/1.25 Manrope, sans-serif; letter-spacing: -.35px; }
.practice-count { flex: none; padding: 6px 8px; border: 1px solid #e8e6f0; border-radius: 7px; color: #7f7e91; background: #fff; font: 700 8px 'DM Mono', monospace; }
.challenge-case { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 9px; padding: 7px 10px; border: 1px solid #efedf5; border-radius: 9px; background: #f7f6fb; }
.challenge-case > span { color: #9694a5; font-size: 7px; font-weight: 800; letter-spacing: .85px; white-space: nowrap; }
.challenge-case p { margin: 0; color: #66647a; font-size: 9px; font-weight: 600; line-height: 1.45; text-align: right; }
.practice-box h4 { margin: 0 0 10px; color: #34334a; font: 700 11px/1.45 'DM Sans', sans-serif; }
.practice-box .answer-options { gap: 7px; }
.practice-box .answer-option { position: relative; min-height: 35px; padding: 7px 36px 7px 11px; border-color: #ebe9f2; background: #fff; line-height: 1.45; }
.practice-box .answer-option:hover { transform: translateX(2px); }
.practice-box .answer-option.selected { border-color: #9c8beb; background: #f6f3ff; color: #5445ac; }
.practice-box .answer-option.correct { border-color: #77c8aa; background: #effaf5; color: #347e68; }
.practice-box .answer-option.wrong { border-color: #e5b9ad; background: #fff4f0; color: #a76359; }
.answer-indicator { position: absolute; top: 50%; right: 11px; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid #e5e3ed; border-radius: 50%; color: transparent; font-size: 9px; transform: translateY(-50%); }
.answer-option.selected .answer-indicator { border-color: #8775dc; box-shadow: inset 0 0 0 4px #fff; background: #8775dc; }
.answer-option.correct .answer-indicator { border-color: #54b68f; color: #fff; background: #54b68f; }
.challenge-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.challenge-actions .solid-button { min-width: 112px; }
.challenge-actions .solid-button:disabled { opacity: .46; box-shadow: none; cursor: not-allowed; }
.hint-button, .retry-button { border: 0; padding: 7px 1px; color: #7668ba; background: transparent; font-size: 9px; font-weight: 800; }
.hint-button:hover, .retry-button:hover { color: #4d3ca9; }
.hint-box { display: grid; gap: 3px; margin-top: 10px; padding: 10px 11px; border: 1px solid #eee9d8; border-radius: 9px; color: #706b58; background: #fffdf5; font-size: 9px; line-height: 1.5; }
.hint-box[hidden] { display: none; }
.hint-box b { color: #93754a; font-size: 8px; text-transform: uppercase; letter-spacing: .65px; }
.practice-box .feedback { min-height: 18px; margin: 7px 0 0; color: #88899b; font-size: 9px; font-weight: 600; line-height: 1.5; }
.practice-box .feedback.is-good { color: #318269; }
.practice-box .feedback.is-retry { color: #a86d5d; }
.retry-button[hidden] { display: none; }
.practice-box .answer-option:disabled { cursor: default; }
.checkpoint-body { padding-top: 22px; }
.checkpoint-meta { display: flex; justify-content: space-between; gap: 10px; margin: 15px 0 10px; color: #938fa4; font-size: 8px; font-weight: 800; letter-spacing: .95px; }
.checkpoint-prompt { margin: 0 0 17px; color: #9293a4; font-size: 10px; }
.exam-progress { height: 5px; overflow: hidden; border-radius: 6px; background: #eeedf4; }
.exam-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7258e8,#a594ff); transition: width .42s var(--motion-smooth); }
.exam-options { gap: 8px; }
.exam-option { display: grid; grid-template-columns: 27px minmax(0,1fr) 19px; align-items: center; gap: 10px; min-height: 48px; padding: 9px 12px; border: 1px solid #eae9f1; border-radius: 11px; color: #62657a; background: #fff; text-align: left; font-size: 11px; line-height: 1.45; transition: transform .18s var(--motion-spring), border-color .18s, background .18s, color .18s; }
.exam-option:hover { transform: translateX(2px); border-color: #cfc7f6; background: #fbfaff; }
.exam-option .letter { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #ebe9f2; border-radius: 8px; color: #89879b; background: #faf9fc; font: 800 9px Manrope,sans-serif; }
.exam-option > i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid transparent; border-radius: 50%; color: transparent; font-size: 9px; font-style: normal; }
.exam-option.chosen { border-color: #9a88e8; color: #5144a0; background: #f7f4ff; box-shadow: 0 0 0 3px rgba(133,112,222,.08); }
.exam-option.chosen .letter { border-color: #b9aef0; color: #5d4dc0; background: #fff; }
.exam-option.chosen > i { border-color: #715dd4; color: #fff; background: #715dd4; }
.checkpoint-note { margin-top: 12px; color: #9695a6; font-size: 9px; line-height: 1.45; }
.modal-footer .solid-button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.answer-review { margin: 18px 0 3px; border: 1px solid #eceaf2; border-radius: 12px; background: #fff; }
.answer-review summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; color: #55536d; cursor: pointer; font-size: 10px; font-weight: 800; list-style: none; }
.answer-review summary::-webkit-details-marker { display: none; }
.answer-review summary::after { content: "+"; color: #8c7bd3; font: 700 16px Manrope,sans-serif; }
.answer-review[open] summary::after { content: "−"; }
.answer-review summary span { margin-left: auto; color: #9897a8; font: 700 8px 'DM Mono',monospace; }
.review-list { display: grid; gap: 7px; padding: 0 9px 9px; }
.review-item { display: grid; grid-template-columns: 26px minmax(0,1fr) 18px; align-items: start; gap: 9px; padding: 10px; border: 1px solid #eeedf3; border-radius: 9px; }
.review-item.is-correct { border-color: #d7eee5; background: #f8fcfa; }
.review-item.is-missed { border-color: #f1e5df; background: #fffaf8; }
.review-number { color: #9998a8; font: 700 8px 'DM Mono',monospace; }
.review-item b { color: #4d4b60; font-size: 9px; line-height: 1.45; }
.review-item p { margin: 5px 0 0; color: #9997a8; font-size: 8px; line-height: 1.4; }
.review-item .review-correct-answer { color: #398872; font-weight: 700; }
.review-item > i { color: #52ae8f; font-size: 11px; font-style: normal; }
.review-item.is-missed > i { color: #bf806f; }
body[data-theme="dark"] .exam-option { border-color: #454255; color: #dbd8e7; background: #302f41; }
body[data-theme="dark"] .exam-option.chosen { border-color: #8d7ae0; color: #e8e2ff; background: #39344f; }
body[data-theme="dark"] .answer-review { border-color: #454255; background: #302f41; }
body[data-theme="dark"] .answer-review summary, body[data-theme="dark"] .review-item b { color: #e4e1ee; }
body[data-theme="dark"] .review-item { border-color: #49465a; background: #333244; }
body[data-theme="ocean"] .answer-review { border-color: #deeaec; }

/* GSAP owns page choreography; remove the old always-on loops once it is ready. */
html[data-motion="gsap"] .brand-mark,
html[data-motion="gsap"] .hero,
html[data-motion="gsap"] .hero-grid,
html[data-motion="gsap"] .hero-spark,
html[data-motion="gsap"] .quest-hub::before,
html[data-motion="gsap"] .quest-kicker i,
html[data-motion="gsap"] .level-orb,
html[data-motion="gsap"] .level-orb::before,
html[data-motion="gsap"] .puzzle-orbit,
html[data-motion="gsap"] .puzzle-tile,
html[data-motion="gsap"] .puzzle-star,
html[data-motion="gsap"] .puzzle-spark,
html[data-motion="gsap"] .lesson-visual-heading i,
html[data-motion="gsap"] .visual-step,
html[data-motion="gsap"] .visual-variable,
html[data-motion="gsap"] .visual-branch span,
html[data-motion="gsap"] .visual-loop i,
html[data-motion="gsap"] .visual-function,
html[data-motion="gsap"] .visual-magnify,
html[data-motion="gsap"] .visual-project-next,
html[data-motion="gsap"] .visual-console i,
html[data-motion="gsap"] .page-arrive { animation: none !important; }
html[data-motion="gsap"] .hero { transform: none !important; }
html[data-motion="gsap"] .welcome,
html[data-motion="gsap"] .welcome .eyebrow,
html[data-motion="gsap"] .welcome h1,
html[data-motion="gsap"] .welcome p,
html[data-motion="gsap"] .week-chip,
html[data-motion="gsap"] .stats .stat-card,
html[data-motion="gsap"] .quest-hub,
html[data-motion="gsap"] .quest-card,
html[data-motion="gsap"] .stage,
html[data-motion="gsap"] .page-heading,
html[data-motion="gsap"] .page-card,
html[data-motion="gsap"] .badge-card,
html[data-motion="gsap"] .lab-panel { animation: none !important; }

body[data-theme="dark"] .practice-box { border-color: #3d3a51; background: linear-gradient(150deg,#2c2b3e,#282837); }
body[data-theme="dark"] .practice-heading h3,
body[data-theme="dark"] .practice-box h4 { color: #efedf7; }
body[data-theme="dark"] .practice-box .answer-option { border-color: #454255; color: #dcdae8; background: #302f41; }
body[data-theme="dark"] .practice-box .answer-option.selected { border-color: #8d7ae0; color: #e9e3ff; background: #39344f; }
body[data-theme="dark"] .challenge-case { border-color: #444154; background: #292837; }
body[data-theme="dark"] .challenge-case p { color: #cbc8d8; }
body[data-theme="dark"] .practice-count { border-color: #49465b; color: #c2bfd0; background: #302f41; }
body[data-theme="dark"] .hint-box { border-color: #514c3b; color: #e1d7b8; background: #373427; }
body[data-theme="dark"] .lesson-steps i { border-color: #49465b; background: #302f41; }
body[data-theme="dark"] .lesson-steps span { color: #b5b2c4; }
body[data-theme="ocean"] .practice-box { border-color: #dbe9eb; background: linear-gradient(150deg,#fff,#f5fbfc); }
body[data-theme="ocean"] .challenge-case { border-color: #dfeaec; background: #f2f8f9; }

@media (max-width: 900px) {
  .hero { min-height: 250px; padding: 23px; }
  .hero-art { right: 18px; width: 44%; }
  .hero-content { max-width: 50%; }
  .code-window { min-height: 176px; }
}
@media (max-width: 760px) {
  .hero { display: block; min-height: 350px; padding: 21px 20px 15px; }
  .hero-content { max-width: 100%; }
  .hero-content h2 { max-width: 320px; font-size: 21px; }
  .hero p { max-width: 290px; }
  .hero-art { position: absolute; top: auto; right: 16px; bottom: 14px; width: min(72%, 310px); transform: none; }
  .code-window { min-height: 144px; gap: 6px; padding: 10px 11px 9px; }
  .hero-proof { display: none; }
  .hero-actions { gap: 7px; }
  .primary-button { padding: 9px 11px; }
  .text-button { padding: 8px 5px; }
}
@media (max-width: 450px) {
  .hero { height: auto; min-height: 342px; transform: none; }
  .hero-content { max-width: 100%; }
  .hero-art { right: 13px; bottom: 12px; width: min(75%, 285px); opacity: 1; }
  .hero h2 { max-width: 290px; }
  .hero p { max-width: 245px; }
  .lesson-steps { gap: 5px; }
  .lesson-steps span { gap: 4px; font-size: 7px; }
  .lesson-steps > b { width: 15px; }
  .practice-box { padding: 13px; }
  .challenge-case { align-items: flex-start; flex-direction: column; gap: 4px; }
  .challenge-case p { text-align: left; }
  .challenge-actions .solid-button { min-width: 105px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .hero, .hero-art, .code-window, .trace-line, .demo-output, .nav-btn, .stage, .answer-option,
  .modal-backdrop, .modal-backdrop.open .modal, .practice-box, .trace-button {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Monthly leaderboard */
.leaderboard-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:14px; align-items:start; }
.leaderboard-panel,.leaderboard-profile-card { border:1px solid var(--line); border-radius:19px; overflow:hidden; }
.leaderboard-panel { min-width:0; background:#fff; padding:20px 20px 12px; }
.leaderboard-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 2px 6px; }
.leaderboard-kicker { display:flex; align-items:center; gap:7px; color:#9994b5; font-size:8px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; }
.leaderboard-kicker>i { width:6px; height:6px; border-radius:50%; background:#50c9a5; box-shadow:0 0 0 4px #50c9a51d; }
.leaderboard-panel-head h2 { margin:7px 0 0; font:800 21px/1.2 Manrope,sans-serif; letter-spacing:-.8px; color:#262840; }
.leaderboard-reset { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #ecebf3; border-radius:9px; color:#82869a; font-size:9px; white-space:nowrap; }
.leaderboard-reset i { width:6px; height:6px; border-radius:50%; background:#9c8af3; box-shadow:0 0 0 3px #9c8af31a; }
.leaderboard-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:9px; min-height:198px; padding:26px 5px 16px; border-bottom:1px solid var(--line); }
.leaderboard-podium.is-empty { display:none; }
.podium-place { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0; min-height:126px; padding:20px 8px 12px; border:1px solid #efedf6; border-radius:15px 15px 11px 11px; background:linear-gradient(180deg,#fbfaff,#fff 72%); text-align:center; animation:podium-arrive .62s cubic-bezier(.2,.8,.2,1) both; }
.podium-place:nth-child(2) { animation-delay:.08s; }
.podium-place:nth-child(3) { animation-delay:.16s; }
.podium-1 { min-height:158px; border-color:#e6defe; background:radial-gradient(ellipse at 50% 0%,#eee8ff,transparent 70%),#fff; }
.podium-2 { min-height:137px; }
.podium-3 { min-height:126px; }
.podium-crown { position:absolute; top:9px; right:11px; color:#b7a269; font-size:14px; }
.podium-1 .podium-crown { color:#8769e9; animation:crown-float 2.8s ease-in-out infinite; }
.podium-avatar { width:37px; height:37px; display:grid; place-items:center; margin-bottom:8px; border:3px solid #fff; border-radius:50%; background:linear-gradient(145deg,#dcd5ff,#a895f5); color:#4d3d9c; box-shadow:0 4px 12px #35246c1c; font:800 12px Manrope,sans-serif; }
.podium-2 .podium-avatar { background:linear-gradient(145deg,#dce9f6,#8da9c3); color:#31516c; }
.podium-3 .podium-avatar { background:linear-gradient(145deg,#ffe3cf,#f1b184); color:#8b5130; }
.podium-place>b { max-width:100%; overflow:hidden; color:#42445a; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.podium-place>small { margin-top:4px; color:#8b8da0; font:10px 'DM Mono',monospace; }
.podium-rank { position:absolute; left:50%; bottom:-10px; min-width:27px; padding:4px 7px; transform:translateX(-50%); border:2px solid #fff; border-radius:8px; background:#f0edff; color:#6451c7; font:800 8px Manrope,sans-serif; }
.podium-1 .podium-rank { background:#7258e8; color:#fff; }
.leaderboard-list-head,.leaderboard-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.leaderboard-list-head { padding:16px 5px 8px; color:#a0a2b0; font-size:8px; font-weight:800; letter-spacing:1.05px; }
.leaderboard-row { min-height:48px; padding:7px 7px; border-top:1px solid #f0f0f4; animation:row-arrive .42s ease both; }
.leaderboard-row:nth-child(2) { animation-delay:.04s; }.leaderboard-row:nth-child(3) { animation-delay:.08s; }.leaderboard-row:nth-child(4) { animation-delay:.12s; }
.leaderboard-person { display:flex; min-width:0; align-items:center; gap:10px; }
.leaderboard-person i { width:25px; height:25px; display:grid; place-items:center; flex:none; border-radius:8px; background:#f5f4f9; color:#85889a; font:700 9px 'DM Mono',monospace; font-style:normal; }
.leaderboard-person b { overflow:hidden; color:#4e5064; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-row>strong { flex:none; color:#514975; font:700 10px 'DM Mono',monospace; }
.leaderboard-row>strong small { color:#9698a8; font-size:8px; }
.leaderboard-tail-note,.leaderboard-empty,.leaderboard-loading { padding:20px 12px; color:#9698a8; font-size:10px; text-align:center; }
.leaderboard-empty { display:grid; justify-items:center; gap:5px; padding:25px 12px; }
.leaderboard-empty>span { width:36px; height:36px; display:grid; place-items:center; margin-bottom:4px; border-radius:12px; background:#f1efff; color:#7258e8; font-size:17px; }
.leaderboard-empty>b { color:#53556a; font:800 12px Manrope,sans-serif; }
.leaderboard-empty p { max-width:270px; margin:0; color:#9698a8; font-size:9px; line-height:1.6; }
.leaderboard-loading { display:flex; justify-content:center; align-items:center; gap:9px; }
.leaderboard-loading i { width:13px; height:13px; border:2px solid #ebe8fa; border-top-color:#7258e8; border-radius:50%; animation:spin .8s linear infinite; }
.leaderboard-status { min-height:14px; margin:9px 4px 0; color:#a1a3b2; font-size:8px; line-height:1.5; }
.leaderboard-profile-card { position:relative; padding:20px 18px 16px; background:radial-gradient(circle at 95% 5%,#ffffff20 0 82px,transparent 83px),linear-gradient(145deg,#292842,#44386c 58%,#594b91); color:#fff; box-shadow:0 15px 36px #332a6320; }
.leaderboard-profile-orb { position:absolute; top:16px; right:17px; width:32px; height:32px; display:grid; place-items:center; border:1px solid #ffffff2a; border-radius:11px; color:#f2cf96; background:#ffffff0c; animation:orb-breathe 3.4s ease-in-out infinite; }
.leaderboard-profile-card .leaderboard-kicker { color:#c8c1e2; }
.leaderboard-profile-card h3 { max-width:190px; margin:10px 0 7px; color:#fff; font:800 18px/1.2 Manrope,sans-serif; letter-spacing:-.5px; }
.leaderboard-profile-card>p { margin:0; color:#d1cce5; font-size:9px; line-height:1.65; }
.leaderboard-score { margin-top:19px; padding:13px 13px 12px; border:1px solid #ffffff1c; border-radius:12px; background:#ffffff0d; }
.leaderboard-score>span { display:block; color:#c4bedc; font-size:8px; font-weight:800; letter-spacing:1.2px; }
.leaderboard-score>b { display:block; margin-top:6px; color:#fff; font:800 25px Manrope,sans-serif; letter-spacing:-1px; }
.leaderboard-score>small { display:block; margin-top:2px; color:#c8c1dc; font-size:8px; }
.leaderboard-join { width:100%; margin-top:12px; padding:11px 12px; border:0; border-radius:10px; background:#fff; color:#433774; font-size:9px; font-weight:800; transition:transform .2s,box-shadow .2s,background .2s; }
.leaderboard-join:hover { transform:translateY(-2px); box-shadow:0 8px 20px #17122940; }
.leaderboard-join.is-public { border:1px solid #ffffff35; background:#ffffff11; color:#f3f0ff; }
.leaderboard-join:disabled { opacity:.65; cursor:wait; transform:none; }
.leaderboard-privacy-note { display:flex; align-items:flex-start; gap:8px; margin-top:14px; color:#c5bfdc; font-size:8px; line-height:1.55; }
.leaderboard-privacy-note>span:first-child { color:#b7eadb; font-size:11px; }
@keyframes podium-arrive { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes row-arrive { from { opacity:0; transform:translateX(-7px); } to { opacity:1; transform:translateX(0); } }
@keyframes crown-float { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-3px) rotate(4deg); } }
@keyframes orb-breathe { 0%,100% { box-shadow:0 0 0 0 #ffffff00; transform:rotate(0); } 50% { box-shadow:0 0 0 5px #ffffff0b; transform:rotate(5deg); } }
body[data-theme="dark"] .leaderboard-panel { background:#1b1d29; border-color:#303241; }
body[data-theme="dark"] .leaderboard-panel-head h2,body[data-theme="dark"] .podium-place>b,body[data-theme="dark"] .leaderboard-person b { color:#eeedf5; }
body[data-theme="dark"] .podium-place { border-color:#363343; background:linear-gradient(180deg,#242332,#1b1d29 72%); }
body[data-theme="dark"] .podium-1 { background:radial-gradient(ellipse at 50% 0%,#3a315e,transparent 70%),#1b1d29; }
body[data-theme="dark"] .leaderboard-row { border-color:#2b2d39; }
body[data-theme="dark"] .leaderboard-person i { background:#292a38; color:#c2bfd0; }
body[data-theme="dark"] .leaderboard-empty>b { color:#e2e0eb; }
body[data-theme="dark"] .leaderboard-reset { border-color:#343644; color:#b1b2c0; }
body[data-theme="dark"] .leaderboard-row>strong { color:#cfc8ee; }
body[data-theme="ocean"] .leaderboard-profile-card { background:radial-gradient(circle at 95% 5%,#ffffff20 0 82px,transparent 83px),linear-gradient(145deg,#214955,#287789 58%,#3d96a2); }
@media (max-width:980px) { .leaderboard-layout { grid-template-columns:minmax(0,1fr) 235px; gap:10px; }.leaderboard-panel { padding:16px 14px 10px; } }
@media (max-width:760px) { .leaderboard-layout { grid-template-columns:1fr; }.leaderboard-profile-card { order:-1; }.leaderboard-profile-orb { right:20px; }.leaderboard-profile-card h3 { max-width:calc(100% - 55px); }.leaderboard-score { display:inline-block; min-width:120px; margin-top:13px; margin-right:9px; vertical-align:middle; }.leaderboard-join { width:auto; min-width:155px; vertical-align:middle; }.leaderboard-privacy-note { max-width:380px; } }
@media (max-width:450px) { .leaderboard-panel-head { align-items:flex-start; flex-direction:column; }.leaderboard-panel-head h2 { font-size:18px; }.leaderboard-podium { gap:6px; padding:18px 0 14px; }.podium-place { padding-right:4px; padding-left:4px; }.podium-place>b { max-width:100%; font-size:8px; }.podium-place>small { font-size:8px; }.leaderboard-profile-card { padding:17px 15px; }.leaderboard-score { min-width:110px; }.leaderboard-join { min-width:135px; } }
@media (prefers-reduced-motion: reduce) { .podium-place,.leaderboard-row,.podium-crown,.leaderboard-profile-orb,.leaderboard-loading i { animation:none!important; } }