:root { color-scheme: light; --ink:#151c2b; --muted:#566175; --paper:#f5f7fb; --accent:#c33d0e; --line:#dce2ec; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-size:1rem; line-height:1.65; }
a { color:inherit; text-underline-offset:.22em; }
a:hover { color:var(--accent); }
button,input,select { font:inherit; }
button,select { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #ff8b62; outline-offset:4px; }
.wrap { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:27px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:750; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:7px; background:var(--ink); color:#ff8458; }
.brand-rest { font-weight:450; color:var(--muted); }
.edition { font-size:.875rem; color:var(--muted); font-weight:650; }
.introduction { padding:48px 0 38px; max-width:900px; }
.eyebrow { font-size:.875rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
h1 { font-size:clamp(2.2rem,4.3vw,3.65rem); line-height:1.14; letter-spacing:-.045em; margin:0 0 19px; font-weight:800; }
h1 span { color:var(--accent); }
.lead { max-width:780px; font-size:1.125rem; color:var(--muted); margin:0; }
.reading-note { max-width:850px; margin:24px 0 0; padding:18px 22px; color:var(--ink); background:#fff0e8; border-left:4px solid var(--accent); border-radius:0 8px 8px 0; font-size:1.125rem; line-height:1.5; }
.lesson { padding-bottom:42px; margin-bottom:42px; border-bottom:1px solid var(--line); }
.lesson-description { max-width:780px; color:var(--muted); margin:0 0 22px; }
.tool-note { margin-top:24px; padding:22px 26px; border-left:3px solid var(--accent); background:white; border-radius:0 10px 10px 0; }
.tool-note .eyebrow { margin-bottom:5px; }
.tool-note p:not(.eyebrow) { color:var(--muted); margin:10px 0; }
.tool-note strong { color:var(--ink); }
.tool-note blockquote { margin:16px 0 0; padding:12px 16px; background:var(--paper); border-radius:6px; overflow-wrap:anywhere; }
.playlist-section { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.playlist-section p:not(.eyebrow) { color:var(--muted); margin:12px 0 0; max-width:670px; }
.playlist-link { display:inline-block; padding:10px 16px; border:1px solid var(--line); border-radius:7px; background:white; text-align:center; flex-shrink:0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.section-heading .eyebrow { margin-bottom:4px; }
h2 { font-size:1.75rem; line-height:1.25; letter-spacing:-.025em; margin:0; }
.watch-surface { background:#101623; border-radius:14px; overflow:hidden; box-shadow:0 18px 45px #151c2b14; color:#f6f8ff; }
.video-frame { width:min(100%,calc(52vh * 16 / 9)); margin-inline:auto; aspect-ratio:16/9; min-height:200px; background:#080d17; }
.video-frame iframe { width:100%; height:100%; border:0; }
.video-frame iframe { display:block; }
.caption-panel { padding:8px 24px; background:#080d17; }
.caption-text { font-size:1.5rem; line-height:1.4; min-height:2.8em; display:flex; align-items:center; justify-content:center; text-align:center; white-space:pre-line; overflow-wrap:anywhere; text-shadow:0 1px 2px #000; }
.caption-text[data-size="large"] { font-size:1.85rem; }
.caption-text[data-size="largest"] { font-size:2.2rem; }
.watch-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:15px 24px; border-top:1px solid #2c374b; padding:15px 24px; background:#1a2435; font-size:.875rem; }
.toggle,.size-control { display:flex; align-items:center; gap:8px; }
.toggle input { width:18px; height:18px; accent-color:#ff8458; }
.watch-toolbar select,.watch-toolbar button { color:#f6f8ff; border:1px solid #69758b; border-radius:6px; background:#1a2435; padding:5px 10px; }
.watch-toolbar button { margin-left:auto; }
.watch-toolbar button:hover { background:#2f3e59; }
.status { color:var(--muted); font-size:.875rem; margin:13px 0 0; }
.status.error { color:#a5211e; }
.video-footer { display:flex; align-items:start; justify-content:space-between; gap:30px; padding:8px 0; color:var(--muted); font-size:.875rem; }
.video-footer p { margin:0; max-width:740px; }
.video-footer a { white-space:nowrap; }
h3 { font-size:1.2rem; line-height:1.45; margin:0 0 6px; }
h3 a { text-decoration:none; }
h3 a:hover { text-decoration:underline; }
.video-heading { margin-top:30px; }
.skills-resources { list-style:none; padding:0; margin:16px 0 0; }
.skills-resources li + li { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }
.skills-resources a { font-size:1.125rem; font-weight:700; color:var(--accent); }
.skip-link { position:fixed; top:-100px; left:16px; background:white; padding:12px; z-index:10; }
.skip-link:focus { top:12px; }
.watch-surface:fullscreen { border-radius:0; display:grid; grid-template-rows:minmax(0,1fr) auto auto; padding:0; overflow:hidden; background:#080d17; }
.watch-surface:fullscreen .video-frame { width:100%; height:100%; min-height:0; aspect-ratio:auto; }
.watch-surface:fullscreen .caption-panel { padding:8px clamp(16px,3vw,64px); max-height:35vh; overflow:auto; }
.watch-surface:fullscreen .caption-text { font-size:clamp(1.4rem,3.6vmin,3rem); line-height:1.25; min-height:2.5em; }
.watch-surface:fullscreen .caption-text[data-size="large"] { font-size:clamp(1.7rem,4.4vmin,3.75rem); }
.watch-surface:fullscreen .caption-text[data-size="largest"] { font-size:clamp(2rem,5.2vmin,4.5rem); }
[hidden] { display:none !important; }
@media (max-width:760px) { .wrap { width:calc(100% - 32px); } .masthead { padding-block:19px; } .brand-rest { display:none; } .introduction { padding:32px 0; } h1 { max-width:560px; } .lead { font-size:1rem; } .reading-note { font-size:1rem; padding:16px; } .section-heading { display:block; } h2 { font-size:1.5rem; } .caption-panel { padding:8px 16px; } .caption-text { font-size:1.15rem; } .caption-text[data-size="large"] { font-size:1.4rem; } .caption-text[data-size="largest"] { font-size:1.7rem; } .watch-toolbar { padding:12px 16px; gap:12px; } .watch-toolbar button { margin-left:0; } .video-footer { display:block; } .video-footer a { display:inline-block; margin-top:10px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (max-width:760px) { .lesson { padding-bottom:30px; margin-bottom:30px; } .tool-note { padding:18px; } .playlist-section { display:block; } .playlist-link { margin-top:18px; } }