:root { color-scheme:dark; --bg:#16151c; --text:#f2eff8; --muted:#b0aabd; --line:#383141; --accent:#b79af5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
header, main, footer { max-width:1180px; margin:auto; }
header { padding:29px 36px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font:24px Aldrich,sans-serif; display:flex; align-items:center; gap:17px; }
.brand span { font:500 10px Inter,sans-serif; letter-spacing:.15em; border-left:1px solid var(--line); padding-left:17px; color:var(--muted); }
nav { display:flex; gap:28px; font-size:12px; color:var(--muted); }
nav a:hover, footer a:hover { color:var(--text); text-decoration:underline; text-underline-offset:5px; }
main { padding:0 36px; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; padding:76px 0 84px; }
.eyebrow { font-size:11px; font-weight:500; color:var(--muted); margin:0 0 22px; }
.eyebrow>span { display:none; }
h1 { font-family:Sora,Inter,sans-serif; font-size:clamp(42px,4.7vw,61px); line-height:1.08; font-weight:600; letter-spacing:-.045em; margin:0 0 25px; }
h1 em { font-weight:600; font-style:normal; color:var(--accent); }
.intro { font-size:14px; max-width:440px; color:#c1bacb; line-height:1.9; }
p { margin:12px 0; }
.button { display:inline-flex; justify-content:space-between; align-items:center; gap:35px; padding:12px 20px; border:1px solid #8562ce; background:#7350b9; color:#fff; font-size:12px; font-weight:600; border-radius:6px; margin-top:16px; }
.button:hover { background:#8260c8; border-color:#a384df; }
.note { font-size:11px; color:var(--muted); margin-top:16px; }
.visual{border:1px solid #3a304d;border-radius:16px;background:linear-gradient(145deg,#252033,#101018);padding:20px;box-shadow:0 25px 100px #6d3cc01a;transform:rotate(-2deg)}.visual-top,.visual-bottom{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em;color:#b9aec9}.visual-top i{color:#bba3ff;font-style:normal}.pitch{position:relative;height:245px;margin:24px 0 18px;border:1px solid #81709655;background:repeating-linear-gradient(90deg,#ffffff02 0,#ffffff02 45px,transparent 45px,transparent 90px);overflow:hidden}.half{position:absolute;left:50%;height:100%;border-left:1px solid #81709655}.circle{position:absolute;border:1px solid #81709655;width:85px;height:85px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.area{position:absolute;top:25%;width:55px;height:50%;border:1px solid #81709655}.left{left:-1px}.right{right:-1px}.p{position:absolute;width:10px;height:10px;border-radius:50%;background:#c1a6ff;box-shadow:0 0 0 5px #b894ff15}.p1{left:22%;top:30%}.p2{left:35%;top:70%}.p3{left:65%;top:25%}.p4{left:75%;top:66%;background:#e5decc}.p5{left:48%;top:21%;background:#e5decc}.p6{left:80%;top:40%;background:#e5decc}.trajectory{position:absolute;left:25%;top:34%;width:37%;height:25%;border-top:2px dashed #b69ae7;transform:rotate(-10deg)}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#b299f6;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#201631;padding-left:3px;box-shadow:0 0 0 10px #b299f615}.annotation{position:absolute;bottom:13px;left:15px;font-size:9px;color:#c6bed2}.timeline{display:flex;gap:10px;align-items:center;font-size:8px;color:var(--muted)}.timeline>div{display:flex;gap:5px;flex:1;height:16px}.timeline i{background:#8c6eb9;width:22%;border-radius:2px}.timeline i:nth-child(even){background:#483b62;width:12%}.visual-bottom{margin-top:23px;font-size:8px}
.catalog { border-top:1px solid #8b69b5; padding:24px 0 50px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:32px; }
h2 { font-size:26px; font-weight:500; letter-spacing:-.035em; line-height:1.25; margin:0; }
.section-heading>p { font-size:12px; color:var(--muted); }
.course { display:grid; grid-template-columns:90px minmax(0,1.4fr) minmax(0,1fr); gap:30px; padding:30px 0 35px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.course-number { display:block; font:400 50px Aldrich,sans-serif; color:var(--accent); line-height:1; margin-bottom:18px; }
.small-label { font-size:9px; letter-spacing:.09em; color:var(--muted); line-height:1.8; }
.tags { display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--muted); }
.tags .free { color:#8fcaba; }
.course h3 { font:600 29px/1.3 Sora,Inter,sans-serif; letter-spacing:-.025em; margin:16px 0; max-width:340px; }
.description { font-size:13px; color:#c1bacb; max-width:420px; }
.meta { font-size:11px; margin-top:20px; color:var(--muted); }
.progress { font-size:11px; color:var(--accent); margin-top:14px; }
progress { width:100%; height:5px; accent-color:var(--accent); display:block; margin-top:8px; }
.course-syllabus { border-left:1px solid var(--line); padding-left:28px; align-self:stretch; }
.course-syllabus .eyebrow { margin:0 0 12px; }
.course-syllabus ol { padding-left:20px; margin:0; font-size:12px; }
.course-syllabus li { padding:9px 0 9px 5px; border-bottom:1px solid var(--line); }
.course-syllabus li::marker { color:var(--muted); font-size:10px; }
.syllabus-note { font-size:11px; color:var(--muted); margin-top:19px; }
.catalog-note { color:var(--muted); font-size:11px; margin:18px 0 0; }
.field-note { display:grid; grid-template-columns:1fr 2fr; gap:50px; padding:36px 0 68px; }
.field-note>.eyebrow { padding-top:7px; }
.field-note h2 { font:600 28px/1.35 Sora,Inter,sans-serif; letter-spacing:-.025em; margin-bottom:22px; }
.field-note p:not(.eyebrow) { font-size:13px; color:#c1bacb; max-width:560px; }
.text-link { display:inline-block; color:var(--accent); border-bottom:1px solid #80669f; padding-bottom:3px; margin-top:12px; font-size:12px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding:28px 36px; }
footer .brand { font-size:20px; }
footer p,footer>a:last-child { font-size:11px; color:var(--muted); }
.skip { position:absolute; top:-100px; }
.skip:focus { top:8px; left:12px; padding:12px; background:var(--bg); z-index:10; }
@media(max-width:850px) { .hero { gap:30px; } .course { grid-template-columns:60px 1.2fr 1fr; gap:20px; } .course-syllabus { padding-left:20px; } .visual { padding:14px; } .pitch { height:220px; } footer p { display:none; } }
@media(max-width:650px) {
 header { padding:22px 20px; } .brand { font-size:21px; gap:10px; } .brand span { padding-left:10px; font-size:8px; } nav { font-size:11px; gap:14px; } nav a:nth-child(2) { display:none; }
 main { padding:0 22px; } .hero { grid-template-columns:1fr; padding:40px 0 45px; gap:32px; } h1 { font-size:clamp(38px,10vw,54px); } .intro { max-width:100%; }
 .visual { transform:none; width:100%; max-width:440px; margin:auto; } .section-heading { display:block; margin-bottom:23px; } .section-heading p { margin:9px 0 0; }
 .course { grid-template-columns:42px minmax(0,1fr); gap:18px; padding-top:25px; } .course-number { font-size:34px; } .small-label { font-size:7px; } .course h3 { font-size:29px; }
 .course-syllabus { grid-column:2; border-left:0; padding:20px 0 0; border-top:1px solid var(--line); } .field-note { grid-template-columns:1fr; gap:5px; padding:15px 0 44px; } .field-note h2 { font-size:28px; }
 footer { padding:25px 22px; flex-wrap:wrap; } footer .brand { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

nav a { white-space:nowrap; }
@media(max-width:360px) { header { padding-left:18px; padding-right:18px; } nav { gap:10px; font-size:10px; } .brand { font-size:19px; gap:8px; } .brand span { padding-left:8px; } }

.brand span, .eyebrow, .tags .category { color:var(--accent); }
h2 { font-family:Sora,Inter,sans-serif; font-weight:600; }
.course-syllabus li::marker { color:#af94d7; }