/* orca-home.css -- the homepage's own pieces, on top of orca.css (generated from the design) and orca-ext.css.
 *
 * Hand-written. The design draws the header, hero, features, courses, reviews, FAQ, CTA and footer; this file
 * adds what Tafra has and the design does not (stats row, hero video, instructor, library, videos, lightbox,
 * announcement / ads, the course details and terms dialogs, free-video list) using only the design's tokens
 * (--o-*) and its glass / pill / button vocabulary. Everything is scoped under .orca.
 */

/* ---- loading splash ------------------------------------------------------------------------------ */
.orca .o-preload{position:fixed;inset:0;z-index:999;display:grid;align-content:center;justify-items:center;gap:26px;
  background:var(--o-paper);transition:opacity .7s var(--o-ease),visibility .7s;
  animation:o-preload-failsafe .01s 9s forwards}                       /* never trap the page if the script does not run */
.orca .o-preload.out{opacity:0;visibility:hidden;pointer-events:none}
.orca .o-preload svg{width:min(58vw,250px);height:auto;color:var(--o-blue);animation:o-preload-pulse 1.7s ease-in-out infinite}
.orca .o-preload .dots{display:flex;gap:10px}
.orca .o-preload .dots i{width:11px;height:11px;border-radius:50%;background:var(--o-blue);animation:o-dot 1s ease-in-out infinite}
.orca .o-preload .dots i:nth-child(2){animation-delay:.15s}
.orca .o-preload .dots i:nth-child(3){animation-delay:.3s}
@keyframes o-preload-pulse{50%{opacity:.55;transform:scale(.97)}}
@keyframes o-dot{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(-10px)}}
@keyframes o-preload-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

/* reveal: only hide things that a script will reveal */
.orca.no-js .rvl{opacity:1;transform:none}

/* small shared pieces */
.orca .o-load{grid-column:1/-1;display:flex;justify-content:center;padding:40px 0}
.orca .o-load i{width:42px;height:42px;border-radius:50%;border:4px solid rgba(45,70,255,.16);border-top-color:var(--o-blue);animation:o-spin .8s linear infinite}
.orca .o-empty{grid-column:1/-1;text-align:center;color:var(--o-ink-2);padding:34px 16px;display:grid;gap:8px;justify-items:center}
.orca .o-empty svg{opacity:.45}
.orca .o-empty-i{font-size:42px;line-height:1}

