/* CS Crash Course — shared styles (v2, Brilliant-inspired) */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#111827; --muted:#4b5563; --faint:#9ca3af;
  --accent:#5865f2; --accent-dark:#4752e8; --accent-soft:#eef0fe;
  --green:#16a34a; --red:#dc2626; --amber:#b45309;
  --bg:#fdfdfc; --card:#fff; --line:#eceef2;
  --code-bg:#16182d; --code-ink:#e2e8f0;
  --shadow:0 1px 3px rgba(17,24,39,.05),0 8px 24px -12px rgba(17,24,39,.12);
  --shadow-lift:0 4px 8px rgba(17,24,39,.06),0 20px 40px -16px rgba(17,24,39,.22);
  --r:20px;
}
html{scroll-behavior:smooth}
body{font-family:"Inter",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;padding:0 20px 72px;
  -webkit-font-smoothing:antialiased}
/* soft color glow behind the top of every page */
body::before{content:"";position:absolute;inset:0 0 auto 0;height:420px;z-index:-1;
  background:
    radial-gradient(560px 300px at 12% -40px, rgba(88,101,242,.10), transparent 70%),
    radial-gradient(560px 300px at 88% -60px, rgba(16,185,129,.09), transparent 70%)}
.wrap{max-width:820px;margin:0 auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Nav ---------- */
nav{display:flex;align-items:center;gap:18px;padding:22px 0;flex-wrap:wrap}
.logo{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:20px;
  font-weight:700;letter-spacing:-.5px;color:var(--ink);white-space:nowrap}
.logo span{color:var(--accent)}
.logo:hover{text-decoration:none}
nav .links{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav .links a{color:var(--muted);font-weight:600;font-size:14.5px;padding:8px 14px;
  border-radius:999px;transition:background .15s,color .15s}
nav .links a:hover{background:#f1f2f6;color:var(--ink);text-decoration:none}
nav .links a.btn{background:var(--accent);color:#fff;box-shadow:0 4px 14px -4px rgba(88,101,242,.5)}
nav .links a.btn:hover{background:var(--accent-dark);transform:translateY(-1px)}

/* ---------- Hero ---------- */
header.hero{text-align:center;padding:44px 0 10px}
h1{font-size:clamp(30px,5.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.14}
.sub{color:var(--muted);font-size:17.5px;max-width:620px;margin:16px auto 0}
.cred{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ink);
  font-weight:600;font-size:13.5px;padding:8px 18px;border-radius:999px;margin-top:20px;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.cred::before{content:"🎓"}
.crumb{color:var(--faint);font-size:13px;margin-top:14px}
.crumb a{color:var(--faint)}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-top:26px;padding:28px 30px;box-shadow:var(--shadow)}
.card h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.card h3{font-size:16.5px;font-weight:700;margin:22px 0 6px}
.card p{color:var(--muted);font-size:15.5px}

/* ---------- Topic grid (Brilliant-style course tiles) ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.topic{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;display:block;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.topic:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);text-decoration:none}
.topic .icon{width:56px;height:56px;margin-bottom:14px}
.topic .icon img{width:100%;height:100%;border-radius:18px;display:block}
.topic .unit{font-size:11.5px;font-weight:800;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em}
.topic h3{font-size:17.5px;font-weight:800;letter-spacing:-.01em;margin:4px 0 6px}
.topic p{color:var(--muted);font-size:14px;line-height:1.55}
.topic .wt{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;
  color:var(--amber);background:#fffbeb;padding:4px 10px;border-radius:999px}
.topic::after{content:"→";position:absolute;top:24px;right:22px;font-size:18px;
  color:var(--faint);transition:transform .18s,color .18s}
.topic:hover::after{transform:translateX(4px);color:var(--accent)}

/* ---------- Code blocks ---------- */
pre{background:var(--code-bg);color:var(--code-ink);border-radius:16px;
  padding:18px 20px;overflow-x:auto;font-size:13.5px;line-height:1.6;margin:16px 0;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.9em;background:var(--accent-soft);color:var(--accent-dark);
  padding:2px 6px;border-radius:6px}
pre code{background:none;color:inherit;padding:0}
pre .k{color:#8fb8ff}   /* keyword */
pre .s{color:#7ee2a8}   /* string */
pre .c{color:#6b7394}   /* comment */
pre .n{color:#ffab91}   /* number */

/* ---------- Quiz ---------- */
.quiz{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin-top:18px;box-shadow:var(--shadow)}
.quiz .q{font-weight:700;font-size:15.5px;margin-bottom:4px}
.quiz pre{margin:12px 0}
.quiz .opts{display:flex;flex-direction:column;gap:10px;margin-top:14px;counter-reset:opt}
.quiz button.opt{position:relative;text-align:left;font-size:14.5px;font-weight:500;
  font-family:inherit;padding:12px 16px 12px 52px;border:1.5px solid var(--line);
  border-radius:14px;background:#fff;cursor:pointer;color:var(--ink);
  transition:border-color .15s,background .15s,transform .1s;line-height:1.5}
.quiz button.opt::before{counter-increment:opt;content:counter(opt,upper-alpha);
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:9px;background:#f1f2f6;color:var(--muted);
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.quiz button.opt:hover:not(:disabled){border-color:var(--accent);background:#fbfbff;
  transform:translateX(2px)}
.quiz button.opt.correct{border-color:var(--green);background:#f0fdf4}
.quiz button.opt.correct::before{background:var(--green);color:#fff}
.quiz button.opt.wrong{border-color:var(--red);background:#fef2f2;
  animation:shake .3s ease}
.quiz button.opt.wrong::before{background:var(--red);color:#fff}
@keyframes shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
.quiz .fb{display:none;margin-top:14px;font-size:14px;border-radius:12px;padding:14px 16px}
.quiz .fb.show{display:block;animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.quiz .fb.good{background:#f0fdf4;color:#166534}
.quiz .fb.bad{background:#fef2f2;color:#991b1b}

/* ---------- Callouts ---------- */
.mistakes{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r);
  padding:24px 28px;margin-top:26px}
.mistakes h2{font-size:17.5px;font-weight:800;margin-bottom:10px}
.mistakes li{margin:9px 0 9px 20px;color:#78350f;font-size:14.5px}

/* ---------- CTA strip ---------- */
.cta-strip{position:relative;overflow:hidden;background:linear-gradient(135deg,#1a1d3d,#16182d);
  color:#e2e8f0;border-radius:var(--r);padding:34px 30px;margin-top:34px;text-align:center;
  box-shadow:var(--shadow-lift)}
.cta-strip::before{content:"";position:absolute;inset:auto -60px -120px auto;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(88,101,242,.35),transparent 70%)}
.cta-strip h2{font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff}
.cta-strip p{color:#9aa3c0;font-size:15px;margin:10px auto 18px;max-width:500px}
.cta-strip a.btn{position:relative;display:inline-block;background:var(--accent);color:#fff;
  font-weight:700;padding:13px 28px;border-radius:999px;
  box-shadow:0 6px 20px -6px rgba(88,101,242,.7);transition:transform .15s,background .15s}
.cta-strip a.btn:hover{background:var(--accent-dark);transform:translateY(-2px);text-decoration:none}

/* ---------- Forms ---------- */
form.panel input,form.panel textarea,form.panel select{width:100%;font-size:15px;font-family:inherit;
  padding:13px 16px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:12px;
  background:#fff;transition:border-color .15s,box-shadow .15s}
form.panel input:focus,form.panel textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(88,101,242,.12)}
form.panel button{background:var(--accent);color:#fff;border:none;border-radius:999px;
  font-weight:700;font-size:15px;padding:13px 30px;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 20px -6px rgba(88,101,242,.6);transition:transform .15s,background .15s}
form.panel button:hover{background:var(--accent-dark);transform:translateY(-2px)}
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;opacity:0}
.fine{color:var(--faint);font-size:12.5px;margin-top:12px}

/* ---------- Guide box ---------- */
.guide{position:relative;overflow:hidden;background:linear-gradient(135deg,#5865f2,#7c5cf0);
  border-radius:var(--r);padding:34px 30px;margin-top:34px;text-align:center;color:#fff;
  box-shadow:0 20px 44px -16px rgba(88,101,242,.55)}
.guide::before{content:"";position:absolute;inset:-70px auto auto -70px;width:240px;height:240px;
  border-radius:50%;background:rgba(255,255,255,.09)}
.guide .guide-icon{width:64px;height:64px;border-radius:18px;position:relative;
  margin-bottom:10px;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.guide h2{font-size:21px;font-weight:800;letter-spacing:-.02em;position:relative}
.guide p{color:#e3e6ff;font-size:15px;margin:10px auto 18px;max-width:500px;position:relative}
.guide form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative}
.guide input{font-size:15px;padding:13px 18px;border:none;border-radius:999px;
  width:250px;font-family:inherit}
.guide input:focus{outline:3px solid rgba(255,255,255,.4)}
.guide button{background:#111827;color:#fff;border:none;border-radius:999px;
  font-weight:700;font-size:15px;padding:13px 26px;cursor:pointer;font-family:inherit;
  transition:transform .15s}
.guide button:hover{transform:translateY(-2px)}
.guide .fine{color:#c9cffc}

/* ---------- Lesson nav + footer ---------- */
.next{display:flex;justify-content:space-between;gap:12px;margin-top:34px;
  font-weight:700;font-size:14.5px}
.next a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.next a:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);text-decoration:none}
footer{text-align:center;color:var(--faint);font-size:12.5px;margin-top:52px;line-height:1.8}
footer a{color:var(--faint)}