:root{--bg:#06101b;--bg2:#0a1725;--ice:#dff4ff;--ice2:#9fd6f5;--blue:#6aa9d3;--line:rgba(214,242,255,.16);--text:#eef9ff;--muted:#9ab2c2}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,#17314c 0,#0a1725 34%,#06101b 70%);color:var(--text);font-family:"DM Sans",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}.shell{width:min(1180px,calc(100% - 38px));margin:auto}
.grain{pointer-events:none;position:fixed;inset:0;z-index:100;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.aurora{position:fixed;filter:blur(110px);border-radius:50%;pointer-events:none;opacity:.2}.a1{width:420px;height:420px;background:#3a8bc0;top:100px;left:-160px}.a2{width:520px;height:520px;background:#5985d2;right:-240px;top:580px}
.topbar{position:sticky;top:0;z-index:60;background:rgba(5,15,25,.55);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}.nav{height:74px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.logo{font-family:"Instrument Serif",serif;font-size:31px;letter-spacing:-.04em}.logo span{color:var(--ice2);font-size:17px;margin-left:5px}.nav nav{display:flex;gap:30px;font-size:11px;text-transform:uppercase;letter-spacing:.13em}.nav nav a{color:#b8cfdd}.nav nav a:hover{color:white}.pill{justify-self:end;border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.05)}
.hero{padding:76px 0 88px}.hero-kicker{text-align:center;font-size:10px;letter-spacing:.35em;color:#7ea4bc;margin-bottom:18px}.hero-title-wrap{text-align:center}h1{font-family:"Instrument Serif",serif;font-size:clamp(95px,17vw,210px);font-weight:400;letter-spacing:-.075em;line-height:.72;margin:0;text-shadow:0 0 50px rgba(145,205,240,.13)}h1 span{color:transparent;-webkit-text-stroke:1px rgba(222,244,255,.6)}.script{font-family:"Instrument Serif",serif;font-style:italic;color:#a9d8f4;font-size:clamp(24px,3vw,39px);transform:rotate(-4deg);margin:-4px 0 0 50%}
.hero-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:30px;align-items:end;margin-top:60px}.glass{background:linear-gradient(140deg,rgba(255,255,255,.095),rgba(255,255,255,.025));border:1px solid rgba(219,245,255,.13);backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(0,0,0,.2)}.hero-copy{border-radius:26px;padding:28px}.micro,.overline{font-size:9px;letter-spacing:.2em;color:#77a7c4}.hero-copy h2{font-family:"Instrument Serif";font-size:38px;font-weight:400;line-height:1.06;margin:14px 0 12px}.muted{color:#89a2b1;line-height:1.65;font-size:13px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:23px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 18px;font-size:12px;font-weight:700;transition:.2s}.btn.solid{background:#dff4ff;color:#102233}.btn.solid:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(184,228,255,.15)}.btn.outline{border:1px solid var(--line);background:rgba(255,255,255,.035)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line);margin-top:25px;padding-top:20px}.hero-stats div{display:flex;flex-direction:column}.hero-stats strong{font-family:"Instrument Serif";font-size:22px}.hero-stats span{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#6f8b9c}
.hero-visual{height:440px;position:relative}.frost-card{position:absolute;border:1px solid rgba(230,248,255,.18);background:linear-gradient(145deg,rgba(220,243,255,.14),rgba(144,189,218,.05));backdrop-filter:blur(12px);box-shadow:0 25px 75px rgba(0,0,0,.25);overflow:hidden}.fc1{width:310px;height:390px;border-radius:30px;left:12%;top:5px;transform:rotate(-5deg);padding:18px}.fc2{width:250px;height:310px;border-radius:26px;right:7%;top:60px;transform:rotate(7deg);padding:18px}.tiny{font-size:9px;letter-spacing:.18em;color:#92b5c9}.fc1>img{position:absolute;inset:45px 0 55px;width:100%;height:290px;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(0,0,0,.2))}.hero-sweater{position:absolute;left:25%;top:27%;width:50%;height:48%;border-radius:35px 35px 18px 18px;background:#dceef6;display:grid;place-items:center;box-shadow:0 25px 50px rgba(0,0,0,.18)}.hero-sweater:before,.hero-sweater:after{content:"";position:absolute;width:37%;height:75%;background:inherit;border-radius:20px;top:15px}.hero-sweater:before{left:-26%;transform:rotate(18deg)}.hero-sweater:after{right:-26%;transform:rotate(-18deg)}.hero-sweater span{z-index:2;font-family:"Instrument Serif";font-size:42px;color:#668fa6}.hero-item-meta{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;gap:12px;font-size:11px}.hero-item-meta span{color:#a9cadc}.moon{font-size:100px;color:#cdeeff;opacity:.78;display:grid;place-items:center;height:80%}.caption{position:absolute;bottom:18px;left:20px;font-family:"Instrument Serif";font-style:italic;color:#b7d9eb}.stamp{position:absolute;right:0;bottom:-15px;border:1px solid rgba(211,239,255,.32);border-radius:50%;padding:27px 19px;font-size:9px;line-height:1.6;letter-spacing:.16em;text-align:center;color:#9ec5db;transform:rotate(12deg)}.orb{position:absolute;border-radius:50%;filter:blur(12px)}.orb1{width:160px;height:160px;background:#5ab3e4;left:0;top:120px;opacity:.18}.orb2{width:130px;height:130px;background:#b6eaff;right:0;top:20px;opacity:.12}
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:13px 0;white-space:nowrap;color:#9bc7df;font-size:10px;letter-spacing:.25em}.ticker div{width:max-content;animation:move 28s linear infinite}@keyframes move{to{transform:translateX(-50%)}}
.section{padding:110px 0}.headrow{display:flex;align-items:end;justify-content:space-between;margin-bottom:34px}.overline{font-size:10px;letter-spacing:.21em;color:#77a7c4}h3{font-family:"Instrument Serif";font-weight:400;font-size:clamp(52px,6vw,78px);line-height:.95;letter-spacing:-.04em;margin:8px 0 0}.counter{font-size:10px;letter-spacing:.16em;color:#738fa2}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.loading{grid-column:1/-1;border-radius:20px;padding:45px;text-align:center;color:#8ba8ba;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.card{display:block;min-width:0}.card-art{aspect-ratio:.78;border:1px solid var(--line);border-radius:22px;overflow:hidden;position:relative;background:radial-gradient(circle at 70% 18%,rgba(255,255,255,.2),transparent 24%),linear-gradient(155deg,#18334a 0,#0c1b29 46%,#132638 100%);transition:.25s}.card:nth-child(2n) .card-art{background:linear-gradient(155deg,#112537,#0a1723 60%,#24435c)}.card:hover .card-art{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.22)}.card-art img{width:100%;height:100%;object-fit:contain;padding:10%;filter:drop-shadow(0 20px 24px rgba(0,0,0,.22))}.tag{position:absolute;top:13px;left:13px;border:1px solid rgba(255,255,255,.16);background:rgba(7,17,29,.58);backdrop-filter:blur(8px);padding:7px 10px;border-radius:999px;font-size:8px;letter-spacing:.12em}.fav{position:absolute;right:13px;top:13px;font-size:9px;background:rgba(7,17,29,.58);padding:7px 9px;border-radius:999px;color:#b9d6e6}.card-info{padding:13px 3px 0}.card-top{display:flex;justify-content:space-between;gap:12px}.card-info strong{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-info .price{font-size:11px;color:#9bc1d6;white-space:nowrap}.card-sub{display:flex;gap:10px;margin-top:6px;color:#708c9d;font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.feature{padding:10px 0 70px}.feature-card{min-height:520px;border-radius:34px;overflow:hidden;border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(135deg,#bfe7fa,#77add0 48%,#274b66);color:#0f2636;box-shadow:0 35px 100px rgba(0,0,0,.25)}.feature-copy{padding:65px}.feature-copy .overline{color:#35637e}.feature-copy p{max-width:410px;line-height:1.7;color:#2f5870}.btn.light{background:#0e2536;color:white}.feature-art{position:relative;overflow:hidden}.big-snow{position:absolute;font-size:420px;right:-40px;top:-60px;line-height:1;color:rgba(255,255,255,.33)}.ice-block{position:absolute;left:18%;top:28%;width:230px;height:230px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border-radius:40px;display:grid;place-items:center;font-family:"Instrument Serif";font-size:94px;color:white;transform:rotate(10deg);box-shadow:0 30px 70px rgba(27,69,96,.18)}.feature-note{position:absolute;right:26px;bottom:22px;font-size:9px;letter-spacing:.18em;color:#214b65}
.store-section{padding:110px 0;background:rgba(1,8,14,.4);border-block:1px solid rgba(255,255,255,.04)}.store-head{align-items:end}.store-tools{display:flex;gap:10px}.store-tools input,.store-tools select{font:inherit;font-size:11px;color:#dceef8;background:#0a1825;border:1px solid var(--line);border-radius:999px;padding:11px 15px;outline:none}.store-tools input{width:220px}.store-tools input::placeholder{color:#678496}.store-tools select{cursor:pointer}.store-summary{display:flex;justify-content:space-between;margin:-18px 0 28px;color:#617f91;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.store-grid{grid-template-columns:repeat(4,1fr)}.load-more{display:block;margin:40px auto 0;background:transparent;color:#cfe7f5;border:1px solid var(--line);border-radius:999px;padding:13px 24px;cursor:pointer}
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;padding:110px 0 130px}.about-left i{color:#93cbed}.about-right{border-radius:28px;padding:30px}.group-row{display:flex;align-items:center;gap:14px;margin-bottom:24px}.avatar{width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#92c8e7,#345c75);display:grid;place-items:center;font-family:"Instrument Serif";font-size:24px;background-size:cover;background-position:center}.group-row div:nth-child(2){display:flex;flex-direction:column;gap:4px}.group-row strong{font-size:15px}.group-row span{font-size:11px;color:#8da8b9}.verified{margin-left:auto!important;border:1px solid var(--line);padding:6px 9px;border-radius:999px;color:#9ed4f1!important;font-size:9px!important}.about-right>p{color:#a9bdc9;line-height:1.75;font-size:14px;white-space:pre-line}.shout{margin:24px 0;border-left:1px solid #76b8df;padding:3px 0 3px 18px}.shout>span{font-size:8px;letter-spacing:.18em;color:#6c9dbb}.shout p{font-family:"Instrument Serif";font-size:20px;margin:8px 0;color:#dff3ff}.shout small{color:#718d9d;font-size:9px}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:20px 0;margin:25px 0}.stats div{display:flex;flex-direction:column;gap:4px}.stats strong{font-family:"Instrument Serif";font-size:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats span{font-size:8px;letter-spacing:.12em;color:#7896a8;text-transform:uppercase}
footer{border-top:1px solid var(--line);padding:42px 0 28px;background:#050d16}.footer-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.footer-grid p{font-family:"Instrument Serif";font-style:italic;color:#7996a8}.footer-grid a{justify-self:end;font-size:11px;color:#85a8bb}.legal{text-align:center;color:#405766;font-size:9px;margin-top:25px}
.snow{pointer-events:none;position:fixed;inset:0;z-index:90;overflow:hidden}.snow i{position:absolute;top:-20px;font-style:normal;color:#d8f2ff;animation:fall linear infinite}@keyframes fall{to{transform:translate3d(25px,105vh,0) rotate(220deg)}}
@media(max-width:900px){.nav{grid-template-columns:1fr auto}.nav nav{display:none}.hero-grid{grid-template-columns:1fr}.hero-visual{height:450px}.cards,.store-grid{grid-template-columns:repeat(2,1fr)}.feature-card{grid-template-columns:1fr}.feature-art{min-height:360px}.about{grid-template-columns:1fr}.store-head{align-items:start;gap:25px;flex-direction:column}.store-tools{width:100%}.store-tools input{flex:1}}
@media(max-width:600px){.shell{width:min(100% - 24px,1180px)}.hero{padding-top:55px}.hero-kicker{font-size:8px}h1{font-size:82px}.script{font-size:25px;margin-left:28%;margin-top:8px}.hero-grid{margin-top:42px}.hero-visual{height:360px}.fc1{width:235px;height:305px;left:2%}.fc2{width:190px;height:245px;right:0;top:58px}.hero-item-meta{font-size:9px}.cards,.store-grid{gap:10px}.card-art{border-radius:16px}.section,.store-section{padding:78px 0}.headrow{align-items:start}.feature-copy{padding:38px 26px}.feature-card{min-height:680px}.feature-art{min-height:330px}.ice-block{width:170px;height:170px;font-size:68px}.store-tools{flex-direction:column}.store-tools input,.store-tools select{width:100%}.store-summary{gap:15px}.about{padding:78px 0}.footer-grid{grid-template-columns:1fr;gap:12px;text-align:center}.footer-grid a{justify-self:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.ticker div,.snow i{animation:none}.snow{display:none}}
.fake-item{position:absolute;inset:0;display:grid;place-items:center}
.fake-sweater{width:56%;height:43%;background:#d8ebf4;border-radius:28px 28px 16px 16px;position:relative;box-shadow:0 25px 50px rgba(0,0,0,.18)}
.fake-sweater:before,.fake-sweater:after{content:"";position:absolute;top:18px;width:35%;height:75%;background:inherit;border-radius:20px}
.fake-sweater:before{left:-25%;transform:rotate(17deg)}
.fake-sweater:after{right:-25%;transform:rotate(-17deg)}
.fake-sweater b{position:absolute;inset:0;display:grid;place-items:center;color:#5e8ea9;font-family:"Instrument Serif";font-size:22px;z-index:2}


/* ===== LASTWINTER LATEST DROPS CAROUSEL ===== */
.drops-carousel{
  position:relative;
  margin-top:8px;
  padding:4px 0 34px;
}
.drops-viewport{
  overflow:hidden;
  width:100%;
  mask-image:linear-gradient(
    to right,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}
.drops-track{
  display:flex;
  gap:16px;
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.drops-track .card{
  flex:0 0 clamp(230px,24vw,290px);
  opacity:.3;
  transform:scale(.94);
  filter:blur(.7px);
  transition:
    opacity .45s ease,
    transform .45s ease,
    filter .45s ease;
}
.drops-track .card.is-near{
  opacity:.68;
  transform:scale(.975);
  filter:blur(0);
}
.drops-track .card.is-active{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
}
.drops-track .card-art{
  aspect-ratio:.78;
}
.drops-fade{
  position:absolute;
  top:0;
  bottom:44px;
  width:110px;
  pointer-events:none;
  z-index:5;
}
.drops-fade-left{
  left:-1px;
  background:linear-gradient(90deg,var(--bg),rgba(6,16,27,.84),transparent);
}
.drops-fade-right{
  right:-1px;
  background:linear-gradient(270deg,var(--bg),rgba(6,16,27,.84),transparent);
}
.drops-arrow{
  position:absolute;
  top:44%;
  translate:0 -50%;
  z-index:10;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(220,244,255,.18);
  background:rgba(7,17,29,.7);
  color:#dff4ff;
  backdrop-filter:blur(12px);
  cursor:pointer;
  transition:.2s ease;
  font-size:16px;
}
.drops-arrow:hover{
  transform:scale(1.08);
  background:rgba(223,244,255,.12);
}
.drops-arrow-left{left:10px}
.drops-arrow-right{right:10px}
.drops-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:20px;
}
.drops-dot{
  width:6px;
  height:6px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(216,242,255,.22);
  cursor:pointer;
  transition:.25s ease;
}
.drops-dot.active{
  width:24px;
  background:#a8d7f0;
}
@media(max-width:700px){
  .drops-viewport{
    mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  }
  .drops-track{gap:11px}
  .drops-track .card{flex-basis:72vw}
  .drops-fade{width:45px}
  .drops-arrow{width:38px;height:38px}
  .drops-arrow-left{left:2px}
  .drops-arrow-right{right:2px}
}
@media(prefers-reduced-motion:reduce){
  .drops-track,
  .drops-track .card{
    transition:none!important;
  }
}

/* continuous autoplay rail */
.drops-track{
  transition:none!important;
}
.drops-arrow,
.drops-dots{
  display:none!important;
}
.drops-carousel:hover .drops-track{
  animation-play-state:paused;
}


/* ===== v4 carousel polish ===== */

/* The rail NEVER pauses when hovering. */
.drops-track{
  animation-play-state:running!important;
}

/* Hovered card gently grows from its own center while the rail keeps moving. */
.drops-track .card{
  transform-origin:center center;
  position:relative;
  z-index:1;
  transition:
    opacity .42s ease,
    transform .32s cubic-bezier(.2,.8,.2,1),
    filter .42s ease,
    z-index 0s;
}
.drops-track .card:hover{
  transform:scale(1.065) translateY(-7px)!important;
  opacity:1!important;
  filter:blur(0)!important;
  z-index:12;
}
.drops-track .card:hover .card-art{
  transform:none;
  box-shadow:
    0 26px 60px rgba(0,0,0,.30),
    0 0 45px rgba(133,196,231,.10);
}

/* Softer edge blending: wide multi-stop gradient that dissolves into page bg. */
.drops-viewport{
  overflow:visible;
  clip-path:inset(-40px 0 -55px 0);
  mask-image:none;
  -webkit-mask-image:none;
}
.drops-carousel{
  overflow:hidden;
  margin-left:calc((100vw - min(1180px, calc(100vw - 38px))) / -2);
  margin-right:calc((100vw - min(1180px, calc(100vw - 38px))) / -2);
  padding-left:calc((100vw - min(1180px, calc(100vw - 38px))) / 2);
  padding-right:calc((100vw - min(1180px, calc(100vw - 38px))) / 2);
}
.drops-fade{
  top:-35px;
  bottom:-25px;
  width:clamp(100px,12vw,220px);
  z-index:8;
}
.drops-fade-left{
  left:0;
  background:linear-gradient(
    90deg,
    rgba(6,16,27,1) 0%,
    rgba(6,16,27,.98) 20%,
    rgba(6,16,27,.82) 43%,
    rgba(6,16,27,.42) 68%,
    rgba(6,16,27,.12) 86%,
    rgba(6,16,27,0) 100%
  );
}
.drops-fade-right{
  right:0;
  background:linear-gradient(
    270deg,
    rgba(6,16,27,1) 0%,
    rgba(6,16,27,.98) 20%,
    rgba(6,16,27,.82) 43%,
    rgba(6,16,27,.42) 68%,
    rgba(6,16,27,.12) 86%,
    rgba(6,16,27,0) 100%
  );
}
@media(max-width:700px){
  .drops-fade{width:72px}
  .drops-track .card:hover{
    transform:scale(1.035) translateY(-4px)!important;
  }
}


/* ===== v5 latest-drops cleanup ===== */

/* No edge fade at all. */
.drops-fade{
  display:none!important;
}

/*
  Give scaled cards real room inside the carousel so the hover animation
  doesn't get clipped by the moving rail's frame.
*/
.drops-carousel{
  overflow:hidden;
  padding-top:34px!important;
  padding-bottom:56px!important;
  margin-top:-26px;
  margin-bottom:-34px;
}

.drops-viewport{
  overflow:visible!important;
  clip-path:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  padding-top:22px;
  padding-bottom:32px;
  margin-top:-22px;
  margin-bottom:-32px;
}

/* Keep the moving cards visually clean and allow the hovered card to sit above neighbors. */
.drops-track{
  padding-top:18px;
  padding-bottom:24px;
  margin-top:-18px;
  margin-bottom:-24px;
  isolation:isolate;
}

.drops-track .card{
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

@media (hover:hover) and (pointer:fine){
  .drops-track .card:hover{
    transform:scale(1.07) translateY(-8px)!important;
    z-index:30!important;
  }

  .drops-track .card:hover .card-art{
    border-color:rgba(188,229,250,.34);
    box-shadow:
      0 24px 58px rgba(0,0,0,.34),
      0 0 24px rgba(126,198,237,.16),
      0 0 52px rgba(126,198,237,.10)!important;
  }

  .drops-track .card:hover .card-info{
    text-shadow:0 0 18px rgba(164,218,247,.16);
  }
}

@media(max-width:700px){
  .drops-carousel{
    padding-top:24px!important;
    padding-bottom:42px!important;
    margin-top:-18px;
    margin-bottom:-25px;
  }
}


/* ===== v6 carousel initial composition =====
   Start visually mid-rail immediately, then JS replaces this with the exact measured offset.
   This avoids the awkward first-card-at-the-edge loading frame. */
.drops-track{
  transform:translate3d(-43vw,0,0);
}
.drops-carousel.is-ready .drops-track{
  will-change:transform;
}


/* ===== v7 compact best-sellers dropdown ===== */
.bestsellers-section{
  padding-top:28px!important;
  padding-bottom:72px!important;
}

.bestsellers-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 2px 24px;
  color:var(--text);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  text-align:left;
  cursor:pointer;
}

.bestsellers-toggle h3{
  margin-top:6px;
  font-size:clamp(44px,5vw,66px);
}

.bestsellers-arrow{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:25px;
  line-height:1;
  color:#bfe5f8;
  background:rgba(255,255,255,.025);
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    background .25s ease,
    box-shadow .25s ease;
}

.bestsellers-toggle:hover .bestsellers-arrow{
  background:rgba(200,235,255,.07);
  box-shadow:0 0 25px rgba(126,198,237,.10);
}

.bestsellers-toggle[aria-expanded="true"] .bestsellers-arrow{
  transform:rotate(180deg);
}

.bestsellers-panel{
  overflow:hidden;
}

.bestsellers-panel:not([hidden]){
  animation:bestsellersReveal .38s cubic-bezier(.2,.75,.2,1) both;
}

.bestsellers-panel .cards{
  padding-top:30px;
}

@keyframes bestsellersReveal{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:700px){
  .bestsellers-toggle{
    padding-block:18px 20px;
  }
  .bestsellers-arrow{
    width:42px;
    height:42px;
  }
}


/* ===== v8 centered group info ===== */
.about-centered{
  display:flex!important;
  justify-content:center;
  align-items:center;
  padding-top:92px!important;
  padding-bottom:110px!important;
}

.group-card-centered{
  width:min(680px,100%);
  margin:0 auto;
  border-radius:30px;
  padding:34px 36px;
}

.group-row-centered{
  justify-content:center;
  text-align:left;
}

.group-row-centered .verified{
  margin-left:10px!important;
}

.group-card-centered > p{
  text-align:center;
  max-width:560px;
  margin:22px auto 0;
}

.group-stats-2{
  grid-template-columns:repeat(2,1fr)!important;
  text-align:center;
}

.group-stats-2 div{
  align-items:center;
}

.group-card-centered > .btn{
  display:flex;
  width:max-content;
  margin:24px auto 0;
}

.group-card-centered .shout{
  max-width:560px;
  margin:26px auto 0;
}

@media(max-width:700px){
  .about-centered{
    padding-top:70px!important;
    padding-bottom:82px!important;
  }

  .group-card-centered{
    padding:28px 22px;
  }

  .group-row-centered{
    justify-content:flex-start;
  }

  .group-card-centered > p{
    text-align:left;
  }
}

/* v9: best sellers are always visible */
.bestsellers-toggle,
.bestsellers-arrow{
  display:none!important;
}


/* ===== v10 global UGC hover ===== */
.card{
  position:relative;
  z-index:1;
  transform-origin:center center;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s ease,filter .32s ease;
}
.card .card-art{
  transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .32s ease;
}
.card .card-info{
  transition:transform .32s cubic-bezier(.2,.8,.2,1),text-shadow .3s ease;
}

@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-8px) scale(1.045);
    z-index:40;
    opacity:1!important;
    filter:none!important;
  }
  .card:hover .card-art{
    transform:none!important;
    border-color:rgba(190,231,253,.40);
    box-shadow:
      0 24px 58px rgba(0,0,0,.34),
      0 0 22px rgba(127,201,240,.18),
      0 0 54px rgba(127,201,240,.12)!important;
  }
  .card:hover .card-info{
    transform:translateY(2px);
    text-shadow:0 0 18px rgba(169,221,249,.20);
  }
  .drops-track .card:hover{
    transform:translateY(-8px) scale(1.07)!important;
  }
}


/* ===== v12 seamless LAST WINTER ticker ===== */
.ticker{
  position:relative;
  overflow:hidden;
  height:48px;
  padding:0;
  border-block:1px solid var(--line);
  white-space:nowrap;
}

.ticker-track{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  will-change:transform;
  animation:none!important;
}

.ticker-item{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:20px;
  padding-right:20px;
  color:#9bc7df;
  font-size:10px;
  font-weight:600;
  letter-spacing:.28em;
}

.ticker-snow{
  color:#d7effd;
  font-size:13px;
  letter-spacing:0;
  opacity:.85;
}


/* ===== v13 ticker starts fully populated ===== */
.ticker-track{
  transform:translate3d(0,0,0);
  min-width:220vw;
}


/* ===== v14 premium Roblox CTA ===== */
.roblox-cta{
  position:relative;
  overflow:hidden;
  min-width:112px;
  gap:8px;
  padding:11px 16px 11px 14px!important;
  border:1px solid rgba(196,230,248,.22)!important;
  background:
    linear-gradient(135deg,rgba(210,239,255,.12),rgba(94,144,176,.08))!important;
  color:#e9f8ff!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .32s ease,
    background .32s ease;
}

.roblox-cta::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(
    110deg,
    transparent 22%,
    rgba(214,242,255,.17) 45%,
    rgba(214,242,255,.28) 50%,
    rgba(214,242,255,.12) 56%,
    transparent 78%
  );
  transform:translateX(-135%);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.roblox-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9cd8f6;
  box-shadow:
    0 0 10px rgba(156,216,246,.65),
    0 0 20px rgba(156,216,246,.25);
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease;
}

.roblox-arrow{
  display:inline-block;
  font-size:13px;
  color:#bce7fb;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    color .25s ease;
}

@media (hover:hover) and (pointer:fine){
  .roblox-cta:hover{
    transform:translateY(-3px) scale(1.035);
    border-color:rgba(205,239,255,.42)!important;
    background:
      linear-gradient(135deg,rgba(215,242,255,.17),rgba(98,158,194,.12))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 12px 30px rgba(0,0,0,.26),
      0 0 22px rgba(120,198,238,.16),
      0 0 44px rgba(120,198,238,.09);
  }

  .roblox-cta:hover::before{
    transform:translateX(135%);
  }

  .roblox-cta:hover .roblox-dot{
    transform:scale(1.3);
    box-shadow:
      0 0 12px rgba(166,225,255,.9),
      0 0 28px rgba(166,225,255,.38);
  }

  .roblox-cta:hover .roblox-arrow{
    transform:translate(3px,-3px) rotate(3deg);
    color:#effbff;
  }

  .roblox-cta:active{
    transform:translateY(-1px) scale(.99);
  }
}


/* ===== v15 premium Join Lastwinter CTA ===== */
.group-join-cta{
  position:relative;
  overflow:hidden;
  gap:9px;
  padding:14px 20px!important;
  color:#0d2232!important;
  background:
    linear-gradient(135deg,#e8f7ff 0%,#c8e8f8 52%,#a8d4eb 100%)!important;
  border:1px solid rgba(235,250,255,.85)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 28px rgba(0,0,0,.18),
    0 0 0 rgba(126,198,237,0);
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    box-shadow .32s ease,
    filter .3s ease;
}

.group-join-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(
    110deg,
    transparent 24%,
    rgba(255,255,255,.35) 43%,
    rgba(255,255,255,.8) 50%,
    rgba(255,255,255,.28) 57%,
    transparent 76%
  );
  transform:translateX(-140%);
  transition:transform .75s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.join-snow,
.join-arrow,
.group-join-cta > span:nth-child(2){
  position:relative;
  z-index:1;
}

.join-snow{
  font-size:12px;
  color:#477d9e;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    color .25s ease;
}

.join-arrow{
  display:inline-block;
  font-size:13px;
  color:#315f79;
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    color .25s ease;
}

@media (hover:hover) and (pointer:fine){
  .group-join-cta:hover{
    transform:translateY(-4px) scale(1.045);
    filter:brightness(1.035);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 16px 34px rgba(0,0,0,.24),
      0 0 24px rgba(126,198,237,.22),
      0 0 52px rgba(126,198,237,.12);
  }

  .group-join-cta:hover::before{
    transform:translateX(140%);
  }

  .group-join-cta:hover .join-snow{
    transform:rotate(22deg) scale(1.2);
    color:#2e6f95;
  }

  .group-join-cta:hover .join-arrow{
    transform:translate(3px,-3px) rotate(4deg);
    color:#183f57;
  }

  .group-join-cta:active{
    transform:translateY(-1px) scale(.995);
  }
}


/* ===== v16 glowing active search/input fields ===== */
input,
textarea,
select{
  transition:
    border-color .28s ease,
    box-shadow .32s ease,
    background .28s ease,
    transform .28s cubic-bezier(.2,.8,.2,1);
}

input:focus,
textarea:focus,
select:focus{
  outline:none!important;
  border-color:rgba(174,224,250,.48)!important;
  background:rgba(12,30,45,.92)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 0 1px rgba(133,204,241,.08),
    0 0 18px rgba(120,198,238,.16),
    0 0 42px rgba(120,198,238,.09)!important;
}

input:focus::placeholder,
textarea:focus::placeholder{
  color:#87b8d2!important;
  opacity:.7;
}

/* Slightly stronger glow once a search actually contains text. */
input[type="search"]:focus:not(:placeholder-shown){
  border-color:rgba(190,232,253,.58)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 0 1px rgba(144,212,247,.10),
    0 0 22px rgba(127,201,240,.20),
    0 0 50px rgba(127,201,240,.11)!important;
}


/* ===== v17 custom icy sort dropdown ===== */
.sort-dropdown{
  position:relative;
  min-width:172px;
}

.sort-dropdown > select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

.sort-trigger{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 15px 11px 17px;
  border-radius:999px;
  border:1px solid rgba(186,226,247,.18);
  background:
    linear-gradient(135deg,rgba(20,43,60,.88),rgba(7,20,31,.9));
  color:#e2f5ff;
  font:inherit;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 7px 18px rgba(0,0,0,.12);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .3s ease,
    background .28s ease;
}

.sort-chevron{
  color:#9fd7f3;
  font-size:18px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}

.sort-dropdown.open .sort-trigger{
  border-color:rgba(185,231,253,.42);
  background:
    linear-gradient(135deg,rgba(25,52,71,.96),rgba(8,24,36,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 0 1px rgba(126,198,237,.06),
    0 0 20px rgba(126,198,237,.15),
    0 12px 28px rgba(0,0,0,.24);
}

.sort-dropdown.open .sort-chevron{
  transform:rotate(180deg) translateY(1px);
}

.sort-menu{
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  z-index:80;
  width:220px;
  padding:7px;
  border-radius:18px;
  border:1px solid rgba(186,226,247,.18);
  background:
    linear-gradient(145deg,rgba(14,32,46,.98),rgba(6,17,27,.985));
  backdrop-filter:blur(20px);
  box-shadow:
    0 20px 45px rgba(0,0,0,.36),
    0 0 28px rgba(116,188,226,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
  transform-origin:top right;
}

.sort-menu:not([hidden]){
  animation:sortMenuIn .22s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes sortMenuIn{
  from{
    opacity:0;
    transform:translateY(-6px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.sort-option{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
  border:0;
  border-radius:11px;
  color:#a9c4d4;
  background:transparent;
  font:inherit;
  font-size:11px;
  text-align:left;
  cursor:pointer;
  transition:
    color .2s ease,
    background .22s ease,
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease;
}

.sort-check{
  opacity:0;
  color:#a8dcf7;
  transform:scale(.75);
  transition:opacity .2s ease,transform .2s ease;
}

.sort-option.active{
  color:#ecf9ff;
  background:
    linear-gradient(135deg,rgba(114,184,221,.16),rgba(114,184,221,.065));
  box-shadow:inset 0 0 0 1px rgba(161,217,246,.08);
}

.sort-option.active .sort-check{
  opacity:1;
  transform:scale(1);
}

@media (hover:hover) and (pointer:fine){
  .sort-trigger:hover{
    transform:translateY(-2px);
    border-color:rgba(185,231,253,.32);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 0 18px rgba(126,198,237,.11),
      0 10px 24px rgba(0,0,0,.2);
  }

  .sort-option:hover{
    color:#f1fbff;
    background:rgba(140,205,239,.10);
    transform:translateX(3px);
    box-shadow:0 0 18px rgba(126,198,237,.06);
  }
}

.sort-trigger:focus-visible,
.sort-option:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 1px rgba(184,229,251,.42),
    0 0 20px rgba(126,198,237,.14);
}

@media(max-width:700px){
  .sort-dropdown{
    width:100%;
  }
  .sort-menu{
    left:0;
    right:auto;
    width:100%;
  }
}


/* ===== v18 clean Roblox Group CTA ===== */
.roblox-cta{
  min-width:auto!important;
  gap:0!important;
  padding:11px 18px!important;
  justify-content:center;
  white-space:nowrap;
}

/* Old decorative pieces are removed from markup; hide defensively. */
.roblox-dot,
.roblox-arrow{
  display:none!important;
}


/* ===== v19 premium Open Roblox Store CTA ===== */
.store-cta{
  position:relative;
  overflow:hidden;
  gap:9px;
  padding:13px 19px!important;
  border:1px solid rgba(190,229,249,.25)!important;
  background:
    linear-gradient(135deg,rgba(205,237,253,.10),rgba(75,125,158,.065))!important;
  color:#e8f7ff!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 22px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .32s ease,
    background .3s ease;
}

.store-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(
    110deg,
    transparent 24%,
    rgba(219,243,255,.10) 42%,
    rgba(238,250,255,.30) 50%,
    rgba(219,243,255,.10) 58%,
    transparent 76%
  );
  transform:translateX(-140%);
  transition:transform .72s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.store-cta > span{
  position:relative;
  z-index:1;
}

.store-snow{
  color:#a7daf4;
  font-size:11px;
  text-shadow:0 0 12px rgba(154,217,249,.45);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    text-shadow .3s ease,
    color .3s ease;
}

@media (hover:hover) and (pointer:fine){
  .store-cta:hover{
    transform:translateY(-3px) scale(1.035);
    border-color:rgba(205,239,255,.44)!important;
    background:
      linear-gradient(135deg,rgba(215,243,255,.15),rgba(91,149,184,.10))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 12px 30px rgba(0,0,0,.24),
      0 0 20px rgba(126,198,237,.15),
      0 0 46px rgba(126,198,237,.08);
  }

  .store-cta:hover::before{
    transform:translateX(140%);
  }

  .store-cta:hover .store-snow{
    transform:rotate(28deg) scale(1.18);
    color:#d5f1ff;
    text-shadow:
      0 0 10px rgba(184,229,252,.8),
      0 0 22px rgba(126,198,237,.35);
  }

  .store-cta:active{
    transform:translateY(-1px) scale(.995);
  }
}


/* ===== v20 frosted section titles ===== */
/* Applies to the large editorial/topic headings across the site. */
.section h3,
.about h3,
.hero h1{
  position:relative;
  width:max-content;
  max-width:100%;
  color:#edf9ff;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #edf9ff 30%,
      #cdeafa 62%,
      #8fc8e6 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 0 12px rgba(194,232,252,.10),
    0 0 28px rgba(110,190,232,.07);
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.18));
}

/* A thin icy highlight sitting across the lower edge of each title. */
.section h3::after,
.about h3::after{
  content:"";
  position:absolute;
  left:3%;
  bottom:-8px;
  width:58%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(199,236,255,.55),
    rgba(126,200,239,.20),
    transparent
  );
  box-shadow:0 0 10px rgba(139,209,245,.20);
  opacity:.75;
}

/* Small labels above titles get a colder crystalline treatment too. */
.overline{
  color:#8ed5f8!important;
  text-shadow:
    0 0 8px rgba(123,207,248,.20),
    0 0 18px rgba(123,207,248,.09);
}

/* Slight frosted shimmer on heading hover without making them flashy. */
@media (hover:hover) and (pointer:fine){
  .section h3,
  .about h3{
    transition:
      filter .35s ease,
      text-shadow .35s ease;
  }

  .section h3:hover,
  .about h3:hover{
    filter:
      drop-shadow(0 7px 16px rgba(0,0,0,.18))
      drop-shadow(0 0 9px rgba(151,216,249,.13));
    text-shadow:
      0 1px 0 rgba(255,255,255,.12),
      0 0 15px rgba(194,232,252,.14),
      0 0 34px rgba(110,190,232,.10);
  }
}


/* ===== v21 stronger carousel edge fade ===== */
.drops-track .card{
  opacity:var(--edge-opacity,.35)!important;
  transition:
    opacity .34s ease,
    transform .32s cubic-bezier(.2,.8,.2,1),
    filter .34s ease!important;
}

/* Outer cards dissolve more naturally instead of using a hard overlay fade. */
.drops-track .card.is-edge{
  filter:saturate(.72) brightness(.78);
}

/* Hovered UGC remains fully visible even near an edge. */
@media (hover:hover) and (pointer:fine){
  .drops-track .card:hover{
    opacity:1!important;
    filter:none!important;
  }
}


/* ===== v22 prevent frosted headings from clipping ===== */
/* The gradient text + drop-shadow needs a little breathing room on both sides. */
.section h3,
.about h3,
.hero h1{
  width:auto!important;
  display:table!important;
  overflow:visible!important;
  padding-left:3px;
  padding-right:14px;
  padding-bottom:10px;
  margin-left:-3px;
  margin-right:-14px;
}

/* Keep section heading containers from clipping the frosty edge/glow. */
.headrow,
.headrow > div,
.section,
.section .shell{
  overflow:visible!important;
}

/* Ensure the decorative ice line doesn't create an accidental crop boundary. */
.section h3::after,
.about h3::after{
  pointer-events:none;
}


/* ===== v23 redesigned community section ===== */
.about-centered{
  display:flex!important;
  justify-content:center;
  align-items:center;
  padding-top:105px!important;
  padding-bottom:125px!important;
}

.community-wrap{
  position:relative;
  width:min(760px,100%);
  margin:0 auto;
}

.community-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(55px);
  pointer-events:none;
  opacity:.24;
}

.community-glow-a{
  width:240px;
  height:240px;
  left:-40px;
  top:40px;
  background:#5da8d2;
}

.community-glow-b{
  width:190px;
  height:190px;
  right:-10px;
  bottom:15px;
  background:#88c9e8;
  opacity:.15;
}

.community-card{
  position:relative;
  overflow:hidden;
  width:100%;
  border-radius:34px;
  padding:24px 32px 30px;
  border:1px solid rgba(197,232,250,.18);
  background:
    radial-gradient(circle at 18% 12%,rgba(170,222,247,.10),transparent 28%),
    radial-gradient(circle at 86% 82%,rgba(104,180,221,.08),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.022));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 30px 80px rgba(0,0,0,.24);
}

.community-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 25%,rgba(220,245,255,.035) 42%,transparent 58%);
  transform:translateX(-50%);
}

.community-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:18px;
  border-bottom:1px solid rgba(201,234,251,.10);
  font-size:8px;
  letter-spacing:.24em;
  color:#6e9db8;
}

.community-star{
  color:#9ed8f5;
  font-size:13px;
  text-shadow:0 0 14px rgba(142,213,248,.35);
}

.community-identity{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:29px 0 8px;
}

.community-avatar{
  width:70px!important;
  height:70px!important;
  border-radius:22px!important;
  border:1px solid rgba(224,246,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 30px rgba(0,0,0,.20),
    0 0 28px rgba(116,195,236,.12);
  font-size:29px!important;
}

.community-name{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.community-title-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.community-name strong{
  font-family:"Instrument Serif",serif;
  font-weight:400;
  font-size:29px;
  letter-spacing:-.025em;
  color:#edf9ff;
}

.community-name > span{
  font-size:10px;
  letter-spacing:.08em;
  color:#7795a7;
}

.community-title-row .verified{
  margin:0!important;
}

.community-card > p{
  max-width:570px;
  margin:18px auto 26px;
  color:#9eb5c3;
  font-size:13px;
  line-height:1.75;
  text-align:center;
}

.community-stats{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:stretch;
  gap:18px;
  max-width:590px;
  margin:0 auto;
  padding:7px;
  border-radius:24px;
  border:1px solid rgba(198,232,249,.10);
  background:rgba(3,13,22,.22);
}

.community-stat{
  min-height:105px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 24px;
  border-radius:18px;
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    background .28s ease,
    box-shadow .3s ease;
}

.community-stat .stat-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#a8ddf7;
  border:1px solid rgba(186,229,250,.14);
  background:linear-gradient(145deg,rgba(182,226,247,.08),rgba(65,118,151,.06));
  text-shadow:0 0 12px rgba(148,217,251,.34);
}

.community-stat > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.community-stat strong{
  font-family:"Instrument Serif",serif;
  font-size:31px;
  font-weight:400;
  line-height:1;
  color:#eefaff;
}

.community-stat span:last-child{
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#6f8fa3;
}

.community-divider{
  width:1px;
  margin:14px 0;
  background:linear-gradient(
    180deg,
    transparent,
    rgba(197,232,250,.16),
    transparent
  );
}

.community-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  max-width:590px;
  margin:24px auto 0;
}

.community-note{
  font-family:"Instrument Serif",serif;
  font-style:italic;
  font-size:18px;
  color:#709bb5;
}

.community-footer .group-join-cta{
  margin:0!important;
}

.community-orbit{
  position:absolute;
  pointer-events:none;
  border:1px solid rgba(183,226,248,.075);
  border-radius:50%;
}

.orbit-one{
  width:250px;
  height:250px;
  left:-112px;
  top:95px;
}

.orbit-two{
  width:190px;
  height:190px;
  right:-82px;
  bottom:-60px;
}

@media (hover:hover) and (pointer:fine){
  .community-stat:hover{
    transform:translateY(-3px);
    background:rgba(130,199,235,.055);
    box-shadow:
      inset 0 0 0 1px rgba(168,220,247,.055),
      0 0 28px rgba(110,190,231,.075);
  }

  .community-card:hover{
    border-color:rgba(204,237,253,.24);
  }
}

@media(max-width:700px){
  .about-centered{
    padding-top:76px!important;
    padding-bottom:90px!important;
  }

  .community-card{
    padding:20px 18px 24px;
    border-radius:27px;
  }

  .community-identity{
    justify-content:flex-start;
  }

  .community-card > p{
    text-align:left;
    margin-left:0;
    margin-right:0;
  }

  .community-stats{
    grid-template-columns:1fr;
    gap:4px;
  }

  .community-divider{
    width:auto;
    height:1px;
    margin:0 18px;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(197,232,250,.15),
      transparent
    );
  }

  .community-stat{
    justify-content:flex-start;
    min-height:88px;
  }

  .community-footer{
    flex-direction:column;
    align-items:stretch;
  }

  .community-note{
    text-align:center;
  }

  .community-footer .group-join-cta{
    width:100%!important;
  }
}


/* ===== v24 cleaner hero title ===== */
.hero h1{
  /* cleaner, less over-frosted wordmark */
  display:block!important;
  width:min-content!important;
  min-width:max-content;
  margin:0!important;
  padding:0 .08em .08em 0!important;

  font-family:"Instrument Serif",serif;
  font-weight:400;
  font-style:normal;
  font-size:clamp(92px,13vw,190px);
  line-height:.82;
  letter-spacing:-.055em;

  background:
    linear-gradient(
      180deg,
      #f5fbff 0%,
      #e8f7ff 48%,
      #b9def1 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:none!important;
  filter:
    drop-shadow(0 12px 26px rgba(0,0,0,.16))
    drop-shadow(0 0 12px rgba(151,216,248,.07))!important;
}

/* Remove any decorative title pseudo-elements / stray frost marks. */
.hero h1::before,
.hero h1::after{
  content:none!important;
  display:none!important;
}

/* Keep the title crisp when hovered — no extra glow animation. */
@media (hover:hover) and (pointer:fine){
  .hero h1:hover{
    filter:
      drop-shadow(0 12px 26px rgba(0,0,0,.16))
      drop-shadow(0 0 12px rgba(151,216,248,.07))!important;
  }
}

@media(max-width:700px){
  .hero h1{
    font-size:clamp(72px,24vw,118px);
    letter-spacing:-.05em;
    line-height:.86;
  }
}


/* ===== v25 upgraded top nav buttons ===== */
.nav nav{
  gap:10px!important;
}

.nav nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid transparent;
  color:#a9c4d4!important;
  background:transparent;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  overflow:hidden;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    color .25s ease,
    border-color .25s ease,
    background .28s ease,
    box-shadow .3s ease;
}

.nav nav a::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    115deg,
    transparent 28%,
    rgba(215,242,255,.10) 45%,
    rgba(238,250,255,.20) 50%,
    rgba(215,242,255,.08) 57%,
    transparent 74%
  );
  transform:translateX(-140%);
  transition:transform .65s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.nav nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(167,222,250,.85),
    transparent
  );
  box-shadow:0 0 9px rgba(125,204,245,.28);
  transform:translateX(-50%);
  transition:width .28s cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover) and (pointer:fine){
  .nav nav a:hover{
    transform:translateY(-2px);
    color:#effaff!important;
    border-color:rgba(190,230,250,.22);
    background:
      linear-gradient(135deg,rgba(205,237,253,.075),rgba(74,126,158,.04));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 8px 20px rgba(0,0,0,.18),
      0 0 18px rgba(126,198,237,.08);
  }

  .nav nav a:hover::before{
    transform:translateX(140%);
  }

  .nav nav a:hover::after{
    width:46%;
  }

  .nav nav a:active{
    transform:translateY(0) scale(.985);
  }
}

/* Give the section matching the current scroll target a nicer clicked state when hash is active. */
.nav nav a:focus-visible{
  outline:none;
  color:#f4fbff!important;
  border-color:rgba(192,233,253,.36);
  box-shadow:
    0 0 0 1px rgba(136,206,242,.08),
    0 0 20px rgba(126,198,237,.12);
}


/* ===== v26 centered community join CTA ===== */
.community-footer{
  justify-content:center!important;
  text-align:center;
}

.community-footer .group-join-cta{
  margin:0 auto!important;
}

.community-note{
  display:none!important;
}


/* ===== v28 premium back-to-top button ===== */
.back-top-cta{
  position:relative;
  overflow:hidden;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 17px!important;
  border-radius:999px;
  border:1px solid rgba(188,229,250,.20);
  background:
    linear-gradient(135deg,rgba(205,238,254,.09),rgba(72,125,158,.055));
  color:#b8def2!important;
  text-decoration:none!important;
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 22px rgba(0,0,0,.14);
  backdrop-filter:blur(14px);
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    color .25s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .32s ease;
}

.back-top-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(
    110deg,
    transparent 25%,
    rgba(220,244,255,.09) 42%,
    rgba(238,251,255,.24) 50%,
    rgba(220,244,255,.08) 58%,
    transparent 75%
  );
  transform:translateX(-140%);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.back-top-cta > span{
  position:relative;
  z-index:1;
}

.back-top-icon{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(186,229,250,.16);
  background:rgba(166,218,245,.065);
  color:#bde7fb;
  font-size:12px;
  line-height:1;
  box-shadow:0 0 12px rgba(126,198,237,.07);
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    background .3s ease;
}

@media (hover:hover) and (pointer:fine){
  .back-top-cta:hover{
    transform:translateY(-3px) scale(1.035);
    color:#effaff!important;
    border-color:rgba(200,236,253,.40);
    background:
      linear-gradient(135deg,rgba(215,242,255,.14),rgba(88,148,184,.09));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 12px 28px rgba(0,0,0,.22),
      0 0 20px rgba(126,198,237,.14),
      0 0 42px rgba(126,198,237,.07);
  }

  .back-top-cta:hover::before{
    transform:translateX(140%);
  }

  .back-top-cta:hover .back-top-icon{
    transform:translateY(-3px);
    background:rgba(177,225,249,.11);
    box-shadow:
      0 0 12px rgba(154,217,249,.25),
      0 0 25px rgba(126,198,237,.11);
  }

  .back-top-cta:active{
    transform:translateY(-1px) scale(.99);
  }
}


/* ===== v29 randomized hero kicker glow ===== */
.hero-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
}

.kicker-word{
  position:relative;
  color:#78a8c4;
  text-shadow:none;
  transition:
    color .55s ease,
    text-shadow .55s ease,
    filter .55s ease;
}

.kicker-sep{
  color:#49697d;
  opacity:.75;
}

.kicker-word.kicker-glow{
  color:#dff5ff;
  text-shadow:
    0 0 8px rgba(184,229,252,.48),
    0 0 18px rgba(126,198,237,.28),
    0 0 34px rgba(126,198,237,.14);
  filter:brightness(1.08);
}

.kicker-word.kicker-glow::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:72%;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(181,229,252,.72),
    transparent
  );
  box-shadow:0 0 10px rgba(132,205,242,.22);
  animation:kickerLine .9s ease both;
}

@keyframes kickerLine{
  from{opacity:0;transform:translateX(-50%) scaleX(.25)}
  40%{opacity:.9}
  to{opacity:0;transform:translateX(-50%) scaleX(1)}
}


/* ===== v31 guaranteed preview UGC rendering ===== */
.fake-item{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none;
}
.fake-sweater{
  width:56%!important;
  height:43%!important;
  background:linear-gradient(145deg,#e6f6fd,#b9d8e8)!important;
  border-radius:28px 28px 16px 16px!important;
  position:relative!important;
  box-shadow:
    0 25px 50px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.fake-sweater::before,
.fake-sweater::after{
  content:""!important;
  position:absolute!important;
  top:18px!important;
  width:35%!important;
  height:75%!important;
  background:inherit!important;
  border-radius:20px!important;
}
.fake-sweater::before{
  left:-25%!important;
  transform:rotate(17deg)!important;
}
.fake-sweater::after{
  right:-25%!important;
  transform:rotate(-17deg)!important;
}
.fake-sweater b{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  z-index:2!important;
  font-family:"Instrument Serif",serif!important;
  font-size:22px!important;
  font-weight:400!important;
  color:#5d8da8!important;
}
#newGrid,
#salesGrid,
#storeGrid{
  min-height:320px;
}


/* ===== v32 other groups mini-carousel ===== */
.other-groups-block{
  width:min(760px,100%);
  margin:18px auto 0;
}

.other-groups-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
  color:#6f99b2;
  font-size:8px;
  font-weight:600;
  letter-spacing:.22em;
}

.other-groups-snow{
  color:#9fd8f5;
  font-size:10px;
  text-shadow:0 0 10px rgba(144,213,248,.20);
}

.other-groups-viewport{
  overflow:hidden;
  width:100%;
  border-radius:19px;
}

.other-groups-track{
  display:flex;
  gap:10px;
  width:max-content;
  will-change:transform;
}

.other-group-card{
  flex:0 0 238px;
  min-height:74px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(192,229,248,.11);
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  color:#dff2fc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.10);
  transition:transform .30s cubic-bezier(.2,.8,.2,1),border-color .28s ease,background .28s ease,box-shadow .30s ease;
}

.other-group-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid rgba(216,242,255,.18);
  background:linear-gradient(145deg,rgba(166,218,245,.22),rgba(69,121,153,.16));
  color:#e9f8ff;
  font-family:"Instrument Serif",serif;
  font-size:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(118,193,232,.07);
}

.other-group-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.other-group-meta strong{
  font-size:12px;
  font-weight:600;
  color:#e9f7ff;
}

.other-group-meta small{
  font-size:8px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#65879a;
}

@media (hover:hover) and (pointer:fine){
  .other-group-card:hover{
    transform:translateY(-3px) scale(1.025);
    border-color:rgba(198,235,253,.28);
    background:linear-gradient(145deg,rgba(209,239,254,.075),rgba(83,142,177,.045));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 30px rgba(0,0,0,.18),0 0 20px rgba(126,198,237,.10);
  }
}

@media(max-width:700px){
  .other-group-card{flex-basis:210px}
}


/* ===== v33 force Other Groups BELOW community card ===== */
.about-centered{
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}

.community-wrap{
  flex:none!important;
  width:min(760px,100%)!important;
}

.other-groups-block{
  flex:none!important;
  display:block!important;
  width:min(760px,100%)!important;
  margin:22px auto 0!important;
  align-self:center!important;
  clear:both!important;
}


/* ===== v34 real Roblox group icon support ===== */
.other-group-avatar{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.other-group-avatar.has-roblox-icon{
  color:transparent;
  border-color:rgba(215,241,253,.24);
}


/* ===== v36 Lastwinter real group icon everywhere ===== */
[data-lastwinter-icon]{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

[data-lastwinter-icon].has-lastwinter-icon{
  color:transparent!important;
  text-shadow:none!important;
}

[data-lastwinter-icon].has-lastwinter-icon::before,
[data-lastwinter-icon].has-lastwinter-icon::after{
  opacity:.18;
}

/* Keep the hero logo-card proportions while showing the actual group icon. */
.ice-block.has-lastwinter-icon{
  color:transparent!important;
  background-color:rgba(255,255,255,.10)!important;
}

/* Main group avatar keeps its frosted frame around the real icon. */
.community-avatar.has-lastwinter-icon,
#groupAvatar.has-lastwinter-icon{
  border-color:rgba(220,244,255,.34)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 30px rgba(0,0,0,.20),
    0 0 28px rgba(116,195,236,.14)!important;
}


/* ===== v37 animated first-load scroll hint ===== */
.scroll-hint{
  position:fixed;
  right:24px;
  top:50%;
  translate:0 -50%;
  z-index:70;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;

  padding:0;
  border:0;
  background:transparent;
  color:#ccecff;
  cursor:pointer;

  opacity:0;
  transform:translateX(12px);
  pointer-events:none;

  transition:
    opacity .45s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}

.scroll-hint.visible{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

.scroll-hint.hidden{
  opacity:0;
  transform:translateX(14px);
  pointer-events:none;
}

.scroll-hint-ring{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(190,231,251,.24);
  background:
    radial-gradient(circle at 50% 35%,rgba(211,241,255,.10),rgba(74,124,157,.055));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 16px rgba(126,198,237,.08);
  backdrop-filter:blur(12px);
  animation:scrollHintGlow 2.8s ease-in-out infinite;
}

.scroll-hint-arrow{
  display:block;
  font-size:17px;
  line-height:1;
  color:#dff5ff;
  text-shadow:
    0 0 9px rgba(177,225,249,.40),
    0 0 18px rgba(126,198,237,.18);
  animation:scrollHintBob 1.55s cubic-bezier(.4,0,.2,1) infinite;
}

.scroll-hint-text{
  font-size:8px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#6f9bb4;
}

@keyframes scrollHintBob{
  0%,100%{transform:translateY(-3px)}
  50%{transform:translateY(5px)}
}

@keyframes scrollHintGlow{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 0 14px rgba(126,198,237,.07);
    border-color:rgba(190,231,251,.22);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 0 20px rgba(126,198,237,.15),
      0 0 38px rgba(126,198,237,.07);
    border-color:rgba(200,237,255,.36);
  }
}

@media (hover:hover) and (pointer:fine){
  .scroll-hint:hover .scroll-hint-ring{
    transform:scale(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 24px rgba(126,198,237,.20),
      0 0 46px rgba(126,198,237,.10);
  }
}

@media(max-width:700px){
  .scroll-hint{
    right:14px;
  }
  .scroll-hint-ring{
    width:42px;
    height:42px;
  }
  .scroll-hint-text{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .scroll-hint-ring,
  .scroll-hint-arrow{
    animation:none!important;
  }
}


/* ===== v38 minimal scroll arrow ===== */
.scroll-hint{
  gap:0!important;
}

.scroll-hint-ring{
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  animation:none!important;
}

.scroll-hint-text{
  display:none!important;
}

.scroll-hint-arrow{
  font-size:28px!important;
  font-weight:300;
  color:#dff5ff;
  text-shadow:
    0 0 9px rgba(185,230,252,.48),
    0 0 22px rgba(126,198,237,.20);
  animation:scrollHintBob 1.55s cubic-bezier(.4,0,.2,1) infinite!important;
}

@media (hover:hover) and (pointer:fine){
  .scroll-hint:hover .scroll-hint-ring{
    transform:none!important;
    box-shadow:none!important;
  }

  .scroll-hint:hover .scroll-hint-arrow{
    color:#f4fbff;
    text-shadow:
      0 0 11px rgba(200,237,255,.70),
      0 0 28px rgba(126,198,237,.30);
  }
}

@media(max-width:700px){
  .scroll-hint-arrow{
    font-size:26px!important;
  }
}


/* ===== v41 hanging snowflake on hero wordmark ===== */
.hero-wordmark{
  position:relative!important;
  overflow:visible!important;
}

/* decorative ornament hanging from the wordmark */
.title-ornament{
  position:absolute;
  left:62%;
  top:88%;
  width:42px;
  height:105px;
  pointer-events:none;
  transform-origin:50% 0;
  animation:titleOrnamentSway 4.6s ease-in-out infinite;
  z-index:4;
}

.title-string{
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:64px;
  transform:translateX(-50%);
  background:linear-gradient(
    180deg,
    rgba(224,246,255,.62),
    rgba(160,215,244,.30),
    rgba(160,215,244,.08)
  );
  box-shadow:0 0 6px rgba(176,224,249,.16);
}

.title-string::before,
.title-string::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:3px;
  height:3px;
  border-radius:50%;
  background:#dff6ff;
  box-shadow:0 0 8px rgba(190,233,253,.35);
}

.title-string::before{ top:22px; }
.title-string::after{ top:48px; }

.title-snowflake{
  position:absolute;
  left:50%;
  top:57px;
  transform:translateX(-50%);
  color:#e8f8ff;
  font-size:31px;
  line-height:1;
  text-shadow:
    0 0 8px rgba(210,241,255,.62),
    0 0 18px rgba(133,205,242,.28),
    0 0 32px rgba(133,205,242,.13);
  animation:titleSnowGlow 2.8s ease-in-out infinite;
}

@keyframes titleOrnamentSway{
  0%,100%{ transform:rotate(-2.2deg); }
  50%{ transform:rotate(2.2deg); }
}

@keyframes titleSnowGlow{
  0%,100%{
    transform:translateX(-50%) scale(.96) rotate(-3deg);
    opacity:.82;
  }
  50%{
    transform:translateX(-50%) scale(1.06) rotate(3deg);
    opacity:1;
  }
}

@media(max-width:700px){
  .title-ornament{
    left:64%;
    top:90%;
    height:82px;
  }
  .title-string{
    height:48px;
  }
  .title-string::before{ top:16px; }
  .title-string::after{ top:35px; }
  .title-snowflake{
    top:43px;
    font-size:25px;
  }
}

@media(prefers-reduced-motion:reduce){
  .title-ornament,
  .title-snowflake{
    animation:none!important;
  }
}


/* ===== v42 cleaner hanging snowflake ===== */
.title-ornament{
  left:68%!important;
  top:82%!important;
  width:30px!important;
  height:82px!important;
  transform-origin:50% 0!important;
  animation:titleOrnamentSwayClean 5.8s ease-in-out infinite!important;
}

.title-string{
  left:50%!important;
  top:0!important;
  width:1px!important;
  height:47px!important;
  opacity:.72!important;
  background:linear-gradient(
    180deg,
    rgba(232,248,255,.60),
    rgba(167,219,246,.22),
    transparent
  )!important;
  box-shadow:none!important;
}

/* Remove the bead-looking dots that made the ornament feel awkward. */
.title-string::before,
.title-string::after{
  display:none!important;
  content:none!important;
}

.title-snowflake{
  top:40px!important;
  font-size:22px!important;
  font-weight:400!important;
  opacity:.90;
  color:#eaf9ff!important;
  text-shadow:
    0 0 7px rgba(213,242,255,.48),
    0 0 16px rgba(132,204,241,.20)!important;
  animation:titleSnowGlowClean 3.6s ease-in-out infinite!important;
}

@keyframes titleOrnamentSwayClean{
  0%,100%{transform:rotate(-1deg)}
  50%{transform:rotate(1deg)}
}

@keyframes titleSnowGlowClean{
  0%,100%{
    transform:translateX(-50%) scale(.98);
    opacity:.82;
  }
  50%{
    transform:translateX(-50%) scale(1.035);
    opacity:1;
  }
}

@media(max-width:700px){
  .title-ornament{
    left:70%!important;
    top:84%!important;
    height:65px!important;
  }
  .title-string{
    height:37px!important;
  }
  .title-snowflake{
    top:31px!important;
    font-size:19px!important;
  }
}


/* ===== v43 aligned hanging snowflake ===== */

/* Keep the larger ornament size, but align everything on one exact center line. */
.title-ornament{
  left:66%!important;
  top:84%!important;
  width:44px!important;
  height:108px!important;

  transform-origin:50% 0!important;
  animation:titlePendantSwing 4.2s ease-in-out infinite!important;

  /* ensures string + snowflake share the same positioning context */
  display:block!important;
}

.title-string{
  left:50%!important;
  top:0!important;
  width:1px!important;
  height:65px!important;

  transform:translateX(-50%)!important;
  transform-origin:50% 0!important;

  background:linear-gradient(
    180deg,
    rgba(236,249,255,.72) 0%,
    rgba(177,224,247,.40) 58%,
    rgba(177,224,247,.12) 100%
  )!important;

  box-shadow:0 0 6px rgba(180,226,249,.16)!important;
}

/* no beads */
.title-string::before,
.title-string::after{
  content:none!important;
  display:none!important;
}

.title-snowflake{
  left:50%!important;
  top:58px!important;

  /* exact center under the string */
  transform:translateX(-50%)!important;
  transform-origin:50% 14%!important;

  font-size:31px!important;
  line-height:1!important;
  color:#edfaff!important;

  text-shadow:
    0 0 8px rgba(215,243,255,.66),
    0 0 18px rgba(142,211,246,.30),
    0 0 32px rgba(142,211,246,.14)!important;

  /* snowflake no longer has its own side-to-side movement;
     it travels naturally with the entire hanging ornament */
  animation:titlePendantGlow 2.9s ease-in-out infinite!important;
}

/* Pendulum motion happens on the WHOLE string + snowflake as one object. */
@keyframes titlePendantSwing{
  0%{
    transform:rotate(-4deg);
  }
  50%{
    transform:rotate(4deg);
  }
  100%{
    transform:rotate(-4deg);
  }
}

@keyframes titlePendantGlow{
  0%,100%{
    transform:translateX(-50%) scale(.98);
    opacity:.86;
  }
  50%{
    transform:translateX(-50%) scale(1.04);
    opacity:1;
  }
}

@media(max-width:700px){
  .title-ornament{
    left:67%!important;
    top:86%!important;
    width:38px!important;
    height:88px!important;
  }

  .title-string{
    height:53px!important;
  }

  .title-snowflake{
    top:47px!important;
    font-size:27px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .title-ornament,
  .title-snowflake{
    animation:none!important;
  }
}


/* ===== v44 physically align snowflake with hanging line ===== */
.title-ornament{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

/* Let flex alignment own the horizontal position instead of separate left:50%. */
.title-string{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  flex:0 0 65px!important;
  width:1px!important;
  height:65px!important;
  transform:none!important;
  margin:0!important;
}

.title-snowflake{
  position:relative!important;
  left:auto!important;
  top:auto!important;

  display:block!important;
  width:44px!important;
  height:38px!important;
  margin:-7px 0 0!important;

  text-align:center!important;
  line-height:38px!important;

  /* The ❄ glyph itself sits a hair left in its font box, so this tiny optical
     correction puts its actual center directly beneath the 1px string. */
  translate:1px 0!important;

  transform:none!important;
  transform-origin:50% 10%!important;
  animation:titlePendantGlowAligned 2.9s ease-in-out infinite!important;
}

@keyframes titlePendantGlowAligned{
  0%,100%{
    scale:.98;
    opacity:.86;
  }
  50%{
    scale:1.04;
    opacity:1;
  }
}

@media(max-width:700px){
  .title-string{
    flex-basis:53px!important;
    height:53px!important;
  }

  .title-snowflake{
    width:38px!important;
    height:34px!important;
    line-height:34px!important;
    margin-top:-6px!important;
  }
}


/* ===== v45 tiny optical snowflake correction ===== */
.title-snowflake{
  translate:-2px 0!important;
}

@media(max-width:700px){
  .title-snowflake{
    translate:-1px 0!important;
  }
}


/* ===== v46 four hanging snowflakes — WEBSITE CSS ONLY ===== */

/* tiny extra left correction requested for the snowflake glyph */
.title-snowflake{
  translate:-3px 0!important;
}

/* Spread four ornaments under different parts of the wordmark. */
.hero-wordmark .ornament-1{
  left:17%!important;
  top:84%!important;
  animation-duration:4.4s!important;
  animation-delay:-1.1s!important;
}

.hero-wordmark .ornament-2{
  left:42%!important;
  top:86%!important;
  animation-duration:4.9s!important;
  animation-delay:-3.2s!important;
}

.hero-wordmark .ornament-3{
  left:66%!important;
  top:84%!important;
  animation-duration:4.2s!important;
  animation-delay:-2.0s!important;
}

.hero-wordmark .ornament-4{
  left:88%!important;
  top:87%!important;
  animation-duration:5.1s!important;
  animation-delay:-4.0s!important;
}

/* Slightly varied string lengths so they don't look copy-pasted. */
.hero-wordmark .ornament-1 .title-string{
  flex-basis:57px!important;
  height:57px!important;
}
.hero-wordmark .ornament-2 .title-string{
  flex-basis:72px!important;
  height:72px!important;
}
.hero-wordmark .ornament-3 .title-string{
  flex-basis:64px!important;
  height:64px!important;
}
.hero-wordmark .ornament-4 .title-string{
  flex-basis:52px!important;
  height:52px!important;
}

/* Keep the original larger snowflake sizing. */
.hero-wordmark .title-snowflake{
  font-size:31px!important;
  width:44px!important;
  height:38px!important;
  line-height:38px!important;
}

/* Make each pendant swing independently and subtly. */
.hero-wordmark .ornament-1{ --swing:3.2deg; }
.hero-wordmark .ornament-2{ --swing:4deg; }
.hero-wordmark .ornament-3{ --swing:3.6deg; }
.hero-wordmark .ornament-4{ --swing:2.8deg; }

.hero-wordmark .title-ornament{
  animation-name:titlePendantSwingVaried!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
}

@keyframes titlePendantSwingVaried{
  0%,100%{ transform:rotate(calc(var(--swing) * -1)); }
  50%{ transform:rotate(var(--swing)); }
}

@media(max-width:700px){
  .title-snowflake{
    translate:-2px 0!important;
  }

  .hero-wordmark .ornament-1{ left:15%!important; }
  .hero-wordmark .ornament-2{ left:40%!important; }
  .hero-wordmark .ornament-3{ left:66%!important; }
  .hero-wordmark .ornament-4{ left:88%!important; }

  .hero-wordmark .title-snowflake{
    font-size:27px!important;
    width:38px!important;
    height:34px!important;
    line-height:34px!important;
  }
}


/* ===== live-data v2: real hero Roblox preview only ===== */
.fc1 > img#heroItemImage{
  position:absolute!important;
  inset:48px 12px 54px!important;
  width:calc(100% - 24px)!important;
  height:calc(100% - 102px)!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  filter:
    drop-shadow(0 22px 26px rgba(0,0,0,.24))
    drop-shadow(0 0 22px rgba(144,211,246,.06))!important;
}

/* Defensive: old fake garment should never appear in the hero card. */
.fc1 #heroPlaceholder{
  display:none!important;
}


/* ===== live-data v4: real Lastwinter icon on hero group card ===== */
[data-lastwinter-hero-group-card]{
  position:relative;
}

/* Cover the old decorative sparkle with the live Roblox group icon. */
[data-lastwinter-hero-group-card].has-live-group-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:44%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:24%;
  background-image:var(--live-group-icon);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:
    0 18px 35px rgba(0,0,0,.22),
    0 0 30px rgba(177,224,249,.12),
    inset 0 0 0 1px rgba(230,247,255,.22);
  z-index:4;
}

/* Hide the old central sparkle/art once the real group icon is available. */
[data-lastwinter-hero-group-card].has-live-group-icon > .spark,
[data-lastwinter-hero-group-card].has-live-group-icon > .feature-spark,
[data-lastwinter-hero-group-card].has-live-group-icon > .fc-spark{
  opacity:0!important;
}


/* ===== live-data v5: exact right-side group icon fix ===== */
.fc2 .moon#heroGroupIcon{
  width:128px!important;
  height:128px!important;
  margin:48px auto 0!important;
  border-radius:26px!important;
  display:grid!important;
  place-items:center!important;
  font-size:0!important;
  color:transparent!important;
  opacity:1!important;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease;
}

.fc2 .moon#heroGroupIcon.has-live-icon{
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(222,244,255,.26)!important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.26),
    0 0 28px rgba(139,207,243,.12),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Kill the old generated overlay from v4 so only the real icon appears. */
[data-lastwinter-hero-group-card].has-live-group-icon::after{
  content:none!important;
  display:none!important;
}

@media (hover:hover) and (pointer:fine){
  .fc2:hover .moon#heroGroupIcon.has-live-icon{
    transform:scale(1.035);
    box-shadow:
      0 22px 40px rgba(0,0,0,.28),
      0 0 34px rgba(139,207,243,.17),
      inset 0 1px 0 rgba(255,255,255,.10)!important;
  }
}


