: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; } }

.header-actions { display:flex; align-items:center; gap:22px; }
.language-toggle { display:flex; align-items:center; gap:6px; border:0; border-bottom:1px solid var(--line); padding:5px 0; background:transparent; color:var(--purple-dark); font-size:11px; font-weight:700; }
.language-toggle span:first-child { font-size:17px; line-height:1; }
.language-toggle:hover { color:var(--purple); }
.code-diagram { width:205px; padding:25px 22px; border:1px solid var(--purple); background:rgba(238,227,251,.8); transform:rotate(-6deg); box-shadow:12px 12px 0 rgba(121,25,209,.1); }
.code-diagram span { display:block; padding:9px 0; border-bottom:1px solid #d4bce9; color:var(--purple-dark); font-family:monospace; font-size:13px; }
.code-diagram span:last-child { border-bottom:0; }
.plot-diagram { width:190px; height:190px; position:relative; border-left:1px solid var(--ink); border-bottom:1px solid var(--ink); background-image:linear-gradient(rgba(121,25,209,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(121,25,209,.13) 1px,transparent 1px); background-size:38px 38px; transform:rotate(4deg); }
.plot-diagram:after { content:''; position:absolute; width:210px; border-top:2px solid var(--purple); left:0; top:100px; transform:rotate(-25deg); transform-origin:left; }
.plot-diagram i,.plot-diagram b { position:absolute; z-index:1; width:12px; height:12px; border-radius:50%; border:2px solid var(--ink); background:var(--paper); }
.plot-diagram i:nth-child(1) { left:18px; top:130px; }.plot-diagram i:nth-child(2) { left:61px; top:106px; }.plot-diagram i:nth-child(3) { left:103px; top:80px; }.plot-diagram i:nth-child(4) { left:150px; top:52px; }
.plot-diagram b:nth-of-type(1) { left:33px; top:141px; background:var(--pink); }.plot-diagram b:nth-of-type(2) { left:78px; top:107px; background:var(--pink); }.plot-diagram b:nth-of-type(3) { left:121px; top:81px; background:var(--pink); }.plot-diagram b:nth-of-type(4) { left:166px; top:43px; background:var(--pink); }
.lesson-panel { max-width:1000px; margin:auto; padding:65px 5vw 100px; }
.lesson-toolbar { border-bottom:1px solid var(--line); padding-bottom:20px; }
.back-button { border:0; border-bottom:1px solid var(--line); padding:0 0 6px; background:transparent; color:var(--purple-dark); font-size:13px; font-weight:700; }
.lesson-panel h2 { max-width:820px; margin:45px 0 20px; font-size:clamp(44px,6vw,78px); line-height:.98; }
.lesson-intro { max-width:700px; color:var(--muted); font-size:18px; line-height:1.6; }
.lesson-sections { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:55px; background:var(--line); border-top:1px solid var(--line); }
.lesson-section { min-height:380px; padding:30px; background:var(--paper); }
.lesson-section h3 { margin:0 0 22px; font-size:23px; line-height:1.15; letter-spacing:-.04em; }
.lesson-section ol { padding-left:20px; color:var(--muted); line-height:1.6; }
.lesson-section li { margin:10px 0; padding-left:4px; }
.lesson-section pre { overflow:auto; margin:25px 0 0; padding:18px; color:#fdfbff; background:var(--ink); font-size:12px; line-height:1.6; white-space:pre; }
.lesson-link { display:inline-block; margin-top:24px; color:var(--purple-dark); font-size:12px; font-weight:700; text-decoration:none; border-bottom:1px solid var(--purple); padding-bottom:4px; }
.troubleshooting { margin-top:25px; border-top:1px solid var(--line); }
.troubleshooting div { padding:14px 0; border-bottom:1px solid var(--line); }
.troubleshooting strong { font-size:13px; }
.troubleshooting p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.lesson-closing { margin:45px 0 0; padding:25px; border-left:3px solid var(--purple); background:var(--lilac); color:var(--ink); line-height:1.6; }
@media (max-width:850px) { .header-actions { gap:10px; }.lesson-panel { padding:55px 24px 75px; }.lesson-sections { grid-template-columns:1fr; }.lesson-section { min-height:0; } }

.tutorial-page .site-header { position:sticky; }
.tutorial-layout { display:grid; grid-template-columns:240px minmax(0,860px); gap:75px; max-width:1280px; margin:0 auto; padding:70px 5vw 110px; align-items:start; }
.tutorial-index { position:sticky; top:110px; border-top:2px solid var(--ink); padding-top:18px; }
.tutorial-index .eyebrow { margin-bottom:22px; }
.tutorial-index nav { display:grid; gap:3px; }
.tutorial-index-link { display:grid; grid-template-columns:30px 1fr; gap:9px; padding:12px 9px; color:var(--muted); text-decoration:none; font-size:13px; line-height:1.35; border-left:2px solid transparent; }
.tutorial-index-link span { color:var(--purple); font-family:var(--display); font-size:11px; }
.tutorial-index-link:hover,.tutorial-index-link.is-current { color:var(--ink); border-left-color:var(--purple); background:var(--lilac); }
.page-index { margin-top:34px; padding-top:20px; border-top:1px solid var(--line); }
.page-index p { margin:0 0 13px; color:var(--purple-dark); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; }
.page-index a { display:block; padding:5px 0; color:var(--muted); font-size:12px; line-height:1.35; text-decoration:none; }
.page-index a:hover { color:var(--purple-dark); }
.tutorial-article { min-width:0; }
.tutorial-article > h1 { max-width:800px; margin:0 0 28px; font-size:clamp(48px,6vw,86px); line-height:.95; }
.tutorial-article > p:first-of-type { max-width:700px; margin:0 0 58px; color:var(--muted); font-size:19px; line-height:1.65; }
.tutorial-article h2 { margin:70px 0 20px; padding-top:20px; border-top:1px solid var(--line); font-size:34px; line-height:1.05; }
.tutorial-article h3 { margin:42px 0 13px; font-size:22px; line-height:1.15; letter-spacing:-.04em; }
.tutorial-article p,.tutorial-article li { max-width:700px; color:var(--muted); line-height:1.7; }
.tutorial-article ol,.tutorial-article ul { display:block; max-width:700px; padding-left:24px; }
.tutorial-article li { padding-left:6px; margin:9px 0; }
.tutorial-article a { color:var(--purple-dark); font-weight:700; }
.tutorial-article code { padding:2px 5px; color:var(--purple-dark); background:var(--lilac); font-family:monospace; font-size:.9em; }
.tutorial-article pre { max-width:760px; overflow:auto; margin:28px 0; padding:22px 24px; color:#fdfbff; background:var(--ink); line-height:1.65; }
.tutorial-article pre code { padding:0; color:inherit; background:transparent; font-size:13px; white-space:pre; }
.platform-code { position:relative; max-width:760px; }
.platform-code[hidden] { display:none; }
.platform-controls { display:flex; justify-content:flex-end; gap:3px; min-height:30px; padding:5px 8px; background:var(--ink); }
.platform-controls button { border:0; padding:4px 7px; color:#b8a8c4; background:transparent; font-size:11px; line-height:1; }
.platform-controls button:hover,.platform-controls button.is-selected { color:white; background:var(--purple); }
.platform-controls button span { margin-left:3px; }
.platform-code pre { margin:0; border-top:1px solid rgba(255,255,255,.12); }
.tutorial-article img { display:block; width:100%; max-width:860px; height:auto; margin:30px 0 42px; border:1px solid var(--line); box-shadow:0 14px 30px rgba(33,21,47,.1); }
@media (max-width:850px) { .tutorial-layout { grid-template-columns:1fr; gap:35px; padding:48px 24px 75px; }.tutorial-index { position:static; }.tutorial-index nav { grid-template-columns:repeat(2,minmax(0,1fr)); }.tutorial-article > h1 { font-size:52px; }.tutorial-article h2 { margin-top:52px; } }
@media (max-width:520px) { .tutorial-page .main-nav { gap:10px; }.tutorial-page .github-link { display:none; }.tutorial-index nav { grid-template-columns:1fr; }.tutorial-article > h1 { font-size:45px; }.tutorial-article > p:first-of-type { font-size:17px; }.tutorial-article pre { margin-left:-4px; margin-right:-4px; padding:17px; } }