/* ===== LIQUID GLASS v2 — clear glass, almost no tint, bent light at the edges, thick bright rim, soft floating shadow ===== */
:root{--lg-spring:cubic-bezier(.34,1.56,.64,1)}
/* every glass surface */
.glass,.nav,.stats,.resource-card,.join-card,.pcard,.scard,.lcard,.hv-bar,.scroll-hint,.chip,.btn{
  --lg-tint:rgba(255,255,255,.07);
  background:linear-gradient(160deg,rgba(255,255,255,.17),var(--lg-tint) 40%,rgba(255,255,255,.04) 65%,rgba(255,255,255,.13));
  -webkit-backdrop-filter:blur(3px) saturate(1.7) brightness(1.1);backdrop-filter:blur(3px) saturate(1.7) brightness(1.1);
  border:0;
  box-shadow:
    inset 2px 3px 3px -1px rgba(255,255,255,.85),
    inset -2px -3px 3px -1px rgba(255,255,255,.5),
    inset 1px 0 0 rgba(255,90,170,.20),inset -1px 0 0 rgba(80,210,255,.24),
    inset 0 0 18px rgba(255,255,255,.16),
    0 1px 0 rgba(255,255,255,.18),
    0 16px 34px -6px rgba(0,6,24,.5),0 4px 10px rgba(0,6,24,.28)
}
/* text-heavy panels get a little shade so words stay readable over the busy wallpaper */
.glass,.resource-card,.join-card,.pcard,.scard,.lcard,.stats{--lg-tint:rgba(8,14,40,.22)}
.glass,.resource-card,.join-card,.pcard,.scard,.lcard,.stats{-webkit-backdrop-filter:blur(9px) saturate(1.8) brightness(1.05);backdrop-filter:blur(9px) saturate(1.8) brightness(1.05)}
/* thin curved rim light that wraps the whole edge (bright top-left, dim bottom-right, like real glass) */
.glass::before,.nav::before,.btn::before,.hv-bar::before,.scroll-hint::before,.stats::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.12) 30%,rgba(255,255,255,.06) 60%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude}
/* gloss that slides with the finger / mouse (polish.js feeds --mx/--my) */
.glass::after{left:0;right:0;top:0;height:auto;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,25%) var(--my,0%),rgba(255,255,255,.22),transparent 58%),linear-gradient(115deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 24%,transparent 42%)}
/* bent-light refraction — Chromium browsers on capable phones/desktops */
html.lg-refract:not(.iu-lite) .nav,html.lg-refract:not(.iu-lite) .btn,html.lg-refract:not(.iu-lite) .hv-bar,html.lg-refract:not(.iu-lite) .scroll-hint{
  -webkit-backdrop-filter:url(#lg-r) blur(1.5px) saturate(1.8) brightness(1.12);backdrop-filter:url(#lg-r) blur(1.5px) saturate(1.8) brightness(1.12)}
html.lg-refract:not(.iu-lite) .resource-card,html.lg-refract:not(.iu-lite) .join-card,html.lg-refract:not(.iu-lite) .lcard{
  -webkit-backdrop-filter:url(#lg-r) blur(6px) saturate(1.8) brightness(1.06);backdrop-filter:url(#lg-r) blur(6px) saturate(1.8) brightness(1.06)}
/* lite mode (weaker phones): keep a LIGHT blur on the few small glass pieces so it still looks like glass, but skip the heavy refraction */
html.iu-lite .nav,html.iu-lite .btn,html.iu-lite .hv-bar,html.iu-lite .scroll-hint,html.iu-lite .stats,html.iu-lite .resource-card,html.iu-lite .join-card{
  -webkit-backdrop-filter:blur(7px) saturate(1.7)!important;backdrop-filter:blur(7px) saturate(1.7)!important}
html.iu-lite .glass,html.iu-lite .lcard{background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(10,18,50,.5) 45%,rgba(255,255,255,.12))}
html.iu-lite .nav{background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(10,18,50,.34) 50%,rgba(255,255,255,.16))}
/* shapes */
.nav{border-radius:999px}.btn{border-radius:999px;overflow:visible}
.btn::after{display:none}
/* buttons: clear coloured glass lenses */
.btn.wa{background:linear-gradient(160deg,rgba(60,235,130,.55),rgba(37,211,102,.22) 45%,rgba(18,140,126,.35))}
.btn.tg{background:linear-gradient(160deg,rgba(90,200,255,.55),rgba(42,171,238,.22) 45%,rgba(34,120,200,.35))}
.btn.start{background:linear-gradient(160deg,rgba(60,225,160,.55),rgba(22,199,132,.22) 45%,rgba(14,159,110,.35))}
.btn{text-shadow:0 1px 6px rgba(0,0,0,.45);transition:transform .5s var(--lg-spring),filter .3s}
/* liquid touch: swells like the slider thumb in Apple's demo, then settles */
.btn:hover{transform:scale(1.04)}
.btn:active,.btn.lg-press{transform:scale(1.1,1.16);filter:brightness(1.18) saturate(1.2);transition-duration:.18s}
.nav nav a{border-radius:999px;transition:transform .5s var(--lg-spring),background .25s}
.nav nav a:active,.nav nav a.lg-press{transform:scale(1.18);background:rgba(255,255,255,.2)}
.resource-card,.join-card,.pcard,.scard,.lcard{transition:transform .55s var(--lg-spring)}
.resource-card:active,.join-card:active,.lcard.lg-press{transform:scale(1.025)}
.stats{border-radius:30px}.stats div{background:transparent!important;border-color:rgba(255,255,255,.2)!important}
.hv-bar{border-radius:999px}
.hv{box-shadow:inset 2px 3px 3px -1px rgba(255,255,255,.8),inset -1px -2px 3px rgba(255,255,255,.3),0 0 0 3px rgba(10,16,40,.5),2px 3px 0 4px #1b2c66,4px 6px 0 6px #121d46,14px 22px 50px rgba(0,0,0,.6),0 0 60px rgba(77,225,255,.35),0 0 120px rgba(139,123,255,.25);border:0}
.pdf-panel{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(10,16,44,.62) 40%,rgba(10,16,44,.7));-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);border:0;box-shadow:inset 2px 3px 3px -1px rgba(255,255,255,.7),inset -2px -3px 3px -1px rgba(255,255,255,.3),0 30px 80px rgba(0,0,0,.55)}
html.iu-lite .pdf-panel{background:#0a1030}
@media(prefers-reduced-motion:reduce){.btn,.resource-card,.join-card,.lcard,.nav nav a{transition:none}}

/* ======= v2: clearer glass, thicker bevel, real refraction on small controls ======= */
:root{
  --lg-fill:linear-gradient(135deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.045) 40%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.16) 100%);
  --lg-rim:inset 0 0 0 1px rgba(255,255,255,.26),inset 2px 3px 3px -1px rgba(255,255,255,.65),inset -2px -3px 3px -1px rgba(255,255,255,.38),inset 0 0 28px rgba(255,255,255,.10),inset 0 -14px 22px -10px rgba(140,220,255,.28);
  --lg-drop:0 18px 40px rgba(0,6,24,.38),0 3px 8px rgba(0,6,24,.3)
}
/* blur is allowed on the SMALL glass pieces even in light mode (a handful of layers is cheap) */
html.iu-lite .nav,html.iu-lite .btn,html.iu-lite .hv-bar,html.iu-lite .scroll-hint,html.iu-lite .chip,html.iu-lite .lg-lens{-webkit-backdrop-filter:var(--lg-blur)!important;backdrop-filter:var(--lg-blur)!important}
html.iu-lite .nav{background:var(--lg-fill)}
/* big cards in light mode: clear tinted glass, no blur (keeps phones smooth) */
html.iu-lite .glass,html.iu-lite .stats,html.iu-lite .lcard,html.iu-lite .resource-card,html.iu-lite .join-card{background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(16,28,70,.52) 45%,rgba(16,28,70,.50) 62%,rgba(255,255,255,.12))}
/* REAL refraction: the background bends at the glass edge (Chrome / Android) */
html.lg-refract .nav,html.lg-refract .btn,html.lg-refract .hv-bar,html.lg-refract .scroll-hint,html.lg-refract .chip,html.lg-refract .lg-lens{
  -webkit-backdrop-filter:blur(8px) url(#lgRefract) saturate(190%) brightness(1.12)!important;backdrop-filter:blur(8px) url(#lgRefract) saturate(190%) brightness(1.12)!important}
/* lens bubble */
.nav{overflow:visible}
.lg-lens{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;pointer-events:none;opacity:0;z-index:0;
  background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 50%,rgba(255,255,255,.2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 2px 3px 4px -1px rgba(255,255,255,.85),inset -2px -3px 4px -1px rgba(255,255,255,.4),0 8px 18px rgba(0,6,24,.35);
  -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
  transition:transform .5s var(--lg-spring),width .5s var(--lg-spring),height .5s var(--lg-spring),opacity .3s}
.lg-lens.press{filter:brightness(1.25)}
.nav>*:not(.lg-lens){position:relative;z-index:1}
.btn.lg-press{transform:scale(1.07,.9)!important;filter:brightness(1.15)}
/* soft coloured light leaking through the glass edges */
.glass{background-blend-mode:screen}
.stats div{border-color:rgba(255,255,255,.18)!important}

/* ===== floating glass video players + small floating gallery ===== */
@keyframes lgFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -7px;rotate:.35deg}}
.vlabel{display:flex;justify-content:space-between;align-items:baseline;margin:2px 4px 8px}
.vlabel b{font-size:1.05rem}.vlabel span{color:var(--mut);font-weight:700;font-size:.8rem}
.vwrap{position:relative}
.vrail{display:flex;gap:18px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x proximity;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:12px 6px 26px;margin:0 -6px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
.vrail::-webkit-scrollbar{display:none}
.lcard{flex:0 0 min(74vw,330px);border-radius:26px;animation:lgFloat 6.5s ease-in-out infinite;animation-delay:var(--d,0s);scroll-snap-align:center;padding:8px;box-shadow:var(--lg-rim),0 22px 34px -8px rgba(0,6,24,.55)}
.lcard .vbox{position:relative;border-radius:19px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lcard video{border-radius:19px}
.lcard .vt{padding:10px 8px 6px;font-size:.92rem}
.lcard.more{min-height:0;aspect-ratio:16/9;align-self:flex-start;padding:16px;margin-top:8px}
.vplay{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:1px solid rgba(255,255,255,.7);color:#fff;font-size:1.25rem;padding-left:4px;cursor:pointer;
  background:linear-gradient(150deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 55%,rgba(255,255,255,.28));-webkit-backdrop-filter:blur(10px) saturate(190%);backdrop-filter:blur(10px) saturate(190%);
  box-shadow:inset 2px 3px 4px -1px rgba(255,255,255,.85),inset -2px -3px 4px -1px rgba(255,255,255,.4),0 10px 24px rgba(0,0,0,.45);transition:transform .45s var(--lg-spring),opacity .25s;z-index:2}
.vplay:active{transform:scale(.88)}
.vbox.playing .vplay{opacity:0;pointer-events:none;transform:scale(1.4)}
.vnav{position:absolute;top:42%;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.55);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:none;place-items:center;
  background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.07));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--lg-rim),0 8px 20px rgba(0,0,0,.4)}