/* ---- hero ----------------------------------------------------------------------------------------- */
/* the hero is the design's interactive demo (css/orca-demo.css, js/orca-demo.js) with a pill on top and a glow behind. The card below is only for the\n   admin's hero VIDEO (it takes the demo's place): the same white card around a light stage, drawn like the demo's own */
.orca .hero-card{position:relative;z-index:1;padding:12px;border-radius:30px;background:#fff;border:1px solid rgba(45,70,255,.12);
  box-shadow:0 30px 60px -34px rgba(45,70,255,.55),0 2px 6px rgba(11,21,51,.04);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.orca .hero-media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:360/300;background-color:#FBFCFF;border:1px solid rgba(45,70,255,.08);
  background-image:linear-gradient(rgba(45,70,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(45,70,255,.07) 1px,transparent 1px);background-size:18px 18px}
@media (min-width:1024px){.orca .hero-card{padding:14px;border-radius:32px}.orca .hero-media{border-radius:22px}}
/* English: the pill is centred with the start edge at 50% and a pull back by half its width (the design's own rule pushes the other way) */
.orca[dir=ltr] .frame-wrap .b1{transform:translateX(-50%)!important}
.orca .hero-media .hv{position:absolute;inset:0;overflow:hidden;background:#000}
.orca .hero-media #hero-video-player{position:absolute;inset:0;transform:scale(1.25);pointer-events:none}
.orca .hero-media .hv-shield{position:absolute;inset:0;z-index:2;cursor:default}
.orca .hero-media #hero-unmute-btn{position:absolute;z-index:3;bottom:18px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.18);color:#fff;font:inherit;font-weight:700;font-size:13px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:background .2s}
.orca .hero-media #hero-unmute-btn:hover{background:rgba(255,255,255,.3)}
.orca .hero h1 .h1-pre{font:inherit}                                    /* a <b> so the highlight stays the h1's first <span> */
.orca .hero-kicker.hidden{display:none}

/* the demo in English: the design draws it right to left, so its text is set left to right here, the debit column goes to the left (the\n   convention in English) and the token's colour dot sits on the left */
.orca[dir=ltr] .od-title,.orca[dir=ltr] .od-toast,.orca[dir=ltr] .od-tok,.orca[dir=ltr] .od-bowl .lbl,.orca[dir=ltr] .od-bowl .it,\n.orca[dir=ltr] .od-jr,.orca[dir=ltr] .od-t,.orca[dir=ltr] .od-read{direction:ltr}
.orca[dir=ltr] .od-tok{padding:0 10px 0 12px}
.orca[dir=ltr] .od-t .side:first-child{border-left:0;border-right:3px solid var(--o-od-ink)}

.orca .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:560px;margin-top:10px}
/* the same white chip the design uses for the figures on its hero frame */
.orca .hero-stats > div{padding:12px 8px;border-radius:16px;text-align:center;background:#fff;border:1px solid rgba(45,70,255,.14);box-shadow:0 12px 26px -18px rgba(45,70,255,.55)}
.orca .hero-stats b{display:block;font-family:var(--o-display);font-size:20px;font-weight:700;color:var(--o-ink);direction:ltr;font-variant-numeric:tabular-nums;line-height:1.35}
.orca .hero-stats small{display:block;font-size:11.5px;color:var(--o-ink-2);line-height:1.5}

/* ---- features ------------------------------------------------------------------------------------- */
.orca .feat .ic{font-size:26px;line-height:1}
.orca #features .shead2 .kick,
.orca #courses .shead2 .kick{margin-bottom:2px}

/* ---- courses (the design's card + what Tafra shows on it: prices, "already subscribed", more) ----- */
.orca .course .cimg .ph{display:grid;place-items:center;height:100%;font-size:48px;color:#fff;background:linear-gradient(135deg,#2D46FF,#1F33D6)}
.orca .cprices{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.orca .cprice{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid var(--o-line);font-size:12.5px}
.orca .cprice i{font-style:normal;font-weight:700;color:var(--o-ink-2)}
.orca .cprice b{font-size:16px;font-weight:800;direction:ltr;font-variant-numeric:tabular-nums}
.orca .cprice b em{font-style:normal;font-size:11px;color:var(--o-ink-2);font-weight:700}
.orca .cprice s{color:var(--o-ink-2);font-size:12px}
.orca .cprice.on b{color:var(--o-green)}
.orca .cfoot .btn.is-done{background:rgba(22,163,74,.12);color:var(--o-green);border-color:rgba(22,163,74,.3);box-shadow:none;cursor:default}
.orca .clinks button{flex:1;display:inline-flex;gap:5px;align-items:center;justify-content:center;padding:8px 10px;border-radius:12px;background:rgba(45,70,255,.06);
  border:1px solid rgba(45,70,255,.14);color:var(--o-blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:color .2s,background .2s,transform .25s var(--o-spring)}
.orca .clinks button:hover{background:rgba(45,70,255,.12);transform:translateY(-1px)}
.orca .clinks button::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--o-ic) center/contain no-repeat;mask:var(--o-ic) center/contain no-repeat}
/* the design keys the two icons on :first/:last-child; the admin can switch either button off, so key them on what they do */
.orca .clinks button[data-act=details]{--o-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5h.01'/%3E%3C/svg%3E")}
.orca .clinks button[data-act=terms]{--o-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h4'/%3E%3C/svg%3E")}
.orca .cmore{display:flex;justify-content:center;margin-top:30px}

/* ---- reviews: the testimonial screenshots (all 1081x1200, the design's .rv ratio) ---------------- */
.orca .marquee .track{animation:o-marquee 50s linear infinite}
@keyframes o-marquee{to{transform:translateX(-50%)}}
.orca .rv{cursor:zoom-in}
.orca .rv img{aspect-ratio:1081/1200;background:#e8ecf7}
@media (hover:hover){.orca .rv:hover{transform:translateY(-6px)}}

/* ---- FAQ: the server prints <details> with utility classes; style them by element -------------- */
.orca .faq details{background:var(--o-glass);-webkit-backdrop-filter:var(--o-blur);backdrop-filter:var(--o-blur);border:1px solid var(--o-edge);box-shadow:var(--o-shadow);overflow:hidden}
.orca .faq summary > span:first-child{flex:1;min-width:0}
.orca .faq summary > span:last-child{flex:none;display:grid;place-items:center}
.orca .faq details > div{padding:14px 22px 20px;color:var(--o-ink-2);border-top:1px solid var(--o-line);animation:o-faq .45s var(--o-ease)}
.orca .faq details > div *{max-width:100%}
.orca .faq details > div p + p{margin-top:8px}
.orca #faq-section{padding-top:56px}
.orca #faq-section .faq{width:100%;max-width:none;margin:0}
.orca #gallery{padding-bottom:24px}
.orca section[id]{scroll-margin-top:84px}

/* ---- CTA ------------------------------------------------------------------------------------------ */
.orca #cta{padding-top:24px}
.orca .cta2-t h2{text-wrap:balance}
/* the platform's own button labels are longer than the design's: on a phone they stack and may wrap */
@media (max-width:699px){
  .orca .cta2-b{flex-direction:column}
  .orca .cta2-b .btn{flex:none;width:100%;white-space:normal;text-align:center}
}

/* ---- instructor (derived: the design has no teacher section; same glass cards and tokens) -------- */
.orca #instructor{--i-ink:var(--o-ink);--i-ink2:var(--o-ink-2);--i-ink3:#7B87A3;--i-ac:var(--o-blue);--i-ac-s:rgba(45,70,255,.09);--i-ln:var(--o-line);
  position:relative;overflow:hidden}
.orca #instructor .ins-wrap{max-width:1200px;margin:0 auto;padding-inline:16px;position:relative;z-index:1}
.orca .ins-grid{display:grid;gap:44px;align-items:center;grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.orca #instructor.no-photo .ins-grid{grid-template-columns:1fr}
.orca #instructor.no-photo .ins-photo{display:none}
.orca .ins-photo{margin:0;position:relative}
.orca .ins-photo img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 15%;border-radius:28px;display:block;background:#e8ecf7;border:1px solid var(--o-edge);box-shadow:var(--o-shadow-lg)}
.orca .ins-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--i-ac);background:var(--i-ac-s);padding:7px 14px;border-radius:999px;margin-bottom:14px}
.orca .ins-name{font-size:clamp(28px,4vw,42px);line-height:1.25;margin:0 0 6px}
.orca .ins-role{font-size:16px;font-weight:700;color:var(--i-ac);margin:0 0 16px}
.orca .ins-bio{font-size:16px;line-height:2;color:var(--i-ink2)}
.orca .ins-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.orca .ins-stat{flex:1 1 150px;padding:14px 18px;border-radius:18px;background:var(--o-glass);border:1px solid var(--o-edge);box-shadow:var(--o-shadow)}
.orca .ins-stat b{display:block;font-family:var(--o-display);font-size:26px;font-weight:700;color:var(--i-ac);line-height:1.2}
.orca .ins-stat span{display:block;font-size:12.5px;font-weight:700;color:var(--i-ink2);margin-top:4px;line-height:1.6}
.orca .ins-cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:36px}
.orca .ins-card{padding:26px;border-radius:26px;background:var(--o-glass);-webkit-backdrop-filter:var(--o-blur);backdrop-filter:var(--o-blur);border:1px solid var(--o-edge);box-shadow:var(--o-shadow);transition:transform .35s var(--o-ease),box-shadow .35s}
@media (hover:hover){.orca .ins-card:hover{transform:translateY(-4px);box-shadow:var(--o-shadow-lg)}}
.orca .ins-card h3{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 14px}
.orca .ins-card h3 svg{width:20px;height:20px;color:var(--i-ac);flex:none}
.orca .ins-card ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.orca .ins-card li{display:flex;gap:10px;font-size:14.5px;line-height:1.85;color:var(--i-ink2)}
.orca .ins-card li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--i-ac);margin-top:11px}
.orca .ins-block{margin-top:34px}
.orca .ins-block h3{font-size:15px;color:var(--i-ink3);margin:0 0 12px}
.orca .ins-tags{display:flex;flex-wrap:wrap;gap:9px}
.orca .ins-tag{font-size:13.5px;font-weight:700;color:var(--i-ink2);padding:8px 15px;border-radius:12px;background:var(--o-glass);border:1px solid var(--o-edge);transition:color .2s,border-color .2s,background .2s}
@media (hover:hover){.orca .ins-tag:hover{color:var(--i-ac);border-color:rgba(45,70,255,.35);background:var(--i-ac-s)}}
@media (max-width:860px){
  .orca .ins-grid{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
  .orca .ins-photo{max-width:260px;width:100%}
  .orca .ins-stats,.orca .ins-tags{justify-content:center}
  .orca .ins-block h3{text-align:center}
}

/* ---- library: books and exam models (derived) ----------------------------------------------------- */
.orca #resources .res-block + .res-block{margin-top:56px}
.orca .res-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.orca .res-grid.books{grid-template-columns:repeat(3,minmax(0,1fr))}.orca .res-grid.models{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.orca .res-grid.books{grid-template-columns:repeat(4,minmax(0,1fr))}.orca .res-grid.models{grid-template-columns:repeat(3,minmax(0,1fr))}}
.orca .rcard{position:relative;display:grid;gap:12px;align-content:start;padding:18px;border-radius:22px;cursor:pointer;transition:transform .4s var(--o-ease),box-shadow .4s}
@media (hover:hover){.orca .rcard:hover{transform:translateY(-5px);box-shadow:var(--o-shadow-lg)}}
.orca .rcard .ri{width:48px;height:56px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#5B6CFF,#2D46FF);box-shadow:0 12px 22px -12px rgba(45,70,255,.7)}
.orca .rcard.model .ri{width:52px;height:52px;background:linear-gradient(145deg,#A855F7,#EC4899);box-shadow:0 12px 22px -12px rgba(168,85,247,.7)}
.orca .rcard h3{font-size:15px;line-height:1.55}
.orca .rcard p{font-size:13px;color:var(--o-ink-2);line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.orca .rcard .rgo{justify-self:start;font-size:13px;font-weight:700;color:var(--o-blue);background:rgba(45,70,255,.08);padding:6px 14px;border-radius:999px}

/* ---- platform videos (derived) -------------------------------------------------------------------- */
.orca .vgrid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:700px){.orca .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.orca .vcard{display:grid;overflow:hidden;border-radius:24px;transition:transform .4s var(--o-ease),box-shadow .4s}
@media (hover:hover){.orca .vcard:hover{transform:translateY(-5px);box-shadow:var(--o-shadow-lg)}}
.orca .vcard .vth{position:relative;aspect-ratio:16/9;margin:8px 8px 0;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#2D46FF,#1F33D6);display:grid;place-items:center;color:rgba(255,255,255,.85)}
.orca .vcard .vth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orca .vcard .vfree{position:absolute;top:10px;inset-inline-end:10px;z-index:2;font-size:12px;font-weight:700;color:#fff;background:var(--o-blue);padding:4px 11px;border-radius:999px}
.orca .vcard .vplay{position:absolute;z-index:1;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--o-blue);transition:transform .35s var(--o-spring)}
.orca .vcard:hover .vplay{transform:scale(1.1)}
.orca .vcard .vinfo{padding:14px 18px 18px;display:grid;gap:4px;text-align:center}
.orca .vcard h4{font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.orca .vcard p{font-size:13px;color:var(--o-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orca .vcta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:34px;text-align:center}
.orca .vcta small{color:var(--o-ink-2);font-size:14px}

/* ---- footer (static on the homepage: the server fills the social links into these exact anchors) -- */
.orca .site-foot .social a.hidden{display:none!important}
.orca .site-foot .social a.flex{display:grid}

/* ---- lightbox ------------------------------------------------------------------------------------- */
.orca .o-lightbox{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;background:rgba(11,21,51,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.orca .o-lightbox.open{opacity:1;visibility:visible}
.orca .o-lightbox img{max-width:min(92vw,900px);max-height:90vh;object-fit:contain;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.96);transition:transform .35s var(--o-spring)}
.orca .o-lightbox.open img{transform:none}
.orca .o-x{position:absolute;top:18px;inset-inline-start:18px;width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .35s var(--o-spring),background .2s}
.orca .o-x:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}

/* ---- announcement popup, ads --------------------------------------------------------------------- */
.orca .o-ann{position:fixed;inset:0;z-index:420;display:grid;place-items:center;padding:20px;background:rgba(11,21,51,.78);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.orca .o-ann .o-ann-in{position:relative;width:min(560px,92vw);animation:o-pop-in .5s var(--o-spring) both}
.orca .o-ann img{display:block;width:100%;max-height:85vh;object-fit:cover;border-radius:26px;border:2px solid rgba(255,255,255,.25);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.orca .o-ann .o-x{top:-14px;inset-inline-start:-14px;background:#fff;color:var(--o-ink);border-color:#fff}
@keyframes o-pop-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

.orca .o-ad{position:fixed;z-index:410;bottom:16px;inset-inline-start:16px;width:min(300px,calc(100vw - 32px));border-radius:22px;overflow:hidden;
  background:#fff;border:1px solid var(--o-line);box-shadow:var(--o-shadow-lg);transform:translateY(150%);opacity:0;transition:transform .7s var(--o-ease),opacity .7s}
.orca .o-ad.show{transform:none;opacity:1}
.orca .o-ad img{display:block;width:100%;max-height:300px;object-fit:cover;cursor:pointer}
.orca .o-ad .o-x{position:absolute;top:8px;inset-inline-start:8px;width:32px;height:32px;border-radius:50%;background:rgba(11,21,51,.6);border-color:transparent}
.orca .o-ad .o-ad-link{display:block;padding:10px 14px;text-align:center;font-weight:700;font-size:13px;color:var(--o-blue);background:rgba(45,70,255,.06)}
.orca .o-ad-screen{position:fixed;inset:0;z-index:430;display:grid;place-items:center;padding:20px;background:rgba(11,21,51,.8);opacity:0;pointer-events:none;transition:opacity .3s}
.orca .o-ad-screen.show{opacity:1;pointer-events:auto}
.orca .o-ad-screen .o-ad-in{position:relative;width:min(680px,94vw);transform:scale(.95);transition:transform .45s var(--o-spring)}
.orca .o-ad-screen.show .o-ad-in{transform:none}
.orca .o-ad-screen img{display:block;width:100%;max-height:85vh;object-fit:contain;border-radius:26px;border:3px solid rgba(255,255,255,.12);cursor:pointer}
.orca .o-ad-screen .o-x{top:-14px;inset-inline-start:-14px;background:#fff;color:var(--o-ink);border-color:#fff}
.orca .o-ad-link2{display:block;text-align:center;margin-top:10px;color:#fff;font-weight:700}

/* ---- course dialogs (details, terms) and the free-video list --------------------------------------- */
.orca .md-lg{width:min(760px,calc(100vw - 32px));display:grid;gap:14px;align-content:start}
.orca .md-lg h2,.orca .md-sm h2{padding-inline-end:0}
.orca .md-desc{color:var(--o-ink-2);line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere}
.orca .md-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding-top:6px}
.orca .md-foot .btn{padding:11px 20px;font-size:14.5px}
.orca .fv-sec{display:grid;gap:12px;margin-top:6px}
.orca .fv-sec h3{font-size:16px;display:flex;align-items:center;gap:8px}
.orca .fv-list{display:grid;gap:8px}
.orca .fv-item{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:16px;background:rgba(255,255,255,.78);border:1px solid rgba(22,163,74,.28);cursor:pointer;text-align:start;font:inherit;width:100%;transition:background .2s,transform .25s var(--o-spring)}
.orca .fv-item:hover{background:rgba(22,163,74,.08);transform:translateY(-2px)}
.orca .fv-th{position:relative;flex:none;width:92px;height:60px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#2D46FF,#1F33D6);display:grid;place-items:center;color:#fff}
.orca .fv-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orca .fv-th svg{position:relative;z-index:1}
.orca .fv-tx{min-width:0;display:grid;gap:2px}
.orca .fv-tx b{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.orca .fv-tx span{font-size:12.5px;color:var(--o-ink-2);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.orca .md-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:20px;overflow:hidden;box-shadow:0 20px 44px -24px rgba(11,21,51,.7)}
.orca .md-player .o-load{position:absolute;inset:0;margin:0;padding:0;align-items:center}
.orca .md-player-title{font-size:16px;padding-bottom:10px;border-bottom:1px solid var(--o-line)}
.orca .md-player-err{display:grid;place-items:center;height:100%;color:#fff;text-align:center;padding:16px}