/* AuthorBean "TV" theme layer — Apple TV app inspired look for the studio chrome.
   Loaded LAST from index.html. Authoring surfaces only: learner/course styles (runtime.css,
   course-styles.css, player) are not touched. Remove the <link> to go back to the previous look. */

/* ---------- Tokens ---------- */
:root,:root[data-theme="light"]{
 --e-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
 --wf-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
 --e-bg:#f5f5f7;--e-sunk:#ececf0;--e-panel:#ffffff;--e-ink:#1d1d1f;--e-muted:#6e6e73;--e-faint:#6e6e73;
 --e-accent:#0071e3;--e-accent-hover:#0062c4;--e-accent-ink:#ffffff;--e-accent-soft:#e3efff;--e-accent-text:#0058b0;
 --e-line:#d9d9de;--e-line2:#aeaeb2;--e-fill:#e8e8ed;--e-fill2:#dcdce1;
 --studio-shadow-color:rgb(0 0 0 / .10);--studio-scrim:rgb(0 0 0 / .45);
 --e-shadow-xs:0 1px 2px rgb(0 0 0 / .06);--e-shadow-sm:0 2px 8px rgb(0 0 0 / .08);
 --e-shadow:0 8px 28px rgb(0 0 0 / .12);--e-shadow-lg:0 30px 80px rgb(0 0 0 / .22);
 --e-ring:0 0 0 4px rgb(0 113 227 / .35);
 /* TV layer extras */
 --tv-glass:rgb(255 255 255 / .72);--tv-glass-strong:rgb(255 255 255 / .86);--tv-glass-edge:rgb(255 255 255 / .6);
 --tv-cta:#1d1d1f;--tv-cta-ink:#ffffff;--tv-cta-hover:#000000;
 --tv-poster-shadow:0 6px 18px rgb(0 0 0 / .14);--tv-poster-lift:0 22px 44px rgb(0 0 0 / .26);
 --tv-hero-1:#cfe3ff;--tv-hero-2:#d8f3ec;--tv-hero-ink:#1d1d1f;--tv-hero-muted:#3a3a3c;
 --tv-ease:cubic-bezier(.2,.8,.2,1);
 color-scheme:light;
}
:root[data-theme="dark"]{
 --e-bg:#000000;--e-sunk:#111113;--e-panel:#1c1c1e;--e-ink:#f5f5f7;--e-muted:#a1a1a6;--e-faint:#98989d;
 --e-accent:#2997ff;--e-accent-hover:#5cb0ff;--e-accent-ink:#000000;--e-accent-soft:#0e2a47;--e-accent-text:#7cc0ff;
 --e-line:#2c2c2e;--e-line2:#545458;--e-fill:#2c2c2e;--e-fill2:#3a3a3c;
 --studio-shadow-color:rgb(0 0 0 / .55);--studio-scrim:rgb(0 0 0 / .62);
 --e-shadow-xs:0 1px 2px rgb(0 0 0 / .5);--e-shadow-sm:0 2px 8px rgb(0 0 0 / .5);
 --e-shadow:0 10px 30px rgb(0 0 0 / .55);--e-shadow-lg:0 30px 90px rgb(0 0 0 / .7);
 --e-ring:0 0 0 4px rgb(41 151 255 / .45);
 --tv-glass:rgb(28 28 30 / .66);--tv-glass-strong:rgb(28 28 30 / .82);--tv-glass-edge:rgb(255 255 255 / .08);
 --tv-cta:#f5f5f7;--tv-cta-ink:#000000;--tv-cta-hover:#ffffff;
 --tv-poster-shadow:0 8px 22px rgb(0 0 0 / .6);--tv-poster-lift:0 28px 60px rgb(0 0 0 / .8);
 --tv-hero-1:#0b3a6e;--tv-hero-2:#0b4a43;--tv-hero-ink:#f5f5f7;--tv-hero-muted:#d1d1d6;
 color-scheme:dark;
}

