:root{
  --teal:#02ADA5; --teal-dark:#0B4F4B; --blue:#0D55A7; --red:#C80000;
  --orange:#F5A21D; --ink:#1F2933; --muted:#5B7284;
  --bg:#F6F8F9; --card:#FFFFFF; --line:#DCE4E7; --code-bg:#0F1B22;
  --green:#1F9D55;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#111A1F; --card:#182429; --line:#2B3A41; --ink:#E8EEF0; --muted:#9BB0B9; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Verdana,Roboto,sans-serif;
}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
code,kbd,pre{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}

/* chevron strip */
.chev{display:flex;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.chev span{flex:1;text-align:center;padding:7px 4px;cursor:default}
.chev span:nth-child(1){background:var(--blue)}
.chev span:nth-child(2){background:var(--red)}
.chev span:nth-child(3){background:var(--orange)}
.chev span:nth-child(4){background:var(--teal)}

/* header */
header.hero{background:var(--teal-dark);color:#fff;padding:46px 0 40px}
header.hero .eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#8FD9D5;margin:0 0 10px;font-weight:700}
header.hero h1{margin:0 0 12px;font-size:clamp(30px,5.5vw,46px);line-height:1.12;letter-spacing:-.02em}
header.hero p.sub{margin:0;color:#B9E4E1;font-size:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#EAF7F6;
  border-radius:999px;padding:5px 13px;font-size:13px}

/* sticky progress */
.progress-bar{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 1px 8px rgba(0,0,0,.06)}
.progress-inner{display:flex;align-items:center;gap:14px;padding:10px 20px;max-width:880px;margin:0 auto}
.track{flex:1;height:9px;background:var(--line);border-radius:999px;overflow:hidden}
.track > i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--blue));
  border-radius:999px;transition:width .35s ease}
.progress-inner b{font-size:13px;color:var(--muted);white-space:nowrap;font-weight:700}
.progress-inner button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:6px;
  font-size:12px;padding:4px 9px;cursor:pointer}
.progress-inner button:hover{border-color:var(--teal);color:var(--teal)}

