:root {
  --doc-ink:#203345;
  --doc-muted:#6c7d8b;
  --doc-green:#287a68;
  --doc-green-dark:#1f5f53;
  --doc-yellow:#f6c85d;
  --doc-paper:#fffefa;
  --doc-line:#dfe8e4;
  --doc-shadow:0 15px 38px rgba(36,72,67,.09);
}

[hidden] { display:none!important; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--doc-ink); background:#f5faf8; font-family:"Nunito","PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
button,input,select { font:inherit; }
button { color:inherit; }
.skip-link { position:fixed; z-index:120; top:8px; left:8px; padding:9px 12px; border-radius:10px; color:#fff; background:#203345; transform:translateY(-160%); }
.skip-link:focus { transform:none; }

.doc-topbar { position:sticky; z-index:30; top:0; height:72px; display:flex; align-items:center; padding:0 max(24px,calc((100vw - 1160px)/2)); border-bottom:1px solid var(--doc-line); background:rgba(255,254,250,.94); backdrop-filter:blur(14px); }
.doc-back { padding:9px 12px; border-radius:12px; color:#607486; text-decoration:none; font-size:calc(14px * var(--fs,1)); font-weight:850; }
.doc-back:hover { background:#eef5f2; }
.doc-brand { display:flex; align-items:center; gap:11px; margin:auto; color:var(--doc-ink); text-decoration:none; }
.doc-brand>span { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; color:#fff; background:var(--doc-green); box-shadow:0 4px 0 var(--doc-green-dark); font-size:calc(23px * var(--fs,1)); }
.doc-brand div { display:flex; flex-direction:column; }
.doc-brand b { font-size:calc(16px * var(--fs,1)); }
.doc-brand small { margin-top:2px; color:var(--doc-muted); font-size:calc(12.5px * var(--fs,1)); }
.doc-learner { display:flex; align-items:center; gap:7px; padding:5px 9px; border:0; border-radius:13px; background:transparent; cursor:pointer; font-size:calc(14px * var(--fs,1)); }
.doc-learner:hover { background:#edf6f2; }
.doc-learner span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#dff3ea; }

.doc-shell { width:min(1160px,calc(100% - 40px)); margin:26px auto 90px; }
.doc-hero { position:relative; min-height:315px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; padding:42px 52px; border:1px solid #d6e6df; border-radius:32px; background:radial-gradient(circle at 74% 13%,rgba(255,255,255,.48),transparent 25%),linear-gradient(120deg,#e5f4ed,#f9f5dc 58%,#d8ece8); box-shadow:var(--doc-shadow); }
.doc-hero::after { content:""; position:absolute; right:-70px; bottom:-95px; width:310px; height:210px; border:24px solid rgba(40,122,104,.075); border-radius:50%; transform:rotate(-13deg); }
.doc-hero-copy { position:relative; z-index:2; max-width:670px; }
.doc-kicker { color:var(--doc-green); font-size:calc(13px * var(--fs,1)); font-weight:950; letter-spacing:.12em; }
.doc-hero h1 { max-width:630px; margin:12px 0 10px; font-size:clamp(34px,5vw,55px); line-height:1.12; letter-spacing:-.045em; }
.doc-hero p { max-width:620px; margin:0; color:#586f72; font-size:calc(16px * var(--fs,1)); line-height:1.8; }
.doc-hero-actions { display:flex; align-items:center; gap:18px; margin-top:25px; }
.doc-hero-actions button { min-height:49px; padding:0 20px; border:0; border-radius:15px; color:#fff; background:var(--doc-green); box-shadow:0 6px 0 var(--doc-green-dark); cursor:pointer; font-weight:950; }
.doc-hero-actions button:hover { transform:translateY(-2px); }
.doc-today-recommendation { min-width:0; display:flex; flex-direction:column; }
.doc-today-recommendation b { overflow:hidden; max-width:430px; color:#315d54; font-size:calc(14px * var(--fs,1)); line-height:1.45; white-space:nowrap; text-overflow:ellipsis; }
.doc-today-recommendation small { margin-top:2px; color:#687c78; font-size:calc(12px * var(--fs,1)); font-weight:800; line-height:1.45; }
.doc-hero .doc-library-count { margin-top:13px; color:#71817f; font-size:calc(12.5px * var(--fs,1)); font-weight:800; line-height:1.5; }
.doc-library-count strong { color:var(--doc-green-dark); font-size:calc(16px * var(--fs,1)); }
.doc-projector { position:relative; z-index:2; width:230px; height:177px; flex:0 0 auto; margin-right:10px; border:10px solid rgba(255,255,255,.6); border-radius:42px; color:#fff; background:#315f59; box-shadow:0 13px 0 rgba(37,85,76,.17); transform:rotate(3deg); }
.doc-projector b { position:absolute; left:27px; bottom:29px; font-size:calc(29px * var(--fs,1)); line-height:1.05; letter-spacing:.06em; }
.doc-projector i { position:absolute; right:-55px; bottom:27px; width:63px; height:28px; border-radius:0 7px 7px 0; background:#315f59; clip-path:polygon(0 20%,100% 0,100% 100%,0 80%); }
.doc-projector .reel { position:absolute; top:-45px; width:82px; height:82px; display:grid; place-items:center; border:12px dotted #315f59; border-radius:50%; color:#f4d37b; background:#e9e8d3; font-size:calc(31px * var(--fs,1)); }
.doc-projector .reel-one { left:19px; }
.doc-projector .reel-two { right:17px; transform:scale(.82); }

.family-note { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:15px; margin:18px 4px 0; padding:16px 19px; border:1px solid #e6dfbd; border-radius:19px; background:#fffae8; }
.family-note>span { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:#fff1ba; font-size:calc(22px * var(--fs,1)); }
.family-note b { font-size:calc(14px * var(--fs,1)); }
.family-note p { margin:4px 0 0; color:#756f5e; font-size:calc(13.5px * var(--fs,1)); line-height:1.65; }
.doc-rating-policy { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; margin:12px 4px 0; padding:14px 17px; border:1px solid #cfe2da; border-radius:18px; color:#315b51; background:#edf7f3; }
.doc-rating-policy>span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#fff; background:var(--doc-green); font-size:calc(22px * var(--fs,1)); }
.doc-rating-policy b { font-size:calc(14px * var(--fs,1)); }
.doc-rating-policy p { margin:3px 0 0; color:#60756f; font-size:calc(12.5px * var(--fs,1)); line-height:1.55; }
.doc-rating-policy a { min-height:38px; display:inline-flex; align-items:center; padding:0 11px; border:1px solid #bfd6cd; border-radius:10px; color:var(--doc-green-dark); background:#fff; text-decoration:none; font-size:calc(12.5px * var(--fs,1)); font-weight:900; }

.doc-player-section { margin-top:26px; padding:24px; border:1px solid #cadfd7; border-radius:28px; background:#fdfefc; box-shadow:var(--doc-shadow); scroll-margin-top:92px; }
.doc-player-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:17px; }
.doc-player-heading span { color:var(--doc-green); font-size:calc(12.5px * var(--fs,1)); font-weight:950; letter-spacing:.09em; }
.doc-player-heading h2 { margin:4px 0 2px; font-size:calc(24px * var(--fs,1)); }
.doc-player-heading p { margin:0; color:var(--doc-muted); font-size:calc(13.5px * var(--fs,1)); }
#closePlayer { min-height:40px; padding:0 13px; border:1px solid var(--doc-line); border-radius:12px; color:#607486; background:#fff; cursor:pointer; font-size:calc(13px * var(--fs,1)); font-weight:850; }
.doc-player-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr); gap:20px; }
.doc-embed-column { min-width:0; }
.doc-episode-picker { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:11px; padding:10px; border:1px solid #d8e5df; border-radius:15px; background:#f4f9f7; }
.doc-episode-picker label { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px; color:#4f6b65; font-size:calc(12.5px * var(--fs,1)); font-weight:950; }
.doc-episode-picker select { min-width:0; width:100%; height:39px; padding:0 34px 0 10px; border:1px solid #cadcd5; border-radius:10px; color:#244a41; background:#fff; font-size:calc(13px * var(--fs,1)); font-weight:850; }
#currentEpisodeLabel { min-width:0; overflow:hidden; color:#627872; font-size:calc(12.5px * var(--fs,1)); font-weight:800; white-space:nowrap; text-overflow:ellipsis; }
.doc-episode-nav { display:flex; gap:6px; }
.doc-episode-nav button { min-height:38px; padding:0 10px; border:1px solid #cbded6; border-radius:10px; color:var(--doc-green-dark); background:#fff; cursor:pointer; font-size:calc(12.5px * var(--fs,1)); font-weight:900; }
.doc-episode-nav button:hover:not(:disabled) { border-color:#79a99d; background:#edf7f3; }
.doc-episode-nav button:disabled { color:#a2afaa; background:#edf1ef; cursor:not-allowed; }
.doc-frame-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:20px; background:#152721; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.doc-frame-wrap iframe { width:100%; height:100%; display:block; border:0; }
.doc-frame-placeholder { position:absolute; z-index:2; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; color:#dfeee9; background:radial-gradient(circle at 50% 45%,#2b5148,#172b26 70%); }
.doc-frame-placeholder span { width:65px; height:65px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.55); border-radius:50%; font-size:calc(25px * var(--fs,1)); }
.doc-embed-help { display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 10px; border:1px solid #e3e8e5; border-radius:12px; color:#70807b; background:#fafcfb; font-size:calc(12px * var(--fs,1)); line-height:1.45; }
.doc-embed-help>span { min-width:0; flex:1; }
.doc-embed-help b { color:#526760; }
.doc-embed-help button,.doc-embed-help a { min-height:34px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0 10px; border:1px solid #cfded8; border-radius:9px; color:var(--doc-green-dark); background:#fff; cursor:pointer; text-decoration:none; font-size:calc(12px * var(--fs,1)); font-weight:900; }
.doc-embed-help button:hover,.doc-embed-help a:hover { border-color:#79a99d; background:#f0f7f4; }
.doc-watch-guide { min-width:0; padding:20px; border:1px solid #dfe9e4; border-radius:20px; background:#f1f8f5; }
.doc-guide-heading { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.doc-guide-label { display:inline-block; padding:5px 8px; border-radius:8px; color:#fff; background:var(--doc-green); font-size:calc(12.5px * var(--fs,1)); font-weight:900; }
.doc-reader-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:1px solid #c8dcd4; border-radius:11px; color:var(--doc-green-dark); background:#fff; cursor:pointer; font-size:calc(11.5px * var(--fs,1)); font-weight:950; }
.doc-reader-button:hover { border-color:#7fae9f; background:#e9f5f0; }
.doc-reader-button[aria-pressed="true"] { color:#fff; border-color:#456f65; background:#527d72; }
.doc-reader-button span { font-size:calc(15px * var(--fs,1)); }
.doc-reader-status { display:block; margin-top:8px; color:#7d8c87; font-size:calc(10px * var(--fs,1)); line-height:1.45; }
.doc-reader-status[hidden] { display:none; }
.doc-watch-guide h3 { margin:12px 0 10px; font-size:calc(20px * var(--fs,1)); line-height:1.5; }
.doc-watch-guide>p { margin:0; color:#5c7176; font-size:calc(13.5px * var(--fs,1)); line-height:1.75; }
.doc-player-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.doc-player-meta span,.doc-player-meta a { padding:6px 8px; border:1px solid #d5e5de; border-radius:9px; color:#4e6a64; background:#fff; font-size:calc(12.5px * var(--fs,1)); font-weight:850; }
.doc-player-meta a { color:#8a5b1d; border-color:#e6d3a8; background:#fff9e9; text-decoration:none; }
.doc-watch-guide .doc-content-note { margin-top:14px; padding:10px 11px; border-left:3px solid #e2b555; border-radius:0 10px 10px 0; color:#71694f; background:#fff9e7; }
.doc-player-actions { display:grid; gap:9px; margin-top:17px; }
.doc-player-actions button,.doc-player-actions a { min-height:44px; display:flex; align-items:center; justify-content:center; padding:0 13px; border-radius:13px; font-size:calc(13.5px * var(--fs,1)); font-weight:900; text-decoration:none; }
.doc-player-actions button { border:0; color:#fff; background:var(--doc-green); box-shadow:0 4px 0 var(--doc-green-dark); cursor:pointer; }
.doc-player-actions button.is-watched { color:#28705f; background:#dcefe8; box-shadow:none; }
.doc-player-actions a { border:1px solid #cdded7; color:var(--doc-green-dark); background:#fff; }
.doc-talk-guide { margin-top:16px; padding:13px; border:1px solid #d9d1e8; border-radius:16px; background:linear-gradient(135deg,#f7f3fb,#fffaf0); }
.doc-talk-guide[hidden] { display:none; }
.doc-talk-guide>header { display:grid; grid-template-columns:42px minmax(0,1fr); gap:9px; align-items:center; }
.doc-talk-guide>header>span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#ebe4f4; font-size:calc(21px * var(--fs,1)); }
.doc-talk-guide>header div { min-width:0; display:flex; flex-direction:column; }
.doc-talk-guide>header small { color:#75678d; font-size:calc(10.5px * var(--fs,1)); font-weight:950; }
.doc-talk-guide h4 { margin:2px 0 0; color:#554d63; font-size:calc(14px * var(--fs,1)); line-height:1.35; }
.doc-talk-prompts { display:grid; gap:7px; margin-top:11px; }
.doc-talk-prompts button { min-height:62px; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:9px 10px; border:1px solid #ddd7e6; border-radius:12px; color:#615a6e; background:rgba(255,255,255,.84); cursor:pointer; text-align:left; }
.doc-talk-prompts button>span { display:flex; align-items:center; gap:6px; }
.doc-talk-prompts button i { font-size:calc(17px * var(--fs,1)); font-style:normal; }
.doc-talk-prompts button b { font-size:calc(11.5px * var(--fs,1)); }
.doc-talk-prompts button small { color:#7d7785; font-size:calc(11px * var(--fs,1)); line-height:1.45; }
.doc-talk-prompts button:hover { border-color:#aa99c1; background:#faf7fd; }
.doc-talk-prompts button[aria-pressed="true"] { color:#5c4777; border-color:#9e89bb; background:#eee7f6; box-shadow:inset 0 0 0 1px #b29fc9; }
.doc-talk-prompts button[aria-pressed="true"] small { color:#665b76; }
.doc-talk-starter { margin:9px 0 0!important; padding:9px 10px; border-radius:11px; color:#5f5570!important; background:#eee8f6; font-size:calc(11.5px * var(--fs,1))!important; font-weight:850; line-height:1.5!important; }
.doc-talk-note { display:block; margin-top:7px; color:#8a858d; font-size:calc(10px * var(--fs,1)); line-height:1.45; }

.doc-library { margin-top:37px; }
.doc-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 5px 15px; }
.doc-section-heading h2 { margin:5px 0 0; font-size:calc(27px * var(--fs,1)); }
.doc-section-heading p { margin:0; color:var(--doc-muted); font-size:calc(13.5px * var(--fs,1)); font-weight:850; }
.doc-toolbar { padding:19px; border:1px solid var(--doc-line); border-radius:23px; background:#f6faf8; }
.doc-topic-filters { display:flex; flex-wrap:wrap; gap:8px; }
.doc-topic-filters button { min-height:39px; padding:7px 11px; border:1px solid #d8e5df; border-radius:12px; color:#56706c; background:#fff; cursor:pointer; font-size:calc(13.5px * var(--fs,1)); font-weight:900; }
.doc-topic-filters button:hover { border-color:#78a99d; transform:translateY(-1px); }
.doc-topic-filters button.active { color:#fff; border-color:var(--doc-green); background:var(--doc-green); box-shadow:0 4px 0 var(--doc-green-dark); }
.doc-topic-filters small { margin-left:4px; opacity:.76; }
.doc-filter-row { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(165px,.6fr) minmax(165px,.6fr); gap:10px; margin-top:14px; }
.doc-filter-row label { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px; min-height:47px; padding:5px 7px 5px 12px; border:1px solid #dbe6e1; border-radius:14px; color:#607672; background:#fff; font-size:calc(13px * var(--fs,1)); font-weight:900; }
.doc-filter-row input,.doc-filter-row select { min-width:0; width:100%; height:35px; padding:0 9px; border:0; border-radius:9px; color:#29443f; background:#f1f6f4; outline:none; font-size:calc(13px * var(--fs,1)); font-weight:750; }
.doc-filter-row input:focus,.doc-filter-row select:focus { box-shadow:0 0 0 3px rgba(40,122,104,.18); }
#matchCount { margin:12px 2px 0; color:#758681; font-size:calc(13px * var(--fs,1)); font-weight:800; }

.doc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.doc-card { position:relative; min-width:0; overflow:hidden; padding:0; border:1px solid var(--doc-line); border-radius:23px; background:var(--doc-paper); box-shadow:0 8px 24px rgba(45,75,69,.055); cursor:pointer; text-align:left; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.doc-card:hover { border-color:#a9c7bd; box-shadow:var(--doc-shadow); transform:translateY(-4px); }
.doc-card.is-active { border-color:var(--doc-green); box-shadow:0 0 0 3px rgba(40,122,104,.13),var(--doc-shadow); }
.doc-card-cover { --cover-a:#82b5a4; --cover-b:#315f59; position:relative; height:164px; overflow:hidden; color:#fff; background:linear-gradient(135deg,var(--cover-a),var(--cover-b)); }
.doc-card-cover::before { content:""; position:absolute; width:130px; height:130px; right:-24px; top:-31px; border:21px solid rgba(255,255,255,.12); border-radius:50%; }
.doc-card-cover::after { content:""; position:absolute; left:-28px; right:-28px; bottom:-42px; height:94px; border-radius:50%; background:rgba(18,47,46,.22); transform:rotate(-5deg); }
.doc-card-icon { position:absolute; left:20px; top:18px; font-size:calc(42px * var(--fs,1)); filter:drop-shadow(0 4px 5px rgba(0,0,0,.12)); }
.doc-card-mark { position:absolute; z-index:2; right:18px; bottom:15px; color:rgba(255,255,255,.86); font-family:"STKaiti","KaiTi",serif; font-size:calc(70px * var(--fs,1)); font-weight:800; line-height:1; }
.doc-card-topic { position:absolute; z-index:3; left:17px; bottom:15px; padding:5px 8px; border:1px solid rgba(255,255,255,.35); border-radius:9px; background:rgba(25,52,49,.35); backdrop-filter:blur(4px); font-size:calc(12.5px * var(--fs,1)); font-weight:900; }
.doc-watched-tag { position:absolute; z-index:4; top:11px; right:11px; padding:5px 8px; border-radius:9px; color:#236757; background:#e1f4ed; font-size:calc(12.5px * var(--fs,1)); font-weight:950; }
.doc-card-copy { padding:18px 18px 19px; }
.doc-card-ranking { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.doc-card-ranking strong { color:#28705f; font-size:calc(12px * var(--fs,1)); letter-spacing:.03em; }
.doc-card-ranking span { flex:0 0 auto; padding:4px 7px; border-radius:8px; color:#8a5b1d; background:#fff3ce; font-size:calc(12px * var(--fs,1)); font-weight:950; }
.doc-card-copy h3 { margin:0; font-size:calc(18px * var(--fs,1)); }
.doc-card-copy>p { min-height:42px; margin:7px 0 12px; color:var(--doc-muted); font-size:calc(13.5px * var(--fs,1)); line-height:1.6; }
.doc-card-meta { display:flex; flex-wrap:wrap; gap:6px; }
.doc-card-meta span { padding:5px 7px; border-radius:8px; color:#4e6e67; background:#edf5f2; font-size:calc(12.5px * var(--fs,1)); font-weight:850; }
.doc-card-progress { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:12px; }
.doc-card-progress>span { height:7px; overflow:hidden; border-radius:99px; background:#e1ebe7; }
.doc-card-progress>span i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4aa084,#e0b64e); }
.doc-card-progress>small { color:#687b76; font-size:calc(11px * var(--fs,1)); font-weight:850; }
.doc-card-provider { display:block; overflow:hidden; margin-top:12px; color:#87938f; font-size:calc(12px * var(--fs,1)); font-weight:750; white-space:nowrap; text-overflow:ellipsis; }
.doc-empty { margin-top:18px; padding:52px 20px; border:1px dashed #b9cec7; border-radius:22px; background:#f7fbf9; text-align:center; }
.doc-empty>span { display:block; font-size:calc(45px * var(--fs,1)); }
.doc-empty b { display:block; margin-top:9px; font-size:calc(18px * var(--fs,1)); }
.doc-empty p { margin:6px 0 17px; color:var(--doc-muted); font-size:calc(13.5px * var(--fs,1)); }
.doc-empty button { min-height:43px; padding:0 17px; border:0; border-radius:12px; color:#fff; background:var(--doc-green); cursor:pointer; font-size:calc(13.5px * var(--fs,1)); font-weight:900; }
.doc-toast { position:fixed; z-index:110; left:50%; bottom:24px; max-width:min(90vw,520px); padding:11px 17px; border-radius:12px; color:#fff; background:#243d38; opacity:0; transform:translate(-50%,15px); transition:.2s; pointer-events:none; text-align:center; font-size:calc(13.5px * var(--fs,1)); font-weight:850; }
.doc-toast.show { opacity:1; transform:translate(-50%,0); }

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(47,137,116,.38); outline-offset:3px; }

@media(max-width:960px) {
  .doc-projector { width:190px; transform:scale(.88) rotate(3deg); }
  .doc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .doc-player-layout { grid-template-columns:1fr; }
}

@media(max-width:760px) {
  .doc-topbar { height:65px; padding:0 13px; }
  .doc-back span,.doc-brand small,.doc-learner b { display:none; }
  .doc-shell { width:calc(100% - 24px); margin-top:15px; }
  .doc-hero { min-height:390px; align-items:flex-start; padding:28px 23px; }
  .doc-hero h1 { font-size:calc(35px * var(--fs,1)); }
  .doc-hero p { font-size:calc(14.5px * var(--fs,1)); }
  .doc-hero-actions { align-items:flex-start; flex-direction:column; gap:12px; }
  .doc-projector { position:absolute; right:-10px; bottom:8px; width:180px; transform:scale(.72) rotate(3deg); transform-origin:right bottom; }
  .family-note { align-items:start; padding:14px; }
  .doc-rating-policy { grid-template-columns:auto minmax(0,1fr); padding:14px; }
  .doc-rating-policy a { grid-column:1/-1; justify-content:center; }
  .doc-player-section { padding:16px; border-radius:22px; scroll-margin-top:78px; }
  .doc-player-heading { align-items:start; }
  #closePlayer { flex:0 0 auto; }
  .doc-watch-guide { padding:17px; }
  .doc-episode-picker { grid-template-columns:1fr auto; }
  .doc-episode-picker label { grid-column:1/-1; }
  #currentEpisodeLabel { padding-left:3px; }
  .doc-embed-help { align-items:stretch; flex-wrap:wrap; }
  .doc-embed-help>span { width:100%; flex-basis:100%; }
  .doc-embed-help button,.doc-embed-help a { flex:1; }
  .doc-section-heading { align-items:flex-start; flex-direction:column; gap:7px; }
  .doc-toolbar { padding:14px; }
  .doc-topic-filters { flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 7px; scrollbar-width:thin; }
  .doc-topic-filters button { flex:0 0 auto; }
  .doc-filter-row { grid-template-columns:1fr; }
  .doc-grid { grid-template-columns:1fr; }
  .doc-card { min-height:188px; display:grid; grid-template-columns:145px minmax(0,1fr); }
  .doc-card-cover { height:100%; min-height:188px; }
  .doc-card-copy { padding:17px 15px; }
  .doc-card-copy>p { min-height:0; }
  .doc-card-mark { font-size:calc(59px * var(--fs,1)); }
}

@media(max-width:430px) {
  .doc-brand>span { width:38px; height:38px; }
  .doc-hero { min-height:410px; }
  .doc-hero h1 { font-size:calc(31px * var(--fs,1)); }
  .doc-projector { right:-25px; transform:scale(.63) rotate(3deg); }
  .doc-player-heading h2 { font-size:calc(21px * var(--fs,1)); }
  .doc-episode-picker { grid-template-columns:1fr; }
  .doc-episode-picker label { grid-template-columns:1fr; gap:5px; }
  #currentEpisodeLabel { white-space:normal; }
  .doc-episode-nav { display:grid; grid-template-columns:1fr 1fr; }
  .doc-filter-row label { grid-template-columns:1fr; gap:4px; padding:8px; }
  .doc-card { grid-template-columns:116px minmax(0,1fr); }
  .doc-card-copy { padding:15px 13px; }
  .doc-card-copy h3 { font-size:calc(16px * var(--fs,1)); }
  .doc-card-ranking { align-items:flex-start; flex-direction:column; gap:5px; }
  .doc-card-copy>p { font-size:calc(13px * var(--fs,1)); }
  .doc-card-meta span:nth-child(3) { display:none; }
  .doc-card-provider { display:none; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .doc-card,.doc-hero-actions button,.doc-topic-filters button,.doc-toast { transition:none; }
}