/* ===== live-data v6: icy center glow behind every UGC image ===== */
.card-art{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* Soft glow originates from the center of each UGC tile. */
.card-art::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:72%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle,
      rgba(218,244,255,.28) 0%,
      rgba(158,218,249,.17) 24%,
      rgba(105,181,226,.08) 46%,
      rgba(70,147,198,.025) 62%,
      transparent 74%);
  filter:blur(17px);
  opacity:.82;
  transition:
    opacity .35s ease,
    transform .42s cubic-bezier(.2,.8,.2,1),
    filter .35s ease;
}

/* Roblox thumbnail stays above the glow. */
.card-art > img{
  position:relative;
  z-index:2;
  filter:
    drop-shadow(0 16px 22px rgba(0,0,0,.18))
    drop-shadow(0 0 10px rgba(187,229,251,.035));
}

/* Keep labels/UI above both layers. */
.card-art .tag,
.card-art .fav{
  position:absolute;
  z-index:5;
}

/* Existing fake fallback also stays above the glow if Roblox is unavailable. */
.card-art > .fake-item{
  position:relative;
  z-index:2;
}

@media (hover:hover) and (pointer:fine){
  .card:hover .card-art::before{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.18);
    filter:blur(20px);
  }

  .card:hover .card-art > img{
    filter:
      drop-shadow(0 18px 26px rgba(0,0,0,.20))
      drop-shadow(0 0 16px rgba(188,232,255,.10));
  }
}