/* sections */
section{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin:22px 0}
h2{font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
h2 .num{color:var(--teal);font-variant-numeric:tabular-nums}
h3{font-size:18px;margin:26px 0 8px}
p{margin:10px 0}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:2px}
@media (prefers-color-scheme: dark){ a{color:#6FB0F5} }
.lede{color:var(--muted);margin-top:0}

/* callouts */
.cal{border-left:4px solid;border-radius:0 10px 10px 0;padding:13px 16px;margin:16px 0;font-size:15px}
.cal b{display:block;margin-bottom:3px;letter-spacing:.03em;text-transform:uppercase;font-size:12px}
.cal.tip{border-color:var(--teal);background:rgba(2,173,165,.09)}
.cal.tip b{color:var(--teal)}
.cal.warn{border-color:var(--red);background:rgba(200,0,0,.08)}
.cal.warn b{color:var(--red)}
.cal.info{border-color:var(--blue);background:rgba(13,85,167,.08)}
.cal.info b{color:var(--blue)}
.cal.note{border-color:var(--orange);background:rgba(245,162,29,.11)}
.cal.note b{color:#B87708}

/* tables */
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
tbody tr:hover{background:rgba(2,173,165,.05)}

/* steps */
.step{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line)}
.step:first-of-type{border-top:none}
.step .idx{flex:0 0 30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:14px;margin-top:2px}
.step .body{flex:1;min-width:0}
.step h4{margin:2px 0 4px;font-size:16.5px}

/* tabs */
.tabs{display:flex;gap:6px;margin:18px 0 0;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 16px;
  border-radius:9px 9px 0 0;cursor:pointer;font-size:15px;font-weight:600;border-bottom:none}
.tabs button[aria-selected="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.panel{border:1px solid var(--line);border-radius:0 10px 10px 10px;padding:18px 20px;margin-top:-1px}
.panel[hidden]{display:none}

/* code */
pre.code{background:var(--code-bg);color:#E6EDF3;padding:16px 18px;border-radius:10px;overflow-x:auto;
  font-size:14.5px;line-height:1.7;margin:14px 0;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.k{color:#FF7B72}.f{color:#D2A8FF}.s{color:#A5D6FF}.n{color:#79C0FF}.c{color:#8B949E}

/* details */
details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:12px 0}
details[open]{border-color:var(--teal)}
summary{cursor:pointer;font-weight:600;font-size:15.5px}
summary::marker{color:var(--teal)}

/* misc */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.mini{border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.mini h4{margin:0 0 4px;font-size:15px}
.mini p{margin:0;font-size:14px;color:var(--muted)}
footer{background:var(--teal-dark);color:#B9E4E1;padding:30px 0;margin-top:34px;text-align:center;font-size:14px}
footer a{color:#8FD9D5}

/* site nav */
.sitenav{position:relative;z-index:60;background:#08312F;border-bottom:1px solid rgba(255,255,255,.08)}
.sitenav .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.sitenav a.brand{color:#fff;font-weight:700;text-decoration:none;font-size:15px;margin-right:auto;letter-spacing:-.01em}
.sitenav a.brand span{color:var(--teal)}
.sitenav a.nl{color:#B9E4E1;text-decoration:none;font-size:14px;padding:5px 12px;border-radius:7px}
.sitenav a.nl:hover{background:rgba(255,255,255,.09);color:#fff}
.sitenav a.nl[aria-current="page"]{background:var(--teal);color:#fff}
.navsel{position:relative}
.navsel>summary{list-style:none;cursor:pointer;color:#B9E4E1;font-size:14px;line-height:1.3;
  padding:5px 12px;border:1px solid rgba(255,255,255,.24);border-radius:7px;
  display:flex;align-items:center;gap:10px;max-width:min(58vw,340px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navsel>summary::-webkit-details-marker{display:none}
.navsel>summary::after{content:"";flex:0 0 auto;width:7px;height:7px;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.navsel>summary:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.4)}
.navsel[open]>summary{background:var(--teal);color:#fff;border-color:var(--teal)}
.navsel[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.navmenu{position:absolute;z-index:70;top:calc(100% + 6px);left:0;
  min-width:320px;max-height:min(78vh,540px);overflow-y:auto;
  background:#08312F;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:6px;
  box-shadow:0 14px 34px rgba(0,0,0,.42)}
.navmenu a{display:block;color:#B9E4E1;text-decoration:none;font-size:14px;line-height:1.35;
  padding:8px 12px;border-radius:7px}
.navmenu a b{font-weight:600;color:#fff}
.navmenu a:hover{background:rgba(255,255,255,.1);color:#fff}
.navmenu a[aria-current="page"]{background:var(--teal);color:#fff}
@media (max-width:600px){
  .sitenav .wrap{gap:6px}
  .sitenav a.brand{order:0;flex:1 1 100%;margin-right:0}
  .navsel{order:1;position:static;flex:1 1 100%}
  .navsel>summary{max-width:none;width:100%}
  .sitenav a.nl{order:2;padding-left:2px;padding-right:14px}
  .navmenu{left:20px;right:20px;min-width:0;width:auto}
  .navmenu a{white-space:normal}
}

/* step nav */
.stepnav{display:flex;gap:12px;flex-wrap:wrap;margin:44px 0 10px}
.stepnav a{flex:1 1 240px;min-width:0;display:block;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px 18px;transition:.15s}
.stepnav a:hover{border-color:var(--teal);transform:translateY(-2px);color:inherit}
.stepnav a small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.stepnav a:hover small{color:var(--teal)}
.stepnav a b{display:block;font-size:15.5px;line-height:1.35;font-weight:600}
.stepnav a.next{text-align:right}

/* landing */
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.cta{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;font-weight:600;
  padding:12px 24px;border-radius:10px;font-size:16px}
.cta:hover{background:#019a93;color:#fff}
.cta.alt{background:transparent;border:1px solid rgba(255,255,255,.4);color:#EAF7F6}
.cta.alt:hover{background:rgba(255,255,255,.12);color:#fff}
.actlist{display:grid;gap:12px}
.act{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:12px;
  padding:15px 18px;text-decoration:none;color:inherit;transition:.15s;min-width:0}
.act:hover{border-color:var(--teal);transform:translateX(3px)}
.act .n{flex:0 0 40px;height:40px;border-radius:11px;background:var(--teal);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:17px}
.act .t{flex:1;min-width:0}
.act .t b{display:block;font-size:16px}
.act .t small{color:var(--muted);font-size:13.5px}

/* win box */
.win{background:rgba(31,157,85,.12);border:1px solid var(--green);border-radius:11px;padding:16px 18px;
  margin:16px 0;font-size:15px}

/* teacher gate */
.gate{max-width:560px;margin:60px auto;text-align:center;border:1px solid var(--line);
  border-radius:14px;padding:34px 28px;background:var(--card)}
.gate h2{margin:0 0 8px}
.gate p{color:var(--muted)}
.tbanner{background:rgba(245,162,29,.14);border:1px solid var(--orange);border-radius:12px;
  padding:14px 18px;margin:20px 0;font-size:15px}
.tbanner b{color:#B87708}

/* concept viz */
.concept-viz{background:rgba(2,173,165,.06);border:1px solid rgba(2,173,165,.2);border-radius:12px;padding:1.5rem 2rem;margin:1.5rem 0}
.concept-viz h3{margin-top:0;color:var(--teal-dark)}

/* code line numbers */
.code-wrap{position:relative;margin:14px 0}
.code-wrap pre.code{padding-left:3.5rem;margin:0}
.ln-col{position:absolute;left:0;top:0;bottom:0;width:3rem;padding:16px 0;
  background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.08);
  border-radius:10px 0 0 10px;overflow:hidden}
.ln-col span{display:block;height:1.7em;line-height:1.7;text-align:right;padding-right:.6rem;
  font-size:13px;color:#4a5568;font-family:"SFMono-Regular",Consolas,monospace}
.ln-col span.new{color:var(--orange)}
pre.code .new-line{background:rgba(245,162,29,.12);display:inline-block;width:100%;
  border-left:3px solid var(--orange);margin-left:-3px;padding-left:3px}

/* quiz */
.q{border:1px solid var(--line);border-radius:11px;padding:16px 18px;margin:14px 0}
.q p.qt{font-weight:600;margin:0 0 10px}
.opt{display:block;width:100%;text-align:left;border:1px solid var(--line);background:transparent;
  color:var(--ink);border-radius:8px;padding:10px 13px;margin:6px 0;cursor:pointer;font-size:15px}
.opt:hover{border-color:var(--teal)}
.opt.right{border-color:var(--green);background:rgba(31,157,85,.13)}
.opt.wrong{border-color:var(--red);background:rgba(200,0,0,.1)}

/* extra code display */
.code-block{background:var(--code-bg);color:#E6EDF3;padding:16px 18px;border-radius:10px;
  overflow-x:auto;font-size:14px;line-height:1.7;margin:14px 0;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
.codebox{position:relative;margin:14px 0}
.copybtn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);color:#aaa;border-radius:6px;
  padding:4px 10px;font-size:12px;cursor:pointer}
.copybtn:hover{background:rgba(255,255,255,.2);color:#fff}
.ln{color:#4a5568;display:inline-block;width:2.5em;text-align:right;margin-right:.8em;
  font-size:13px;user-select:none}

/* ---------- code line numbers ---------- */
.code-ln {
  display: inline-block;
  width: 2.8em;
  padding-right: .7em;
  margin-right: .5em;
  color: #3d4a56;
  text-align: right;
  border-right: 1px solid rgba(255,255,255,.1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}