:root { --ink:#21152f; --muted:#6f6479; --line:#e4ddec; --paper:#fdfbff; --purple:#7919d1; --purple-dark:#54108f; --lilac:#eee3fb; --pink:#f39bd1; --blue:#b7d8ff; --display:'Space Grotesk',sans-serif; --body:'DM Sans',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); font-size:16px; }
button,a { font:inherit; } button { cursor:pointer; }
.site-header { height:78px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(251,252,250,.94); position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); }
.wordmark { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:-.03em; }.wordmark img { width:31px; height:31px; object-fit:contain; }.wordmark>span span { color:var(--purple); }
.main-nav { display:flex; align-items:center; gap:30px; height:100%; }.nav-link { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); padding:28px 0 25px; font-size:13px; font-weight:600; transition:color .2s,border-color .2s; }.nav-link:hover,.nav-link.is-active { color:var(--ink); border-bottom-color:var(--purple); }.nav-link span { margin-left:3px; font-size:10px; color:var(--purple); }.github-link,.text-link { color:var(--ink); text-decoration:none; font-size:13px; font-weight:600; }.github-link span,.text-link span { color:var(--purple); margin-left:5px; }.tab-panel { display:none; }.tab-panel.is-visible { display:block; }
.hero { min-height:calc(100vh - 78px); padding:10vh 5vw 42px; position:relative; display:grid; grid-template-columns:1fr 1.05fr; gap:5vw; align-content:center; overflow:hidden; background-image:linear-gradient(rgba(228,221,236,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(228,221,236,.55) 1px,transparent 1px); background-size:48px 48px; }.hero:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 21% 38%,rgba(238,227,251,.8),transparent 25%),linear-gradient(90deg,var(--paper) 3%,rgba(253,251,255,.65) 48%,transparent 100%); pointer-events:none; }.hero-copy,.hero-visual,.hero-footer { position:relative; z-index:1; }.eyebrow { margin:0 0 20px; color:var(--purple-dark); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; }.eyebrow-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--purple); } h1,h2,h3 { font-family:var(--display); letter-spacing:-.06em; }.hero h1 { max-width:650px; margin:0; font-size:clamp(52px,7vw,104px); line-height:.94; font-weight:600; }.hero h1 em,h2 em { color:var(--purple); font-style:normal; }.hero-lede { max-width:440px; margin:30px 0 34px; color:var(--muted); font-size:18px; line-height:1.55; }.hero-actions { display:flex; align-items:center; gap:25px; }.button { border:0; padding:14px 18px; font-size:13px; font-weight:700; }.button-dark { color:white; background:var(--purple-dark); }.button-dark span { margin-left:17px; color:var(--pink); }.text-link { border-bottom:1px solid var(--line); padding-bottom:5px; }
.hero-visual { min-height:430px; display:flex; justify-content:center; align-items:center; }.cell-diagram { width:210px; height:210px; position:relative; border:1px solid #a77ad0; border-radius:48% 52% 45% 55%; transform:rotate(-22deg); background:rgba(238,227,251,.75); }.cell-core { position:absolute; width:72px; height:72px; left:69px; top:69px; border:1px solid var(--purple); border-radius:50%; background:rgba(255,255,255,.55); }.cell-core:after { content:''; position:absolute; width:22px; height:22px; left:24px; top:24px; border-radius:50%; background:var(--purple); }.cell-ring { position:absolute; border:1px dashed rgba(121,25,209,.5); border-radius:50%; }.ring-one { width:250px; height:135px; left:-21px; top:35px; transform:rotate(50deg); }.ring-two { width:145px; height:260px; left:31px; top:-27px; transform:rotate(32deg); }.cell-dot { position:absolute; width:10px; height:10px; background:var(--purple); border-radius:50%; }.dot-one { left:24px; top:42px; }.dot-two { left:175px; top:105px; background:var(--blue); }.dot-three { left:92px; top:185px; background:var(--purple-dark); }.path-line { width:75px; border-top:1px dashed var(--purple); transform:rotate(-22deg); margin:0 18px; }.network-diagram { width:180px; height:180px; position:relative; background-image:linear-gradient(30deg,transparent 48%,rgba(121,25,209,.5) 49%,rgba(121,25,209,.5) 51%,transparent 52%),linear-gradient(-30deg,transparent 48%,rgba(121,25,209,.5) 49%,rgba(121,25,209,.5) 51%,transparent 52%); background-size:65px 70px; }.network-diagram span,.network-diagram b { position:absolute; width:13px; height:13px; border:2px solid var(--ink); border-radius:50%; background:var(--paper); }.network-diagram span:nth-child(1) { left:4px; top:18px; }.network-diagram span:nth-child(2) { left:4px; top:82px; }.network-diagram span:nth-child(3) { left:4px; top:146px; }.network-diagram span:nth-child(4) { left:80px; top:18px; }.network-diagram span:nth-child(5) { left:80px; top:82px; }.network-diagram span:nth-child(6) { left:80px; top:146px; }.network-diagram span:nth-child(7) { right:4px; top:50px; }.network-diagram span:nth-child(8) { right:4px; top:114px; }.network-diagram b { width:7px; height:7px; border:0; background:var(--purple); }.network-diagram b:nth-of-type(1) { left:41px; top:48px; }.network-diagram b:nth-of-type(2) { left:119px; top:77px; }.network-diagram b:nth-of-type(3) { left:42px; top:125px; }.visual-label { position:absolute; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.label-top { top:18px; left:10%; }.label-bottom { right:2%; bottom:28px; }.visual-caption { position:absolute; bottom:0; left:50%; transform:translateX(-50%); color:var(--muted); font-size:11px; white-space:nowrap; }.visual-caption span { color:var(--purple); padding:0 8px; }.hero-footer { grid-column:1 / -1; display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:18px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:10px; }.hero-footer b { color:var(--purple); padding:0 7px; }
.content-section { max-width:1280px; min-height:calc(100vh - 78px); margin:auto; padding:100px 5vw 80px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; padding-bottom:55px; }.section-heading h2 { max-width:600px; margin:0; font-size:clamp(43px,6vw,76px); line-height:.98; font-weight:600; }.section-intro { max-width:330px; margin:0; color:var(--muted); line-height:1.6; }.course-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }.course-list { border-top:1px solid var(--ink); }.course-row { display:grid; grid-template-columns:48px 1fr auto; gap:20px; align-items:center; width:100%; padding:22px 0; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; color:var(--ink); transition:padding .2s,background .2s; }.course-row:hover,.course-row.is-selected { padding-left:12px; padding-right:12px; background:var(--lilac); }.course-number { color:var(--purple); font-family:var(--display); font-size:14px; }.course-row h3 { margin:0 0 5px; font-size:20px; letter-spacing:-.04em; }.course-meta { margin:0; color:var(--muted); font-size:12px; }.course-arrow { color:var(--purple); font-size:22px; }.course-detail { min-height:360px; padding:30px; border-top:3px solid var(--purple); background:var(--lilac); }.detail-kicker,.resource-type { margin:0 0 18px; color:var(--purple-dark); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:700; }.course-detail h3 { margin:0 0 20px; font-size:36px; line-height:1; }.course-detail p { color:var(--muted); line-height:1.6; }.detail-outcomes { padding:18px 0 5px; margin:20px 0 0; border-top:1px solid #d6c4e7; }.detail-outcomes li { margin:10px 0; color:var(--ink); font-size:13px; line-height:1.4; }.detail-topics { display:flex; flex-wrap:wrap; gap:7px; margin-top:22px; }.topic { padding:7px 9px; color:var(--ink); background:white; font-size:11px; }.detail-links { display:flex; flex-wrap:wrap; gap:15px; margin-top:22px; }.detail-links a { color:var(--ink); font-size:12px; font-weight:700; text-decoration:none; border-bottom:1px solid var(--purple); padding-bottom:3px; }.loading { color:var(--muted); }
.resource-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--line); }.resource-card { position:relative; min-height:225px; padding:28px; color:var(--ink); text-decoration:none; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s; }.resource-card:hover { background:var(--lilac); }.resource-card h3 { max-width:270px; margin:0 0 14px; font-size:25px; }.resource-card p { max-width:310px; margin:0; color:var(--muted); line-height:1.5; font-size:14px; }.resource-arrow { position:absolute; right:28px; bottom:26px; color:var(--purple); font-size:21px; }.about-section { display:grid; grid-template-columns:1.3fr 1fr; align-content:center; gap:10vw; }.about-statement h2 { max-width:700px; margin:0; font-size:clamp(40px,5vw,70px); line-height:1.02; }.about-copy { max-width:410px; color:var(--muted); line-height:1.65; }.about-copy strong { color:var(--ink); }.portrait { display:block; width:112px; height:112px; margin-bottom:26px; border:4px solid var(--lilac); border-radius:50%; object-fit:cover; object-position:top; }.profile-links { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:25px; }.profile-links a { color:var(--purple-dark); font-size:12px; font-weight:700; text-decoration:none; border-bottom:1px solid var(--purple); padding-bottom:3px; }.signature { display:flex; align-items:center; gap:12px; margin-top:36px; color:var(--ink); text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:700; }.signature-line { width:42px; height:2px; background:var(--purple); }.site-footer { display:flex; justify-content:space-between; padding:23px 5vw; border-top:1px solid var(--line); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
@media (max-width:850px) { .site-header { padding:0 24px; }.main-nav { gap:15px; }.github-link { display:none; }.hero { grid-template-columns:1fr; padding:80px 24px 32px; }.hero-visual { min-height:300px; transform:scale(.8); transform-origin:center; }.hero-footer { grid-column:1; gap:12px; flex-direction:column; }.content-section { padding:70px 24px 55px; }.section-heading,.course-layout,.about-section { display:block; }.section-intro { margin-top:25px; }.course-detail { margin-top:35px; }.about-copy { margin-top:30px; }.site-footer { gap:12px; flex-direction:column; } }
@media (max-width:520px) { .site-header { height:65px; }.wordmark { font-size:14px; }.main-nav { gap:10px; }.nav-link { padding:22px 0 20px; font-size:11px; }.nav-link span { display:none; }.hero { min-height:calc(100vh - 65px); padding-top:55px; }.hero h1 { font-size:52px; }.hero-lede { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }.hero-visual { margin-left:-30px; transform:scale(.64); min-height:260px; }.hero-footer { font-size:9px; }.section-heading h2 { font-size:46px; }.course-row { grid-template-columns:30px 1fr 16px; gap:10px; }.course-row h3 { font-size:17px; }.resource-grid { grid-template-columns:1fr; }.about-statement h2 { font-size:42px; } }