:root { color-scheme:dark; --ink:#edf2f0; --muted:#aeb9b5; --surface:#13201d; --surface-soft:#1b2b27; --line:#385049; --accent:#d7bd75; --max:1120px; }
* { box-sizing:border-box; }
body { margin:0; background:#0b1210; color:var(--ink); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:#101512; padding:.65rem 1rem; z-index:2; }.skip-link:focus { left:1rem; top:1rem; }
.site-header,main,footer { max-width:var(--max); margin-inline:auto; padding-inline:1.5rem; }.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:.875rem; }.brand { color:var(--ink); font-weight:750; letter-spacing:-.02em; text-decoration:none; }
.account-nav { display:flex; align-items:center; gap:.85rem; }.account-nav a { color:var(--ink); font-weight:700; text-underline-offset:4px; }.account-name { max-width:18ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero { max-width:800px; padding:7.5rem 0 5rem; }.eyebrow,.course-code { margin:0 0 .75rem; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.13em; }h1,h2 { margin:0; line-height:1.08; letter-spacing:-.045em; }h1 { font-size:clamp(2.55rem,7vw,5.5rem); max-width:14ch; }h2 { font-size:clamp(1.65rem,3vw,2.35rem); }.lead { max-width:720px; color:var(--muted); font-size:clamp(1.05rem,2vw,1.28rem); }
.catalog { padding:2.5rem 0 6rem; }.course-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }.course-card { min-height:250px; padding:1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; align-items:flex-start; }.course-card h2 { font-size:1.45rem; }.course-card h2 a { text-decoration:none; }.course-card p:not(.course-code) { color:var(--muted); }.text-link,.back { margin-top:auto; color:var(--accent); font-weight:700; text-decoration-thickness:1px; text-underline-offset:4px; }
.notice { margin-bottom:6rem; max-width:760px; padding:1.5rem; border-left:3px solid var(--accent); background:var(--surface-soft); }.notice p,.course-meta { color:var(--muted); }footer { padding-top:2rem; padding-bottom:3rem; border-top:1px solid var(--line); color:var(--muted); font-size:.875rem; }.course-detail,.not-found,.auth-page,.dashboard { max-width:820px; padding:4rem 0 7rem; }.back { display:inline-block; margin-bottom:3rem; }.course-detail h1,.not-found h1,.auth-page h1,.dashboard h1 { max-width:18ch; }.course-meta { margin:2.5rem 0; padding:1.25rem 0; border-block:1px solid var(--line); }.module-list { margin:1.5rem 0 0; padding:0; list-style:none; }.module-list li { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }.module-list span { color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; }
.button { display:inline-block; margin-top:1.5rem; padding:.7rem 1rem; border:0; background:var(--accent); color:#101512; border-radius:6px; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; }.button-small { margin-top:0; padding:.45rem .7rem; }.button-secondary { background:transparent; color:var(--ink); border:1px solid var(--line); }.auth-form { display:grid; gap:.55rem; margin-top:2rem; padding:1.4rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); }.auth-form label { margin-top:.55rem; font-weight:700; }.auth-form input { min-height:44px; width:100%; padding:.65rem .75rem; border:1px solid var(--line); border-radius:6px; background:#0b1210; color:var(--ink); font:inherit; }.auth-form .button { width:max-content; }.auth-switch { color:var(--muted); }.form-errors { margin-top:1.5rem; padding:1rem 1.2rem; border-left:3px solid #e18a6f; background:#32201d; }.form-errors p { margin:0; font-weight:700; }.form-errors ul { margin-bottom:0; }.dashboard .notice { margin:2.5rem 0; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (max-width:650px) { .site-header { align-items:flex-start; flex-direction:column; justify-content:center; padding-block:1rem; }.hero { padding-top:5rem; }.course-grid { grid-template-columns:1fr; }.account-nav { width:100%; justify-content:space-between; } }