/* ==========================================================================
   BDOH FX — atmosphere, lettering, motion and interaction for every page.
   Loaded after each page's own stylesheet.
   Calm zones: the Practice solving screen (body.pr-solving) and a running
   exam (body.ex-running) switch the moving background off.
   "Reduce motion" turns every animation here into a still, finished state.
   ========================================================================== */
:root{
  --fx-logo:linear-gradient(100deg,#00B4CC 0%,#12C2B0 22%,#4CAF50 46%,#B7D93A 68%,#FFD54A 84%,#FFB547 100%);
  --fx-flow:linear-gradient(100deg,#00B4CC 0%,#16C6B4 12%,#4CAF50 26%,#C4DB3A 38%,#FFD54A 50%,#C4DB3A 62%,#4CAF50 74%,#16C6B4 88%,#00B4CC 100%);
  --fx-lit:linear-gradient(180deg,#FFFFFF 0%,#EAFBFD 46%,#A9ECF1 100%);
  --fx-shine:linear-gradient(105deg,transparent 0%,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%,transparent 100%);
  --fx-glow:drop-shadow(0 0 18px rgba(0,190,214,.38)) drop-shadow(0 0 46px rgba(76,175,80,.22));
  --fx-glow-gold:drop-shadow(0 0 18px rgba(255,213,74,.32)) drop-shadow(0 0 44px rgba(76,175,80,.2));
  --fx-ease:cubic-bezier(.16,1,.3,1);
  --fx-card:color-mix(in srgb,var(--bd-surface) 80%,transparent);
}
:root[data-theme="light"]{
  --fx-logo:linear-gradient(100deg,#007B8F 0%,#0A8F86 24%,#2E8B3E 50%,#7FA21A 72%,#C99700 100%);
  --fx-flow:linear-gradient(100deg,#007B8F 0%,#0A8F86 12%,#2E8B3E 26%,#86A51B 38%,#C99700 50%,#86A51B 62%,#2E8B3E 74%,#0A8F86 88%,#007B8F 100%);
  --fx-lit:linear-gradient(180deg,#0B1830 0%,#123049 60%,#14566A 100%);
  --fx-shine:linear-gradient(105deg,transparent 0%,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%,transparent 100%);
  --fx-glow:drop-shadow(0 6px 18px rgba(0,123,143,.16));
  --fx-glow-gold:drop-shadow(0 6px 18px rgba(201,151,0,.16));
  --fx-card:color-mix(in srgb,var(--bd-surface) 88%,transparent);
}

/* ---------- 1. Atmosphere: cosmos canvas, aurora, grain ---------- */
.bd-cosmos,#bdStars{position:fixed!important;inset:0!important;width:100vw;height:100vh;z-index:-1!important;pointer-events:none;opacity:1}
.bd-aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;contain:strict}
.bd-aurora i{position:absolute;display:block;border-radius:50%;will-change:transform;
  background:radial-gradient(circle at 50% 50%,var(--c) 0%,transparent 66%);opacity:var(--o);animation:fxBlob var(--t) ease-in-out infinite;animation-delay:var(--dl)}
.bd-aurora .a1{--c:rgba(0,150,180,.9);--o:.20;--t:28s;--dl:0s;width:62vmax;height:62vmax;top:-22vmax;left:-18vmax}
.bd-aurora .a2{--c:rgba(60,180,90,.9);--o:.15;--t:24s;--dl:-9s;width:52vmax;height:52vmax;top:18vh;right:-20vmax}
.bd-aurora .a3{--c:rgba(255,200,40,.9);--o:.085;--t:32s;--dl:-17s;width:44vmax;height:44vmax;bottom:-16vmax;left:22vw}
.bd-aurora .a4{--c:rgba(0,200,230,.9);--o:.11;--t:21s;--dl:-6s;width:36vmax;height:36vmax;bottom:-8vmax;right:12vw}
:root[data-theme="light"] .bd-aurora .a1{--o:.13}
:root[data-theme="light"] .bd-aurora .a2{--o:.10}
:root[data-theme="light"] .bd-aurora .a3{--o:.09}
:root[data-theme="light"] .bd-aurora .a4{--o:.07}
@keyframes fxBlob{0%,100%{transform:translate3d(0,0,0) scale(1)}25%{transform:translate3d(6vw,-5vh,0) scale(1.08)}50%{transform:translate3d(-4vw,7vh,0) scale(.94)}75%{transform:translate3d(5vw,4vh,0) scale(1.05)}}
/* film grain: keeps big gradients from banding and gives the dark a printed texture */
.bd-grain{position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"] .bd-grain{opacity:.025;filter:invert(1)}
html.bd-calm .bd-aurora{opacity:.75}
html.bd-calm .bd-aurora i{animation-duration:60s}
html.bd-lite .bd-aurora i,html.bd-lowend .bd-aurora i{animation:none}

/* ---------- 2. Lettering: lit, colourful and glowing ---------- */
/* Lines lit by the torch: bright white-to-ice */
.h-title__l1,.ev-title__a,.lb-title>span:first-child,.hero-title .t1{
  background-image:var(--fx-lit);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(120,230,240,.28)) drop-shadow(0 2px 0 rgba(0,0,0,.25));text-shadow:none!important}
/* Lines in the logo colours, flowing slowly with a light sweep */
.h-title__l2,.h-tag,.ev-title__b,.lb-title .bd-grad,.hero-title .t2,.cr-page-hero .grad-text,.fx-grad{
  background-image:var(--fx-shine),var(--fx-flow)!important;background-size:250% 100%,220% 100%!important;background-repeat:no-repeat,repeat;
  background-position:180% 0,0% 50%;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  animation:fxFlow 9s linear infinite!important;filter:var(--fx-glow)}
.h-tag{filter:var(--fx-glow-gold)}
@keyframes fxFlow{0%{background-position:180% 0,0% 50%}18%{background-position:-80% 0,-40% 50%}100%{background-position:-80% 0,-220% 50%}}
.hero-title .t1,.hero-title .t2{display:block;width:fit-content;margin-inline:auto}
.h-title span,.ev-title span,.lb-title span{width:fit-content;max-width:100%}
/* Section headings across the site: the logo gradient, shrink-wrapped to the words */
.bd-h2,.s-title,.ev-group__h h2,.pf-gate h1,.cr-hero-title,.ev-d__title{
  width:fit-content;max-width:100%;background-image:var(--fx-logo);background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;filter:var(--fx-glow)}
.ev-group__h h2{filter:none}
/* Big numbers carry the gradient too */
.h-stats dd,.lb-stat b,.ev-fact b,.pf-stat b,.stat-val{filter:drop-shadow(0 0 14px rgba(0,190,214,.25))}
:root[data-theme="light"] .h-title__l1,:root[data-theme="light"] .ev-title__a,:root[data-theme="light"] .lb-title>span:first-child,:root[data-theme="light"] .hero-title .t1{filter:none}
/* Low-power phones: keep the colours and glow, skip the continuous flow */
html.bd-lowend .h-title__l2,html.bd-lowend .h-tag,html.bd-lowend .ev-title__b,html.bd-lowend .lb-title .bd-grad,html.bd-lowend .hero-title .t2,html.bd-lowend .fx-grad,
html.bd-lowend.fx-on .h-title__l2,html.bd-lowend.fx-on .h-tag,html.bd-lowend.fx-on .ev-title__b,html.bd-lowend.fx-on .lb-title .bd-grad,html.bd-lowend.fx-on .hero-title .t2{animation:fxIn 1.1s var(--fx-ease) both!important;background-position:180% 0,30% 50%!important}

/* Brand mark breathes softly, like the original logo */
.bd-brand img{animation:fxLogo 4.2s ease-in-out infinite;border-radius:50%}
@keyframes fxLogo{0%,100%{filter:drop-shadow(0 0 8px rgba(0,190,214,.45))}50%{filter:drop-shadow(0 0 18px rgba(0,190,214,.7)) drop-shadow(0 0 30px rgba(76,175,80,.4))}}
.bd-brand__t b{background-image:var(--fx-logo);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---------- 3. Page entrance (pure CSS, runs once) ---------- */
html.fx-on .h-kicker,html.fx-on .h-title>span,html.fx-on .h-tag,html.fx-on .h-sub,html.fx-on .h-cta,html.fx-on .h-stats,
html.fx-on .ev-hero .ev-title>span,html.fx-on .ev-lead,html.fx-on .ev-hero__facts,html.fx-on .ev-next,
html.fx-on .lb-title>span,html.fx-on .lb-lead,html.fx-on .lb-stats,
html.fx-on .hero .eyebrow,html.fx-on .hero-title>span,html.fx-on .hero-sub,
html.fx-on .cr-page-hero>*{animation:fxIn 1.1s var(--fx-ease) both}
html.fx-on .h-title>span:nth-child(1),html.fx-on .ev-title>span:nth-child(1),html.fx-on .lb-title>span:nth-child(1),html.fx-on .hero-title>span:nth-child(1){animation-delay:.08s}
html.fx-on .h-title>span:nth-child(2),html.fx-on .ev-title>span:nth-child(2),html.fx-on .lb-title>span:nth-child(2),html.fx-on .hero-title>span:nth-child(2){animation-delay:.2s}
html.fx-on .h-tag,html.fx-on .ev-lead,html.fx-on .lb-lead,html.fx-on .hero-sub,html.fx-on .cr-page-hero>:nth-child(2){animation-delay:.34s}
html.fx-on .h-sub,html.fx-on .ev-hero__facts,html.fx-on .lb-stats,html.fx-on .cr-page-hero>:nth-child(3){animation-delay:.46s}
html.fx-on .h-cta,html.fx-on .ev-next,html.fx-on .cr-page-hero>:nth-child(n+4){animation-delay:.56s}
html.fx-on .h-stats{animation-delay:.68s}
/* gradient lines keep flowing after they land */
html.fx-on .h-title__l2,html.fx-on .h-tag,html.fx-on .ev-title__b,html.fx-on .lb-title .bd-grad,html.fx-on .hero-title .t2{animation:fxIn 1.1s var(--fx-ease) both,fxFlow 9s linear infinite!important}
html.fx-on .h-title__l2{animation-delay:.2s,0s!important}
html.fx-on .h-tag{animation-delay:.34s,0s!important}
@keyframes fxIn{from{opacity:0;transform:translate3d(0,.45em,0);clip-path:inset(-60% -30% 100% -30%)}to{opacity:1;transform:none;clip-path:inset(-60% -30% -60% -30%)}}
.h-sub,.h-cta,.h-stats,.ev-lead,.lb-lead,.hero-sub,.ev-hero__facts,.lb-stats,.ev-next{--fx-dummy:0}

/* ---------- 4. Scroll reveals (JS adds .fx-r, then .fx-in) ---------- */
.fx-r{opacity:0;transform:translate3d(0,26px,0) scale(.985);filter:blur(6px);
  transition:opacity .9s var(--fx-ease),transform .9s var(--fx-ease),filter .9s var(--fx-ease);transition-delay:var(--fx-d,0s)}
.fx-r.fx-in{opacity:1;transform:none;filter:none}
.bd-h2.fx-r,.s-title.fx-r{transform:translate3d(0,.4em,0) skewY(2deg);filter:blur(6px);letter-spacing:.06em;transition-property:opacity,transform,filter,letter-spacing;transition-duration:1s}
.bd-h2.fx-r.fx-in,.s-title.fx-r.fx-in{transform:none;letter-spacing:.01em;filter:var(--fx-glow)}
html[lang="bn"] .bd-h2.fx-r{letter-spacing:0}

/* ---------- 5. Cards: glassy surfaces, pointer spotlight, gentle tilt ---------- */
.h-tile,.h-subj,.h-feat,.h-con,.h-ev,.h-pres,.h-mem,.h-hub,.h-post,.h-join,.ev-card,.ev-next,.lb-me,.lb-row,.lb-pod__i,.pf-card,.pf-stat,.pf-hero,
.cr-role-card,.cr-benefit,.cr-req-card,.cr-faq-item,.subj-card,.cat-card,.year-card,.topic-card,.mode-tab,.pr-panel{
  background-color:var(--fx-card)}
.fx-spot{position:relative}
.fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;z-index:0}
.fx-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(0,200,220,.10),rgba(76,175,80,.05) 35%,transparent 60%)}
.fx-glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(120,240,230,.85),rgba(255,213,74,.35) 40%,transparent 70%);
  -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)}
:root[data-theme="light"] .fx-glow::before{background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(0,123,143,.07),transparent 60%)}
:root[data-theme="light"] .fx-glow::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(0,123,143,.55),rgba(201,151,0,.25) 40%,transparent 70%)}
.fx-spot:hover>.fx-glow{opacity:1}
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0);transition:transform .45s var(--fx-ease),border-color .25s ease,box-shadow .35s ease;will-change:transform}
.fx-tilt:hover{--lift:-4px;box-shadow:0 24px 60px -24px rgba(0,190,214,.35),0 8px 24px -12px rgba(0,0,0,.5)}
@media (hover:hover) and (pointer:fine){
  .h-tile:hover,.h-feat:hover,.h-con:hover,.h-ev:hover,.h-hub:hover,.h-post:hover,.ev-card:hover,.cr-role-card:hover,.topic-card:hover,.year-card:hover,.cat-card:hover{transform:translate3d(0,-3px,0);box-shadow:0 22px 50px -26px rgba(0,190,214,.4)}
  .h-tile,.h-feat,.h-con,.h-ev,.h-hub,.h-post,.ev-card,.cr-role-card,.topic-card,.year-card,.cat-card{transition:transform .4s var(--fx-ease),box-shadow .4s ease,border-color .25s ease,background-color .25s ease}
}

