/* ===================== BBB v41 ===================== */
/* ---------- A. glass stack: 7 layers, richer caption, living environment ---------- */
.s-glass .l1{--z:0}.s-glass .l2{--z:50}.s-glass .l3{--z:100}.s-glass .l4{--z:150}.s-glass .l5{--z:200}.s-glass .l6{--z:250}.s-glass .l7{--z:300}
.s-glass .stage{overflow:hidden}
.gl-env{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.2s ease}
.s-glass.env-on .gl-env{opacity:1}
.s-glass .stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--envg,0);transition:opacity 1.2s;background:radial-gradient(60% 55% at 50% 62%,rgba(var(--wxc,255,214,140),.20),transparent 70%)}
.s-glass .stage>*:not(.gl-env){position:relative;z-index:1}
/* sky is graded by the weather */
.skyart{transition:filter 1.4s ease}
.s-glass[data-wx=rain] .skyart,.s-glass[data-wx=storm] .skyart{filter:saturate(.78) brightness(.82) hue-rotate(-6deg)}
.s-glass[data-wx=fog] .skyart{filter:saturate(.7) brightness(1.08) contrast(.88)}
.s-glass[data-wx=storm] .skyart{filter:saturate(.7) brightness(calc(.7 + var(--fl,0)*.9)) hue-rotate(-10deg)}
.s-glass .l5 .pane{transition:box-shadow .2s}
.s-glass[data-wx=storm] .l5 .pane{box-shadow:inset 0 2px 0 rgba(255,240,200,.55),inset 0 0 0 .5px rgba(255,226,160,.3),0 0 calc(40px + var(--fl,0)*70px) -6px rgba(160,185,255,calc(.35 + var(--fl,0)*.6))}
/* layer 06: gel controls */
.s-glass .l6 .pane{display:flex;align-items:flex-end;gap:clamp(8px,1.6vw,16px);padding:7% 7%;background:linear-gradient(160deg,rgba(255,236,190,.06),rgba(255,236,190,.01));box-shadow:inset 0 0 0 1px rgba(255,226,160,.16)}
.gc{display:inline-flex;align-items:center;gap:.6em;font:700 clamp(9px,1vw,13px)/1 "BBB Sans",Arial,sans-serif;color:#2a1a02;padding:.95em 1.5em;border-radius:999px;background:radial-gradient(120% 150% at 28% 8%,#fff6d2,#e8b84e 52%,#a56f1c);box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -7px 11px rgba(120,66,0,.42),0 9px 18px -5px rgba(0,0,0,.6);transform-origin:50% 100%}
.gc i{width:.8em;height:.8em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.2));box-shadow:0 0 0 1px rgba(80,40,0,.25)}
.gc-sw{width:3.6em;height:2em;padding:0;border-radius:99px;font-size:clamp(9px,1vw,13px);background:linear-gradient(180deg,#d9a53c,#f6d98a);position:relative}
.gc-sw b{position:absolute;left:.22em;top:.22em;width:1.56em;height:1.56em;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff,#fff3d0 55%,#dcb25a);box-shadow:0 2px 5px rgba(0,0,0,.45);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.gc-r{width:3.2em;height:3.2em;font-size:clamp(9px,1vw,13px);padding:0;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.85),rgba(255,226,150,.32) 38%,rgba(120,90,200,.35) 78%);box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.55),inset 0 -8px 12px rgba(40,10,90,.4),0 9px 18px -5px rgba(0,0,0,.6)}
.lyr.l6.on .gc-a{animation:gcPress 2.4s cubic-bezier(.3,1.5,.5,1) infinite}
.lyr.l6.on .gc-sw b{animation:gcSw 2.4s ease-in-out infinite}
.lyr.l6.on .gc-r{animation:gcPress 2.4s .5s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes gcPress{0%,55%,100%{transform:none}18%{transform:translateY(2px) scale(1.035,.88)}}
@keyframes gcSw{0%,40%{transform:none}55%,92%{transform:translateX(1.6em)}100%{transform:none}}
/* caption card */
.gl-now{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;max-width:min(760px,100%)}
.gl-ic{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(255,236,190,.16),rgba(255,236,190,.04));box-shadow:inset 0 0 0 1px rgba(255,226,160,.28),0 10px 24px -12px #000;opacity:0;transform:scale(.8);transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.gl-ic.on{opacity:1;transform:none}
.gl-ic svg{width:30px;height:30px;fill:none;stroke:#ffe29a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gl-ic svg .d{stroke:#fff;opacity:.85;animation:icPulse 2.2s ease-in-out infinite}
@keyframes icPulse{50%{opacity:.25}}
.gl-tx{grid-column:2;min-width:0}
.gl-now:not(:has(.gl-ic.on)) .gl-ic{display:none}
.gl-now .gl-use,.gl-now .gl-wx{display:block;font-style:normal;font-size:13px;line-height:1.45;margin-top:7px;max-width:560px}
.gl-now .gl-use{color:#ffe9a8}
.gl-now .gl-wx{color:#a9c4ff}
.gl-now .gl-use:empty,.gl-now .gl-wx:empty{display:none}
.gl-now .gl-dots{grid-column:1/-1;display:flex;gap:7px;min-height:0;margin-top:14px}
.gl-dots i{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.16);transition:background .3s,width .4s}
.gl-dots i.on{background:#ffd978;width:38px;box-shadow:0 0 12px rgba(255,217,120,.6)}
@media(max-width:700px){
  .gl-now{grid-template-columns:44px 1fr;column-gap:12px}
  .gl-ic{width:44px;height:44px;border-radius:14px}.gl-ic svg{width:24px;height:24px}
  .gl-now span{min-height:0!important;font-size:13px!important}
  .gl-now .gl-wx{display:none}
  .gl-now .gl-use{font-size:12px}
  .gl-now .gl-dots{margin-top:10px}
}
.gl-now .gl-use,.gl-now .gl-wx{font-family:inherit}
@media(min-width:701px){
  .anim .s-glass .layer-stage.free{margin-top:2svh}
  .anim .s-glass .layer-stage.free .stack{width:min(470px,50vw)}
  .anim .s-glass .gl-head{padding-top:10svh}
  .anim .gl-cap{margin-bottom:3svh}
}
@media(min-width:701px) and (max-height:760px){.anim .s-glass .layer-stage.free .stack{width:min(400px,44vw)}}

/* ---------- B. weather lab ---------- */
.gel-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transform-origin:50% 100%;transition:transform .34s cubic-bezier(.3,1.7,.5,1),filter .2s}
.gel-btn.is-down{transform:translateY(2px) scale(1.035,.88);filter:brightness(.965);transition-duration:.08s}
.wxl-sec .try-head{max-width:760px;margin:0 auto 34px;text-align:center}
.wxl-sec .try-head p{color:#cfc6af;line-height:1.55;font-size:clamp(14px,1.4vw,17px)}
.wxl{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr);gap:clamp(18px,2.4vw,34px);align-items:start}
.wxl-stage{position:relative;aspect-ratio:4/3.2;border-radius:28px;overflow:hidden;isolation:isolate;background:#05060a;box-shadow:0 36px 70px -30px #000,0 0 0 1px rgba(227,194,122,.24);touch-action:pan-y}
.wxl-stage canvas,.wxl-fb{position:absolute;inset:0;width:100%;height:100%;display:block}
.wxl-fb{object-fit:cover;opacity:1;transition:opacity .6s}
.wxl-stage.gl-ok .wxl-fb{opacity:0}
.wxl-stage canvas{opacity:0;transition:opacity .5s}
.wxl-stage.gl-ok canvas{opacity:1}
.wxl-pill{position:absolute;left:5.5%;top:6%;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;color:#fff;font:700 clamp(9px,1vw,12px)/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-shadow:0 1px 8px rgba(0,0,0,.6);z-index:2}
.wxl-pill i{width:7px;height:7px;border-radius:50%;background:#ffd978;box-shadow:0 0 10px #ffd978}
.wxl-card{position:absolute;left:5.5%;right:5.5%;bottom:7%;padding:clamp(16px,3vw,30px);border-radius:26px;color:#fff;z-index:2;display:grid;gap:8px;justify-items:start;max-width:520px}
.wxl-card small{font:700 clamp(9px,.9vw,11px)/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.65)}
.wxl-card b{font-size:clamp(24px,4vw,44px);line-height:1.02;letter-spacing:-.04em;font-weight:700;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.wxl-card b em{font-family:var(--serif,Georgia,serif);font-weight:400}
.wxl-card p{margin:0;font-size:clamp(13px,1.3vw,16px);opacity:.95;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.wxl-go{margin-top:6px;padding:.95em 1.7em;border-radius:999px;font:700 clamp(12px,1.1vw,14px)/1 "BBB Sans",Arial,sans-serif;color:#2a1a02;background:radial-gradient(120% 150% at 28% 8%,#fff6d2,#e8b84e 52%,#a56f1c);box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -7px 11px rgba(120,66,0,.42),0 10px 20px -6px rgba(0,0,0,.65)}
.wxl-stage.swap .wxl-card>*,.wxl-stage.swap .wxl-pill span{opacity:0;transform:translateY(8px);transition:opacity .16s,transform .16s}
.wxl-card>*,.wxl-pill span{transition:opacity .35s,transform .35s}
.wxl-badge{position:absolute;right:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:rgba(10,10,14,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#e9e2cf;font:600 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.04em}
.wxl-badge i{width:7px;height:7px;border-radius:50%;background:#58e08a;box-shadow:0 0 8px #58e08a;animation:icPulse 1.8s infinite}
.wxl-stage.no-gl .wxl-badge{display:none}
.wxl-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:9px 16px;border-radius:99px;background:rgba(10,10,14,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:600 12px/1 "BBB Sans",Arial,sans-serif;pointer-events:none;opacity:.0;transition:opacity .5s}
.wxl-stage.gl-ok .wxl-hint{opacity:.85;animation:hintPulse 3s ease-in-out 1s infinite}
.wxl-hint.gone{opacity:0!important;animation:none!important}
@keyframes hintPulse{50%{transform:translate(-50%,-50%) scale(1.05)}}
/* css-only fallback when WebGL is missing */
.wxl-stage.no-gl .wxl-card,.wxl-stage.no-gl .wxl-pill{background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.06));backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.wxl[data-mode=rain] .wxl-stage.no-gl .wxl-fb,.wxl[data-mode=storm] .wxl-stage.no-gl .wxl-fb{filter:saturate(.7) brightness(.8)}
.wxl[data-mode=fog] .wxl-stage.no-gl .wxl-fb{filter:blur(2px) brightness(1.1)}
/* controls */
.wxl-lbl{font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#d3b36a;margin:0 0 10px}
.wxl-lbl:not(:first-child){margin-top:20px}
.wxl-row{display:flex;flex-wrap:wrap;gap:8px}
.wxl-row button,.wxl-tg button{font:700 13px/1 "BBB Sans",Arial,sans-serif;color:#d9cfb5;background:rgba(255,255,255,.06);border:0;box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);border-radius:999px;padding:11px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .3s,color .3s,box-shadow .3s,transform .2s;min-height:42px}
.wxl-row button:hover,.wxl-tg button:hover{background:rgba(255,255,255,.1)}
.wxl-row button[aria-pressed=true]{color:#1a1204;background:linear-gradient(110deg,#e3b04a,#ffe29a 55%,#e3b04a);box-shadow:0 8px 18px -8px rgba(227,174,70,.9)}
.wxl-wx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wxl-tg{display:flex;flex-wrap:wrap;gap:8px}
.wxl-tg i{width:30px;height:18px;border-radius:99px;background:rgba(255,255,255,.18);position:relative;transition:background .3s}
.wxl-tg i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.wxl-tg button[aria-pressed=true] i{background:#e3b04a}
.wxl-tg button[aria-pressed=true] i::after{transform:translateX(12px)}
.wxl-why{margin-top:22px;padding:clamp(16px,2vw,22px);border-radius:20px;background:linear-gradient(150deg,rgba(255,236,190,.09),rgba(255,236,190,.02));box-shadow:inset 0 0 0 1px rgba(227,194,122,.2)}
.wxl-wh{display:block;font:700 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;color:#a9c4ff;margin-bottom:10px}
.wxl-why b{display:block;font-size:24px;letter-spacing:-.03em;margin-bottom:6px}
.wxl-why p{margin:0 0 12px;color:#d6cdb6;font-size:14px;line-height:1.5}
.wxl-why dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;line-height:1.45}
.wxl-why dt{color:#d3b36a;font-weight:700;white-space:nowrap}
.wxl-why dd{margin:0;color:#e9e2cf}
.wxl-cost{margin:12px 0 0!important;font-size:12px!important;color:#9f9680!important}
@media(max-width:900px){
  .wxl{grid-template-columns:minmax(0,1fr)}
  .wxl-stage{aspect-ratio:4/4.4}
  .wxl-card{left:5%;right:5%;bottom:5%}
  .wxl-why dl{grid-template-columns:1fr;gap:2px}.wxl-why dd{margin-bottom:8px}
}
.wxl-card p{color:#fff}
.wxl-card b em{color:#fff2c8}
.wxl-hint{top:20%}
@media(max-width:900px){.wxl-badge{font-size:0;padding:7px 10px}.wxl-badge::after{content:"Live";font-size:11px}.wxl-badge i{margin-right:6px}.wxl-hint{top:22%}}

/* ===== C. Gel lab ===== */
.gel{padding:clamp(60px,9vw,120px) 0}
.gel-head{max-width:760px;margin:0 auto 36px;text-align:center}
.gel-head h2{font-size:clamp(40px,7vw,92px);line-height:.95;letter-spacing:-.045em;margin:12px 0 16px}
.gel-head h2 em{font-style:italic;color:#ffe29a}
.gel-head p{color:#d6cdb6;font-size:clamp(15px,1.5vw,18px);line-height:1.55;margin:0 auto;max-width:620px}
.gel-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,44px);align-items:start}
.gel-stage{position:relative;aspect-ratio:5/4.4;border-radius:28px;overflow:hidden;background:#0b0a12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 80px -40px rgba(0,0,0,.8);touch-action:pan-y;cursor:grab}
.gel-stage:active{cursor:grabbing}
.gel-fb,#gelCv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#gelCv{display:none}.gel-stage.gl-ok #gelCv{display:block}.gel-stage.gl-ok .gel-fb{opacity:0}
.gel-top{position:absolute;left:18px;right:18px;top:16px;display:flex;justify-content:space-between;gap:10px;font:600 12px/1.3 "BBB Sans",Arial,sans-serif;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.7);z-index:3;pointer-events:none}
.gel-top span{opacity:.75}
.gel-pair{position:absolute;left:0;right:0;top:50%;transform:translateY(-52%);display:flex;justify-content:center;gap:clamp(18px,6vw,70px);z-index:2}
.gel-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.gel-bub{width:clamp(104px,15vw,158px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;transform-origin:50% 100%;transition:transform .36s cubic-bezier(.3,1.7,.5,1),filter .2s;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 12px 22px -8px rgba(255,255,255,.55),inset 0 -14px 24px -10px rgba(0,0,0,.35),0 22px 36px -16px rgba(0,0,0,.7);background:rgba(255,255,255,.07)}
.gel-stage:not(.gl-ok) .gel-bub{backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4)}
.gel-bub.is-down{transform:translateY(2px) scale(1.035,.88);filter:brightness(.965);transition-duration:.08s}
.gel-bub:focus-visible{outline:2px solid #ffe29a;outline-offset:4px}
.gel-bear{width:58%;height:58%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));pointer-events:none}
.gel-ink .gel-bear{filter:drop-shadow(0 0 10px rgba(255,255,255,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.gel-cap{font:700 13px/1.25 "BBB Sans",Arial,sans-serif;color:#fff;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.gel-cap small{font-weight:500;opacity:.8;font-size:11.5px}
.gel-menu{position:absolute;left:50%;top:-6px;width:0;height:0;pointer-events:none}
.gm{position:absolute;width:44px;height:44px;margin:-22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 6px 10px -4px rgba(255,255,255,.6);opacity:0;transform:translate(0,40px) scale(.3);transition:transform .45s cubic-bezier(.3,1.7,.5,1),opacity .25s}
.gm svg{width:20px;height:20px;fill:#fff}
.gel-menu.open .gm{opacity:1}
.gel-menu.open .gm1{transform:translate(-62px,-40px) scale(1)}
.gel-menu.open .gm2{transform:translate(0,-76px) scale(1)}
.gel-menu.open .gm3{transform:translate(62px,-40px) scale(1)}
.gel-hud{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:99px;background:rgba(10,8,18,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:3;font:600 10px/1 "BBB Sans",Arial,sans-serif;color:#e8e0cc}
.gh{display:flex;align-items:center;gap:4px}.gh i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}.gh em{font-style:normal;margin-left:4px;opacity:.8}
.gel-ctl{display:flex;flex-direction:column;gap:12px}
.gel-steps{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:12px}
.gel-steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.gel-steps svg{width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(255,226,154,.1);fill:none;stroke:#ffe29a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;box-shadow:inset 0 0 0 1px rgba(227,194,122,.25)}
.gel-steps b{display:block;font-size:16px;margin-bottom:2px}
.gel-steps span{color:#cfc6ae;font-size:13.5px;line-height:1.45}
.gel-parts{margin-top:clamp(40px,6vw,80px)}
.gel-ph{text-align:center;max-width:620px;margin:0 auto 24px}.gel-ph h3{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;margin:8px 0}.gel-ph p{color:#cfc6ae;font-size:15px;line-height:1.5;margin:0}
.gel-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,3vw,42px);padding:clamp(24px,4vw,44px);border-radius:28px;background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.gp{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:90px}.gp small{font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a9a08a}
.gel-btn{--gl:rgba(255,255,255,.55)}
.gb-pill{height:48px;padding:0 26px;border-radius:99px;font:700 15px/1 "BBB Sans",Arial,sans-serif;color:#2a1608;background:linear-gradient(180deg,#ffc27a,#ff8a4a 55%,#e8602c);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),inset 0 10px 14px -6px rgba(255,255,255,.7),inset 0 -10px 14px -8px rgba(120,30,0,.45),0 14px 24px -12px rgba(232,96,44,.9)}
.gb-sw{width:68px;height:38px;border-radius:99px;justify-content:flex-start;padding:3px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 6px 10px -4px rgba(0,0,0,.4);transition:background .3s,transform .34s cubic-bezier(.3,1.7,.5,1)}
.gb-sw b{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#e9dcc5 70%);box-shadow:0 4px 8px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.gb-sw[aria-checked=true]{background:linear-gradient(110deg,#e3b04a,#ffd98a)}.gb-sw[aria-checked=true] b{transform:translateX(30px)}
.gb-sw.is-down b{transform:scaleX(1.25)}.gb-sw[aria-checked=true].is-down b{transform:translateX(24px) scaleX(1.25)}
.gb-sl{position:relative;width:150px;height:14px;border-radius:99px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);cursor:pointer;touch-action:none;margin:12px 0}
.gb-sl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v,50%);border-radius:99px;background:linear-gradient(110deg,#e3b04a,#ffd98a)}
.gb-sl i{position:absolute;top:50%;left:var(--v,50%);width:30px;height:30px;margin:-15px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#e9dcc5 70%);box-shadow:0 5px 10px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.gb-sl.drag i{transform:scale(1.18,.9)}
.gp-chips{display:flex;gap:8px}
.gb-chip{height:38px;padding:0 18px;border-radius:99px;font:700 13px/1 "BBB Sans",Arial,sans-serif;color:#efe8d6;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.gb-chip.on{color:#2a1608;background:linear-gradient(180deg,#ffe29a,#e3b04a);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 8px 14px -8px rgba(227,174,70,.9)}
.gb-bub{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.85),rgba(255,138,74,.9) 45%,rgba(139,77,255,.95));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 14px 22px -10px rgba(139,77,255,.8)}
@media(max-width:900px){
 .gel-grid{grid-template-columns:minmax(0,1fr)}
 .gel-stage{aspect-ratio:4/4.2}
 .gel-top{flex-direction:column;gap:2px}
}
@media(prefers-reduced-motion:reduce){.gel-bub,.gel-btn,.gm{transition:none}}

/* ===== D. Frosted examples: scale with their own width, never overlap ===== */
.gx-ex{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important;gap:clamp(20px,3vw,34px)!important;width:100%;max-width:100%;margin:0 auto 18px}
.ex-card{min-width:0;width:100%;max-width:none;margin:0}
.ex-stage{container-type:inline-size;aspect-ratio:4/3.5!important}
.ex-stage .m-nav{left:5cqw;right:5cqw;top:7cqw;gap:3cqw;padding:2.2cqw 3cqw;font-size:max(10px,3.1cqw)}
.ex-stage .m-logo{width:5.4cqw;height:5.4cqw;flex:none}
.ex-stage .m-nav .m-btn{padding:1.6cqw 3.6cqw}
.ex-stage .m-hero{left:7cqw;bottom:9cqw;font-size:max(24px,10cqw)}
.ex-stage .m-card{left:7cqw;right:7cqw;bottom:7cqw;padding:5cqw 5.5cqw;gap:2cqw;border-radius:6cqw}
.ex-stage .m-card b{font-size:max(18px,6.2cqw)}.ex-stage .m-card small{font-size:max(10px,2.6cqw)}
.ex-stage .m-row{font-size:max(11px,3.1cqw)}.ex-stage .m-row i{width:5.4cqw;height:5.4cqw}
.ex-stage .m-card .m-btn{font-size:max(12px,3.4cqw);padding:2.4cqw 5cqw}
.ex-stage.ph .m-phone{width:auto;height:88%;aspect-ratio:9/17.5;border-radius:7cqw}
.ex-stage.ph .m-phone::before{border-radius:6cqw}
.ex-stage.ph .m-pc{font-size:max(10px,2.8cqw)}.ex-stage.ph .m-pc b{font-size:max(13px,4cqw)}
.ex-stage.ph .m-tab{border-radius:5cqw}
.ex-stage>img{transform:none!important}
.ex-card:hover .ex-stage>img{transform:scale(1.06)!important}
/* the stage tag so each example reads as a real use */
.ex-card figcaption{padding:16px 4px 0;font-size:14.5px}
.ex-card .ex-say{margin:8px 4px 0;font-size:13.5px;line-height:1.45;color:#d6cdb6}
@media(max-width:1000px){.gx-ex{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))!important}.ex-stage{aspect-ratio:16/11!important}}
@media(max-width:640px){.ex-stage{aspect-ratio:4/3.4!important}}

/* ===== E. Headings that read as frosted glass ===== */
html.anim .frost-h{-webkit-text-stroke:1px rgba(255,255,255,.34);paint-order:stroke fill;
 background-image:linear-gradient(100deg,rgba(236,244,255,.9) 0,rgba(236,244,255,.9) var(--a),#fff4cf calc(var(--a) + 5%),rgba(255,214,120,.5) calc(var(--a) + 11%),rgba(236,244,255,.16) calc(var(--a) + 26%),rgba(236,244,255,.09) 100%)!important;
 text-shadow:none;filter:blur(calc((1 - var(--gx))*6px)) drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 10px 26px rgba(150,190,255,.28))!important}
html.anim .frost-h em{-webkit-text-stroke:1px rgba(255,236,190,.5)}
.ex-stage{width:100%;height:auto!important;max-width:100%}
.ex-stage .m-hero{bottom:6cqw}.ex-stage .m-nav{top:5cqw}
@media(max-width:900px){.gx-ex{grid-template-columns:minmax(0,600px)!important;justify-content:center}}

/* ===== F. Brand tester: weather + gel ===== */
.bd-chip{font:700 12.5px/1 "BBB Sans",Arial,sans-serif;padding:9px 14px;border-radius:99px;color:#efe8d6;background:rgba(255,255,255,.1);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:pointer}
.bd-chip[aria-pressed=true]{color:#1a1204;background:linear-gradient(110deg,#e3b04a,#ffe29a 55%,#e3b04a)}
.bd-wxc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.bd-nav,.bd-pane{z-index:2}
.bd-stage[data-g=gel] .bd-go{background:linear-gradient(180deg,rgba(255,255,255,.95),rgb(var(--b)) 60%);color:#1a1204;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),inset 0 8px 10px -5px #fff,inset 0 -8px 10px -6px rgba(0,0,0,.3),0 12px 20px -10px rgb(var(--b));cursor:pointer;transform-origin:50% 100%;transition:transform .34s cubic-bezier(.3,1.7,.5,1)}
.bd-stage[data-g=gel] .bd-go.is-down{transform:translateY(2px) scale(1.035,.88);transition-duration:.08s}

/* ===== G. Idle loop in glass: city shows through the pane ===== */
.vd.glassy .vd-pane{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:none!important;overflow:visible!important;isolation:auto;z-index:auto;filter:none;transform:none}
.vd.glassy .vd-pane::before{content:"";position:absolute;inset:0;border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(7px) saturate(1.35);backdrop-filter:blur(7px) saturate(1.35);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),inset 0 14px 24px -12px rgba(255,255,255,.35),0 24px 40px -22px rgba(0,0,0,.8)}
.vd.glassy .vd-pane video{border-radius:30px;mix-blend-mode:screen;opacity:1;filter:brightness(1.15) contrast(1.15)}
.vd.glassy .vd-pane .vd-txt{z-index:3}
.vd.glassy .vd-bg{filter:brightness(1) saturate(1.1)}

/* ===== H. Beats 02-04 ===== */
.bs b{color:#ffe29a}
.bs-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bs-chips li{font:700 12px/1 "BBB Sans",Arial,sans-serif;padding:9px 13px;border-radius:99px;color:#ffe29a;background:rgba(255,226,154,.1);box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
.wd-deck{position:relative;aspect-ratio:4/4.6;border-radius:22px;overflow:hidden;background:#0b0a12;box-shadow:0 44px 90px -30px #000,0 0 0 1px rgba(227,194,122,.38)}
.wd-s{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .7s,transform 1.2s}
.wd-s.on{opacity:1;transform:none}
.wd-s img{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:none!important;mask-image:none!important;border-radius:0!important;box-shadow:none!important}
.wd-s b{position:absolute;left:14px;bottom:14px;right:14px;font:800 clamp(17px,2vw,24px)/1.1 "BBB Sans",Arial,sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 16px #000}
.wd-s::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 45%)}.wd-s b{z-index:2}
.wd-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}.wd-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,226,154,.3);transition:.3s}.wd-dots i.on{background:#ffe29a;transform:scale(1.5)}
.fin-tabs{display:flex;gap:6px;justify-content:center;margin-bottom:10px;position:relative;z-index:3}
.fin-tabs button{font:700 12px/1 "BBB Sans",Arial,sans-serif;padding:9px 14px;border-radius:99px;border:0;cursor:pointer;color:#efe8d6;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.fin-tabs button[aria-pressed=true]{color:#1a1204;background:linear-gradient(110deg,#e3b04a,#ffe29a)}
.fin-stage{position:relative;aspect-ratio:1/1;border-radius:22px;background:radial-gradient(circle at 50% 40%,rgba(255,226,154,.14),rgba(10,8,18,.9) 70%);box-shadow:0 44px 90px -30px #000,0 0 0 1px rgba(227,194,122,.38);overflow:hidden}
.fin-s{position:absolute;inset:6%;width:88%;height:88%;display:none}
.fin[data-k=product] .fin-s[data-k=product],.fin[data-k=campaign] .fin-s[data-k=campaign],.fin[data-k=screen] .fin-s[data-k=screen]{display:block}
.fin .l1,.fin .l2,.fin .l3,.fin .l4{opacity:0}
.fin-ship{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:6px;font:800 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;padding:8px 12px;border-radius:99px;color:#0b2a18;background:linear-gradient(110deg,#7be39a,#c6ffd6)}
.fin-ship svg{width:14px;height:14px;fill:none;stroke:#0b2a18;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fin-steps{list-style:none;display:flex;justify-content:space-between;margin:12px 4px 0;padding:0;font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7d765f}
.fin-steps li{opacity:.55;transition:.3s}.fin-steps li.on{opacity:1;color:#ffe29a}
.fin.run .l1{animation:fnl1 8s infinite}.fin.run .l2{animation:fnl2 8s infinite}.fin.run .l3{animation:fnl3 8s infinite}.fin.run .l4{animation:fnl4 8s infinite}
@keyframes fnl1{0%{opacity:0}6%,20%{opacity:1}30%,100%{opacity:0}}
@keyframes fnl2{0%,18%{opacity:0}28%,96%{opacity:1}100%{opacity:0}}
@keyframes fnl3{0%,46%{opacity:0}58%,96%{opacity:1}100%{opacity:0}}
@keyframes fnl4{0%,72%{opacity:0;transform:scale(.7)}80%{opacity:1;transform:scale(1.08)}86%,96%{opacity:1;transform:none}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.fin .l2,.fin .l3,.fin .l4{opacity:1}.fin .l1{opacity:0}}

/* ===== Gel: Bespoke O logo, diffusion edge ===== */
.gel-logo{width:60%;height:60%;display:block;background:url(assets/bespoke-o.png) center/contain no-repeat;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4));pointer-events:none}
.gel-logo-ink{background-image:linear-gradient(180deg,var(--i0,#ff7a3d),var(--i1,#c05a8c) 50%,var(--i2,#8b4dff)),url(assets/bespoke-o.png);background-size:100% 100%,contain;background-repeat:no-repeat;background-position:center;background-blend-mode:color,normal;-webkit-mask:url(assets/bespoke-o.png) center/contain no-repeat;mask:url(assets/bespoke-o.png) center/contain no-repeat;filter:saturate(1.7) drop-shadow(0 0 10px color-mix(in srgb,var(--i1,#c05a8c) 70%,transparent)) drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.gel-flat{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 22px 36px -16px rgba(0,0,0,.7);background:rgba(255,255,255,.05)}
.gel-ink::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,transparent 58%,color-mix(in srgb,var(--i1,#c05a8c) 55%,transparent) 100%);
 -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);
 -webkit-mask:radial-gradient(circle,transparent 52%,#000 80%);mask:radial-gradient(circle,transparent 52%,#000 80%);
 box-shadow:inset 0 0 26px 2px color-mix(in srgb,var(--i1,#c05a8c) 65%,transparent)}
.gel-ink{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.22),rgba(255,255,255,.06))}
html.anim .s-flow .beat .wd-s img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
html.anim .s-flow .beat .wd figcaption,html.anim .s-flow .beat .fin figcaption{position:static!important;margin:10px 0 0!important;padding:0!important;background:none!important;border-radius:0!important;text-align:center;left:auto;right:auto;bottom:auto}
.fin-steps{margin-bottom:0}
.bs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:flex-end}
.bs-c{font:700 12px/1 "BBB Sans",Arial,sans-serif;padding:9px 13px;border-radius:99px;color:#ffe29a;background:rgba(255,226,154,.1);box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}

/* ===== I. Film section ===== */
.film-h{font-size:clamp(20px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em;margin:10px auto 0;max-width:min(760px,88vw);color:#f6efdc}
.film-h em{font-style:italic;color:#ffe29a}
.film-re{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:99px;border:1px solid rgba(227,194,122,.4);background:rgba(5,4,3,.6);color:#ffe29a;font:700 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.1em;cursor:pointer;opacity:.0;pointer-events:none;transition:opacity .4s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.film-re svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.anim .film-re{opacity:var(--c)}
.film-re.show{opacity:1!important;pointer-events:auto}
.anim .film-re{pointer-events:auto}
.film-fade{position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(to bottom,transparent,#000);pointer-events:none;z-index:2}
.paid-kit{flex:0 0 auto;width:100%;margin-top:18px;max-width:560px;padding:16px 18px;border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(227,194,122,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:left}
.pk-tag{display:inline-block;font:800 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#1a1204;background:linear-gradient(110deg,#e3b04a,#ffe29a);padding:6px 10px;border-radius:99px;margin-bottom:10px}
.pk-b b{display:block;font-size:18px;letter-spacing:-.02em;color:#fff6dd}
.pk-b p{margin:6px 0 10px;font-size:13px!important;line-height:1.45;color:#d6cdb6;max-width:none!important}
.pk-b em{color:#ffe29a}
.pk-l{font:700 13px/1 "BBB Sans",Arial,sans-serif;color:#ffe29a;text-decoration:none}
@media(max-width:700px){.paid-kit{padding:12px 14px}.pk-b p{font-size:12px!important}}
.anim .film-copy .giant{font-size:clamp(34px,4.8vw,84px)!important;margin-bottom:14px!important}
.anim .film-copy p{font-size:clamp(13px,1.15vw,16px);line-height:1.5;margin-top:0;margin-bottom:10px}
.anim .film-copy .film-cta{gap:14px 26px;margin-top:6px}
.anim .film-copy .muted{font-size:12px}
.paid-kit{margin-top:6px}
@media(max-height:760px){.anim .film-copy .muted{display:none}}
.film-cta{align-content:flex-start}
@media(max-width:700px){.film-cta .nb-mock{display:none}.anim .film-copy{justify-content:center;padding-top:70px}.anim .film-copy .giant{font-size:32px!important}.anim .film-copy .muted{display:none}}
.film-copy .film-cta{flex:none!important;height:auto!important}
.paid-kit{align-self:flex-start;height:fit-content}
.anim .film{height:calc((52 + 48*var(--g))*1svh)!important;top:calc(50% + (1 - var(--g))*7%)!important}
.anim .film-label{top:10%!important}
.film-h{font-size:clamp(18px,2.1vw,30px)}
@media(max-width:700px){.anim .film-label{top:9%!important}.film-h{font-size:19px}}

/* ===== J. Work section ===== */
.anim .work{height:calc(13*68svh)}
.wk-dt{filter:blur(1.6px) brightness(.78) saturate(1.05)!important;opacity:.7!important}
.wk-dt video,.wk-dt img{display:block;width:100%;aspect-ratio:var(--ar,1);object-fit:cover;border-radius:16px;background:#07050a}
.work .wk-left .eyebrow,.work .wk-lead,.work .wk-cta{opacity:var(--wv,1);transform:translateY(calc((1 - var(--wv,1))*26px));filter:blur(calc((1 - var(--wv,1))*8px))}
.work .wk-logos{opacity:var(--wl,1);transform:translateY(calc((1 - var(--wl,1))*34px));filter:blur(calc((1 - var(--wl,1))*10px))}
.work .wk-lead{--wv:var(--wk,1)}.work .wk-cta{--wv:var(--wk2,1)}.work .wk-left .eyebrow{--wv:var(--wi,1)}
.wk-mark:not(.img):not(.named) .wk-t{font-size:clamp(50px,8.6vw,150px)}

/* ===== K. Made with intention ===== */
.rb{display:grid;gap:clamp(30px,5vw,64px);margin-top:34px}
.rb-frame{margin:0;border-radius:22px;overflow:hidden;background:#0a0810;box-shadow:0 50px 100px -40px #000,0 0 0 1px rgba(227,194,122,.3),0 0 90px -40px rgba(227,174,70,.5)}
.rb-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:linear-gradient(#1b1824,#121019);border-bottom:1px solid rgba(255,255,255,.08)}
.rb-bar i{width:10px;height:10px;border-radius:50%;background:#4a4658}.rb-bar i:nth-child(1){background:#ff6b5f}.rb-bar i:nth-child(2){background:#ffbd2e}.rb-bar i:nth-child(3){background:#2bc840}
.rb-url{margin-left:10px;flex:1;max-width:340px;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.07);font:600 12px/1 "BBB Sans",Arial,sans-serif;color:#cfc6af}
.rb-rec{margin-left:auto;display:flex;align-items:center;gap:7px;font:800 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;color:#ffe29a}
.rb-rec em{width:8px;height:8px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d;animation:rbp 1.6s ease-in-out infinite}@keyframes rbp{50%{opacity:.35}}
.rb-screen{position:relative;aspect-ratio:16/8}
.rb-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rb-glass{position:absolute;left:clamp(14px,3vw,40px);bottom:clamp(14px,3vw,36px);max-width:min(420px,70%);padding:clamp(14px,2vw,24px);border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),inset 0 14px 22px -12px rgba(255,255,255,.4),0 24px 40px -22px #000;color:#fff}
.rb-glass small{display:block;font:800 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#ffe29a;margin-bottom:8px}
.rb-glass b{display:block;font-size:clamp(18px,2.4vw,32px);letter-spacing:-.03em;line-height:1.05}
.rb-glass span{display:block;margin-top:6px;font-size:clamp(12px,1.2vw,15px);opacity:.9}
.rb-frame figcaption{padding:12px 16px;font-size:13px;color:#a89f88;background:#0d0b14}
.rb-why{display:grid;gap:22px}
.rb-why h3{font-size:clamp(30px,4.6vw,60px);line-height:1;letter-spacing:-.04em;margin:6px 0 4px}
.rb-why h3 em{font-style:italic;color:#ffe29a}
.rb-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2.4vw,28px)}
.rb-card{position:relative;margin:0}
.rb-card>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -28px #000,0 0 0 1px rgba(227,194,122,.25)}
.rb-box{position:absolute;left:5%;bottom:calc(5% + 76px);padding:14px 18px;min-width:44%;border-radius:12px;color:#fff;font-family:"BBB Sans",Arial,Helvetica,sans-serif}
.rb-box small{display:block;font-size:10px;letter-spacing:.16em;opacity:.8}.rb-box b{display:block;font-size:22px;letter-spacing:-.03em;margin-top:4px}
.rb-card.flat .rb-box{background:#26262b;border:1px solid #45454d}
.rb-card.glass .rb-box{border-radius:22px;background:linear-gradient(150deg,rgba(255,200,120,.3),rgba(255,255,255,.07));-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45),inset 0 12px 20px -10px rgba(255,255,255,.45),0 20px 34px -18px #000}
.rb-orb{position:absolute;right:6%;top:6%;width:26%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 0 34px rgba(150,120,255,.55)}
.rb-orb video{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen}
.rb-card figcaption{padding:12px 4px 0;color:#bdb49e;font-size:14px;line-height:1.45}.rb-card figcaption b{display:block;color:#fff6dd;font-size:17px;margin-bottom:2px}
.rb-card.flat figcaption b{color:#bdb49e}
.rb-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;counter-reset:rr}
.rb-rules li{counter-increment:rr;padding:16px 18px;border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);color:#cfc6ae;font-size:14px;line-height:1.5}
.rb-rules li::before{content:counter(rr);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;margin-bottom:10px;background:linear-gradient(110deg,#e3b04a,#ffe29a);color:#1a1204;font:800 12px/1 "BBB Sans",Arial,sans-serif}
.rb-rules b{display:block;color:#fff6dd;font-size:16px;margin-bottom:4px}
.rb-sheet{margin:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center}
.rb-sheet img{width:100%;display:block;border-radius:22px;box-shadow:0 30px 60px -28px #000,0 0 0 1px rgba(227,194,122,.25)}
.rb-sheet b{display:block;font-size:clamp(24px,3vw,38px);letter-spacing:-.03em;line-height:1.05;margin:8px 0 12px;color:#fff6dd}
.rb-sheet p{color:#cfc6ae;font-size:15px;line-height:1.55;margin:0 0 14px}
.rb-sheet ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rb-sheet li{font:700 12px/1 "BBB Sans",Arial,sans-serif;padding:9px 13px;border-radius:99px;color:#ffe29a;background:rgba(255,226,154,.1);box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
@media(max-width:800px){.rb-sheet{grid-template-columns:1fr}.rb-screen{aspect-ratio:16/10}.rb-rec{display:none}.rb-box{bottom:calc(5% + 90px)}}
.rb-screen{aspect-ratio:16/10!important}
.rb-screen video{object-position:50% 0}
.rb-minis{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(14px,2vw,24px);margin-top:calc(clamp(30px,5vw,64px)*-.4)}
.rb-mini{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#07050a;box-shadow:0 30px 60px -30px #000,0 0 0 1px rgba(227,194,122,.28)}
.rb-mini video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}.rb-mini.tall video{aspect-ratio:auto}
.rb-mini figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent)}
.rb-mini small{display:block;font:700 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;color:#ffe29a}.rb-mini b{display:block;margin-top:5px;font-size:16px;color:#fff6dd}
@media(max-width:700px){.rb-minis{grid-template-columns:1fr}.rb-mini.tall{max-height:70svh}}
.rb-minis{grid-auto-rows:clamp(220px,28vw,360px);align-items:stretch}
.rb-mini video,.rb-mini.tall video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
@media(max-width:700px){.rb-minis{grid-auto-rows:auto}.rb-mini{aspect-ratio:16/10}.rb-mini.tall{aspect-ratio:9/14;max-height:none}}

/* ===== L: tighter toolbox tiles + live glass tile + character sheet ===== */
.bento{gap:18px!important}
.bento .product{padding:10px 10px 16px!important;border-radius:20px}
.bento .product-art,.bento .b-guide .product-art,.bento .b-work .product-art,.bento .b-glass .product-art,.bento .b-char .product-art,.bento .b-check .product-art,.bento .b-kit .product-art{aspect-ratio:16/10!important;border-radius:14px}
.bento .product-meta{font-size:12px;margin:12px 4px 0!important}
.bento .product h3{font-size:clamp(18px,1.55vw,22px)!important;margin:10px 4px 0!important;line-height:1.15}
.bento .product p{font-size:14px!important;line-height:1.5!important;margin:6px 4px 12px!important}
.bento .product .text-link{margin-left:4px;font-size:14px}
.bento .product[data-category=free] .product-meta strong{font-size:11.5px!important;padding:6px 14px!important}
.bento .product:not([data-category=free]) .product-meta strong{font-size:11px!important;padding:5px 12px!important}
.bento .product-art img{height:90%!important}
.bento .workshop-art{width:80%!important}
.ptype{font-size:9.5px!important;padding:5px 9px!important}
/* live glass tile */
.tg{position:absolute!important;inset:0;overflow:hidden;border-radius:inherit;display:block;container-type:inline-size}
.tg>*{position:absolute}
.tg-sky{inset:-4%;background:url(assets/glass-sky.webp) center/cover;animation:tgPan 22s ease-in-out infinite alternate}
@keyframes tgPan{to{transform:translateX(-3%) scale(1.05)}}
.tg-rain{inset:0;background:repeating-linear-gradient(104deg,transparent 0 9px,rgba(220,230,255,.5) 9px 10px,transparent 10px 23px);background-size:60px 140px;-webkit-mask:linear-gradient(#000,transparent 90%);mask:linear-gradient(#000,transparent 90%);opacity:.5;animation:tgRain .9s linear infinite}
@keyframes tgRain{to{background-position:-14px 140px}}
.tg-frost{left:7%;right:7%;top:14%;bottom:14%;border-radius:16px;background:linear-gradient(150deg,rgba(255,240,205,.16),rgba(255,240,205,.04));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,244,214,.6),inset 0 0 0 1px rgba(255,236,190,.2),0 20px 40px -18px #000;animation:tgBlur 6s ease-in-out infinite}
@keyframes tgBlur{0%,100%{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}50%{-webkit-backdrop-filter:blur(3px) saturate(1.1);backdrop-filter:blur(3px) saturate(1.1)}}
.tg-card{left:12%;top:24%;width:50%;display:flex;flex-direction:column;gap:5px;color:#fff6e0}
.tg-card small{font-size:clamp(6px,2cqw,9px);letter-spacing:.2em;color:#e3c27a;font-weight:700}
.tg-card b{font-size:clamp(14px,5.6cqw,26px);line-height:1.05;font-weight:700}
.tg-card em{font-family:"BBB Serif",Georgia,serif;font-weight:400;color:#f5dc9a}
.tg-btn{margin-top:6px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:clamp(8px,2.6cqw,12px);font-weight:700;color:#1a1204;padding:.55em 1.1em;border-radius:99px;background:linear-gradient(180deg,#fff0c4,#e3b04a);box-shadow:0 6px 16px -4px rgba(227,174,70,.7),inset 0 1px 0 #fff;animation:tgPress 3.2s ease-in-out infinite}
.tg-btn i{width:.8em;height:.8em;border-radius:50%;background:#1a1204;opacity:.8}
@keyframes tgPress{0%,70%,100%{transform:none}78%{transform:scale(1.035,.88) translateY(2px)}90%{transform:scale(1.02,.96)}}
.tg-sheen{position:absolute;inset:-20% -40%;background:linear-gradient(100deg,transparent 40%,rgba(255,246,220,.28) 50%,transparent 60%);animation:tgSheen 6s ease-in-out infinite;pointer-events:none}
@keyframes tgSheen{0%{transform:translateX(-60%)}60%,100%{transform:translateX(120%)}}
.tg-rip{width:14%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,236,190,.7);opacity:0;left:60%;top:28%;animation:tgRip 4.2s ease-out infinite}
.tg-rip.r2{left:30%;top:60%;animation-delay:2.1s}
@keyframes tgRip{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.tg-lbl{left:12px;bottom:10px;display:flex;gap:6px}
.tg-lbl 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}
/* character sheet */
.cs{position:absolute!important;inset:0;display:flex;flex-direction:column;padding:3.2% 3.5% 3%;gap:2%;container-type:inline-size;background:linear-gradient(180deg,#171309,#0b0804)}
.cs-h{display:flex;justify-content:space-between;font-size:clamp(7px,1.9cqw,10px);letter-spacing:.16em;font-weight:700;color:#e3c27a;border-bottom:1px solid rgba(227,194,122,.3);padding-bottom:1.6%}
.cs-h span:last-child{color:#a99d82}
.cs-g{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;gap:1.4%}
.cs-c{position:relative;display:block;border-radius:8px;background:#23252f;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(227,194,122,.12);animation:csPick 10s infinite;animation-delay:calc(var(--n,0)*1s)}
.cs-c b{position:absolute;inset:0 0 14% 0;background:url(assets/poses.jpg) calc(var(--x)*1%) calc(var(--y)*1%)/500% 200% no-repeat}
.cs-c u{position:absolute;left:0;right:0;bottom:0;text-align:center;text-decoration:none;font-size:clamp(5px,1.35cqw,8px);color:#cfc8b6;padding:2px 0;white-space:nowrap}
@keyframes csPick{0%,10%{box-shadow:inset 0 0 0 1.5px #f3d98f,0 0 14px rgba(227,174,70,.5);filter:none}12%,100%{filter:brightness(.72) saturate(.85)}}
.cs-c:nth-child(1){--n:0}.cs-c:nth-child(2){--n:1}.cs-c:nth-child(3){--n:2}.cs-c:nth-child(4){--n:3}.cs-c:nth-child(5){--n:4}.cs-c:nth-child(6){--n:5}.cs-c:nth-child(7){--n:6}.cs-c:nth-child(8){--n:7}.cs-c:nth-child(9){--n:8}.cs-c:nth-child(10){--n:9}
@media(prefers-reduced-motion:reduce){.tg *,.cs-c{animation:none!important}}

/* ===== M: kit bundle, Keep/Change/Check cover, walk-away chips ===== */
.wy{margin:2px 4px 14px;padding:10px 12px;border-radius:12px;border:1px solid rgba(227,194,122,.32);background:linear-gradient(160deg,rgba(227,174,70,.13),rgba(227,174,70,.03));box-shadow:inset 0 1px 0 rgba(255,236,190,.14)}
.wy-l{display:block;font-size:9.5px;letter-spacing:.16em;font-weight:700;color:#f0cf86;margin-bottom:7px}
.wy ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wy li{font-size:12px;color:#f7f1e4;padding:4px 10px 4px 22px;border-radius:99px;background:rgba(5,4,3,.55);border:1px solid rgba(227,194,122,.22);position:relative;line-height:1.3}
.wy li::before{content:"";position:absolute;left:9px;top:50%;width:5px;height:9px;border:solid #e3b04a;border-width:0 2px 2px 0;transform:translateY(-62%) rotate(45deg)}
/* kit bundle */
.bento .kit-art{display:none!important}
.kb{position:absolute!important;inset:0;display:flex;flex-direction:column;padding:4% 5% 4.5%;gap:3%;container-type:inline-size;background:radial-gradient(60% 70% at 85% 0%,rgba(227,174,70,.28),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(143,211,255,.12),transparent 70%),#0a0704;overflow:hidden}
.kb::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,240,200,.1) 50%,transparent 60%);animation:tgSheen 7s ease-in-out infinite;pointer-events:none}
.kb-top{display:flex;justify-content:space-between;font-size:clamp(7px,1.9cqw,10px);letter-spacing:.16em;font-weight:700;color:#e3c27a}
.kb-top span:last-child{background:linear-gradient(180deg,#fff0c4,#e3b04a);color:#1a1204;padding:2px 8px;border-radius:99px}
.kb-g{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3%}
.kb .kg{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;border:1px solid rgba(227,194,122,.35);background:linear-gradient(160deg,rgba(255,236,190,.1),rgba(255,236,190,.02));box-shadow:inset 0 1px 0 rgba(255,244,214,.2),0 10px 22px -12px #000;animation:kgFloat 5s ease-in-out infinite;min-height:0}
.kb .k2{animation-delay:-1.2s}.kb .k3{animation-delay:-2.4s}.kb .k4{animation-delay:-3.6s}
@keyframes kgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.kb .kg svg{height:44%;width:auto;fill:none;stroke:#f0cf86;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.kb .kg svg circle{fill:#f0cf86}
.kb .kg b{font-size:clamp(11px,3.6cqw,16px);color:#fff6e0}
.kb .kg small{font-size:clamp(7px,2.1cqw,10.5px);color:#b9ad92}
.kb .k3 .thm .tube{fill:rgba(255,255,255,.05);stroke:#f0cf86}
.kb .k3 .thm .ticks path{stroke:#b9ad92;stroke-width:1.6}
.kb .k3 .thm .bulb{fill:rgba(255,255,255,.05);stroke:#f0cf86}
.kb .k3 .thm .bulb2{stroke:none}
.kb .k3 .thm .hg{fill:url(#thg);stroke:none}
.kb .k3::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:coolGlow 5s ease-in-out infinite}
@keyframes coolGlow{0%,100%{box-shadow:inset 0 0 22px rgba(255,122,61,.35)}50%,75%{box-shadow:inset 0 0 22px rgba(143,211,255,.35)}}
.kb .k4 .ck2{stroke-dasharray:40;animation:kbck 3.4s ease-in-out infinite}
@keyframes kbck{0%{stroke-dashoffset:40}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
/* Keep Change Check cover */
.kcc{position:absolute!important;inset:0;display:flex;flex-direction:column;justify-content:center;gap:5%;padding:5% 6%;container-type:inline-size;background:radial-gradient(70% 80% at 80% 10%,rgba(164,127,52,.35),transparent 70%),#0a0704}
.kcc-h small{display:block;font-size:clamp(7px,2cqw,10px);letter-spacing:.18em;color:#e3c27a;font-weight:700;margin-bottom:4px}
.kcc-h b{display:block;font-size:clamp(17px,6.2cqw,30px);line-height:1.05;color:#fff6e0}
.kcc-h em{font-family:"BBB Serif",Georgia,serif;font-weight:400;color:#f5dc9a}
.kcc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:3%}
.kcc-s{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6% 2% 5%;border-radius:12px;border:1px solid rgba(227,194,122,.3);background:rgba(255,236,190,.05);animation:kccOn 6s infinite}
.kcc-s.s2{animation-delay:2s}.kcc-s.s3{animation-delay:4s}
.kcc-s svg{width:34%;fill:none;stroke:#f0cf86;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kcc-s b{font-size:clamp(11px,3.8cqw,17px);color:#fff6e0}
.kcc-s small{font-size:clamp(7px,2.1cqw,10.5px);color:#b9ad92}
@keyframes kccOn{0%,28%{border-color:#f3d98f;background:rgba(227,174,70,.2);box-shadow:0 0 18px rgba(227,174,70,.35);transform:translateY(-2px)}36%,100%{}}
.kcc-s.s3 .ck{stroke-dasharray:30;animation:kbck 6s infinite;animation-delay:4s}
.kcc-bar{display:block;height:3px;border-radius:3px;background:rgba(227,194,122,.18);position:relative;overflow:hidden}
.kcc-bar::after{content:"";position:absolute;inset:0;width:33%;background:linear-gradient(90deg,#a47f34,#fff0c4);border-radius:3px;animation:kccBar 6s ease-in-out infinite}
@keyframes kccBar{0%{transform:translateX(0)}33%{transform:translateX(100%)}66%{transform:translateX(200%)}100%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.kb *,.kb::after,.kcc *{animation:none!important}}
.bento .product p{flex:none!important}
.bento .wy{margin-top:auto!important}
.bento .product .text-link{margin-top:0!important}
.tg-frost{background:linear-gradient(150deg,rgba(20,12,4,.5),rgba(20,12,4,.22))!important}
.tg-card b{text-shadow:0 2px 10px #000a}.tg-card em{text-shadow:0 2px 10px #000a}

/* ===== N: frosted examples, tightened + animated ===== */
.gx{--fr:.20}
.gx-sl{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:12px 18px;border-radius:999px;border:1px solid rgba(227,194,122,.28);background:rgba(255,236,190,.05)}
.gx-sl label{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.gx-sl b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#f0cf86}
.gx-sl span{font-size:12.5px;color:#b9ad92}
.gx-sl input{width:min(46%,320px);accent-color:#e3b04a}
.gx-sl output{font:700 13px "BBB Sans",Arial,sans-serif;color:#fff6e0;min-width:3ch;text-align:right}
@media(max-width:640px){.gx-sl{flex-wrap:wrap;border-radius:18px}.gx-sl input{width:100%;order:3}}
/* glass: blur follows the slider */
.ex-card[data-m=glass] .m-nav,.ex-card[data-m=glass] .m-card,.ex-card[data-m=glass] .m-pc,.ex-card[data-m=glass] .m-tab{-webkit-backdrop-filter:blur(calc(2px + var(--fr)*26px)) saturate(160%)!important;backdrop-filter:blur(calc(2px + var(--fr)*26px)) saturate(160%)!important;background:linear-gradient(150deg,rgba(var(--b),calc(.14 + var(--fr)*.2)),rgba(255,255,255,calc(.04 + var(--fr)*.08)))!important;border:1px solid rgba(255,244,214,.38)!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -10px 18px -12px rgba(var(--b),.55),0 14px 30px -14px rgba(0,0,0,.6),0 0 30px -14px rgba(var(--b),.7)!important}
/* liquid-style (approximation) */
.ex-card[data-m=liquid] .m-nav,.ex-card[data-m=liquid] .m-card,.ex-card[data-m=liquid] .m-pc,.ex-card[data-m=liquid] .m-tab{-webkit-backdrop-filter:blur(calc(1px + var(--fr)*9px)) saturate(190%) brightness(1.12)!important;backdrop-filter:blur(calc(1px + var(--fr)*9px)) saturate(190%) brightness(1.12)!important;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.12))!important;border:0!important;box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.95),inset -1px -1px 1px -.5px rgba(255,255,255,.45),inset 0 0 22px rgba(255,255,255,.14),0 12px 28px -12px rgba(0,0,0,.45)!important;text-shadow:0 1px 6px rgba(0,0,0,.28)}
.ex-card[data-m=liquid] .m-card{border-radius:7cqw!important}
.ex-card[data-m=liquid] .m-btn{background:rgba(255,255,255,.88)!important;box-shadow:inset 0 1px 1px #fff,0 4px 10px -4px #0006}
.ex-card[data-m=liquid] .m-tab span.on{background:rgba(255,255,255,.34);box-shadow:inset 0 1px 1px rgba(255,255,255,.9)}
.ex-card[data-m=liquid] .sy-liquid{display:inline}
.sy-liquid{display:none}
/* toggle states: plain = grey, glass = gold, liquid = pearl */
.ex-tog button[data-m=plain][aria-pressed=true]{color:#fff;background:linear-gradient(110deg,#55555c,#7b7b83 55%,#55555c)!important;box-shadow:0 4px 12px -6px #000!important}
.ex-tog button[data-m=liquid][aria-pressed=true]{color:#0e1220;background:linear-gradient(110deg,#d9e6ff,#fff 55%,#d9e6ff)!important;box-shadow:0 6px 16px -8px rgba(190,215,255,.9)!important}
.ex-tog{flex-wrap:wrap;border-radius:18px}
.ex-tog button{padding:8px 11px;font-size:11.5px}
/* tighter structure */
.ex-card{padding:10px 10px 14px;border-radius:22px;border:1px solid rgba(227,194,122,.18);background:linear-gradient(170deg,rgba(255,236,190,.06),rgba(255,236,190,.01));box-shadow:inset 0 1px 0 rgba(255,244,214,.12)}
.ex-stage{border-radius:16px!important}
.ex-card figcaption{padding:12px 4px 0!important;font-size:13.5px!important}
.ex-card figcaption b{font-size:16px!important}
.ex-card .ex-say{margin:6px 4px 0!important;font-size:13px!important;min-height:3.9em}
.ex-stage .m-nav{top:5cqw!important}
.ex-stage .m-nav span:not(.m-btn){font-size:max(9.5px,2.8cqw);letter-spacing:.01em}
.ex-stage .m-card{border-radius:5.5cqw}
.ex-stage .m-card small{letter-spacing:.2em;font-weight:700}
/* ambient motion */
.ex-stage>img{animation:exDrift 18s ease-in-out infinite alternate}
@keyframes exDrift{from{scale:1.05;translate:-1.5% 0}to{scale:1.1;translate:1.5% 0}}
.ex-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 50% at var(--lx,30%) 20%,rgba(255,236,190,.22),transparent 70%);animation:exLight 9s ease-in-out infinite alternate;z-index:0}
@keyframes exLight{to{transform:translateX(30%)}}
.ex-stage .m-nav,.ex-stage .m-card,.ex-stage .m-tab,.ex-stage .m-pc{overflow:hidden}
.ex-stage .m-nav::after,.ex-stage .m-card::after,.ex-stage .m-tab::after,.ex-stage .m-pc::after{content:"";position:absolute;inset:-30% -60%;background:linear-gradient(100deg,transparent 42%,rgba(255,246,220,.3) 50%,transparent 58%);transform:translateX(-80%);animation:tgSheen 7s ease-in-out infinite;pointer-events:none}
.ex-stage .m-card::after{animation-delay:-2s}.ex-stage .m-tab::after{animation-delay:-4s}.ex-stage .m-pc::after{animation-delay:-1s}
.ex-card[data-m=plain] .m-nav::after,.ex-card[data-m=plain] .m-card::after,.ex-card[data-m=plain] .m-tab::after,.ex-card[data-m=plain] .m-pc::after{display:none}
.ex-stage .m-card .m-btn,.ex-stage .m-nav .m-btn{animation:tgPress 4s ease-in-out infinite}
.ex-stage .m-nav .m-btn{animation-delay:-1.4s}
.ex-stage .m-tab span{animation:tabLit 6s infinite}
.ex-stage .m-tab span:nth-child(2){animation-delay:1.5s}.ex-stage .m-tab span:nth-child(3){animation-delay:3s}.ex-stage .m-tab span:nth-child(4){animation-delay:4.5s}
.ex-stage .m-tab span.on{background:none;box-shadow:none;opacity:.7}
@keyframes tabLit{0%,22%{opacity:1;background:rgba(255,255,255,.28);box-shadow:0 0 14px rgba(var(--b),.85)}30%,100%{opacity:.65;background:transparent;box-shadow:none}}
.ex-stage .m-row i{animation:exBob 3s ease-in-out infinite}.ex-stage .m-row i:nth-child(2){animation-delay:.3s}.ex-stage .m-row i:nth-child(3){animation-delay:.6s}
@keyframes exBob{50%{transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.ex-stage *,.ex-stage::after,.ex-stage>img{animation:none!important}}
/* frost-in reveal tied to the gold line's arrival */
.gx.gx-pre:not(.gx-in) .gx-sl,.gx.gx-pre:not(.gx-in) .ex-card,.gx.gx-pre:not(.gx-in) .gx-note,.gx.gx-pre:not(.gx-in) #gxBuild{opacity:0;filter:blur(16px)}
.gx.gx-in .gx-sl,.gx.gx-in .ex-card,.gx.gx-in .gx-note,.gx.gx-in #gxBuild{animation:gxFrost 1.5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--gi,0)*.14s)}
.gx.gx-in .ex-card:nth-child(1){--gi:1}.gx.gx-in .ex-card:nth-child(2){--gi:2}.gx.gx-in .ex-card:nth-child(3){--gi:3}.gx.gx-in .gx-note{--gi:4}.gx.gx-in #gxBuild{--gi:5}
@keyframes gxFrost{0%{opacity:0;filter:blur(18px) brightness(1.7)}45%{opacity:1;filter:blur(0) brightness(1.25) drop-shadow(0 0 24px rgba(227,174,70,.55))}62%{filter:blur(3.5px) brightness(1.1)}82%{filter:blur(0) brightness(1.05) drop-shadow(0 0 10px rgba(227,174,70,.25))}100%{opacity:1;filter:none}}
@media(prefers-reduced-motion:reduce){.gx.gx-pre:not(.gx-in) *{opacity:1!important;filter:none!important}.gx.gx-in *{animation:none!important}}
/* brand tester liquid */
.bd[data-m=liquid] .bd-nav,.bd[data-m=liquid] .bd-pane{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.12));-webkit-backdrop-filter:blur(5px) saturate(190%) brightness(1.12);backdrop-filter:blur(5px) saturate(190%) brightness(1.12);box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.95),inset -1px -1px 1px -.5px rgba(255,255,255,.45),inset 0 0 22px rgba(255,255,255,.14),0 12px 28px -12px rgba(0,0,0,.45)}
.gx-codecap{margin:6px 0 4px;font-size:12.5px;color:#b9ad92}
/* ===== O: brand tester as a setup wizard on small screens ===== */
.bd-wz{display:none}
@media(max-width:760px){
 .bd.bd-wiz{padding:14px;gap:14px}
 .bd.bd-wiz .bd-pv{position:sticky;top:70px;z-index:6;background:rgba(10,7,4,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:-4px -4px 0;padding:8px 4px 6px;border-radius:18px}
 .bd.bd-wiz .bd-stage{aspect-ratio:16/9}
 .bd.bd-wiz .bd-pane{padding:12px 14px;bottom:5%}.bd.bd-wiz .bd-pane p{display:none}
 .bd.bd-wiz .bd-pane b{font-size:clamp(16px,5.4vw,22px);margin:5px 0 8px}
 .bd.bd-wiz .bd-nav{padding:6px 8px 6px 12px}
 .bd.bd-wiz .bd-cap{display:none}
 .bd.bd-wiz .bd-tog{margin-bottom:8px}
 .bd.bd-wiz .bd-ctl>p,.bd.bd-wiz .bd-ctl>h3{display:none}
 .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 .bd-wz{display:block}
 .bd-wz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
 .bd-wz-top b{font-size:15px;color:#fff6e0}
 .bd-wz-dots{display:flex;gap:6px}.bd-wz-dots i{width:22px;height:5px;border-radius:5px;background:rgba(227,194,122,.25);transition:background .3s,width .3s}
 .bd-wz-dots i.on{background:#e3b04a;width:30px}.bd-wz-dots i.done{background:rgba(227,176,74,.6)}
 .bd-wz-nav{display:flex;gap:10px;margin-top:14px}
 .bd-wz-nav button{flex:1;min-height:48px;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}
 .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}
 .bd.bd-wiz .bd-f.is-step{animation:wzIn .35s ease both}
 @keyframes wzIn{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}
}

/* ===== P: glass layer ripple, gel diffused edges, iOS-safe edge glow, calmer small gold text ===== */
.eyebrow,.tiny{animation-duration:26s!important}
.s-glass .lyr.l3 .pane{position:relative;overflow:hidden}
.s-glass .lyr.l3 .pane::before,.s-glass .lyr.l3 .pane::after{content:"";position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,244,214,.55);box-shadow:0 0 14px rgba(255,236,190,.3),inset 0 0 14px rgba(255,236,190,.18);transform:translate(-50%,-50%) scale(.1);opacity:0;pointer-events:none;animation:rip3 4.4s cubic-bezier(.2,.6,.3,1) infinite}
.s-glass .lyr.l3 .pane::after{left:28%;top:62%;animation-delay:-2.2s;width:34%}
@keyframes rip3{0%{transform:translate(-50%,-50%) scale(.1);opacity:.9}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
/* gel: soft, diffused edges */
.s-glass .lyr.l4 .pane{position:relative;border-radius:22px;box-shadow:inset 0 0 38px 8px rgba(255,226,160,.22),0 0 26px 4px rgba(227,174,70,.28)!important;background:radial-gradient(70% 60% at 50% 50%,rgba(255,226,160,.22),rgba(255,226,160,.08) 60%,rgba(255,226,160,.02) 100%)!important;animation:gelBreath 4.6s ease-in-out infinite}
.s-glass .lyr.l4 .pane::after{content:"";position:absolute;inset:-9%;border-radius:inherit;border:10px solid rgba(255,214,130,.30);filter:blur(9px);pointer-events:none;animation:gelBreath 4.6s ease-in-out infinite reverse}
@keyframes gelBreath{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}
/* edge & light: glow that survives being selected (Safari flattens outer shadows on filtered 3D layers) */
.s-glass .lyr.l5{overflow:visible}
.s-glass .lyr.l5::before{content:"";position:absolute;inset:-14%;pointer-events:none;background:radial-gradient(60% 56% at 50% 50%,rgba(255,214,130,.45),rgba(227,174,70,.18) 55%,transparent 75%);opacity:.5;transform:translateZ(0);transition:opacity .5s}
.s-glass .lyr.l5.on::before,.layer-stage.hl .lyr.l5.on::before{opacity:1;animation:edgeGlow 3.2s ease-in-out infinite}
.layer-stage.hl .lyr.l5.on .pane{outline-color:rgba(255,236,190,.55);box-shadow:inset 0 2px 0 rgba(255,240,200,.7),inset 0 0 26px 6px rgba(255,214,130,.38),inset 0 -2px 0 rgba(0,0,0,.4)!important}
@keyframes edgeGlow{50%{opacity:.7}}
@media(prefers-reduced-motion:reduce){.s-glass .lyr .pane,.s-glass .lyr .pane::before,.s-glass .lyr .pane::after,.s-glass .lyr.l5::before{animation:none!important}}
@media(max-width:760px){.bd.bd-wiz .bd-tog{flex-wrap:nowrap;width:100%;border-radius:999px}.bd.bd-wiz .bd-tog button{flex:1;padding:9px 4px;font-size:11px}}
.tg-frost{background:linear-gradient(150deg,rgba(20,12,4,.62),rgba(20,12,4,.34))!important}.tg-card em{color:#ffe9a8}

/* ===== Q: layer 06 reads clearly as gel ===== */
.s-glass .l6 .pane{position:relative;padding:12% 7% 7%!important;align-items:center!important;justify-content:space-around;gap:4%}
.s-glass .l6 .gc{font-size:clamp(11px,1.45vw,18px)!important;padding:1.05em 1.7em;background:radial-gradient(120% 140% at 30% 6%,#fffbe0 0,#ffe08a 22%,#e8b13f 58%,#b57a1a 100%);box-shadow:inset 0 3px 1px rgba(255,255,255,.9),inset 0 -10px 14px rgba(140,76,0,.5),inset 0 0 0 1px rgba(255,236,170,.6),0 0 0 .35em rgba(255,214,130,.14),0 0 2.2em rgba(255,200,90,.55),0 12px 22px -6px rgba(0,0,0,.65);position:relative}
.s-glass .l6 .gc::before{content:"";position:absolute;left:12%;right:12%;top:7%;height:36%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
.s-glass .l6 .gc-sw{width:4.2em!important;height:2.3em!important;background:linear-gradient(180deg,#c88f2c,#f7dc8c)!important}
.s-glass .l6 .gc-sw b{width:1.8em!important;height:1.8em!important;left:.25em;top:.25em}
.s-glass .l6 .gc-r{width:3.6em!important;height:3.6em!important}
.s-glass .l6 .gc-tag{position:absolute;left:7%;top:7%;font:600 clamp(9px,1vw,13px)/1.2 "BBB Sans",Arial,sans-serif;color:#ffe9b3;opacity:.75;transition:opacity .4s}
.s-glass .l6 .gc-tag b{display:inline-block;letter-spacing:.14em;color:#1a1204;background:linear-gradient(180deg,#fff0c4,#e3b04a);padding:.25em .7em;border-radius:99px;margin-right:.6em;font-size:.9em}
.s-glass .lyr.l6.on .gc-tag{opacity:1}
.layer-stage.hl .lyr.l6.on .pane{background:linear-gradient(160deg,rgba(255,236,190,.14),rgba(255,236,190,.03))!important}
/* the Book a seat button on the top layer is gel too */
.s-glass .l7 .glass-pill{background:radial-gradient(120% 140% at 30% 6%,#fffdf0,#fbe9b7 40%,#e8c372 100%)!important;color:#2a1a02!important;box-shadow:inset 0 2px 1px #fff,inset 0 -6px 10px rgba(150,100,20,.4),0 0 1.4em rgba(255,214,130,.45),0 8px 16px -6px #000a!important;font-weight:700}
.s-glass .lyr.l5::before{opacity:0}
.s-glass .lyr.l5.on::before{opacity:1}
.layer-stage.hl .lyr:not(.on){opacity:.14!important}
.layer-stage.hl .lyr.l7:not(.on) .pane *{opacity:.3}
.layer-stage.hl .lyr.l6.on{filter:drop-shadow(0 0 22px rgba(255,200,90,.35))}

/* ===== R: packaging showcase ===== */
.pkg{padding:90px 0 60px}
.pkg-head{text-align:center;max-width:720px;margin:0 auto 38px}
.pkg-head h2{margin:.4rem 0 .6rem;font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.04em}
.pkg-head em{font-family:"BBB Serif",Georgia,serif;font-weight:400;color:#f0cf86}
.pkg-head p{color:#cfc6af;font-size:clamp(14px,1.3vw,17px);line-height:1.55;margin:0}
.pkg-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.pk{margin:0;grid-column:span 2;border-radius:20px;padding:10px 10px 14px;border:1px solid rgba(227,194,122,.2);background:linear-gradient(170deg,rgba(255,236,190,.07),rgba(255,236,190,.01));box-shadow:inset 0 1px 0 rgba(255,244,214,.12);opacity:0;transform:translateY(22px);filter:blur(10px);transition:opacity .9s ease calc(var(--i)*.08s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*.08s),filter .9s ease calc(var(--i)*.08s),box-shadow .4s}
.pkg.in .pk{opacity:1;transform:none;filter:none}
.pk.wide{grid-column:span 3}
.pk:hover{box-shadow:inset 0 1px 0 rgba(255,244,214,.2),0 0 40px -14px rgba(227,174,70,.6)}
.pk-i{aspect-ratio:4/3;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 40%,#1c1508,#080604)}
.pk.tall .pk-i{aspect-ratio:4/3}
.pk-i img{max-width:92%;max-height:92%;object-fit:contain;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 16px 20px #000a)}
.pk:hover .pk-i img{transform:scale(1.06) rotate(-1deg)}
.pk figcaption{padding:12px 4px 0;font-size:13.5px;line-height:1.45;color:#bdb49e}
.pk figcaption b{display:block;color:#f6efe0;font-size:16px;margin-bottom:2px}
.pkg-clients{margin:44px auto 0;text-align:center;max-width:900px}
.pkg-clients img{display:block;width:100%;height:auto;margin-top:12px;border-radius:14px;opacity:.9}
.pkg-note{text-align:center;color:#8d8570;font-size:12.5px;margin:18px 0 0}
@media(max-width:900px){.pk,.pk.wide{grid-column:span 3}}
@media(max-width:560px){.pkg-grid{grid-template-columns:1fr}.pk,.pk.wide{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.pk{opacity:1;transform:none;filter:none;transition:none}}
.pk:nth-child(n+6){grid-column:span 3}@media(max-width:900px){.pk:nth-child(n+6){grid-column:span 3}}@media(max-width:560px){.pk:nth-child(n+6){grid-column:auto}}