*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0f172a;--navy2:#1e293b;--navy3:#334155;
  --text:#f1f5f9;--text2:#94a3b8;
  --sky:#38bdf8;--sky2:#0ea5e9;
  --green:#4ade80;--amber:#fbbf24;--red:#f87171;--purple:#a855f7;
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--navy);color:var(--text);min-height:100vh}
.screen{display:none;min-height:100vh}
.screen.active{display:block}
h1{font-size:32px;font-weight:700}
h2{font-size:22px;font-weight:700}
h3{font-size:18px;font-weight:600}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:12px;border:none;font-size:17px;font-weight:700;cursor:pointer;transition:transform .1s,opacity .1s;font-family:inherit}
.btn:hover{opacity:.9}.btn:active{transform:scale(.97)}
.btn-blue{background:var(--sky2);color:#fff}
.btn-green{background:#16a34a;color:#fff}
.btn-ghost{background:var(--navy3);color:var(--text)}
.btn-amber{background:#b45309;color:#fef3c7}
.btn-sm{padding:8px 16px;font-size:14px;border-radius:8px}

/* NAVBAR */
.navbar{background:var(--navy2);padding:12px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--navy3);position:sticky;top:0;z-index:100}

/* CARDS */
.card{background:var(--navy2);border:1px solid var(--navy3);border-radius:16px;padding:20px}

/* XP BAR */
.xp-outer{background:var(--navy3);border-radius:20px;height:10px;overflow:hidden;flex:1}
.xp-inner{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--sky2),var(--green));transition:width .6s ease}

/* BELT BADGE */
.belt-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700}

/* LESSON CARDS */
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.lesson-card{background:var(--navy2);border:2px solid var(--navy3);border-radius:16px;padding:18px;cursor:pointer;transition:all .15s;text-align:center}
.lesson-card:hover:not(.locked){border-color:var(--sky);transform:translateY(-3px)}
.lesson-card.locked{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.lesson-card.done{border-color:#22c55e}

/* STEP DOTS */
.step-dots{display:flex;gap:7px;align-items:center}
.step-dot{width:9px;height:9px;border-radius:50%;background:var(--navy3);transition:background .2s}
.step-dot.done{background:var(--green)}
.step-dot.active{background:var(--sky2);width:22px;border-radius:5px}

/* CODE EDITOR */
.code-area{font-family:'Courier New',monospace;font-size:14px;background:#020617;color:#7dd3fc;border:1.5px solid var(--navy3);border-radius:10px;padding:14px;width:100%;min-height:140px;resize:vertical;outline:none;line-height:1.8;tab-size:2}
.code-area:focus{border-color:var(--sky2)}

/* PREVIEW FRAME */
.preview{width:100%;min-height:200px;border:1.5px solid var(--navy3);border-radius:10px;background:#fff}

/* QUIZ OPTIONS */
.quiz-opt{width:100%;padding:15px 18px;background:var(--navy3);border:2px solid transparent;border-radius:12px;cursor:pointer;font-size:16px;text-align:left;color:var(--text);transition:all .15s;font-family:inherit;margin-bottom:10px;display:block}
.quiz-opt:hover:not(.done){border-color:var(--sky);background:#1e3a5f}
.quiz-opt.correct{background:#14532d;border-color:var(--green);cursor:default}
.quiz-opt.wrong{background:#450a0a;border-color:var(--red);cursor:default}
.quiz-opt.done{cursor:default}

/* DEV TIP */
.tip{background:#1e3a5f;border-left:4px solid var(--sky);border-radius:0 10px 10px 0;padding:14px 16px;margin:14px 0;font-size:15px;line-height:1.6}

/* SPLIT PANE */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.split{grid-template-columns:1fr}}

/* AVATAR GRID */
.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.av-btn{font-size:30px;background:var(--navy2);border:2px solid var(--navy3);border-radius:10px;padding:10px;cursor:pointer;transition:all .15s}
.av-btn:hover,.av-btn.sel{border-color:var(--sky);background:#1e3a5f}

/* RANK CARD */
.rank-card{background:var(--navy2);border:1px solid var(--navy3);border-radius:16px;padding:20px;display:flex;gap:16px;align-items:center;margin-bottom:24px}

/* CHECKLIST */
.check-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;margin-bottom:6px;font-size:14px;font-family:monospace}

/* CONFETTI CANVAS */
#cv{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}

/* WELCOME BIG */
.big-ninja{font-size:88px;display:block;text-align:center;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* CODE TAG INLINE */
.ct{font-family:monospace;background:#0c1a2e;color:#7dd3fc;padding:2px 6px;border-radius:5px;font-size:13px}

.container{max-width:920px;margin:0 auto;padding:24px 18px}

/* CELEBRATION */
.celebrate-xp{display:inline-block;background:#1e3a5f;border:2px solid var(--sky);border-radius:20px;padding:8px 22px;font-size:26px;font-weight:700;color:var(--sky);margin:12px 0}