.vnav.prev{left:-8px}.vnav.next{right:-8px}
@media(hover:hover){.vnav:not([hidden]){display:grid}}
/* gallery: small floating glass pictures */
.masonry{columns:3 150px;column-gap:12px}
.gitem{margin-bottom:12px;padding:6px;border-radius:20px;animation:lgFloat 7s ease-in-out infinite;box-shadow:var(--lg-rim),0 16px 26px -8px rgba(0,6,24,.5)}
.gitem:nth-child(2n){animation-delay:-2.3s}.gitem:nth-child(3n){animation-delay:-4.6s}
.gitem img{border-radius:14px}.gitem p{font-size:.78rem;padding:6px 4px 1px}
html.iu-lite .lcard,html.iu-lite .gitem{animation:none}
@media(prefers-reduced-motion:reduce){.lcard,.gitem{animation:none}}


/* ===== v3: one uniform glass (no patches). Sheen covers the whole surface; no SVG region effects. ===== */
.btn::before{left:0;right:0;top:0;bottom:0;height:auto;border-radius:inherit;background:linear-gradient(165deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.07) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.10) 100%)}
.btn{-webkit-backdrop-filter:blur(14px) saturate(170%)!important;backdrop-filter:blur(14px) saturate(170%)!important}
/* banner logo: realistic 3D ice-glass mark, top-left */
.hv-top{justify-content:flex-start}
.hv-logo{display:inline-flex;align-items:center;gap:12px;transform:translateZ(40px)}
.hv-logo .logo-mark.cube{width:58px;height:58px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(77,225,255,.6));animation:lgLogo 6s ease-in-out infinite}
@keyframes lgLogo{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.hv-wm{display:flex;flex-direction:column;line-height:.95;font-family:Sora,Inter,sans-serif;text-transform:uppercase}
.hv-wm b{font-weight:900;letter-spacing:.06em;background:linear-gradient(180deg,#fff 0%,#bfeeff 45%,#4de1ff 62%,#e8fbff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #2b6a8a) drop-shadow(0 2px 0 #1d4d69) drop-shadow(0 3px 0 #123a52) drop-shadow(0 8px 10px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(77,225,255,.55))}
.hv-wm b:first-child{font-size:1.5rem}.hv-wm b:last-child{font-size:.82rem;letter-spacing:.34em;margin-top:3px}
@media(prefers-reduced-motion:reduce){.hv-logo .logo-mark.cube{animation:none}}


/* ===== v4: "Ice Update 🧊" clear-glass 3D title; banner is clear glass over the wallpaper ===== */
.hv{background:rgba(8,14,40,.18)!important;-webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%)}
.hv-title{display:inline-flex;align-items:center;gap:10px;transform:translateZ(46px)}
.hv-name{position:relative;font:900 clamp(1.7rem,7.4vw,2.6rem)/1 Sora,Inter,sans-serif;letter-spacing:.01em;color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(205,240,255,.78) 34%,rgba(120,205,255,.34) 52%,rgba(190,235,255,.55) 78%,rgba(255,255,255,.9) 100%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1.2px rgba(255,255,255,.78);
  filter:drop-shadow(0 1px 0 rgba(120,200,240,.9)) drop-shadow(0 2px 0 rgba(70,150,200,.85)) drop-shadow(0 3px 0 rgba(30,90,140,.8)) drop-shadow(0 4px 0 rgba(15,55,100,.75)) drop-shadow(0 12px 12px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(77,225,255,.55))}
/* gloss streak sweeping across the lettering */
.hv-name::after{content:attr(data-t);position:absolute;left:0;top:0;color:transparent;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 48%,transparent 60%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:lgShine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes lgShine{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.hv-ice{font-size:clamp(1.9rem,8vw,2.8rem);line-height:1;filter:drop-shadow(0 10px 10px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(120,225,255,.8));animation:lgIce 5.5s ease-in-out infinite}
@keyframes lgIce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.hv-ice,.hv-name::after{animation:none}}

/* ===== v7: realistic CLEAR GLASS (like an empty drinking glass) =====
   Research notes: plain blur reads as grey/milky plastic; real clear glass = very low white tint, light blur + saturate,
   crisp 1px rim, bright edge catch-lights (top-left / bottom-right), thin reflection strips along the sides, soft cast shadow.
   No brightness boost and no big white sheen, so the content behind stays natural. */
:root{
  --lg-fill:linear-gradient(135deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 45%,rgba(255,255,255,.012) 60%,rgba(255,255,255,.04) 100%);
  --lg-rim:inset 0 0 0 1px rgba(255,255,255,.20),inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.60),inset -1.5px -1.5px 1px -.5px rgba(255,255,255,.30),inset 0 0 12px rgba(255,255,255,.035),inset 0 -1px 0 rgba(120,210,255,.18);
  --lg-drop:0 12px 30px rgba(0,5,20,.30),0 2px 5px rgba(0,5,20,.22);
  --lg-blur:blur(5px) saturate(165%)
}
.glass,.nav,.stats,.resource-card,.join-card,.pcard,.scard,.lcard,.hv-bar,.scroll-hint,.chip{background:var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:1px solid rgba(255,255,255,.18);box-shadow:var(--lg-rim),var(--lg-drop)}
/* reflections: two thin vertical strips on the sides + a hairline glare on top, nothing across the middle */
.glass::before{background:
  linear-gradient(90deg,rgba(255,255,255,.26) 0,rgba(255,255,255,.07) 1.2%,transparent 4.5%,transparent 93%,rgba(255,255,255,.12) 98.5%,rgba(255,255,255,.04) 100%),
  radial-gradient(260px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.07),transparent 60%)}
.glass::after{left:5%;right:5%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.nav{border-radius:999px}
.nav nav a{color:#eef5ff;text-shadow:0 1px 3px rgba(0,8,30,.55)}
.glass p,.glass li{text-shadow:0 1px 2px rgba(0,8,30,.35)}
/* buttons: clear coloured glass, rim + one thin highlight curve (no big sheen) */
.btn{border:1px solid rgba(255,255,255,.38);-webkit-backdrop-filter:blur(5px) saturate(165%)!important;backdrop-filter:blur(5px) saturate(165%)!important;
  box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.65),inset -1.5px -1.5px 1px -.5px rgba(255,255,255,.3),inset 0 0 12px rgba(255,255,255,.05),0 10px 22px rgba(2,8,24,.30)}
.btn::before{left:7%;right:7%;top:3px;bottom:auto;height:34%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0))}
.btn.wa{background:linear-gradient(135deg,rgba(37,211,102,.30),rgba(18,140,126,.16))}
.btn.tg{background:linear-gradient(135deg,rgba(42,171,238,.30),rgba(34,120,200,.16))}
.btn.start{background:linear-gradient(135deg,rgba(22,199,132,.34),rgba(14,159,110,.16))}
html.iu-lite .glass,html.iu-lite .stats,html.iu-lite .lcard,html.iu-lite .resource-card,html.iu-lite .join-card{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(14,24,60,.46) 50%,rgba(255,255,255,.04))}
html.iu-lite .nav{background:var(--lg-fill)}
html.iu-lite .nav,html.iu-lite .btn,html.iu-lite .scroll-hint,html.iu-lite .chip,html.iu-lite .lg-lens{-webkit-backdrop-filter:var(--lg-blur)!important;backdrop-filter:var(--lg-blur)!important}
/* lens bubble, play bubble, arrows */
.lg-lens{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 55%,rgba(255,255,255,.07));box-shadow:inset 0 0 0 1px rgba(255,255,255,.30),inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.65),inset -1.5px -1.5px 1px -.5px rgba(255,255,255,.3),0 6px 14px rgba(0,6,24,.28);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);transition:transform .5s var(--lg-spring),width .5s var(--lg-spring),height .5s var(--lg-spring),opacity .3s}
.vplay,.vnav{background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(255,255,255,.09));border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(5px) saturate(165%);backdrop-filter:blur(5px) saturate(165%);box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.7),inset -1.5px -1.5px 1px -.5px rgba(255,255,255,.3),0 8px 18px rgba(0,0,0,.38)}
.lcard,.gitem{box-shadow:var(--lg-rim),0 16px 26px -8px rgba(0,6,24,.5)}
/* hero banner */
.hv{background:rgba(8,14,40,.06)!important;-webkit-backdrop-filter:blur(5px) saturate(165%);backdrop-filter:blur(5px) saturate(165%)}
.hv::before{background:linear-gradient(90deg,rgba(255,255,255,.22) 0,rgba(255,255,255,.05) 1.6%,transparent 5%,transparent 94%,rgba(255,255,255,.10) 99%),linear-gradient(115deg,rgba(255,255,255,.05) 0%,transparent 30%)}
.hv::after{background:linear-gradient(180deg,rgba(5,8,20,.35),transparent 28%,transparent 45%,rgba(5,8,20,.82))}
.hv{border:1px solid rgba(255,255,255,.34);box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.65),inset -1.5px -1.5px 1px -.5px rgba(255,255,255,.3),0 0 0 3px rgba(10,16,40,.45),2px 3px 0 4px #1b2c66,4px 6px 0 6px #121d46,14px 22px 46px rgba(0,0,0,.55),0 0 40px rgba(77,225,255,.16)}
/* title lettering: clear glass letters with crisp edge */
.hv-name{background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(205,240,255,.40) 42%,rgba(140,210,255,.16) 56%,rgba(190,235,255,.30) 80%,rgba(255,255,255,.62) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(255,255,255,.62)}
.hv-name::after{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 49%,transparent 58%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text}

