:root {
    --ink: #202522;
    --muted: #68726c;
    --paper: #fffdf8;
    --tint: #f4f1e8;
    --line: #ded9cd;
    --brand: #9f3f2d;
    --brand-dark: #6f271b;
    --accent: #c38b45;
    --success: #e8f5eb;
    --danger: #fff0ee;
    --shadow: 0 16px 40px rgba(45, 37, 25, .08);
    --player: #07182b;
    --player-soft: #102b49;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.7; }
main { min-width: 0; }
button, input, select, textarea { font: inherit; }
video, audio, img { max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
h1, h2, h3 { margin: 0 0 .65rem; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; line-height: 1.25; }
h1 { font-size: clamp(2.15rem, 5vw, 4.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
p { margin: 0 0 1rem; }
small { color: var(--muted); }

.container { width: min(1160px, calc(100% - 2rem)); margin-inline: auto; }
.narrow { width: min(780px, 100%); }
.site-header { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top); background: rgba(255, 253, 248, .94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.header-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: white; background: var(--brand); border-radius: 50%; font-family: Georgia, serif; font-size: 1.4rem; }
.brand strong, .brand small { display: block; line-height: 1.2; }
.brand small { margin-top: .2rem; font-size: .72rem; }
.site-nav { display: flex; align-items: center; gap: 1.15rem; }
.site-nav a, .link-button { color: var(--ink); font: inherit; }
.site-nav a.active { color: var(--brand); font-weight: 700; }
.site-nav form { margin: 0; }
.link-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav-toggle { display: none; min-width: 44px; min-height: 44px; padding: .4rem; color: var(--ink); border: 0; border-radius: 10px; background: transparent; font-size: 1.5rem; cursor: pointer; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .65rem 1.2rem; border: 1px solid var(--brand); border-radius: 999px; color: white; background: var(--brand); font-weight: 700; cursor: pointer; }
.button:hover { color: white; background: var(--brand-dark); }
.button-small { min-height: 36px; padding: .35rem .9rem; }
.button-ghost { color: var(--brand); background: transparent; }
.button-ghost:hover { color: white; }

.hero { padding: clamp(4rem, 8vw, 8rem) 0; background: radial-gradient(circle at 80% 10%, #eadbc7 0, transparent 34%), linear-gradient(135deg, #fffaf0, #f4eee1); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.hero h1 { max-width: 850px; }
.hero p { max-width: 680px; color: var(--muted); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hero-card { display: grid; gap: .6rem; padding: 2rem; color: white; background: #2b332e; border-radius: 22px; box-shadow: var(--shadow); transform: rotate(1.5deg); }
.hero-card span { color: #e4bd83; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; }
.hero-card strong { font-family: Georgia, "Noto Serif SC", serif; font-size: 1.45rem; }
.eyebrow { display: block; margin-bottom: .75rem; color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.section { padding-block: 4.5rem; }
.section-tint { background: var(--tint); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: 1.5rem; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(45, 37, 25, .04); }
.card h2, .card h3 { margin-top: .5rem; }
.card p { color: var(--muted); }
.empty-card { grid-column: 1 / -1; border-style: dashed; text-align: center; }
.pill { display: inline-flex; padding: .18rem .55rem; color: var(--brand-dark); background: #f6e9dd; border-radius: 999px; font-size: .76rem; }
.camp-poster-link { margin: 1.65rem 0 0; font-size: clamp(1.65rem, 3vw, 2.35rem); }
.camp-poster-link a { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.camp-poster-link a::after { content: '↗'; color: var(--brand); font-family: Inter, sans-serif; font-size: .72em; transition: transform .2s ease; }
.camp-poster-link a:hover { color: var(--brand); }
.camp-poster-link a:hover::after { transform: translate(.16rem, -.16rem); }
.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature-grid article { padding-left: 1.2rem; border-left: 2px solid var(--accent); }
.feature-grid span { color: var(--accent); font-weight: 800; }
.feature-grid p { color: var(--muted); }

.page-hero { padding: 4.5rem 0 3rem; background: var(--tint); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.page-hero p { max-width: 720px; color: var(--muted); }
.article { width: min(820px, calc(100% - 2rem)); padding-block: 4rem; }
.article-header { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.article-header .eyebrow { margin-top: 2rem; }
.article-header p { color: var(--muted); font-size: 1.12rem; }
.article-body, .prose { padding-block: 2rem; font-size: 1.05rem; white-space: normal; }
.pagination { margin-top: 2rem; }
.pagination nav > div:first-child { display: none; }
.pagination nav svg { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; }

.auth-shell { min-height: 68vh; display: grid; place-items: center; padding-block: 4rem; }
.form-card { width: min(480px, 100%); display: grid; gap: 1rem; padding: 2rem; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.form-card label { display: grid; gap: .35rem; font-weight: 700; }
.form-card input { width: 100%; min-height: 46px; padding: .65rem .75rem; border: 1px solid #bdb7ab; border-radius: 9px; font: inherit; }
.form-card input:focus { outline: 3px solid rgba(159, 63, 45, .15); border-color: var(--brand); }
.form-card .check { display: flex; align-items: center; font-weight: 400; }
.form-card .check input { width: auto; min-height: auto; }
.flash { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 10px; }
.flash-success { background: var(--success); }
.flash-error { background: var(--danger); }
.flash ul { margin-bottom: 0; }

.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 2.5rem; align-items: start; }
.sticky-card { position: sticky; top: 96px; }
.module-list { display: grid; gap: 1rem; }
.module-item { padding: 1.2rem 1.4rem; background: white; border: 1px solid var(--line); border-radius: 12px; }
.module-item ol { padding-left: 1.3rem; }
.cohort { display: flex; justify-content: space-between; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--line); }
.cohort small { display: block; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-bottom: 0; }
.metric strong, .metric span { display: block; }
.metric strong { color: var(--brand); font-family: Georgia, serif; font-size: 2rem; }
.list-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.list-card p { margin: .2rem 0 0; }
.muted { color: var(--muted); }
.block { display: block; }
.stack { display: grid; gap: 1.25rem; }
.admin-nav { display: flex; gap: .5rem; padding-block: .85rem; overflow-x: auto; border-bottom: 1px solid var(--line); }
.admin-nav a { flex: 0 0 auto; padding: .42rem .8rem; color: var(--ink); border-radius: 999px; }
.admin-nav a.active, .admin-nav a:hover { color: white; background: var(--brand); }
.action-card { color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.action-card:hover { color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.filter-bar, .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.filter-bar input, .filter-bar select { min-height: 40px; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: white; font: inherit; }
.table-wrap { padding: 0; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th, .data-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table th { color: var(--muted); background: var(--tint); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.empty-cell { padding: 2.5rem !important; color: var(--muted); text-align: center !important; }
.admin-editor { width: min(980px, calc(100% - 2rem)); }
.editor-form { display: grid; gap: 1rem; }
.editor-form label { display: grid; gap: .3rem; font-weight: 700; }
.editor-form input, .editor-form select, .editor-form textarea { width: 100%; padding: .65rem .75rem; color: var(--ink); background: white; border: 1px solid #bdb7ab; border-radius: 8px; font: inherit; }
.editor-form input, .editor-form select { min-height: 44px; }
.editor-form textarea { resize: vertical; line-height: 1.6; }
.editor-form input:focus, .editor-form select:focus, .editor-form textarea:focus { outline: 3px solid rgba(159, 63, 45, .15); border-color: var(--brand); }
.editor-form fieldset { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.question-image-field { display: grid; gap: .75rem; }
.question-image-admin-preview { display: flex; align-items: center; gap: 1rem; padding: .8rem; background: var(--tint); border: 1px solid var(--line); border-radius: 10px; }
.question-image-admin-preview img { flex: 0 1 auto; width: auto; max-width: min(100%, 520px); max-height: 300px; object-fit: contain; background: white; border: 1px solid var(--line); border-radius: 8px; }
.question-image-admin-preview strong, .question-image-admin-preview small { display: block; overflow-wrap: anywhere; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.compact-grid { gap: .75rem; }
.span-2 { grid-column: 1 / -1; }
.form-actions { justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--line); }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.editor-form .check { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.editor-form .check input { width: auto; min-height: auto; }
.danger-zone { display: flex; justify-content: flex-end; padding: 1rem; border: 1px solid #efc2bb; border-radius: 12px; background: var(--danger); }
.danger-button { padding: .4rem .7rem; color: #8e2417; background: transparent; border: 1px solid #d8887c; border-radius: 8px; cursor: pointer; }
.nested-list { display: grid; gap: 1rem; }
.nested-item { display: grid; gap: 1rem; padding: 1rem; background: #fcfaf4; border: 1px solid var(--line); border-radius: 12px; }
.nested-item > form:last-of-type { justify-self: end; }
.add-panel, .lesson-editor { margin-top: 1rem; border: 1px dashed var(--line); border-radius: 10px; }
.add-panel summary, .lesson-editor summary { padding: .75rem 1rem; color: var(--brand); font-weight: 700; cursor: pointer; }
.add-panel > form, .lesson-editor > form { margin: 0 1rem 1rem; }
.lesson-list { padding-top: 1rem; border-top: 1px solid var(--line); }
.lesson-list h3 { font-size: 1.2rem; }
.asset-manager { display: grid; gap: .75rem; margin: 0 1rem 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.asset-manager h4 { margin: 0; }

.lesson-container { width: min(1440px, calc(100% - clamp(2rem, 6vw, 7rem))); margin-inline: auto; }
.lesson-page-hero { padding: clamp(2.25rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem); overflow: hidden; background: radial-gradient(circle at 86% 20%, rgba(195, 139, 69, .2), transparent 30%), linear-gradient(135deg, #f7f2e8, #fcfaf4); border-bottom: 1px solid var(--line); }
.lesson-breadcrumb { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: 1.25rem; color: var(--muted); font-size: .9rem; font-weight: 700; }
.lesson-breadcrumb:hover { color: var(--brand); }
.lesson-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.5rem, 4vw, 5rem); }
.lesson-page-hero h1 { max-width: 1000px; margin-bottom: 1rem; font-size: clamp(2rem, 4.4vw, 4rem); text-wrap: balance; }
.lesson-hero-summary { max-width: 960px; margin: 0; color: #59635d; font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.85; }
.lesson-hero-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; padding-bottom: .35rem; color: var(--muted); font-size: .88rem; white-space: nowrap; }
.lesson-learning-shell { position: relative; isolation: isolate; padding-block: clamp(1.25rem, 3vw, 3rem) clamp(3rem, 6vw, 6rem); }
.learning-layout { position: relative; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start; }
.learning-content { min-width: 0; }
.media-kicker { display: block; margin-bottom: .35rem; color: var(--accent); font-size: .73rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }

.lesson-player-card { overflow: hidden; padding: 0; color: white; background: var(--player); border-color: rgba(255, 255, 255, .08); border-radius: 22px; box-shadow: 0 20px 60px rgba(8, 25, 43, .16); }
.media-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; background: linear-gradient(135deg, #0b2138, #102c49); }
.media-card-header h2 { margin: 0; color: white; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(1rem, 1.6vw, 1.28rem); font-weight: 750; }
.secure-playback-badge { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; padding: .35rem .65rem; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; font-size: .72rem; white-space: nowrap; }
.secure-playback-badge i { width: 6px; height: 6px; background: #7ed7a0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(126, 215, 160, .12); }
.secure-video-stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #020a12; isolation: isolate; }
.secure-video-stage video { z-index: 1; display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; background: #020a12; border-radius: 0; }
.video-watermark-layer { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.video-watermark-row { position: absolute; top: 17%; left: -58%; display: flex; align-items: center; justify-content: space-around; gap: clamp(5rem, 12vw, 14rem); width: 216%; opacity: .085; animation: video-watermark-pan 24s linear infinite; animation-play-state: paused; will-change: transform; }
.video-watermark-row:nth-child(2) { top: 48%; animation-delay: -7s; animation-direction: reverse; animation-duration: 29s; }
.video-watermark-row:nth-child(3) { top: 79%; animation-delay: -14s; animation-duration: 33s; }
.is-playing .video-watermark-row, .secure-video-stage:fullscreen .video-watermark-row, .secure-video-stage.is-pseudo-fullscreen .video-watermark-row { animation-play-state: running; }
.video-watermark-row span { flex: 0 0 auto; color: #fff; font-size: clamp(.58rem, 1.05vw, .9rem); font-weight: 750; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .28); transform: rotate(-14deg); }
@keyframes video-watermark-pan {
    from { transform: translate3d(-8%, 0, 0); }
    to { transform: translate3d(8%, 0, 0); }
}
.video-fullscreen-button { position: absolute; top: .8rem; right: .8rem; z-index: 5; display: inline-flex; align-items: center; gap: .35rem; min-height: 38px; padding: .4rem .65rem; color: rgba(255, 255, 255, .86); background: rgba(2, 10, 18, .62); border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; }
.video-fullscreen-button:hover, .video-fullscreen-button:focus-visible { color: white; background: rgba(2, 10, 18, .82); outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 2px; }
.video-fullscreen-button b { font-size: .74rem; font-weight: 700; }
.secure-video-stage:fullscreen, .secure-video-stage:-webkit-full-screen, .secure-video-stage.is-pseudo-fullscreen { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; background: #000; }
.secure-video-stage:fullscreen video, .secure-video-stage:-webkit-full-screen video, .secure-video-stage.is-pseudo-fullscreen video { width: 100%; height: 100%; object-fit: contain; }
.secure-video-stage.is-pseudo-fullscreen { position: fixed; inset: 0; z-index: 1000; padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
html.media-fullscreen-open, html.media-fullscreen-open body { overflow: hidden; overscroll-behavior: none; }
.media-security-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.35rem; color: rgba(255, 255, 255, .78); background: #0b2138; }
.media-security-note span { font-size: .78rem; font-weight: 750; }
.media-security-note small { color: rgba(255, 255, 255, .52); font-size: .72rem; text-align: right; }

.protected-media-card audio { display: block; width: 100%; min-height: 54px; }
.lesson-audio-card, .lesson-body-card, .lesson-attachments-card, .lesson-notice-card { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: 18px; }
.lesson-audio-card h2, .lesson-body-card h2, .lesson-attachments-card h2 { margin-top: 0; }
.lesson-body-card .prose { max-width: 900px; padding: .8rem 0 0; color: #37413b; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.95; }
.attachment-link { display: inline-flex; min-height: 44px; align-items: center; }
.lesson-sidebar { top: 96px; padding: 1.5rem; border-radius: 18px; }
.lesson-sidebar h3 { margin: .2rem 0 .9rem; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1.45rem; }
.lesson-status-line { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; color: #435048; font-size: .88rem; }
.status-dot { flex: 0 0 auto; width: 8px; height: 8px; background: #52a56f; border-radius: 50%; box-shadow: 0 0 0 5px rgba(82, 165, 111, .12); }
.lesson-sidebar-link { width: 100%; margin-top: .25rem; }
.screen-watermarks { position: fixed; inset: 76px 0 0; z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 34vh; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.screen-watermarks span { align-self: center; justify-self: center; color: rgba(110, 77, 58, .035); font-size: clamp(.62rem, .85vw, .78rem); font-weight: 700; letter-spacing: .04em; white-space: nowrap; transform: rotate(-19deg); }

.site-footer { margin-top: 3rem; color: #d6d9d7; background: #242a26; }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; padding-block: 2.5rem; }
.footer-inner p { margin: 0; }

@media (max-width: 1200px) {
    .lesson-container { width: min(1120px, calc(100% - 2.5rem)); }
    .learning-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 1.25rem; }
}

@media (max-width: 1024px) {
    .lesson-hero-grid, .learning-layout { grid-template-columns: 1fr; }
    .lesson-hero-meta { justify-content: flex-start; }
    .lesson-sidebar { position: static; }
    .screen-watermarks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .header-inner { min-height: 64px; }
    .nav-toggle { display: block; }
    .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--tint); }
    .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: .25rem; padding: .75rem max(1rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: #fffdf8; border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px rgba(45, 37, 25, .1); }
    .site-nav.open { display: flex; }
    .site-nav a, .site-nav .link-button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: .55rem .7rem; border-radius: 9px; }
    .site-nav a.active { background: #f6ece2; }
    .site-nav .button-small { justify-content: center; color: white; }
    .hero-grid, .split-layout, .form-grid { grid-template-columns: 1fr; }
    .hero-card { transform: none; }
    .card-grid, .card-grid-3, .feature-grid, .dashboard-grid { grid-template-columns: 1fr; }
    .section-heading, .footer-inner { align-items: start; flex-direction: column; }
    .sticky-card { position: static; }
    .span-2 { grid-column: auto; }
    .check-grid { grid-template-columns: 1fr; }
    .question-image-admin-preview { align-items: flex-start; flex-direction: column; }
    .lesson-container { width: calc(100% - 1.5rem); }
    .lesson-page-hero { padding-top: 1.6rem; }
    .lesson-page-hero h1 { font-size: clamp(1.85rem, 7vw, 3rem); }
    .lesson-hero-summary { line-height: 1.75; }
}

@media (max-width: 640px) {
    .container { width: calc(100% - 1.25rem); }
    .brand { gap: .55rem; }
    .brand-mark { width: 36px; height: 36px; font-size: 1.15rem; }
    .brand strong { font-size: .94rem; }
    .brand small { font-size: .65rem; }
    .lesson-page-hero .lesson-container { width: calc(100% - 1.25rem); }
    .lesson-breadcrumb { margin-bottom: .8rem; }
    .lesson-page-hero .eyebrow { margin-bottom: .45rem; font-size: .68rem; letter-spacing: .09em; }
    .lesson-page-hero h1 { margin-bottom: .75rem; }
    .lesson-hero-meta { gap: .45rem; white-space: normal; }
    .lesson-learning-shell { width: 100%; padding-top: .75rem; }
    .learning-layout, .learning-content { gap: .85rem; }
    .learning-content > .card:not(.lesson-player-card), .lesson-sidebar { margin-inline: .65rem; }
    .lesson-player-card { border-right: 0; border-left: 0; border-radius: 0; }
    .media-card-header { padding: .85rem .8rem; }
    .media-card-header h2 { font-size: .98rem; }
    .secure-playback-badge { padding: .28rem .5rem; font-size: .65rem; }
    .secure-video-stage { min-height: 210px; aspect-ratio: 16 / 9; }
    .video-watermark-row { gap: 4rem; opacity: .075; }
    .video-watermark-row span { font-size: .56rem; letter-spacing: .03em; }
    .video-fullscreen-button { top: .5rem; right: .5rem; min-height: 36px; padding: .35rem .55rem; }
    .video-fullscreen-button b { display: none; }
    .media-security-note { align-items: flex-start; flex-direction: column; gap: .15rem; padding: .7rem .8rem; }
    .media-security-note small { text-align: left; }
    .lesson-audio-card, .lesson-body-card, .lesson-attachments-card, .lesson-notice-card { padding: 1.15rem; border-radius: 14px; }
    .lesson-body-card .prose { font-size: 1rem; line-height: 1.85; }
    .lesson-sidebar { padding: 1.15rem; }
    .screen-watermarks { inset: 64px 0 0; grid-auto-rows: 30vh; }
    .screen-watermarks span { font-size: .54rem; }
    .site-footer { margin-top: 1.5rem; }
}

@media (max-width: 420px) {
    .brand small { display: none; }
    .secure-playback-badge { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
    .secure-video-stage { min-height: 190px; }
    .screen-watermarks { grid-template-columns: 1fr; }
    .screen-watermarks span:nth-child(even) { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .secure-video-stage.is-pseudo-fullscreen .video-fullscreen-button { top: max(.45rem, env(safe-area-inset-top)); right: max(.45rem, env(safe-area-inset-right)); }
    .secure-video-stage.is-pseudo-fullscreen .video-watermark-row { opacity: .07; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .video-watermark-row { animation: none; transform: translate3d(0, 0, 0); }
}