/* Oxonia Media (media.html): a video hub. Home (hero + shelves), category pages, search and a watch page.
   Builds on .svid from site.css; suite colours come from the suite classes (.lead .op .teach .learn .disc .mx-s-plat). */
.mx-wrap{max-width:1320px;margin:0 auto;padding-inline:22px}
.mx-top{padding-block:clamp(28px,4vw,48px) 6px}
.mx-top h1{margin:6px 0 0;font-size:clamp(30px,4.2vw,48px);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:#1d1d1f}
.mx-top h1 br{display:none}
.mx-top h1 span{color:#6e6e73;font-weight:700}
.mx-top h1 span::before{content:" "}
.mx-sub{margin:10px 0 0;max-width:70ch;font-size:16px;line-height:1.5;color:#424245}
#mx-media{padding-bottom:72px;min-height:60vh}
#mx-media :focus-visible{outline:3px solid #0071e3;outline-offset:2px}

/* toolbar: search and category chips (sticky on the home page) */
.mx-toolbar{display:grid;gap:12px;padding:14px 0 12px;margin-bottom:8px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);z-index:30}
.is-home>.mx-toolbar{position:sticky;top:var(--mx-navh,52px)}
.mx-search{position:relative;display:flex;align-items:center;max-width:560px;height:44px;border:1px solid #d2d2d7;border-radius:980px;background:#fff;transition:border-color .15s,box-shadow .15s}
.mx-search:focus-within{border-color:#0071e3;box-shadow:0 0 0 3px rgba(0,113,227,.18)}
.mx-search>i{flex:none;width:18px;height:18px;margin-inline:16px 8px;background:#6e6e73;-webkit-mask: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.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center/contain no-repeat;mask: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.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center/contain no-repeat}
.mx-search input{flex:1;min-width:0;height:100%;border:0;background:none;font:400 16px var(--sans,inherit);color:#1d1d1f;outline:none;padding:0}
#mx-media .mx-search input:focus-visible{outline:none}
.mx-search input::-webkit-search-cancel-button{display:none}
.mx-qx{flex:none;width:36px;height:36px;margin-inline-end:4px;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center}
.mx-qx::before{content:"";width:14px;height:14px;background:#6e6e73;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E") center/contain no-repeat}
.mx-qx:hover{background:#f5f5f7}
.mx-qx[hidden]{display:none}
.mx-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px}
.mx-chips::-webkit-scrollbar{display:none}
.mx-chip{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border:0;border-radius:10px;background:#f0f0f3;color:#1d1d1f;font:600 14px var(--sans,inherit);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.mx-chip:hover{background:#e5e5ea}
.mx-chip[aria-pressed="true"]{background:#1d1d1f;color:#fff}

/* suite colours (own classes: the site's .lead/.plat… classes also carry section padding) */
.mx-s-lead{--c:var(--lead,#3634a3);--c2:var(--lead2,#6e6cf0)}
.mx-s-op{--c:var(--op,#0a7d8c);--c2:var(--op2,#1fb6c9)}
.mx-s-teach{--c:var(--teach,#0062cc);--c2:var(--teach2,#2b9bff)}
.mx-s-learn{--c:var(--learn,#1a7f45);--c2:var(--learn2,#34c26f)}
.mx-s-disc{--c:var(--disc,#c24100);--c2:var(--disc2,#ff8a00)}
.mx-s-plat{--c:#3634a3;--c2:#0062cc}

/* hero */
.mx-hero2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;margin:14px 0 40px;padding:clamp(14px,1.6vw,20px);border-radius:28px;background:linear-gradient(135deg,#f5f5f7,#fff 60%);border:1px solid #e8e8ed}
.mx-hthumb{position:relative;display:block;border-radius:20px;overflow:hidden;text-decoration:none;box-shadow:0 30px 60px -36px rgba(54,52,163,.55)}
.mx-hthumb .mx-th{border-radius:0}
.mx-hplay{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 18px 40px -12px rgba(0,0,0,.45);display:grid;place-items:center;transition:transform .2s}
.mx-hplay i{width:0;height:0;border-left:26px solid #3634a3;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}
.mx-hthumb:hover .mx-hplay{transform:scale(1.06)}
.mx-kick{margin:0 0 6px;font:700 12px var(--sans,inherit);letter-spacing:.08em;text-transform:uppercase;color:#3634a3}
.mx-htitle{margin:0;font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.025em;color:#1d1d1f}
.mx-hmeta{margin:8px 0 0;font-size:14px;font-weight:600;color:#6e6e73}
.mx-hdesc{margin:12px 0 18px;font-size:16px;line-height:1.55;color:#424245}
.mx-hgo{text-decoration:none}
.mx-hgo i{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
[dir=rtl] .mx-hgo i,[dir=rtl] .mx-hplay i{transform:scaleX(-1)}
[dir=rtl] .mx-hplay i{margin-left:0;margin-right:6px}

/* shelves */
.mx-shelf{margin:0 0 36px}
.mx-shead{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.mx-shead h2{margin:0;font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;color:#1d1d1f}
.mx-scount{margin:0;font-size:14px;color:#6e6e73}
.mx-seeall{margin-inline-start:auto;flex:none;font-weight:600;font-size:15px;color:#0066cc;text-decoration:none;padding:6px 2px}
.mx-seeall::after{content:" ›"}
.mx-seeall:hover span{text-decoration:underline}
.mx-rowwrap{position:relative}
.mx-row2{list-style:none;margin:0;padding:4px 2px 10px;display:grid;align-items:start;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/4);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:thin}
.mx-row2>li{scroll-snap-align:start}
.is-tall .mx-row2{grid-auto-columns:calc((100% - 5*14px)/6);gap:14px}
.mx-sbtn{position:absolute;top:calc(50% - 40px);width:40px;height:40px;border-radius:50%;border:1px solid #d2d2d7;background:rgba(255,255,255,.95);box-shadow:0 6px 18px -8px rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center;z-index:2}
.mx-sbtn::before{content:"";width:9px;height:9px;border:solid #1d1d1f;border-width:0 2.4px 2.4px 0;transform:rotate(135deg);margin-left:4px}
.mx-snext::before{transform:rotate(-45deg);margin-left:-4px}
.mx-sprev{left:-14px}.mx-snext{right:-14px}
[dir=rtl] .mx-sprev{left:auto;right:-14px}[dir=rtl] .mx-snext{right:auto;left:-14px}
[dir=rtl] .mx-sbtn::before{transform:rotate(-45deg);margin-left:-4px}
[dir=rtl] .mx-snext::before{transform:rotate(135deg);margin-left:4px}
.mx-sbtn[hidden]{display:none}
@media (hover:none),(max-width:700px){.mx-sbtn{display:none}}

/* cards */
.mx-card{min-width:0;list-style:none}
.mx-cl{display:grid;gap:10px;align-content:start;text-decoration:none;color:#1d1d1f;border-radius:16px}
.mx-th{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#e8e8ed,#f5f5f7)}
.mx-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mx-cl:hover .mx-th img{transform:scale(1.035)}
.is-tall .mx-th,.mx-card.is-tall .mx-th{aspect-ratio:9/16}
.mx-dur{position:absolute;right:8px;bottom:9px;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.78);color:#fff;font:600 12px var(--sans,inherit);font-variant-numeric:tabular-nums;letter-spacing:0;direction:ltr}
.mx-badge{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.92);color:#1d1d1f;font:700 11.5px var(--sans,inherit)}
[dir=rtl] .mx-badge{left:auto;right:8px}
.mx-acc{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--c),var(--c2))}
.mx-s-plat .mx-acc{background:linear-gradient(90deg,#3634a3,#0062cc 30%,#0a7d8c 55%,#1a7f45 78%,#c24100)}
.mx-ci{display:grid;gap:4px;min-width:0;padding:0 2px}
.mx-ctitle{font-weight:650;font-size:15.5px;line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx-cl:hover .mx-ctitle{color:var(--c)}
.mx-s-plat .mx-cl:hover .mx-ctitle{color:#3634a3}
.mx-cm{display:flex;align-items:center;gap:0;font-size:13.5px;color:#6e6e73;min-width:0;white-space:nowrap}
.mx-cm>span:first-of-type{overflow:hidden;text-overflow:ellipsis}
.mx-cmd{flex:none;white-space:pre}
.mx-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c);margin-inline-end:7px}
.mx-s-plat .mx-dot{background:conic-gradient(#3634a3,#0062cc,#0a7d8c,#1a7f45,#c24100,#3634a3)}
.mx-card.is-tall .mx-ctitle{font-size:14.5px}

/* category pages and search */
.mx-back{display:inline-flex;align-items:center;gap:6px;margin:4px 0 14px;font-weight:600;font-size:15px;color:#0066cc;text-decoration:none}
.mx-back::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(135deg)}
[dir=rtl] .mx-back::before{transform:rotate(-45deg)}
.mx-back:hover span{text-decoration:underline}
.mx-cdesc{margin:-4px 0 18px;max-width:75ch;color:#424245;line-height:1.55}
.mx-grid2{list-style:none;margin:0 0 40px;padding:0;display:grid;align-items:start;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px 18px}
.mx-grid2.is-tall{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.mx-results{margin-top:8px}

/* watch page */
.mx-watch{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;padding-top:4px}
.mx-wmain,.mx-wside{min-width:0}
.mx-stage{position:relative}
.mx-wplayer .svid-frame{border-radius:18px;box-shadow:0 30px 60px -40px var(--c),0 0 0 1px rgba(0,0,0,.06)}
.mx-wplayer .svid-play{width:76px;height:76px}
.mx-watch.is-tall .mx-stage{display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 0;border-radius:24px;background:#0b0b14}
.mx-watch.is-tall .mx-wplayer{margin:0;width:min(100%,calc((100vh - 190px) * 9 / 16),420px)}
.mx-watch.is-tall .mx-wplayer .svid-frame{aspect-ratio:9/16;border-radius:16px;box-shadow:none}
.mx-snav{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font:600 13px var(--sans,inherit);font-variant-numeric:tabular-nums}
.mx-sn{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;text-decoration:none;color:#fff}
.mx-sn:hover{background:rgba(255,255,255,.26)}
.mx-sn i{width:10px;height:10px;border:solid currentColor;border-width:0 2.6px 2.6px 0;transform:rotate(-135deg);margin-top:4px}
.mx-sn-next i{transform:rotate(45deg);margin-top:-4px}
.mx-sn.is-off{opacity:.3;pointer-events:none}
.mx-snpos{direction:ltr}
.mx-wtitle{margin:16px 0 4px;font-size:clamp(21px,2.2vw,26px);line-height:1.2;letter-spacing:-.02em;color:#1d1d1f}
.mx-wmeta{margin:0 0 12px}
.mx-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.mx-act{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:980px;background:#f0f0f3;color:#1d1d1f;font:600 14px var(--sans,inherit);cursor:pointer}
.mx-act:hover{background:#e5e5ea}
.mx-act[aria-pressed="true"],.mx-act[aria-expanded="true"]{background:#1d1d1f;color:#fff}
.mx-act.is-done{background:#e3f3e8;color:#1a7f45}
.mx-act i{width:18px;height:18px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.mx-a-share i{--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.4' stroke-linecap='round'%3E%3Cpath d='M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E")}
.mx-a-cc i{--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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='M10.4 10.2a2.4 2.4 0 1 0 0 3.6M17.4 10.2a2.4 2.4 0 1 0 0 3.6'/%3E%3C/svg%3E")}
.mx-a-tr i{--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%3Cpath d='M5 6h14M5 10h14M5 14h9M5 18h6'/%3E%3C/svg%3E")}
.mx-tpanel{margin:0 0 16px;padding:14px 16px;border-radius:16px;background:#f5f5f7}
.mx-tpanel[hidden]{display:none}
.mx-tbox{max-height:380px;overflow:auto;padding-inline-end:6px}
.mx-tbox p{margin:0 0 10px;line-height:1.6;color:#424245;font-size:15px}
.mx-wbox{padding:16px 18px 6px;border-radius:18px;background:#f5f5f7}
.mx-blk{margin:18px 0 0}
.mx-about p{margin:0 0 10px;line-height:1.6;color:#424245;font-size:15px}
.mx-uph{margin:0 0 12px;font-size:18px;letter-spacing:-.01em;color:#1d1d1f}
.mx-uplist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mx-up .mx-cl{grid-template-columns:168px minmax(0,1fr);gap:12px;align-items:start}
.mx-up .mx-th{border-radius:10px}
.mx-up.is-tall .mx-th{aspect-ratio:16/9}
.mx-up.is-tall .mx-th img{object-fit:cover;object-position:center 30%}
.mx-up .mx-ctitle{font-size:14.5px}
.mx-up .mx-cm{font-size:12.5px}
.mx-up .mx-dur{font-size:11px;right:5px;bottom:7px}
[dir=rtl] .mx-dur{right:auto;left:8px}
.mx-ytposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mx-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mx-ytnote{margin:0;font-size:12.5px;color:#6e6e73}
.mx-consent{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:16px;background:rgba(11,11,20,.82);color:#fff}
.mx-consent a{color:#fff}
.mx-h{margin:0 0 10px;font-size:16px;letter-spacing:-.01em;color:#1d1d1f}
.mx-desc{margin:0 0 4px;font-size:16px;line-height:1.55;color:#1d1d1f}
.mx-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.mx-tag{border:0;border-radius:8px;padding:6px 10px;min-height:32px;font:600 13px var(--sans,inherit);background:#fff;color:var(--c);cursor:pointer}
.mx-s-plat .mx-tag{color:#3634a3}
.mx-tag:hover{background:color-mix(in srgb,var(--c) 10%,#fff)}
.mx-muted{color:#86868b !important}
.mx-take{margin:0;padding-inline-start:20px;display:grid;gap:7px}
.mx-take li{line-height:1.5;color:#424245;font-size:15px}
.mx-take li::marker{color:var(--c)}
.mx-chapters{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mx-chap{width:100%;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;text-align:start;border:0;background:none;padding:9px 10px;border-radius:10px;cursor:pointer;font:500 14.5px var(--sans,inherit);color:#1d1d1f;min-height:40px}
.mx-chap:hover{background:#fff}
.mx-chap.is-on{background:#fff;color:var(--c);box-shadow:inset 3px 0 0 var(--c)}
[dir=rtl] .mx-chap.is-on{box-shadow:inset -3px 0 0 var(--c)}
.mx-s-plat .mx-chap.is-on{color:#3634a3;--c:#3634a3}
.mx-ct{font-variant-numeric:tabular-nums;font-weight:700;color:var(--c);min-width:48px;direction:ltr;text-align:start}
.mx-s-plat .mx-ct{color:#3634a3}
.mx-related{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mx-rel{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:#1d1d1f;padding:8px 10px;border-radius:10px;background:#fff;line-height:1.35}
.mx-rel:hover{background:#ececf0}
.mx-rk{flex:none;font:700 11px var(--sans,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.mx-s-plat .mx-rk{color:#3634a3}
.mx-now{margin:18px 0 0}
.mx-now>.mx-h{margin-top:4px}
.mx-now>p{margin:0 0 12px;line-height:1.55;color:#424245}
.mx-now .mx-take{margin-bottom:12px}
.mx-noscript{line-height:1.6}
/* Every player on this page shows the whole picture, never cropped (site.css crops .svid video with
   object-fit:cover). 16:9 films sit in a 16:9 box; 9:16 films keep their own 9:16 box (.mx-tall). */
.svid.mx-player video{object-fit:contain;background:#000}

/* The conference film: one player for all its clips, with a full-film timeline */
.mx-fbox{position:relative;border-radius:22px;overflow:hidden;background:#0b0b14;box-shadow:0 30px 60px -40px var(--c),0 0 0 1px rgba(0,0,0,.06);direction:ltr}
.mx-film .svid-frame{border-radius:0;box-shadow:none;aspect-ratio:16/9;background:#000}
.mx-film video{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;cursor:pointer}
.mx-film video.is-on{visibility:visible}
.mx-film video::cue{font-size:clamp(13px,2.4vw,20px)}
.mx-spin{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;display:none;pointer-events:none;animation:mx-spin .8s linear infinite}
.mx-film.playing.is-wait .mx-spin{display:block}
@keyframes mx-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mx-spin{animation-duration:2.4s}}
.mx-ctl{display:grid;gap:2px;padding:8px 12px;background:#0b0b14;color:#fff}
.mx-bar{position:relative;height:26px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none;border-radius:6px}
.mx-bar:focus-visible{box-shadow:0 0 0 2px #fff}
.mx-rail{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.22);transition:height .12s}
.mx-bar:hover .mx-rail,.mx-bar:focus-visible .mx-rail,.mx-film.is-drag .mx-rail{height:9px}
.mx-buf,.mx-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px}
.mx-buf{background:rgba(255,255,255,.28)}
.mx-fill{background:#fff}
.mx-tick{position:absolute;top:-1px;bottom:-1px;width:3px;margin-left:-1.5px;background:#0b0b14}
.mx-knob{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.55);transform:scale(.85);transition:transform .12s}
.mx-bar:hover .mx-knob,.mx-bar:focus-visible .mx-knob,.mx-film.is-drag .mx-knob{transform:scale(1.1)}
.mx-tip{position:absolute;bottom:100%;left:0;transform:translateX(-50%);margin-bottom:6px;display:flex;gap:7px;align-items:baseline;max-width:min(320px,90%);padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.96);color:#1d1d1f;font:500 12.5px var(--sans,inherit);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s}
.mx-tip.on{opacity:1}
.mx-tip b{font-variant-numeric:tabular-nums}
.mx-tip span{overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.mx-row{display:flex;align-items:center;gap:4px;min-width:0}
.mx-cb{flex:none;position:relative;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
.mx-cb:hover{background:rgba(255,255,255,.12)}
.mx-cb:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.mx-cb i{width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.mx-pp i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 4.5h4.2v15H6zM13.8 4.5H18v15h-4.2z'/%3E%3C/svg%3E")}
.mx-film.is-paused .mx-pp i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E")}
.mx-mute i{--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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z' fill='black'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6M18.2 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E")}
.mx-mute[aria-pressed="true"] i{--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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z' fill='black'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E")}
.mx-cc i{--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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='M10.4 10.2a2.4 2.4 0 1 0 0 3.6M17.4 10.2a2.4 2.4 0 1 0 0 3.6'/%3E%3C/svg%3E")}
.mx-cc[aria-pressed="false"] i{opacity:.8}
.mx-cc[aria-pressed="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:1px;background:#fff}
.mx-fs i{--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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E")}
.mx-film.is-fs .mx-fs i{--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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4M15 4v5h5M20 15h-5v5M4 15h5v5'/%3E%3C/svg%3E")}
.mx-time{flex:none;padding:0 6px;font:600 13px var(--sans,inherit);font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-cname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:rgba(255,255,255,.72);unicode-bidi:plaintext}
.mx-fbox:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;border-radius:0;background:#000}
.mx-fbox:fullscreen .svid-frame{flex:1;min-height:0;aspect-ratio:auto}
.mx-fbox:-webkit-full-screen{display:flex;flex-direction:column;width:100%;height:100%;border-radius:0;background:#000}
.mx-fbox:-webkit-full-screen .svid-frame{flex:1;min-height:0;aspect-ratio:auto}

/* pictures: cards and the lightbox */
.mx-th.is-pic{aspect-ratio:4/3}
.mx-picon{position:absolute;right:8px;bottom:9px;width:26px;height:22px;border-radius:6px;background:rgba(0,0,0,.72)}
.mx-picon::before{content:"";position:absolute;inset:4px 6px;background:#fff;-webkit-mask: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.4' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 17 6-6 5 5 3-3 4 4'/%3E%3C/svg%3E") center/contain no-repeat;mask: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.4' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 17 6-6 5 5 3-3 4 4'/%3E%3C/svg%3E") center/contain no-repeat}
[dir=rtl] .mx-picon{right:auto;left:8px}
html.mx-lb-open{overflow:hidden}
.mx-lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:56px 76px 20px;background:rgba(8,8,12,.94)}
.mx-lb[hidden]{display:none}
.mx-lb-fig{margin:0;display:grid;gap:10px;justify-items:center;max-width:min(1400px,100%);max-height:100%;min-height:0;touch-action:pan-y}
.mx-lb-img{display:block;max-width:100%;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain;border-radius:10px;background:#1d1d1f;user-select:none;-webkit-user-drag:none}
.mx-lb-cap{max-width:80ch;color:#f5f5f7;font-size:15.5px;line-height:1.5;text-align:center}
.mx-lb-bar{display:flex;align-items:center;gap:16px;color:#a1a1a6;font:600 13px var(--sans,inherit)}
.mx-lb-count{font-variant-numeric:tabular-nums;direction:ltr}
.mx-lb-dl{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:980px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.mx-lb-dl:hover{background:rgba(255,255,255,.22)}
.mx-lb-dl i{width:16px;height:16px;background:currentColor;-webkit-mask: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat;mask: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat}
.mx-lb-x,.mx-lb-nav{position:absolute;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center}
.mx-lb-x:hover,.mx-lb-nav:hover{background:rgba(255,255,255,.24)}
.mx-lb :focus-visible{outline:3px solid #2997ff;outline-offset:2px}
.mx-lb-x{top:12px;right:14px;width:44px;height:44px}
.mx-lb-x::before,.mx-lb-x::after{content:"";position:absolute;width:18px;height:2.4px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.mx-lb-x::after{transform:rotate(-45deg)}
[dir=rtl] .mx-lb-x{right:auto;left:14px}
.mx-lb-nav{top:calc(50% - 26px);width:52px;height:52px}
.mx-lb-nav::before{content:"";width:12px;height:12px;border:solid currentColor;border-width:0 2.6px 2.6px 0;transform:rotate(135deg);margin-left:5px}
.mx-lb-next::before{transform:rotate(-45deg);margin-left:-5px}
.mx-lb-prev{left:14px}.mx-lb-next{right:14px}
[dir=rtl] .mx-lb-prev{left:auto;right:14px}[dir=rtl] .mx-lb-next{right:auto;left:14px}
[dir=rtl] .mx-lb-prev::before{transform:rotate(-45deg);margin-left:-5px}[dir=rtl] .mx-lb-next::before{transform:rotate(135deg);margin-left:5px}
.mx-lb-nav[hidden]{display:none}
@media (max-width:600px){
  .mx-lb{padding:60px 10px 14px}
  .mx-lb-img{max-height:calc(100vh - 230px);max-height:calc(100dvh - 230px);border-radius:8px}
  .mx-lb-nav{top:auto;bottom:14px;width:46px;height:46px}
  .mx-lb-cap{font-size:14.5px;padding:0 4px}
  .mx-lb-bar{margin-bottom:56px}
}

/* responsive */
@media (max-width:1180px){
  .mx-row2{grid-auto-columns:calc((100% - 2*16px)/3)}
  .is-tall .mx-row2{grid-auto-columns:calc((100% - 4*14px)/5)}
  .mx-watch{grid-template-columns:minmax(0,1fr) 320px;gap:22px}
  .mx-up .mx-cl{grid-template-columns:140px minmax(0,1fr)}
}
@media (max-width:980px){
  .mx-watch{grid-template-columns:minmax(0,1fr)}
  .mx-hero2{grid-template-columns:minmax(0,1fr)}
  .mx-row2{grid-auto-columns:calc((100% - 16px)/2.3)}
  .is-tall .mx-row2{grid-auto-columns:calc((100% - 3*14px)/3.6)}
  .mx-watch.is-tall .mx-wplayer{width:min(100%,calc((100vh - 170px) * 9 / 16),400px)}
}
@media (max-width:600px){
  .mx-wrap{padding-inline:16px}
  .mx-sub{font-size:15px}
  .mx-toolbar{padding:10px 0}
  .mx-hero2{margin:8px 0 30px;padding:0;border:0;background:none;border-radius:0}
  .mx-hthumb{border-radius:16px}
  .mx-hplay{width:64px;height:64px}
  .mx-hplay i{border-left-width:20px;border-top-width:12px;border-bottom-width:12px}
  .mx-row2{grid-auto-columns:78%;gap:12px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .is-tall .mx-row2{grid-auto-columns:42%;gap:10px}
  .mx-grid2{grid-template-columns:minmax(0,1fr);gap:22px}
  .mx-grid2.is-tall{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .mx-watch .mx-wplayer .svid-frame{border-radius:14px}
  .mx-watch.is-tall .mx-stage{flex-direction:column;gap:10px;padding:10px 0 12px;margin-inline:-16px;border-radius:0}
  .mx-watch.is-tall .mx-wplayer{width:min(100%,calc((100vh - 200px) * 9 / 16))}
  .mx-snav{flex-direction:row;gap:22px}
  .mx-sn i{transform:rotate(135deg);margin:0 0 0 4px}
  .mx-sn-next i{transform:rotate(-45deg);margin:0 4px 0 0}
  .mx-wbox{padding:14px 14px 4px}
  .mx-up .mx-cl{grid-template-columns:42% minmax(0,1fr)}
  .mx-fbox{border-radius:14px}
  .mx-ctl{padding:6px 8px}
  .mx-row{gap:2px}
  .mx-cb{width:36px;height:36px}
  .mx-cname{display:none}
  .mx-time{margin-right:auto;padding:0 4px}
}
@media (prefers-reduced-motion:reduce){
  .mx-th img,.mx-hplay,.mx-chip,.mx-search{transition:none}
  .mx-cl:hover .mx-th img,.mx-hthumb:hover .mx-hplay{transform:none}
  .mx-row2{scroll-behavior:auto}
}