/* v46: five clean layers, gel only on buttons, real wet-glass on Atmosphere, calmer weather, clean gel buttons */
.s-glass .l1{--z:0}.s-glass .l2{--z:70}.s-glass .l3{--z:140}.s-glass .l5{--z:210}.s-glass .l7{--z:280}
.s-glass[data-pk] .layer-stage.free .stack{translate:none!important;scale:1!important}
.layer-stage.hl .lyr:not(.on){opacity:.16!important}
.layer-stage.hl .lyr.l7:not(.on) .pane>*{opacity:0!important}
.layer-stage.hl .lyr.l3:not(.on) .pane>*{opacity:0!important}
.layer-stage.hl .lyr.l2:not(.on) .wxp{opacity:0!important}

/* 02 Atmosphere: the wet-glass canvas replaces the old streak canvas and the dotted snow pattern */
.s-glass .lyr.l2 .pane{overflow:hidden}
.s-glass .lyr.l2 .pane::after{display:none!important}
.s-glass .lyr.l2 .wxp{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.s-glass[data-atm="1"] .lyr.l2 .wxp{opacity:1}
.s-glass .lyr.l2 .pane{transition:background .9s ease}
.s-glass[data-wx=fog] .lyr.l2 .pane,.s-glass[data-wx=snow] .lyr.l2 .pane{background:linear-gradient(180deg,rgba(214,226,246,.16),rgba(214,226,246,.05))}

/* 03 Blur: sharp left, frosted right, one moving line */
.s-glass .lyr.l3 .pane{position:absolute;overflow:hidden}
.s-glass .lyr.l3 .b3{position:absolute;inset:0;background:url(assets/glass-sky.webp) center/cover}
.s-glass .lyr.l3 .b3-frost{filter:blur(10px) saturate(1.15) brightness(1.08);transform:scale(1.12);clip-path:inset(0 0 0 50%);animation:b3Wipe 8s ease-in-out infinite alternate}
.s-glass .lyr.l3 .b3-frost::after{content:"";position:absolute;inset:0;background:rgba(255,246,226,.22)}
.s-glass .lyr.l3 .b3-line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,rgba(255,236,190,.95) 12%,rgba(255,236,190,.95) 88%,transparent);box-shadow:0 0 12px rgba(255,214,130,.8);animation:b3Line 8s ease-in-out infinite alternate}
.s-glass .lyr.l3 .b3-t{position:absolute;bottom:7%;font:700 clamp(8px,.9vw,10.5px)/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:rgba(10,7,3,.62);color:#ffe9b3;white-space:nowrap}
.s-glass .lyr.l3 .b3-t1{left:4%}.s-glass .lyr.l3 .b3-t2{right:4%}
@keyframes b3Wipe{from{clip-path:inset(0 0 0 32%)}to{clip-path:inset(0 0 0 68%)}}
@keyframes b3Line{from{left:32%}to{left:68%}}
.s-glass .stack.asm .lyr.l3 :is(.b3,.b3-line,.b3-t){display:none}

/* 05 Your content: everything stays inside the pane; gel only on the buttons */
.s-glass .lyr.l7 .pane{container-type:inline-size;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;gap:2.2cqw!important;padding:5.5cqw 6cqw 5cqw!important;overflow:hidden}
.s-glass .lyr.l7 .tiny{font-size:max(8px,2cqw);margin:0!important;letter-spacing:.14em}
.s-glass .lyr.l7 b{font-size:max(16px,6.2cqw)!important;line-height:1.02}
.s-glass .lyr.l7 .l6p{font-size:max(9px,2.7cqw)!important;max-width:none!important;margin:0}
.s-glass .lyr.l7 .l7-row{display:flex;align-items:center;gap:4cqw;margin-top:auto}
.s-glass .lyr.l7 .glass-pill{margin:0!important}
.s-glass .l7-sw{position:relative;width:11cqw;height:6cqw;border-radius:99px;background:linear-gradient(180deg,#8a5a12,#d9a53c);box-shadow:inset 0 2px 3px rgba(0,0,0,.4),0 0 14px rgba(255,200,90,.35)}
.s-glass .l7-sw b{position:absolute!important;left:5%;top:9%;width:5cqw!important;height:5cqw!important;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff,#fff3d0 60%,#dcb25a);box-shadow:0 2px 5px rgba(0,0,0,.45);font-size:0!important;animation:l7sw 3.2s ease-in-out infinite}
@keyframes l7sw{0%,35%{transform:none}55%,90%{transform:translateX(4.6cqw)}100%{transform:none}}
.s-glass .stack.asm .lyr.l7 .pane{padding-top:5.5cqw!important}
.s-glass[data-pk="4"] .gl-pick.pk-rim{display:none!important}
.s-glass[data-pk="3"] .gl-pick.pk-rim{display:flex!important}
.lyr.l7.on .glass-pill{animation:gcPress 2.4s cubic-bezier(.3,1.5,.5,1) infinite}

/* Bespoke Gel buttons: colour only, light text, no black */
.s-glass .lyr.l7 .glass-pill,
.gx .ex-card:is([data-m=glass],[data-m=clear]) .m-btn,
.bd-stage[data-g=gel] .bd-go{
  --gb:var(--b,232,184,78);
  color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.5);font-weight:700;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 46%) top/100% 100% no-repeat,
    linear-gradient(180deg,rgb(var(--gb)) 0,color-mix(in srgb,rgb(var(--gb)) 62%,#000) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 6px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,rgb(var(--gb)) 55%,#000),0 6px 12px -5px rgba(0,0,0,.55)!important}
.s-glass .lyr.l7 .glass-pill{--gb:196,132,30}
.s-glass .lyr.l7 .glass-pill::before{display:none}

/* weather lab card: bright serif accent, light button text */
.wxl-card b em{color:#fff4cf!important;-webkit-text-fill-color:#fff4cf!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;text-shadow:0 2px 14px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.4)!important}
.wxl-card .wxl-go,.wxl-card #wxlPill,.wxl-card button,.wxl-card .glass-pill{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.wxl-go.gel-btn,.wxl-card .gel-btn{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%) top/100% 100% no-repeat,linear-gradient(180deg,#d9a03a,#a8701a)!important;color:#fff!important}

/* ===== Glass Collection tile: looped stack (not scroll-driven) ===== */
@property --s{syntax:'<number>';initial-value:0;inherits:true}
.tg2{perspective:900px;background:#0a0704}
.tg2-st{position:absolute;inset:0;transform-style:preserve-3d;animation:tg2Go 10s cubic-bezier(.45,0,.25,1) infinite}
@keyframes tg2Go{0%,10%{--s:0;transform:rotateX(0) rotateZ(0) scale(1)}34%,66%{--s:1;transform:rotateX(56deg) rotateZ(-24deg) scale(.74)}90%,100%{--s:0;transform:rotateX(0) rotateZ(0) scale(1)}}
.tg2-l{position:absolute;inset:9% 8%;border-radius:18px;overflow:hidden;transform:translateZ(calc(var(--s)*var(--z)*1px));box-shadow:0 0 0 1px rgba(255,226,160,.28)}
.tg2-sky{--z:0;inset:0;border-radius:0;background:url(assets/glass-sky.webp) center/cover;box-shadow:none}
.tg2-air{--z:34;background:linear-gradient(180deg,rgba(150,175,220,.10),rgba(150,175,220,.03))}
.tg2-air i{position:absolute;top:-10%;width:2px;height:16%;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(220,232,255,.75));transform:rotate(12deg);animation:tg2Rain 1.3s linear infinite}
.tg2-air i:nth-child(1){left:8%;animation-delay:-.1s}.tg2-air i:nth-child(2){left:20%;animation-delay:-.7s}.tg2-air i:nth-child(3){left:33%;animation-delay:-.3s}.tg2-air i:nth-child(4){left:46%;animation-delay:-1s}.tg2-air i:nth-child(5){left:58%;animation-delay:-.5s}.tg2-air i:nth-child(6){left:70%;animation-delay:-.9s}.tg2-air i:nth-child(7){left:82%;animation-delay:-.2s}.tg2-air i:nth-child(8){left:92%;animation-delay:-.6s}
@keyframes tg2Rain{to{transform:translate(-12px,130cqh) rotate(12deg)}}
.tg2-blur{--z:68;background:linear-gradient(150deg,rgba(255,244,220,.20),rgba(255,244,220,.06));-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.tg2-edge{--z:102;background:linear-gradient(150deg,rgba(255,240,205,.08),rgba(255,240,205,.01));box-shadow:inset 0 2px 0 rgba(255,240,200,.7),inset 0 0 0 1.5px rgba(255,226,160,.8),0 0 24px -4px rgba(227,174,70,.6)}
.tg2-txt{--z:136;display:flex;flex-direction:column;justify-content:center;gap:2.4cqw;padding:0 7%;color:#fff6e0;box-shadow:none;background:none}
.tg2-txt small{font-size:clamp(6px,2cqw,9px);letter-spacing:.2em;color:#f0d28a;font-weight:700}
.tg2-txt b{font-size:clamp(14px,5.6cqw,26px);line-height:1.05;text-shadow:0 2px 10px #000a}
.tg2-txt em{font-family:"BBB Serif",Georgia,serif;font-weight:400;color:#ffe9a8}
.tg2-btn{align-self:flex-start;font-size:clamp(8px,2.6cqw,12px);font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);padding:.6em 1.3em;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%) top/100% 100% no-repeat,linear-gradient(180deg,#d9a03a,#a8701a);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 12px -5px #000a;animation:tg2Press 10s infinite}
@keyframes tg2Press{0%,70%{transform:none}74%{transform:scale(1.04,.88) translateY(2px)}80%,100%{transform:none}}
.tg2-cap{position:absolute;left:12px;bottom:10px;display:flex;gap:6px;opacity:0;animation:tg2Cap 10s infinite}
@keyframes tg2Cap{0%,24%{opacity:0}36%,62%{opacity:1}74%,100%{opacity:0}}
.tg2-cap u{text-decoration:none;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#f7f1e4;background:rgba(5,4,3,.6);border:1px solid rgba(227,194,122,.35);padding:3px 8px;border-radius:99px}

/* ===== Keep / Change / Check: lock unlocks then locks, pencil writes, check only draws forward ===== */
.kcc .kcc-s{animation:none!important;transition:none}
.kcc .s1{animation:kS1 8s infinite!important}.kcc .s2{animation:kS2 8s infinite!important}.kcc .s3{animation:kS3 8s infinite!important}
@keyframes kS1{0%,4%{border-color:rgba(227,194,122,.3);background:rgba(255,236,190,.05);box-shadow:none;transform:none}8%,28%{border-color:#f3d98f;background:rgba(227,174,70,.2);box-shadow:0 0 18px rgba(227,174,70,.35);transform:translateY(-2px)}34%,90%{border-color:rgba(227,194,122,.3);background:rgba(255,236,190,.05);box-shadow:none;transform:none}96%,100%{opacity:0}}
@keyframes kS2{0%,30%{border-color:rgba(227,194,122,.3);background:rgba(255,236,190,.05);box-shadow:none;transform:none}36%,58%{border-color:#f3d98f;background:rgba(227,174,70,.2);box-shadow:0 0 18px rgba(227,174,70,.35);transform:translateY(-2px)}64%,90%{border-color:rgba(227,194,122,.3);background:rgba(255,236,190,.05);box-shadow:none;transform:none}96%,100%{opacity:0}}
@keyframes kS3{0%,60%{border-color:rgba(227,194,122,.3);background:rgba(255,236,190,.05);box-shadow:none;transform:none}66%,90%{border-color:#f3d98f;background:rgba(227,174,70,.2);box-shadow:0 0 18px rgba(227,174,70,.35);transform:translateY(-2px)}96%,100%{opacity:0}}
.kcc .s1,.kcc .s2,.kcc .s3{opacity:1}
@keyframes kFade{0%{opacity:0}4%,90%{opacity:1}97%,100%{opacity:0}}
.kcc .s1 .sh{transform-box:fill-box;transform-origin:0 100%;animation:kLock 8s infinite}
@keyframes kLock{0%,6%{transform:translateY(-4px) rotate(-26deg)}20%{transform:translateY(-4px) rotate(-26deg)}26%{transform:translateY(1px) rotate(0)}29%,100%{transform:none}}
.kcc .s2 .pn{animation:kPen 8s infinite}
@keyframes kPen{0%,34%{transform:translate(0,0)}38%{transform:translate(1px,2px)}42%{transform:translate(-1px,-1px)}46%{transform:translate(2px,1px)}50%{transform:translate(0,-1px)}54%{transform:translate(2px,2px)}58%,100%{transform:none}}
.kcc .s2 .wl{stroke-dasharray:26;stroke-dashoffset:26;animation:kWrite 8s infinite}
@keyframes kWrite{0%,34%{stroke-dashoffset:26}56%,92%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:0;opacity:0}}
.kcc .s3 .ck{stroke-dasharray:30;stroke-dashoffset:30;animation:kCheck 8s infinite!important}
@keyframes kCheck{0%,64%{stroke-dashoffset:30}76%,92%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:0;opacity:0}}
.kcc-bar{overflow:hidden}
.kcc-bar::after{width:100%!important;transform-origin:0 50%;animation:kBar 8s ease-in-out infinite!important}
@keyframes kBar{0%{transform:scaleX(0);opacity:0}4%{transform:scaleX(0);opacity:1}88%{transform:scaleX(1);opacity:1}96%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}

/* ===== kit tiles: no overlap ===== */
.kb-g{grid-template-rows:repeat(2,minmax(0,1fr))!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.kb .kg{aspect-ratio:auto!important;min-height:0!important;overflow:hidden;padding:4%}
.kb .kg svg{height:40%!important}

/* ===== Create with ChatGPT: looped mini-demo ===== */
.ws2{position:absolute!important;inset:0;display:flex;flex-direction:column;gap:5%;width:auto!important;height:auto!important;margin:0!important;padding:6% 7%;background:radial-gradient(70% 80% at 80% 10%,rgba(164,127,52,.3),transparent 70%),#0a0704;color:#fff6e0;container-type:inline-size;justify-content:center}
.ws2-top{display:flex;flex-direction:column;gap:6px}
.ws2-st{display:flex;gap:5px;flex-wrap:wrap}
.ws2-st u{text-decoration:none;font-size:clamp(7px,2.1cqw,10px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid rgba(227,194,122,.3);color:#b9ad92;animation:wsChip 9s infinite}
.ws2-st .b{animation-delay:2.2s}.ws2-st .c{animation-delay:4.4s}.ws2-st .d{animation-delay:6.4s}
@keyframes wsChip{0%,4%{color:#1a1204;background:#f0cf86;border-color:#f0cf86}22%,100%{color:#b9ad92;background:none;border-color:rgba(227,194,122,.3)}}
.ws2-in{display:flex;align-items:center;gap:2px;padding:3.2cqw 4cqw;border-radius:12px;border:1px solid rgba(227,194,122,.35);background:rgba(255,236,190,.06);font-size:clamp(11px,3.8cqw,16px);min-height:2.4em}
.ws2-ty{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:wsType 9s steps(26,end) infinite}
@keyframes wsType{0%{width:0}22%,92%{width:12.6em}97%,100%{width:0}}
.ws2-caret{width:2px;height:1.1em;background:#f0cf86;animation:wsBlink .8s steps(1) infinite}
@keyframes wsBlink{50%{opacity:0}}
.ws2-out{display:grid;gap:7px;padding:4cqw;border-radius:12px;background:linear-gradient(160deg,rgba(255,236,190,.12),rgba(255,236,190,.03));border:1px solid rgba(227,194,122,.3);opacity:0;transform:translateY(8px);animation:wsOut 9s infinite}
@keyframes wsOut{0%,24%{opacity:0;transform:translateY(8px)}34%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.ws2-out small{font-size:clamp(7px,2cqw,9.5px);letter-spacing:.16em;color:#e3c27a;font-weight:700}
.ws2-out span{display:block;height:6px;border-radius:4px;background:linear-gradient(90deg,rgba(255,236,190,.55),rgba(255,236,190,.15));transform-origin:0 50%;transform:scaleX(0);animation:wsLine 9s infinite}
.ws2-out .l1{width:92%}.ws2-out .l2{width:78%;animation-delay:.3s}.ws2-out .l3{width:60%;animation-delay:.6s}
@keyframes wsLine{0%,30%{transform:scaleX(0)}46%,100%{transform:scaleX(1)}}
.ws2-ok{display:inline-flex;align-items:center;gap:6px;font-size:clamp(9px,3cqw,13px);color:#bff0c8;opacity:0;animation:wsOk 9s infinite}
.ws2-ok svg{width:1.3em;fill:none;stroke:#7fe0a0;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:wsCk 9s infinite}
@keyframes wsOk{0%,60%{opacity:0}66%,90%{opacity:1}97%,100%{opacity:0}}
@keyframes wsCk{0%,62%{stroke-dashoffset:24}72%,92%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.tg2-st,.ws2 *,.kcc *{animation:none!important}.ws2-ty{width:auto}.ws2-out,.ws2-ok{opacity:1;transform:none}.ws2-out span{transform:none}.kcc .ck,.kcc .wl{stroke-dashoffset:0!important}}

/* ===== Comparison chart ===== */
.tc2{overflow:hidden}
.tc2 .tc-h{align-items:end;padding-block:18px 14px}
.tc-c{display:grid!important;justify-items:center;gap:4px;text-align:center}
.tc-c b{font-size:clamp(14px,1.5vw,18px);color:#fff6e0}
.tc-c small{font-size:11px;color:#b9ad92;letter-spacing:.04em}
.tc-logo{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;border:1px solid rgba(227,194,122,.45);box-shadow:inset 0 1px 0 rgba(255,244,214,.5)}
.tc-logo img{width:34px;height:34px;object-fit:contain}
.c-b .tc-logo{background:linear-gradient(150deg,rgba(255,244,220,.2),rgba(255,244,220,.05));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.c-d .tc-logo{background:linear-gradient(150deg,rgba(150,110,230,.55),rgba(60,30,110,.5));border-color:rgba(190,160,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 18px -4px rgba(150,110,230,.7)}
.c-a .tc-logo{background:linear-gradient(180deg,rgba(120,150,210,.5),rgba(30,45,90,.55));border-color:rgba(160,190,240,.6)}
.c-a .tc-logo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(104deg,transparent 0 6px,rgba(220,232,255,.5) 6px 7px,transparent 7px 13px);-webkit-mask:linear-gradient(#000,transparent 80%);mask:linear-gradient(#000,transparent 80%);animation:tgRain 1s linear infinite}
.tc-m{display:inline-flex;gap:3px;margin-right:8px;vertical-align:middle}
.tc-m i{width:14px;height:6px;border-radius:3px;background:rgba(255,236,190,.16)}
.tc-m i:nth-child(-n+1){background:#f0cf86}
.tc-m[style*="--n:2"] i:nth-child(-n+2),.tc-m[style*="--n:3"] i{background:#f0cf86}
.tc-m[style*="--n:3"] i{background:linear-gradient(90deg,#f0cf86,#ff9a5a)}
.tier-demo{position:relative}
.tier-demo .td-wx{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;z-index:0}
.tier-demo.has-wx img{visibility:hidden}
.tier-demo.has-wx .td-pane{z-index:2;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:transparent!important;box-shadow:none!important}
.tier-demo.has-wx .td-pane::before,.tier-demo.has-wx .td-pane::after{display:none!important}
.tier-demo.has-wx .td-pane b{text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* ===== v47: calmer scroll, bloom entrance (no grey slabs), smoother gel bars, clearer O ===== */
/* heading entrance: a soft warm bloom that fades, never a slab */
.fr-sheet{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important;clip-path:none!important;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(255,226,160,.30),rgba(255,226,160,.08) 55%,transparent 75%)!important;
  opacity:0;transform:scale(.85);filter:blur(14px);transition:none!important;border-radius:50%!important}
.fr-h.in .fr-sheet{animation:frBloom 1.9s cubic-bezier(.25,.6,.3,1) .1s both}
@keyframes frBloom{0%{opacity:0;transform:scale(.8)}35%{opacity:.95}100%{opacity:0;transform:scale(1.18)}}

/* off-screen sections stop animating */
.vp-off *,.vp-off *::before,.vp-off *::after{animation-play-state:paused!important}

/* progress card background: mirrored gradient, no seam, no hard line */
.gd-bg{background:linear-gradient(100deg,#ff7a3d,#ffcf5a,#35d6a3,#2f7bff,#8b4dff,#ff4d9a,#8b4dff,#2f7bff,#35d6a3,#ffcf5a,#ff7a3d)!important;
  background-size:220% 100%!important;animation:gdMove2 24s ease-in-out infinite alternate!important;opacity:.5!important;filter:none!important}
@keyframes gdMove2{from{background-position:0 0}to{background-position:100% 0}}
.gd-bg::after{background:radial-gradient(120% 90% at 50% 40%,rgba(8,6,14,.2),rgba(8,6,14,.62))!important}

/* bars: same gel material as the buttons (recessed glass track, thick glossy fill) */
.gbar-t{height:28px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(255,255,255,.07))!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 0 0 1.5px rgba(255,255,255,.26),0 1px 0 rgba(255,255,255,.2)!important}
.gbar-f{top:3px!important;bottom:3px!important;
  background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--b),var(--a))!important;background-size:200% 100%!important;
  animation:gbSweep2 5s ease-in-out infinite alternate!important;
  box-shadow:0 0 16px -1px color-mix(in srgb,var(--b) 65%,transparent),inset 0 -6px 8px -2px rgba(0,0,0,.3),inset 0 2px 3px rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.3)!important}
@keyframes gbSweep2{from{background-position:0 0}to{background-position:100% 0}}
.gbar-f::before{top:2px!important;height:42%!important;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.08))!important}
.gbar-f::after{width:22px!important;height:22px!important;margin-top:-11px!important;right:-4px!important;filter:none!important;
  background:radial-gradient(circle,rgba(255,255,255,.95),color-mix(in srgb,var(--b) 55%,transparent) 50%,transparent 72%)!important}

/* lens: words diffuse into the glass, the O stands out from what is under it */
.gl-body .gl-w :is(h5,p,small,.glw-top span,.glw-top b){filter:blur(1.1px)}
.gl-ring .gl-w :is(h5,p,small,.glw-top span,.glw-top b){filter:blur(2.4px)}
.gl-body>.gl-w,.gl-ring>.gl-w,.gl-logoin>.gl-w{will-change:transform}
.gl-body::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(12,6,28,.42) 0 30%,transparent 62%)}
.gl-logoin{filter:blur(5px) saturate(1.5) brightness(1.5) contrast(.92)!important}
.gl-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.14) 52%,rgba(255,255,255,.04))}
.gl-st[data-m=gel] .gl-logo{filter:drop-shadow(0 0 1.2px rgba(255,255,255,1)) drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 2px 3px rgba(10,4,30,.7)) drop-shadow(0 6px 10px rgba(10,4,30,.35))!important}
/* hero bubble words diffuse too */
.gl2-body .gel-words{filter:blur(1px)}
.gl2-ring .gel-words{filter:blur(2.4px)}

/* v47b: round gel button is real glass, not a gradient fill; kit note */
.gel-btn.gb-bub{background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.04),rgba(255,255,255,.10) 62%,rgba(255,255,255,.22))!important;
  -webkit-backdrop-filter:blur(2px) saturate(1.6);backdrop-filter:blur(2px) saturate(1.6);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),inset 0 -8px 12px -4px rgba(120,160,255,.35),inset 0 8px 12px -4px rgba(255,255,255,.45),0 12px 18px -10px rgba(0,0,0,.7)!important;position:relative}
.gel-btn.gb-bub::before{content:"";position:absolute;left:16%;top:8%;width:48%;height:26%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));transform:rotate(-20deg)}
.gel-btn.gb-bub::after{content:"";position:absolute;inset:0;border-radius:50%;background:none}
.gk-note{max-width:760px;margin:22px auto 0;text-align:center}
.gk-note h5{margin:0 0 6px;font-size:clamp(17px,1.8vw,21px);color:#fff6dd;letter-spacing:-.01em}
.gk-note p{margin:0 0 14px;color:#cfc6ae;font-size:14px;line-height:1.55}
.gk-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.gk-tags span{padding:6px 13px;border-radius:99px;font:700 11.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.06em;color:#ffe9b8;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,226,160,.28)}

/* v47c: videos fade into the background (no boxes) */
html.anim .s-flow .beat .bi>video,html.anim .s-flow .beat .bi>img:not(.bi-cut img){
  -webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 46%,transparent 100%);mask-image:radial-gradient(ellipse 70% 68% at 50% 50%,#000 46%,transparent 100%);
  border-radius:0;box-shadow:none}
html.anim .s-flow .beat .bi:not(.bi-cut):not(.fin):not(.wd):not(.rl) figcaption{background:none;padding:0;left:14%;right:14%;border-radius:0}

/* the rulebook: numbers + rule ticker, no box */
html.anim .s-flow .beat .bi.rl{width:min(38vw,560px)}
.rl{display:grid;gap:clamp(14px,2.4vh,26px);justify-items:start}
.rl-nums{display:grid;gap:clamp(6px,1.6vh,18px)}
.rl-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .08em;line-height:.95}
.rl-n b,.rl-n i{font:800 clamp(64px,10vw,150px)/.95 "BBB Sans",Arial,sans-serif;letter-spacing:-.05em;font-style:normal;
  background:linear-gradient(100deg,#8a6a2b 0%,#f6dc98 22%,#fff6dd 38%,#e3ae46 55%,#f6dc98 75%,#8a6a2b 100%);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:rlShine 6s ease-in-out infinite alternate;font-variant-numeric:tabular-nums}
.rl-n i{margin-left:.02em}
.rl-n span{flex-basis:100%;font:700 clamp(11px,1.15vw,14px)/1 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#cdbd93;margin-top:6px}
@keyframes rlShine{from{background-position:0 0}to{background-position:100% 0}}
.rl-feed{position:relative;width:100%;height:clamp(96px,16vh,150px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent)}
.rl-track{display:grid;gap:8px;justify-items:start;animation:rlUp 22s linear infinite}
.rl-track span{padding:8px 15px;border-radius:99px;font:600 13px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.03em;color:#fff3cf;background:rgba(255,226,160,.06);box-shadow:inset 0 0 0 1px rgba(246,220,152,.3)}
@keyframes rlUp{to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.rl-n b,.rl-n i,.rl-track{animation:none}}
@media(max-width:1050px){html.anim .s-flow .beat .bi.rl{width:min(78vw,420px)}.rl-feed{display:none}}

/* nav: current page is a gel toggle with a gold outline and white text */
header nav a[aria-current=page]{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.55);position:relative;
  background:linear-gradient(180deg,rgba(255,226,160,.30),rgba(227,174,70,.14) 55%,rgba(150,100,20,.22))!important;
  box-shadow:inset 0 0 0 1.5px rgba(246,214,130,.85),inset 0 8px 10px -6px rgba(255,255,255,.4),inset 0 -8px 10px -6px rgba(90,55,5,.45),0 0 18px -6px rgba(246,200,100,.6)!important}
header nav a[aria-current=page]::before{content:"";position:absolute;left:14%;right:14%;top:3px;height:36%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
header nav a[aria-current=page] .soon-tag{background:rgba(255,255,255,.14)!important;-webkit-text-fill-color:#fff!important;color:#fff!important}

/* What we make: slides melt into the background instead of sitting in a box */
html.anim .s-flow .beat .wd-deck{background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
html.anim .s-flow .beat .wd-s::after{display:none}
html.anim .s-flow .beat .wd-s img{-webkit-mask-image:radial-gradient(ellipse 66% 64% at 50% 48%,#000 44%,transparent 100%)!important;mask-image:radial-gradient(ellipse 66% 64% at 50% 48%,#000 44%,transparent 100%)!important;border-radius:0!important;box-shadow:none!important}
html.anim .s-flow .beat .wd-s b{left:0;right:0;bottom:6%;text-align:center;text-shadow:0 2px 18px #000,0 0 30px #000}

/* softer: feather all four edges fully */
html.anim .s-flow .beat .bi>video,html.anim .s-flow .beat .wd-s img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 20%,#000 78%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 20%,#000 78%,transparent 100%)!important;
  -webkit-mask-composite:source-in!important;mask-composite:intersect!important}