/* ===== live-data v7: one stretched nav bubble ===== */
.nav-bubble{
  position:relative;
  display:flex;
  align-items:center;
  gap:4px!important;
  padding:5px!important;
  border-radius:999px;
  border:1px solid rgba(191,231,251,.18);
  background:
    linear-gradient(135deg,rgba(210,239,255,.075),rgba(68,118,151,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 22px rgba(0,0,0,.12);
  backdrop-filter:blur(14px);
  overflow:visible;
  isolation:isolate;
}

/* local glow/bulge layer that follows hover position */
.nav-bubble::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;
  left:var(--hover-x,50%);
  width:var(--hover-w,92px);
  height:calc(100% + 10px);
  transform:translate(-50%,-50%) scaleX(var(--bubble-scale-x,1)) scaleY(var(--bubble-scale-y,1));
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(203,239,255,.16) 0%,
      rgba(133,207,244,.08) 48%,
      transparent 72%);
  box-shadow:
    0 0 18px rgba(126,198,237,.14),
    0 0 38px rgba(126,198,237,.07);
  opacity:var(--hover-opacity,0);
  transition:
    left .28s cubic-bezier(.2,.8,.2,1),
    width .28s cubic-bezier(.2,.8,.2,1),
    opacity .24s ease,
    transform .28s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}

.nav-bubble a{
  position:relative;
  z-index:2;
  min-width:82px;
  padding:10px 14px!important;
  border:0!important;
  border-radius:999px;
  background:transparent!important;
  box-shadow:none!important;
  color:#9fb9c9!important;
  transition:
    color .24s ease,
    transform .24s cubic-bezier(.2,.8,.2,1),
    text-shadow .24s ease!important;
}

.nav-bubble a::before,
.nav-bubble a::after{
  content:none!important;
  display:none!important;
}

@media (hover:hover) and (pointer:fine){
  .nav-bubble a:hover{
    transform:translateY(-1px) scale(1.025);
    color:#edf9ff!important;
    text-shadow:
      0 0 8px rgba(184,229,252,.30),
      0 0 18px rgba(126,198,237,.12);
  }
}

/* subtle active-state marker without a separate pill */
.nav-bubble a[aria-current="page"],
.nav-bubble a.active{
  color:#f2fbff!important;
}

/* bubble slightly squashes when hover is near either edge */
.nav-bubble.edge-left::before{
  transform:translate(-50%,-50%) scaleX(1.14) scaleY(.94);
}
.nav-bubble.edge-right::before{
  transform:translate(-50%,-50%) scaleX(1.14) scaleY(.94);
}

@media(max-width:700px){
  .nav-bubble{
    gap:1px!important;
    padding:4px!important;
  }
  .nav-bubble a{
    min-width:auto;
    padding:9px 10px!important;
    font-size:9px!important;
  }
}


/* ===== live-data v8: cleaner nav glow + snowflake-only group CTA ===== */

/* Top-right Roblox group becomes a small standalone snowflake control. */
.roblox-snowflake-cta{
  min-width:0!important;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  gap:0!important;
  color:#dff5ff!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(212,241,255,.12),rgba(73,124,157,.045))!important;
  border:1px solid rgba(194,232,251,.20)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 22px rgba(0,0,0,.15);
}

.roblox-snowflake-cta::before{
  display:none!important;
  content:none!important;
}

.roblox-snowflake-cta > span{
  display:block;
  font-size:16px;
  line-height:1;
  color:#dff5ff;
  text-shadow:
    0 0 8px rgba(190,233,253,.44),
    0 0 18px rgba(126,198,237,.18);
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    text-shadow .3s ease,
    color .3s ease;
}

@media (hover:hover) and (pointer:fine){
  .roblox-snowflake-cta:hover{
    transform:translateY(-2px) scale(1.055)!important;
    border-color:rgba(205,239,255,.38)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 10px 26px rgba(0,0,0,.20),
      0 0 20px rgba(126,198,237,.13),
      0 0 36px rgba(126,198,237,.06)!important;
  }

  .roblox-snowflake-cta:hover > span{
    transform:rotate(16deg) scale(1.12);
    color:#f1fbff;
    text-shadow:
      0 0 10px rgba(203,239,255,.70),
      0 0 24px rgba(126,198,237,.28);
  }
}

/* One long nav pill remains, but the hover light is now compact and text-centered. */
.nav-bubble{
  overflow:visible!important;
}

/* Compact glow directly beneath/behind the hovered label. */
.nav-bubble::before{
  left:var(--hover-x,50%)!important;
  width:var(--hover-w,58px)!important;
  height:70%!important;
  top:50%!important;

  transform:translate(-50%,-50%)!important;
  border-radius:999px!important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(215,243,255,.18) 0%,
      rgba(143,211,246,.11) 34%,
      rgba(111,184,227,.055) 58%,
      transparent 78%
    )!important;

  box-shadow:
    0 0 12px rgba(126,198,237,.10),
    0 0 24px rgba(126,198,237,.055)!important;

  filter:blur(1px);
  opacity:var(--hover-opacity,0)!important;

  transition:
    left .24s cubic-bezier(.2,.8,.2,1),
    width .24s cubic-bezier(.2,.8,.2,1),
    opacity .20s ease!important;
}

