:root{
  --ink:oklch(24% .02 275);--ink-soft:oklch(45% .02 275);--ink-faint:oklch(60% .015 275);
  --paper:oklch(98.3% .004 275);--card:oklch(99.4% .002 275);
  --line:oklch(91% .01 275);--indigo:oklch(60% .17 275);--indigo-deep:oklch(52% .19 275);
  --indigo-wash:oklch(96% .025 275);--header:#0e1524;--header-line:#2a3552;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:16px/1.65 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--indigo-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* header: CourseBuilder's own chrome */
.top{background:var(--header);border-bottom:1px solid var(--header-line);position:sticky;top:0;z-index:50}
.top-in{max-width:1200px;margin:0 auto;height:60px;padding:0 20px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand img{width:28px;height:28px}
.brand h1{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1}
.brand p{font-size:7px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:3px;color:#fff}
.top-right{display:flex;align-items:center;gap:var(--sp-4)}
.top-search{position:relative}
.top-search input{width:min(320px,38vw);height:36px;border-radius:10px;border:1px solid var(--header-line);background:#182238;color:#e8ecf7;padding:0 12px 0 34px;font-size:13.5px;outline:none}
.top-search input::placeholder{color:#71809f}
.top-search input:focus{border-color:var(--indigo)}
.top-search svg{position:absolute;left:11px;top:50%;translate:0 -50%;width:14px;height:14px;stroke:#71809f}
.open-app{font-size:13px;font-weight:600;color:#c9d4ee;white-space:nowrap}
.open-app:hover{color:#fff;text-decoration:none}

/* search results dropdown */
.hits{position:absolute;top:calc(100% + 8px);right:0;width:min(460px,92vw);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px oklch(30% .05 275/.18);overflow:hidden;display:none;max-height:60vh;overflow-y:auto}
.hits.on{display:block}
.hit{display:block;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.hit:last-child{border-bottom:0}
.hit:hover,.hit.sel{background:var(--indigo-wash);text-decoration:none}
.hit .h-page{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--indigo-deep)}
.hit .h-title{font-size:14.5px;font-weight:600;margin:2px 0}
.hit .h-snip{font-size:12.5px;color:var(--ink-soft)}
.hit mark{background:oklch(90% .08 275);color:inherit;border-radius:3px;padding:0 1px}
.no-hit{padding:14px 16px;font-size:13.5px;color:var(--ink-soft)}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* index hero */
.hero{padding:var(--sp-16) 0 var(--sp-12);text-align:left}
.hero h2{font-weight:300;letter-spacing:-.022em;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08}
.hero h2 b{font-weight:300;color:var(--indigo)}
.hero p.sub{margin-top:var(--sp-3);font-size:17px;color:var(--ink-soft);max-width:52ch}
.hero-search{margin-top:var(--sp-8);position:relative;max-width:640px}
.hero-search input{width:100%;height:56px;border-radius:16px;border:1px solid var(--line);background:var(--card);font-size:16.5px;padding:0 18px 0 50px;outline:none;box-shadow:0 2px 14px oklch(30% .04 275/.05)}
.hero-search input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px oklch(60% .17 275/.18)}
.hero-search svg{position:absolute;left:18px;top:50%;translate:0 -50%;width:19px;height:19px;stroke:var(--ink-faint)}
.hero-search .hits{left:0;right:auto;width:100%}

/* index step rows */
.path{padding:var(--sp-6) 0 var(--sp-24);display:grid;gap:var(--sp-3)}
.step-row{display:grid;grid-template-columns:52px 1fr 168px;gap:var(--sp-6);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 22px;color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease}
.step-row:hover{text-decoration:none;border-color:var(--indigo);box-shadow:0 10px 34px oklch(30% .06 275/.10)}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--indigo);color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center}
.step-row h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.step-row h3 span{color:var(--indigo);font-weight:400}
.step-row p{font-size:13.5px;color:var(--ink-soft);margin-top:2px}
.step-thumb{width:168px;aspect-ratio:16/9;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
@media(max-width:720px){.step-row{grid-template-columns:44px 1fr}.step-thumb{display:none}}

/* article pages */
.crumb{padding:var(--sp-8) 0 0;font-size:13px;color:var(--ink-faint)}
.crumb a{color:var(--ink-faint)}
.stepchip{display:inline-block;margin-top:var(--sp-6);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo-deep);background:var(--indigo-wash);border-radius:999px;padding:5px 12px}
.page-h1{margin-top:var(--sp-4);font-weight:300;letter-spacing:-.022em;font-size:clamp(2rem,4.6vw,3rem);line-height:1.1}
.page-h1 b{font-weight:300;color:var(--indigo)}
.page-tail{margin-top:var(--sp-2);font-weight:300;letter-spacing:-.02em;font-size:clamp(1.35rem,2.8vw,1.9rem);line-height:1.25;color:var(--indigo)}
.lead{margin-top:var(--sp-4);font-size:17.5px;color:var(--ink-soft);max-width:62ch}
.player{margin-top:var(--sp-8);border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0e1524;box-shadow:0 22px 60px oklch(30% .06 275/.14)}
.player video{display:block;width:100%;aspect-ratio:16/9}
.duration{margin-top:var(--sp-3);font-size:12.5px;color:var(--ink-faint)}
.toc{margin-top:var(--sp-12);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:13.5px}
.toc a{color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--card)}
.toc a:hover{border-color:var(--indigo);color:var(--indigo-deep);text-decoration:none}
article{padding:var(--sp-6) 0 var(--sp-16)}
article h2{margin-top:var(--sp-12);font-size:23px;font-weight:600;letter-spacing:-.014em;scroll-margin-top:84px}
article p{margin-top:var(--sp-4);max-width:70ch;color:oklch(32% .02 275)}
.ui{display:inline-block;font-size:.82em;font-weight:600;color:var(--indigo-deep);background:var(--indigo-wash);border:1px solid oklch(88% .04 275);border-radius:7px;padding:1px 7px;white-space:nowrap}
.pn{margin:var(--sp-16) auto var(--sp-24);display:flex;justify-content:space-between;gap:var(--sp-4)}
.pn a{flex:0 1 auto;min-width:170px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 22px;color:var(--ink)}
.pn a:hover{border-color:var(--indigo);text-decoration:none}
.pn .lbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.pn .ttl{font-size:15.5px;font-weight:600;margin-top:3px}
.pn a.next{margin-left:auto}
footer{border-top:1px solid var(--line);padding:var(--sp-8) 0 var(--sp-12);font-size:12.5px;color:var(--ink-faint)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3)}