@import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,500;7..72,600;7..72,700&family=Onest:wght@400;500;600;700&display=swap');

:root {
  --paper: oklch(0.956 0.015 87);
  --paper-deep: oklch(0.918 0.026 84);
  --ink: oklch(0.275 0.022 235);
  --muted: oklch(0.46 0.025 235);
  --rule: oklch(0.76 0.026 83);
  --coral: oklch(0.59 0.15 34);
  --teal: oklch(0.53 0.085 181);
  --gold: oklch(0.71 0.115 82);
  --violet: oklch(0.55 0.09 311);
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 80% 15%, oklch(0.93 0.04 82), transparent 28rem), var(--paper); font-family: Onest, sans-serif; font-size: 16px; line-height: 1.55; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 20; top: -4rem; left: 1rem; padding: .6rem .85rem; background: var(--ink); color: var(--paper); transition: top .2s var(--ease-out); }
.skip-link:focus { top: 1rem; }
.topbar { position: sticky; z-index: 10; top: 0; display: flex; justify-content: space-between; gap: var(--space-lg); align-items: center; min-height: 70px; padding: 0 clamp(1rem, 3vw, 3rem); border-bottom: 1px solid color-mix(in oklch, var(--rule), transparent 22%); background: color-mix(in oklch, var(--paper), transparent 7%); backdrop-filter: blur(10px); }
.wordmark { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; min-width: 0; }
.wordmark strong { display: block; font-family: Literata, Georgia, serif; font-size: 1.03rem; letter-spacing: -.03em; }
.wordmark small { display: block; color: var(--muted); font-size: .69rem; line-height: 1.15; }
.wordmark-mark { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; }
.wordmark-mark i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--coral); }
.wordmark-mark i:nth-child(1) { transform: translate(-7px, 7px); background: var(--teal); }.wordmark-mark i:nth-child(2) { transform: translate(7px, 4px); background: var(--gold); }.wordmark-mark i:nth-child(3) { transform: translate(1px, -8px); background: var(--violet); }
.topbar-actions { display: flex; gap: .55rem; align-items: center; }
.progress-chip, .quiet-button { font-size: .77rem; white-space: nowrap; }
.progress-chip { padding: .4rem .6rem; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; }.progress-chip b { color: var(--ink); }
.quiet-button, .reset-button { border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; padding: .4rem .65rem; transition: color .2s var(--ease-out), background .2s var(--ease-out), transform .15s var(--ease-out); }.quiet-button:hover, .reset-button:hover { background: var(--ink); color: var(--paper); }.quiet-button:active, .reset-button:active { transform: scale(.97); }
.course-layout { display: grid; grid-template-columns: minmax(285px, 355px) minmax(0, 1fr); max-width: 1600px; margin: 0 auto; }
.course-index { position: sticky; top: 70px; align-self: start; height: calc(100vh - 70px); overflow: auto; padding: clamp(1.5rem, 3vw, 3rem); border-right: 1px solid var(--rule); scrollbar-color: var(--rule) transparent; }
.index-intro h1 { margin: .3rem 0 .75rem; font-family: Literata, Georgia, serif; font-size: clamp(1.65rem, 2.4vw, 2.35rem); line-height: 1.08; letter-spacing: -.045em; }.index-intro p:last-child { max-width: 38ch; color: var(--muted); font-size: .88rem; }
.eyebrow { margin: 0; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase; }
.progress-panel { display: grid; gap: .5rem; margin: var(--space-2xl) 0; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }.progress-panel > div:first-child { display: flex; justify-content: space-between; font-size: .78rem; }.progress-panel strong { font-size: .9rem; }.progress-line { height: 5px; overflow: hidden; background: color-mix(in oklch, var(--rule), transparent 30%); }.progress-line span { display: block; height: 100%; transform-origin: left; background: var(--coral); transition: transform .4s var(--ease-out); }
.section-nav { display: grid; gap: 1.55rem; }.nav-section-title { display: flex; gap: .65rem; align-items: baseline; margin-bottom: .55rem; }.nav-section-title > span { color: var(--section-color, var(--coral)); font-size: .68rem; font-weight: 700; }.nav-section-title div { display: flex; justify-content: space-between; flex: 1; gap: .7rem; }.nav-section-title strong { font-size: .78rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }.nav-section-title small { color: var(--muted); font-size: .7rem; }.nav-section.coral { --section-color: var(--coral); }.nav-section.teal { --section-color: var(--teal); }.nav-section.gold { --section-color: var(--gold); }.nav-section.violet { --section-color: var(--violet); }
.lesson-links { display: grid; }.lesson-link { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: start; gap: .35rem; width: 100%; padding: .36rem 0; border: 0; border-bottom: 1px solid color-mix(in oklch, var(--rule), transparent 55%); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-size: .79rem; line-height: 1.28; }.lesson-link:hover span:last-child { text-decoration: underline; text-decoration-color: var(--section-color); text-decoration-thickness: 2px; text-underline-offset: 3px; }.lesson-link.is-active { color: var(--section-color); font-weight: 700; }.lesson-status { color: var(--muted); font-size: .65rem; font-variant-numeric: tabular-nums; padding-top: .1rem; }.lesson-link.is-complete .lesson-status { color: var(--section-color); font-size: .85rem; font-weight: 700; }.reset-button { margin-top: 2rem; color: var(--muted); border-color: var(--rule); font-size: .72rem; }
.lesson-stage { min-width: 0; outline: none; }.lesson-header { position: relative; min-height: 380px; padding: clamp(2.5rem, 7vw, 7.5rem) clamp(1.5rem, 7vw, 8rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; border-bottom: 1px solid var(--rule); background: radial-gradient(circle at 85% 15%, color-mix(in oklch, var(--accent), transparent 73%), transparent 18rem); }.lesson-header::after { content: ""; position: absolute; right: -9vw; bottom: -11vw; width: 32vw; aspect-ratio: 1; border: 1px solid color-mix(in oklch, var(--accent), transparent 18%); border-radius: 50%; box-shadow: 0 0 0 4vw color-mix(in oklch, var(--accent), transparent 89%), 0 0 0 8vw color-mix(in oklch, var(--accent), transparent 94%); pointer-events: none; }.lesson-header.coral { --accent: var(--coral); }.lesson-header.teal { --accent: var(--teal); }.lesson-header.gold { --accent: var(--gold); }.lesson-header.violet { --accent: var(--violet); }
.lesson-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--muted); font-size: .72rem; }.lesson-breadcrumb span + span::before { content: "/"; margin-right: .5rem; color: var(--rule); }.lesson-utility { position: absolute; z-index: 1; top: 1.1rem; right: clamp(1.5rem, 4vw, 4rem); display: flex; flex-wrap: wrap; justify-content: end; gap: .45rem; }.video-link, .source-link { padding: .34rem .55rem; border: 1px solid color-mix(in oklch, var(--ink), transparent 58%); background: color-mix(in oklch, var(--paper), transparent 15%); font-size: .72rem; text-decoration: none; transition: transform .2s var(--ease-out), background .2s var(--ease-out); }.video-link:hover, .source-link:hover { transform: translateY(-2px); background: var(--paper); }.video-link { border-color: var(--accent); color: color-mix(in oklch, var(--accent), var(--ink) 24%); font-weight: 700; }
.lesson-header .eyebrow { margin-top: clamp(3.2rem, 7vw, 5.5rem); }.lesson-header h2 { position: relative; z-index: 1; max-width: 13ch; margin: .35rem 0 .9rem; font-family: Literata, Georgia, serif; font-size: clamp(2.6rem, 6vw, 6.4rem); font-weight: 600; letter-spacing: -.065em; line-height: .94; }.lesson-deck { position: relative; z-index: 1; max-width: 66ch; margin: 0; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.55; }.start-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.8rem; }.chapter-count { color: var(--muted); font-size: .77rem; }.complete-button { border: 1px solid var(--accent); background: var(--accent); color: var(--paper); padding: .62rem .85rem; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }.complete-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in oklch, var(--accent), var(--ink) 30%); }.complete-button.is-complete { background: transparent; color: var(--accent); }
.lesson-content { padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 7vw, 8rem) 0; }.study-contract { display: grid; grid-template-columns: minmax(13rem, .85fr) minmax(0, 1.15fr); gap: 2rem; align-items: start; padding: clamp(1.25rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }.study-contract h3 { margin: .25rem 0 0; font-family: Literata, Georgia, serif; font-size: clamp(1.3rem, 2.2vw, 2rem); letter-spacing: -.04em; line-height: 1.1; }.study-contract p:last-child { max-width: 55ch; margin: .25rem 0; font-size: 1rem; }
.teaching-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: clamp(2rem, 5vw, 5.5rem); padding: clamp(2.5rem, 5vw, 5rem) 0; }.reading-column { max-width: 68ch; }.reading-column h3 { margin: .3rem 0 1.15rem; font-family: Literata, Georgia, serif; font-size: clamp(1.65rem, 3vw, 2.7rem); letter-spacing: -.045em; line-height: 1.04; }.reading-column p { font-family: Literata, Georgia, serif; font-size: clamp(1rem, 1.25vw, 1.13rem); line-height: 1.78; }.reading-column p strong { font-weight: 700; }.anchor-section { margin-top: 2.6rem; }.anchor-list { display: grid; gap: .15rem; margin: .7rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }.anchor-list li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }.anchor-list span { color: var(--coral); font-size: .72rem; font-weight: 700; }.anchor-list strong { font-size: .92rem; }
.visual-column { align-self: start; position: sticky; top: 92px; }.visual-head { display: flex; justify-content: space-between; margin-bottom: .55rem; color: var(--muted); font-size: .69rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.visual-head small { color: var(--teal); font-size: .65rem; }.lesson-canvas { display: block; width: 100%; border: 1px solid var(--ink); background: var(--paper-deep); }.visual-caption { margin: .65rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.return-point { display: grid; grid-template-columns: minmax(13rem, .75fr) minmax(0, 1.25fr); gap: 1rem 2rem; padding: clamp(1.5rem, 4vw, 3rem); background: color-mix(in oklch, var(--paper-deep), transparent 15%); border-top: 1px solid var(--rule); }.return-point h3 { margin: .25rem 0 0; font-family: Literata, Georgia, serif; font-size: 1.55rem; letter-spacing: -.04em; line-height: 1.08; }.return-point label { align-self: end; font-size: .83rem; font-weight: 700; }.return-point textarea { grid-column: 2; width: 100%; resize: vertical; min-height: 5rem; padding: .7rem; border: 1px solid var(--rule); border-radius: 0; background: var(--paper); color: var(--ink); outline-offset: 3px; }.return-point small { grid-column: 2; color: var(--muted); font-size: .7rem; }
.chapter-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 4rem 0; }.chapter-pager button, .finish-link { min-width: 0; padding: 1rem 0; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; }.chapter-pager button:last-child, .finish-link { text-align: right; }.chapter-pager span { display: block; color: var(--muted); font-size: .7rem; }.chapter-pager strong { display: block; margin-top: .2rem; font-family: Literata, Georgia, serif; font-size: 1rem; line-height: 1.2; }.chapter-pager button:hover strong, .finish-link:hover { color: var(--coral); }.course-footer { padding: 1.5rem clamp(1.5rem, 7vw, 8rem) 2.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .72rem; }.course-footer a { color: var(--ink); }
.focus-mode .course-index { display: none; }.focus-mode .course-layout { display: block; }.focus-mode .lesson-header { padding-left: max(1.5rem, calc((100vw - 850px) / 2)); padding-right: max(1.5rem, calc((100vw - 850px) / 2)); }.focus-mode .lesson-content { max-width: 1050px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }.focus-mode .visual-column { display: none; }.focus-mode .teaching-grid { display: block; }.focus-mode .reading-column { margin: 0 auto; }.focus-mode .return-point { grid-template-columns: 1fr; }.focus-mode .return-point textarea, .focus-mode .return-point small { grid-column: 1; }
@media (max-width: 1000px) { .course-layout { grid-template-columns: minmax(240px, 290px) minmax(0,1fr); }.course-index { padding: 1.5rem; }.lesson-header, .lesson-content { padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); }.lesson-header h2 { font-size: clamp(2.4rem, 6vw, 4.8rem); }.teaching-grid { grid-template-columns: 1fr; }.visual-column { position: static; max-width: 700px; }.return-point { grid-template-columns: 1fr; }.return-point textarea, .return-point small { grid-column: 1; } }
@media (max-width: 720px) { .topbar { min-height: 60px; }.progress-chip { display: none; }.course-layout { display: block; }.course-index { position: static; height: auto; padding: 1.5rem 1.25rem; border-right: 0; border-bottom: 1px solid var(--rule); }.index-intro h1 { max-width: 22ch; }.section-nav { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem .9rem; }.lesson-link { font-size: .71rem; }.lesson-utility { position: static; justify-content: start; margin: 1.2rem 0 1.5rem; }.lesson-header .eyebrow { margin-top: 0; }.lesson-header { min-height: 0; padding-top: 2rem; }.lesson-header::after { width: 65vw; right: -16vw; bottom: -23vw; }.study-contract, .teaching-grid { grid-template-columns: 1fr; }.study-contract { gap: .6rem; }.chapter-pager { grid-template-columns: 1fr; }.chapter-pager button:last-child, .finish-link { text-align: left; }.chapter-pager > span { display: none; }.visual-column { position: static; }.focus-mode .course-index { display: none; } }
@media (max-width: 440px) { .topbar { padding: 0 .85rem; }.wordmark small { display: none; }.quiet-button { font-size: .7rem; }.section-nav { grid-template-columns: 1fr; }.lesson-header h2 { font-size: clamp(2.25rem, 12vw, 3.5rem); }.lesson-content { padding-left: 1rem; padding-right: 1rem; }.lesson-header { padding-left: 1rem; padding-right: 1rem; }.lesson-deck { font-size: .95rem; }.return-point { margin-left: -1rem; margin-right: -1rem; padding: 1.25rem 1rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }