/* ===== BBB v48 — toolbox tiles: same layout, same positions on every card ===== */
.bento .product{display:flex;flex-direction:column}
.bento .product>.pf{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
/* meta line, then the button, stacked the same way on every card */
.bento .product-meta{flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;min-height:78px;margin:18px 0 14px}
.bento .product-meta>span{display:block;line-height:1.5;min-height:2.9em}
.bento .product-meta strong{margin:0}
/* title + description take the same space, so the "walk away with" box starts at one height */
.bento .pf h3{flex:none;min-height:2.7em;margin:0 0 8px;display:flex;align-items:flex-start}
.bento .pf>p{flex:none;min-height:6.4em;margin:0 0 18px}
.bento .pf .wy{margin-top:auto;min-height:132px;box-sizing:border-box}
@media(max-width:760px){
  .bento .product-meta{min-height:0}
  .bento .product-meta>span{min-height:0}
  .bento .pf h3,.bento .pf>p,.bento .pf .wy{min-height:0}
}

/* ===== v48 · Bespoke Glass scene: explanation text never sits over the glass layers ===== */
@media(min-width:1000px){
  .anim .s-glass .gl-cap .gl-now{max-width:min(40vw,640px)}
  .anim .s-glass .gl-now span,.anim .s-glass .gl-now .gl-use,.anim .s-glass .gl-now .gl-wx{max-width:100%}
  .anim .s-glass .layer-stage.free{width:54%;justify-self:end;margin-top:0;align-self:center;padding-right:5vw}
  .anim .s-glass .layer-stage.free .stack{width:min(560px,38vw)}
}
@media(max-width:999px){
  .anim .s-glass .layer-stage.free{margin-top:0;align-self:start}
  .anim .s-glass .layer-stage.free .stack{width:min(380px,52vw)}
}

/* ===== v48 · layer 05 "your content": bigger text, real-gold button, darker sky behind ===== */
/* darker sky on layer 1 (weather filters still work, this only deepens the picture) */
.s-glass .lyr.l1 .pane{background:#06040a}
.s-glass .lyr.l1 .skyart{opacity:.58}
/* bigger words on the top layer */
.s-glass .lyr.l7 .pane{gap:2cqw!important;padding:5cqw 6cqw 6cqw!important}
.s-glass .lyr.l7 .tiny{font-size:max(10px,3.1cqw)!important;letter-spacing:.14em;color:#f0d28a;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.s-glass .lyr.l7 b{font-size:max(22px,8.4cqw)!important;line-height:1.02;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.s-glass .lyr.l7 .l6p{font-size:max(13px,3.9cqw)!important;line-height:1.4;color:#fff1d2;text-shadow:0 1px 8px rgba(0,0,0,.55)}
/* real gold: banded metal, bevel, dark engraved text */
.s-glass .lyr.l7 .glass-pill{
  font-size:max(13px,3.9cqw)!important;font-weight:800;letter-spacing:.01em;
  padding:.8em 1.9em!important;border-radius:99px;border:1px solid #6e4a0c!important;
  color:#2b1802!important;text-shadow:0 1px 0 rgba(255,240,190,.75);
  background:
    linear-gradient(180deg,#fff2ad 0%,#f6d561 16%,#dcae38 38%,#b27d1a 50%,#d9a734 60%,#f4d06a 80%,#b98524 100%)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,250,214,.95),inset 0 -2px 0 rgba(94,58,4,.55),inset 0 0 0 1px rgba(255,226,140,.45),
    0 0 0 1px rgba(30,18,0,.55),0 0 1.1em rgba(240,190,70,.38),0 10px 16px -8px rgba(0,0,0,.8)!important}
.s-glass .lyr.l7 .glass-pill::before{display:block!important;content:"";position:absolute;left:10%;right:10%;top:6%;height:34%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}

/* ===== v48 · weather stays on the Atmosphere layer whichever step is being read ===== */
.layer-stage.hl .lyr.l2:not(.on) .wxp{opacity:1!important}
.s-glass[data-wx]:not([data-wx=clear]) .layer-stage.hl .lyr.l2:not(.on){opacity:.42!important}

/* ===== v48 · "See it working": real-gold pill, balanced text / arrow / height ===== */
.s-glass .gl-cap .button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;
  min-height:54px;padding:8px 10px 8px 28px;border-radius:999px;
  font-size:clamp(15px,1.15vw,17px);font-weight:800;letter-spacing:.005em;line-height:1;white-space:nowrap;
  color:#2b1802;text-shadow:0 1px 0 rgba(255,240,190,.7);border:1px solid #6e4a0c;
  background:linear-gradient(180deg,#fff2ad 0%,#f6d561 16%,#dcae38 38%,#b27d1a 50%,#d9a734 60%,#f4d06a 80%,#b98524 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,250,214,.95),inset 0 -2px 0 rgba(94,58,4,.55),inset 0 0 0 1px rgba(255,226,140,.4),0 0 0 1px rgba(30,18,0,.5),0 0 1.1em rgba(240,190,70,.32),0 12px 18px -10px rgba(0,0,0,.85);
  transition:transform .25s,filter .25s}
.s-glass .gl-cap .button::before{content:"";position:absolute;left:9%;right:9%;top:6%;height:34%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
.s-glass .gl-cap .button::after{display:none}
.s-glass .gl-cap .button:hover{color:#2b1802;transform:translateY(-2px);filter:brightness(1.07);background:linear-gradient(180deg,#fff2ad 0%,#f6d561 16%,#dcae38 38%,#b27d1a 50%,#d9a734 60%,#f4d06a 80%,#b98524 100%)}
.s-glass .gl-cap .button .go{width:36px;height:36px;flex:none;border-radius:50%;background:#24160a;box-shadow:inset 0 0 0 1px rgba(255,214,120,.55),0 2px 4px rgba(0,0,0,.4)}

/* ===== v48 · what the glass is for ===== */
.gx-use{padding:clamp(56px,8vw,110px) 0 clamp(30px,5vw,60px)}
.gu-head{max-width:760px;margin-bottom:clamp(26px,4vw,48px)}
.gu-head h2{margin-bottom:16px}
.gu-head p{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:#d3cab5;max-width:60ch;margin:0}
.gu-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gu{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,236,190,.08),rgba(255,236,190,.02));
  box-shadow:inset 0 0 0 1px rgba(227,194,122,.22),inset 0 1px 0 rgba(255,240,200,.25),0 24px 40px -26px #000;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.gu:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(246,214,120,.55),inset 0 1px 0 rgba(255,240,200,.4),0 28px 44px -24px #000,0 0 40px -12px rgba(246,200,90,.35)}
.gu-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:19px;margin-bottom:10px;
  background:radial-gradient(120% 120% at 30% 0%,rgba(255,226,160,.28),rgba(255,226,160,.05));
  box-shadow:inset 0 0 0 1px rgba(255,226,160,.4),0 10px 20px -12px #000}
.gu-ic svg{width:34px;height:34px;fill:none;stroke:#ffe29a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gu b{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;color:#fff6dd}
.gu span{font-size:14.5px;line-height:1.5;color:#d3cab5}
.gu-foot{margin:26px 0 0;font-size:14px;color:#b9b09f}
.gu-foot a{color:#ffe29a;margin-left:8px;white-space:nowrap}
.gu-pre:not(.in) .gu{opacity:0;transform:translateY(22px)}
.gu-pre .gu{transition:opacity .7s calc(var(--i)*70ms),transform .7s calc(var(--i)*70ms) cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.gu-pre.in .gu:hover{transition-delay:0s}
@media(max-width:980px){.gu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gu-grid{grid-template-columns:1fr;gap:12px}.gu{padding:18px}.gu{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.gu-pre:not(.in) .gu{opacity:1;transform:none}.gu{transition:none}}

/* closed slab: keep the frost light enough that the rain on the Atmosphere layer reads as drops on the glass */
.s-glass[data-wx]:not([data-wx=clear]) .stack.asm .lyr.l3 .pane{-webkit-backdrop-filter:blur(2.5px) saturate(140%)!important;backdrop-filter:blur(2.5px) saturate(140%)!important}
/* closed stack (start and end): let the wet glass of the Atmosphere layer show through the frost plate */
.s-glass[data-ly="-1"][data-wx]:not([data-wx=clear]) .lyr.l3 .b3-frost{opacity:.4;transition:opacity .8s}

/* ===== v48b · "Now you try it": brand tester as a framed setup wizard at every width ===== */
.gx-try{margin:clamp(54px,8vw,100px) auto clamp(18px,3vw,30px);text-align:center;position:relative}
.gx-try::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:linear-gradient(90deg,transparent,rgba(246,214,120,.7),transparent)}
.gx-try-pill{position:relative;display:inline-block;padding:10px 26px;border-radius:999px;font:800 12px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#1a1204;background:linear-gradient(180deg,#fff0c4,#e3b04a 55%,#b8862c);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 26px -8px rgba(246,200,90,.7)}
.gx-try p{margin:14px 0 0;font-size:clamp(15px,1.4vw,18px);color:#e9dfc7}
#gxBuild{border:1px solid rgba(246,214,120,.5)!important;background:radial-gradient(90% 60% at 20% 0%,rgba(227,174,70,.14),transparent 70%),rgba(12,8,4,.78)!important;box-shadow:0 0 0 6px rgba(227,174,70,.06),0 40px 90px -40px #000,0 0 80px -30px rgba(246,200,90,.55)!important;border-radius:30px}
.bd.bd-wiz .bd-f:not(.is-step),.bd.bd-wiz .gx-code,.bd.bd-wiz .gx-codecap,.bd.bd-wiz .gx-links{display:none}
.bd.bd-wiz[data-last="1"] .gx-code,.bd.bd-wiz[data-last="1"] .gx-codecap,.bd.bd-wiz[data-last="1"] .gx-links{display:block}
.bd.bd-wiz[data-last="1"] .gx-links{display:flex;flex-wrap:wrap;gap:10px 18px}
.bd.bd-wiz .bd-wz{display:block}
.bd-wz-top{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.bd-wz-top b{font-size:clamp(17px,1.6vw,21px);color:#fff6e0;letter-spacing:-.01em}
.bd-wz-dots{display:flex;gap:6px}.bd-wz-dots i{flex:1;height:6px;border-radius:6px;background:rgba(227,194,122,.22);transition:background .3s}
.bd-wz-dots i.on{background:linear-gradient(90deg,#fff0c4,#e3b04a)}.bd-wz-dots i.done{background:rgba(227,176,74,.65)}
.bd-wz-nav{display:flex;gap:10px;margin-top:16px}
.bd-wz-nav button{flex:1;min-height:50px;border-radius:14px;font:700 15px "BBB Sans",Arial,sans-serif;border:1px solid rgba(227,194,122,.4);background:rgba(255,236,190,.06);color:#fff6e0;cursor:pointer}
.bd-wz-nav button.nx{background:linear-gradient(180deg,#fff0c4,#e3b04a);color:#1a1204;border:0;box-shadow:0 8px 18px -8px rgba(227,174,70,.8)}
.bd-wz-nav button[disabled]{opacity:.35;cursor:default}
.bd.bd-wiz .bd-f.is-step{animation:wzIn2 .35s ease both}
@keyframes wzIn2{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.bd.bd-wiz .bd-btn,.bd.bd-wiz .bd-chip,.bd.bd-wiz .bd-sw,.bd.bd-wiz .bd-th{min-height:44px}
.bd.bd-wiz .bd-sw{min-width:44px}
.bd.bd-wiz .bd-in{font-size:16px;min-height:48px}
.bd.bd-wiz .bd-ctl>p{margin-bottom:6px}
@media(min-width:761px){.bd.bd-wiz .bd-pv{position:sticky;top:96px;align-self:start}}
/* frost presets */
.bd-pre{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.bd-pre .bd-chip{min-height:40px}
/* layers CTA */
.bd-peel{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:12px 20px;border-radius:999px;border:0;cursor:pointer;font:800 14px "BBB Sans",Arial,sans-serif;color:#1a1204;background:linear-gradient(180deg,#fff0c4,#e3b04a 60%,#b8862c);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 24px -10px rgba(246,200,90,.8)}
/* Bespoke Glass shows as much picture as Liquid: light default frost, soft colour wash, frost climbs steeply only when pushed */
.gx .ex-card[data-m=glass] :is(.m-nav,.m-card,.m-pc,.m-tab){-webkit-backdrop-filter:blur(calc(var(--bg-blur-min) + var(--fr)*var(--fr)*var(--bg-blur-span))) saturate(185%) brightness(1.08)!important;backdrop-filter:blur(calc(var(--bg-blur-min) + var(--fr)*var(--fr)*var(--bg-blur-span))) saturate(185%) brightness(1.08)!important;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,calc(.14 + var(--fr)*.22)),rgba(255,255,255,0) 52%),radial-gradient(90% 120% at 100% 100%,rgba(var(--b),calc(.14 + var(--fr)*.28)),rgba(var(--b),0) 62%),linear-gradient(150deg,rgba(255,255,255,calc(.05 + var(--fr)*.09)),rgba(255,255,255,.02) 50%,rgba(var(--b),calc(.04 + var(--fr)*.1)))!important}
.bd[data-m=glass] :is(.bd-nav,.bd-pane){-webkit-backdrop-filter:blur(calc(var(--bg-blur-min) + var(--bfr)*var(--bfr)*var(--bg-blur-span))) saturate(185%) brightness(1.08)!important;backdrop-filter:blur(calc(var(--bg-blur-min) + var(--bfr)*var(--bfr)*var(--bg-blur-span))) saturate(185%) brightness(1.08)!important;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,calc(.14 + var(--bfr)*.22)),rgba(255,255,255,0) 52%),radial-gradient(90% 120% at 100% 100%,rgba(var(--b),calc(.14 + var(--bfr)*.28)),rgba(var(--b),0) 62%),linear-gradient(150deg,rgba(255,255,255,calc(.05 + var(--bfr)*.09)),rgba(255,255,255,.02) 50%,rgba(var(--b),calc(.04 + var(--bfr)*.1)))!important}
@media(max-width:760px){.bd.bd-wiz .bd-tog button{font-size:11px}}
@media(max-width:760px){.bd.bd-wiz .bd-ctl>.eyebrow{display:none}.bd.bd-wiz .bd-wz-top{margin-top:2px}}

/* ===== v48c · toolbox: fade-in reveal + legend dots that light up ===== */
.tb-legend li{border-left:0!important;position:relative;padding-left:26px!important}
.tb-legend li::before{content:"";position:absolute;left:2px;top:5px;width:9px;height:9px;border-radius:50%;background:rgba(227,194,122,.28);box-shadow:0 0 0 1px rgba(227,194,122,.35);transition:background .5s,box-shadow .6s,transform .5s}
.tb-legend li.lit::before{background:radial-gradient(circle at 35% 30%,#fff6d0,#f0b94a 60%,#b8862c);box-shadow:0 0 0 3px rgba(246,200,90,.18),0 0 14px 3px rgba(246,200,90,.75);transform:scale(1.15)}
.tb-legend li b{transition:color .5s}.tb-legend li.lit b{color:#ffe9a8}
.tbx-pre .tbx{opacity:0;filter:blur(14px);translate:0 26px}
.tbx-pre .tbx.in{opacity:1;filter:none;translate:0 0;transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
@media(prefers-reduced-motion:reduce){.tbx-pre .tbx{opacity:1;filter:none;translate:none}}
.tb-legend li::before{transition-delay:var(--ld,0s)}.tb-legend li:not(.lit)::before{transition-delay:0s}

/* ===== v48d · slim buttons by default (thick Bespoke Gel stays an opt-in) ===== */
.gx .ex-card:is([data-m=glass],[data-m=clear]) .m-btn{
  background:linear-gradient(180deg,rgba(var(--b),.9),rgba(var(--b),.72))!important;color:#1a1204!important;text-shadow:none;
  font-weight:700;letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 4px 10px -6px rgba(0,0,0,.55)!important;
  animation:none!important}
.gx .ex-stage .m-nav .m-btn{padding:1.1cqw 3cqw}
.gx .ex-stage .m-card .m-btn{padding:1.7cqw 4.2cqw;font-size:max(11px,3cqw)}
.bd .bd-go{padding:6px 14px;font-size:11.5px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.bd-pane .bd-go{padding:7px 16px}
.bd-stage[data-g=gel] .bd-go{padding:9px 18px}

/* ===== v48e · soft, natural light that drifts through the glass (no hard bands) ===== */
.td-pane::after{filter:blur(12px)}
.t-b .td-pane::after{background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.03) 32%,rgba(255,255,255,.12) 48%,rgba(255,255,255,.12) 54%,rgba(255,255,255,.03) 68%,transparent 82%)!important;background-size:320% 100%!important;animation:tdSweep 10s cubic-bezier(.45,.05,.35,1) infinite!important;mix-blend-mode:soft-light;opacity:.95}
.ex-stage .m-nav::after,.ex-stage .m-card::after,.ex-stage .m-tab::after,.ex-stage .m-pc::after{background:linear-gradient(100deg,transparent 22%,rgba(255,246,220,.04) 36%,rgba(255,246,220,.13) 50%,rgba(255,246,220,.04) 64%,transparent 78%)!important;filter:blur(8px);animation-duration:10s!important;animation-timing-function:cubic-bezier(.45,.05,.35,1)!important}
.tg-sheen{background:linear-gradient(100deg,transparent 24%,rgba(255,246,220,.04) 38%,rgba(255,246,220,.12) 50%,rgba(255,246,220,.04) 62%,transparent 76%)!important;filter:blur(10px);animation-duration:10s!important}
.kb::after{background:linear-gradient(105deg,transparent 24%,rgba(255,240,200,.03) 38%,rgba(255,240,200,.09) 50%,rgba(255,240,200,.03) 62%,transparent 76%)!important;filter:blur(8px);animation-duration:11s!important}
.tilt::after{background:linear-gradient(100deg,transparent 28%,rgba(255,244,214,.04) 40%,rgba(255,244,214,.14) 50%,rgba(255,244,214,.04) 60%,transparent 72%) 130% 0/260% 100% no-repeat!important;filter:blur(8px);animation-duration:9s!important}
.l5 .pane::after{filter:blur(26px)!important;animation-duration:11s!important;animation-timing-function:cubic-bezier(.45,.05,.35,1)!important}

/* ===== v48f · Glass Collection card: pulled back so every layer shows; frost goes light ↔ heavy; stronger rain ===== */
@keyframes tg2Go{0%,10%{--s:0;transform:rotateX(0) rotateZ(0) scale(1) translateY(0)}34%,66%{--s:1;transform:rotateX(54deg) rotateZ(-22deg) scale(.46) translateY(40%)}90%,100%{--s:0;transform:rotateX(0) rotateZ(0) scale(1) translateY(0)}}
.tg2-air{background:linear-gradient(180deg,rgba(150,175,220,.18),rgba(150,175,220,.06))!important;box-shadow:0 0 0 1px rgba(200,220,255,.35)!important}
.tg2-air i{width:2.5px!important;background:linear-gradient(180deg,transparent,rgba(235,243,255,.95))!important;filter:drop-shadow(0 0 3px rgba(200,225,255,.8))}
.tg2-air b{position:absolute;width:7px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(200,225,255,.35) 60%,transparent 72%);box-shadow:0 0 0 1px rgba(220,235,255,.4);opacity:0;animation:tg2Drop 4s ease-in infinite}
.tg2-air .d1{left:18%;top:30%}.tg2-air .d2{left:46%;top:55%;animation-delay:-1.2s}.tg2-air .d3{left:72%;top:38%;animation-delay:-2.3s}.tg2-air .d4{left:30%;top:68%;animation-delay:-3s}
@keyframes tg2Drop{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:.9;transform:translateY(14px) scale(1.1,1.4)}100%{opacity:0;transform:translateY(34px) scale(.9,1.6)}}
.tg2-blur{animation:tg2Frost 10s ease-in-out infinite}
@keyframes tg2Frost{0%,30%{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(150deg,rgba(255,244,220,.20),rgba(255,244,220,.06))}40%{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:linear-gradient(150deg,rgba(255,244,220,.05),rgba(255,244,220,.01))}54%{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:linear-gradient(150deg,rgba(255,244,220,.42),rgba(255,244,220,.22))}66%,100%{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(150deg,rgba(255,244,220,.20),rgba(255,244,220,.06))}}

/* ===== v48g · Keep / Change / Check: no progress bar, the icons light up in turn ===== */
.kcc-bar{display:none!important}
.kcc .kcc-s svg{transition:none}
.kcc .s1 svg{animation:kLit1 8s infinite}.kcc .s2 svg{animation:kLit2 8s infinite}.kcc .s3 svg{animation:kLit3 8s infinite}
@keyframes kLit1{0%,4%{stroke:#8d7a4c;filter:none}10%,28%{stroke:#fff0c4;filter:drop-shadow(0 0 7px rgba(246,200,90,.95))}34%,100%{stroke:#8d7a4c;filter:none}}
@keyframes kLit2{0%,30%{stroke:#8d7a4c;filter:none}38%,58%{stroke:#fff0c4;filter:drop-shadow(0 0 7px rgba(246,200,90,.95))}64%,100%{stroke:#8d7a4c;filter:none}}
@keyframes kLit3{0%,62%{stroke:#8d7a4c;filter:none}68%,92%{stroke:#fff0c4;filter:drop-shadow(0 0 7px rgba(246,200,90,.95))}98%,100%{stroke:#8d7a4c;filter:none}}
.kcc .kcc-s b{animation:kTx 8s infinite}.kcc .s1 b{animation-name:kTx1}.kcc .s2 b{animation-name:kTx2}.kcc .s3 b{animation-name:kTx3}
@keyframes kTx1{0%,4%{color:#bdb299}10%,28%{color:#fff6e0}34%,100%{color:#bdb299}}
@keyframes kTx2{0%,30%{color:#bdb299}38%,58%{color:#fff6e0}64%,100%{color:#bdb299}}
@keyframes kTx3{0%,62%{color:#bdb299}68%,92%{color:#fff6e0}98%,100%{color:#bdb299}}

/* ===== v48h · Kits tiles: four clean loops ===== */
.kb .kg svg *{animation:none}
.kx-gl rect{transform-box:fill-box}
.kx-gl .g1{animation:kxg1 5s cubic-bezier(.5,0,.2,1) infinite!important}.kx-gl .g3{animation:kxg3 5s cubic-bezier(.5,0,.2,1) infinite!important}.kx-gl .g2{animation:kxg2 5s ease-in-out infinite!important}
@keyframes kxg1{0%,12%{transform:translateY(0)}40%,60%{transform:translateY(-5px)}88%,100%{transform:translateY(0)}}
@keyframes kxg3{0%,12%{transform:translateY(0)}40%,60%{transform:translateY(5px)}88%,100%{transform:translateY(0)}}
@keyframes kxg2{0%,100%{opacity:.55}50%{opacity:1}}
.kx-mo .rail{stroke:rgba(240,207,134,.25);stroke-dasharray:1 3}
.kx-mo .trail{stroke:#f0cf86;stroke-dasharray:1;stroke-dashoffset:1;animation:kxTrail 3.6s cubic-bezier(.45,0,.25,1) infinite!important}
.kx-mo .dot{fill:#fff0c4;stroke:none;filter:drop-shadow(0 0 4px rgba(246,200,90,.9));offset-path:path("M5 36C15 36 15 12 24 12s9 24 19 24");offset-rotate:0deg;animation:kxDot 3.6s cubic-bezier(.45,0,.25,1) infinite!important}
@keyframes kxDot{0%{offset-distance:0%;opacity:0}6%{opacity:1}86%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes kxTrail{0%{stroke-dashoffset:1;opacity:1}86%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.kx-cd .arc{stroke:url(#kxg);stroke-width:3.4}
.kx-cd .ticks{stroke:rgba(255,246,220,.45);stroke-width:1.4}
.kx-cd .nd{transform-origin:24px 34px;animation:kxNd 5s cubic-bezier(.5,0,.2,1) infinite!important}
.kx-cd .nd path{stroke:#fff6e0;stroke-width:2.4}
.kx-cd .hub{fill:#fff6e0!important}
@keyframes kxNd{0%,14%{transform:rotate(62deg)}46%,82%{transform:rotate(-62deg)}100%{transform:rotate(62deg)}}
.kx-ck .win{stroke:rgba(240,207,134,.5)}
.kx-ck .l{stroke:rgba(240,207,134,.35)}
.kx-ck .c{stroke-dasharray:14;stroke-dashoffset:14;stroke:#9fe3a8;animation:kxCk 5s ease-in-out infinite!important}
.kx-ck .r2 .c{animation-delay:.55s!important}.kx-ck .r3 .c{animation-delay:1.1s!important}
@keyframes kxCk{0%{stroke-dashoffset:14}14%,78%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:14}}
.kb .k3::after{animation:none!important;background:radial-gradient(70% 70% at 50% 100%,rgba(143,211,255,.0),rgba(143,211,255,.0));}
@media(prefers-reduced-motion:reduce){.kb svg *,.kcc svg,.tg2-blur,.tg2-air b{animation:none!important}.kx-mo .trail{stroke-dashoffset:0}.kx-ck .c{stroke-dashoffset:0}}

/* ===== v48i · Weather in the glass tile: the real rain engine ===== */
.ic-wxv canvas.wxv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ic-wxv.has-eng img{opacity:0}

@media(prefers-reduced-motion:reduce){.bd.bd-wiz .bd-f.is-step{animation:none}.td-pane::after,.ex-stage .m-nav::after,.ex-stage .m-card::after,.ex-stage .m-tab::after,.ex-stage .m-pc::after,.tg-sheen,.kb::after,.tilt::after,.l5 .pane::after{animation:none!important}.gx-try-pill{box-shadow:none}}

/* ===== v48k · "What it's for": every tile shows the glass working ===== */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.gu{padding:14px 14px 22px!important}
.gu .gu-ic{width:46px;height:46px;border-radius:15px;margin:-30px 0 4px 10px;position:relative;z-index:3;background:rgba(14,10,5,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gu .gu-ic svg{width:26px;height:26px}
.gu b,.gu span{padding-inline:8px}
.gs{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;container-type:inline-size;background:radial-gradient(80% 90% at 30% 10%,rgba(227,174,70,.22),transparent 70%),#0a0704;box-shadow:inset 0 0 0 1px rgba(227,194,122,.25)}
.gs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gs-gl{background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.07));-webkit-backdrop-filter:blur(5px) saturate(160%);backdrop-filter:blur(5px) saturate(160%);border:1px solid rgba(255,248,226,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 18px -8px rgba(0,0,0,.7);color:#fff}
.vp-off .gs *{animation-play-state:paused!important}
/* Apps: phone, tab bar indicator slides, a sheet rises */
.gs-app .ph{position:absolute;left:50%;top:9%;bottom:-6%;width:34cqw;transform:translateX(-50%);border-radius:6cqw 6cqw 0 0;overflow:hidden;background:url(assets/bg-dusk.webp) 55% 40%/cover;box-shadow:0 0 0 1.2cqw #15110b,0 0 0 1.5cqw rgba(255,226,160,.4),0 14px 30px -10px #000}
.ph-tab{position:absolute;left:5%;right:5%;bottom:14%;height:11cqw;border-radius:5.5cqw;display:flex}
.ph-tab span{flex:1;position:relative;z-index:1}.ph-tab span::after{content:"";position:absolute;left:50%;top:50%;width:3.2cqw;height:3.2cqw;margin:-1.6cqw;border-radius:50%;background:rgba(255,255,255,.85)}
.ph-tab u{position:absolute;top:8%;bottom:8%;left:1.5%;width:23%;border-radius:4.5cqw;background:rgba(255,236,190,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 12px rgba(246,200,90,.6);animation:gsTab 8s cubic-bezier(.5,0,.2,1) infinite}
@keyframes gsTab{0%,18%{left:1.5%}25%,43%{left:26.5%}50%,68%{left:51.5%}75%,93%{left:76.5%}100%{left:1.5%}}
.ph-sheet{position:absolute;left:4%;right:4%;bottom:0;height:42%;border-radius:5cqw 5cqw 0 0;padding:4cqw;display:flex;flex-direction:column;gap:2.4cqw;transform:translateY(105%);animation:gsSheet 8s cubic-bezier(.3,.9,.3,1) infinite;z-index:2}
.ph-sheet b{display:block;width:30%;height:2.2cqw;border-radius:2cqw;background:rgba(255,255,255,.9)}.ph-sheet i{display:block;height:2cqw;border-radius:2cqw;background:rgba(255,255,255,.55)}.ph-sheet i+i{width:70%}
@keyframes gsSheet{0%,28%{transform:translateY(105%)}38%,60%{transform:translateY(0)}70%,100%{transform:translateY(105%)}}
/* Websites: header + hero card over a photo, pointer presses the button */
.gs-web .bw{position:absolute;inset:9% 7% -4%;border-radius:12px 12px 0 0;overflow:hidden;background:#15110b;box-shadow:0 0 0 1px rgba(255,226,160,.4),0 14px 30px -10px #000}
.bw-bar{height:7cqw;display:flex;align-items:center;gap:1.6cqw;padding:0 3cqw;background:#1b150d}.bw-bar i{width:2cqw;height:2cqw;border-radius:50%;background:rgba(255,226,160,.5)}
.bw-pg{position:absolute;inset:7cqw 0 0}
.bw-nav{position:absolute;left:4%;right:4%;top:6%;height:8cqw;border-radius:4cqw;display:flex;align-items:center;gap:3cqw;padding:0 3cqw;transform:translateY(-140%);animation:gsNav 8s cubic-bezier(.3,.9,.3,1) infinite}
.bw-nav em{width:6cqw;height:3cqw;border-radius:1.5cqw;background:#fff;margin-right:auto}.bw-nav span{width:7cqw;height:1.8cqw;border-radius:1cqw;background:rgba(255,255,255,.75)}
@keyframes gsNav{0%,6%{transform:translateY(-140%)}16%,88%{transform:none}96%,100%{transform:translateY(-140%)}}
.bw-card{position:absolute;left:8%;bottom:10%;width:52%;padding:4cqw;border-radius:4cqw;opacity:0;transform:translateY(14px);animation:gsCard 8s ease infinite}
.bw-card b{display:block;font-size:5.4cqw;line-height:1.05;margin-bottom:3cqw;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.bw-btn{display:inline-block;font-style:normal;font-weight:700;font-size:3cqw;color:#1a1204;background:linear-gradient(180deg,#fff0c4,#e3b04a);padding:1.6cqw 4cqw;border-radius:99px;animation:gsBtn 8s ease infinite}
@keyframes gsCard{0%,18%{opacity:0;transform:translateY(14px)}30%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(14px)}}
@keyframes gsBtn{0%,62%{transform:none;box-shadow:none}66%{transform:scale(.9)}72%{transform:scale(1.06);box-shadow:0 0 14px rgba(246,200,90,.9)}80%,100%{transform:none;box-shadow:none}}
.bw-cur{position:absolute;width:3.4cqw;height:4.6cqw;background:#fff;clip-path:polygon(0 0,0 100%,30% 74%,52% 100%,66% 92%,46% 68%,80% 68%);filter:drop-shadow(0 2px 3px #000);left:70%;top:90%;animation:gsCur 8s cubic-bezier(.5,0,.2,1) infinite}
@keyframes gsCur{0%,40%{left:80%;top:95%;opacity:0}46%{opacity:1}60%,74%{left:34%;top:74%;opacity:1}86%,100%{left:50%;top:92%;opacity:0}}
/* Graphic design: how it works, in three beats */
.gs-gd{display:flex;align-items:center;gap:5cqw;padding:5cqw}
.gd-poster{position:relative;flex:0 0 38%;aspect-ratio:3/4;border-radius:2.4cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(255,226,160,.45),0 14px 26px -10px #000;transform:rotate(-2deg)}
.gd-pn{position:absolute;left:8%;right:8%;bottom:8%;height:44%;border-radius:2.6cqw;padding:3cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:1cqw;opacity:0;transform:translateY(40%);animation:gsPn 9s cubic-bezier(.3,.9,.3,1) infinite}
@keyframes gsPn{0%,28%{opacity:0;transform:translateY(40%);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}40%{opacity:1;transform:none;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(40%)}}
.gd-pn small{font-size:2.5cqw;letter-spacing:.16em;font-weight:700;opacity:0;animation:gsTx 9s ease infinite}
.gd-pn b{font-size:5.4cqw;line-height:1;opacity:0;clip-path:inset(0 100% 0 0);text-shadow:0 1px 8px rgba(0,0,0,.5);animation:gsTx2 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes gsTx{0%,62%{opacity:0}70%,92%{opacity:1}100%{opacity:0}}
@keyframes gsTx2{0%,62%{opacity:1;clip-path:inset(0 100% 0 0)}80%,92%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
.gd-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3cqw;flex:1;min-width:0}
.gd-steps li{display:flex;align-items:center;gap:2.6cqw;font-size:3.7cqw;font-weight:700;color:#8d8068;line-height:1.15;transition:none}
.gd-steps i{flex:none;display:grid;place-items:center;width:6.6cqw;height:6.6cqw;border-radius:50%;font-style:normal;font-size:3.4cqw;color:#8d8068;box-shadow:inset 0 0 0 1.2px rgba(227,194,122,.35)}
.gd-steps .s1{animation:gsS1 9s infinite}.gd-steps .s2{animation:gsS2 9s infinite}.gd-steps .s3{animation:gsS3 9s infinite}
.gd-steps .s1 i{animation:gsI1 9s infinite}.gd-steps .s2 i{animation:gsI2 9s infinite}.gd-steps .s3 i{animation:gsI3 9s infinite}
@keyframes gsS1{0%,2%{color:#8d8068}6%,26%{color:#fff6e0}32%,100%{color:#8d8068}}
@keyframes gsS2{0%,28%{color:#8d8068}34%,58%{color:#fff6e0}64%,100%{color:#8d8068}}
@keyframes gsS3{0%,60%{color:#8d8068}66%,92%{color:#fff6e0}98%,100%{color:#8d8068}}
@keyframes gsI1{0%,2%{background:none;color:#8d8068}6%,26%{background:linear-gradient(180deg,#fff0c4,#e3b04a);color:#1a1204;box-shadow:0 0 10px rgba(246,200,90,.8)}32%,100%{background:none;color:#8d8068}}
@keyframes gsI2{0%,28%{background:none;color:#8d8068}34%,58%{background:linear-gradient(180deg,#fff0c4,#e3b04a);color:#1a1204;box-shadow:0 0 10px rgba(246,200,90,.8)}64%,100%{background:none;color:#8d8068}}
@keyframes gsI3{0%,60%{background:none;color:#8d8068}66%,92%{background:linear-gradient(180deg,#fff0c4,#e3b04a);color:#1a1204;box-shadow:0 0 10px rgba(246,200,90,.8)}98%,100%{background:none;color:#8d8068}}
/* Social: thumbnail, a heart pops, the count floats up */
.gs-so .so-th{position:absolute;left:9%;right:9%;top:12%;bottom:12%;border-radius:2.6cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(255,226,160,.4),0 14px 26px -10px #000;animation:gsThumb 6s ease-in-out infinite}
@keyframes gsThumb{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.so-plate{position:absolute;left:5%;bottom:8%;padding:2.4cqw 3.4cqw;border-radius:2.4cqw}.so-plate small{display:block;font-size:2.4cqw;letter-spacing:.16em;font-weight:700;color:#ffe9a8}.so-plate b{font-size:4.8cqw;line-height:1.05;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.so-time{position:absolute;right:4%;bottom:6%;padding:.8cqw 2cqw;border-radius:1.4cqw;font-size:2.6cqw;font-weight:700}
.so-play{position:absolute;left:50%;top:38%;width:9cqw;height:9cqw;margin:-4.5cqw;border-radius:50%;animation:gsPlay 3s ease-in-out infinite}.so-play::after{content:"";position:absolute;left:36%;top:26%;border-left:3.4cqw solid #fff;border-top:2.4cqw solid transparent;border-bottom:2.4cqw solid transparent}
@keyframes gsPlay{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.so-heart{position:absolute;right:11%;top:34%;font-size:8cqw;color:#ff5d8a;filter:drop-shadow(0 0 10px rgba(255,93,138,.8));opacity:0;animation:gsHeart 4s ease infinite}
@keyframes gsHeart{0%,20%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.25)}38%{transform:scale(1)}60%{opacity:1;transform:translateY(-6cqw)}80%,100%{opacity:0;transform:translateY(-12cqw)}}
.so-plus{position:absolute;right:9%;top:50%;padding:1cqw 2.4cqw;border-radius:99px;font-size:3cqw;font-weight:700;opacity:0;animation:gsPlus 4s ease infinite}
@keyframes gsPlus{0%,30%{opacity:0;transform:translateY(0)}42%{opacity:1}70%{opacity:1;transform:translateY(-4cqw)}90%,100%{opacity:0;transform:translateY(-7cqw)}}
/* Slides: a stat card counts up while its bars grow */
.gs-sl .sl-slide{position:absolute;inset:10% 8%;border-radius:2.4cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(255,226,160,.4),0 14px 26px -10px #000}
.sl-card{position:absolute;left:7%;top:14%;bottom:14%;width:48%;border-radius:3cqw;padding:3.4cqw;display:flex;flex-direction:column;justify-content:space-between}
.sl-card small{font-size:2.5cqw;letter-spacing:.16em;font-weight:700;color:#ffe9a8}
.sl-n{font-size:12cqw;line-height:1;letter-spacing:-.04em;counter-reset:n var(--n);animation:gsCount 7s cubic-bezier(.2,.7,.2,1) infinite;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.sl-n::after{content:counter(n) "k"}
@keyframes gsCount{0%,8%{--n:0}45%,90%{--n:128}100%{--n:0}}
.sl-bars{display:flex;align-items:flex-end;gap:2cqw;height:30%}.sl-bars i{flex:1;border-radius:1cqw 1cqw 0 0;background:linear-gradient(180deg,#fff0c4,#e3b04a);transform-origin:50% 100%;transform:scaleY(.1);animation:gsBar 7s cubic-bezier(.2,.7,.2,1) infinite}
.sl-bars i:nth-child(1){--h:.45;animation-delay:0s}.sl-bars i:nth-child(2){--h:.7;animation-delay:.12s}.sl-bars i:nth-child(3){--h:.55;animation-delay:.24s}.sl-bars i:nth-child(4){--h:1;animation-delay:.36s}
@keyframes gsBar{0%,8%{transform:scaleY(.1)}45%,90%{transform:scaleY(var(--h))}100%{transform:scaleY(.1)}}
/* Video: slow pan, a lower third slides in and out, playhead runs */
.gs-vd .vd-frame{position:absolute;inset:9% 6% 20%;border-radius:2.4cqw;overflow:hidden;box-shadow:0 0 0 1px rgba(255,226,160,.4),0 14px 26px -10px #000}
.vd-img{animation:gsPan 14s ease-in-out infinite alternate;transform-origin:30% 50%}
@keyframes gsPan{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.2) translateX(-5%)}}
.vd-lt{position:absolute;left:5%;bottom:10%;padding:2.2cqw 4cqw 2.2cqw 3cqw;border-radius:2cqw;border-left:1cqw solid #e3b04a;transform:translateX(-120%);opacity:0;animation:gsLt 7s cubic-bezier(.3,.9,.3,1) infinite}
.vd-lt b{display:block;font-size:4.4cqw}.vd-lt small{font-size:2.8cqw;color:#ffe9a8}
@keyframes gsLt{0%,12%{transform:translateX(-120%);opacity:0}24%,72%{transform:none;opacity:1}84%,100%{transform:translateX(-120%);opacity:0}}
.vd-tl{position:absolute;left:6%;right:6%;bottom:8%;height:1.2cqw;border-radius:1cqw;background:rgba(255,226,160,.22)}
.vd-tl i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,#a47f34,#fff0c4);animation:gsTl 7s linear infinite}
.vd-tl i::after{content:"";position:absolute;right:-1.3cqw;top:-1cqw;width:3cqw;height:3cqw;border-radius:50%;background:#fff0c4;box-shadow:0 0 10px rgba(246,200,90,.9)}
@keyframes gsTl{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.gs *{animation:none!important}.gs .ph-sheet,.gs .bw-card,.gs .gd-pn,.gs .gd-pn small,.gs .gd-pn b{opacity:1;transform:none;clip-path:none}.gs .bw-nav{transform:none}.gs .so-heart,.gs .so-plus{opacity:1}.gs .sl-bars i{transform:scaleY(var(--h))}.gs .vd-lt{opacity:1;transform:none}.sl-n::after{content:"128k"}}
.sl-bars i{height:100%}
.gs-gd{gap:4cqw;padding:4.5cqw}
.gd-poster{flex:0 0 40%}
.gd-steps{gap:3.4cqw}
.gd-steps li{font-size:4.6cqw;gap:2.8cqw}
.gd-steps i{width:8cqw;height:8cqw;font-size:4.2cqw}
.gd-pn small{font-size:2.8cqw}.gd-pn b{font-size:6cqw}
/* v48l: the moving gold line is the only line; no static rules beside it */
.catalog-controls::before,.catalog-controls::after{display:none!important}

/* v48m: "What it's for" blueprint stages (line-art, callouts, draw-in) */
.bp{position:relative;aspect-ratio:17/10;border-radius:14px;overflow:hidden;margin:0 0 14px;
 background:radial-gradient(circle at 1px 1px,rgba(227,194,122,.22) 1px,transparent 1.4px) 0 0/14px 14px,linear-gradient(160deg,#14110c,#0b0a08);
 border:1px solid rgba(227,194,122,.18);box-shadow:inset 0 0 40px rgba(0,0,0,.45)}
.bp svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.bp-no{position:absolute;top:8px;left:10px;z-index:2;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:rgba(227,194,122,.7)}
.bp .ln{fill:none;stroke:#e3c27a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.bp .ln.dim{stroke:rgba(227,194,122,.45);stroke-width:1.2}
.bp .gl{fill:url(#bpG);stroke:#fff0c4;stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(246,200,90,.5));animation:bpPulse 5s ease-in-out infinite}
.bp .co{stroke:rgba(255,240,196,.6);stroke-width:1;fill:none;stroke-dasharray:2 3}
.bp .dt{fill:#ffe29a;animation:bpDot 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.bp .tx{font:600 8.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;fill:#e8c97f}
.bp .td{fill:rgba(227,194,122,.4);stroke:none}.bp .td.on{fill:#ffe29a}
.bp .td.big{fill:none;stroke:#e3c27a;stroke-width:1.4}
.bp .bar{stroke:#e3c27a;stroke-width:7;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:50% 100%;animation:bpBar 4s ease-in-out infinite}
.bp .bar:nth-child(2){animation-delay:.25s}.bp .bar:nth-child(3){animation-delay:.5s}.bp .bar:nth-child(4){animation-delay:.75s}
.bp .prog{fill:none;stroke:#ffe29a;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:bpProg 8s linear infinite}
.bp .head{fill:#ffe29a;animation:bpHead 8s linear infinite}
.bp .vd-lt{animation:bpLt 8s ease-in-out infinite}
.bp .so-play{transform-box:fill-box;transform-origin:center;animation:bpPop 4.5s ease-in-out infinite}
.bp .so-h{transform-box:fill-box;transform-origin:center;animation:bpPop 4.5s ease-in-out 1.2s infinite}
.bp .hrt{fill:rgba(255,226,154,.25)}
.bp .ap-sheet{animation:bpSheet 6s ease-in-out infinite}
.bp .wb-card{animation:bpCard 6s ease-in-out infinite}
.bp .lyr{animation:bpExplode 9s ease-in-out infinite}
.bp .lyr.l1{--ty:0px}.bp .lyr.l2{--ty:-34px}.bp .lyr.l3{--ty:-68px}
.bp .gd-lb .tx{opacity:0;animation:bpLb 9s ease-in-out infinite}
.bp .gd-lb .n2{animation-delay:.15s}.bp .gd-lb .n3{animation-delay:.3s}
@keyframes bpPulse{50%{filter:drop-shadow(0 0 9px rgba(246,200,90,.8))}}
@keyframes bpDot{50%{transform:scale(1.7);opacity:.55}}
@keyframes bpBar{0%,15%{transform:scaleY(.2)}45%,85%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
@keyframes bpProg{to{stroke-dashoffset:0}}
@keyframes bpHead{to{transform:translateX(260px)}}
@keyframes bpLt{0%,8%{opacity:0;transform:translateX(-24px)}20%,80%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes bpPop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.18)}90%{transform:scale(.97)}}
@keyframes bpSheet{0%,100%{transform:translateY(8px);opacity:.6}40%,70%{transform:none;opacity:1}}
@keyframes bpCard{0%,100%{transform:translateY(5px)}50%{transform:translateY(-3px)}}
@keyframes bpExplode{0%,12%{translate:0 0}38%,68%{translate:0 var(--ty)}94%,100%{translate:0 0}}
@keyframes bpLb{0%,30%{opacity:0}42%,66%{opacity:1}78%,100%{opacity:0}}
/* draw-in on reveal */
.gu-pre .bp .ln{transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1) calc(var(--k,1)*70ms + var(--i,0)*90ms)}
.gu-pre:not(.in) .bp .ln{stroke-dashoffset:1}
.gu-pre .bp .gl{transition:opacity .9s .5s}
.gu-pre:not(.in) .bp .gl{opacity:0}
.vp-off .bp *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.bp *{animation:none!important}.bp .gd-lb .tx{opacity:1}.bp .bar{transform:none}.bp .prog{stroke-dashoffset:0}.bp .lyr.l2{translate:0 -34px}.bp .lyr.l3{translate:0 -68px}.gu-pre .bp .ln{transition:none}}

/* v48n: "Calm where people read" — clickable combinations */
.mixs-pts button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:12px 16px;border-radius:16px;background:rgba(255,236,190,.05);box-shadow:inset 0 0 0 1px rgba(227,194,122,.18);color:#d3cab5;font-size:14px;line-height:1.45;transition:background .25s,box-shadow .25s,transform .2s}
.mixs-pts button:hover{background:rgba(255,236,190,.09);transform:translateX(3px)}
.mixs-pts button:focus-visible{outline:2px solid #ffe29a;outline-offset:2px}
.mixs-pts button[aria-selected=true]{background:linear-gradient(135deg,rgba(255,226,154,.18),rgba(255,226,154,.05));box-shadow:inset 0 0 0 1.5px rgba(255,226,154,.75),0 0 24px -8px rgba(246,200,90,.5)}
.mixs-pts button b{display:block;color:#fff6dd;font-size:15px;margin-bottom:2px}
.mixs-pts li{list-style:none}
.mx-hint{margin:12px 2px 0;font-size:12px;letter-spacing:.06em;color:rgba(227,194,122,.75)}
.mixs-r{display:grid;gap:14px}
.mixs-stage{transition:box-shadow .4s}
.mx-card,.mx-deep{transition:opacity .45s,top .5s cubic-bezier(.3,.7,.2,1),bottom .5s cubic-bezier(.3,.7,.2,1),transform .5s}
.mx-deep{position:absolute;left:7%;right:7%;top:27%;bottom:8%;z-index:2;opacity:0;pointer-events:none;perspective:900px}
.md-floor{position:absolute;left:6%;right:6%;bottom:-6%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(90,50,200,.65),rgba(20,8,60,.0) 75%);filter:blur(10px)}
.md-body{position:absolute;inset:0;border-radius:26px;overflow:hidden;color:#fff;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s;
 background:linear-gradient(160deg,rgba(128,88,232,.62),rgba(24,10,64,.72));-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
 box-shadow:inset 0 0 0 2px rgba(243,217,150,.78),inset 0 22px 30px rgba(190,160,255,.34),inset 0 -30px 40px rgba(8,0,36,.65),0 0 42px rgba(140,100,255,.5),0 26px 36px -14px #000}
.md-drift{position:absolute;inset:-20%;background:radial-gradient(40% 50% at 22% 22%,rgba(200,170,255,.65),transparent 70%),radial-gradient(40% 50% at 82% 88%,rgba(243,217,150,.5),transparent 70%);animation:mdDrift 8s ease-in-out infinite alternate}
.md-grain{position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;background:repeating-linear-gradient(45deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}
.md-spec{position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));border-radius:26px 26px 60% 60%/26px 26px 30% 30%}
.md-body .mx-in{z-index:3}
.md-body>em{position:absolute;right:14px;top:12px;z-index:3;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.35);color:#fff;font:700 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal}
.md-go{background:linear-gradient(180deg,#ffe9ac,#d9a03a)!important;color:#2a1a02!important}
@keyframes mdDrift{to{transform:translate(8%,6%) rotate(8deg)}}
.mx-tag{position:absolute;z-index:4;padding:5px 10px;border-radius:999px;background:linear-gradient(180deg,#ffe9ac,#e1b04e);color:#2a1a02;font:800 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:scale(.9);transition:opacity .4s,transform .4s;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.mt1{right:-2%;top:30%}.mt2{left:-3%;top:48%}.mt3{right:-2%;top:56%}.mt4{left:12%;bottom:-8%}
.mixs[data-mx=deep] .mx-tag{opacity:1;transform:none}
.mixs[data-mx=deep] .mt2{transition-delay:.12s}.mixs[data-mx=deep] .mt3{transition-delay:.24s}.mixs[data-mx=deep] .mt4{transition-delay:.36s}
.mixs[data-mx=deep] .mx-deep,.mixs[data-mx=rule] .mx-deep{opacity:1;pointer-events:auto}
.mixs[data-mx=deep] .mx-card{opacity:0;pointer-events:none;transform:scale(.96)}
.mixs[data-mx=atm] .mx-deep{transform:scale(.96)}
/* rule: two heavy panes, then fix */
.mixs[data-mx=rule] .mx-card{top:25%;bottom:50%}
.mixs[data-mx=rule] .mx-deep{top:52%;bottom:6%}
.mixs[data-mx=rule] .mx-in{padding:12px 16px;gap:4px}.mixs[data-mx=rule] .mx-in b{font-size:clamp(16px,2vw,22px)}.mixs[data-mx=rule] .mx-play{display:none}.mixs[data-mx=rule] .mx-in small{font-size:8px}
.mixs[data-mx=rule].fixed .mx-card{opacity:0;pointer-events:none}
.mixs[data-mx=rule].fixed .mx-deep{top:27%;bottom:8%}
.mixs[data-mx=rule].fixed .mx-in{padding:24px;gap:10px}.mixs[data-mx=rule].fixed .mx-in b{font-size:clamp(24px,3.4vw,40px)}.mixs[data-mx=rule].fixed .mx-play{display:inline-flex}
.mx-verdict{position:absolute;z-index:5;left:7%;bottom:2%;padding:5px 11px;border-radius:999px;font:800 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .4s}
.mixs[data-mx=rule] .mx-verdict{opacity:1;background:rgba(190,60,50,.9);color:#fff}
.mixs[data-mx=rule] .mx-verdict::after{content:"Too heavy for a phone"}
.mixs[data-mx=rule].fixed .mx-verdict{background:rgba(60,150,90,.92)}
.mixs[data-mx=rule].fixed .mx-verdict::after{content:"One mood. Phones stay cool."}
.mx-say{margin:0;min-height:4.6em;font-size:14px;line-height:1.55;color:#d8d0bb}
.mx-say>span{display:none}.mx-say b{color:#fff6dd}
.mixs[data-mx=atm] .ms-atm,.mixs[data-mx=deep] .ms-deep,.mixs[data-mx=rule] .ms-rule{display:block}
.ms-ok{display:none}.mixs.fixed .ms-bad{display:none}.mixs.fixed .ms-ok{display:inline}
.mx-fix{all:unset;cursor:pointer;margin-left:10px;padding:6px 14px;border-radius:999px;background:linear-gradient(180deg,#ffe9ac,#d9a03a);color:#2a1a02;font:800 12px/1 "BBB Sans",Arial,sans-serif}
.mx-fix:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mixs:not(.fixed) .mx-fix::before{content:""}
@media(prefers-reduced-motion:reduce){.md-drift{animation:none}.mx-card,.mx-deep,.mx-tag{transition:none}}

/* v48o: "Press it" descender fill, orb pane clarity, tiles animate in on scroll */
.press-h .pr-b{padding:.04em .1em .3em;margin-bottom:-.3em}
.vd.glassy .vd-pane video{-webkit-mask-image:radial-gradient(circle closest-side,#000 0 54%,rgba(0,0,0,.55) 60%,transparent 68%);mask-image:radial-gradient(circle closest-side,#000 0 54%,rgba(0,0,0,.55) 60%,transparent 68%)}
.vd.glassy .vd-pane::before{-webkit-backdrop-filter:blur(3px) saturate(1.3);backdrop-filter:blur(3px) saturate(1.3);background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.22),rgba(255,255,255,.03) 45%,rgba(255,255,255,0) 72%);box-shadow:inset 0 0 0 1.5px rgba(251,233,183,.85),inset 0 10px 18px rgba(255,255,255,.2),inset 0 -10px 18px rgba(227,194,122,.18),0 0 40px rgba(180,150,255,.3)}
.vd-pre .vd{--vi:0;transition:opacity .8s cubic-bezier(.2,.8,.2,1) calc(var(--vi)*160ms),transform .95s cubic-bezier(.2,.8,.2,1) calc(var(--vi)*160ms)}
.vd-pre .vd.liquid{--vi:1}.vd-pre .vd.glassy{--vi:2}
.vd-pre:not(.in) .vd{opacity:0;transform:translateY(54px) scale(.95)}
.vd-pre .vd.glassy .vd-pane{transition:transform 1.1s cubic-bezier(.2,.9,.2,1) .5s}
.vd-pre:not(.in) .vd.glassy .vd-pane{transform:translate(-50%,-50%) scale(.72)!important}
.vd-pre figcaption{transition:opacity .8s .55s,transform .8s .55s}
.vd-pre:not(.in) figcaption{opacity:0;transform:translateY(12px)}
@media(prefers-reduced-motion:reduce){.vd-pre:not(.in) .vd,.vd-pre:not(.in) figcaption{opacity:1;transform:none}}

/* v48p: Atmospheric icon rain falls DOWN (video loop ran upward) */
.tc-c.c-a .tc-logo .tc-wxv{display:none!important}
.tc-c.c-a .tc-logo::after{display:block!important;content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.9) 0 1.6px,transparent 2.5px),radial-gradient(circle at 72% 58%,rgba(255,255,255,.85) 0 1.9px,transparent 2.7px),radial-gradient(circle at 46% 86%,rgba(255,255,255,.8) 0 1.4px,transparent 2.3px),repeating-linear-gradient(104deg,transparent 0 6px,rgba(220,232,255,.32) 6px 7px,transparent 7px 13px);
 background-size:34px 34px,41px 41px,29px 29px,auto;-webkit-mask:none;mask:none;animation:tcFall 1.7s linear infinite}
@keyframes tcFall{to{background-position:-4px 34px,-3px 41px,-2px 29px,-14px 140px}}
@media(prefers-reduced-motion:reduce){.tc-c.c-a .tc-logo::after{animation:none}}

/* v48q: words diffuse through the Gel bubble like the real device */
.gl2-body .gel-words{filter:blur(3.2px)!important;opacity:.95}
.gl2-ring .gel-words{filter:blur(6px)!important;opacity:.85}
.gl2-in .gel-words{filter:blur(8px)!important;opacity:.7}

/* v48r: the lens orb diffuses what is under it (soft wash, no hard bands) like the real device */
.gl-st[data-m=gel] .gl-body>.gl-w{filter:blur(4.5px) saturate(1.3) brightness(1.05)}
.gl-st[data-m=gel] .gl-ring>.gl-w{filter:blur(8px) saturate(1.4)}
.gl-body .gl-w :is(h5,p,small,.glw-top span,.glw-top b),.gl-ring .gl-w :is(h5,p,small,.glw-top span,.glw-top b){filter:none}
.gl-body::after{background:radial-gradient(circle at 50% 40%,rgba(255,214,190,.22),rgba(12,6,28,.12) 60%,transparent 75%)}
.gl-logoin{filter:blur(9px) saturate(1.7) brightness(1.25)!important}
.mixs-pts li{padding:0!important;background:none!important;box-shadow:none!important;border-radius:16px}
.md-body>em{-webkit-text-fill-color:#fff!important;background:rgba(0,0,0,.4)!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;animation:none!important}

/* v48s: "Start with one idea" — the first Bearback sketch becomes the bear, then the Bruce mark, as you scroll */
.bmo{--s1:clamp(0,calc((var(--t,0) - .24)*9),1);--s2:clamp(0,calc((var(--t,0) - .42)*9),1);--s3:clamp(0,calc((var(--t,0) - .6)*9),1)}
.bmo-stage{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#0a0816;box-shadow:0 44px 90px -30px #000,0 0 0 1px rgba(227,194,122,.38),0 0 80px -34px rgba(227,174,70,.55)}
.bmo .bm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0!important;box-shadow:none!important;-webkit-mask-image:none!important;mask-image:none!important}
.bmo .bm1{opacity:calc(1 - var(--s1));filter:blur(calc(var(--s1)*6px))}
.bmo .bm2{opacity:calc(var(--s1)*(1 - var(--s2)))}
.bmo .bm3{opacity:calc(var(--s2)*(1 - var(--s3)));transform:scale(calc(1 + (1 - var(--s2))*.04))}
.bmo .bm4{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:8% 9%;text-align:center;background:radial-gradient(70% 55% at 50% 38%,rgba(227,174,70,.28),transparent 70%),#0a0816;opacity:var(--s3);transform:translateY(calc((1 - var(--s3))*14px))}
.bmo .bm4 img{position:static;width:78%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 22px rgba(227,174,70,.35))}
.bmo .bm4 p{margin:0;color:#e6dcc4;font-size:clamp(12px,1.15vw,15px);line-height:1.5}
.bmo .bm4 b{display:block;color:#fff6dd;font-size:clamp(15px,1.5vw,20px);line-height:1.25;margin-bottom:8px}
.bmo figcaption{position:static!important;margin:12px 0 0!important;padding:0!important;background:none!important;text-align:center;display:grid;height:1.4em}
.bmo .bc{grid-area:1/1;font:700 10.5px/1.4 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;color:#f6dc98;transition:none}
.bmo .bc1{opacity:calc(1 - var(--s1))}.bmo .bc2{opacity:calc(var(--s1)*(1 - var(--s2)))}.bmo .bc3{opacity:calc(var(--s2)*(1 - var(--s3)))}.bmo .bc4{opacity:var(--s3)}
html:not(.anim) .bmo .bm3{opacity:1}html:not(.anim) .bmo .bm1,html:not(.anim) .bmo .bm2,html:not(.anim) .bmo .bm4{display:none}
@media(prefers-reduced-motion:reduce){.bmo .bm1{filter:none}}

/* v48t: Gel controls bounce on their own until you touch one, and invite a try */
.gel-row.idle-on:not(.touched) .gp{animation:gpBounce 3.8s cubic-bezier(.3,.7,.3,1) infinite}
.gel-row.idle-on:not(.touched) .gp:nth-child(2){animation-delay:.3s}.gel-row.idle-on:not(.touched) .gp:nth-child(3){animation-delay:.6s}.gel-row.idle-on:not(.touched) .gp:nth-child(4){animation-delay:.9s}.gel-row.idle-on:not(.touched) .gp:nth-child(5){animation-delay:1.2s}
@keyframes gpBounce{0%,46%,100%{transform:none}8%{transform:translateY(-12px) scale(.97,1.05)}16%{transform:translateY(0) scale(1.07,.9)}24%{transform:translateY(-5px) scale(.99,1.02)}32%{transform:translateY(0) scale(1.02,.97)}40%{transform:none}}
.gel-row.idle-on:not(.touched) .gb-sw b{animation:gpSw 3.8s ease-in-out infinite .6s}
@keyframes gpSw{0%,50%,100%{transform:none}62%,80%{transform:translateX(26px)}}
.gel-row.idle-on:not(.touched) .gb-sl i{animation:gpSl 3.8s ease-in-out infinite .9s}
@keyframes gpSl{0%,50%,100%{transform:none}64%,82%{transform:translateX(34px)}}
.gel-try{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 22px;font:700 12px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f6dc98;transition:opacity .5s}
.gel-try i{width:12px;height:12px;border-radius:50%;background:#ffe29a;box-shadow:0 0 0 0 rgba(255,226,154,.7);animation:gpPing 1.8s ease-out infinite}
@keyframes gpPing{to{box-shadow:0 0 0 16px rgba(255,226,154,0)}}
.gel-row.touched+.gel-try{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.gel-row .gp,.gel-row .gb-sw b,.gel-row .gb-sl i,.gel-try i{animation:none!important}}

/* v48u: the real Tribe sign-in as the "two glasses" example */
.lay-ex:has(.lay-real){grid-template-columns:1fr 340px;justify-content:space-between}
.lay-real{container-type:inline-size;aspect-ratio:640/1217;max-height:680px;width:100%;border-radius:34px;background:#07040b;overflow:visible;box-shadow:0 40px 80px -30px #000,0 0 0 1px rgba(227,194,122,.3),0 0 70px -30px rgba(160,90,255,.5)}
.lay-real>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:34px}
.lr-panel{position:absolute;left:6.1%;width:87.8%;top:75%;height:18.9%;border-radius:8cqw;overflow:hidden;
 background:linear-gradient(165deg,rgba(150,60,140,.5),rgba(50,12,70,.62));-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
 box-shadow:inset 0 0 0 .5cqw rgba(215,150,255,.5),inset 0 3cqw 5cqw rgba(255,170,230,.22),inset 0 -4cqw 6cqw rgba(10,0,30,.55),0 0 8cqw rgba(170,70,200,.45),0 4cqw 6cqw -2cqw #000}
.lr-drift{position:absolute;inset:-25%;background:radial-gradient(40% 50% at 20% 25%,rgba(255,130,200,.4),transparent 70%),radial-gradient(40% 50% at 85% 85%,rgba(120,90,255,.45),transparent 70%);animation:lrDrift 9s ease-in-out infinite alternate}
@keyframes lrDrift{to{transform:translate(9%,6%) rotate(10deg)}}
.lr-btn{position:absolute;left:4.5%;width:91%;top:16.4%;height:35.8%;border-radius:2.4cqw;overflow:hidden;display:grid;place-items:center;
 background:linear-gradient(180deg,rgba(150,160,190,.42),rgba(90,100,135,.4));-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2);
 box-shadow:inset 0 0 0 .35cqw rgba(190,205,255,.5),inset 0 .6cqw 0 rgba(255,255,255,.35),0 1.4cqw 3cqw -1cqw rgba(0,0,0,.6);transition:transform .2s}
.lr-btn:hover{transform:scale(.985)}
.lr-mist{position:absolute;inset:-30% -10%;background:radial-gradient(35% 60% at 25% 50%,rgba(255,255,255,.22),transparent 70%),radial-gradient(30% 50% at 70% 40%,rgba(200,220,255,.2),transparent 70%);animation:lrMist 7s ease-in-out infinite alternate}
@keyframes lrMist{to{transform:translateX(16%)}}
.lr-btn b{position:relative;font:700 3.9cqw/1 "BBB Sans",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(90deg,#ff7a3d,#c05a8c,#8b4dff,#7fe8c0,#ffe29a,#ff7a3d);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:lrText 5s linear infinite}
@keyframes lrText{to{background-position:-220% 0}}
.lr-panel p{position:absolute;left:6%;right:6%;top:62%;margin:0;text-align:center;font:3cqw/1.3 "BBB Sans",Arial,sans-serif;color:rgba(220,205,225,.8)}
.lr-fine{position:absolute;left:0;right:0;top:95.4%;margin:0;text-align:center;font:3cqw/1.2 "BBB Sans",Arial,sans-serif;color:rgba(220,210,225,.8)}
.lay-real .lr-t1,.lay-real .lr-t2{position:absolute;z-index:3;padding:1.6cqw 3cqw;border-radius:99px;white-space:nowrap;font:800 2.6cqw/1 "BBB Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-style:normal;background:linear-gradient(180deg,#fff0c4,#e3b04a);-webkit-text-fill-color:#1a1204;color:#1a1204;box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.5)}
.lay-real .lr-t1{right:-6%;top:72%}.lay-real .lr-t2{right:-4%;top:82.5%}
@media(max-width:900px){.lay-ex:has(.lay-real){grid-template-columns:1fr}.lay-real{max-width:340px;margin:0 auto}.lay-real .lr-t1{right:2%}.lay-real .lr-t2{right:2%}}
@media(prefers-reduced-motion:reduce){.lr-drift,.lr-mist,.lr-btn b{animation:none}}
.lay-real .lr-t1{right:-6%;top:71.2%}.lay-real .lr-t2{right:auto;left:-6%;top:71.2%}
.lr-panel{background:linear-gradient(165deg,rgba(105,38,100,.42),rgba(36,8,52,.6))!important;box-shadow:inset 0 0 0 .4cqw rgba(200,140,240,.4),inset 0 3cqw 5cqw rgba(255,170,230,.12),inset 0 -4cqw 6cqw rgba(10,0,30,.55),0 0 6cqw rgba(150,60,190,.35),0 4cqw 6cqw -2cqw #000!important}
.lr-drift{opacity:.7}

/* v48v — phone QA polish */
.lr-btn b{white-space:nowrap}
@media(max-width:520px){
 .pf .product-art.purple .ws2-st{display:none}
 .pf .product-art.purple .ws2{gap:5px}
}
@media(max-width:900px){.bento .pf .product-art.purple,.pf .product-art.purple{aspect-ratio:auto!important;min-height:200px!important;height:auto!important}}
@media(pointer:coarse){
 footer .footer-top a,footer .footer-bottom a{display:flex;align-items:center;min-height:44px}
 .cap-fine a,.announcement a{display:inline-block;padding:12px 6px;margin:-12px -6px}
 .cap-in,.cap-btn{min-height:48px}
 input,select,textarea{font-size:16px}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}

/* v48w — Tribe login: the real screen, untouched; hairline labels */
.lay-real{aspect-ratio:640/1263;max-height:700px;border-radius:30px;background:#06030a}
.lay-real>img{border-radius:30px}
.lr-sheen{position:absolute;left:10%;width:80%;top:77%;height:6.5%;border-radius:2.6cqw;overflow:hidden;pointer-events:none}
.lr-sheen::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);animation:lrSheen 5.5s ease-in-out infinite}
@keyframes lrSheen{0%,20%{left:-40%}70%,100%{left:110%}}
.lr-t{position:absolute;z-index:3;top:64.5%;font:700 2.4cqw/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap;text-shadow:0 1px 6px #000}
.lr-t::after{content:"";position:absolute;top:calc(100% + 1.2cqw);width:1px;height:var(--h);background:rgba(255,255,255,.55)}
.lr-t::before{content:"";position:absolute;top:calc(100% + 1.2cqw + var(--h) - 1.1cqw);width:2.2cqw;height:2.2cqw;border-radius:50%;background:#fff;box-shadow:0 0 2.5cqw rgba(255,255,255,.8)}
.lr-tl{left:15%}.lr-tl::after{left:1.2cqw}.lr-tl::before{left:.1cqw}
.lr-tr{right:14%}.lr-tr::after{right:1.2cqw}.lr-tr::before{right:.1cqw}
@media(prefers-reduced-motion:reduce){.lr-sheen::after{animation:none}}