/* ---------- Base ---------- */
html,body{background:var(--e-bg)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s ease,color .3s ease}
body,.e-app,#lib,.e-dialog,.e-btn,.e-in,.e-sel{font-family:var(--e-font)}
button:focus-visible,summary:focus-visible,.e-btn:focus-visible,.e-icbtn:focus-visible{outline:none;box-shadow:var(--e-ring)}
::selection{background:var(--e-accent);color:var(--e-accent-ink)}

/* ---------- Buttons: Apple pill controls ---------- */
.e-btn{border-radius:999px;font-weight:600;letter-spacing:-.005em;background:var(--e-fill);border-color:transparent;color:var(--e-ink)}
.e-btn:hover:not([disabled]){background:var(--e-fill2);border-color:transparent}
.e-btn.ghost{background:transparent}
.e-btn.ghost:hover:not([disabled]){background:var(--e-fill)}
.e-btn.primary,.ab-btn.primary{background:var(--tv-cta);color:var(--tv-cta-ink);border-color:transparent;box-shadow:none}
.e-btn.primary:hover:not([disabled]),.ab-btn.primary:hover{background:var(--tv-cta-hover);color:var(--tv-cta-ink);border-color:transparent}
.e-btn:not([disabled]):active,.e-icbtn:not([disabled]):active,.wf-fbtn:active,.lib-tile:active{transform:scale(.97);transition:transform .1s ease-out}
.e-icbtn{border-radius:999px}
.ab-btn{border-radius:999px;border-color:transparent;background:var(--e-fill);color:var(--e-ink)}

/* Inputs */
.e-in,.e-sel,.e-ta,.ab-input{background:var(--e-fill);border:1px solid transparent;border-radius:12px}
.e-in:hover,.e-sel:hover,.e-ta:hover{border-color:var(--e-line2)}
.e-in:focus,.e-sel:focus,.e-ta:focus,.ab-input:focus-visible{background:var(--e-panel);border-color:var(--e-accent);box-shadow:var(--e-ring)}

/* ---------- Library: sidebar rail (glass, like the TV app sidebar) ---------- */
.studio-rail{background:var(--tv-glass);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-right:1px solid var(--tv-glass-edge)}
.studio-logo{color:var(--e-ink)}
.studio-nav{color:var(--e-muted);border-radius:14px;font-weight:500}
.studio-nav.active:before,.studio-nav:hover:before{background:var(--e-fill);border-radius:12px}
.studio-nav.active{color:var(--e-ink);font-weight:700}
.studio-nav.active:before{background:var(--e-fill2)}
.studio-fab{background:var(--tv-cta);color:var(--tv-cta-ink);border-radius:50%;box-shadow:var(--e-shadow-sm)}
.studio-fab:hover{background:var(--tv-cta-hover);box-shadow:var(--e-shadow)}

/* Top bar: floating translucent material, content scrolls under it */
.l-app .e-top{position:sticky;top:0;z-index:25;background:var(--tv-glass);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--tv-glass-edge)}
.e-name b{font-weight:700;letter-spacing:-.02em}
.e-mark i{border-radius:8px}

