:root { color-scheme: light; --bg: #f7f7f5; --surface: #fff; --surface-soft: #efefec; --ink: #101010; --muted: #6a6a66; --line: #d9d9d4; --inverse: #101010; --inverse-ink: #fff; --shadow: 0 16px 48px rgba(0,0,0,.06); }
:root[data-theme="dark"] { color-scheme: dark; --bg: #0e0e0e; --surface: #151515; --surface-soft: #202020; --ink: #f5f5f2; --muted: #a5a5a0; --line: #343432; --inverse: #f5f5f2; --inverse-ink: #101010; --shadow: 0 16px 48px rgba(0,0,0,.25); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Space Grotesk", system-ui, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.page-shell { max-width: 1440px; margin: auto; padding: 0 48px 56px; }
.topbar { min-height: 84px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -.06em; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }.brand-logo { width: 28px; height: 28px; }.brand span span { color: var(--muted); }:root[data-theme="dark"] .brand-logo { filter: invert(1); }
.topbar-actions { display: flex; align-items: center; gap: 16px; }.save-status { font: 500 .69rem "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }.icon-button { width: 38px; height: 38px; padding: 9px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); display: grid; place-items: center; }.icon-button:hover { background: var(--ink); color: var(--bg); }.icon-button svg { width: 100%; height: 100%; }
.hero { padding: 78px 0 48px; max-width: 930px; }.eyebrow, .section-label { font: 500 .7rem "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }.eyebrow { display: flex; align-items: center; gap: 8px; }.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }.hero h1 { max-width: 840px; margin: 16px 0 18px; font-size: clamp(2.55rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.075em; }.hero-description { max-width: 740px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.17rem); line-height: 1.6; }.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }.meta-pill { border: 1px solid var(--line); border-radius: 99px; padding: 7px 11px; font: 500 .72rem "DM Mono", monospace; color: var(--muted); }
.progress-card { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; padding: 24px 28px; background: var(--inverse); color: var(--inverse-ink); border-radius: 5px; box-shadow: var(--shadow); }.progress-card .section-label { color: color-mix(in srgb, var(--inverse-ink) 65%, transparent); }.progress-numbers { display: flex; align-items: baseline; gap: 11px; margin-top: 5px; }.progress-numbers strong { font-size: 1.75rem; letter-spacing: -.07em; }.progress-numbers span { color: color-mix(in srgb, var(--inverse-ink) 70%, transparent); font-size: .87rem; }.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--inverse-ink) 18%, transparent); }.progress-track span { display:block; height:100%; width:0; background: var(--inverse-ink); transition: width .35s ease; }.text-button { border: 0; border-bottom: 1px solid currentColor; padding: 2px 0; background: none; color: var(--inverse-ink); font: 500 .72rem "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }.text-button:hover { opacity: 1; }
.content-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 7vw, 110px); margin-top: 65px; }.course-sidebar { align-self: start; position: sticky; top: 24px; }.sidebar-section + .sidebar-section { margin-top: 42px; }.week-nav { margin-top: 13px; border-top: 1px solid var(--line); }.week-nav a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--muted); font-size: .83rem; }.week-nav a:hover, .week-nav a:focus-visible { color: var(--ink); }.week-nav em { font: .66rem "DM Mono", monospace; font-style: normal; }.course-facts { display: grid; gap: 16px; }.fact { border-left: 1px solid var(--ink); padding-left: 12px; }.fact span { display:block; margin-bottom: 3px; font: .64rem "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }.fact strong { display:block; font-size: .82rem; line-height: 1.35; font-weight: 500; }
.curriculum-header { display:flex; justify-content:space-between; align-items:end; gap:24px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }.curriculum h2 { font-size: 1.75rem; line-height: 1; letter-spacing: -.055em; margin: 8px 0 0; }.search { width: min(250px, 43%); min-width: 180px; display:flex; align-items:center; gap:9px; border-bottom: 1px solid var(--line); padding: 7px 0; color: var(--muted); }.search-icon { width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius:50%; position:relative; }.search-icon::after { content:""; position:absolute; height:6px; border-left:1.5px solid currentColor; transform:rotate(-45deg); right:-3px; bottom:-4px; }.search input { width:100%; padding:0; border:0; outline:0; background:none; color:var(--ink); font-size:.82rem; }.search input::placeholder { color:var(--muted); }
.weeks { border-bottom: 1px solid var(--line); }.week { scroll-margin-top: 18px; border-top: 1px solid var(--line); }.week:first-child { border-top: 0; }.week summary { list-style:none; display:grid; grid-template-columns: 74px 1fr auto; gap:18px; align-items:center; padding: 20px 0; cursor:pointer; }.week summary::-webkit-details-marker { display:none; }.week-number { font: .68rem "DM Mono", monospace; color: var(--muted); }.week-title { font-size: 1.05rem; font-weight:600; letter-spacing:-.025em; }.week-progress { display:flex; align-items:center; gap:11px; color:var(--muted); font:.68rem "DM Mono", monospace; }.chevron { width: 8px; height:8px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }.week[open] .chevron { transform: rotate(225deg) translate(-3px, -1px); }.lecture-list { padding-bottom: 16px; }.lecture { display:grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap:18px; align-items:center; padding: 10px; margin: 0 -10px; border-radius:4px; transition: background .2s; }.lecture:hover { background:var(--surface-soft); }.thumbnail { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--surface-soft); border-radius:3px; }.thumbnail img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transition: transform .25s, filter .25s; }.thumbnail:hover img { transform:scale(1.04); filter:grayscale(0); }.play { position:absolute; width:27px; height:20px; border-radius:5px; background:var(--ink); color:var(--bg); left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; }.play::after { content:""; margin-left:2px; border-left:6px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; }.lecture-info { min-width:0; }.lecture-index { display:block; margin-bottom:3px; color:var(--muted); font:.62rem "DM Mono", monospace; }.lecture-title { color:var(--ink); font-size:.88rem; font-weight:500; line-height:1.35; text-decoration:none; }.lecture-title:hover { text-decoration:underline; }.complete-toggle { width:33px; height:33px; padding:0; flex:0 0 auto; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--surface); display:grid; place-items:center; transition: all .2s; }.complete-toggle:hover { border-color:var(--ink); }.complete-toggle svg { width:16px; height:16px; }.lecture.is-complete .complete-toggle { background:var(--ink); border-color:var(--ink); color:var(--bg); }.lecture.is-complete .lecture-title { color:var(--muted); text-decoration:line-through; }.empty-state { padding:56px 0; color:var(--muted); text-align:center; }.site-footer { display:flex; justify-content:space-between; gap:32px; margin-top:72px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; line-height:1.5; }.site-footer p { max-width:470px; margin:0; }.site-footer p:last-child { text-align:right; }
@media (max-width: 800px) { .page-shell { padding: 0 22px 40px; }.topbar { min-height:70px; }.save-status { display:none; }.hero { padding:56px 0 35px; }.progress-card { grid-template-columns:1fr auto; gap:19px; padding:21px; }.progress-track { grid-column:1 / -1; grid-row:2; }.content-grid { grid-template-columns:1fr; margin-top:45px; }.course-sidebar { position:static; display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:24px; }.sidebar-section + .sidebar-section { margin-top:0; }.curriculum-header { align-items:start; }.search { margin-top:6px; }.lecture { grid-template-columns: 106px minmax(0,1fr) auto; gap:13px; }.site-footer { margin-top:48px; } }
@media (max-width: 540px) { .brand { font-size:1.05rem; }.brand-logo { width:25px; height:25px; }.hero h1 { font-size:2.55rem; }.meta-row { margin-top:22px; }.progress-card { display:block; }.progress-track { margin:18px 0; }.text-button { float:right; }.content-grid { gap:37px; }.course-sidebar { display:block; }.sidebar-section + .sidebar-section { margin-top:31px; }.curriculum-header { display:block; }.search { width:100%; margin-top:20px; }.week summary { grid-template-columns:55px 1fr auto; gap:10px; }.week-title { font-size:.93rem; }.week-progress { display:none; }.lecture { grid-template-columns:84px minmax(0,1fr) 30px; gap:10px; padding:7px; margin:0 -7px; }.lecture-title { font-size:.79rem; }.complete-toggle { width:30px; height:30px; }.site-footer { display:block; }.site-footer p:last-child { margin-top:10px; text-align:left; } }