/* Remove the old edge squash behavior completely. */
.nav-bubble.edge-left::before,
.nav-bubble.edge-right::before{
  transform:translate(-50%,-50%)!important;
}

.nav-bubble a{
  transform:none;
}

@media (hover:hover) and (pointer:fine){
  .nav-bubble a:hover{
    transform:translateY(-1px)!important;
  }
}


/* ===== live-data v10: restore hero group card placement ===== */
.hero-visual .fc2{
  position:absolute!important;
  left:auto!important;
  right:2%!important;
  top:62px!important;
  width:250px!important;
  height:310px!important;
  transform:rotate(7deg)!important;
  transform-origin:center center!important;
  z-index:4!important;
}

/* Latest-drop card stays in its original left/center position. */
.hero-visual .fc1{
  left:12%!important;
  right:auto!important;
  top:5px!important;
  z-index:3!important;
}

/* Stamp remains tucked underneath the group card on the far right. */
.hero-visual .stamp{
  right:-1%!important;
  z-index:5!important;
}

@media(max-width:900px){
  .hero-visual .fc2{
    right:5%!important;
  }
}

@media(max-width:600px){
  .hero-visual .fc1{
    left:2%!important;
    width:235px!important;
    height:305px!important;
  }

  .hero-visual .fc2{
    left:auto!important;
    right:0!important;
    top:58px!important;
    width:190px!important;
    height:245px!important;
  }
}


/* ===== live-data v14: smoother UGC carousel edge fade ===== */

/* Wider, softer edge falloff instead of an abrupt transparent cutoff. */
#newGrid,
#salesGrid{
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.12) 1.5%,
    rgba(0,0,0,.34) 3.5%,
    rgba(0,0,0,.62) 6%,
    rgba(0,0,0,.84) 8.5%,
    #000 12%,
    #000 88%,
    rgba(0,0,0,.84) 91.5%,
    rgba(0,0,0,.62) 94%,
    rgba(0,0,0,.34) 96.5%,
    rgba(0,0,0,.12) 98.5%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.12) 1.5%,
    rgba(0,0,0,.34) 3.5%,
    rgba(0,0,0,.62) 6%,
    rgba(0,0,0,.84) 8.5%,
    #000 12%,
    #000 88%,
    rgba(0,0,0,.84) 91.5%,
    rgba(0,0,0,.62) 94%,
    rgba(0,0,0,.34) 96.5%,
    rgba(0,0,0,.12) 98.5%,
    transparent 100%
  )!important;
}

/* Make cards enter/leave the faded area more naturally. */
#newGrid .card,
#salesGrid .card{
  transition:
    transform .48s cubic-bezier(.22,.72,.18,1),
    opacity .42s ease,
    filter .42s ease!important;
  will-change:transform,opacity;
}

@media(max-width:700px){
  #newGrid,
  #salesGrid{
    -webkit-mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.45) 5%,
      #000 13%,
      #000 87%,
      rgba(0,0,0,.45) 95%,
      transparent 100%
    )!important;
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.45) 5%,
      #000 13%,
      #000 87%,
      rgba(0,0,0,.45) 95%,
      transparent 100%
    )!important;
  }
}


/* ===== live-data v16: slowly spinning top-right snowflake ===== */
.roblox-snowflake-cta > span{
  animation:lastwinterSnowflakeSpin 12s linear infinite!important;
  transform-origin:center center;
  will-change:transform;
}

@keyframes lastwinterSnowflakeSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* Keep the slow spin going on hover; glow still comes from the button. */
@media (hover:hover) and (pointer:fine){
  .roblox-snowflake-cta:hover > span{
    animation-duration:8s!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .roblox-snowflake-cta > span{
    animation:none!important;
  }
}


/* ===== live-data v19: align logo stars slightly higher ===== */
/* Header + footer little star beside "lastwinter". */
.brand .star,
.footer-brand .star,
.logo .star,
footer .brand .star{
  position:relative;
  top:-3px!important;
}


/* ===== live-data v20: animated three-dot loading states ===== */
.lw-loading-dots{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:28px;
  vertical-align:middle;
}

.lw-loading-dots i{
  display:block;
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.24;
  box-shadow:0 0 7px rgba(183,229,252,.24);
  animation:lwLoadingDot 1.15s ease-in-out infinite;
}

.lw-loading-dots i:nth-child(2){ animation-delay:.14s; }
.lw-loading-dots i:nth-child(3){ animation-delay:.28s; }

@keyframes lwLoadingDot{
  0%,60%,100%{
    opacity:.22;
    transform:translateY(0) scale(.85);
  }
  30%{
    opacity:1;
    transform:translateY(-2px) scale(1.08);
  }
}

.lw-loading-card{
  min-height:220px;
  display:grid;
  place-items:center;
  color:rgba(186,221,240,.62);
}

.lw-loading-card .lw-loading-dots i{
  width:4px;
  height:4px;
}

@media(prefers-reduced-motion:reduce){
  .lw-loading-dots i{
    animation:none;
    opacity:.55;
  }
}


/* ===== live-data v21: no fake UGC previews while Roblox loads ===== */
.ugc-thumb-loading{
  width:100%;
  height:100%;
  min-height:150px;
  display:grid;
  place-items:center;
  color:rgba(210,239,253,.68);
  background:
    radial-gradient(circle at 50% 50%,rgba(143,211,246,.07),transparent 48%);
}

.ugc-thumb-loading .lw-loading-dots{
  gap:6px;
}

.ugc-thumb-loading .lw-loading-dots i{
  width:5px;
  height:5px;
  box-shadow:
    0 0 8px rgba(183,229,252,.34),
    0 0 16px rgba(126,198,237,.12);
}


/* ===== live-data v22: actually raise the tiny brand star ===== */
/* Target the literal decorative star beside the lastwinter wordmark. */
.brand-mark,
.brand-star,
.brand .spark,
.footer-brand .spark,
header .brand > span:last-child,
footer .brand > span:last-child{
  position:relative!important;
  top:-6px!important;
  transform:translateY(-2px)!important;
  vertical-align:super!important;
}


/* ===== live-data v23: exact top/footer logo star fix ===== */
/* Actual markup is: .logo > span containing ✶ */
.logo > span{
  display:inline-block!important;
  position:relative!important;
  top:auto!important;
  transform:translateY(-5px)!important;
  vertical-align:baseline!important;
}


/* ===== live-data v24: tiny brand-star adjustment ===== */
.logo > span{
  transform:translateY(-4px)!important;
}


/* ===== live-data v26: loading dots for all group icons ===== */
.icon-loading-dots{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  height:100%;
  color:rgba(214,240,253,.78);
}

.icon-loading-dots i{
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  opacity:.25;
  box-shadow:
    0 0 7px rgba(189,231,252,.30),
    0 0 14px rgba(126,198,237,.12);
  animation:lwLoadingDot 1.15s ease-in-out infinite;
}

.icon-loading-dots i:nth-child(2){ animation-delay:.14s; }
.icon-loading-dots i:nth-child(3){ animation-delay:.28s; }

/* Hero/right-side group card loader centered inside its icon box if present. */
#heroGroupIcon:not(.has-live-icon){
  display:grid!important;
  place-items:center!important;
  color:rgba(214,240,253,.78)!important;
}

/* ===== bigger UGC loading dots ===== */
.ugc-thumb-loading .lw-loading-dots{
  gap:9px!important;
}

.ugc-thumb-loading .lw-loading-dots i{
  width:8px!important;
  height:8px!important;
  box-shadow:
    0 0 10px rgba(190,233,253,.38),
    0 0 22px rgba(126,198,237,.16)!important;
}

.lw-loading-card .lw-loading-dots{
  gap:8px!important;
}

.lw-loading-card .lw-loading-dots i{
  width:6px!important;
  height:6px!important;
}

@media(max-width:700px){
  .ugc-thumb-loading .lw-loading-dots i{
    width:7px!important;
    height:7px!important;
  }

  .icon-loading-dots i{
    width:3px;
    height:3px;
  }
}


/* ===== live-data v27: hero copy + icon socials ===== */
.hero-copy{
  width:max-content;
  min-width:min(650px,100%);
  max-width:none;
}

.hero-copy h2#heroDescription{
  white-space:nowrap;
  font-size:clamp(31px,2.6vw,42px);
  letter-spacing:-.025em;
}

.social-links{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
}

.social-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(194,232,251,.18);
  background:
    radial-gradient(circle at 50% 35%,rgba(211,241,255,.10),rgba(70,120,152,.035));
  color:#ccecff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 7px 18px rgba(0,0,0,.13),
    0 0 12px rgba(126,198,237,.05);
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    border-color .25s ease,
    color .25s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.social-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(171,223,250,.18));
}

.social-missing{
  opacity:.34;
  cursor:default;
}

@media (hover:hover) and (pointer:fine){
  .social-icon[href]:hover{
    transform:translateY(-3px) scale(1.07);
    color:#f0fbff;
    border-color:rgba(207,240,255,.38);
    background:
      radial-gradient(circle at 50% 38%,rgba(218,244,255,.16),rgba(83,142,177,.06));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 10px 24px rgba(0,0,0,.20),
      0 0 18px rgba(126,198,237,.15),
      0 0 34px rgba(126,198,237,.07);
  }
}

@media(max-width:1100px){
  .hero-copy{
    width:auto;
    min-width:0;
    max-width:100%;
  }
  .hero-copy h2#heroDescription{
    white-space:normal;
  }
}

@media(max-width:700px){
  .social-links{gap:8px}
  .social-icon{width:36px;height:36px}
}


/* ===== live-data v28: Discord copy interaction ===== */
.discord-copy{
  appearance:none;
  -webkit-appearance:none;
  padding:0;
  cursor:pointer;
  font:inherit;
}

.discord-copy.copied{
  color:#effbff!important;
  border-color:rgba(200,238,255,.46)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.18),
    0 0 22px rgba(126,198,237,.20),
    0 0 40px rgba(126,198,237,.09)!important;
}

.copy-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 15px;
  border-radius:999px;
  border:1px solid rgba(198,235,253,.22);
  background:
    linear-gradient(145deg,rgba(14,34,49,.94),rgba(6,19,29,.96));
  backdrop-filter:blur(16px);
  color:#dff5ff;
  font-size:10px;
  font-weight:600;
  letter-spacing:.03em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 34px rgba(0,0,0,.28),
    0 0 24px rgba(126,198,237,.10);

  opacity:0;
  pointer-events:none;
  transform:translate(-50%,12px) scale(.96);
  transition:
    opacity .26s ease,
    transform .32s cubic-bezier(.2,.8,.2,1);
}

.copy-toast.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

.copy-toast b{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(159,220,249,.12);
  color:#bfeaff;
  font-size:11px;
  box-shadow:0 0 12px rgba(126,198,237,.12);
}

@media(max-width:700px){
  .copy-toast{
    bottom:18px;
    font-size:9px;
  }
}


/* ===== live-data v30: top music player ===== */
.music-player{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:260px;
  height:42px;
  padding:4px 10px 4px 5px;
  border-radius:999px;
  border:1px solid rgba(194,232,251,.17);
  background:
    linear-gradient(135deg,rgba(206,238,254,.07),rgba(68,118,151,.038));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 22px rgba(0,0,0,.12);
  backdrop-filter:blur(14px);
  transition:
    border-color .3s ease,
    box-shadow .32s ease,
    background .3s ease;
}

.music-player.playing{
  border-color:rgba(201,237,254,.27);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 22px rgba(0,0,0,.14),
    0 0 18px rgba(126,198,237,.08);
}

.music-play{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(198,235,253,.16);
  background:
    radial-gradient(circle at 50% 35%,rgba(216,243,255,.11),rgba(68,119,153,.04));
  color:#dff5ff;
  cursor:pointer;
  padding:0;
  box-shadow:0 0 12px rgba(126,198,237,.05);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .25s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.music-play svg{
  width:15px;
  height:15px;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
}

.music-pause-icon{ display:none; fill:none!important; }

.music-player.playing .music-play-icon{ display:none; }
.music-player.playing .music-pause-icon{ display:block; }

.music-meta{
  min-width:0;
  width:98px;
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.05;
}

.music-title{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#e5f6ff;
  font-size:10px;
  font-weight:600;
}

.music-artist{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#6f95aa;
  font-size:8px;
  letter-spacing:.035em;
}

.music-volume-wrap{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:92px;
}

.music-volume-icon{
  width:13px;
  height:13px;
  flex:0 0 13px;
  fill:none;
  stroke:#8fb8cf;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.music-volume{
  width:72px;
  height:18px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}

.music-volume::-webkit-slider-runnable-track{
  height:3px;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      rgba(183,228,251,.76) 0 var(--volume-fill,30%),
      rgba(120,154,174,.20) var(--volume-fill,30%) 100%
    );
  box-shadow:0 0 8px rgba(126,198,237,.06);
}

.music-volume::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:9px;
  height:9px;
  margin-top:-3px;
  border:0;
  border-radius:50%;
  background:#dff5ff;
  box-shadow:
    0 0 7px rgba(190,233,253,.40),
    0 0 14px rgba(126,198,237,.14);
}

.music-volume::-moz-range-track{
  height:3px;
  border-radius:999px;
  background:rgba(120,154,174,.20);
}

.music-volume::-moz-range-progress{
  height:3px;
  border-radius:999px;
  background:rgba(183,228,251,.76);
}

.music-volume::-moz-range-thumb{
  width:9px;
  height:9px;
  border:0;
  border-radius:50%;
  background:#dff5ff;
  box-shadow:0 0 7px rgba(190,233,253,.40);
}

@media (hover:hover) and (pointer:fine){
  .music-player:hover{
    border-color:rgba(202,238,255,.25);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 10px 24px rgba(0,0,0,.15),
      0 0 16px rgba(126,198,237,.07);
  }

  .music-play:hover{
    transform:scale(1.07);
    border-color:rgba(207,240,255,.34);
    box-shadow:
      0 0 14px rgba(126,198,237,.12),
      0 0 26px rgba(126,198,237,.05);
  }
}

/* Let the top bar wrap gracefully before controls collide. */
.nav{
  gap:12px!important;
}

@media(max-width:1120px){
  .music-player{
    min-width:220px;
  }

  .music-meta{
    width:78px;
  }

  .music-volume-wrap{
    min-width:76px;
  }

  .music-volume{
    width:56px;
  }
}

@media(max-width:900px){
  .music-player{
    order:4;
    width:min(330px,100%);
    margin-left:auto;
  }
}

@media(max-width:700px){
  .music-player{
    min-width:0;
    width:100%;
  }

  .music-meta{
    width:auto;
    flex:1 1 auto;
  }

  .music-volume-wrap{
    min-width:100px;
  }

  .music-volume{
    width:76px;
  }
}


/* ===== live-data v31: compact music player ===== */
.music-player{
  min-width:205px!important;
  height:38px!important;
  padding:3px 8px 3px 4px!important;
  gap:6px!important;
}

.music-play,
.music-skip{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
}

.music-skip{
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(198,235,253,.14);
  background:
    radial-gradient(circle at 50% 35%,rgba(216,243,255,.08),rgba(68,119,153,.03));
  color:#a9d2e7;
  padding:0;
  cursor:pointer;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .25s ease,
    color .25s ease,
    box-shadow .3s ease;
}

.music-skip svg{
  width:13px;
  height:13px;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.music-meta{
  width:72px!important;
}

.music-title{
  font-size:9px!important;
}

.music-artist{
  font-size:7px!important;
}

.music-volume-wrap{
  min-width:64px!important;
  gap:4px!important;
}

.music-volume{
  width:44px!important;
}

.music-volume::-webkit-slider-runnable-track{
  background:
    linear-gradient(
      90deg,
      rgba(183,228,251,.76) 0 var(--volume-fill,15%),
      rgba(120,154,174,.20) var(--volume-fill,15%) 100%
    )!important;
}

@media (hover:hover) and (pointer:fine){
  .music-skip:hover{
    transform:scale(1.07);
    color:#effbff;
    border-color:rgba(207,240,255,.30);
    box-shadow:
      0 0 12px rgba(126,198,237,.10),
      0 0 22px rgba(126,198,237,.05);
  }
}

@media(max-width:1120px){
  .music-player{
    min-width:190px!important;
  }
  .music-meta{
    width:64px!important;
  }
  .music-volume{
    width:38px!important;
  }
}

@media(max-width:700px){
  .music-player{
    width:100%!important;
  }
  .music-meta{
    width:auto!important;
    flex:1 1 auto!important;
  }
  .music-volume{
    width:56px!important;
  }
}


/* ===== live-data v32: actually compact top music player ===== */
.music-player{
  width:auto!important;
  min-width:0!important;
  max-width:190px!important;
  height:32px!important;
  flex:0 0 auto!important;
  padding:2px 6px 2px 3px!important;
  gap:4px!important;
  margin:0!important;
  order:initial!important;
}

.music-play,
.music-skip{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}

.music-play svg,
.music-skip svg{
  width:11px!important;
  height:11px!important;
}

.music-meta{
  width:56px!important;
  min-width:0!important;
  flex:0 0 56px!important;
}

.music-title{
  font-size:8px!important;
}

.music-artist{
  font-size:6px!important;
}

.music-volume-wrap{
  min-width:0!important;
  width:58px!important;
  flex:0 0 58px!important;
  gap:3px!important;
}

.music-volume-icon{
  width:10px!important;
  height:10px!important;
  flex:0 0 10px!important;
}

.music-volume{
  width:43px!important;
  min-width:0!important;
}

/* Undo the old breakpoint rules that made this stretch across the header. */
@media(max-width:1120px){
  .music-player{
    width:auto!important;
    min-width:0!important;
    max-width:190px!important;
  }
  .music-meta{
    width:52px!important;
    flex-basis:52px!important;
  }
  .music-volume{
    width:40px!important;
  }
}

@media(max-width:900px){
  .music-player{
    order:initial!important;
    width:auto!important;
    max-width:180px!important;
    margin:0!important;
  }
}

@media(max-width:700px){
  .music-player{
    width:auto!important;
    max-width:172px!important;
    flex:0 0 auto!important;
  }

  .music-meta{
    width:48px!important;
    flex:0 0 48px!important;
  }

  .music-volume-wrap{
    width:50px!important;
    min-width:0!important;
    flex:0 0 50px!important;
  }

  .music-volume{
    width:35px!important;
  }
}


/* =========================================================
   live-data v33 — HARD RESET / STABLE TOP BAR LAYOUT
   ========================================================= */

/* One clean row. Old flex/wrap rules no longer control the header. */
.topbar{
  height:74px!important;
  min-height:74px!important;
  display:block!important;
  overflow:visible!important;
}

.topbar > .nav.shell{
  position:relative!important;
  height:74px!important;
  min-height:74px!important;
  width:min(1220px,calc(100% - 48px))!important;
  margin:0 auto!important;
  padding:0!important;

  display:grid!important;
  grid-template-columns:
    minmax(155px,1fr)
    auto
    auto
    minmax(54px,1fr)!important;
  grid-template-areas:"brand navigation music group"!important;
  align-items:center!important;
  column-gap:12px!important;

  flex-wrap:nowrap!important;
  justify-content:normal!important;
}

/* LEFT — logo */
.topbar .logo{
  grid-area:brand!important;
  justify-self:start!important;
  align-self:center!important;
  margin:0!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
}

/* CENTER — main nav */
.topbar .nav-bubble{
  grid-area:navigation!important;
  justify-self:center!important;
  align-self:center!important;
  margin:0!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;

  flex-wrap:nowrap!important;
  white-space:nowrap!important;
}

/* Immediately to the right of main nav — compact music player */
.topbar .music-player{
  grid-area:music!important;
  justify-self:start!important;
  align-self:center!important;

  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;

  width:176px!important;
  min-width:176px!important;
  max-width:176px!important;
  height:32px!important;
  margin:0!important;
  flex:none!important;
  order:initial!important;
}

/* Trim metadata/slider enough that this never pushes layout around */
.topbar .music-meta{
  width:46px!important;
  min-width:46px!important;
  flex:0 0 46px!important;
}

.topbar .music-volume-wrap{
  width:47px!important;
  min-width:47px!important;
  flex:0 0 47px!important;
}

.topbar .music-volume{
  width:32px!important;
}

/* FAR RIGHT — spinning group star */
.topbar .roblox-snowflake-cta{
  grid-area:group!important;
  justify-self:end!important;
  align-self:center!important;

  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;

  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  flex:0 0 38px!important;
  margin:0!important;
}

/* Kill old header responsive rules that were putting controls onto new rows */
@media(max-width:1120px){
  .topbar > .nav.shell{
    width:min(1100px,calc(100% - 30px))!important;
    grid-template-columns:minmax(125px,1fr) auto auto minmax(44px,1fr)!important;
    column-gap:8px!important;
  }

  .topbar .music-player{
    width:160px!important;
    min-width:160px!important;
    max-width:160px!important;
  }

  .topbar .music-meta{
    width:38px!important;
    min-width:38px!important;
    flex-basis:38px!important;
  }

  .topbar .music-volume-wrap{
    width:42px!important;
    min-width:42px!important;
    flex-basis:42px!important;
  }

  .topbar .music-volume{
    width:27px!important;
  }
}

/* Tablet: keep ONE row, hide secondary artist text before breaking layout. */
@media(max-width:850px){
  .topbar{
    height:66px!important;
    min-height:66px!important;
  }

  .topbar > .nav.shell{
    height:66px!important;
    min-height:66px!important;
    width:calc(100% - 22px)!important;
    grid-template-columns:auto 1fr auto auto!important;
    column-gap:7px!important;
  }

  .topbar .logo{
    font-size:24px!important;
  }

  .topbar .nav-bubble{
    justify-self:center!important;
  }

  .topbar .nav-bubble a{
    min-width:auto!important;
    padding:8px 9px!important;
    font-size:8px!important;
  }

  .topbar .music-player{
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
  }

  .topbar .music-meta{
    width:38px!important;
    min-width:38px!important;
    flex-basis:38px!important;
  }

  .topbar .music-artist{
    display:none!important;
  }

  .topbar .music-volume-wrap{
    display:none!important;
  }
}

/* Phone: keep logo + nav + tiny music controls + star in one stable row. */
@media(max-width:600px){
  .topbar > .nav.shell{
    width:calc(100% - 14px)!important;
    grid-template-columns:auto 1fr auto auto!important;
    column-gap:5px!important;
  }

  .topbar .logo{
    font-size:20px!important;
  }

  .topbar .logo > span{
    transform:translateY(-3px)!important;
  }

  .topbar .nav-bubble{
    gap:0!important;
    padding:3px!important;
  }

  .topbar .nav-bubble a{
    padding:7px 6px!important;
    font-size:7px!important;
    letter-spacing:.09em!important;
  }

  .topbar .music-player{
    width:60px!important;
    min-width:60px!important;
    max-width:60px!important;
    padding:2px 3px!important;
    gap:3px!important;
  }

  .topbar .music-meta,
  .topbar .music-volume-wrap{
    display:none!important;
  }

  .topbar .music-play,
  .topbar .music-skip{
    width:24px!important;
    height:24px!important;
    flex:0 0 24px!important;
  }

  .topbar .roblox-snowflake-cta{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    flex-basis:32px!important;
  }
}


/* ===== live-data v34: shift center header controls right ===== */
/* Move the nav bubble + music player together slightly right,
   without touching the left logo or far-right spinning star. */
@media(min-width:851px){
  .topbar .nav-bubble{
    transform:translateX(24px)!important;
  }

  .topbar .music-player{
    transform:translateX(24px)!important;
  }
}

@media(min-width:601px) and (max-width:850px){
  .topbar .nav-bubble{
    transform:translateX(10px)!important;
  }

  .topbar .music-player{
    transform:translateX(10px)!important;
  }
}


/* =========================================================
   live-data v35 — FINAL HEADER POSITIONING
   ========================================================= */
.topbar{
  height:74px!important;
  min-height:74px!important;
}

.topbar > .nav.shell{
  position:relative!important;
  display:block!important;
  height:74px!important;
  min-height:74px!important;
  width:min(1220px,calc(100% - 48px))!important;
  margin:0 auto!important;
  padding:0!important;
}

/* Logo stays independently on the left. */
.topbar .logo{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  margin:0!important;
}

/* Navigation bubble is mathematically centered in the header. */
.topbar .nav-bubble{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  white-space:nowrap!important;
}

/* Music sits right beside the centered navigation, not part of its centering. */
.topbar .music-player{
  position:absolute!important;
  left:calc(50% + 190px)!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  margin-left:10px!important;

  width:176px!important;
  min-width:176px!important;
  max-width:176px!important;
  height:32px!important;
}

/* The old top-right star is gone; hide any surviving copy defensively. */
.topbar .roblox-snowflake-cta{
  display:none!important;
}

/* Tablet */
@media(max-width:850px){
  .topbar,
  .topbar > .nav.shell{
    height:66px!important;
    min-height:66px!important;
  }

  .topbar > .nav.shell{
    width:calc(100% - 22px)!important;
  }

  .topbar .music-player{
    left:calc(50% + 158px)!important;
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    margin-left:7px!important;
  }
}

/* On small screens keep the nav centered and use only the compact music controls
   immediately after it. */
@media(max-width:600px){
  .topbar > .nav.shell{
    width:calc(100% - 14px)!important;
  }

  .topbar .logo{
    font-size:20px!important;
  }

  .topbar .nav-bubble{
    left:52%!important;
  }

  .topbar .music-player{
    left:auto!important;
    right:0!important;
    width:60px!important;
    min-width:60px!important;
    max-width:60px!important;
    margin:0!important;
  }
}


/* ===== live-data v36: taller music player, same width ===== */
@media(min-width:851px){
  .topbar .music-player{
    width:176px!important;
    min-width:176px!important;
    max-width:176px!important;
    height:40px!important;
    padding:4px 7px 4px 4px!important;
    border-radius:999px!important;
  }

  .topbar .music-play,
  .topbar .music-skip{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
  }

  .topbar .music-play svg,
  .topbar .music-skip svg{
    width:13px!important;
    height:13px!important;
  }

  .topbar .music-title{
    font-size:9px!important;
  }

  .topbar .music-artist{
    font-size:7px!important;
  }
}


/* ===== live-data v37: slightly wider + more readable music player ===== */
@media(min-width:851px){
  .topbar .music-player{
    width:205px!important;
    min-width:205px!important;
    max-width:205px!important;
    height:40px!important;
    gap:6px!important;
    padding:4px 9px 4px 4px!important;
  }

  .topbar .music-meta{
    width:66px!important;
    min-width:66px!important;
    flex:0 0 66px!important;
  }

  .topbar .music-title{
    font-size:10px!important;
    line-height:1.15!important;
    letter-spacing:.005em!important;
  }

  .topbar .music-artist{
    display:block!important;
    font-size:8px!important;
    line-height:1.15!important;
    letter-spacing:.02em!important;
  }

  .topbar .music-volume-wrap{
    width:55px!important;
    min-width:55px!important;
    flex:0 0 55px!important;
  }

  .topbar .music-volume{
    width:39px!important;
  }
}


/* ===== live-data v38: hide music player until playback begins ===== */
.topbar .music-player{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;

  /* Keep its final position but animate locally from a small icy pop. */
  scale:.88!important;
  transform:
    translateY(-50%)
    translateX(8px)!important;

  transition:
    opacity .38s ease,
    scale .42s cubic-bezier(.18,.88,.24,1.18),
    transform .42s cubic-bezier(.18,.88,.24,1.18),
    filter .38s ease!important;

  filter:blur(3px);
}

.topbar .music-player.music-player-visible{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  scale:1!important;
  transform:
    translateY(-50%)
    translateX(0)!important;
  filter:blur(0);
}

/* Keep the nav mathematically centered whether the player is visible or not. */
.topbar .nav-bubble{
  transform:translate(-50%,-50%)!important;
}

@media(prefers-reduced-motion:reduce){
  .topbar .music-player{
    transition:opacity .18s ease!important;
    scale:1!important;
    filter:none!important;
    transform:translateY(-50%)!important;
  }
}


/* =========================================================
   live-data v40 — global hover/tween clipping cleanup
   ========================================================= */

/* Sections and shells should never crop lifted/glowing children. */
section,
.shell,
.headrow,
.hero,
.hero-copy,
.hero-visual,
.about,
.community-wrap,
.community-card,
.community-footer,
.other-groups-block,
.store-shell,
.store-grid-wrap,
.footer,
footer{
  overflow:visible!important;
}

/* Product/card grids need breathing room for scale/lift/glow. */
#newGrid,
#salesGrid,
#storeGrid,
.grid,
.cards,
.store-grid,
.drops-track,
.other-groups-track{
  overflow:visible!important;
  padding-top:14px!important;
  padding-bottom:18px!important;
}

/* Viewports can still crop horizontal carousel travel,
   but add inner vertical breathing room so hover scale isn't chopped. */
#dropsViewport,
.drops-viewport,
.other-groups-viewport{
  overflow-x:hidden!important;
  overflow-y:visible!important;
  padding-top:14px!important;
  padding-bottom:18px!important;
  margin-top:-14px!important;
  margin-bottom:-18px!important;
}

/* Avoid local card-art clipping of glow/scale unless explicitly needed. */
.card,
.other-group-card,
.community-stat,
.store-cta,
.group-join-cta,
.back-top-cta,
.social-icon,
.music-player,
.music-play,
.music-skip,
.nav-bubble,
.nav-bubble a{
  overflow:visible!important;
}

/* Keep actual image crop inside cards, but let card glow escape. */
.card-art{
  overflow:hidden!important;
  border-radius:inherit;
}

/* Give hover transforms a clean stacking context and z-raise. */
.card,
.other-group-card,
.community-stat,
.store-cta,
.group-join-cta,
.back-top-cta,
.social-icon,
.music-play,
.music-skip,
.nav-bubble a{
  position:relative;
  z-index:1;
}

@media (hover:hover) and (pointer:fine){
  .card:hover,
  .other-group-card:hover,
  .community-stat:hover,
  .store-cta:hover,
  .group-join-cta:hover,
  .back-top-cta:hover,
  .social-icon:hover,
  .music-play:hover,
  .music-skip:hover,
  .nav-bubble a:hover{
    z-index:20!important;
  }
}

/* Prevent carousel edge-mask from visibly cutting hover glow.
   Keep the fade on content itself instead of clipping the glow halo. */
#newGrid,
#salesGrid{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* Recreate smooth edge fade with opacity on cards, not hard masking. */
#newGrid .card,
#salesGrid .card{
  opacity:var(--edge-opacity,1)!important;
}