/* Page heading: large, bold, tight tracking */
.l-main{max-width:1440px}
.studio-breadcrumb{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--e-muted)}
.studio-heading h1{font-size:clamp(34px,4.2vw,52px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.studio-heading p{font-size:15px;color:var(--e-muted)}

/* ---------- Hero: "Pick up where you left off" as a featured banner ---------- */
.wf-cont{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(260px,32vw,380px);align-items:flex-end;border:0;border-radius:28px;padding:clamp(24px,4vw,48px);margin:0 0 44px;color:var(--tv-hero-ink);
 background:
  radial-gradient(120% 140% at 85% 0%,var(--tv-hero-1) 0%,transparent 55%),
  radial-gradient(90% 120% at 0% 100%,var(--tv-hero-2) 0%,transparent 60%),
  var(--e-panel);
 box-shadow:var(--e-shadow)}
.wf-cont::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 35%,rgb(0 0 0 / .18) 100%)}
:root[data-theme="light"] .wf-cont::after{background:linear-gradient(180deg,transparent 40%,rgb(255 255 255 / .35) 100%)}
.wf-cont .wf-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tv-hero-muted)}
.wf-cont .wf-pipe-l li{color:var(--tv-hero-muted)}
.wf-cont .wf-pipe-l .c{color:var(--tv-hero-ink)}
.wf-cont h2{font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--tv-hero-ink);text-wrap:balance}
.wf-cont p{font-size:15px;color:var(--tv-hero-muted);max-width:60ch}
.wf-cont-a{gap:12px}
.wf-cont-a .e-btn{height:50px;padding:0 24px;font-size:15px;border-radius:999px}
.wf-cont-a .e-btn:not(.wf-dark-btn){background:var(--tv-glass);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);color:var(--e-ink);border:1px solid var(--tv-glass-edge)}
.wf-dark-btn{background:var(--tv-cta)!important;color:var(--tv-cta-ink)!important;border-color:transparent!important}
.wf-dark-btn:hover{background:var(--tv-cta-hover)!important}
.wf-pipe-l i,.wf-pipe i{height:4px;border-radius:2px;background:var(--e-fill2)}
.wf-pipe-l .d i,.wf-pipe .d{background:var(--e-ink)}
.wf-pipe-l .c i,.wf-pipe .c{background:var(--e-accent)}

/* ---------- Library layout ---------- */
.lib-wrap{gap:36px}
.lib-side{background:var(--e-panel);border:0;border-radius:22px;padding:14px 10px;box-shadow:var(--e-shadow-sm)}
.lib-vbtn{border-radius:12px;font-weight:500}
.lib-vbtn:hover{background:var(--e-fill)}
.lib-vbtn[aria-current="page"]{background:var(--e-fill2);color:var(--e-ink);font-weight:700}
.lib-vbtn[aria-current="page"] .e-ico{color:var(--e-ink)}
.lib-fhead h3{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--e-muted)}

.studio-search{height:44px;border:1px solid transparent;border-radius:999px;background:var(--e-fill);color:var(--e-muted)}
.studio-search:focus-within{background:var(--e-panel);border-color:var(--e-accent);box-shadow:var(--e-ring);outline:none}
.lib-sort .e-sel{border-radius:999px;height:44px}

/* Shelf heading */
.lib-crumbs h2{font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.025em}
.studio-count{font-size:13px;font-weight:600;color:var(--e-muted);background:var(--e-fill);border-radius:999px;padding:2px 10px;letter-spacing:0}
.lib-ctx{color:var(--e-muted)}

/* Stage filters: tvOS segmented pills */
.wf-filters{gap:8px}
.wf-fbtn{min-height:38px;padding:0 16px;border:0;border-radius:999px;background:var(--e-fill);color:var(--e-ink);font-weight:600;font-family:var(--e-font)}
.wf-fbtn:hover{background:var(--e-fill2)}
.wf-fbtn span{background:transparent;color:var(--e-muted);padding:0}
.wf-fbtn[aria-pressed="true"]{background:var(--tv-cta);color:var(--tv-cta-ink)}
.wf-fbtn[aria-pressed="true"] span{background:transparent;color:inherit;opacity:.7}