/* ---------- 6. Buttons: light sweep, lift, glow ---------- */
.bd-btn--primary,.btn-primary,.cr-chip.active{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(110deg,#0098B3 0%,#12B3A0 40%,#43AE5A 75%,#8BC34A 100%);background-size:160% 100%;background-position:0% 50%;
  box-shadow:0 8px 28px -10px rgba(0,190,214,.75),0 0 0 1px rgba(255,255,255,.08) inset,inset 0 1px 0 rgba(255,255,255,.25)}
.bd-btn--primary::after,.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%)}
@media (hover:hover){
  .bd-btn--primary:hover,.btn-primary:hover{background-position:100% 50%;transform:translateY(-2px);filter:none;
    box-shadow:0 16px 40px -12px rgba(0,190,214,.85),0 0 30px -6px rgba(76,175,80,.55),inset 0 1px 0 rgba(255,255,255,.3)}
  .bd-btn--primary:hover::after,.btn-primary:hover::after{transform:translateX(120%);transition:transform .8s var(--fx-ease)}
  .bd-btn--secondary:hover{border-color:transparent;background:linear-gradient(var(--bd-surface-2),var(--bd-surface-2)) padding-box,var(--fx-logo) border-box;transform:translateY(-2px)}
}
.bd-btn--primary,.bd-btn--secondary{transition:transform .35s var(--fx-ease),box-shadow .35s ease,background-position .6s ease,border-color .25s ease}
.bd-btn--primary:active,.bd-btn--secondary:active{transform:scale(.97)}
.fx-mag{transition:transform .35s var(--fx-ease)}

/* ---------- 7. Navigation polish ---------- */
.bd-nav{position:relative}
.fx-navpill{position:absolute;top:50%;height:40px;margin-top:-20px;left:0;width:0;border-radius:999px;pointer-events:none;opacity:0;z-index:0;
  background:linear-gradient(var(--bd-surface-2),var(--bd-surface-2)) padding-box,linear-gradient(100deg,rgba(0,190,214,.6),rgba(76,175,80,.35),rgba(255,213,74,.45)) border-box;border:1px solid transparent;
  transition:transform .45s var(--fx-ease),width .45s var(--fx-ease),opacity .25s ease}
.bd-nav a,.bd-nav button{position:relative;z-index:1}
.bd-nav.fx-hovering a:hover,.bd-nav.fx-hovering button:hover{background:transparent}
.bd-nav a[aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(0,190,214,.35),0 0 24px -8px rgba(0,190,214,.6)}
.bd-tabs a[aria-current="page"] .bd-ico{filter:drop-shadow(0 0 8px rgba(0,190,214,.8))}
.bd-tabs a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;width:28px;height:3px;margin-left:-14px;border-radius:0 0 4px 4px;background:var(--fx-logo);box-shadow:0 0 14px rgba(0,190,214,.9);animation:fxTab .5s var(--fx-ease) both}
.bd-tabs a{position:relative}
@keyframes fxTab{from{transform:scaleX(0)}to{transform:none}}
/* scroll progress */
.fx-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:9600;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:var(--fx-logo);box-shadow:0 0 12px rgba(0,190,214,.8)}
body.pr-solving .fx-progress,body.ex-running .fx-progress{display:none}

/* ---------- 8. Page transitions between pages (Chrome, Edge, Safari 18+) ---------- */
@view-transition{navigation:auto}
.bd-top{view-transition-name:bd-top}
.bd-tabs{view-transition-name:bd-tabs}
::view-transition-old(root){animation:fxVtOut .22s ease-in both}
::view-transition-new(root){animation:fxVtIn .5s var(--fx-ease) both}
@keyframes fxVtOut{to{opacity:0;transform:translateY(-8px) scale(.995);filter:blur(4px)}}
@keyframes fxVtIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}

/* ---------- 9. Torch: floating, colour-cycling glow, orbit + embers canvas ---------- */
.h-torch__img{animation:hRise 1.1s var(--ease) both,fxTorch 6s ease-in-out 1.1s infinite!important;
  filter:drop-shadow(0 0 26px rgba(0,190,214,.55)) drop-shadow(0 0 70px rgba(76,175,80,.3)) drop-shadow(0 30px 40px rgba(0,0,0,.45))!important}
@keyframes fxTorch{0%,100%{transform:translate3d(0,0,0) rotate(.3deg)}33%{transform:translate3d(0,-16px,0) rotate(1.2deg)}66%{transform:translate3d(0,-7px,0) rotate(-.9deg)}}
.h-torch__halo{animation:fxHalo 7s ease-in-out infinite!important}
.h-torch::before,.h-torch::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;inset:2% 10% 34% 10%;mix-blend-mode:screen}
.h-torch::before{background:radial-gradient(closest-side,rgba(255,213,74,.42),transparent 72%);animation:fxCyc 7s ease-in-out infinite}
.h-torch::after{background:radial-gradient(closest-side,rgba(76,175,80,.42),transparent 72%);animation:fxCyc 7s ease-in-out -3.5s infinite}
@keyframes fxHalo{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@keyframes fxCyc{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.h-torch__fx{position:absolute;inset:-6%;width:112%;height:112%;z-index:3;pointer-events:none}
.h-torch.fx-has-canvas .h-torch__orbits{display:none}
.h-torch__stage{position:absolute;inset:0;transition:transform .6s var(--fx-ease)}
:root[data-theme="light"] .h-torch::before,:root[data-theme="light"] .h-torch::after{mix-blend-mode:multiply;opacity:.5}

/* ---------- 10. Olympiad marquee ---------- */
.h-marq{position:relative;padding:clamp(18px,3vw,30px) 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.h-marq__track{display:flex;width:max-content;animation:fxMarq 46s linear infinite}
.h-marq:hover .h-marq__track{animation-play-state:paused}
.h-marq__set{display:flex;align-items:center;gap:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px)}
.h-marq__i{font-family:var(--bd-font-display);font-size:clamp(2.2rem,5vw,4.2rem);line-height:1;letter-spacing:.02em;white-space:nowrap}
.h-marq__i:nth-child(4n+1){background-image:var(--fx-logo);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px rgba(0,190,214,.3))}
.h-marq__i:nth-child(4n+3){color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--bd-text) 38%,transparent)}
.h-marq__s{width:10px;height:10px;flex:none;transform:rotate(45deg);border-radius:2px;background:var(--fx-logo);box-shadow:0 0 14px rgba(0,190,214,.8)}
@keyframes fxMarq{to{transform:translateX(-50%)}}