/* silent background wallpaper video inside the banner (no controls, no sound, no interaction) */
.hv-bg{opacity:0;transition:opacity .9s ease;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) blur(1px);pointer-events:none;z-index:0;border-radius:inherit}
.hv #hvCanvas{z-index:1}.hv-top,.hv-over{z-index:2}
.hv-bg::-webkit-media-controls{display:none!important}
.hv-bg.on{opacity:.52}

/* portrait lesson videos: always the same small size as the other lesson card; tapping play opens it full screen */
.lcard.portrait .vbox{aspect-ratio:16/9;width:100%;margin:0 auto}
.lcard.portrait video{aspect-ratio:auto!important;width:100%;height:100%;object-fit:cover}
.lcard.portrait video:fullscreen{object-fit:contain;background:#000}
.lcard.portrait video:-webkit-full-screen{object-fit:contain;background:#000}

/* v8: NO glass shine. Removed every moving/white sheen, streak, glare and highlight line; surfaces stay clear glass with a faint plain edge */
.glass::before,.glass::after,.nav::before,.nav::after,.btn::before,.btn::after,.hv-bar::before,.hv-bar::after,.scroll-hint::before,.stats::before,.hv::before,.hv-name::after,.iu3d-t.hero .front::after,.lg-lens::before,.lg-lens::after,.vplay::before,.vplay::after{display:none!important;content:none!important;animation:none!important}
:root{--lg-rim:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn,.lg-lens,.vplay,.vnav{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 8px 18px rgba(2,8,24,.28)!important}
.hv{box-shadow:0 0 0 3px rgba(10,16,40,.45),2px 3px 0 4px #1b2c66,4px 6px 0 6px #121d46,14px 22px 46px rgba(0,0,0,.55)!important;border-color:rgba(255,255,255,.14)!important}
.hv-name{-webkit-text-stroke:1px rgba(255,255,255,.35)!important}

/* v9: flat, even clear glass — no gradient bands, no brightness boost, nothing that can read as a white streak */
.glass,.nav,.stats,.resource-card,.join-card,.pcard,.scard,.lcard,.hv-bar,.scroll-hint,.chip{background:rgba(10,18,48,.20)!important;-webkit-backdrop-filter:blur(8px) saturate(140%)!important;backdrop-filter:blur(8px) saturate(140%)!important}
html.iu-lite .glass,html.iu-lite .stats,html.iu-lite .lcard,html.iu-lite .resource-card,html.iu-lite .join-card,html.iu-lite .nav{background:rgba(10,18,48,.42)!important}
.btn{-webkit-backdrop-filter:blur(8px) saturate(140%)!important;backdrop-filter:blur(8px) saturate(140%)!important}
.btn.wa{background:rgba(37,211,102,.30)!important}.btn.tg{background:rgba(42,171,238,.30)!important}.btn.start{background:rgba(22,199,132,.32)!important}
.vplay,.vnav,.lg-lens{background:rgba(255,255,255,.08)!important}

/* ===== speed fixes (brokers section lag) =====
   - broker tiles float, so a live blur behind them is re-drawn every frame: use a solid glass tint instead
   - the fixed top bar and scroll hint sit over scrolling content: plain blur instead of the SVG refraction filter */
.broker .tile.glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(10,18,50,.62) 45%,rgba(255,255,255,.10))!important}
html.lg-refract:not(.iu-lite) .nav,html.lg-refract:not(.iu-lite) .scroll-hint{
  -webkit-backdrop-filter:blur(8px) saturate(1.6)!important;backdrop-filter:blur(8px) saturate(1.6)!important}

/* ===== brokers: fully static + light (no float, no blur, no masked rim) so scrolling stays at full speed ===== */
.broker,.broker.live{animation:none!important;will-change:auto;transform:none}
.broker .tile.glass::before,.broker .tile.glass::after{display:none}
.broker .tile.glass{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 6px 14px rgba(0,6,24,.35)!important}
.broker .tile img{box-shadow:none}
.broker{contain:layout style}
/* the floating corner icon stops its ring pulse while the page is moving */
html.iu-scrolling .iu-dock .ring,html.iu-scrolling .iu-dock .coin{animation-play-state:paused}

/* ===== light mode, stricter: only the small top bar + scroll hint keep a live blur; everything else is a solid glass tint, and floating cards stand still ===== */
html.iu-lite .stats,html.iu-lite .resource-card,html.iu-lite .join-card,html.iu-lite .hv-bar,html.iu-lite .btn,html.iu-lite .glass,html.iu-lite .lcard,html.iu-lite .pcard,html.iu-lite .scard,html.iu-lite .chip,html.iu-lite .hv,html.iu-lite .vplay,html.iu-lite .vnav,html.iu-lite .lg-lens{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.iu-lite .stats,html.iu-lite .resource-card,html.iu-lite .join-card,html.iu-lite .lcard,html.iu-lite .pcard,html.iu-lite .scard{
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(10,18,50,.66) 45%,rgba(255,255,255,.10))!important}
html.iu-lite .lcard,html.iu-lite .gitem,html.iu-lite .broker{animation:none!important}
html.iu-lite .glass::before,html.iu-lite .nav::before,html.iu-lite .btn::before,html.iu-lite .hv-bar::before,html.iu-lite .scroll-hint::before,html.iu-lite .stats::before{display:none}
html.iu-lite .nav,html.iu-lite .scroll-hint{-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important}