/* Folder tiles: a horizontal shelf that scrolls sideways */
.lib-tiles{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(220px,260px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:4px;padding:6px 4px 14px;margin:0 -4px 20px;scrollbar-width:thin;scrollbar-color:var(--e-line2) transparent}
.lib-tiles>[role="listitem"]{scroll-snap-align:start}
.lib-tile{min-height:96px;border:0;border-radius:18px;padding:16px 18px;background:var(--e-panel);box-shadow:var(--tv-poster-shadow);transition:transform .35s var(--tv-ease),box-shadow .35s var(--tv-ease),background-color .2s}
.lib-tile .e-ico{width:30px;height:30px;color:var(--e-accent-text)}
.lib-tile b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.lib-tile:hover,.lib-tile:focus-visible{transform:scale(1.04);box-shadow:var(--tv-poster-lift),var(--e-ring);border-color:transparent}
.lib-tile:hover{box-shadow:var(--tv-poster-lift)}

/* ---------- Course cards: poster-first, like TV app artwork ---------- */
.wf-grid:not(.studio-list){grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:36px 26px}
.wf-lcard{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;border-radius:0!important;transform:none!important}
.wf-lcard:hover{transform:none!important;box-shadow:none!important}
.wf-grid:not(.studio-list) .wf-cover{height:auto;aspect-ratio:16/9;border-radius:18px;box-shadow:var(--tv-poster-shadow);padding:12px 14px;transform-origin:50% 60%;transition:transform .4s var(--tv-ease),box-shadow .4s var(--tv-ease)}
.wf-cover{isolation:isolate}
.wf-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s var(--tv-ease);
 background:linear-gradient(115deg,rgb(255 255 255 / .28) 0%,rgb(255 255 255 / .06) 32%,transparent 55%);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .18)}
