:root {
  --ink: #201b3b;
  --muted: #6d6782;
  --paper: #faf9ff;
  --white: #ffffff;
  --purple: #6d5dfc;
  --violet: #9a65ff;
  --pink: #ff5ca8;
  --orange: #ff9a55;
  --yellow: #ffd65a;
  --mint: #58d6b4;
  --cyan: #42c7e8;
  --blue: #4d8dff;
  --border: rgba(58, 43, 98, 0.12);
  --shadow: 0 18px 50px rgba(71, 55, 120, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 92, 168, .12), transparent 26%),
    radial-gradient(circle at 100% 20%, rgba(66, 199, 232, .15), transparent 28%),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
code, pre, textarea { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

.bg-orb { position: fixed; border-radius: 50%; filter: blur(18px); opacity: .25; pointer-events: none; z-index: -1; animation: drift 11s ease-in-out infinite alternate; }
.orb-one { width: 280px; height: 280px; background: var(--pink); top: 8%; left: -160px; }
.orb-two { width: 300px; height: 300px; background: var(--cyan); top: 55%; right: -180px; animation-delay: -3s; }
.orb-three { width: 180px; height: 180px; background: var(--yellow); bottom: -100px; left: 42%; animation-delay: -6s; }
@keyframes drift { to { transform: translate3d(20px, 30px, 0) scale(1.08); } }

.section-shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.section-block { padding: 95px 0 20px; }

.topbar {
  position: sticky; top: 14px; z-index: 30;
  width: min(1180px, calc(100% - 28px)); margin: 14px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px 14px 12px 16px;
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(18px); border-radius: 20px; box-shadow: 0 10px 35px rgba(67, 50, 112, .10);
}
.brand { display: flex; gap: 10px; align-items: center; font-weight: 800; }
.brand-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #2a2145; background: var(--yellow); font-size: 14px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.07); }
.nav-links { display: flex; gap: 7px; font-size: 14px; color: var(--muted); }
.nav-links a { padding: 9px 12px; border-radius: 10px; transition: .2s ease; }
.nav-links a:hover { background: #f2efff; color: var(--purple); }
.progress-pill { display: flex; gap: 7px; align-items: center; background: #f1efff; color: var(--purple); border-radius: 999px; padding: 8px 12px; font-size: 13px; }

.hero { min-height: 680px; padding-top: 90px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 50px; align-items: center; }
.eyebrow { display: inline-block; margin-bottom: 13px; color: var(--purple); font-size: 12px; letter-spacing: .14em; font-weight: 800; }
.hero h1, .section-heading h2, .final-cta h2 { margin: 0; letter-spacing: -.04em; line-height: 1.02; }
.hero h1 { max-width: 720px; font-size: clamp(46px, 6.5vw, 82px); }
.hero h1 span { color: var(--purple); position: relative; white-space: nowrap; }
.hero h1 span::after { content: ""; position: absolute; left: 2%; right: 3%; bottom: -3px; height: 10px; background: rgba(255, 214, 90, .85); z-index: -1; transform: rotate(-1deg); border-radius: 999px; }
.hero-copy > p { max-width: 680px; margin: 24px 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; padding: 13px 18px; font-weight: 800; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: white; background: linear-gradient(135deg, var(--purple), var(--violet)); box-shadow: 0 10px 28px rgba(109, 93, 252, .24); }
.btn-ghost { background: white; border: 1px solid var(--border); }
.btn-light { background: white; color: var(--purple); }
.full { width: 100%; }
.hero-stats { display: flex; gap: 34px; margin-top: 42px; }
.hero-stats div { display: flex; flex-direction: column; gap: 3px; }
.hero-stats strong { font-size: 24px; }
.hero-stats span { color: var(--muted); font-size: 12px; }

.hero-visual { min-height: 470px; position: relative; display: grid; place-items: center; }
.code-window { width: min(100%, 510px); background: #211d32; color: white; border: 1px solid rgba(255,255,255,.10); border-radius: 24px; box-shadow: 0 35px 80px rgba(48, 36, 84, .28); overflow: hidden; transform: rotate(1.5deg); }
.window-bar { display: flex; align-items: center; gap: 7px; padding: 15px 17px; background: #2a263c; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff6c7d; } .dot.yellow { background: #ffd46a; } .dot.green { background: #58d6a9; }
.window-title { margin-left: 8px; color: #a8a3b9; font-size: 12px; }
.code-window pre { margin: 0; padding: 32px 30px 40px; font-size: clamp(14px, 2vw, 18px); line-height: 1.8; overflow: auto; }
.code-purple { color: #bb9cff; } .code-orange { color: #ffbd72; } .code-pink { color: #ff78b8; } .code-blue { color: #72d8ff; } .code-comment { color: #7f7897; }
.floating-card { animation: float 5.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-.5deg); } }
.mini-badge { position: absolute; padding: 11px 15px; border-radius: 14px; background: white; font-weight: 900; box-shadow: var(--shadow); animation: bob 4s ease-in-out infinite; }
.badge-a { left: 0; top: 18%; color: var(--pink); transform: rotate(-8deg); }
.badge-b { right: 1%; top: 28%; color: var(--blue); animation-delay: -1.2s; transform: rotate(6deg); }
.badge-c { right: 16%; bottom: 5%; color: #10a882; animation-delay: -2s; transform: rotate(-4deg); }
@keyframes bob { 50% { translate: 0 -9px; } }

.section-heading { max-width: 790px; margin-bottom: 34px; }
.section-heading h2 { font-size: clamp(35px, 5vw, 58px); }
.section-heading p { margin-top: 16px; color: var(--muted); line-height: 1.75; font-size: 17px; }

.operator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.operator-card { min-height: 220px; position: relative; padding: 22px; border: 1px solid var(--border); background: rgba(255,255,255,.83); border-radius: 22px; cursor: pointer; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border .25s ease; }
.operator-card::after { content:""; position:absolute; width:100px; height:100px; border-radius:50%; right:-35px; bottom:-35px; background: var(--card-accent, var(--purple)); opacity:.11; transition:.25s; }
.operator-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: rgba(109,93,252,.25); }
.operator-card:hover::after { transform: scale(1.4); }
.operator-symbol { width: 61px; height: 61px; display: grid; place-items: center; border-radius: 18px; color: white; background: var(--card-accent, var(--purple)); font-size: 24px; font-weight: 900; margin-bottom: 22px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.operator-card h3 { margin: 0 0 6px; font-size: 20px; }
.operator-card p { color: var(--muted); margin: 0 0 15px; }
.operator-card code { background: #f3f0fa; padding: 6px 9px; border-radius: 9px; color: #4c4265; }
.op-equal { --card-accent: #8e7cff; }.op-plus{--card-accent:#ff5ca8}.op-minus{--card-accent:#ff9361}.op-times{--card-accent:#4e91ff}.op-divide{--card-accent:#28c4dd}.op-mod{--card-accent:#36bc93}.op-power{--card-accent:#a65be2}

.concept-box { margin-top: 18px; display: flex; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 20px; background: #fff6d7; border: 1px solid #f1e0a6; }
.concept-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; background: white; font-size: 22px; }
.concept-box p { margin: 5px 0 0; color: #6b5d39; }

.simulator-section { position: relative; }
.simulator-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.panel-card { border: 1px solid var(--border); background: rgba(255,255,255,.85); border-radius: 25px; padding: 26px; box-shadow: 0 14px 45px rgba(53, 42, 94, .06); }
.sim-controls { display: flex; flex-direction: column; gap: 9px; }
.sim-controls label { margin-top: 6px; font-size: 13px; font-weight: 800; color: #514c63; }
.sim-controls input, .sim-controls select, .compiler-toolbar select { width: 100%; border: 1px solid #ded9eb; background: #fff; border-radius: 13px; padding: 12px 13px; color: var(--ink); outline: none; }
.sim-controls input:focus, .sim-controls select:focus, .compiler-toolbar select:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(109,93,252,.09); }
.sim-controls .btn { margin-top: 13px; }
.sim-stage { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(140deg, rgba(255,255,255,.92), rgba(244,241,255,.92)); }
.variable-capsule { display: flex; align-items: center; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(109,93,252,.14); }
.var-label { width: 62px; height: 70px; display: grid; place-items: center; color: white; background: var(--purple); font-size: 28px; font-weight: 900; }
.var-value { min-width: 110px; height: 70px; padding-inline: 18px; display: grid; place-items: center; background: white; font-size: 30px; font-weight: 900; }
.flow-arrow { margin: 10px 0; color: #a29bb8; font-size: 24px; }
.expression-chip { padding: 11px 17px; border: 1px dashed #b5aeee; border-radius: 12px; background: #f5f2ff; color: var(--purple); font-family: monospace; font-size: 17px; font-weight: 800; }
.result-box { margin-top: 4px; min-width: 200px; padding: 15px 20px; border-radius: 17px; background: #e9fbf5; border: 1px solid #bdeedd; }
.result-box span { display: block; color: #4f8675; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.result-box strong { display: block; margin-top: 4px; color: #159c76; font-size: 33px; }
.sim-explanation { max-width: 540px; color: var(--muted); margin: 18px 0 0; }
.sim-stage.pulse .variable-capsule { animation: pop .45s ease; }
.sim-stage.pulse .result-box { animation: resultPop .55s ease .12s both; }
@keyframes pop { 50% { transform: scale(1.08) rotate(-1deg); } }
@keyframes resultPop { 0% { transform: scale(.88); opacity:.3; } 70%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }

.compiler { border-radius: 24px; overflow: hidden; background: #191626; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 28px 70px rgba(34, 24, 70, .22); }
.compiler-toolbar { min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 14px 10px 18px; background: #242033; }
.compiler-tabs { color: #c5bfd6; font-size: 13px; }
.active-tab { position: relative; padding: 20px 6px 18px; }
.active-tab::after { content:""; position:absolute; left:0; right:0; bottom:9px; height:2px; background:var(--pink); border-radius:2px; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; }
.compiler-toolbar select { width: auto; min-width: 175px; background: #302b41; color: #e8e4f2; border-color: #433d55; padding: 8px 10px; }
.small-btn, .run-btn, .console-head button, .challenge-card button { border: 0; cursor: pointer; font-weight: 800; }
.small-btn { padding: 9px 12px; color: #ddd8e9; background: #373147; border-radius: 10px; }
.run-btn { padding: 9px 15px; color: #201a32; background: #6ee6b6; border-radius: 10px; }
.editor-wrap { min-height: 320px; display: grid; grid-template-columns: 54px 1fr; background: #1d192b; }
.line-numbers { padding: 21px 14px; border-right: 1px solid rgba(255,255,255,.05); color: #5e5872; text-align: right; line-height: 1.8; font-family: monospace; font-size: 14px; user-select: none; }
#codeEditor { width: 100%; min-height: 320px; resize: vertical; border: 0; outline: 0; padding: 20px 22px; background: transparent; color: #f0edf7; caret-color: #6ee6b6; line-height: 1.8; font-size: 15px; tab-size: 2; }
#codeEditor::selection { background: rgba(109,93,252,.45); }
.console-panel { border-top: 1px solid rgba(255,255,255,.08); background: #15121f; }
.console-head { display:flex; justify-content:space-between; align-items:center; padding: 10px 17px; color:#777087; font-size:11px; font-weight:900; letter-spacing:.11em; }
.console-head button { padding: 5px 8px; color:#8f879f; background:transparent; border-radius:7px; }
.console-head button:hover { background:#252132; color:white; }
#consoleOutput { min-height: 130px; max-height: 250px; overflow:auto; margin:0; padding: 10px 20px 22px; color:#7ff0c3; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.console-muted { color:#696278; }.console-error{color:#ff789b}.console-warn{color:#ffd26e}.console-info{color:#75d9ff}
.safety-note { display:flex; gap:12px; align-items:flex-start; padding:15px 18px; margin-top:14px; border-radius:16px; background:#eefaff; border:1px solid #cdeef8; color:#386575; }
.safety-note p { margin:0; }

.challenge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.challenge-card { padding:23px; border-radius:22px; border:1px solid var(--border); background:white; display:flex; flex-direction:column; min-height:265px; }
.challenge-level { width:max-content; padding:5px 8px; border-radius:7px; font-size:10px; font-weight:900; letter-spacing:.09em; }
.easy{background:#e6fbf3;color:#14966f}.medium{background:#fff3d6;color:#b37505}.hard{background:#ffe6f2;color:#c83276}
.challenge-card h3 { margin:15px 0 8px; font-size:22px; }.challenge-card p{margin:0;color:var(--muted);line-height:1.6}.challenge-card strong{margin-top:auto;padding-top:20px}.challenge-card button{margin-top:14px;text-align:left;color:var(--purple);background:transparent;padding:0}.challenge-card button:hover{text-decoration:underline}

.quiz-section { padding-bottom: 80px; }
.quiz-card { max-width: 820px; padding: 27px; border-radius: 24px; background: white; border: 1px solid var(--border); box-shadow: var(--shadow); }
.quiz-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; font-size:12px; color:var(--muted); }
.quiz-progress { height:8px; background:#eeeaf6; border-radius:999px; overflow:hidden; }.quiz-progress span{display:block;width:20%;height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));transition:.3s ease}
.quiz-card h3 { margin:27px 0 20px; font-size:clamp(22px,3vw,30px); line-height:1.35; }
.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quiz-option { padding:15px 16px; text-align:left; border:1px solid #e2ddeb; border-radius:14px; background:#faf9ff; cursor:pointer; color:var(--ink); transition:.2s; }
.quiz-option:hover:not(:disabled){transform:translateY(-2px);border-color:#a69bff;background:#f5f2ff}.quiz-option.correct{border-color:#59d2ab;background:#eafaf4;color:#17795d}.quiz-option.wrong{border-color:#ff8bad;background:#fff0f5;color:#aa2f5b}.quiz-option:disabled{cursor:default}
.quiz-feedback { min-height:25px; margin-top:14px; font-weight:700; }.quiz-feedback.good{color:#138b67}.quiz-feedback.bad{color:#bd3c69}
.quiz-next { margin-top: 12px; }.quiz-next:disabled{opacity:.45;cursor:not-allowed;transform:none}

.final-cta { margin-top: 20px; margin-bottom: 60px; padding: 42px; border-radius: 28px; display:flex; justify-content:space-between; align-items:center; gap:30px; color:white; background:linear-gradient(135deg,#5d4cf3,#9a5ce4 55%,#e559a1); position:relative; overflow:hidden; }
.final-cta::after{content:"JS";position:absolute;right:18%;top:-42px;font-size:170px;font-weight:950;color:rgba(255,255,255,.06);transform:rotate(9deg)}
.final-cta .eyebrow{color:#fff5b7}.final-cta h2{max-width:740px;font-size:clamp(32px,4vw,50px)}.final-cta p{max-width:700px;color:rgba(255,255,255,.78);line-height:1.6}.final-cta .btn{position:relative;z-index:2;white-space:nowrap}
.footer { padding: 0 0 35px; display:flex; justify-content:space-between; color:#9892a9; font-size:12px; }

.modal-backdrop { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(25,20,43,.55); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:.2s; }
.modal-backdrop.open { opacity:1; visibility:visible; }
.modal-card { width:min(520px,100%); position:relative; padding:26px; border-radius:25px; background:white; box-shadow:0 30px 90px rgba(21,13,51,.3); transform:translateY(15px) scale(.97); transition:.2s; }
.modal-backdrop.open .modal-card{transform:none}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:28px;color:#777087;cursor:pointer}.modal-symbol{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:#f0edff;color:var(--purple);font-size:24px;font-weight:900}.modal-card h3{font-size:27px;margin:18px 0 8px}.modal-card p{color:var(--muted);line-height:1.6}.modal-card pre{padding:18px;border-radius:16px;background:#201c2d;color:#f4f0fa;overflow:auto;line-height:1.7}.modal-card .btn{margin-top:4px}
.toast { position:fixed; left:50%; bottom:28px; z-index:80; transform:translate(-50%,20px); padding:11px 16px; border-radius:999px; background:#221d34; color:white; font-weight:800; opacity:0; pointer-events:none; transition:.25s; box-shadow:0 15px 40px rgba(0,0,0,.2); }.toast.show{opacity:1;transform:translate(-50%,0)}
#confettiLayer{position:fixed;inset:0;z-index:79;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:confettiFall 1.9s ease-in forwards}@keyframes confettiFall{to{transform:translate(var(--x),110vh) rotate(720deg);opacity:.3}}

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.09s}.delay-2{transition-delay:.18s}

@media (max-width: 950px) {
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; padding-top:70px; padding-bottom:40px; }
  .hero-visual { min-height:390px; }
  .operator-grid { grid-template-columns:repeat(2,1fr); }
  .simulator-layout { grid-template-columns:1fr; }
  .challenge-grid { grid-template-columns:1fr; }
  .final-cta { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 620px) {
  .section-shell { width:min(100% - 24px,1160px); }
  .section-block { padding-top:72px; }
  .topbar { top:8px; width:calc(100% - 16px); margin-top:8px; padding:10px 11px; }
  .brand span:last-child { display:none; }.progress-pill{padding:8px 10px}
  .hero { min-height:auto; padding-top:65px; gap:25px; }.hero h1{font-size:44px}.hero-copy>p{font-size:16px}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-stats{gap:22px}
  .hero-visual { min-height:330px; }.code-window pre{padding:25px 19px}.mini-badge{font-size:12px}.badge-a{left:-2%;top:8%}.badge-b{right:-2%;top:22%}.badge-c{right:7%;bottom:0}
  .operator-grid { grid-template-columns:1fr 1fr; gap:10px; }.operator-card{min-height:190px;padding:17px}.operator-symbol{width:52px;height:52px;margin-bottom:16px}.operator-card p{font-size:13px}.operator-card code{font-size:12px}
  .concept-box { align-items:flex-start; }
  .panel-card { padding:20px; }.sim-stage{min-height:350px}
  .compiler-toolbar{align-items:stretch;flex-direction:column;padding:12px}.toolbar-actions{display:grid;grid-template-columns:1fr auto auto}.compiler-toolbar select{min-width:0;width:100%}.editor-wrap{grid-template-columns:40px 1fr}.line-numbers{padding-inline:8px}#codeEditor{padding-inline:13px;font-size:13px}
  .quiz-options { grid-template-columns:1fr; }.quiz-top{grid-template-columns:1fr auto}.quiz-progress{grid-column:1/-1;grid-row:2}.quiz-card{padding:20px}
  .final-cta { padding:30px 22px; }.footer{flex-direction:column;gap:5px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* Comparison lesson additions */
.comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comparison-grid .operator-card { min-height: 245px; }
.comparison-grid .operator-symbol { width: 76px; }
.comparison-result { transition: background .25s ease, color .25s ease; }
.comparison-result.true-result { background: #e9fbf4; color: #137c5d; }
.comparison-result.false-result { background: #fff0f5; color: #b63b68; }
@media (max-width: 620px) {
  .comparison-grid { grid-template-columns: 1fr; }
}