/* ---------- 11. Small touches ---------- */
::selection{background:rgba(0,190,214,.35);color:inherit}
.bd-top{background:color-mix(in srgb,var(--bd-bg) 62%,transparent)!important;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.bd-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,190,214,.45) 30%,rgba(255,213,74,.35) 70%,transparent)}
.bd-live{box-shadow:0 0 0 0 rgba(240,82,79,.6),0 0 10px rgba(240,82,79,.8)}
.h-kicker{background:color-mix(in srgb,var(--bd-surface) 70%,transparent);border-color:transparent;
  background-image:linear-gradient(var(--bd-surface),var(--bd-surface)),var(--fx-logo);background-origin:border-box;background-clip:padding-box,border-box;border:1px solid transparent}
.bd-progress i,.lb-me__bar i{box-shadow:0 0 14px rgba(0,190,214,.6)}

/* ---------- 12. Reduce motion: everything lands in its final state ---------- */
@media (prefers-reduced-motion:reduce){
  .bd-aurora i,.h-marq__track,.bd-brand img,.h-torch__img,.h-torch__halo,.h-torch::before,.h-torch::after,.bd-tabs a[aria-current="page"]::before{animation:none!important}
  html.fx-on .h-kicker,html.fx-on .h-title>span,html.fx-on .h-tag,html.fx-on .h-sub,html.fx-on .h-cta,html.fx-on .h-stats,
  html.fx-on .ev-hero .ev-title>span,html.fx-on .ev-lead,html.fx-on .ev-hero__facts,html.fx-on .ev-next,
  html.fx-on .lb-title>span,html.fx-on .lb-lead,html.fx-on .lb-stats,html.fx-on .hero .eyebrow,html.fx-on .hero-title>span,html.fx-on .hero-sub,html.fx-on .cr-page-hero>*{animation:none!important}
  .h-title__l2,.h-tag,.ev-title__b,.lb-title .bd-grad,.hero-title .t2,.cr-page-hero .grad-text,.fx-grad{animation:none!important}
  .fx-r{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  .fx-tilt,.fx-mag{transform:none!important;transition:none}
  .h-marq{overflow-x:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- Practice Arena sign-in gate ---------- */
body.pr-gated{overflow:hidden}
body.pr-gated .phase,body.pr-gated #bd-footer,body.pr-gated .global-search-bar{filter:blur(10px) saturate(1.1);opacity:.5;pointer-events:none;user-select:none;transition:filter .5s ease,opacity .5s ease}
.pr-gate{position:fixed;z-index:8800;left:0;right:0;top:calc(var(--top-h) + var(--safe-t));bottom:0;overflow:auto;display:grid;place-items:center;padding:24px 16px calc(var(--tabs-h) + var(--safe-b) + 24px);
  background:radial-gradient(70% 60% at 50% 40%,transparent,color-mix(in srgb,var(--bd-bg) 70%,transparent) 80%);opacity:0;transition:opacity .4s ease}
@media (min-width:1024px){.pr-gate{padding-bottom:40px}}
.pr-gate.is-in{opacity:1}
.pr-gate__card{position:relative;width:min(460px,100%);padding:30px 24px 22px;border-radius:28px;text-align:center;isolation:isolate;overflow:hidden;
  background:color-mix(in srgb,var(--bd-surface) 88%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 0 1px var(--bd-line-2),0 40px 90px -30px rgba(0,0,0,.8),0 0 80px -30px rgba(0,190,214,.5);
  transform:translateY(16px) scale(.98);transition:transform .7s var(--fx-ease)}
.pr-gate.is-in .pr-gate__card{transform:none}
.pr-gate__card::before{content:"";position:absolute;z-index:-1;left:-30%;right:-30%;top:-160px;height:320px;background:radial-gradient(closest-side,rgba(0,190,214,.3),rgba(76,175,80,.12) 55%,transparent)}
.pr-gate__t{margin:4px 0 0;font-size:clamp(1.5rem,5.4vw,1.9rem);line-height:1.15;font-weight:800;letter-spacing:-.025em;
  background:var(--fx-logo);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pr-gate__s{margin:10px auto 0;max-width:38ch;color:var(--bd-text-2);font-size:.96rem;line-height:1.55}
.pr-gate__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 18px}
.pr-gate__facts span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--bd-surface-2);border:1px solid var(--bd-line);font-size:.85rem;color:var(--bd-text-2)}
.pr-gate__facts svg{color:var(--bd-primary)}
.pr-gate__facts b{color:var(--bd-text);font-weight:750}
.pr-gate__facts i{font-style:normal}
.pr-gate__g{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-bottom:10px;border-radius:999px;border:0;cursor:pointer;
  background:#fff;color:#1f1f1f;font:inherit;font-weight:700;font-size:1rem;box-shadow:0 10px 30px -14px rgba(255,255,255,.5);transition:transform .25s var(--fx-ease),box-shadow .3s ease}
.pr-gate__g:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(255,255,255,.55)}
.pr-gate__g:active{transform:scale(.98)}
.pr-gate__g[disabled]{opacity:.6;cursor:wait}
:root[data-theme="light"] .pr-gate__g{box-shadow:0 0 0 1px rgba(16,32,64,.14),0 10px 26px -14px rgba(16,32,64,.4)}
.pr-gate__alt{margin:14px 0 0;font-size:.92rem;color:var(--bd-text-2)}
.pr-gate__alt a{color:var(--bd-primary);font-weight:700}
.pr-gate__err{margin-bottom:10px}
@media (prefers-reduced-motion:reduce){.pr-gate,.pr-gate__card{transition:none}}

/* ==========================================================================
   Solving a problem: a lit, living workspace
   ========================================================================== */
@property --fx-qa{syntax:'<angle>';inherits:false;initial-value:0deg}
body.pr-solving .q-main-col{position:relative;isolation:isolate}
body.pr-solving .q-main-col::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--fx-qa),transparent 0 55%,rgba(0,220,235,.85) 68%,rgba(76,175,80,.7) 76%,rgba(255,213,74,.8) 82%,transparent 92%);
  -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);
  animation:fxQa 9s linear infinite;opacity:.8}