.wf-cover b{font-size:84px;font-weight:800;letter-spacing:-.04em;color:rgb(255 255 255 / .42)}
.wf-lcard:hover .wf-cover,.wf-lcard:focus-within .wf-cover{transform:scale(1.045) translateY(-4px);box-shadow:var(--tv-poster-lift)}
.wf-lcard:hover .wf-cover::after,.wf-lcard:focus-within .wf-cover::after{opacity:1}
.wf-chip{z-index:2;background:rgb(0 0 0 / .55);color:#fff;-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 10px}
.lib-star{z-index:3;background:rgb(0 0 0 / .45);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);width:40px;height:40px}
.lib-star[aria-pressed="true"]{color:#ffd60a}
.lib-star[aria-pressed="true"] .e-ico{fill:#ffd60a;stroke:#ffd60a}
.wf-cb{padding:14px 2px 0;gap:6px}
.wf-cb h3{font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.wf-cb .wf-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--e-muted)}
.wf-meta,.studio-updated{color:var(--e-muted)}
.studio-tags span{border-radius:999px;background:var(--e-fill);color:var(--e-ink);border:0}
.wf-foot{border-top:0;padding-top:6px}
.wf-acts .e-icbtn{border-radius:999px}
.wf-acts .e-icbtn:hover{background:var(--e-fill)}
@media (hover:hover) and (pointer:fine){
 .wf-grid:not(.studio-list) .wf-acts{opacity:0;transition:opacity .2s ease}
 .wf-grid:not(.studio-list) .wf-lcard:hover .wf-acts,.wf-grid:not(.studio-list) .wf-lcard:focus-within .wf-acts{opacity:1}
}
/* List view keeps a row surface */
.studio-list .wf-lcard{background:var(--e-panel)!important;border-radius:18px!important;box-shadow:var(--e-shadow-sm)!important;overflow:hidden!important}
.studio-list .wf-cb{padding:14px 18px}

/* Selection, bulk bar, empty states */
.lib-bulk{border-radius:18px;background:var(--tv-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--tv-glass-edge)}
.studio-empty-saved{border-radius:24px;background:var(--e-panel);border:0}
.studio-footer{border-top-color:var(--e-line);color:var(--e-muted)}

/* ---------- Editor chrome (authoring only) ---------- */
.e-app .e-top{background:var(--tv-glass-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--tv-glass-edge)}
.wf-bar{background:var(--tv-glass);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-bottom:1px solid var(--tv-glass-edge)}
.wf-steps ol{background:var(--e-fill);border-radius:999px;padding:4px}
.wf-steps button{border-radius:999px}
.wf-steps button:hover{background:var(--e-fill2)}
.wf-steps button[aria-current="step"]{background:var(--tv-cta);color:var(--tv-cta-ink);box-shadow:var(--e-shadow-sm)}
.wf-steps [aria-current="step"] .wf-dot{background:var(--tv-cta-ink);border-color:var(--tv-cta-ink);color:var(--tv-cta)}
.e-rail{background:var(--e-sunk)}
.e-rail button{border-radius:16px}
.e-rail button[aria-pressed="true"]{background:var(--e-fill2);color:var(--e-ink)}
.e-panel{background:var(--e-panel)}

/* Dialogs and overlays: thicker material, rounder corners */
.e-dialog,.ab-dialog,.ab-card{border-radius:28px;border:1px solid var(--tv-glass-edge);box-shadow:var(--e-shadow-lg)}
.e-dialog h2,.ab-dlg-head h2,.ab-title{font-weight:800;letter-spacing:-.025em}
.ab-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ab-banner,.ab-toast{border-radius:999px;background:var(--tv-glass-strong);color:var(--e-ink);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--tv-glass-edge)}
.ab-auth{background:radial-gradient(80% 60% at 80% 0%,var(--tv-hero-1),transparent 60%),radial-gradient(70% 60% at 0% 100%,var(--tv-hero-2),transparent 60%),var(--e-bg)}

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion:reduce){
 .wf-lcard:hover .wf-cover,.wf-lcard:focus-within .wf-cover,.lib-tile:hover,.lib-tile:focus-visible{transform:none}
 .e-btn:active,.e-icbtn:active,.wf-fbtn:active,.lib-tile:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
 .studio-rail,.l-app .e-top,.e-app .e-top,.wf-bar,.lib-bulk,.ab-banner,.ab-toast,.wf-cont-a .e-btn:not(.wf-dark-btn),.wf-chip,.lib-star{-webkit-backdrop-filter:none;backdrop-filter:none}
 .studio-rail,.l-app .e-top,.e-app .e-top,.wf-bar,.lib-bulk,.ab-banner,.ab-toast{background:var(--e-panel)}
}
@media (prefers-contrast:more){
 :root,:root[data-theme="light"]{--e-muted:#3a3a3c;--e-line:#8e8e93;--tv-glass-edge:#8e8e93}
 :root[data-theme="dark"]{--e-muted:#d1d1d6;--e-line:#8e8e93;--tv-glass-edge:#8e8e93}
 .studio-rail,.l-app .e-top,.e-app .e-top,.wf-bar{background:var(--e-panel)}
 .wf-fbtn,.lib-tile,.lib-side,.studio-search{border:1px solid var(--e-line2)}
}
@media (max-width:700px){
 .wf-cont{border-radius:22px;min-height:0}
 .wf-grid:not(.studio-list){grid-template-columns:1fr!important}
 .studio-rail{border-right:0;border-top:1px solid var(--tv-glass-edge)}
}

/* ---------- Rotating banner (recently edited courses) ---------- */
.tv-hero{display:block;padding:0;background:#000;min-height:0;color:#fff;box-shadow:var(--tv-poster-lift)}
.tv-hero::after{display:none}
.tv-slides{display:grid}
.tv-slide{grid-area:1/1;position:relative;isolation:isolate;display:flex;flex-wrap:wrap;gap:20px 24px;align-items:flex-end;justify-content:space-between;min-height:clamp(320px,38vw,500px);padding:clamp(24px,4vw,52px);padding-top:clamp(72px,8vw,96px);box-sizing:border-box;opacity:0;visibility:hidden;transition:opacity .8s var(--tv-ease),visibility 0s linear .8s}
.tv-slide.on{opacity:1;visibility:visible;transition:opacity .8s var(--tv-ease),visibility 0s}
.tv-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(135deg,var(--c1),var(--c2))}
.tv-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tv-bg b{position:absolute;right:4%;bottom:-6%;font:800 clamp(160px,22vw,300px)/1 var(--wf-display);letter-spacing:-.05em;color:rgb(255 255 255 / .22)}
.tv-slide.on .tv-bg img,.tv-slide.on .tv-bg b{animation:tv-drift 9s var(--tv-ease) both}
@keyframes tv-drift{from{transform:scale(1.08)}to{transform:scale(1)}}
.tv-slide::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgb(0 0 0 / .82) 0%,rgb(0 0 0 / .6) 50%,rgb(0 0 0 / .18) 100%),linear-gradient(0deg,rgb(0 0 0 / .55) 0%,transparent 55%)}
.tv-hero .wf-cont-b{flex:1 1 420px;max-width:680px;display:flex;flex-direction:column;gap:10px}
.tv-hero .wf-eyebrow,.tv-hero p,.tv-hero .wf-pipe-l li{color:#e5e5ea}
.tv-hero h2,.tv-hero .wf-pipe-l .c{color:#fff}
.tv-hero h2{font-size:clamp(30px,4.2vw,56px)}
.tv-hero .wf-pipe-l i{background:rgb(255 255 255 / .28)}
.tv-hero .wf-pipe-l .d i{background:#fff}
.tv-hero .wf-pipe-l .c i{background:#2997ff}
.tv-hero .wf-cont-a .e-btn:not(.wf-dark-btn){background:rgb(255 255 255 / .16);color:#fff;border:1px solid rgb(255 255 255 / .22)}
.tv-hero .wf-cont-a .e-btn:not(.wf-dark-btn):hover{background:rgb(255 255 255 / .26)}
.tv-hero .wf-dark-btn{background:#f5f5f7!important;color:#000!important}
.tv-hero .wf-dark-btn:hover{background:#fff!important}
.tv-ctrls{position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);z-index:3;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgb(0 0 0 / .42);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgb(255 255 255 / .14)}
.tv-cbtn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.tv-cbtn:hover{background:rgb(255 255 255 / .18)}
.tv-cbtn .e-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tv-cbtn[data-hero-pause] .e-ico path[d^="M7"]{fill:currentColor}
.tv-dots{display:flex;align-items:center;padding:0 4px}
.tv-dot{display:grid;place-items:center;width:24px;height:36px;border:0;background:none;cursor:pointer;padding:0}
.tv-dot i{display:block;width:8px;height:8px;border-radius:999px;background:rgb(255 255 255 / .45);transition:width .35s var(--tv-ease),background-color .2s}
.tv-dot:hover i{background:rgb(255 255 255 / .75)}
.tv-dot[aria-current="true"]{width:36px}
.tv-dot[aria-current="true"] i{width:24px;background:#fff}
.tv-hero button:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}

/* ---------- Shelves: one sideways-scrolling row per stage ---------- */
.tv-shelves{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.tv-shelf-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tv-shelf-h h3{margin:0;display:flex;align-items:center;gap:10px;font:800 22px/1.2 var(--wf-display);letter-spacing:-.02em;color:var(--e-ink)}
.tv-shelf-nav{margin-left:auto;display:flex;gap:6px}
.tv-shelf-nav .tv-cbtn{background:var(--e-fill);color:var(--e-ink)}
.tv-shelf-nav .tv-cbtn:hover{background:var(--e-fill2)}
.tv-seeall{font-weight:600;color:var(--e-accent-text)}
.tv-shelf-nav+.tv-seeall{margin-left:4px}
.tv-shelf-h .tv-seeall:only-of-type{margin-left:auto}
.wf-grid.tv-row{display:grid;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:minmax(260px,300px);gap:26px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:8px;padding:14px 8px 18px;margin:-4px -8px 0;scrollbar-width:thin;scrollbar-color:var(--e-line2) transparent}
.tv-row>.wf-lcard{scroll-snap-align:start}
@media (hover:none),(pointer:coarse){.tv-shelf-nav{display:none}.tv-shelf-h .tv-seeall{margin-left:auto}}
@media (max-width:700px){
 .wf-grid.tv-row{grid-auto-columns:80%;gap:16px}
 .tv-slide{min-height:420px;padding-top:76px}
 .tv-hero{border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
 .tv-slide,.tv-slide.on{transition:none}
 .tv-slide.on .tv-bg img,.tv-slide.on .tv-bg b{animation:none}
}
@media (prefers-reduced-transparency:reduce){.tv-ctrls{-webkit-backdrop-filter:none;backdrop-filter:none;background:#000}}