/* Ensure transformed headings/buttons aren't cropped by line boxes. */
h1,h2,h3,
.btn,
.pill,
.logo{
  overflow:visible!important;
}


/* ===== live-data v41: cleaner rounded UGC cards ===== */
.card{
  border-radius:22px!important;
  overflow:visible!important;
}

.card-art{
  border-radius:22px 22px 16px 16px!important;
  overflow:hidden!important;
}

.card-art > img,
.card-art > .ugc-thumb-loading,
.card-art > .fake-item{
  border-radius:inherit!important;
}

.card-info{
  border-radius:0 0 22px 22px!important;
}

/* Keep hover glow/lift clean around rounded edges. */
@media (hover:hover) and (pointer:fine){
  .card:hover{
    border-radius:24px!important;
  }
}


/* ===== live-data v42: hide carousel scrollbars ===== */
#dropsViewport,
.drops-viewport,
#newGrid,
#salesGrid,
.other-groups-viewport{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}

#dropsViewport::-webkit-scrollbar,
.drops-viewport::-webkit-scrollbar,
#newGrid::-webkit-scrollbar,
#salesGrid::-webkit-scrollbar,
.other-groups-viewport::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

/* Ensure no accidental vertical scrollbar appears in carousel containers. */
#dropsViewport,
.drops-viewport,
.other-groups-viewport{
  overflow-x:hidden!important;
  overflow-y:hidden!important;
}


/* ===== live-data v43: fix carousel hover clipping ===== */

/* Keep the horizontal carousel clipped, but create vertical room INSIDE
   the viewport so scaled/glowing cards do not hit the top/bottom edge. */
#dropsViewport,
.drops-viewport{
  overflow-x:hidden!important;
  overflow-y:visible!important;

  padding-top:28px!important;
  padding-bottom:30px!important;

  margin-top:-28px!important;
  margin-bottom:-30px!important;
}

/* The moving track itself must allow cards/glows to escape vertically. */
#newGrid,
#salesGrid{
  overflow:visible!important;
  padding-top:14px!important;
  padding-bottom:16px!important;
}

/* Give hovered carousel cards priority so neighbors don't visually cut them. */
#newGrid .card,
#salesGrid .card{
  position:relative!important;
  transform-origin:center center!important;
  z-index:1;
}

@media (hover:hover) and (pointer:fine){
  #newGrid .card:hover,
  #salesGrid .card:hover{
    z-index:50!important;
  }
}

/* Keep scrollbar hidden without forcing vertical clipping. */
#dropsViewport,
.drops-viewport,
#newGrid,
#salesGrid{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}

#dropsViewport::-webkit-scrollbar,
.drops-viewport::-webkit-scrollbar,
#newGrid::-webkit-scrollbar,
#salesGrid::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}


/* =========================================================
   live-data v44 — stabilize shine/glow buttons
   ========================================================= */

/* Shared cleanup for the two shiny CTA buttons */
.store-cta,
.group-join-cta{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .32s ease,
    background .32s ease!important;
}

/* Remove any old pseudo-element shine behavior that was fighting hover transforms. */
.store-cta::before,
.store-cta::after,
.group-join-cta::before,
.group-join-cta::after{
  pointer-events:none!important;
}

/* Stable inner shine layer */
.store-cta::before,
.group-join-cta::before{
  content:""!important;
  position:absolute!important;
  inset:-35%!important;
  z-index:-1!important;

  background:
    linear-gradient(
      115deg,
      transparent 28%,
      rgba(224,246,255,.05) 40%,
      rgba(224,246,255,.16) 50%,
      rgba(224,246,255,.05) 60%,
      transparent 72%
    )!important;

  transform:translateX(-65%) rotate(4deg)!important;
  opacity:.45!important;
  filter:blur(.2px);
  transition:
    transform .7s cubic-bezier(.2,.7,.2,1),
    opacity .32s ease!important;
  will-change:transform,opacity;
}

/* Soft glow stays on the button itself, not a giant pseudo layer */
.store-cta,
.group-join-cta{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(0,0,0,.14),
    0 0 12px rgba(126,198,237,.05)!important;
}

@media (hover:hover) and (pointer:fine){
  .store-cta:hover,
  .group-join-cta:hover{
    transform:translateY(-2px) scale(1.025)!important;
    border-color:rgba(205,239,255,.38)!important;
    background:
      linear-gradient(135deg,rgba(213,242,255,.11),rgba(73,126,159,.045))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 11px 24px rgba(0,0,0,.18),
      0 0 18px rgba(126,198,237,.13),
      0 0 32px rgba(126,198,237,.06)!important;
  }

  .store-cta:hover::before,
  .group-join-cta:hover::before{
    transform:translateX(65%) rotate(4deg)!important;
    opacity:.72!important;
  }
}

/* Prevent repeated hover entry/exit from leaving the shine in a weird state */
.store-cta:active,
.group-join-cta:active{
  transform:translateY(0) scale(.99)!important;
}

@media(prefers-reduced-motion:reduce){
  .store-cta::before,
  .group-join-cta::before{
    transition:none!important;
    transform:none!important;
    opacity:.10!important;
  }
}


/* ===== live-data v45: keep Join Lastwinter bright on hover ===== */
.group-join-cta{
  color:#102838!important;
  background:
    linear-gradient(
      135deg,
      rgba(232,248,255,.98),
      rgba(183,226,247,.94)
    )!important;
  border-color:rgba(226,247,255,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 8px 22px rgba(0,0,0,.14),
    0 0 16px rgba(151,216,248,.12)!important;
}

.group-join-cta::before{
  z-index:0!important;
}

.group-join-cta > *{
  position:relative;
  z-index:2;
}

@media (hover:hover) and (pointer:fine){
  .group-join-cta:hover{
    color:#0c2535!important;
    background:
      linear-gradient(
        135deg,
        rgba(244,252,255,1),
        rgba(195,234,252,.98)
      )!important;
    border-color:rgba(235,250,255,.94)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.92),
      0 11px 25px rgba(0,0,0,.16),
      0 0 20px rgba(161,221,250,.24),
      0 0 38px rgba(126,198,237,.10)!important;
  }
}


/* =========================================================
   live-data v46 — stabilize Back to Top shine
   ========================================================= */

.back-top-cta{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  color:#dff5ff!important;
  background:
    linear-gradient(135deg,rgba(210,239,255,.08),rgba(69,121,154,.04))!important;
  border:1px solid rgba(194,232,251,.20)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(0,0,0,.14),
    0 0 12px rgba(126,198,237,.05)!important;

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .32s ease,
    background .32s ease,
    color .28s ease!important;
}

.back-top-cta::before{
  content:""!important;
  position:absolute!important;
  inset:-35%!important;
  z-index:0!important;
  pointer-events:none!important;

  background:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(225,247,255,.05) 41%,
      rgba(225,247,255,.17) 50%,
      rgba(225,247,255,.05) 59%,
      transparent 70%
    )!important;

  transform:translateX(-68%) rotate(4deg)!important;
  opacity:.42!important;
  transition:
    transform .72s cubic-bezier(.2,.7,.2,1),
    opacity .32s ease!important;
  will-change:transform,opacity;
}

/* Kill any competing old second pseudo shine. */
.back-top-cta::after{
  content:none!important;
  display:none!important;
}

.back-top-cta > *{
  position:relative!important;
  z-index:2!important;
}

@media (hover:hover) and (pointer:fine){
  .back-top-cta:hover{
    transform:translateY(-2px) scale(1.025)!important;
    color:#f2fbff!important;
    background:
      linear-gradient(135deg,rgba(220,245,255,.12),rgba(82,140,175,.055))!important;
    border-color:rgba(205,239,255,.38)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 11px 24px rgba(0,0,0,.18),
      0 0 18px rgba(126,198,237,.13),
      0 0 32px rgba(126,198,237,.06)!important;
  }

  .back-top-cta:hover::before{
    transform:translateX(68%) rotate(4deg)!important;
    opacity:.72!important;
  }
}

.back-top-cta:active{
  transform:translateY(0) scale(.99)!important;
}

@media(prefers-reduced-motion:reduce){
  .back-top-cta::before{
    transition:none!important;
    transform:none!important;
    opacity:.10!important;
  }
}


/* ===== live-data v47: official social brand marks ===== */
.social-icon .brand-logo{
  width:17px!important;
  height:17px!important;
  display:block!important;
  fill:currentColor!important;
  stroke:none!important;
  filter:drop-shadow(0 0 6px rgba(171,223,250,.20));
}

.social-icon .brand-discord{
  width:18px!important;
  height:18px!important;
}

.social-icon .brand-roblox{
  width:16px!important;
  height:16px!important;
}


/* =========================================================
   live-data v48 — Discord hover + cursor-reactive ornaments
   ========================================================= */

/* Discord is a button, so it didn't inherit the anchor-only social hover. */
@media (hover:hover) and (pointer:fine){
  .discord-copy:hover{
    transform:translateY(-3px) scale(1.07)!important;
    color:#f0fbff!important;
    border-color:rgba(207,240,255,.38)!important;
    background:
      radial-gradient(circle at 50% 38%,rgba(218,244,255,.16),rgba(83,142,177,.06))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 10px 24px rgba(0,0,0,.20),
      0 0 18px rgba(126,198,237,.15),
      0 0 34px rgba(126,198,237,.07)!important;
  }

  .discord-copy:hover .brand-discord{
    transform:scale(1.10) rotate(-5deg);
    filter:
      drop-shadow(0 0 7px rgba(193,232,252,.35))
      drop-shadow(0 0 14px rgba(126,198,237,.13));
  }
}

.discord-copy .brand-discord{
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    filter .3s ease;
}

/* JS owns pendant rotation so cursor interaction and natural sway blend together. */
@media (hover:hover) and (pointer:fine){
  .hero-wordmark .title-ornament{
    animation:none!important;
    will-change:transform;
    transition:none!important;
  }

  .hero-wordmark .title-snowflake{
    cursor:default;
  }
}


/* ===== live-data v49: keep Best Sellers on one line ===== */
#popular .headrow h2,
#popular h2{
  white-space:nowrap!important;
  word-break:keep-all!important;
}


/* =========================================================
   live-data v50 — interactive 3D hero cards
   ========================================================= */

.hero-visual{
  perspective:1200px;
}

/* Shared 3D tilt */
.tilt-card{
  transform-style:preserve-3d;
  will-change:transform;
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    filter .28s ease!important;
}

@media (hover:hover) and (pointer:fine){
  .tilt-card:hover{
    box-shadow:
      0 28px 55px rgba(0,0,0,.28),
      0 0 28px rgba(126,198,237,.10),
      0 0 60px rgba(126,198,237,.05)!important;
    filter:brightness(1.035);
  }
}

/* subtle depth for children */
.tilt-card .card-art,
.tilt-card .moon,
.tilt-card .meta,
.tilt-card .tiny,
.tilt-card .card-label{
  transform:translateZ(18px);
}

/* Right card flip mechanics */
.flip-card{
  cursor:pointer;
  perspective:1200px;
}

.flip-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.75,.2,1);
}

.flip-card.is-flipped .flip-card-inner{
  transform:rotateY(180deg);
}

.flip-card-face{
  position:absolute;
  inset:0;
  border-radius:inherit;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}

.flip-card-front{
  transform:rotateY(0deg);
}

.flip-card-back{
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:22px;
  text-align:center;

  background:
    radial-gradient(circle at 50% 35%,rgba(205,239,255,.10),transparent 44%),
    linear-gradient(145deg,rgba(12,33,48,.96),rgba(5,18,28,.98));
  border:1px solid rgba(203,239,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

.flip-back-kicker{
  font-size:8px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#6f99b2;
}

.flip-back-title{
  font-family:"Instrument Serif",serif;
  font-size:30px;
  color:#e9f8ff;
  text-shadow:0 0 18px rgba(158,219,249,.10);
}

.flip-join-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:145px;
  padding:11px 18px;
  border-radius:999px;
  border:1px solid rgba(225,247,255,.72);
  background:
    linear-gradient(135deg,rgba(242,251,255,.98),rgba(188,231,251,.95));
  color:#102838;
  font-size:10px;
  font-weight:700;
  text-decoration:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 24px rgba(0,0,0,.18),
    0 0 18px rgba(150,216,249,.14);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    filter .3s ease;
}

@media (hover:hover) and (pointer:fine){
  .flip-join-btn:hover{
    transform:translateY(-2px) scale(1.035);
    filter:brightness(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 12px 28px rgba(0,0,0,.20),
      0 0 22px rgba(153,220,251,.24),
      0 0 42px rgba(126,198,237,.10);
  }
}

/* Keep the left and right cards' original base rotations while adding JS tilt. */
#latestDropCard{
  --base-rotate:-8deg;
}
#groupFlipCard{
  --base-rotate:7deg;
}

@media(prefers-reduced-motion:reduce){
  .tilt-card,
  .flip-card-inner{
    transition:none!important;
  }
}


/* ===== live-data v51: stronger physical hanging-snowflake interaction ===== */
@media (hover:hover) and (pointer:fine){
  .hero-wordmark .title-ornament{
    will-change:transform!important;
    transform-origin:50% 0!important;
  }

  .hero-wordmark .title-snowflake{
    filter:
      drop-shadow(0 0 7px rgba(196,234,252,.18))
      drop-shadow(0 0 16px rgba(126,198,237,.06));
  }
}


/* ===== live-data v52: BEST SELLERS actually stays on ONE line ===== */
#popular .section-title,
#popular .headrow h2,
#popular h2{
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  width:max-content!important;
  max-width:none!important;
  min-width:max-content!important;
}

/* Don't let the left heading column force the title into a narrow box. */
#popular .headrow,
#popular .section-heading,
#popular .heading-copy{
  overflow:visible!important;
}

#popular .headrow > :first-child{
  width:auto!important;
  min-width:max-content!important;
  max-width:none!important;
}


/* ===== live-data v53: fixed-anchor bending snowflake strings ===== */
@media (hover:hover) and (pointer:fine){
  .hero-wordmark .title-ornament{
    transform:none!important;
    animation:none!important;
  }

  .hero-wordmark .title-snowflake{
    will-change:transform!important;
    transform-origin:center center!important;
  }

  .hero-wordmark .title-string,
  .hero-wordmark .ornament-line{
    will-change:transform!important;
    transform-origin:50% 0%!important;
  }
}


/* =========================================================
   live-data v54 — HARD FIX: BEST SELLERS + ALL PIECES one line
   ========================================================= */

/* The headings themselves can NEVER wrap. */
#popular h2,
#store h2,
#popular .section-title,
#store .section-title,
#popular .display-title,
#store .display-title{
  display:block!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  hyphens:none!important;

  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
}

/* Their heading columns are no longer allowed to squeeze them. */
#popular .headrow,
#store .headrow{
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}

#popular .headrow > :first-child,
#store .headrow > :first-child,
#popular .section-heading,
#store .section-heading,
#popular .heading-copy,
#store .heading-copy{
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
  overflow:visible!important;
}

/* Any spans inside these headings must remain inline. */
#popular h2 span,
#store h2 span,
#popular .section-title span,
#store .section-title span{
  display:inline!important;
  white-space:nowrap!important;
}

/* Even if an old BR somehow survives, suppress it. */
#popular h2 br,
#store h2 br,
#popular .section-title br,
#store .section-title br{
  display:none!important;
}

/* Give the right-hand content the remaining width instead of crushing heading. */
#popular .headrow > :last-child,
#store .headrow > :last-child{
  min-width:0!important;
}


/* =========================================================
   live-data v55 — ACTUAL HEADING FIX
   The real elements are H3, not H2.
   ========================================================= */

#popular h3,
#store h3{
  display:block!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;

  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;

  line-height:.95!important;
}

/* Never allow their wrapper to constrain the phrase width. */
#popular .headrow > div:first-child,
#store .headrow > div:first-child{
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
}

/* Keep the heading row itself from squeezing the title. */
#popular .headrow,
#store .headrow{
  flex-wrap:nowrap!important;
  overflow:visible!important;
}

/* Mobile: still one line; reduce size instead of wrapping. */
@media(max-width:600px){
  #popular h3,
  #store h3{
    font-size:clamp(42px,14vw,58px)!important;
    white-space:nowrap!important;
  }
}


/* ===== live-data v56: NEW DROPS one line ===== */
#new h3{
  display:block!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
  line-height:.95!important;
}

#new .headrow > div:first-child{
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
}

#new .headrow{
  flex-wrap:nowrap!important;
  overflow:visible!important;
}

@media(max-width:600px){
  #new h3{
    font-size:clamp(42px,14vw,58px)!important;
    white-space:nowrap!important;
  }
}


/* ===== live-data v56: restore snowflake motion/interactivity ===== */
@media (hover:hover) and (pointer:fine){
  .hero-wordmark .title-ornament{
    animation:none!important;
    transform:none!important;
  }

  .hero-wordmark .title-snowflake,
  .hero-wordmark .title-snowflake-hook{
    will-change:transform!important;
    transform-origin:center center!important;
  }

  .hero-wordmark .title-string-hook,
  .hero-wordmark .title-string,
  .hero-wordmark .ornament-line{
    will-change:transform!important;
    transform-origin:50% 0%!important;
  }
}


/* =========================================================
   live-data v57 — REAL snowflake interaction fix
   ========================================================= */
@media (hover:hover) and (pointer:fine){

  /* Parent remains fixed to the title. JS moves ONLY the flake and lower line angle. */
  .hero-wordmark .title-ornament{
    animation:none!important;
    transform:none!important;
    pointer-events:none!important;
  }

  /* Let JS own motion. The existing `translate:-3px 0` optical correction stays. */
  .hero-wordmark .title-snowflake{
    animation:none!important;
    will-change:transform!important;
    transform-origin:50% 15%!important;
  }

  /* Line top remains anchored; JS rotates/stretches from the top. */
  .hero-wordmark .title-string{
    animation:none!important;
    transform-origin:50% 0%!important;
    will-change:transform!important;
  }
}


/* ===== live-data v58: stronger 3D hero card response ===== */
@media (hover:hover) and (pointer:fine){
  .hero-3d-card:hover{
    filter:brightness(1.045) saturate(1.025)!important;
    box-shadow:
      0 30px 60px rgba(0,0,0,.30),
      0 0 34px rgba(126,198,237,.13),
      0 0 70px rgba(126,198,237,.055)!important;
  }
}


/* ===== live-data v59: exact pictured group card 3D hover ===== */
#groupFlipCard{
  transform-style:preserve-3d!important;
  perspective:1100px!important;
  will-change:transform!important;
  cursor:pointer!important;
}

#groupFlipCard .flip-card-inner{
  transform-style:preserve-3d!important;
}

@media (hover:hover) and (pointer:fine){
  #groupFlipCard:hover{
    filter:brightness(1.055) saturate(1.035)!important;
    box-shadow:
      0 34px 66px rgba(0,0,0,.32),
      0 0 36px rgba(126,198,237,.14),
      0 0 76px rgba(126,198,237,.06)!important;
  }
}


/* =========================================================
   live-data v60 — REAL group-card 3D fix
   ========================================================= */

/* Exact real card is now hooked in markup as #groupFlipCard. */
.hero-visual #groupFlipCard{
  transform-style:preserve-3d!important;
  perspective:1000px!important;
  will-change:transform!important;
  cursor:pointer!important;
  transition:
    box-shadow .24s ease,
    filter .24s ease!important;
}

/* Push visible contents forward so the tilt reads as actual depth. */
#groupFlipCard > *,
#groupFlipCard .flip-card-front > *{
  transform:translateZ(22px);
  transform-style:preserve-3d;
}

