* {box-sizing: border-box;}
html {color-scheme: light; background: var(--gh-paper); color: var(--gh-ink); font: 18px/1.6 var(--gh-font-body);}
body {margin: 0;}
a {color: var(--gh-cobalt); text-underline-offset: 3px;}
h1, h2, h3 {line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; font-weight: 700;}
h1 {font-size: clamp(36px, 4vw, 48px); font-weight: 800;}
h2 {font-size: clamp(28px, 3vw, 36px);}
h3 {font-size: 24px; line-height: 1.2;}
p {max-width: 70ch; margin: 0 0 20px;}
.muted {color: var(--gh-text-muted);}
.site-header {background: var(--gh-paper); border-bottom: 1px solid var(--gh-alloy);}
.header-inner {display: flex; align-items: center; gap: 48px; min-height: 88px; max-width: var(--gh-content-max); padding: 16px 32px; margin: auto;}
.header-inner nav a {color: var(--gh-cobalt); font-weight: 600; text-decoration: none; border-bottom: 3px solid var(--gh-cobalt); padding: 12px 0;}
.sign-out, .header-note {margin-left: auto;}
.header-note {color: var(--gh-text-muted);}
main {max-width: var(--gh-content-max); padding: 40px 32px 64px; margin: auto; min-height: calc(100dvh - 180px);}
.brand-hero {background: linear-gradient(90deg, var(--gh-cobalt) 0%, var(--gh-cobalt) 40%, transparent 72%), var(--gh-cobalt) url("brand/artwork/cobalt-neural-terrain.6680b09552a6.webp") no-repeat right center / cover; color: white; padding: 32px 40px; border-radius: 0; position: relative;}
.brand-hero > div {max-width: 55%;}
.brand-hero h1, .brand-hero h2 {font: 800 clamp(56px, 6vw, 80px)/.98 var(--gh-font-display); letter-spacing: -.02em; margin: 12px 0 20px;}
.brand-hero p:last-child {margin-bottom: 0; font-size: 20px;}
.section-heading {display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 48px 0 24px;}
.section-heading p {margin-bottom: 12px; color: var(--gh-text-muted);}
.section-heading h2 {margin: 0;}
.section-heading > span {white-space: nowrap; font-size: 16px;}
.course-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;}
.card {padding: 32px; background: var(--gh-surface); border: 1px solid var(--gh-alloy); border-radius: var(--gh-radius-card);}
.course-card {border-top: 4px solid var(--gh-cobalt);}
.course-card p {color: var(--gh-text-muted);}
.course-meta {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px;}
.course-card .gh-button {margin-top: 8px;}
.back-link {display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; font-size: 16px;}
.course-heading {max-width: 840px; margin-bottom: 32px;}
.course-heading .gh-label {color: var(--gh-text-muted); margin-bottom: 16px;}
.course-note {border-left: 4px solid var(--gh-signal); padding: 24px; background: var(--gh-surface); max-width: 840px; margin-bottom: 32px;}
.course-note p {margin: 16px 0 0;}
.outline {max-width: 840px;}
.outline-section {display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--gh-alloy); padding: 32px 0;}
.section-number {background: var(--gh-signal); color: var(--gh-ink); width: 56px; height: 56px; display: grid; place-items: center; font: 500 24px/1 var(--gh-font-mono);}
.outline-section .gh-label {margin-bottom: 8px;}
.outline-section h2 {font-size: 28px;}
.outline-section ol {padding-left: 24px; margin: 0 0 24px;}
.outline-section li {padding: 4px 0 4px 4px;}
.workspace-note {color: var(--gh-text-muted); margin-bottom: 0; font-size: 16px;}
.login-layout {display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; border: 1px solid var(--gh-alloy); background: white;}
.login-intro {padding: 40px; background: var(--gh-paper); color: var(--gh-ink);}
.login-intro h2 {font-size: clamp(48px, 5.5vw, 72px);}
.login-art {display: block; width: 260px; max-width: 100%; height: auto; margin: 24px auto 0;}
.login-panel {padding: 64px 48px; align-self: center;}
.login-panel h1 {margin-top: 24px;}
.login-panel form {margin-top: 32px;}
.login-panel label {display: block; font-weight: 600; font-size: 16px; margin-bottom: 8px;}
.login-panel input:not([type=hidden]) {display: block; width: 100%; min-height: 48px; background: var(--gh-surface); color: var(--gh-ink); border: 1px solid var(--gh-border-control); border-radius: var(--gh-radius-control); padding: 10px 12px; font: inherit;}
.login-panel .gh-button {width: 100%;}
.errorlist {color: #A51F16; padding-left: 20px; font-size: 16px;}
footer {max-width: var(--gh-content-max); margin: auto; padding: 24px 32px; border-top: 1px solid var(--gh-alloy); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; color: var(--gh-text-muted);}
.skip-link {position: fixed; z-index: 10; left: 16px; top: -100px; padding: 12px 20px; background: white; color: var(--gh-ink);}
.skip-link:focus {top: 12px;}
@media (max-width: 760px) {
  .header-inner {gap: 24px; padding: 16px 20px; flex-wrap: wrap;}
  .header-inner .gh-brand {flex-basis: 100%;}
  .header-inner .sign-out {margin-top: 0; margin-bottom: 0;}
  .header-note {margin-left: 0;}
  .header-note {font-size: 12px;}
  main {padding: 24px 20px 48px;}
  .brand-hero {padding: 28px 24px; background-image: none;}
  .brand-hero > div {max-width: none;}
  .brand-hero h1 {font-size: 56px;}
  .section-heading {align-items: start; flex-direction: column; gap: 12px; margin-top: 32px;}
  .course-grid, .login-layout {grid-template-columns: 1fr;}
  .card {padding: 24px;}
  .login-layout {min-height: 0;}
  .login-intro {padding: 32px 24px;}
  .login-intro h2 {font-size: 48px;}
  .login-art {display: none;}
  .login-panel {padding: 32px 24px;}
  .outline-section {grid-template-columns: 40px minmax(0, 1fr); gap: 16px;}
  .section-number {width: 40px; height: 44px; font-size: 20px;}
  footer {padding: 24px 20px; flex-direction: column; align-items: start;}
}