:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232c; --line:#2a3440;
  --text:#e6edf3; --muted:#8b97a3; --accent:#4f8cff; --ios:#0a84ff; --dsa:#ff9f0a;
  --good:#2ecc71; --bad:#ff5c5c; --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 18px;background:rgba(14,17,22,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:18px;white-space:nowrap}
.brand span{color:var(--muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-left:5px}
.stats{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.wrap{max-width:680px;margin:0 auto;padding:22px 16px 40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;animation:rise .25s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.meta{display:flex;gap:8px;align-items:center;margin-bottom:14px;font-size:12px}
.track{font-weight:800;padding:3px 9px;border-radius:999px;color:#04101f}
.track.ios{background:var(--ios)}
.track.dsa{background:var(--dsa)}
.topic{color:var(--muted);text-transform:capitalize}
.new,.review{margin-left:auto;font-weight:700;letter-spacing:.06em;padding:3px 9px;border-radius:999px;font-size:11px}
.new{background:rgba(79,140,255,.16);color:#7fb0ff;border:1px solid rgba(79,140,255,.4)}
.review{background:rgba(139,151,163,.12);color:var(--muted);border:1px solid var(--line)}
.review.angle{background:rgba(255,159,10,.14);color:#ffce85;border-color:rgba(255,159,10,.4)}
.front{font-size:21px;line-height:1.35;margin:0 0 18px}
code{background:#0b0f14;border:1px solid var(--line);border-radius:6px;padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:#a9c7ff}
pre{background:#0b0f14;border:1px solid var(--line);border-radius:12px;padding:14px;overflow:auto;margin:0 0 14px}
pre code{background:none;border:none;padding:0;color:#cdd9e5;display:block;white-space:pre;font-size:13.5px;line-height:1.5}
button{font:inherit;cursor:pointer;border:none;border-radius:12px}
.primary{background:var(--accent);color:#fff;padding:13px 18px;font-weight:600}
.primary.big{width:100%;padding:14px;font-size:16px}
.primary:hover{filter:brightness(1.08)}
.back{animation:rise .2s ease}
.back ul{margin:0 0 14px;padding-left:20px}
.back li{margin:7px 0}
.why{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;color:#d7e0ea;margin:0 0 4px}
.learn{display:inline-block;margin:8px 0 2px;color:var(--accent);text-decoration:none;font-weight:600}
.learn:hover{text-decoration:underline}
.quiz{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.quiz h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.qblock{margin-bottom:14px}
.stem{font-weight:600;margin:0 0 10px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:11px 14px}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt:disabled{cursor:default;opacity:.96}
.opt.correct{background:rgba(46,204,113,.16);border-color:var(--good);color:#b7f5d0}
.opt.wrong{background:rgba(255,92,92,.14);border-color:var(--bad);color:#ffc4c4}
.explain{display:none;margin:10px 0 0;color:var(--muted);font-size:14px}
.explain.show{display:block}
.grades{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.ghint{margin:0 0 10px;color:var(--muted);font-size:13.5px}
.grow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grade{padding:12px 6px;font-weight:700;color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px}
.grade small{font-weight:500;opacity:.8;font-size:10px}
.grade.again{background:#c0392b}
.grade.hard{background:#b9770e}
.grade.good{background:#1f8b4c}
.grade.easy{background:#2d6cdf}
.grade:hover{filter:brightness(1.12)}
.done{text-align:center}
.done .emoji{font-size:44px}
.done h2{margin:6px 0 10px}
.muted{color:var(--muted)}
.foot{max-width:680px;margin:0 auto;padding:10px 16px 40px;display:flex;justify-content:space-between;
  align-items:center;color:var(--muted);font-size:13px}
.link{background:none;color:var(--muted);text-decoration:underline;padding:0}
.link:hover{color:var(--text)}
/* tabs */
.tabs{display:flex;gap:6px;justify-content:center;padding:12px 16px 0}
.tab{background:var(--panel2);border:1px solid var(--line);color:var(--muted);padding:7px 20px;font-weight:600;font-size:14px}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab:hover:not(.active){border-color:var(--accent)}
/* overview / course map */
.ov-top h2{margin:0 0 12px}
.ov-top .ovstat{margin:12px 0 4px}
.bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:#0b0f14;border:1px solid var(--line)}
.bar .seg{display:block;height:100%}
.seg.mastered{background:var(--good)}
.seg.learning{background:var(--accent);opacity:.6}
.ov-track{margin-top:14px}
.ov-h{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ov-h h3{margin:0;font-size:17px}
.ovmini{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}
.ov-topics{margin-top:14px;display:flex;flex-direction:column;gap:15px}
.ov-topic-h{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:7px}
.ov-cards{display:flex;flex-direction:column;gap:6px}
.ovrow{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
.ovrow .dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#3a4654}
.ovrow.learning .dot{background:var(--accent)}
.ovrow.mastered .dot{background:var(--good)}
.ovfront{flex:1;font-size:14px;line-height:1.35}
.ovrow.new .ovfront{color:var(--muted)}
.ovmeta{flex:0 0 auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.ovlearn{flex:0 0 auto;text-decoration:none;opacity:.7;font-size:15px}
.ovlearn:hover{opacity:1}
/* 1-month plan weeks */
.dayline{margin:10px 0 0;font-size:12.5px}
.ov-week{margin-top:14px;border-left:3px solid var(--line)}
.ov-week.active{border-left-color:var(--accent)}
.ov-week.done{border-left-color:var(--good)}
.wk-h{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.wk-no{font-weight:800;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.wk-badge{margin-left:auto;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.wk-badge.active{color:#7fb0ff;border-color:rgba(79,140,255,.4);background:rgba(79,140,255,.12)}
.wk-badge.done{color:#b7f5d0;border-color:var(--good);background:rgba(46,204,113,.14)}
.ov-week h3{margin:4px 0 12px;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--muted)}
.chip.dsa{border-color:rgba(255,159,10,.35);color:#ffce85}
.roadmap{margin-top:14px}
/* model answer + quiz code */
.answer{background:rgba(46,204,113,.07);border:1px solid rgba(46,204,113,.25);border-radius:12px;padding:10px 14px;margin:0 0 12px}
.alabel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#7be0a4;margin-bottom:5px;font-weight:700}
.answer p{margin:0;color:#d7e0ea;font-size:14px;line-height:1.5}
.qblock .codeblock{margin:0 0 10px}
/* worked examples: code + printed output */
.examples{margin:2px 0 14px}
.examples h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ex{margin-bottom:16px}
.ex .codeblock{margin:0;border-radius:12px 12px 0 0;border-bottom:none}
.out{display:flex;align-items:flex-start;gap:8px;background:#08120c;border:1px solid rgba(46,204,113,.28);border-top:none;border-radius:0 0 12px 12px;padding:9px 12px}
.outlabel{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7be0a4;padding-top:3px}
.outcode{background:none;border:none;padding:0;color:#b7f5d0;white-space:pre-wrap;font-size:13px;line-height:1.5;display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.exnote{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:480px){
  .front{font-size:19px}
  .grow{grid-template-columns:repeat(2,1fr)}
  .brand span{display:none}
  .ovmeta{display:none}
}