@media (hover:hover) and (pointer:fine){
  .hero-visual #groupFlipCard:hover{
    filter:brightness(1.07) saturate(1.04)!important;
    box-shadow:
      0 38px 74px rgba(0,0,0,.34),
      0 0 42px rgba(126,198,237,.16),
      0 0 86px rgba(126,198,237,.07)!important;
  }
}


/* Remove the oversized decorative glow/halo bleeding in from the left.
   Keep the card's normal glass shading intact. */
#community3dCard::before{
  opacity:.18!important;
  filter:none!important;
  box-shadow:none!important;
}

#community3dCard::after{
  box-shadow:none!important;
}

/* Specifically neutralize large blurred/radial pseudo glow layers around this card. */
.community-card::before,
.community-card::after,
#community3dCard .community-glow,
#community3dCard .glow-orb,
#community3dCard .ambient-glow{
  filter:none!important;
}

/* Give the actual contents subtle depth so the 3D effect reads clearly. */
#community3dCard > *{
  position:relative;
  transform:translateZ(16px);
  transform-style:preserve-3d;
}

@media (hover:hover) and (pointer:fine){
  #community3dCard:hover{
    border-color:rgba(202,237,255,.30)!important;
    filter:brightness(1.025)!important;
    box-shadow:
      0 30px 65px rgba(0,0,0,.25),
      0 0 26px rgba(126,198,237,.08),
      inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #community3dCard{
    transform:none!important;
  }
}


/* =========================================================
   live-data v62 — restore compact community card + 3D
   ========================================================= */

/* Restore the original compact footprint. */
#community3dCard{
  width:min(760px,calc(100% - 48px))!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  margin-left:auto!important;
  margin-right:auto!important;

  transform-style:preserve-3d!important;
  will-change:transform!important;
  position:relative!important;
  isolation:isolate!important;

  transition:
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease!important;
}

/* Do NOT translate every child; that was part of what made the layout weird. */
#community3dCard > *{
  transform:none!important;
}

/* Keep only a tiny amount of depth on the main inner pieces. */
#community3dCard .community-head,
#community3dCard .community-main,
#community3dCard .community-stats,
#community3dCard .group-join-cta{
  transform:translateZ(10px);
  transform-style:preserve-3d;
}

/* Remove the giant left-side halo without changing card dimensions. */
#community3dCard::before{
  opacity:.06!important;
  filter:none!important;
  box-shadow:none!important;
}

#community3dCard::after{
  box-shadow:none!important;
}

@media (hover:hover) and (pointer:fine){
  #community3dCard:hover{
    border-color:rgba(202,237,255,.28)!important;
    filter:brightness(1.02)!important;
    box-shadow:
      0 26px 58px rgba(0,0,0,.23),
      0 0 24px rgba(126,198,237,.07),
      inset 0 1px 0 rgba(255,255,255,.05)!important;
  }
}

@media(max-width:700px){
  #community3dCard{
    width:calc(100% - 24px)!important;
  }
}


/* =========================================================
   live-data v63 — REAL community-card height fix
   ========================================================= */

/*
  The old 3D rule `#community3dCard > * { position:relative; }`
  overrode `.community-orbit { position:absolute; }`.
  That put the giant decorative circles into document flow and
  made the card hundreds of pixels taller.
*/

/* Decorative circles must NEVER contribute to card height. */
#community3dCard > .community-orbit{
  position:absolute!important;
  pointer-events:none!important;
}

/* Restore their intended placements. */
#community3dCard > .orbit-one{
  left:-150px!important;
  bottom:-145px!important;
}

#community3dCard > .orbit-two{
  right:-110px!important;
  bottom:-120px!important;
}

/* Explicitly let the card size itself only from its real content. */
#community3dCard{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  align-self:auto!important;
}

/* Keep normal content in flow; 3D depth remains harmless. */
#community3dCard > .community-topline,
#community3dCard > .community-identity,
#community3dCard > .shout,
#community3dCard > .community-stats,
#community3dCard > .community-footer{
  position:relative!important;
}

/* Slightly tighten vertical spacing back toward the original compact card. */
#community3dCard .community-identity{
  padding-top:24px!important;
}

#community3dCard .community-footer{
  margin-top:20px!important;
}


/* ===== live-data v64: stronger community-card 3D depth ===== */
#community3dCard{
  perspective:1000px!important;
}

#community3dCard .community-topline,
#community3dCard .community-identity,
#community3dCard .shout,
#community3dCard .community-stats,
#community3dCard .community-footer{
  transform:translateZ(18px)!important;
  transform-style:preserve-3d!important;
}

@media (hover:hover) and (pointer:fine){
  #community3dCard:hover{
    filter:brightness(1.035) saturate(1.025)!important;
    box-shadow:
      0 34px 72px rgba(0,0,0,.28),
      0 0 34px rgba(126,198,237,.11),
      0 0 70px rgba(126,198,237,.05),
      inset 0 1px 0 rgba(255,255,255,.055)!important;
  }
}


/* =========================================================
   live-data v65 — clickable flipping group card
   ========================================================= */

#groupFlipCard{
  cursor:pointer!important;
  perspective:1100px!important;
  transform-style:preserve-3d!important;
}

#groupFlipCard .group-card-flip-inner{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  transform-style:preserve-3d!important;
  transition:transform .72s cubic-bezier(.2,.78,.2,1)!important;
}

#groupFlipCard.is-flipped .group-card-flip-inner{
  transform:rotateY(180deg)!important;
}

#groupFlipCard .group-card-face{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
}

#groupFlipCard .group-card-front{
  transform:rotateY(0deg)!important;
}

#groupFlipCard .group-card-back{
  transform:rotateY(180deg)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  padding:24px!important;
  text-align:center!important;
  overflow:hidden!important;

  background:
    radial-gradient(circle at 50% 35%,rgba(205,239,255,.12),transparent 46%),
    linear-gradient(145deg,rgba(15,38,55,.97),rgba(6,20,31,.98))!important;

  border:1px solid rgba(204,239,255,.18)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 34px rgba(126,198,237,.035)!important;
}

.group-card-back-kicker{
  font-size:8px!important;
  letter-spacing:.22em!important;
  text-transform:uppercase!important;
  color:#73a0b9!important;
}

.group-card-back-title{
  font-family:"Instrument Serif",serif!important;
  font-size:29px!important;
  line-height:1!important;
  color:#edfaff!important;
  text-shadow:0 0 20px rgba(158,219,249,.11)!important;
}

.group-card-join-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:145px!important;
  padding:11px 18px!important;
  border-radius:999px!important;
  border:1px solid rgba(227,248,255,.78)!important;

  background:
    linear-gradient(135deg,rgba(244,252,255,.99),rgba(188,231,251,.96))!important;

  color:#102838!important;
  font-size:10px!important;
  font-weight:700!important;
  text-decoration:none!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 24px rgba(0,0,0,.20),
    0 0 18px rgba(150,216,249,.16)!important;

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    filter .3s ease!important;
}

@media (hover:hover) and (pointer:fine){
  .group-card-join-btn:hover{
    transform:translateY(-2px) scale(1.045)!important;
    filter:brightness(1.055)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      0 13px 29px rgba(0,0,0,.22),
      0 0 24px rgba(153,220,251,.26),
      0 0 44px rgba(126,198,237,.11)!important;
  }
}

/* Keep the original front content positioned normally inside its face. */
#groupFlipCard .group-card-front > *{
  transform-style:preserve-3d;
}

@media(prefers-reduced-motion:reduce){
  #groupFlipCard .group-card-flip-inner{
    transition:none!important;
  }
}


/* ===== live-data v67: group card flip actually toggles once ===== */
#groupFlipCard .group-card-flip-inner{
  transition:transform .72s cubic-bezier(.2,.78,.2,1)!important;
}

#groupFlipCard.is-flipped .group-card-flip-inner{
  transform:rotateY(180deg)!important;
}

@media (prefers-reduced-motion: no-preference){
  #groupFlipCard .group-card-flip-inner{
    transition:transform .72s cubic-bezier(.2,.78,.2,1)!important;
  }
}


/* =========================================================
   live-data v68 — keep group-card background identical on flip
   ========================================================= */

/* The outer frosted .fc2 card remains the only background.
   The back face is transparent so flipping changes content only. */
#groupFlipCard .group-card-back{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Remove any inner panel/frame appearance on either face. */
#groupFlipCard .group-card-face{
  background-color:transparent!important;
  box-shadow:none!important;
}

/* Keep the back text floating naturally on the same glass card. */
#groupFlipCard .group-card-back-kicker{
  color:rgba(154,203,228,.78)!important;
}

#groupFlipCard .group-card-back-title{
  color:#eaf9ff!important;
  text-shadow:
    0 0 16px rgba(176,226,250,.12),
    0 0 30px rgba(126,198,237,.05)!important;
}


/* =========================================================
   live-data v69 — group icon must never block card flipping
   ========================================================= */

/* The Roblox group icon is purely visual. All pointer input goes to the card. */
#groupFlipCard #heroGroupIcon,
#groupFlipCard #heroGroupIcon *,
#groupFlipCard .group-card-front .moon,
#groupFlipCard .group-card-front .moon *{
  pointer-events:none!important;
  user-select:none!important;
}

/* Same for decorative/front-face text so the entire front behaves as one button. */
#groupFlipCard .group-card-front{
  pointer-events:none!important;
}

/* Back face itself stays clickable for flipping back,
   but the actual join button remains interactive. */
#groupFlipCard .group-card-back{
  pointer-events:none!important;
}

#groupFlipCard .group-card-join-btn{
  pointer-events:auto!important;
}


/* =========================================================
   live-data v70 — REAL carousel top/bottom glow clipping fix
   ========================================================= */

/*
  Root cause:
  `.drops-carousel` itself still had overflow:hidden from older CSS.
  So even though the viewport/track had extra padding, the OUTER carousel
  was chopping the hover shadow/glow at the top and bottom.
*/

/* Let glow escape vertically, but still crop the rail at left/right edges. */
#new .drops-carousel,
.drops-carousel{
  overflow:visible!important;

  /* Horizontal edges stay clipped at 0.
     Negative top/bottom inset gives hover glow ~100px of breathing room. */
  clip-path:inset(-90px 0 -115px 0)!important;

  padding-top:42px!important;
  padding-bottom:62px!important;
  margin-top:-34px!important;
  margin-bottom:-46px!important;
}

/* Inner viewport should not create a second vertical clipping boundary. */
#dropsViewport,
.drops-viewport{
  overflow:visible!important;
  clip-path:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;

  padding-top:24px!important;
  padding-bottom:34px!important;
  margin-top:-24px!important;
  margin-bottom:-34px!important;

  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}

/* Moving rail gets its own vertical breathing room too. */
#newGrid,
.drops-track{
  overflow:visible!important;
  padding-top:24px!important;
  padding-bottom:32px!important;
  margin-top:-18px!important;
  margin-bottom:-24px!important;
}

/* Hovered card and its glow must sit over siblings. */
#newGrid .card,
.drops-track .card{
  position:relative!important;
  z-index:1!important;
}

@media (hover:hover) and (pointer:fine){
  #newGrid .card:hover,
  .drops-track .card:hover{
    z-index:100!important;
  }
}

/* Keep all scrollbars invisible. */
#dropsViewport::-webkit-scrollbar,
.drops-viewport::-webkit-scrollbar,
#newGrid::-webkit-scrollbar,
.drops-track::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}


/* =========================================================
   live-data v71 — eliminate front-face bleed during flip
   ========================================================= */

/* Make both faces fully isolated in 3D. */
#groupFlipCard .group-card-flip-inner{
  transform-style:preserve-3d!important;
}

#groupFlipCard .group-card-face{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
}

/* Front stays visible only while not flipped. */
#groupFlipCard .group-card-front{
  opacity:1!important;
  visibility:visible!important;
  transition:
    opacity .16s ease,
    visibility 0s linear 0s!important;
}

/* Once flipped, completely hide the entire front face and all Roblox icon content. */
#groupFlipCard.is-flipped .group-card-front{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:
    opacity .12s ease,
    visibility 0s linear .12s!important;
}

#groupFlipCard.is-flipped #heroGroupIcon,
#groupFlipCard.is-flipped #heroGroupIcon *,
#groupFlipCard.is-flipped .group-card-front *{
  opacity:0!important;
  visibility:hidden!important;
}

/* Back face is the only visible face after flip. */
#groupFlipCard .group-card-back{
  opacity:0!important;
  visibility:hidden!important;
  transition:
    opacity .18s ease .18s,
    visibility 0s linear .18s!important;
}

#groupFlipCard.is-flipped .group-card-back{
  opacity:1!important;
  visibility:visible!important;
  transition:
    opacity .18s ease .18s,
    visibility 0s linear 0s!important;
}

/* Prevent translated front children from poking through the back face. */
#groupFlipCard .group-card-front > *{
  transform:translateZ(0)!important;
}


/* =========================================================
   live-data v72 — mobile snowflakes stay ABOVE welcome card
   ========================================================= */

@media(max-width:700px){

  /* Keep the hero as one controlled stacking context. */
  .hero{
    position:relative!important;
    isolation:isolate!important;
    overflow:visible!important;
  }

  /* Title + ornaments sit above the glass content below. */
  .hero-title-wrap{
    position:relative!important;
    z-index:40!important;
    overflow:visible!important;
  }

  .hero-wordmark{
    position:relative!important;
    z-index:41!important;
    overflow:visible!important;
  }

  .hero-wordmark .title-ornament{
    z-index:50!important;
    overflow:visible!important;
  }

  .hero-wordmark .title-string{
    z-index:51!important;
  }

  .hero-wordmark .title-snowflake{
    z-index:52!important;
  }

  /* Welcome/store card remains underneath the hanging ornaments. */
  .hero-grid{
    position:relative!important;
    z-index:10!important;
  }

  .hero-copy{
    position:relative!important;
    z-index:10!important;
  }
}


/* =========================================================
   live-data v73 — true two-way 3D group-card flip
   ========================================================= */

/* Undo the old opacity/visibility "despawn" workaround. */
#groupFlipCard .group-card-front,
#groupFlipCard.is-flipped .group-card-front,
#groupFlipCard .group-card-back,
#groupFlipCard.is-flipped .group-card-back,
#groupFlipCard.is-flipped #heroGroupIcon,
#groupFlipCard.is-flipped #heroGroupIcon *,
#groupFlipCard.is-flipped .group-card-front *{
  opacity:1!important;
  visibility:visible!important;
}

/* Real 3D scene. */
#groupFlipCard{
  perspective:1100px!important;
  -webkit-perspective:1100px!important;
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;
}

#groupFlipCard .group-card-flip-inner{
  position:relative!important;
  width:100%!important;
  height:100%!important;

  transform:rotateY(0deg)!important;
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;

  transition:
    transform .72s cubic-bezier(.2,.78,.2,1)!important;
  will-change:transform!important;
}

#groupFlipCard.is-flipped .group-card-flip-inner{
  transform:rotateY(180deg)!important;
}

/* Both faces stay present throughout the rotation.
   Backface visibility — not opacity — decides which one is seen. */
#groupFlipCard .group-card-face{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;

  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;

  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;

  opacity:1!important;
  visibility:visible!important;
}

#groupFlipCard .group-card-front{
  transform:rotateY(0.01deg) translateZ(1px)!important;
  z-index:2!important;
}

#groupFlipCard .group-card-back{
  transform:rotateY(180deg) translateZ(1px)!important;
  z-index:1!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}

/* Once flipped, swap face stacking so Safari/WebKit never flashes the icon through. */
#groupFlipCard.is-flipped .group-card-front{
  z-index:1!important;
}

#groupFlipCard.is-flipped .group-card-back{
  z-index:2!important;
}

/* Loaded Roblox icon remains part of the front face and rotates with it. */
#groupFlipCard #heroGroupIcon{
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
  -webkit-transform-style:preserve-3d!important;
}

/* Keep click behavior:
   front/back face lets the parent receive click,
   actual join button stays interactive. */
#groupFlipCard .group-card-front,
#groupFlipCard .group-card-back{
  pointer-events:none!important;
}

#groupFlipCard .group-card-join-btn{
  pointer-events:auto!important;
}

@media(prefers-reduced-motion:reduce){
  #groupFlipCard .group-card-flip-inner{
    transition:transform .01ms linear!important;
  }
}


/* =========================================================
   live-data v74 — MOBILE ornaments render OVER welcome glass
   ========================================================= */

@media(max-width:700px){

  /* One shared stacking context for the entire hero. */
  .hero{
    position:relative!important;
    isolation:isolate!important;
    overflow:visible!important;
  }

  /*
    Force the wordmark/ornaments into their own compositor layer ABOVE
    the content card. This is stronger than z-index alone.
  */
  .hero-title-wrap{
    position:relative!important;
    z-index:1000!important;
    transform:translateZ(1px)!important;
    overflow:visible!important;
  }

  .hero-wordmark{
    position:relative!important;
    z-index:1001!important;
    overflow:visible!important;
  }

  .hero-wordmark .title-ornament{
    z-index:1010!important;
    overflow:visible!important;
  }

  .hero-wordmark .title-string{
    z-index:1011!important;
  }

  .hero-wordmark .title-snowflake{
    z-index:1012!important;
    filter:
      drop-shadow(0 0 7px rgba(210,241,255,.50))
      drop-shadow(0 0 16px rgba(132,204,241,.20))!important;
  }

  /* Welcome card stays physically underneath the dangling ornaments. */
  .hero-grid{
    position:relative!important;
    z-index:1!important;
    transform:none!important;
  }

  .hero-copy{
    position:relative!important;
    z-index:1!important;
  }

  /*
    The backdrop blur was visually swallowing/blurring the snowflakes
    where they overlap the card. Keep the frosted translucent look,
    but don't blur the foreground ornaments on mobile.
  */
  .hero-copy.glass{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;

    background:
      linear-gradient(
        140deg,
        rgba(255,255,255,.105),
        rgba(255,255,255,.030)
      )!important;
  }

  /* Nothing inside the welcome card may create a layer above the ornaments. */
  .hero-copy,
  .hero-copy *{
    transform-style:flat!important;
  }
}


/* =========================================================
   live-data v75 — hide GROUP ID text on flipped card
   ========================================================= */

#groupFlipCard #groupBadge{
  opacity:1!important;
  visibility:visible!important;
  transition:opacity .14s ease!important;
}

#groupFlipCard.is-flipped #groupBadge{
  opacity:0!important;
  visibility:hidden!important;
}


/* =========================================================
   live-data v76 — real daily member/favorite deltas
   ========================================================= */

.daily-delta{
  display:block!important;
  min-height:11px;
  margin-top:5px;
  font-size:8px!important;
  line-height:1.2!important;
  letter-spacing:.025em!important;
  text-transform:none!important;
  white-space:nowrap;
  color:#708c9d!important;
  opacity:.88;
  transition:color .25s ease,opacity .25s ease;
}

.daily-delta.is-up{
  color:#9fd9f5!important;
  opacity:1;
}

.daily-delta.is-down{
  color:#88a4b5!important;
  opacity:.95;
}

.daily-delta.is-flat{
  color:#7895a6!important;
}

.hero-stats > div{
  min-width:0;
}

/* Adding the delta means the members label is no longer :last-child. */
.community-stat .stat-label{
  font-size:8px!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:#6f8fa3!important;
}

.community-stat .community-delta{
  margin-top:2px!important;
  font-size:8px!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
}

@media(max-width:700px){
  .daily-delta{
    font-size:7px!important;
    white-space:normal;
  }
}


/* =========================================================
   live-data v78 — playful top-left logo letter hover
   ========================================================= */

.logo{
  overflow:visible!important;
}

.logo .logo-word{
  display:inline-flex!important;
  align-items:baseline!important;
  overflow:visible!important;
}

.logo .logo-letter{
  display:inline-block!important;
  transform-origin:50% 70%!important;
  will-change:transform,filter;
  transition:
    transform .46s cubic-bezier(.2,.85,.2,1.15),
    filter .35s ease!important;
}

/* Every letter gets its own weird little move. */
@media (hover:hover) and (pointer:fine){

  .logo:hover .logo-letter-1{
    transform:translate(-2px,-4px) rotate(-13deg) skewX(-5deg) scale(1.08)!important;
  }

  .logo:hover .logo-letter-2{
    transform:translate(1px,3px) rotate(9deg) scale(.94,1.12)!important;
  }

  .logo:hover .logo-letter-3{
    transform:translate(-1px,-2px) rotate(-7deg) skewY(8deg) scale(1.06)!important;
  }

  .logo:hover .logo-letter-4{
    transform:translate(2px,4px) rotate(14deg) scale(.92,1.08)!important;
  }

  .logo:hover .logo-letter-5{
    transform:translate(0,-5px) rotate(-4deg) scale(1.12,.92)!important;
  }

  .logo:hover .logo-letter-6{
    transform:translate(-2px,2px) rotate(11deg) skewX(7deg) scale(.96,1.08)!important;
  }

  .logo:hover .logo-letter-7{
    transform:translate(2px,-3px) rotate(-12deg) scale(1.08)!important;
  }

  .logo:hover .logo-letter-8{
    transform:translate(-1px,4px) rotate(7deg) skewY(-6deg) scale(.94,1.1)!important;
  }

  .logo:hover .logo-letter-9{
    transform:translate(2px,-4px) rotate(15deg) scale(1.09,.95)!important;
  }

  .logo:hover .logo-letter-10{
    transform:translate(-1px,2px) rotate(-8deg) skewX(-5deg) scale(1.03)!important;
  }

  .logo:hover .logo-word{
    filter:drop-shadow(0 0 8px rgba(174,224,249,.16));
  }

  .logo:hover .logo-star{
    transform:translateY(-4px) rotate(38deg) scale(1.18)!important;
    filter:drop-shadow(0 0 8px rgba(188,232,255,.24))!important;
  }
}

/* Leaving hover returns every letter neatly to its exact original position. */
.logo:not(:hover) .logo-letter{
  transform:none!important;
}

.logo .logo-star{
  display:inline-block!important;
  transition:
    transform .5s cubic-bezier(.2,.85,.2,1.15),
    filter .35s ease!important;
}


/* =========================================================
   live-data v80 — wavy "lastwinters" heading animation
   ========================================================= */

.hero-wave-word{
  display:inline-flex!important;
  align-items:flex-end!important;
  gap:0!important;
  white-space:nowrap!important;
  vertical-align:baseline!important;
}

.hero-wave-letter{
  display:inline-block!important;
  will-change:transform, filter;
  animation:heroLetterWave 2.35s ease-in-out infinite;
  transform-origin:50% 75%;
}

.hero-wave-letter-1{ animation-delay:0.00s; }
.hero-wave-letter-2{ animation-delay:0.08s; }
.hero-wave-letter-3{ animation-delay:0.16s; }
.hero-wave-letter-4{ animation-delay:0.24s; }
.hero-wave-letter-5{ animation-delay:0.32s; }
.hero-wave-letter-6{ animation-delay:0.40s; }
.hero-wave-letter-7{ animation-delay:0.48s; }
.hero-wave-letter-8{ animation-delay:0.56s; }
.hero-wave-letter-9{ animation-delay:0.64s; }
.hero-wave-letter-10{ animation-delay:0.72s; }
.hero-wave-letter-11{ animation-delay:0.80s; }

@keyframes heroLetterWave{
  0%, 100%{
    transform:translateY(0) rotate(0deg);
    filter:none;
  }
  20%{
    transform:translateY(-2px) rotate(-2deg);
  }
  40%{
    transform:translateY(-6px) rotate(1.5deg);
    filter:drop-shadow(0 0 8px rgba(190,231,252,.14));
  }
  60%{
    transform:translateY(-2px) rotate(2deg);
  }
  80%{
    transform:translateY(1px) rotate(-1deg);
  }
}

@media(max-width:700px){
  .hero-wave-word{
    white-space:normal!important;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-wave-letter{
    animation:none!important;
    transform:none!important;
    filter:none!important;
  }
}


/* =========================================================
   live-data v81 — UGC uploads in the past month
   ========================================================= */

.ugc-month-count{
  display:block!important;
  min-height:11px;
  margin-top:3px;
  font-size:8px!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  white-space:nowrap;
  color:#7e9fb1!important;
  opacity:.92;
}

.ugc-month-count.has-count{
  color:#9fd9f5!important;
}

@media(max-width:700px){
  .ugc-month-count{
    font-size:7px!important;
    white-space:normal;
  }
}


/* =========================================================
   live-data v84 — Latest Drop card opens displayed UGC
   ========================================================= */

#latestDropCard{
  cursor:pointer!important;
}

#latestDropCard .latest-drop-hitarea{
  position:absolute!important;
  inset:0!important;
  z-index:20!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  background:transparent!important;
  text-decoration:none!important;
  cursor:pointer!important;
}

/* Keep visuals above the card surface but below the invisible link hit-area. */
#latestDropCard > .tiny,
#latestDropCard > #heroItemImage,
#latestDropCard > .hero-item-meta{
  position:relative;
  z-index:10;
  pointer-events:none!important;
}

@media (hover:hover) and (pointer:fine){
  #latestDropCard:hover{
    filter:brightness(1.055) saturate(1.03)!important;
  }
}


/* =========================================================
   live-data v85 — restore Latest Drop text placement
   ========================================================= */

