/* w21.css — DESIGN UPGRADE (the best 30 of ideas 901–1000), build w21, Oct 28 2026. Loads after w14.css; every rule sits under html.w21 (set by w21.js).
   The same on Android Chrome, iPhone Safari and desktop: tap = click = press-and-hold; nothing depends on hover; motion turns off under "Reduce motion". */
html.w21{
  --w21sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Hebrew","Arial Hebrew",Arial,sans-serif;
  --serif:var(--w21sans);                                   /* 906: one type family; no more italic-looking serif headings */
  --w21-12:12px;--w21-14:14px;--w21-16:16px;--w21-20:20px;--w21-28:28px;
  --w21gold:#C9A54A;--w21ink:#0B2545;--w21mut:#5A6F8C;
  --w21r-card:14px;--w21r-pill:999px;--w21r-sheet:22px;
  --w21sh1:0 1px 2px rgba(15,40,80,.06),0 4px 12px rgba(15,40,80,.07);
  --w21sh2:0 2px 4px rgba(15,40,80,.08),0 10px 24px rgba(15,40,80,.12);
  --w21sh3:0 -6px 30px rgba(10,30,60,.22);
  --w21bar:0px;
}
/* 921: dark mode refresh — deep navy, soft blue cards, gold kept for NEW / Today / streaks */
html.w21.dark{--bg:#0E1726;--bg2:#0B1320;--panel:#16233A;--line:rgba(130,170,230,.18);--txt:#E8EFFA;--mut:#A6B6CE;--w21ink:#E8EFFA;--w21mut:#A6B6CE;
  --w21sh1:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.28);--w21sh2:0 2px 6px rgba(0,0,0,.35),0 12px 28px rgba(0,0,0,.4)}
