:root {
  --bg: oklch(0.97 0.02 90);
  --paper: oklch(1 0 0);
  --fg: oklch(0.18 0.02 255);
  --fg-soft: oklch(0.42 0.03 255);
  --primary: oklch(0.28 0.06 255);
  --accent: oklch(0.55 0.12 200);
  --hairline: oklch(0.88 0.02 60);
  --serif: "Instrument Serif", Charter, Georgia, serif;
  --sans: Inter, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--sans); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
body { max-width: 1080px; margin: 0 auto; padding: 28px 28px 96px; line-height: 1.55; }

/* top bar — site-wide */
.topbar { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 28px; }
.topbar .brand { font-family: var(--serif); font-size: 22px; color: var(--primary); text-decoration: none; letter-spacing: -0.01em; }
.topbar .brand .accent { color: var(--accent); font-style: italic; }
.topbar nav a { color: var(--fg-soft); text-decoration: none; font-size: 14px; margin-left: 18px; }
.topbar nav a:hover { color: var(--accent); }

/* hero */
header.hero { padding: 18px 0 32px; }
header.hero .crumbs { font-size: 13px; color: var(--fg-soft); margin-bottom: 14px; }
header.hero .crumbs a { color: var(--accent); text-decoration: none; }
header.hero .crumbs a:hover { text-decoration: underline; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; color: var(--primary); }
h1 .accent { color: var(--accent); font-style: italic; }
header.hero p { color: var(--fg-soft); margin-top: 14px; font-size: 17px; max-width: 680px; }

h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 40px 0 16px; color: var(--primary); }
h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 24px 0 10px; color: var(--primary); }

/* catalog cards */
.course-card { display: block; border: 1px solid var(--hairline); border-radius: 14px; padding: 26px 28px; background: var(--paper); text-decoration: none; color: inherit; margin-bottom: 16px; transition: border-color .15s, transform .15s; }
.course-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.course-card .meta { font-family: var(--mono); font-size: 12px; color: var(--fg-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.course-card h3 { margin: 6px 0 8px; font-size: 26px; }
.course-card p { color: var(--fg-soft); font-size: 15px; }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-family: var(--mono); letter-spacing: 0.04em; background: oklch(0.92 0.04 195); color: var(--primary); margin-left: 8px; vertical-align: middle; }

/* chapter table */
table.chapters { width: 100%; border-collapse: collapse; margin: 12px 0 36px; font-size: 14px; }
table.chapters th, table.chapters td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
table.chapters th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-soft); font-weight: 600; background: oklch(0.96 0.015 90); }
table.chapters td.n { font-family: var(--mono); color: var(--fg-soft); width: 48px; }
table.chapters td.dur { font-family: var(--mono); color: var(--fg-soft); width: 80px; text-align: right; }
table.chapters tr.row { cursor: pointer; }
table.chapters tr.row:hover td { background: oklch(0.96 0.015 90); }
table.chapters td.title a { color: var(--fg); text-decoration: none; font-weight: 500; }
table.chapters td.title a:hover { color: var(--accent); }
table.chapters a.btn { display: inline-block; padding: 4px 10px; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; text-decoration: none; font-size: 12px; font-family: var(--mono); }
table.chapters a.btn:hover { background: var(--accent); color: var(--paper); }
table.chapters span.muted { color: var(--fg-soft); }

/* player */
.player-wrap { background: oklch(0.10 0.01 255); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px oklch(0.18 0.02 255 / 0.12); margin: 8px 0 28px; }
.player-wrap video { width: 100%; height: auto; display: block; aspect-ratio: 16/9; background: #000; }
.player-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 18px 0 8px; font-family: var(--mono); font-size: 12px; color: var(--fg-soft); }
.player-meta .pill { padding: 3px 10px; border-radius: 999px; background: oklch(0.94 0.02 90); border: 1px solid var(--hairline); }
.player-actions { display: flex; gap: 10px; margin: 20px 0 8px; flex-wrap: wrap; }
.player-actions a { display: inline-block; padding: 9px 16px; border-radius: 8px; text-decoration: none; font-size: 14px; font-family: var(--sans); border: 1px solid var(--hairline); color: var(--fg); background: var(--paper); }
.player-actions a:hover { border-color: var(--accent); color: var(--accent); }
.player-actions a.primary { background: var(--primary); color: var(--paper); border-color: var(--primary); }
.player-actions a.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* slide deck viewer — exact 1920×1080 iframe scaled via JS ResizeObserver */
.deck { margin: 8px 0 28px; }
.deck-frame-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: oklch(0.10 0.01 255); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px oklch(0.18 0.02 255 / 0.10); }
.deck-frame { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; border: 0; background: #fff; }
.deck-nav { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.deck-nav button { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--paper); color: var(--fg); font-family: var(--sans); font-size: 14px; cursor: pointer; }
.deck-nav button:hover { border-color: var(--accent); color: var(--accent); }
.deck-counter { font-family: var(--mono); font-size: 13px; color: var(--fg-soft); min-width: 70px; text-align: center; }
.deck-open { margin-left: auto; padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--accent); border: 1px solid var(--hairline); font-size: 13px; }
.deck-open:hover { border-color: var(--accent); }

footer { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--fg-soft); }
footer a { color: var(--accent); text-decoration: none; }

@media (max-width: 720px) {
  body { padding: 18px 18px 64px; }
  h1 { font-size: 38px; }
  table.chapters th, table.chapters td { padding: 9px 8px; }
  table.chapters td.dur { display: none; }
}