/* Keep the UGC name + price anchored at the bottom of the card. */
#latestDropCard > .hero-item-meta{
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:16px!important;
  z-index:10!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-end!important;
  gap:12px!important;
  pointer-events:none!important;
}

#latestDropCard > .hero-item-meta strong{
  min-width:0!important;
  max-width:72%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#latestDropCard > .hero-item-meta span{
  flex:0 0 auto!important;
  white-space:nowrap!important;
}

#latestDropCard > .tiny{
  position:relative!important;
  z-index:10!important;
  pointer-events:none!important;
}

#latestDropCard > #heroItemImage{
  position:relative!important;
  z-index:5!important;
  pointer-events:none!important;
}

/* Full-card link remains clickable without affecting layout. */
#latestDropCard > .latest-drop-hitarea{
  z-index:30!important;
}


/* =========================================================
   live-data v86 — live website visitor counter
   ========================================================= */

.topbar .site-view-counter{
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:8!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;

  min-width:92px;
  height:32px;
  padding:0 11px;

  border:1px solid rgba(194,232,251,.14);
  border-radius:999px;
  background:
    linear-gradient(135deg,rgba(206,238,254,.055),rgba(68,118,151,.028));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 22px rgba(0,0,0,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  color:#dff4ff;
  opacity:.78;
  transition:
    opacity .3s ease,
    border-color .28s ease,
    box-shadow .3s ease,
    transform .3s cubic-bezier(.2,.8,.2,1);
}

.topbar .site-view-counter.is-loaded{
  opacity:1;
  animation:siteViewCountIn .48s cubic-bezier(.2,.8,.2,1) both;
}

.site-view-eye{
  width:13px;
  height:13px;
  flex:0 0 13px;
  fill:none;
  stroke:#88b8d2;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#siteViewCount{
  font-family:"DM Sans",sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  color:#e9f8ff;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.site-view-label{
  font-size:7px;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#668ba0;
}

@keyframes siteViewCountIn{
  from{
    opacity:.15;
    scale:.92;
    filter:blur(2px);
  }
  to{
    opacity:1;
    scale:1;
    filter:blur(0);
  }
}

@media (hover:hover) and (pointer:fine){
  .topbar .site-view-counter:hover{
    transform:translateY(calc(-50% - 1px))!important;
    border-color:rgba(201,237,254,.24);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 10px 25px rgba(0,0,0,.14),
      0 0 17px rgba(126,198,237,.07);
  }
}

/* Tablet: keep the far-right counter compact. */
@media(max-width:850px){
  .topbar .site-view-counter{
    min-width:70px;
    height:28px;
    padding:0 8px;
    gap:5px!important;
  }

  .site-view-label{
    display:none;
  }

  #siteViewCount{
    font-size:9px;
  }

  .site-view-eye{
    width:11px;
    height:11px;
    flex-basis:11px;
  }
}

/* Phone: place a tiny view badge in the literal top-right corner,
   above the compact music controls so the stable header row stays intact. */
@media(max-width:600px){
  .topbar .site-view-counter{
    top:3px!important;
    right:2px!important;
    transform:none!important;

    min-width:0;
    height:17px;
    padding:0 5px;
    gap:3px!important;

    border-color:rgba(194,232,251,.10);
    background:rgba(7,18,29,.48);
    box-shadow:none;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .topbar .site-view-counter:hover{
    transform:none!important;
  }

  .site-view-eye{
    width:8px;
    height:8px;
    flex-basis:8px;
    stroke-width:1.7;
  }

  #siteViewCount{
    font-size:7px;
  }
}

@media(prefers-reduced-motion:reduce){
  .topbar .site-view-counter.is-loaded{
    animation:none!important;
  }
}


/* =========================================================
   live-data v87 — currently-live viewer counter
   ========================================================= */

.topbar .site-counter-cluster{
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:9!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
}

/* v86 positioned the view pill itself. It now lives inside the cluster. */
.topbar .site-counter-cluster .site-view-counter,
.topbar .site-counter-cluster .site-live-counter{
  position:relative!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
}

.topbar .site-live-counter{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;

  min-width:82px;
  height:32px;
  padding:0 11px;

  border:1px solid rgba(194,232,251,.14);
  border-radius:999px;
  background:
    linear-gradient(135deg,rgba(206,238,254,.055),rgba(68,118,151,.028));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 22px rgba(0,0,0,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  color:#dff4ff;
  opacity:.78;
  transition:
    opacity .3s ease,
    border-color .28s ease,
    box-shadow .3s ease,
    transform .3s cubic-bezier(.2,.8,.2,1);
}

.topbar .site-live-counter.is-loaded{
  opacity:1;
  animation:siteViewCountIn .48s cubic-bezier(.2,.8,.2,1) both;
}

.site-live-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:999px;
  background:#9edcf8;
  box-shadow:
    0 0 7px rgba(158,220,248,.48),
    0 0 14px rgba(126,198,237,.18);
  animation:siteLivePulse 1.9s ease-in-out infinite;
}

#siteLiveCount{
  font-family:"DM Sans",sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  color:#e9f8ff;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.site-live-label{
  font-size:7px;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#668ba0;
}

@keyframes siteLivePulse{
  0%,100%{
    opacity:.58;
    transform:scale(.82);
  }
  50%{
    opacity:1;
    transform:scale(1.14);
  }
}

@media (hover:hover) and (pointer:fine){
  .topbar .site-counter-cluster .site-view-counter:hover,
  .topbar .site-counter-cluster .site-live-counter:hover{
    transform:translateY(-1px)!important;
  }

  .topbar .site-live-counter:hover{
    border-color:rgba(201,237,254,.24);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 10px 25px rgba(0,0,0,.14),
      0 0 17px rgba(126,198,237,.07);
  }
}

@media(max-width:850px){
  .topbar .site-counter-cluster{
    gap:5px!important;
  }

  .topbar .site-live-counter{
    min-width:58px;
    height:28px;
    padding:0 8px;
    gap:5px!important;
  }

  .site-live-label{
    display:none;
  }

  #siteLiveCount{
    font-size:9px;
  }

  .site-live-dot{
    width:5px;
    height:5px;
    flex-basis:5px;
  }
}

/* Mobile: keep both tiny counters together in the literal top-right. */
@media(max-width:600px){
  .topbar .site-counter-cluster{
    top:3px!important;
    right:2px!important;
    transform:none!important;
    gap:4px!important;
  }

  .topbar .site-counter-cluster .site-view-counter,
  .topbar .site-counter-cluster .site-live-counter{
    min-width:0;
    height:17px;
    padding:0 5px;
    gap:3px!important;

    border-color:rgba(194,232,251,.10);
    background:rgba(7,18,29,.48);
    box-shadow:none;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .topbar .site-counter-cluster .site-view-counter:hover,
  .topbar .site-counter-cluster .site-live-counter:hover{
    transform:none!important;
  }

  #siteLiveCount{
    font-size:7px;
  }

  .site-live-dot{
    width:4px;
    height:4px;
    flex-basis:4px;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-live-dot{
    animation:none!important;
  }

  .topbar .site-live-counter.is-loaded{
    animation:none!important;
  }
}


/* =========================================================
   live-data v89 — top-right language selector
   ========================================================= */

.topbar .language-picker{
  position:absolute!important;
  right:0!important;
  top:3px!important;
  z-index:80!important;
}

.language-trigger{
  height:18px;
  min-width:50px;
  padding:0 7px;
  border:1px solid rgba(191,231,251,.13);
  border-radius:999px;
  background:rgba(7,18,29,.56);
  backdrop-filter:blur(11px);
  -webkit-backdrop-filter:blur(11px);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;

  color:#a9c9da;
  font-size:7px;
  font-weight:700;
  letter-spacing:.10em;
  cursor:pointer;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:
    border-color .24s ease,
    color .24s ease,
    transform .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease;
}

.language-trigger svg{
  width:9px;
  height:9px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.language-menu{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  width:148px;
  padding:6px;
  border:1px solid rgba(196,232,251,.16);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(11,29,43,.97),rgba(5,17,27,.98));
  box-shadow:
    0 18px 45px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}

.language-menu[hidden]{
  display:none!important;
}

.language-option{
  width:100%;
  min-height:30px;
  padding:0 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#93afbf;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  font-family:inherit;
  font-size:9px;
  text-align:left;
  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    transform .22s cubic-bezier(.2,.8,.2,1);
}

.language-option span{
  color:#58788c;
  font-size:7px;
  letter-spacing:.10em;
}

.language-option.active{
  color:#e9f8ff;
  background:rgba(153,216,247,.075);
}

@media (hover:hover) and (pointer:fine){
  .language-trigger:hover{
    color:#e7f8ff;
    border-color:rgba(196,234,253,.25);
    transform:translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 0 16px rgba(126,198,237,.08);
  }

  .language-option:hover{
    color:#ecf9ff;
    background:rgba(153,216,247,.08);
    transform:translateX(2px);
  }
}

/* The counters already occupy the tiny mobile top-right strip,
   so the language button sits immediately to their left. */
@media(max-width:600px){
  .topbar .language-picker{
    top:3px!important;
    right:112px!important;
  }

  .language-trigger{
    height:17px;
    min-width:42px;
    padding:0 5px;
    gap:3px;
    font-size:6px;
  }

  .language-trigger svg{
    width:8px;
    height:8px;
  }

  .language-menu{
    right:-108px;
    top:calc(100% + 5px);
    width:142px;
  }
}

@media(max-width:390px){
  .topbar .language-picker{
    right:103px!important;
  }
}

/* Longer translated headings/buttons should still fit naturally. */
.hero-copy h2#heroDescription{
  overflow:visible!important;
}

.hero-wave-word{
  flex-shrink:0;
}


/* =========================================================
   live-data v90 — custom site scrollbar
   ========================================================= */

/* Firefox */
html{
  scrollbar-width:thin;
  scrollbar-color:#6ea9c8 #07131f;
}

/* Chromium / Brave / Edge / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:
    linear-gradient(
      180deg,
      #06111b 0%,
      #081824 45%,
      #06111b 100%
    );
  border-left:1px solid rgba(174,220,244,.045);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  min-height:54px;
  border-radius:999px;
  border:2px solid #07131f;

  background:
    linear-gradient(
      180deg,
      rgba(172,222,247,.78) 0%,
      rgba(102,164,197,.72) 45%,
      rgba(71,126,157,.76) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(17,52,73,.38),
    0 0 10px rgba(126,198,237,.10);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      rgba(205,239,255,.94) 0%,
      rgba(131,199,232,.90) 48%,
      rgba(83,151,188,.90) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 0 12px rgba(150,216,249,.22),
    0 0 24px rgba(126,198,237,.10);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active{
  background:
    linear-gradient(
      180deg,
      rgba(220,246,255,.98),
      rgba(127,193,226,.95)
    );
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background:#07131f;
}

@media(max-width:700px){
  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:7px;
  }
}


/* =========================================================
   live-data v93 — language selector at TRUE far top-right
   ========================================================= */

/*
  Previously the language picker was absolutely positioned relative
  to the centered .topbar shell, so "right:0" stopped well before
  the browser edge. Pin it to the viewport/header edge instead.
*/
.topbar .language-picker{
  position:fixed!important;
  top:10px!important;
  right:18px!important;
  left:auto!important;
  z-index:9999!important;
}

/* Keep the dropdown opening inward from the far-right edge. */
.topbar .language-picker .language-menu{
  right:0!important;
  left:auto!important;
}

/* Desktop button can be a touch easier to hit in its new corner. */
@media(min-width:601px){
  .topbar .language-picker .language-trigger{
    min-width:48px!important;
    height:20px!important;
  }
}

/* On phones keep it in the same true top-right corner, not beside counters. */
@media(max-width:600px){
  .topbar .language-picker{
    position:fixed!important;
    top:7px!important;
    right:8px!important;
    left:auto!important;
  }

  .topbar .language-picker .language-menu{
    right:0!important;
    left:auto!important;
  }
}

@media(max-width:390px){
  .topbar .language-picker{
    right:7px!important;
  }
}


/* =========================================================
   live-data v94 — richer background + elegant icy scrollbar
   ========================================================= */

html,body{
  background-color:#05101a;
}

body{
  position:relative;
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(80,144,201,.24) 0%, rgba(32,70,106,.18) 20%, rgba(9,24,39,.08) 48%, rgba(5,16,26,0) 70%),
    radial-gradient(720px 720px at 10% 28%, rgba(132,191,229,.12) 0%, rgba(77,130,172,.06) 28%, rgba(10,23,37,0) 62%),
    radial-gradient(760px 760px at 88% 68%, rgba(112,173,220,.16) 0%, rgba(57,102,146,.08) 28%, rgba(10,23,37,0) 60%),
    radial-gradient(480px 420px at 60% 42%, rgba(175,221,247,.06) 0%, rgba(175,221,247,0) 62%),
    linear-gradient(180deg, #0c1d2e 0%, #0a1727 18%, #081421 46%, #06101b 100%);
  background-attachment:fixed,fixed,fixed,fixed,fixed;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

/* soft vertical banding / film depth */
body::before{
  z-index:-1;
  opacity:.34;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(173,222,247,.024) 0px,
      rgba(173,222,247,.012) 1px,
      rgba(5,16,27,0) 42px,
      rgba(152,207,236,.016) 78px,
      rgba(5,16,27,0) 120px
    ),
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 28%, rgba(0,0,0,.12) 100%);
  mix-blend-mode:screen;
}

/* far background glow & vignette */
body::after{
  z-index:-1;
  opacity:.9;
  background:
    radial-gradient(900px 540px at 50% 6%, rgba(163,214,242,.10) 0%, rgba(163,214,242,.025) 42%, rgba(163,214,242,0) 74%),
    radial-gradient(540px 540px at 14% 88%, rgba(95,153,209,.11) 0%, rgba(95,153,209,0) 64%),
    radial-gradient(580px 580px at 90% 22%, rgba(58,106,168,.10) 0%, rgba(58,106,168,0) 62%),
    radial-gradient(ellipse at center, rgba(255,255,255,0) 62%, rgba(1,7,12,.14) 100%);
}

.grain{
  opacity:.058;
}

.a1{
  width:560px;
  height:560px;
  background:radial-gradient(circle at 50% 50%, rgba(129,192,233,.56) 0%, rgba(68,123,171,.30) 34%, rgba(58,120,178,0) 72%);
  filter:blur(120px);
  top:48px;
  left:-210px;
}

.a2{
  width:680px;
  height:680px;
  background:radial-gradient(circle at 50% 50%, rgba(140,188,236,.42) 0%, rgba(85,128,196,.22) 34%, rgba(58,120,178,0) 74%);
  filter:blur(128px);
  right:-260px;
  top:520px;
}

/* Better global scrollbar */
html{
  scrollbar-width:thin;
  scrollbar-color:#bfe6ff rgba(8,20,33,.84);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:14px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:
    linear-gradient(180deg,
      rgba(9,18,31,.96) 0%,
      rgba(11,25,39,.92) 30%,
      rgba(8,18,30,.95) 100%);
  border-left:1px solid rgba(197,233,255,.08);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.03),
    inset 0 0 20px rgba(51,103,153,.18);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  min-height:72px;
  border-radius:999px;
  border:3px solid rgba(8,18,30,.92);
  background:
    linear-gradient(180deg,
      rgba(234,248,255,.96) 0%,
      rgba(175,223,247,.92) 22%,
      rgba(106,172,207,.88) 52%,
      rgba(75,134,175,.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(23,61,93,.45),
    0 0 0 1px rgba(196,232,252,.09),
    0 0 18px rgba(123,191,228,.22),
    0 0 34px rgba(66,130,186,.14);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(180deg,
      rgba(245,252,255,.99) 0%,
      rgba(205,238,255,.97) 24%,
      rgba(132,198,232,.95) 58%,
      rgba(89,155,198,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(26,68,103,.48),
    0 0 0 1px rgba(210,240,255,.12),
    0 0 22px rgba(166,220,248,.34),
    0 0 42px rgba(98,168,213,.22);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active{
  background:
    linear-gradient(180deg,
      rgba(236,248,255,.98) 0%,
      rgba(159,214,245,.95) 50%,
      rgba(88,149,194,.98) 100%);
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background:#081421;
}

@media(max-width:700px){
  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:10px;
  }
}


/* =========================================================
   live-data v95 — real floating frosted-glass scrollbar
   ========================================================= */

/* Hide Brave/Chromium's native scrollbar ONLY when the custom
   desktop scrollbar can actually be used. */
@media (hover:hover) and (pointer:fine){
  html,
  body{
    scrollbar-width:none!important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }
}

.lw-scrollbar{
  position:fixed;
  top:84px;
  right:8px;
  bottom:12px;
  z-index:9998;

  width:15px;
  pointer-events:none;

  opacity:0;
  transform:translateX(4px);
  transition:
    opacity .34s ease,
    transform .34s cubic-bezier(.2,.8,.2,1);
}

.lw-scrollbar.is-visible{
  opacity:1;
  transform:translateX(0);
}

.lw-scrollbar-track{
  position:relative;
  width:100%;
  height:100%;
  border-radius:999px;
  pointer-events:auto;
  cursor:pointer;

  background:
    linear-gradient(
      180deg,
      rgba(198,232,250,.045) 0%,
      rgba(92,146,180,.028) 42%,
      rgba(198,232,250,.038) 100%
    );

  border:1px solid rgba(189,228,248,.075);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 18px rgba(76,142,186,.065),
    0 0 20px rgba(0,0,0,.16);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.lw-scrollbar-track::before{
  content:"";
  position:absolute;
  top:9px;
  bottom:9px;
  left:50%;
  width:1px;
  transform:translateX(-50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(174,222,246,.13) 14%,
      rgba(174,222,246,.055) 50%,
      rgba(174,222,246,.13) 86%,
      transparent
    );
}

.lw-scrollbar-thumb{
  position:absolute;
  top:0;
  left:2px;
  right:2px;

  min-height:54px;
  border-radius:999px;
  overflow:hidden;

  cursor:grab;
  pointer-events:auto;
  touch-action:none;
  will-change:transform,height;

  border:1px solid rgba(221,245,255,.40);

  background:
    linear-gradient(
      180deg,
      rgba(244,252,255,.95) 0%,
      rgba(197,233,250,.89) 15%,
      rgba(131,194,225,.84) 48%,
      rgba(78,141,182,.90) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(30,73,104,.35),
    inset 0 0 9px rgba(255,255,255,.10),
    0 0 9px rgba(179,226,250,.30),
    0 0 22px rgba(105,176,218,.18),
    0 0 38px rgba(56,121,172,.10);

  transition:
    width .22s ease,
    left .22s ease,
    right .22s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

.lw-scrollbar-thumb::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.42) 22%,
      rgba(255,255,255,.08) 42%,
      rgba(255,255,255,0) 68%
    );

  opacity:.58;
}

.lw-scrollbar-thumb::after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:50%;
  height:45%;
  transform:translateY(-50%);
  border-radius:999px;
  pointer-events:none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(225,247,255,.26) 0%,
      rgba(174,222,246,.08) 48%,
      transparent 78%
    );
}

.lw-scrollbar-shine{
  position:absolute;
  top:-34%;
  left:-180%;
  width:140%;
  height:168%;
  pointer-events:none;

  transform:rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0) 24%,
      rgba(255,255,255,.58) 48%,
      rgba(215,243,255,.18) 58%,
      transparent 78%
    );

  filter:blur(.2px);
  opacity:.62;

  animation:lwScrollbarShine 4.8s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes lwScrollbarShine{
  0%,38%{
    transform:translateX(0) rotate(18deg);
  }
  58%,100%{
    transform:translateX(310%) rotate(18deg);
  }
}

@media (hover:hover) and (pointer:fine){
  .lw-scrollbar:hover .lw-scrollbar-thumb{
    left:1px;
    right:1px;

    filter:brightness(1.08) saturate(1.08);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.88),
      inset 0 -1px 0 rgba(34,79,112,.32),
      inset 0 0 11px rgba(255,255,255,.16),
      0 0 12px rgba(198,237,255,.42),
      0 0 28px rgba(132,203,239,.28),
      0 0 50px rgba(73,145,198,.17);
  }

  .lw-scrollbar-thumb:hover{
    cursor:grab;
  }

  .lw-scrollbar.is-dragging .lw-scrollbar-thumb{
    cursor:grabbing;
    filter:brightness(1.12) saturate(1.10);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -1px 0 rgba(31,75,107,.32),
      0 0 14px rgba(210,242,255,.52),
      0 0 34px rgba(139,208,243,.34),
      0 0 58px rgba(75,150,204,.20);
  }
}

/* Keep native scrolling on touch devices where a floating drag rail
   would be less natural. */
@media (hover:none), (pointer:coarse){
  .lw-scrollbar{
    display:none!important;
  }

  html{
    scrollbar-width:thin!important;
    scrollbar-color:#9fd6f5 #07131f!important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:6px!important;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track{
    background:#07131f!important;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb{
    border:1px solid #07131f!important;
    border-radius:999px!important;
    background:
      linear-gradient(
        180deg,
        rgba(206,239,255,.86),
        rgba(99,165,204,.82)
      )!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .lw-scrollbar-shine{
    animation:none!important;
  }
}


/* =========================================================
   live-data v96 — bigger language button + layout-stable translations
   ========================================================= */

/* Bigger, easier-to-see language control in the true far top-right. */
.topbar .language-picker{
  top:11px!important;
  right:20px!important;
}

.topbar .language-picker .language-trigger{
  width:76px!important;
  min-width:76px!important;
  height:30px!important;
  padding:0 12px!important;
  gap:8px!important;

  border-radius:999px!important;
  font-size:10px!important;
  letter-spacing:.12em!important;

  background:
    linear-gradient(
      135deg,
      rgba(205,238,255,.085),
      rgba(54,103,139,.055)
    )!important;

  border-color:rgba(194,232,252,.20)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 24px rgba(0,0,0,.17),
    0 0 18px rgba(126,198,237,.045)!important;
}

.topbar .language-picker .language-trigger svg{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
}

.topbar .language-picker .language-menu{
  width:166px!important;
  top:calc(100% + 8px)!important;
  padding:7px!important;
}

.topbar .language-picker .language-option{
  min-height:34px!important;
  padding:0 10px!important;
  font-size:10px!important;
}

/* ---------------------------------------------------------
   Header geometry never changes between languages.
   --------------------------------------------------------- */

.topbar .nav-bubble{
  width:360px!important;
  min-width:360px!important;
  max-width:360px!important;
  height:42px!important;
}

.topbar .nav-bubble a{
  flex:1 1 0!important;
  min-width:0!important;
  max-width:none!important;
  height:34px!important;
  padding:0 7px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;

  font-size:9px!important;
  line-height:1!important;
  letter-spacing:.11em!important;
}

.topbar .site-counter-cluster{
  width:188px!important;
  min-width:188px!important;
}

.topbar .site-counter-cluster .site-live-counter{
  width:82px!important;
  min-width:82px!important;
}

.topbar .site-counter-cluster .site-view-counter{
  width:99px!important;
  min-width:99px!important;
}

/* ---------------------------------------------------------
   Keep hero glass card and buttons from changing size.
   --------------------------------------------------------- */

.hero-copy{
  min-height:330px!important;
}

.hero-copy h2#heroDescription{
  min-height:92px!important;
  max-height:92px!important;
  margin-top:14px!important;
  margin-bottom:12px!important;

  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  align-content:center!important;

  overflow:visible!important;
  line-height:1.02!important;
}

/* Preserve the two CTA pill sizes while translating text inside. */
.hero-actions{
  flex-wrap:nowrap!important;
}

.hero-actions .btn.solid{
  width:156px!important;
  min-width:156px!important;
  max-width:156px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

.hero-actions .btn.outline{
  width:184px!important;
  min-width:184px!important;
  max-width:184px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

.hero-actions .btn,
.store-cta,
.group-join-cta,
.back-top-cta,
.group-card-join-btn{
  text-align:center!important;
  justify-content:center!important;
}

/* Stats don't grow sideways when translated. */
.hero-stats{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.hero-stats > div{
  min-width:0!important;
  overflow:visible!important;
}

.hero-stats > div > span,
.hero-stats > div > small{
  max-width:100%!important;
  text-align:left!important;
}

/* ---------------------------------------------------------
   Fixed-size translated utility controls.
   --------------------------------------------------------- */

.sort-trigger{
  overflow:hidden!important;
}

#sortLabel{
  display:block!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.store-cta,
.group-join-cta,
.back-top-cta{
  white-space:nowrap!important;
}

/* Community stat cards keep their dimensions. */
.community-stat{
  min-width:0!important;
}

.community-stat > div{
  min-width:0!important;
}

.community-stat .stat-label,
.community-stat .daily-delta,
.ugc-month-count{
  max-width:100%!important;
}

/* ---------------------------------------------------------
   Per-language typography fitting.
   Container geometry above stays unchanged.
   --------------------------------------------------------- */

/* English baseline */
html[lang="en"] .hero-copy h2#heroDescription{
  font-size:42px!important;
}

/* Spanish / Portuguese: moderately longer UI words. */
html[lang="es"] .topbar .nav-bubble a,
html[lang="pt"] .topbar .nav-bubble a{
  font-size:8px!important;
  letter-spacing:.075em!important;
}

html[lang="es"] .hero-copy h2#heroDescription,
html[lang="pt"] .hero-copy h2#heroDescription{
  font-size:34px!important;
}

html[lang="es"] .hero-actions .btn,
html[lang="pt"] .hero-actions .btn{
  font-size:10px!important;
}

/* French runs a little wider. */
html[lang="fr"] .topbar .nav-bubble a{
  font-size:7.7px!important;
  letter-spacing:.055em!important;
}

html[lang="fr"] .hero-copy h2#heroDescription{
  font-size:32px!important;
}