html.w21.dark body{background:linear-gradient(180deg,#0E1726,#0B1320)}
html.w21.dark .rd-tile,html.w21.dark .card .thumb,html.w21.dark .ia-today,html.w21.dark .w21box{background-color:var(--panel)}

/* 906 + 907: one type scale; classy section headers (gold rule, bold title, muted count, See all pill) */
html.w21 .row h2,html.w21 .sech,html.w21 .ia-feedh,html.w21 .ia-th,html.w21 .upnext-h,html.w21 .lvh{font-family:var(--w21sans);font-weight:750;letter-spacing:-.01em;font-style:normal}
html.w21 .row h2{position:relative;align-items:center;font-size:var(--w21-20);padding-inline-start:12px;color:var(--w21ink)}
html.w21 .row h2::before,html.w21 .ia-feedh::before,html.w21 .w21h::before{content:"";position:absolute;inset-inline-start:0;top:3px;bottom:3px;width:4px;border-radius:4px;background:linear-gradient(180deg,#E3C26A,var(--w21gold))}
html.w21 .row h2 small{font-weight:500;font-size:var(--w21-12);color:var(--w21mut)}
html.w21 .row h2 > a:not(.w21pa){margin-inline-start:auto;padding:6px 12px;min-height:32px;display:inline-flex;align-items:center;border-radius:var(--w21r-pill);background:color-mix(in srgb,var(--gold2,#1A63C7) 9%,transparent);font-weight:650;font-size:var(--w21-14)}
html.w21 .ia-feedh{position:relative;padding-inline-start:12px}
html.w21 .ptitle{font-family:var(--w21sans);font-weight:800;letter-spacing:-.015em;font-size:var(--w21-28)}
html.w21 .pinfo h2{font-family:var(--w21sans);font-weight:750}

/* 945: ▶ Play all on every row title */
html.w21 .w21pa{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:5px 12px;margin-inline-start:6px;border:0;border-radius:var(--w21r-pill);background:var(--w21ink);color:#fff;font:650 var(--w21-12)/1 var(--w21sans);cursor:pointer;white-space:nowrap}
html.w21.dark .w21pa{background:#E8EFFA;color:#0E1726}
@media (max-width:480px){html.w21 .w21pa span{display:none}html.w21 .w21pa{padding:5px 11px}}
html.w21 .row h2 .w21pa + a{margin-inline-start:auto}

/* 902 + 903: shimmer while a picture loads, then a calm fade-in */
html.w21 .thumb,html.w21 .rd-fyframe,html.w21 .nx img,html.w21 .i57-nodth{background-color:#DCE7F5;background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:w21sh 1.3s linear infinite}
html.w21.dark .thumb,html.w21.dark .nx img{background-color:#1B2A44;background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 70%)}
html.w21 .thumb.w21ok,html.w21 .rd-fyframe.w21ok{animation:none;background-image:none}
@keyframes w21sh{from{background-position:120% 0}to{background-position:-120% 0}}
html.w21 .thumb img{opacity:0;transition:opacity .22s ease}
html.w21 .thumb img.w21in{opacity:1}

/* 969: duration chip, the same everywhere */
html.w21 .card .dur{position:absolute;bottom:6px;inset-inline-end:6px;left:auto;padding:2px 6px;border-radius:6px;background:rgba(8,18,36,.82);color:#fff;font:700 var(--w21-12)/1.3 var(--w21sans);letter-spacing:.02em}
html.w21 .card .lng{opacity:.85;font-size:11px;padding:1px 6px;border-radius:6px}
/* 905: two-line titles that never cut mid-word */
html.w21 .card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;unicode-bidi:plaintext;text-align:start}
/* 908: soft depth; a press gives the same lift as a mouse */
html.w21 .card{-webkit-touch-callout:none}
html.w21 .card .thumb{box-shadow:var(--w21sh1);border-radius:var(--w21r-card)}
html.w21 .card:active .thumb,html.w21 .card.w21press .thumb{transform:translateY(-2px);box-shadow:var(--w21sh2)}
html.w21 .short-only #view .card[data-w21long]{display:none}

/* 904: the top video shows its own (women-checked) picture, never a black box, until the player is ready */
html.w21 .rd-fyframe{position:relative;background-size:cover;background-position:center}
html.w21 .rd-fyframe iframe{opacity:0;transition:opacity .45s ease}
html.w21 .rd-fyframe.w21ok iframe{opacity:1}
html.w21 .rd-fyframe::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(5,15,30,.45));pointer-events:none;transition:opacity .45s}
html.w21 .rd-fyframe.w21ok::after{opacity:0}
/* the featured title: two lines, its own direction (fixes "…ay Lon | אברומי" on phones) */
html.w21 .rd-fyt b{white-space:normal!important;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;unicode-bidi:plaintext;text-align:start;line-height:1.25}
html.w21 .rd-fyt b .w21ln{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
html.w21 .rd-fyt b:has(.w21ln){display:block}
html.w21 .rd-fyt small{unicode-bidi:plaintext;text-align:start}

/* 912: rows fill the width on desktop */
@media (min-width:900px){html.w21 .ia-newtoday .scroller{justify-content:flex-start}}
html.w21 .w21sep{flex:0 0 auto;align-self:center;writing-mode:horizontal-tb;padding:6px 10px;border-radius:var(--w21r-pill);background:color-mix(in srgb,var(--w21gold) 16%,transparent);color:#7A5C1E;font:700 var(--w21-12)/1 var(--w21sans);white-space:nowrap}

/* 913: the Today card always fills whole rows */
html.w21 .ia-tgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important}
html.w21 .ia-tgrid>.ia-tc{min-height:0}

/* 901: one icon family on the home tiles */
html.w21 .rd-ic.w21ici{color:var(--tc,#2F6FD6);font-size:0}
html.w21 .rd-ic .w21ic{width:62%;height:62%;display:block}
html.w21 .w21ic .a{stroke:var(--w21gold)}
html.w21 .w21ic .w21dot{fill:#E5413A;stroke:#E5413A;transform-origin:32px 32px;animation:w21pulse 1.8s ease-in-out infinite}
@keyframes w21pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
html.w21 .rd-ic.w21ici img{display:none}

/* 917: Daf text tiles — parchment + seal are drawn in the picture (app.js tileSvg) */

/* 911: frosted top bar once you scroll */
html.w21 .top{transition:box-shadow .25s,background-color .25s}
html.w21.w21-scr .top{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 rgba(15,40,80,.08),0 6px 18px rgba(15,40,80,.08)}
html.w21.dark.w21-scr .top{background:rgba(14,23,38,.82)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){html.w21.w21-scr .top{background:#fff}html.w21.dark.w21-scr .top{background:#0E1726}}

/* 946 + 950: small chips in the header area of home */
html.w21 .w21chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 10px}
html.w21 .w21chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:var(--w21r-pill);border:0;background:var(--panel,#fff);box-shadow:var(--w21sh1);color:var(--w21ink);font:700 var(--w21-14)/1 var(--w21sans);text-decoration:none;cursor:pointer}
html.w21 .w21chip.gold{background:linear-gradient(135deg,#FFF3D1,#FBE3A2);color:#6B4B0E}
html.w21.dark .w21chip.gold{background:linear-gradient(135deg,#4A3A12,#3A2D0C);color:#FBE3A2}
html.w21 .w21chip b{font-weight:850}

/* 947: Continue watching — big progress bars and "x min left" */
html.w21 .w21cont .thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.35)}
html.w21 .w21cont .w21bar{position:absolute;left:0;bottom:0;height:5px;background:linear-gradient(90deg,#E3C26A,var(--w21gold));z-index:2;border-radius:0 3px 3px 0}
html.w21 .w21left{display:block;font:600 var(--w21-12)/1.3 var(--w21sans);color:var(--w21mut);margin-top:2px}

/* 948: the resume bar */
html.w21 .w21resume{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--w21bar) + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;width:min(560px,calc(100% - 24px));padding:8px 8px 8px 10px;border-radius:16px;background:var(--w21ink);color:#fff;box-shadow:var(--w21sh2);animation:w21up .35s ease both}
html.w21.dark .w21resume{background:#22324F}
html.w21 .w21resume img{width:64px;height:36px;object-fit:cover;border-radius:8px;flex:0 0 auto}
html.w21 .w21resume .t{flex:1;min-width:0;display:flex;flex-direction:column;font:600 var(--w21-14)/1.25 var(--w21sans)}
html.w21 .w21resume .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
html.w21 .w21resume .t small{opacity:.75;font-weight:500;font-size:var(--w21-12)}
html.w21 .w21resume button{min-width:44px;min-height:44px;border:0;border-radius:12px;font:700 var(--w21-14)/1 var(--w21sans);cursor:pointer}
html.w21 .w21resume .go{background:var(--w21gold);color:#1B1300;padding:0 14px}
html.w21 .w21resume .no{background:transparent;color:#fff;font-size:20px}
@keyframes w21up{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
body.mini-on .w21resume{display:none}

/* 966: category chips stay under the header while you scroll; 920-style fades on every sideways list (fixes the Rebbes court chips) */
html.w21 .w21sticky{position:sticky;top:var(--w21top,64px);z-index:15;background:color-mix(in srgb,var(--bg2,#F7FBFF) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding-top:6px;padding-bottom:6px}
html.w21.dark .w21sticky{background:rgba(11,19,32,.9)}
html.w21 .w21fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
html.w21 .w21fade-l{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent)}
html.w21 .w21fade-lr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
html.w21 .w21sticky a.on,html.w21 .w21sticky .on{box-shadow:inset 0 0 0 2px var(--w21gold)}

/* 970: search opens as a full-screen sheet (phones and desktop alike) */
html.w21.w21-srch{overflow:hidden}
html.w21.w21-srch .top{z-index:90}
html.w21.w21-srch #searchForm{position:fixed;inset:0 0 auto 0;z-index:95;margin:0;padding:calc(12px + env(safe-area-inset-top)) 12px 12px;background:var(--panel,#fff);box-shadow:0 1px 0 var(--line);display:flex!important;max-width:none;width:auto;border-radius:0}
html.w21.w21-srch #searchForm input{font-size:18px;min-height:48px}
html.w21 .w21srchx{display:none}
html.w21.w21-srch .w21srchx{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--w21ink);font:700 var(--w21-16)/1 var(--w21sans);cursor:pointer}
html.w21 .w21srchbg{position:fixed;inset:0;z-index:89;background:var(--bg2,#F7FBFF)}
html.w21.dark .w21srchbg{background:#0B1320}
html.w21.w21-srch .sdrop{position:fixed!important;left:0!important;right:0!important;top:calc(76px + env(safe-area-inset-top))!important;bottom:0!important;max-height:none!important;width:auto!important;margin:0 auto!important;max-width:760px;overflow:auto;z-index:96;border-radius:0!important;box-shadow:none!important;background:var(--bg2,#F7FBFF)!important}
html.w21 .w21shint{position:fixed;left:0;right:0;top:calc(84px + env(safe-area-inset-top));z-index:95;text-align:center;color:var(--w21mut);font:500 var(--w21-14)/1.4 var(--w21sans);padding:0 16px}

/* 925: video page — title and round action buttons right under the player */
html.w21 #player .sheet{display:flex;flex-direction:column}
html.w21 #player .sheet>*{order:6}
html.w21 #player .sheet>.x{order:0}
html.w21 #player .frame{order:1}
html.w21 #player .mbar{order:2}
html.w21 #player .pinfo{order:3;display:flex;flex-direction:column}
html.w21 #player .pctl{order:4}
html.w21 #player .pinfo h2{order:1;margin-top:12px;font-size:var(--w21-20);line-height:1.3}
html.w21 #player .pinfo .pmeta{order:2}
html.w21 #player .pinfo .pbtns{order:3;display:flex;flex-wrap:wrap;gap:8px;padding:6px 2px 10px} /* every action visible, nothing cut at the edge */
html.w21 #player .pinfo .pbtns::-webkit-scrollbar{display:none}
html.w21 #player .pinfo .pbtns .btn{flex:0 0 auto;min-height:44px;border-radius:var(--w21r-pill);padding:0 16px;display:inline-flex;align-items:center;gap:6px;font:650 var(--w21-14)/1 var(--w21sans);box-shadow:var(--w21sh1)}
html.w21 #player .pinfo>*:not(h2):not(.pmeta):not(.pbtns){order:5}
html.w21 #player .pinfo .phint{order:6;font-size:var(--w21-12);color:var(--w21mut)}
html.w21 #player .pinfo .upnext-h{order:7}
html.w21 #player .pinfo .upnext{order:8}
html.w21 #pGift{display:none!important}   /* the Gift button showed twice (b4.js + rd.js); the rd.js one stays */

/* 952: the 5-second "Up next" card */
html.w21 .w21next{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(6,14,28,.82);color:#fff;font-family:var(--w21sans)}
html.w21 .w21next .in{display:flex;gap:14px;align-items:center;max-width:92%;padding:14px;border-radius:18px;background:rgba(255,255,255,.08)}
html.w21 .w21next img{width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
html.w21 .w21next .k{font-size:var(--w21-12);opacity:.8;text-transform:uppercase;letter-spacing:.08em}
html.w21 .w21next b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--w21-16);unicode-bidi:plaintext}
html.w21 .w21next .btns{display:flex;gap:8px;margin-top:10px}
html.w21 .w21next button{min-height:44px;padding:0 14px;border:0;border-radius:12px;font:700 var(--w21-14)/1 var(--w21sans);cursor:pointer}
html.w21 .w21next .go{background:var(--w21gold);color:#1B1300}
html.w21 .w21next .no{background:rgba(255,255,255,.16);color:#fff}
html.w21 .w21ring{width:44px;height:44px;flex:0 0 auto}
html.w21 .w21ring circle{fill:none;stroke-width:4}
html.w21 .w21ring .bg{stroke:rgba(255,255,255,.25)}
html.w21 .w21ring .fg{stroke:var(--w21gold);stroke-dasharray:113;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:22px 22px;animation:w21ring 5s linear forwards}
@keyframes w21ring{to{stroke-dashoffset:113}}

/* 993 + 995: press-and-hold quick menu as a bottom sheet with a grab handle (drag down to close) */
html.w21 .w21scrim{position:fixed;inset:0;z-index:120;background:rgba(5,12,25,.45);animation:w21fade .2s ease both}
html.w21 .w21sheet{position:fixed;left:0;right:0;bottom:0;z-index:121;margin:0 auto;max-width:560px;padding:8px 14px calc(14px + env(safe-area-inset-bottom));border-radius:var(--w21r-sheet) var(--w21r-sheet) 0 0;background:var(--panel,#fff);color:var(--txt);box-shadow:var(--w21sh3);animation:w21sheet .28s cubic-bezier(.2,.8,.2,1) both;touch-action:none}
html.w21 .w21grab{width:44px;height:5px;border-radius:5px;background:rgba(90,111,140,.35);margin:4px auto 10px}
html.w21 .w21sheet h4{margin:0 0 8px;font:700 var(--w21-16)/1.3 var(--w21sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext}
html.w21 .w21sheet .it{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 6px;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:600 var(--w21-16)/1 var(--w21sans);text-align:start;text-decoration:none;cursor:pointer}
html.w21 .w21sheet .it span{width:28px;text-align:center;font-size:20px}
@keyframes w21sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes w21fade{from{opacity:0}to{opacity:1}}

/* 926: Mazel Tov moments (drawn pieces, no pictures) */
html.w21 .w21conf{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
html.w21 .w21conf i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:w21fall 2.4s cubic-bezier(.25,.6,.4,1) forwards}
@keyframes w21fall{to{transform:translate3d(var(--dx),110vh,0) rotate(720deg);opacity:.9}}
html.w21 .w21mt{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:201;padding:14px 22px;border-radius:18px;background:linear-gradient(135deg,#FFF3D1,#FBE3A2);color:#5B3D06;font:800 var(--w21-20)/1.3 var(--w21sans);text-align:center;box-shadow:var(--w21sh2);animation:w21fade .3s ease both}

/* the old "What would you like to watch?" boxes — kept (naftali 6:32 PM "No just fix and make nice"), restyled to match */
html.w21 .w21watch{margin:22px 0 8px}
html.w21 .w21watch h2{position:relative;margin:0 0 12px;padding-inline-start:12px;font:750 var(--w21-20)/1.2 var(--w21sans);color:var(--w21ink);display:flex;align-items:center;gap:10px}
html.w21 .w21watch .w21g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){html.w21 .w21watch .w21g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){html.w21 .w21watch .w21g{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}}
html.w21 .w21box{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:12px;border-radius:16px;background:var(--panel,#fff);box-shadow:var(--w21sh1);color:var(--w21ink);text-decoration:none;overflow:hidden;transition:transform .15s,box-shadow .15s}
html.w21 .w21box:active{transform:translateY(-2px);box-shadow:var(--w21sh2)}
html.w21 .w21box::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--bc,#2F6FD6)}
html.w21 .w21box .bi{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--bc,#2F6FD6) 14%,transparent);color:var(--bc,#2F6FD6)}
html.w21 .w21box .bi .w21ic{width:30px;height:30px}
html.w21 .w21box b{display:block;font:750 var(--w21-16)/1.2 var(--w21sans)}
html.w21 .w21box small{display:block;margin-top:2px;font:500 var(--w21-12)/1.3 var(--w21sans);color:var(--w21mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.w21 .w21surp{margin-inline-start:auto;min-height:36px;padding:0 14px;border:0;border-radius:var(--w21r-pill);background:color-mix(in srgb,var(--w21gold) 18%,transparent);color:#6B4B0E;font:700 var(--w21-14)/1 var(--w21sans);cursor:pointer}
html.w21.dark .w21surp{color:#FBE3A2}
/* classic design: the same boxes get the same calm frame */
html.w21.pkm-d-classic .boxes.home .box{border-radius:16px;box-shadow:var(--w21sh1)}
html.w21.pkm-d-classic .boxes.home .btxt b{font-family:var(--w21sans);font-weight:750}

/* 984: rows far below the fold are laid out only when they come near (same look everywhere) */
html.w21 .ia-feed .ia-feedlist>section,html.w21 #view>.row:nth-of-type(n+4){content-visibility:auto;contain-intrinsic-size:auto 320px}

/* 996: big tap targets (44 px or more, 8 px apart) */
html.w21 .card .heart,html.w21 .card .bmk,html.w21 .card .dots{min-width:44px;min-height:44px}
html.w21 .crumbs a,html.w21 .chips a,html.w21 .chips button{min-height:44px;display:inline-flex;align-items:center}
html.w21 .xmenubtn{min-width:44px;min-height:44px}

/* 991: bottom tab bar on phones (Android and iPhone the same; desktop keeps the top header) */
html.w21 .w21tabs{display:none}
@media (max-width:759px){
  html.w21{--w21bar:62px}
  html.w21 .w21tabs{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(5,1fr);height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 -1px 0 rgba(15,40,80,.08),0 -6px 18px rgba(15,40,80,.06)}
  html.w21.dark .w21tabs{background:rgba(14,23,38,.92)}
  html.w21 .w21tabs a,html.w21 .w21tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;background:none;color:var(--w21mut);font:650 11px/1 var(--w21sans);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html.w21 .w21tabs .w21ic{width:26px;height:26px}
  html.w21 .w21tabs .on{color:var(--gold2,#1A63C7)}
  html.w21 .w21tabs .on .w21ic .a{stroke:var(--gold2,#1A63C7)}
  html.w21 body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  html.w21 body.mini-on #player.mini{bottom:calc(62px + env(safe-area-inset-bottom))!important}
  html.w21 body.mini-on .w21tabs{box-shadow:none}
  html.w21 .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}
html.w21.w21-pl .w21tabs,html.w21.w21-pl .w21resume,html.w21 body.kc-on .w21tabs,html.w21.w21-kids .w21tabs,html.w21 body.tv .w21tabs{display:none}
html.w21.w21-kids body{padding-bottom:0}

/* 981: instant page swaps — a short cross-fade on every route change */
html.w21 #view.w21swap{animation:w21in .2s ease both}
@keyframes w21in{from{opacity:.0;transform:translateY(4px)}to{opacity:1;transform:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

@media (prefers-reduced-motion:reduce){
  html.w21 *,html.w21 *::before,html.w21 *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.w21 .w21conf{display:none}
}

/* naftali Oct 27 2026 10:07 PM: the MAIN featured video comes FIRST, right under the header; then the boxes. naftali Oct 27 2026 9:25 PM: ALL the boxes together at the top, then the videos — never mixed. The order is set here, so it holds whatever order the parts arrive in. */
html.w21.pkm-d-new .rd-new{display:flex;flex-direction:column}
html.w21.pkm-d-new .rd-new>*{order:9}
html.w21.pkm-d-new .rd-new>.rd-fy{order:-1}
html.w21.pkm-d-new .rd-new>.w21chips{order:0}
html.w21.pkm-d-new .rd-new>.ia-cats{order:1}
html.w21.pkm-d-new .rd-new>.w21down{order:2}
html.w21.pkm-d-new .rd-new>.w21watch{order:3}
html.w21.pkm-d-new .rd-new>.ia-cont{order:11}
html.w21.pkm-d-new .rd-new>.w21picks{order:12}
html.w21.pkm-d-new .rd-new>.ia-newtoday{order:13}
html.w21.pkm-d-new .rd-new>.ia-today{order:14}
html.w21.pkm-d-new .rd-new>.ia-dafbelow{order:15}
html.w21.pkm-d-new .rd-new>.ia-feed{order:16}
html.w21.pkm-d-new .rd-new>.rd-bottom{order:30}
html.w21 .ia-feed .ia-feedcats,html.w21 .ia-feed .ia-feedh2{display:none!important}
html.w21 .w21down{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:14px 0 6px;padding:10px 18px;border:0;border-radius:var(--w21r-pill);background:linear-gradient(135deg,#1F4E9E,#163A78);color:#fff;font:750 var(--w21-16)/1 var(--w21sans);box-shadow:var(--w21sh2);cursor:pointer}
html.w21 .w21down .w21dai{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);animation:w21bob 1.6s ease-in-out infinite}
@keyframes w21bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
html.w21.dark .w21down{background:linear-gradient(135deg,#2A5BB0,#1E4486)}
html.w21 .ia-cats>.ia-float{opacity:0;transform:translateY(18px)}
html.w21 .ia-cats>.ia-float.ia-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* no way out of the player (naftali Oct 27 9:28 PM): see-through shields over the YouTube logo, the title/channel/share bar and the "More videos" panel */
html.w21 #player .frame,html.w21 .rd-fyframe{position:relative}
html.w21 .w21shield{position:absolute;z-index:4;background:transparent;-webkit-tap-highlight-color:transparent}
html.w21 .w21sh-top{top:0;left:0;right:0;height:min(18%,64px)}
html.w21 .w21sh-logo{right:46px;bottom:0;width:92px;height:46px}
html.w21 .w21sh-mid{display:none;left:0;right:0;bottom:48px;height:42%}
html.w21 #player .frame.w21paused .w21sh-mid{display:block}
html.w21 .perr{z-index:6}
html.w21 .perr.perr-dead{background:linear-gradient(180deg,#0E1F3D,#14284B);color:#fff}
html.w21 .perr.perr-dead b{font:750 var(--w21-20)/1.3 var(--w21sans)}
html.w21 .perr.perr-dead span{opacity:.8}

/* the boxes on a computer: 8 across and lower, so the first screen shows them all at a glance (phones keep 3 across) */
html.w21 .ia-cats .w21dup{display:none!important}
@media (min-width:1100px){html.w21 .ia-cats{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}html.w21 .ia-cats .ia-tile{min-height:108px}}
html.w21 .w21live{display:inline-flex;width:18px;height:18px;vertical-align:-4px;margin-inline-end:4px;color:#D33}
html.w21 .w21live svg{width:100%;height:100%}
@media (prefers-reduced-motion:reduce){html.w21 .ia-cats>.ia-float{opacity:1;transform:none}html.w21 .ia-cats>.ia-float.ia-in{transition:none}}
/* w23 (naftali Oct 27 10:10 PM): new box rows open under what you see and push the rest down, the same on Android, iPhone and computers (no scroll-anchor jump that would hide them above the screen) */
html.w21.pkm-d-new .rd-new{overflow-anchor:none}
/* w23: the black band at the top of the featured video was ours — the loading shimmer's animation moved the thumbnail to the top, so the black bar baked into YouTube's 4:3 picture showed. The featured frame already has its picture: no shimmer, picture centred (the bars are cut off evenly). */
html.w21 .rd-fyframe[style*="background-image"]{animation:none;background-position:center center;background-size:cover}

/* w24 (naftali Oct 27 2026 11:04 PM "why is it crashing", 11:08 PM "it jumps a lot"): endless animations kept a phone redrawing the page 60 times a
   second even when nothing moved (a picture far down that never loads shimmered for ever). Every looping animation now plays a few times and stops;
   phones that ask for less motion, or have little memory (html.w24lite, set in w21.js), get none. The endless video feed chunks are skipped by the
   browser while off screen, and the space they keep never changes size (no jumping). */
html.w21 .thumb,html.w21 .rd-fyframe,html.w21 .nx img,html.w21 .i57-nodth{animation-iteration-count:3}
html.w21 .w21ic .w21dot{animation-iteration-count:4}
html.w21 .w21down .w21dai{animation-iteration-count:4}
.ia-feedmore span{animation-iteration-count:6!important}
.box.blive .bicon{animation-iteration-count:4}
html.w21 .ia-feed .ia-feedlist>.ia-fchunk{content-visibility:auto;contain-intrinsic-size:auto 1200px}
html.w21 .ia-fsp{display:block;width:100%}
html.w24lite *,html.w24lite *::before,html.w24lite *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media (prefers-reduced-motion:reduce){html.w21 *,html.w21 *::before,html.w21 *::after{animation-iteration-count:1!important;animation-duration:.01ms!important}}
/* w24 (naftali Oct 27 11:54 PM): the ☰ drawer slides in from the side its button is on (w21.js menuSide sets xd-right / xd-left) */
html .xdrawer.xd-right .xdpanel{inset-inline-start:auto;inset-inline-end:auto;left:auto;right:0;transform:translateX(102%)}
html .xdrawer.xd-left .xdpanel{inset-inline-start:auto;inset-inline-end:auto;right:auto;left:0;transform:translateX(-102%)}
html .xdrawer.xd-right.open .xdpanel,html .xdrawer.xd-left.open .xdpanel{transform:none}
.top .bar{min-height:44px} /* w24: the bar is 44 px tall from the first paint (the ☰ button reaching 44 px later pushed the whole page down 4 px) */
/* w24: the top of the page has its final size from the first paint on phones (it used to start 189 px tall and settle at 116 px, moving everything) */
html.pkm-d-new.pkm-boothome .cats,html.pkm-d-new.pkm-boothome .langs{display:none}
@media (min-width:375px) and (max-width:759px){html.pkm-d-new .top .bar{min-height:116px}}