@keyframes fxQa{to{--fx-qa:360deg}}
body.pr-solving .q-num-big{background:var(--fx-logo);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 14px rgba(0,190,214,.35))}
body.pr-solving .q-main-col input:focus,body.pr-solving .q-main-col textarea:focus{box-shadow:0 0 0 3px rgba(0,190,214,.22),0 0 30px -8px rgba(0,190,214,.7)!important;border-color:var(--bd-primary)!important}
/* solved: the card flares green-gold, then settles */
body.pr-win .q-main-col{animation:fxWin 1.5s cubic-bezier(.16,1,.3,1)}
body.pr-win .q-main-col::before{background:conic-gradient(from var(--fx-qa),#3CC47C,#FFD54A,#00C8DC,#3CC47C);opacity:1;animation-duration:1.2s}
@keyframes fxWin{0%{box-shadow:0 0 0 1px #3CC47C,0 0 0 0 rgba(60,196,124,.6)}40%{box-shadow:0 0 0 1px #3CC47C,0 0 0 18px rgba(60,196,124,0),0 0 90px -10px rgba(60,196,124,.8)}100%{}}
/* missed: a small, honest shake */
body.pr-miss .q-main-col{animation:fxMiss .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes fxMiss{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){body.pr-solving .q-main-col::before,body.pr-win .q-main-col,body.pr-miss .q-main-col{animation:none}}
html.bd-calm .bd-aurora{opacity:1}
.pr-gate__g,.pr-gate__g span{color:#1f1f1f!important;-webkit-text-fill-color:#1f1f1f}

/* ---------- 10. Torch v3: cut-out photographic torch ----------
   The torch is a transparent cut-out (assets/torch-v3.webp, 400×1149). It stands
   full height in the stage; a blurred, brightened copy of just the flame
   breathes over it so the fire feels alive without redrawing it. */
.h-torch{--ta:1.16;aspect-ratio:1/var(--ta)}
.h-torch>.h-torch__img,.h-torch>.h-torch__breath{position:absolute;top:1%;--tw:calc(98% * var(--ta) * .3481);width:var(--tw)!important;height:auto;left:calc(50% - var(--tw) / 2);max-width:none}
.h-torch__img{filter:drop-shadow(0 0 30px rgba(0,190,214,.22)) drop-shadow(0 26px 34px rgba(0,0,0,.42))!important}
:root[data-theme="light"] .h-torch__img{filter:drop-shadow(0 22px 26px rgba(13,26,46,.22))!important}
.h-torch__breath{z-index:2;aspect-ratio:400/1149;pointer-events:none;
  background:url(/assets/torch-v3.webp) center top/100% 100% no-repeat;
  -webkit-mask:linear-gradient(#000 26%,transparent 35%);mask:linear-gradient(#000 26%,transparent 35%);
  filter:blur(5px) saturate(1.35) brightness(1.25);mix-blend-mode:screen;opacity:0;transform-origin:50% 34%;
  animation:hRise 1.1s var(--ease) both,fxTorch 6s ease-in-out 1.1s infinite,fxBreath 3.2s ease-in-out 1.1s infinite}
@keyframes fxBreath{0%,100%{opacity:.18;scale:1 1}40%{opacity:.55;scale:1.025 1.05}70%{opacity:.3;scale:.99 1.02}}
:root[data-theme="light"] .h-torch__breath{mix-blend-mode:normal;filter:blur(6px) saturate(1.3);opacity:.25}
.h-torch__flame{top:1%;width:42%;height:34%}
.h-torch::before,.h-torch::after{inset:0 14% 52% 14%}
@media (max-width:899px){.h-torch{--ta:1.3;aspect-ratio:1/1.3!important;width:min(80vw,400px)!important}}
@media (min-width:600px) and (max-width:899px){.h-torch{width:min(52vw,420px)!important}}
html.bd-lite .h-torch__breath,html.bd-lowend .h-torch__breath{display:none}
@media (prefers-reduced-motion:reduce){.h-torch__breath{display:none}}

/* ==========================================================================
   11. Practice glass — every surface in the arena is a pane of smoked glass,
   so the cosmos keeps moving behind the work. Small cards are tinted only
   (no blur: cheap, and the stars stay crisp); the large reading surfaces
   get a real backdrop blur so text stays easy to read.
   ========================================================================== */
:root{--pg-fill:color-mix(in srgb,var(--bd-surface) 48%,transparent);--pg-fill-2:color-mix(in srgb,var(--bd-surface) 62%,transparent);
  --pg-line:rgba(255,255,255,.075);--pg-hi:rgba(255,255,255,.10);
  --pg-edge:inset 0 1px 0 var(--pg-hi),inset 0 0 0 1px var(--pg-line);
  --pg-drop:0 22px 50px -30px rgba(0,0,0,.75);--pg-blur:blur(16px) saturate(1.5)}
:root[data-theme="light"]{--pg-fill:rgba(255,255,255,.58);--pg-fill-2:rgba(255,255,255,.72);--pg-line:rgba(13,26,46,.08);--pg-hi:rgba(255,255,255,.9);--pg-drop:0 22px 50px -32px rgba(13,26,46,.35)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--pg-fill:rgba(255,255,255,.58);--pg-fill-2:rgba(255,255,255,.72);--pg-line:rgba(13,26,46,.08);--pg-hi:rgba(255,255,255,.9);--pg-drop:0 22px 50px -32px rgba(13,26,46,.35)}}

/* selection cards */
.mode-tab,.subj-card,.cat-card,.year-card,.topic-card{background:var(--pg-fill)!important;border-color:transparent!important;
  box-shadow:var(--pg-edge),var(--pg-drop);transition:transform .35s var(--fx-ease),box-shadow .35s var(--fx-ease),background-color .3s}
.mode-tab:hover,.subj-card:hover,.cat-card:hover,.year-card:hover,.topic-card:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 var(--pg-hi),inset 0 0 0 1px color-mix(in srgb,var(--c,var(--bd-primary)) 38%,transparent),0 26px 60px -30px color-mix(in srgb,var(--c,var(--bd-primary)) 55%,transparent)}
.mode-tab.active,.subj-card.sel,.cat-card.sel{background:color-mix(in srgb,var(--c,var(--bd-primary)) 10%,var(--pg-fill))!important;
  box-shadow:inset 0 1px 0 var(--pg-hi),inset 0 0 0 1.5px color-mix(in srgb,var(--c,var(--bd-primary)) 70%,transparent),0 0 0 4px color-mix(in srgb,var(--c,var(--bd-primary)) 10%,transparent),0 30px 70px -30px color-mix(in srgb,var(--c,var(--bd-primary)) 70%,transparent)!important}
.mode-tab:active,.subj-card:active,.cat-card:active,.year-card:active,.topic-card:active{transform:translateY(-1px) scale(.985)}

/* the paper: top bar, jumper, sidebar, main card, footer */
.paper-topbar{background:color-mix(in srgb,var(--bd-bg) 55%,transparent)!important;border-bottom-color:var(--pg-line)!important;
  -webkit-backdrop-filter:var(--pg-blur);backdrop-filter:var(--pg-blur)}
.q-jumper-wrap{background:transparent!important;border-color:var(--pg-line)!important}
.q-jumper-btn{background:var(--pg-fill)!important;border-color:transparent!important;box-shadow:var(--pg-edge)}
.q-sidebar{background:var(--pg-fill)!important;border-color:transparent!important;box-shadow:var(--pg-edge),var(--pg-drop);
  -webkit-backdrop-filter:var(--pg-blur);backdrop-filter:var(--pg-blur)}
.q-nav-item.active,.q-nav-item.cur{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bd-primary) 45%,transparent),0 0 24px -10px var(--bd-primary)}
.q-main-col{background:radial-gradient(80% 50% at 0% 0%,rgba(0,190,214,.09),transparent 60%),radial-gradient(60% 40% at 100% 100%,rgba(255,213,74,.05),transparent 60%),var(--pg-fill)!important;
  border-color:transparent!important;box-shadow:var(--pg-edge),0 40px 90px -50px rgba(0,190,214,.45),0 30px 60px -40px rgba(0,0,0,.7)!important;
  -webkit-backdrop-filter:var(--pg-blur);backdrop-filter:var(--pg-blur)}
:root[data-theme="light"] .q-main-col{background:radial-gradient(80% 50% at 0% 0%,rgba(0,190,214,.08),transparent 60%),var(--pg-fill)!important;box-shadow:var(--pg-edge),var(--pg-drop)!important}
.q-footer{background:color-mix(in srgb,var(--bd-bg) 40%,transparent)!important;border-top-color:var(--pg-line)!important;-webkit-backdrop-filter:var(--pg-blur);backdrop-filter:var(--pg-blur)}
.q-stmt{border-left:0!important;position:relative;padding-left:22px!important}
.q-stmt::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(#00C8DC,#3CC47C 55%,#FFD54A);box-shadow:0 0 14px rgba(0,200,220,.45)}
.q-given,.attempt-tracker,.hint-box{background:color-mix(in srgb,var(--bd-bg) 35%,transparent)!important;border-color:var(--pg-line)!important;box-shadow:inset 0 1px 0 var(--pg-hi)}
:root[data-theme="light"] .q-given,:root[data-theme="light"] .attempt-tracker,:root[data-theme="light"] .hint-box{background:rgba(255,255,255,.55)!important}
.ans-input{background:color-mix(in srgb,var(--bd-bg) 45%,transparent)!important;border-color:var(--pg-line)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
:root[data-theme="light"] .ans-input{background:rgba(255,255,255,.7)!important;box-shadow:inset 0 1px 2px rgba(13,26,46,.06)}
.ans-input:focus{border-color:var(--bd-primary)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bd-primary) 16%,transparent),0 0 34px -10px var(--bd-primary)!important}
.hint-btn{-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .2s,box-shadow .25s,transform .2s}
.hint-btn:hover{box-shadow:0 0 0 1px color-mix(in srgb,#A98BFF 50%,transparent),0 10px 30px -12px rgba(169,139,255,.7);transform:translateY(-1px)}

/* answer options: lit rows with a key chip */
.mcq-options{gap:10px!important}
.mcq-opt{position:relative;align-items:center!important;gap:14px!important;padding:14px 16px!important;border-radius:16px!important;
  background:color-mix(in srgb,var(--bd-bg) 38%,transparent)!important;border:0!important;box-shadow:inset 0 1px 0 var(--pg-hi),inset 0 0 0 1px var(--pg-line);
  transition:transform .25s var(--fx-ease),box-shadow .25s var(--fx-ease),background-color .25s!important}
:root[data-theme="light"] .mcq-opt{background:rgba(255,255,255,.62)!important}
.mcq-opt-key{width:34px!important;height:34px!important;border-radius:11px!important;border:0!important;flex:none;font-family:var(--bd-font-display)!important;font-weight:400!important;font-size:1.15rem!important;letter-spacing:.04em;
  color:var(--bd-text-2)!important;background:color-mix(in srgb,var(--bd-text) 7%,transparent)!important;box-shadow:inset 0 0 0 1px var(--pg-line);transition:background .25s,color .25s,box-shadow .25s;margin:0!important}
.mcq-opt:hover:not([disabled]){transform:translateX(3px)!important;box-shadow:inset 0 1px 0 var(--pg-hi),inset 0 0 0 1px color-mix(in srgb,var(--bd-primary) 45%,transparent),0 14px 34px -20px color-mix(in srgb,var(--bd-primary) 80%,transparent)}
.mcq-opt:hover:not([disabled]):not(.selected):not(.correct):not(.wrong) .mcq-opt-key{color:var(--bd-primary)!important}
.mcq-opt.selected{background:linear-gradient(100deg,color-mix(in srgb,var(--bd-primary) 16%,transparent),color-mix(in srgb,var(--bd-primary) 4%,transparent) 70%),color-mix(in srgb,var(--bd-bg) 38%,transparent)!important;
  box-shadow:inset 0 0 0 1.5px var(--bd-primary),0 0 0 4px color-mix(in srgb,var(--bd-primary) 12%,transparent),0 16px 40px -18px color-mix(in srgb,var(--bd-primary) 85%,transparent)!important}
.mcq-opt.selected .mcq-opt-key{background:linear-gradient(135deg,#00C8DC,#13A89A)!important;color:#fff!important;box-shadow:0 6px 16px -6px rgba(0,200,220,.9)}
.mcq-opt.correct{background:linear-gradient(100deg,rgba(60,196,124,.18),rgba(60,196,124,.04) 70%),color-mix(in srgb,var(--bd-bg) 38%,transparent)!important;box-shadow:inset 0 0 0 1.5px #3CC47C,0 16px 40px -18px rgba(60,196,124,.8)!important}
.mcq-opt.correct .mcq-opt-key{background:linear-gradient(135deg,#3CC47C,#1E9E5A)!important;color:#fff!important}
.mcq-opt.wrong{background:linear-gradient(100deg,rgba(255,77,109,.16),rgba(255,77,109,.03) 70%),color-mix(in srgb,var(--bd-bg) 38%,transparent)!important;box-shadow:inset 0 0 0 1.5px #FF4D6D!important}
.mcq-opt.wrong .mcq-opt-key{background:#FF4D6D!important;color:#fff!important}

/* phones and low-power devices: keep the glass, drop the expensive blur on the big panes */
@media (max-width:719px){
  .q-sidebar,.q-main-col{-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
  .mcq-opt{padding:13px 14px!important}
  .mode-tab:hover,.subj-card:hover,.cat-card:hover,.year-card:hover,.topic-card:hover{transform:none}
}
html.bd-lite,html.bd-lowend{--pg-fill:color-mix(in srgb,var(--bd-surface) 82%,transparent);--pg-blur:none}
html.bd-lite .q-main-col,html.bd-lowend .q-main-col,html.bd-lite .q-sidebar,html.bd-lowend .q-sidebar{-webkit-backdrop-filter:none;backdrop-filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--pg-fill:color-mix(in srgb,var(--bd-surface) 86%,transparent)}}
@media (prefers-reduced-motion:reduce){.mode-tab,.subj-card,.cat-card,.year-card,.topic-card,.mcq-opt{transition:none!important}}

/* theme switch: a circle of the new theme grows from the button */
html.bd-vt-theme::view-transition-old(root),html.bd-vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.bd-vt-theme::view-transition-old(root){z-index:1}
html.bd-vt-theme::view-transition-new(root){z-index:2}
html.bd-vt-theme .bd-tabs{view-transition-name:none}

/* ==========================================================================
   12. Phones: question list sheet, solid footer, cheaper glass
   ========================================================================== */
@media (max-width:1023.98px){
  /* the sheet lives inside the paper, whose stacking layer sat under the dimmer — lift it while open */
  body:has(.q-sidebar.mob-open) .phase.active,body:has(.q-sidebar.mob-open) .paper-wrap{z-index:auto!important}
  .q-sidebar{display:block!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:1200!important;
    max-height:min(78vh,calc(100dvh - 96px))!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    border-radius:26px 26px 0 0!important;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px))!important;
    background:color-mix(in srgb,var(--bd-surface) 97%,var(--bd-bg))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    box-shadow:0 -1px 0 var(--pg-hi),0 -30px 80px -20px rgba(0,0,0,.7)!important;
    transform:translateY(105%)!important;visibility:hidden;transition:transform .42s cubic-bezier(.16,1,.3,1),visibility 0s linear .42s!important}
  .q-sidebar.mob-open{transform:none!important;visibility:visible;transition:transform .42s cubic-bezier(.16,1,.3,1),visibility 0s!important}
  .q-sidebar::before{content:"";display:block;width:44px;height:5px;border-radius:5px;margin:2px auto 14px;background:color-mix(in srgb,var(--bd-text) 22%,transparent)}
  .q-sidebar .q-nav-item{min-height:48px}
  .paper-topbar .mob-q-nav-btn{display:inline-flex!important;align-items:center;gap:6px}
  .mob-sidebar-overlay{display:block!important;z-index:1150!important;background:rgba(3,8,18,.55)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    opacity:0;pointer-events:none;transition:opacity .3s}
  .mob-sidebar-overlay.open{opacity:1;pointer-events:auto}
  :root[data-theme="light"] .mob-sidebar-overlay{background:rgba(13,26,46,.32)!important}
  /* footer: solid enough that the answers never show through it */
  .q-footer{background:color-mix(in srgb,var(--bd-surface) 94%,var(--bd-bg))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    box-shadow:0 -1px 0 var(--pg-line),0 -18px 40px -24px rgba(0,0,0,.6)}
  .q-footer .q-ctr{flex:none;min-width:3.6em;text-align:center;white-space:nowrap}
}
/* touch devices: the big panes stop blurring the moving sky (the blur is what costs frames on phones) */
@media (hover:none),(max-width:719px){
  :root{--pg-fill:color-mix(in srgb,var(--bd-surface) 74%,transparent)}
  :root[data-theme="light"]{--pg-fill:rgba(255,255,255,.8)}
  .q-main-col,.mode-tab,.subj-card,.cat-card,.year-card,.topic-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .paper-topbar{-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;background:color-mix(in srgb,var(--bd-bg) 82%,transparent)!important}
  .paper-info .paper-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:359px){
  .bd-actions{gap:0}
  .bd-actions .bd-icon-btn{width:38px;height:40px}
  .bd-lang{padding-inline:9px!important;margin-inline:2px!important}
}
@media (max-width:1023.98px){
  .bd-top{background:color-mix(in srgb,var(--bd-bg) 88%,transparent)!important}
  .bd-tabs{background:color-mix(in srgb,var(--bd-bg) 90%,transparent)}
}
.submit-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;line-height:1.2!important}

/* torch glows without blend modes (blend modes repaint the whole stage every frame) */
.h-torch::before,.h-torch::after{mix-blend-mode:normal!important;will-change:transform,opacity}
:root[data-theme="light"] .h-torch::before,:root[data-theme="light"] .h-torch::after{opacity:.35}
.h-torch__breath{mix-blend-mode:normal;will-change:transform,opacity}
.h-torch__halo,.h-torch__flame{will-change:transform,opacity}
@media (hover:none),(max-width:719px){.h-torch__img{filter:drop-shadow(0 20px 26px rgba(0,0,0,.4))!important}:root[data-theme="light"] .h-torch__img{filter:drop-shadow(0 18px 22px rgba(13,26,46,.2))!important}}

/* ==========================================================================
   13. Smoothness: keep every running animation on the compositor
   (transform / opacity only), so scrolling never waits on repaints.
   ========================================================================== */
/* the logo's breathing glow: a soft light behind the mark instead of an animated filter */
.bd-brand{position:relative;isolation:isolate}
.bd-brand img{animation:none!important;filter:drop-shadow(0 0 9px rgba(0,190,214,.5))}
.bd-brand::before{content:"";position:absolute;z-index:-1;left:-8px;top:50%;width:54px;height:54px;margin-top:-27px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,190,214,.55),rgba(76,175,80,.22) 60%,transparent);opacity:.35;animation:fxLogoGlow 4.2s ease-in-out infinite;will-change:opacity,transform}
@keyframes fxLogoGlow{50%{opacity:.9;transform:scale(1.18)}}
:root[data-theme="light"] .bd-brand::before{opacity:.2}
/* "live" dots blink with opacity, and their ring is a scaled pseudo-element */
.bd-live,.ev-pulse,.hb-live,.h-hubs__dot{position:relative;animation:none!important;box-shadow:none!important}
.bd-live::after,.ev-pulse::after,.hb-live::after,.h-hubs__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;pointer-events:none;
  animation:fxRing 1.8s cubic-bezier(.16,1,.3,1) infinite;will-change:transform,opacity}
.bd-live{color:var(--bd-red)}.hb-live{color:#F0524F}.h-hubs__dot{color:#25D366}
@keyframes fxRing{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.6);opacity:0}}
.hb-target b{animation:none!important}
@media (prefers-reduced-motion:reduce){.bd-brand::before,.bd-live::after,.ev-pulse::after,.hb-live::after,.h-hubs__dot::after{animation:none}}
/* touch devices: the colour flow across headings plays twice, then rests (it repaints large text every frame) */
@media (hover:none){
  html.fx-on .h-title__l2,html.fx-on .h-tag,html.fx-on .ev-title__b,html.fx-on .lb-title .bd-grad,html.fx-on .hero-title .t2,
  .h-title__l2,.h-tag,.ev-title__b,.lb-title .bd-grad,.hero-title .t2,.cr-page-hero .grad-text,.fx-grad{animation:fxIn 1.1s var(--fx-ease) both,fxFlow 9s linear 2!important}
  .h-bento .h-feat,.h-soc,.h-hub,.bd-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* touch devices: reveals are a pure fade-and-rise (no blur or letter-spacing, which repaint every frame while you scroll) */
@media (hover:none){
  .fx-r{filter:none!important;transition-property:opacity,transform!important;transition-duration:.7s!important}
  .bd-h2.fx-r,.s-title.fx-r{letter-spacing:.01em!important;transform:translate3d(0,.4em,0)}
  .bd-h2.fx-r.fx-in,.s-title.fx-r.fx-in{filter:var(--fx-glow)!important}
}
/* the question jumper fades at its edges so a cut-off number reads as "scroll for more" */
.q-jumper-scroll{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);scroll-padding-inline:16px}

/* ==========================================================================
   14. No-lag rules
   Touch screens (html.bd-touch) always get the light version of the costly
   effects; html.bd-eco (Light effects — chosen in More, or switched on
   automatically when a device can't keep up) goes further on any device.
   ========================================================================== */
/* touch screens: no live blurs (each one re-blurs the moving sky every frame) */
html.bd-touch *,html.bd-touch *::before,html.bd-touch *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.bd-touch .bd-top{background:color-mix(in srgb,var(--bd-bg) 94%,transparent)!important}
html.bd-touch .bd-tabs{background:color-mix(in srgb,var(--bd-bg) 96%,transparent)!important}
html.bd-touch .bd-scrim{background:rgba(3,8,18,.62)!important}
:root[data-theme="light"].bd-touch .bd-scrim{background:rgba(13,26,46,.38)!important}
html.bd-touch .bd-sheet,html.bd-touch .bd-modal,html.bd-touch .bd-menu{background:var(--bd-surface)!important}
html.bd-touch .bd-grain{display:none!important}
/* touch screens: glows stop being live filters */
html.bd-touch .h-torch__img{filter:none!important}
html.bd-touch .h-torch__halo,html.bd-touch .h-torch__flame{filter:none!important}
html.bd-touch .h-torch__breath{display:none!important}
html.bd-touch .bd-aurora i{will-change:auto}
/* touch screens: animated gradient borders and flowing text gradients rest (they repaint every frame) */
html.bd-touch .h-feat--wide::after,html.bd-touch .h-join::after,html.bd-touch body.pr-solving .q-main-col::before,html.bd-touch .bd-grad{animation:none!important}
html.bd-touch .bd-h2,html.bd-touch .s-title,html.bd-touch .h-stats dd,html.bd-touch .lb-stat b,html.bd-touch .ev-fact b,html.bd-touch .pf-stat b,html.bd-touch .stat-val{filter:none!important}
html.bd-touch .h-title__l1,html.bd-touch .ev-title__a,html.bd-touch .lb-title>span:first-child,html.bd-touch .hero-title .t1{filter:none!important}

/* Light effects (any device) */
html.bd-eco *,html.bd-eco *::before,html.bd-eco *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.bd-eco .bd-grain,html.bd-eco .h-torch__fx,html.bd-eco .h-torch__breath{display:none!important}
html.bd-eco .bd-aurora i{animation:none!important;will-change:auto}
html.bd-eco .bd-top{background:color-mix(in srgb,var(--bd-bg) 95%,transparent)!important}
html.bd-eco .bd-tabs{background:var(--bd-bg)!important}
html.bd-eco .h-torch__img,html.bd-eco .h-torch__halo,html.bd-eco .h-torch__flame,html.bd-eco .bd-h2,html.bd-eco .s-title,html.bd-eco .h-stats dd,html.bd-eco .lb-stat b,html.bd-eco .pf-stat b,
html.bd-eco .h-title__l1,html.bd-eco .h-title__l2,html.bd-eco .h-tag,html.bd-eco .ev-title__a,html.bd-eco .ev-title__b,html.bd-eco .lb-title span,html.bd-eco .hero-title span,html.bd-eco .bd-brand img{filter:none!important}
html.bd-eco .h-title__l2,html.bd-eco .h-tag,html.bd-eco .ev-title__b,html.bd-eco .lb-title .bd-grad,html.bd-eco .hero-title .t2,html.bd-eco .cr-page-hero .grad-text,html.bd-eco .fx-grad,html.bd-eco .bd-grad,
html.bd-eco.fx-on .h-title__l2,html.bd-eco.fx-on .h-tag,html.bd-eco.fx-on .ev-title__b,html.bd-eco.fx-on .lb-title .bd-grad,html.bd-eco.fx-on .hero-title .t2{animation:none!important;background-position:180% 0,30% 50%!important}
html.bd-eco .h-feat--wide::after,html.bd-eco .h-join::after,html.bd-eco body.pr-solving .q-main-col::before,html.bd-eco .h-pres__img::before,html.bd-eco .h-pres__frame::before,
html.bd-eco .h-torch::before,html.bd-eco .h-torch::after,html.bd-eco .h-torch__halo,html.bd-eco .h-torch__flame,html.bd-eco .hb-target i,html.bd-eco .hb-lang i,html.bd-eco .h-soc__ic,html.bd-eco .h-soc__ic::before,html.bd-eco .h-soc__ic::after,
html.bd-eco .bd-brand::before,html.bd-eco .pf-badge.on::after,html.bd-eco .pf-hero__av::before{animation:none!important}
html.bd-eco .fx-r{filter:none!important;transition-property:opacity,transform!important;transition-duration:.5s!important}
html.bd-eco .q-main-col,html.bd-eco .q-sidebar,html.bd-eco .mode-tab,html.bd-eco .subj-card,html.bd-eco .cat-card,html.bd-eco .year-card,html.bd-eco .topic-card{--pg-fill:color-mix(in srgb,var(--bd-surface) 86%,transparent)}