html[lang="fr"] .hero-actions .btn{
  font-size:9.5px!important;
}

/* German is the longest of the latin UI packs: fit aggressively,
   but do not alter the actual buttons/cards/pills. */
html[lang="de"] .topbar .nav-bubble a{
  font-size:7.2px!important;
  letter-spacing:.035em!important;
}

html[lang="de"] .hero-copy h2#heroDescription{
  font-size:30px!important;
  letter-spacing:-.03em!important;
}

html[lang="de"] .hero-actions .btn{
  font-size:9px!important;
  letter-spacing:-.01em!important;
}

html[lang="de"] .site-live-label,
html[lang="de"] .site-view-label{
  font-size:6px!important;
  letter-spacing:.06em!important;
}

/* Japanese/Korean need less tracking, not wider boxes. */
html[lang="ja"] .topbar .nav-bubble a,
html[lang="ko"] .topbar .nav-bubble a{
  font-size:8px!important;
  letter-spacing:.015em!important;
}

html[lang="ja"] .hero-copy h2#heroDescription,
html[lang="ko"] .hero-copy h2#heroDescription{
  font-size:31px!important;
  letter-spacing:-.02em!important;
}

html[lang="ja"] .hero-actions .btn,
html[lang="ko"] .hero-actions .btn{
  font-size:9.5px!important;
  letter-spacing:0!important;
}

html[lang="ja"] .section h3,
html[lang="ko"] .section h3,
html[lang="ja"] .about h3,
html[lang="ko"] .about h3{
  letter-spacing:-.025em!important;
}

/* Long section translations may get smaller, but never resize/reposition
   their parent section or neighboring UI. */
html[lang="es"] .section h3,
html[lang="fr"] .section h3,
html[lang="de"] .section h3,
html[lang="pt"] .section h3{
  font-size:clamp(42px,5.4vw,72px)!important;
}

/* Group-card flip content stays inside the exact same card. */
html:not([lang="en"]) .group-card-back-title{
  max-width:90%!important;
  text-align:center!important;
}

html[lang="de"] .group-card-back-title,
html[lang="fr"] .group-card-back-title{
  font-size:24px!important;
}

/* ---------------------------------------------------------
   Mobile: bigger language control, but don't let translated
   text make the page wider or resize the header.
   --------------------------------------------------------- */

@media(max-width:700px){
  .topbar .language-picker{
    top:7px!important;
    right:8px!important;
  }

  .topbar .language-picker .language-trigger{
    width:58px!important;
    min-width:58px!important;
    height:24px!important;
    padding:0 8px!important;
    gap:5px!important;
    font-size:8px!important;
  }

  .topbar .language-picker .language-trigger svg{
    width:11px!important;
    height:11px!important;
    flex-basis:11px!important;
  }

  .topbar .language-picker .language-menu{
    width:154px!important;
  }

  .topbar .nav-bubble{
    width:248px!important;
    min-width:248px!important;
    max-width:248px!important;
    height:34px!important;
  }

  .topbar .nav-bubble a{
    height:28px!important;
    padding:0 3px!important;
    font-size:7px!important;
  }

  html[lang="es"] .topbar .nav-bubble a,
  html[lang="fr"] .topbar .nav-bubble a,
  html[lang="de"] .topbar .nav-bubble a,
  html[lang="pt"] .topbar .nav-bubble a{
    font-size:5.8px!important;
    letter-spacing:.025em!important;
  }

  html[lang="ja"] .topbar .nav-bubble a,
  html[lang="ko"] .topbar .nav-bubble a{
    font-size:6.2px!important;
    letter-spacing:0!important;
  }

  .hero-copy{
    min-height:0!important;
  }

  .hero-copy h2#heroDescription{
    min-height:110px!important;
    max-height:110px!important;
    font-size:32px!important;
  }

  html[lang="es"] .hero-copy h2#heroDescription,
  html[lang="fr"] .hero-copy h2#heroDescription,
  html[lang="de"] .hero-copy h2#heroDescription,
  html[lang="pt"] .hero-copy h2#heroDescription{
    font-size:27px!important;
  }

  html[lang="ja"] .hero-copy h2#heroDescription,
  html[lang="ko"] .hero-copy h2#heroDescription{
    font-size:26px!important;
  }

  .hero-actions{
    flex-wrap:wrap!important;
  }

  .hero-actions .btn.solid,
  .hero-actions .btn.outline{
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
  }
}


/* =========================================================
   live-data v97 — cleaner background, glow-only scrollbar,
   lower language button, stronger translation layout lock
   ========================================================= */

html,
body{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.cards::-webkit-scrollbar,
.other-groups-viewport::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
  background:transparent!important;
}

body{
  background:
    radial-gradient(circle at 18% 20%, rgba(127,188,230,.14) 0%, transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(93,149,201,.10) 0%, transparent 21%),
    radial-gradient(circle at 76% 82%, rgba(84,139,194,.12) 0%, transparent 28%),
    radial-gradient(circle at 50% -10%, rgba(34,67,104,.55) 0%, rgba(12,28,45,.72) 26%, rgba(8,19,31,1) 68%),
    linear-gradient(180deg, #08121d 0%, #071626 18%, #08182a 52%, #06111b 100%)!important;
  background-attachment:fixed!important;
}

.grain{
  display:none!important;
  opacity:0!important;
  background-image:none!important;
}

.aurora{
  opacity:.14!important;
  filter:blur(120px)!important;
}

.topbar .language-picker{
  top:14px!important;
  right:20px!important;
}

@media(max-width:700px){
  .topbar .language-picker{
    top:10px!important;
    right:8px!important;
  }
}

/* Keep language UI bigger, but not layout-shifting. */
.topbar .language-picker .language-trigger{
  width:78px!important;
  min-width:78px!important;
  height:31px!important;
}

.lw-scrollbar{
  top:86px!important;
  right:10px!important;
  width:18px!important;
}

.lw-scrollbar-track{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.lw-scrollbar-track::before{
  display:none!important;
}

.lw-scrollbar-thumb{
  left:3px!important;
  right:3px!important;
  min-height:58px!important;
  border:1px solid rgba(228,247,255,.42)!important;
  background:
    linear-gradient(180deg,
      rgba(245,252,255,.96) 0%,
      rgba(207,237,251,.92) 18%,
      rgba(133,196,229,.88) 52%,
      rgba(78,141,184,.94) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(31,76,108,.34),
    0 0 18px rgba(178,229,252,.48),
    0 0 38px rgba(105,177,219,.28),
    0 0 72px rgba(74,138,196,.18)!important;
}

.lw-scrollbar-thumb::after{
  background:radial-gradient(ellipse at center, rgba(230,248,255,.32) 0%, rgba(174,222,246,.10) 52%, transparent 80%)!important;
}

/* Keep text inside the same boxes instead of moving layout on translation. */
.topbar .nav,
.hero-grid,
.hero-actions,
.hero-stats,
.community-stats,
.community-card,
.store-toolbar,
.section-head,
.store-summary{
  min-width:0!important;
}

#navBubble a,
.site-live-label,
.site-view-label,
#heroDescription,
.hero-actions .btn,
#heroMembers + span,
#heroItems + span,
#heroSales + span,
#new h3,
#popular h3,
#store h3,
#sortLabel,
.community-topline span:first-child,
.community-name #groupMembers,
#statMembers + .stat-label,
#statUgcCount + span,
#statMembersDelta,
#statUgcMonth,
.group-join-cta span:nth-child(2),
.back-top-cta span:last-child,
.group-card-join-btn,
.other-groups-title,
footer p{
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#navBubble a,
.hero-actions .btn,
#heroMembers + span,
#heroItems + span,
#heroSales + span,
#new h3,
#popular h3,
#store h3,
#sortLabel,
.community-topline span:first-child,
.community-name #groupMembers,
#statMembers + .stat-label,
#statUgcCount + span,
#statMembersDelta,
#statUgcMonth,
.group-join-cta span:nth-child(2),
.back-top-cta span:last-child,
.group-card-join-btn,
.other-groups-title,
footer p{
  white-space:nowrap!important;
}

#heroDescription{
  text-wrap:balance!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.hero-actions{
  flex-wrap:nowrap!important;
}

.hero-actions .btn.solid{
  width:156px!important;
  min-width:156px!important;
  max-width:156px!important;
}

.hero-actions .btn.outline,
.hero-actions .store-cta{
  width:184px!important;
  min-width:184px!important;
  max-width:184px!important;
}

.hero-actions .store-cta span:last-child{
  display:block!important;
  min-width:0!important;
}

.topbar .nav-bubble{
  width:360px!important;
  min-width:360px!important;
  max-width:360px!important;
}

.topbar .nav-bubble a{
  min-width:0!important;
  padding:0 6px!important;
}

.site-counter-cluster{
  width:190px!important;
  min-width:190px!important;
}

.site-live-counter{width:84px!important;min-width:84px!important;}
.site-view-counter{width:100px!important;min-width:100px!important;}

@media(max-width:700px){
  .topbar .language-picker .language-trigger{
    width:60px!important;
    min-width:60px!important;
    height:25px!important;
  }

  .topbar .nav-bubble{
    width:250px!important;
    min-width:250px!important;
    max-width:250px!important;
  }

  .topbar .nav-bubble a{
    font-size:7px!important;
  }

  .hero-actions{
    flex-wrap:wrap!important;
  }

  .hero-actions .btn.solid,
  .hero-actions .btn.outline,
  .hero-actions .store-cta{
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #new h3,
  #popular h3,
  #store h3{
    text-overflow:clip!important;
  }
}


/* =========================================================
   live-data v98 — keep hero welcome box size locked in all languages
   ========================================================= */

.hero-copy{
  width:100%!important;
  min-width:0!important;
}

#heroDescription{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-height:92px!important;
}

.hero-copy .muted{
  min-height:42px;
}

@media(min-width:821px){
  .hero-copy{
    min-height:432px!important;
    height:432px!important;
    display:flex!important;
    flex-direction:column!important;
  }

  .hero-copy .hero-stats{
    margin-top:auto!important;
  }
}

html[data-hero-locale="compact"] #heroDescription{
  white-space:normal!important;
  text-wrap:balance!important;
  overflow-wrap:anywhere!important;
  font-size:clamp(25px,2.1vw,34px)!important;
  line-height:1.06!important;
  letter-spacing:-.03em!important;
}

html[data-hero-locale="compact"] .hero-wave-word{
  margin-right:.14em!important;
}

html[data-hero-locale="compact"] .hero-copy .muted{
  font-size:12px!important;
  line-height:1.52!important;
}

html[data-hero-locale="compact"] .hero-actions .btn,
html[data-hero-locale="compact"] .hero-actions .store-cta span:last-child{
  font-size:11px!important;
}

html[data-hero-locale="compact"] .hero-actions{
  gap:8px!important;
}

html[data-hero-locale="compact"] .hero-actions .btn.solid{
  width:146px!important;
  min-width:146px!important;
  max-width:146px!important;
}

html[data-hero-locale="compact"] .hero-actions .btn.outline,
html[data-hero-locale="compact"] .hero-actions .store-cta{
  width:176px!important;
  min-width:176px!important;
  max-width:176px!important;
}

@media(max-width:820px){
  html[data-hero-locale="compact"] #heroDescription{
    font-size:clamp(24px,7.4vw,34px)!important;
    white-space:normal!important;
    min-height:auto!important;
  }

  .hero-copy,
  html[data-hero-locale="compact"] .hero-copy{
    height:auto!important;
    min-height:0!important;
  }
}


/* =========================================================
   live-data v99 — lower language button a touch + fix duplicated translated labels
   ========================================================= */
.topbar .language-picker{
  top:15px!important;
}


/* =========================================================
   live-data v100 — remove total views, spacious hero card,
   hanging snowflakes always over the welcome glass
   ========================================================= */

/* Only LIVE remains in the header counter cluster. */
.topbar .site-counter-cluster{
  width:84px!important;
  min-width:84px!important;
  max-width:84px!important;
}

.topbar .site-counter-cluster .site-live-counter,
.topbar .site-live-counter{
  width:84px!important;
  min-width:84px!important;
  max-width:84px!important;
}

/* ---------------------------------------------------------
   Welcome card: more breathing room, stable dimensions.
   --------------------------------------------------------- */
.hero-copy{
  box-sizing:border-box!important;
  padding:34px 34px 30px!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  overflow:hidden!important;
}

.hero-copy .micro{
  flex:0 0 auto!important;
}

.hero-copy h2#heroDescription{
  flex:0 0 auto!important;
  margin:20px 0 18px!important;
  min-height:92px!important;
  max-width:100%!important;
}

.hero-copy > .muted{
  flex:0 0 auto!important;
  margin:0!important;
  min-height:42px!important;
  max-width:100%!important;
}

.hero-copy .hero-actions{
  flex:0 0 auto!important;
  margin-top:27px!important;
}

.hero-copy .social-links{
  flex:0 0 auto!important;
  margin-top:20px!important;
}

.hero-copy .hero-stats{
  flex:0 0 auto!important;
  margin-top:auto!important;
  padding-top:22px!important;
  gap:18px!important;
}

.hero-copy .hero-stats > div{
  min-width:0!important;
}

@media(min-width:821px){
  .hero-copy{
    height:470px!important;
    min-height:470px!important;
    max-height:470px!important;
  }
}

@media(max-width:820px){
  .hero-copy{
    height:480px!important;
    min-height:480px!important;
    max-height:480px!important;
    padding:30px 28px 27px!important;
  }

  .hero-copy h2#heroDescription{
    margin-top:18px!important;
    margin-bottom:15px!important;
  }

  .hero-copy .hero-actions{
    margin-top:23px!important;
  }

  .hero-copy .social-links{
    margin-top:17px!important;
  }
}

@media(max-width:520px){
  .hero-copy{
    height:500px!important;
    min-height:500px!important;
    max-height:500px!important;
    padding:28px 27px 25px!important;
  }

  .hero-copy .hero-stats{
    gap:12px!important;
  }
}

/* ---------------------------------------------------------
   Snowflakes: title is a foreground stacking layer.
   The glass/card stays below it, so flakes swing visibly OVER it.
   --------------------------------------------------------- */
.hero{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
}

.hero-title-wrap{
  position:relative!important;
  z-index:60!important;
  overflow:visible!important;
  transform:translateZ(2px)!important;
}

.hero-wordmark{
  position:relative!important;
  z-index:61!important;
  overflow:visible!important;
}

.hero-wordmark .title-ornament{
  z-index:70!important;
  overflow:visible!important;
}

.hero-wordmark .title-string{
  z-index:71!important;
}

.hero-wordmark .title-snowflake{
  z-index:72!important;
}

.hero-grid{
  position:relative!important;
  z-index:10!important;
}

.hero-copy.glass{
  position:relative!important;
  z-index:10!important;
}

/* Mobile gets the same explicit ordering; old mobile overrides cannot bury flakes. */
@media(max-width:700px){
  .hero-title-wrap{
    z-index:1000!important;
    transform:translateZ(3px)!important;
  }

  .hero-wordmark{
    z-index:1001!important;
  }

  .hero-wordmark .title-ornament{
    z-index:1010!important;
  }

  .hero-wordmark .title-string{
    z-index:1011!important;
  }

  .hero-wordmark .title-snowflake{
    z-index:1012!important;
  }

  .hero-grid,
  .hero-copy,
  .hero-copy.glass{
    z-index:10!important;
  }
}


/* =========================================================
   live-data v103 — corrected flat deployment build
   ========================================================= */

/* 1) LANGUAGE BUTTON: visibly lower, true viewport-right.
   31px tall in a 74px header => top 22px puts it almost exactly
   vertically centered, but noticeably lower than the old 15px. */
.topbar .language-picker{
  position:fixed!important;
  top:22px!important;
  right:20px!important;
  left:auto!important;
  z-index:9999!important;
}

.topbar .language-picker .language-menu{
  right:0!important;
  left:auto!important;
  top:calc(100% + 8px)!important;
}

/* 2) SMALL LASTWINTER LOGO: true opposite side of language button.
   Fixed to viewport-left instead of the centered .shell. */
.topbar .logo{
  position:fixed!important;
  left:20px!important;
  right:auto!important;
  top:37px!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  z-index:9998!important;
}

/* 3) Real visible spacing between "to" and animated "lastwinters".
   Only English gets this left gap so JA/KO don't get a pointless
   leading indentation when their prefix is empty. */
html[lang="en"] #heroDescription .hero-wave-word{
  margin-left:.22em!important;
}

/* Keep the existing non-English after-word breathing room. */
html:not([lang="en"]) #heroDescription .hero-wave-word{
  margin-right:.14em!important;
}

/* Mobile: same intent, just slightly tighter edge offsets. */
@media(max-width:700px){
  .topbar .language-picker{
    top:20px!important;
    right:9px!important;
  }

  .topbar .logo{
    left:9px!important;
    top:33px!important;
  }

  html[lang="en"] #heroDescription .hero-wave-word{
    margin-left:.18em!important;
  }
}


/* =========================================================
   v103 also carries forward the Back to Top upgrade requested
   immediately before the header-position changes.
   ========================================================= */

.back-top-cta{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:11px!important;
  min-height:48px!important;
  padding:12px 20px 12px 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(198,236,253,.28)!important;
  background:
    linear-gradient(135deg,rgba(218,243,255,.13),rgba(66,118,149,.055))!important;
  color:#e8f8ff!important;
  font-size:11px!important;
  font-weight:650!important;
  letter-spacing:.045em!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 10px 24px rgba(2,10,18,.24),
    0 0 0 1px rgba(255,255,255,.018),
    0 0 18px rgba(126,198,237,.08)!important;
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .32s ease,
    background .32s ease,
    color .28s ease!important;
}

.back-top-cta::before{
  content:""!important;
  position:absolute!important;
  inset:-40% -10%!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      115deg,
      transparent 28%,
      rgba(236,250,255,.04) 40%,
      rgba(236,250,255,.22) 49%,
      rgba(236,250,255,.05) 58%,
      transparent 70%
    )!important;
  transform:translateX(-82%) rotate(4deg)!important;
  opacity:.55!important;
  transition:
    transform .8s cubic-bezier(.2,.7,.2,1),
    opacity .3s ease!important;
}

.back-top-cta::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:9px!important;
  top:50%!important;
  z-index:0!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(158,220,248,.20),rgba(158,220,248,.10) 38%,transparent 72%)!important;
  filter:blur(3px)!important;
}

.back-top-cta > *{
  position:relative!important;
  z-index:2!important;
}

.back-top-icon{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(207,239,254,.28)!important;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 52%),
    linear-gradient(180deg,rgba(160,223,250,.15),rgba(85,138,170,.075))!important;
  color:#f2fbff!important;
  font-size:13px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 16px rgba(139,210,243,.18)!important;
}

@media(hover:hover) and (pointer:fine){
  .back-top-cta:hover{
    transform:translateY(-3px) scale(1.03)!important;
    border-color:rgba(217,243,255,.44)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 14px 28px rgba(3,12,20,.26),
      0 0 24px rgba(126,198,237,.16),
      0 0 48px rgba(126,198,237,.08)!important;
  }

  .back-top-cta:hover::before{
    transform:translateX(78%) rotate(4deg)!important;
    opacity:.82!important;
  }

  .back-top-cta:hover .back-top-icon{
    transform:translateY(-1px) scale(1.06)!important;
  }
}


/* =========================================================
   live-data v104 — LIVE viewer pill beside language picker
   ========================================================= */

/* True top-right pair:
   [ LIVE ] [ LANGUAGE ]
   Both are viewport-fixed, independent from centered nav/music. */
.topbar .site-counter-cluster{
  position:fixed!important;
  top:22px!important;
  right:106px!important; /* 20px edge + 78px language + 8px gap */
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:84px!important;
  min-width:84px!important;
  max-width:84px!important;
  height:31px!important;
  z-index:9998!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:0!important;
}

.topbar .site-counter-cluster .site-live-counter,
.topbar .site-live-counter{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
  transform:none!important;
  width:84px!important;
  min-width:84px!important;
  max-width:84px!important;
  height:31px!important;
  padding:0 10px!important;
}

@media(max-width:700px){
  .topbar .site-counter-cluster{
    top:20px!important;
    right:75px!important; /* 9px edge + 60px language + 6px gap */
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:25px!important;
  }

  .topbar .site-counter-cluster .site-live-counter,
  .topbar .site-live-counter{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:25px!important;
    padding:0 7px!important;
    gap:4px!important;
  }

  #siteLiveCount{
    font-size:8px!important;
  }

  .site-live-dot{
    width:5px!important;
    height:5px!important;
    flex-basis:5px!important;
  }
}


/* =========================================================
   live-data v105 — NEVER abbreviate section headings
   ========================================================= */

#new h3,
#popular h3,
#store h3{
  display:block!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;

  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;

  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}

/* Their title wrappers must never squeeze the wording either. */
#new .headrow > div:first-child,
#popular .headrow > div:first-child,
#store .headrow > div:first-child{
  flex:0 0 auto!important;
  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;
  overflow:visible!important;
}

/* Preserve full names on phones too — reduce type rather than show "...". */
@media(max-width:700px){
  #new h3,
  #popular h3,
  #store h3{
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:clamp(38px,12vw,56px)!important;
  }
}


/* =========================================================
   live-data v106 — LIVE counter styled to match language button
   ========================================================= */

.topbar .site-counter-cluster .site-live-counter,
.topbar .site-live-counter{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border-radius:999px!important;
  border:1px solid rgba(210,232,248,.20)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(11,22,34,.55)!important;
  color:rgba(235,246,255,.96)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(3,8,14,.18),
    0 0 0 1px rgba(255,255,255,.018)!important;
  backdrop-filter: blur(18px) saturate(135%)!important;
  -webkit-backdrop-filter: blur(18px) saturate(135%)!important;
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease!important;
}

.topbar .site-counter-cluster .site-live-counter::before,
.topbar .site-live-counter::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0) 48%, rgba(150,210,255,.04))!important;
  opacity:.95!important;
}

.topbar .site-counter-cluster .site-live-counter > *,
.topbar .site-live-counter > *{
  position:relative!important;
  z-index:1!important;
}

.topbar .site-counter-cluster .site-live-counter .site-live-dot,
.topbar .site-live-counter .site-live-dot{
  width:7px!important;
  height:7px!important;
  flex:0 0 7px!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 35% 35%, #e9fbff 0%, #c8f5ff 28%, #82e4ff 62%, #52bddf 100%)!important;
  box-shadow:0 0 0 1px rgba(230,248,255,.18), 0 0 12px rgba(111,222,255,.55), 0 0 24px rgba(111,222,255,.18)!important;
  animation:liveDotPulse 1.8s ease-in-out infinite!important;
}

.topbar .site-counter-cluster .site-live-counter #siteLiveCount,
.topbar .site-live-counter #siteLiveCount{
  color:rgba(239,247,255,.97)!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  line-height:1!important;
  text-shadow:0 0 18px rgba(148,220,255,.12)!important;
}

@keyframes liveDotPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 1px rgba(230,248,255,.18), 0 0 12px rgba(111,222,255,.42), 0 0 24px rgba(111,222,255,.14); }
  50%{ transform:scale(1.12); box-shadow:0 0 0 1px rgba(230,248,255,.24), 0 0 16px rgba(111,222,255,.72), 0 0 30px rgba(111,222,255,.22); }
}

@media (hover:hover) and (pointer:fine){
  .topbar .site-counter-cluster .site-live-counter:hover,
  .topbar .site-live-counter:hover{
    transform:translateY(-1px)!important;
    border-color:rgba(224,242,255,.28)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 12px 28px rgba(3,8,14,.22),
      0 0 22px rgba(134,206,255,.10),
      0 0 0 1px rgba(255,255,255,.02)!important;
  }
}

@media(max-width:700px){
  .topbar .site-counter-cluster .site-live-counter,
  .topbar .site-live-counter{
    gap:5px!important;
  }
  .topbar .site-counter-cluster .site-live-counter .site-live-dot,
  .topbar .site-live-counter .site-live-dot{
    width:5px!important;
    height:5px!important;
    flex-basis:5px!important;
  }
}


/* =========================================================
   live-data v109 — new hero wording + larger top nav labels
   ========================================================= */

.topbar .nav-bubble a{
  font-size:11px!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:.12em!important;
}

/* The old English spacing rule was tuned for "Welcome to lastwinters".
   Keep a natural, smaller gap after "of" with the new sentence. */
html[lang="en"] #heroDescription .hero-wave-word{
  margin-left:.11em!important;
}

@media(max-width:850px){
  .topbar .nav-bubble a{
    font-size:10px!important;
    letter-spacing:.10em!important;
  }
}

@media(max-width:700px){
  .topbar .nav-bubble a{
    font-size:9px!important;
    letter-spacing:.09em!important;
  }
}