.btn-gold{color: var(--night); background: linear-gradient(135deg, #ffc46b, var(--brand)); box-shadow: 0 12px 36px -12px rgba(255, 154, 31, .8);}
.btn-gold:hover{transform: translateY(-2px);}
.btn-block{width: 100%;}
.drawer a:hover{color: var(--gold);}
.hero{position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center; gap: 32px; max-width: 1440px; margin: 0 auto; padding: 36px var(--gutter) 64px;}
.hero-bg{position: absolute; inset: -60px; z-index: -2;}
.hero-bg img{width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; filter: blur(50px) saturate(1.4); opacity: .4; transform: scale(1.1);}
.hero::before{content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(560px 520px at 74% 48%, rgba(255, 46, 126, .4), transparent 65%),
    linear-gradient(90deg, rgba(12, 6, 16, .95) 0%, rgba(12, 6, 16, .6) 48%, rgba(12, 6, 16, .2) 100%),
    linear-gradient(0deg, var(--night) 0%, transparent 25%);}
.hero h1{margin-top: 20px; font-size: clamp(3.2rem, 6.6vw, 6.6rem); line-height: .94; letter-spacing: -.045em; font-weight: 800;}
.hero h1 .grad{display: block;}
.hero .lede{margin-top: 22px; max-width: 30ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 600; color: var(--mist);}
.chips{display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none;}
.chips li{display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(247, 236, 226, .05); font-size: .82rem; font-weight: 700; color: var(--mist);}
.chips li::before{content: "✦"; font-size: .7rem; color: var(--rose-2);}
.stage{position: relative; justify-self: center; width: min(430px, 100%);}
.stage .d1{position: relative; isolation: isolate; padding: 5px; border-radius: var(--arch);
  background: conic-gradient(from var(--spin), var(--rose-2), var(--hot), var(--brand), #ffd08a, var(--hot), var(--rose-2));
  box-shadow: 0 40px 100px -24px rgba(255, 46, 126, .75), 0 30px 60px -30px #000;
  animation: spin 9s linear infinite;}
.stage .d1::before{content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: inherit; background: inherit; filter: blur(30px); opacity: .5; pointer-events: none; animation: spin 9s linear infinite;}
.stage .arch{border-radius: 999px 999px 21px 21px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);}
.arch{position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--arch); background: var(--plum); box-shadow: 0 40px 110px -20px rgba(255, 46, 126, .7), 0 30px 60px -30px #000;}
.arch img{width: 100%; height: 100%; object-fit: cover;}
.stage .arch img{object-position: 50% 0;}
.arch::after{content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 6, 16, .5), transparent 40%);}
.sparkle{position: absolute; color: var(--gold); font-size: 1.3rem; line-height: 1; animation: twinkle 3.6s ease-in-out infinite;}
.sparkle.s1{top: -34px; right: 18%;}
.sparkle.s2{top: 30%; right: -42px; font-size: .9rem; animation-delay: 1.2s;}
.sparkle.s3{bottom: 12%; left: -38px; font-size: 1rem; animation-delay: 2.1s;}
.float-card{position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px;
  border-radius: 18px; border: 1px solid var(--line-2); background: var(--glass); backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -20px #000; text-decoration: none; animation: bob 6s ease-in-out infinite;}
.float-card img{width: 52px; height: 64px; object-fit: cover; object-position: 50% 15%; border-radius: 999px 999px 8px 8px;}
.float-card small{display: block; font: 800 .66rem/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-2);}
.float-card strong{display: block; margin-top: 5px; font: 800 1rem/1.1 var(--ui);}
.float-card span{font-size: .76rem; color: var(--dim);}
.float-card.new-set{top: 16%; left: -100px;}
.voice-chip{position: absolute; z-index: 2; right: -60px; bottom: 15%; display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-radius: 999px; border: 1px solid var(--gold-dim); background: var(--glass); backdrop-filter: blur(14px);
  font: 800 .8rem/1 var(--ui); animation: bob 7s ease-in-out infinite reverse;}
.eq{display: inline-flex; align-items: center; gap: 3px; height: 18px;}
.eq i{width: 3px; height: 100%; border-radius: 3px; background: var(--gold); animation: eq 1.1s ease-in-out infinite;}
.eq i:nth-child(2){animation-delay: .15s;}
.eq i:nth-child(3){animation-delay: .3s;}
.eq i:nth-child(4){animation-delay: .45s;}
.eq i:nth-child(5){animation-delay: .6s;}
.topbar a{display: inline-flex; align-items: center; min-height: 28px; padding: 0 4px; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;}
.topbar a:hover{color: #fff; text-decoration-thickness: 2px;}
.float-card small .live-dot{width: 6px; height: 6px; margin: 0 6px 1px 0; vertical-align: middle;}
.hero-spot{position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at var(--sx, 72%) var(--sy, 42%), rgba(255, 138, 180, .2), transparent 62%);}
.orbs{position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;}
.orbs i{position: absolute; bottom: -60px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, rgba(255, 156, 192, .7), rgba(255, 46, 126, 0) 70%); opacity: 0; animation: drift var(--t) linear infinite; animation-delay: var(--d);}
.orbs i:nth-child(1){--x: 6%; --s: 14px; --t: 16s; --d: -2s;}
.orbs i:nth-child(2){--x: 18%; --s: 28px; --t: 22s; --d: -9s;}
.orbs i:nth-child(3){--x: 31%; --s: 10px; --t: 14s; --d: -5s;}
.orbs i:nth-child(4){--x: 44%; --s: 22px; --t: 19s; --d: -13s;}
.orbs i:nth-child(5){--x: 55%; --s: 12px; --t: 15s; --d: -1s;}
.orbs i:nth-child(6){--x: 64%; --s: 34px; --t: 24s; --d: -16s;}
.orbs i:nth-child(7){--x: 73%; --s: 16px; --t: 17s; --d: -7s;}
.orbs i:nth-child(8){--x: 82%; --s: 24px; --t: 21s; --d: -11s;}
.orbs i:nth-child(9){--x: 90%; --s: 10px; --t: 13s; --d: -4s;}
.orbs i:nth-child(10){--x: 97%; --s: 18px; --t: 20s; --d: -14s;}
.depth{translate: calc(var(--px, 0) * var(--dz, 8px)) calc(var(--py, 0) * var(--dz, 8px)); transition: translate .6s var(--ease);}
.depth.d2{--dz: 18px;}
.depth.d3{--dz: 30px;}
.stage .arch img{animation: kenburns 18s ease-in-out infinite alternate;}
.float-card img, .float-card > div{transition: opacity .3s var(--ease);}
.float-card.is-swap img, .float-card.is-swap > div{opacity: 0;}
.rotator{display: block; white-space: nowrap; transition: opacity .45s var(--ease), translate .45s var(--ease), filter .45s var(--ease);}
.btn-gold::after{animation-delay: 1.6s;}
@supports (animation-timeline: view()){
html:not([data-shot="1"]) .reveal > *{animation: rise-in 1ms linear both; animation-timeline: view(); animation-range: entry 0% cover 24%;}
}
@supports (animation-timeline: scroll()){
html:not([data-shot="1"]) .stage{animation: stage-away linear both; animation-timeline: scroll(root); animation-range: 0 80vh;}
}
.pages-tabs{display: none; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 999px; background: var(--night-2); border: 1px solid var(--line-2);}
.pages-tabs a{flex: 1; display: grid; place-items: center; min-height: 42px; border-radius: 999px; font-size: .88rem; font-weight: 800; text-decoration: none; color: var(--mist); transition: background .3s var(--ease), color .3s;}
.pages-tabs a[aria-current="true"]{background: linear-gradient(135deg, var(--rose-2), var(--hot)); color: #2a0617;}
.pages-tabs a[href="#page-3d"][aria-current="true"]{background: linear-gradient(135deg, #ffc46b, var(--brand)); color: var(--night);}
.ribbons{position: relative; height: 112px; margin-top: -36px; overflow: hidden; pointer-events: none;}
.band{position: absolute; left: -5%; width: 110%; overflow: hidden; white-space: nowrap;}
.band-track{display: inline-flex; animation: marquee 48s linear infinite;}
.band-track span{display: inline-flex; align-items: center; gap: 24px; padding-right: 24px;}
.band i{font-style: normal; font-size: .8em;}
.band{pointer-events: auto;}
.band:hover .band-track, .ribbons-paused .band-track{animation-play-state: paused;}
.ribbon-item{display: inline-flex; align-items: center; gap: 8px; color: inherit; font: inherit; text-decoration: none;}
.band-rose a.ribbon-item{padding: 7px 0; margin: -7px 0; transition: color .2s, text-shadow .2s;}
.band-rose a.ribbon-item:hover, .ribbon-item.is-new{color: #fff; text-shadow: 0 1px 1px rgba(35, 4, 15, .85), 0 0 10px rgba(35, 4, 15, .6);}
.ribbon-item small{display: inline-grid; place-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; background: var(--night); color: var(--gold);
  font: 800 .58rem/1 var(--ui); letter-spacing: .16em; box-shadow: 0 0 0 1px rgba(255, 154, 31, .6), 0 0 16px rgba(255, 154, 31, .7);}
html:not([data-shot="1"]) .ribbon-item small{animation: new-glow 1.8s ease-in-out infinite;}
.band::after{content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background-size: 520px 100%;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .55) 25%, rgba(0, 0, 0, .28) 50%, rgba(255, 255, 255, .1) 75%, rgba(0, 0, 0, .28));}
html:not([data-shot="1"]) .band::after{animation: folds 2.9s linear infinite;}
html:not([data-shot="1"]) .band-rose{animation: sway-rose 7s ease-in-out infinite;}
.ribbon-peek{position: absolute; z-index: 6; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 260px; padding: 8px 16px 8px 8px; border-radius: 18px;
  translate: -50% calc(-100% - 6px); background: rgba(22, 10, 26, .94); border: 1px solid var(--line-2); backdrop-filter: blur(10px); pointer-events: none;
  box-shadow: 0 20px 44px -16px #000, 0 0 0 1px rgba(255, 46, 126, .25); opacity: 0; scale: .9; transform-origin: 50% 100%; transition: opacity .18s, scale .22s var(--ease);}
.ribbon-peek.is-on{opacity: 1; scale: 1;}
.ribbon-peek::after{content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: inherit; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);}
.ribbon-peek img{width: 64px; height: 64px; flex: none; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 2px var(--rose-2);}
.ribbon-peek.is-new img{box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255, 154, 31, .7);}
.ribbon-peek div{display: grid; gap: 3px;}
.ribbon-peek small{font: 800 .6rem/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-2);}
.ribbon-peek.is-new small{color: var(--gold);}
.ribbon-peek strong{font: 800 1rem/1.15 var(--ui); color: var(--cream);}
.ribbon-peek span{font-size: .74rem; font-weight: 700; color: var(--mist);}
.ribbons-wrap{position: relative;}
.ribbon-peek[hidden], .ribbon-toggle[hidden]{display: none;}
.ribbon-toggle{position: absolute; right: max(10px, calc(var(--gutter) - 18px)); top: 50%; z-index: 3; translate: 0 -50%;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(12, 6, 16, .82); color: var(--cream); backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px -8px #000; transition: border-color .2s, color .2s;}
.ribbon-toggle::before{content: ""; position: absolute; inset: -6px;}
.ribbon-toggle:hover{border-color: var(--gold); color: var(--gold);}
.ribbon-toggle .icon{width: 16px; height: 16px; stroke-width: 2.4;}
.band-rose{top: 30px; z-index: 2; transform: rotate(-2.2deg); padding: 12px 0; background: linear-gradient(90deg, var(--rose-deep), var(--hot) 40%, var(--rose-2)); color: #23040f; box-shadow: 0 16px 50px -14px rgba(255, 46, 126, .9);}
.band-rose .band-track{font: 800 1.15rem/1 var(--ui); letter-spacing: .02em; text-transform: uppercase;}
.sec-head{display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 24px;}
.sec-head h2{font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: -.03em;}
.link-arrow{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 800 .8rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--gold);}
.link-arrow .icon{width: 16px; height: 16px; transition: transform .25s var(--ease);}
.tag{display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font: 800 .62rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 79, 139, .22); color: var(--rose-2); border: 1px solid rgba(255, 79, 139, .4);}
.tag-3d{background: rgba(255, 154, 31, .16); color: var(--gold); border-color: var(--gold-dim);}
.tag-new{position: absolute; top: 14px; left: 14px; z-index: 1; min-height: 26px; padding: 0 12px; background: var(--hot); color: #23040f; border: 0; box-shadow: 0 0 24px rgba(255, 46, 126, .8);}
.rail{display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none;}
.rail a{position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 20px; background: var(--plum); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease);}
.card-cta{position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--cream); color: var(--night); font-size: .74rem; font-weight: 800; opacity: 0; translate: 0 -6px; transition: opacity .25s, translate .25s var(--ease);}
.card-cta .icon{width: 14px; height: 14px;}
.rail a:hover .card-cta, .rail a:focus-visible .card-cta{opacity: 1; translate: 0 0;}
.rail img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transition: transform .8s var(--ease);}
.rail a:hover{--lift: -6px; box-shadow: 0 24px 50px -16px rgba(255, 46, 126, .7), 0 0 0 2px var(--rose);}
.rail a:hover img{transform: scale(1.06);}
.card-cap{position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 6px; padding: 14px;}
.card-cap strong{font: 800 1rem/1.15 var(--ui);}
.card-cap > span{display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--mist);}
.sec-sub{max-width: 44ch; font-weight: 600; color: var(--mist);}
.pages{display: grid; grid-template-columns: 1fr 1fr; gap: 18px; perspective: 1400px;}
.page-card{position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr; border-radius: 28px;
  background: linear-gradient(180deg, var(--plum-2), var(--night-2)); border: 1px solid var(--line-2);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 46, 126, .12);
  transition: transform .5s var(--ease), box-shadow .35s var(--ease);}
.page-card:hover{box-shadow: 0 40px 80px -30px rgba(255, 46, 126, .55), 0 0 0 1.5px var(--rose);}
.page-3d:hover{box-shadow: 0 40px 80px -30px rgba(255, 154, 31, .45), 0 0 0 1.5px var(--gold);}
.page-banner{position: relative; height: 210px; overflow: hidden;}
.page-banner img{width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease);}
.page-card:hover .page-banner img{transform: scale(1.06);}
.page-banner::after{content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--plum-2) 0%, rgba(50, 26, 61, .2) 55%, transparent);}
.world-num{position: absolute; top: 16px; right: 18px; z-index: 1; display: grid; place-items: center; min-width: 56px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(12, 6, 16, .7); border: 1px solid var(--gold-dim); backdrop-filter: blur(8px); font: 800 .95rem/1 var(--display); letter-spacing: .02em; color: var(--gold);}
.page-body{position: relative; display: grid; gap: 16px; align-content: start; padding: 0 28px 26px; margin-top: -40px;}
.page-id{display: flex; align-items: center; gap: 14px;}
.page-id > div{flex: 1; min-width: 0;}
.page-id h3{font-size: 1.9rem;}
.page-url{font-size: .82rem; font-weight: 700; color: var(--dim);}
.page-avatar{display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover;
  background: radial-gradient(circle at 35% 30%, #ff7aa8, var(--rose-deep) 60%, #6d0b30); border: 3px solid var(--plum-2);
  box-shadow: 0 0 0 2px var(--rose), 0 10px 26px -8px rgba(255, 46, 126, .9);
  font: 800 1.5rem/1 var(--display); color: #fff;}
.page-3d .page-avatar{background: radial-gradient(circle at 35% 30%, #ffd08a, var(--brand) 60%, #7a3d00); box-shadow: 0 0 0 2px var(--gold), 0 10px 26px -8px rgba(255, 154, 31, .8); color: var(--night); font-size: 1.15rem;}
.perks{display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 0; list-style: none;}
.perks li{display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 700;}
.perks .icon{width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: rgba(255, 46, 126, .16); color: var(--rose-2);}
.page-3d .perks .icon{background: rgba(255, 154, 31, .14); color: var(--gold);}
.locked{position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}
.locked span{position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);}
.locked img{width: 100%; height: 100%; object-fit: cover; filter: saturate(1.4);}
.locked span::after{content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); translate: -100% 0;}
html:not([data-shot="1"]) .locked span::after{animation: sheen 5s var(--ease) infinite;}
.locked span:nth-child(2)::after{animation-delay: .25s;}
.locked span:nth-child(3)::after{animation-delay: .5s;}
.locked em{position: absolute; left: 8px; right: 8px; bottom: 7px; overflow: hidden; font-style: normal; font-size: .7rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; color: var(--cream); text-shadow: 0 1px 8px rgba(12, 6, 16, .9);}
.locked b{position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; transform: translate(-50%, -50%); background: rgba(12, 6, 16, .78); border: 1px solid var(--line-2); backdrop-filter: blur(6px); font-size: .78rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap;}
.locked b .icon{width: 15px; height: 15px; color: var(--gold);}
.page-alt{justify-self: center; display: inline-flex; align-items: center; min-height: 32px; font-size: .86rem; font-weight: 700; color: var(--mist); text-underline-offset: 4px;}
.page-alt:hover{color: var(--cream);}
.hof{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; perspective: 1200px;}
.hof a{position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 22px; padding: 2px; text-decoration: none;
  background: linear-gradient(160deg, #ffd08a, var(--brand) 45%, rgba(255, 154, 31, .15) 75%, var(--gold));
  box-shadow: 0 26px 50px -24px rgba(255, 154, 31, .55); transition: transform .45s var(--ease), box-shadow .35s var(--ease);}
.hof a:hover{--lift: -6px; box-shadow: 0 34px 70px -24px rgba(255, 154, 31, .8), 0 0 0 1px #ffd08a;}
.hof img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 20px; transition: transform .8s var(--ease);}
.hof a:hover img{transform: scale(1.05);}
.hof .card-cap{z-index: 1; padding: 16px;}
.hof .card-cap strong{font-size: 1.05rem;}
.hof-badge{position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px 0 9px; border-radius: 999px;
  background: var(--gold); color: var(--night); font: 800 .62rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 22px rgba(255, 154, 31, .7);}
.hof-badge .icon{width: 15px; height: 15px; stroke-width: 2.2;}
html:not([data-shot="1"]) .hof-badge .icon{animation: crown 3.2s var(--ease) infinite; transform-origin: 50% 90%;}
.hof li:nth-child(2) .hof-badge .icon{animation-delay: .4s;}
.hof li:nth-child(3) .hof-badge .icon{animation-delay: .8s;}
.hof li:nth-child(4) .hof-badge .icon{animation-delay: 1.2s;}
.idea-strip{position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 32px; padding: 36px;
  border-radius: 28px; border: 1px solid var(--line-2);
  background: radial-gradient(520px 320px at 0% 0%, rgba(255, 46, 126, .3), transparent 70%), linear-gradient(145deg, var(--plum-2), var(--night-2));}
.idea-face{position: relative; margin: 0;}
.idea-face img{width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; border-radius: var(--arch); box-shadow: 0 0 0 3px rgba(248, 238, 229, .9), 0 24px 50px -16px rgba(255, 46, 126, .8);}
.idea-face figcaption{position: absolute; left: 50%; bottom: -14px; translate: -50% 0; padding: 9px 14px; border-radius: 16px 16px 16px 4px; white-space: nowrap;
  background: var(--cream); color: var(--night); font-size: .8rem; font-weight: 800; box-shadow: 0 12px 26px -10px #000; animation: bob 6s ease-in-out infinite;}
.idea-strip h2{margin-top: 14px; font-size: clamp(2rem, 3.4vw, 3rem);}
.card-lede{margin-top: 10px; max-width: 44ch; font-weight: 600; color: var(--mist);}
.idea-strip .hero-actions{margin-top: 22px;}
.steps{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s;}
.steps li{position: relative; display: grid; gap: 4px; padding: 18px 16px; border-radius: 18px; background: rgba(12, 6, 16, .45); border: 1px solid var(--line); counter-increment: s; transition: transform .3s var(--ease), border-color .3s;}
.steps li:hover{transform: translateY(-4px); border-color: rgba(255, 79, 139, .5);}
.steps li::after{content: "0" counter(s); position: absolute; top: 12px; right: 14px; font: 800 1.2rem/1 var(--display); color: rgba(255, 154, 31, .55);}
.step-icon{display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: linear-gradient(135deg, var(--rose-2), var(--hot)); color: #2a0617; box-shadow: 0 8px 22px -8px rgba(255, 46, 126, .9);}
.step-icon .icon{width: 20px; height: 20px;}
.steps strong{font: 800 1rem/1.2 var(--ui);}
.steps li > span:last-child{font-size: .84rem; color: var(--dim);}
.footer-logo{display: block; width: min(560px, 100%); margin: 36px auto 0; border-radius: 16px; transition: transform .4s var(--ease);}
.footer-logo img{width: 100%; filter: drop-shadow(0 14px 40px rgba(251, 138, 0, .3));}
.footer-row{display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; text-align: center;}
.footer-nav{display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px;}
.footer-nav a{display: inline-flex; align-items: center; min-height: 44px; font: 800 .74rem/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--mist);}
.footer-nav a:hover{color: var(--gold);}
.footer-legal{font-size: .8rem; color: var(--dim);}
.bottom-nav{display: none;}
.sugg-layout{display: grid; grid-template-columns: 210px minmax(0, 1fr) minmax(360px, 410px); align-items: start; gap: 20px; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 24px;}
.file-item{display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 6px 6px 6px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--paper-line);}
.file-item .icon-btn{border-color: transparent; color: var(--paper-muted);}
.file-item .icon-btn:hover{color: var(--rose-deep); border-color: var(--paper-line);}
@media (max-width: 1180px){
.nav-link{padding: 0 9px; letter-spacing: .1em;}
.masthead{gap: 12px;}
.float-card.new-set{left: -36px;}
.voice-chip{right: -18px;}
.rail{grid-template-columns: repeat(3, minmax(0, 1fr));}
.idea-strip{grid-template-columns: minmax(0, 1fr); gap: 24px;}
.idea-face{display: flex; align-items: center; gap: 14px;}
.idea-face img{width: 64px; height: 64px; aspect-ratio: 1; border-radius: 50%; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--rose), 0 10px 24px -8px rgba(255, 46, 126, .8);}
.idea-face figcaption{position: static; translate: none; animation: none;}
.perks{grid-template-columns: minmax(0, 1fr);}
.sugg-layout{grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);}
}
@media (max-width: 960px){
.masthead .nav-left, .masthead .nav-right .nav-link, .masthead .nav-right .btn{display: none;}
.masthead .brand{justify-self: start;}
.brand img{height: 42px;}
.menu-btn{display: inline-grid;}
.hero{grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; padding: 28px 20px 52px;}
.hero h1{font-size: clamp(2.6rem, 8vw, 4.4rem);}
.float-card.new-set{left: -20px; top: auto; bottom: 8%; padding: 8px 12px 8px 8px;}
.float-card img{width: 40px; height: 50px;}
.voice-chip{right: -10px; bottom: auto; top: 6%; padding: 9px 13px;}
.sparkle.s2{right: -20px;}
.sparkle.s3{left: -20px;}
.pages{gap: 12px;}
.page-banner{height: 160px;}
.page-body{padding: 0 20px 22px;}
}
@media (max-width: 760px){
.hero{grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 16px 46px;}
.stage{order: -1; width: min(250px, 62vw); margin-top: 12px;}
.hero::before{background: radial-gradient(360px 360px at 50% 22%, rgba(255, 46, 126, .4), transparent 70%), linear-gradient(0deg, var(--night) 0%, transparent 40%);}
.hero h1{margin-top: 14px; font-size: clamp(2.7rem, 13vw, 3.8rem);}
.hero .lede{margin-top: 14px;}
.hero-actions{margin-top: 20px;}
.hero-actions{flex-wrap: nowrap; gap: 10px;}
.hero-actions .btn{flex: 1 1 0; min-width: 0; min-height: 50px; padding: 0 14px; font-size: .9rem;}
.hero .hero-actions .btn .icon{display: none;}
.chips{flex-wrap: nowrap; margin: 16px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none;}
.chips li{flex: none;}
.float-card.new-set{left: -50px; bottom: 4%;}
.voice-chip{right: -46px;}
.ribbons{height: 92px; margin-top: -28px;}
.band-rose{top: 22px; padding: 10px 0;}
.band-rose .band-track{font-size: .95rem;}
.sec-head{margin-bottom: 16px;}
.sec-head h2{font-size: 2rem;}
.rail{display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;}
.rail li{flex: 0 0 42vw; scroll-snap-align: start;}
.hof{display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;}
.rail{scroll-padding-inline: var(--gutter);}
.locked em{left: 6px; right: 6px; bottom: 6px; font-size: .64rem; line-height: 1.15; white-space: normal;}
.locked b{top: 8px; transform: translate(-50%, 0);} /* names wrap to two lines here, so the pill stands over the pictures, not the names */
.hof li{flex: 0 0 58vw; scroll-snap-align: start;}
.hof .card-cap{padding: 12px;}
.hof .card-cap strong{font-size: .95rem;}
.ribbon-toggle{width: 44px; height: 44px; right: 8px;}
.ribbon-toggle::before{inset: 0;}
.pages{display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;}
.page-card{flex: 0 0 86%; scroll-snap-align: center; border-radius: 24px;}
.page-banner{height: 120px;}
.world-num{top: 10px; right: 12px; min-width: 44px; height: 28px; font-size: .8rem;}
.page-body{gap: 14px; padding: 0 16px 18px; margin-top: -30px;}
.page-avatar{width: 52px; height: 52px; font-size: 1.25rem;}
.page-id{gap: 12px;}
.page-id h3{font-size: 1.5rem;}
.page-id .tag{display: none;}
.perks{grid-template-columns: 1fr 1fr; gap: 8px;}
.perks li{font-size: .8rem; gap: 8px;}
.perks .icon{width: 24px; height: 24px; padding: 5px;}
.locked span{aspect-ratio: 1; border-radius: 12px;}
.page-card .btn{padding: 0 16px; font-size: .88rem; white-space: nowrap;}
.idea-strip{padding: 24px 20px; border-radius: 24px; gap: 18px;}
.idea-strip .hero-actions{flex-wrap: wrap;}
.idea-strip .hero-actions .btn{flex: 1 1 auto; white-space: nowrap;}
.steps{grid-template-columns: minmax(0, 1fr); gap: 8px;}
.steps li{grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px 12px;}
.step-icon{grid-row: span 2; margin: 0;}
.topbar{font-size: .74rem; gap: 8px;}
.topbar-text{display: none;}
.topbar-short{display: inline;}
.footer-logo{margin-top: 26px;}
.pages-tabs{display: flex;}
.bottom-nav{position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px; border-radius: 24px; border: 1px solid var(--line-2); background: rgba(21, 11, 26, .9); backdrop-filter: blur(18px); box-shadow: 0 20px 40px -10px #000;}
.bottom-nav a{position: relative; display: grid; justify-items: center; gap: 3px; min-height: 52px; padding-top: 7px; border-radius: 18px; text-decoration: none; font-size: .72rem; font-weight: 800; color: var(--dim);}
.bottom-nav a .icon{width: 22px; height: 22px;}
.bottom-nav a[aria-current="page"]{color: var(--cream); background: rgba(255, 46, 126, .2);}
.bottom-nav a[aria-current="page"] .icon{color: var(--rose-2); filter: drop-shadow(0 0 8px var(--rose));}
[data-shot="1"] .bottom-nav{position: relative; left: auto; right: auto; bottom: auto; margin: 0 12px 12px;}
.sugg-layout{grid-template-columns: minmax(0, 1fr); padding: 0 12px 24px; gap: 14px;}
@supports (animation-timeline: view()){
html:not([data-shot="1"]) .rail li, html:not([data-shot="1"]) .page-card, html:not([data-shot="1"]) .hof li{animation: snap-focus linear both; animation-timeline: view(inline);}
}
}
@media (min-width: 761px) and (max-width: 960px){
.sugg-layout{grid-template-columns: minmax(0, 1fr);}
}
@media (prefers-reduced-motion: reduce){
html:not([data-shot="1"]) .ribbons .band-track{animation: marquee var(--ribbon-dur, 90s) linear infinite !important;}
}
.me-btn{position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, #8800ff, #ff00cc, #00ccff, #8800ff); text-decoration: none; transition: transform .25s var(--ease);}
.me-btn img{width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--night);}
.me-btn[aria-current="page"]{box-shadow: 0 0 0 3px rgba(255, 79, 139, .35), 0 0 18px rgba(255, 46, 126, .6);}
.me-coins{position: absolute; right: -10px; bottom: -6px; padding: 1px 6px; border-radius: 999px; background: linear-gradient(135deg, #ffc46b, var(--brand)); color: var(--night); font: 800 .58rem/1.4 var(--ui); box-shadow: 0 0 0 2px var(--night);}
.fine{margin-top: 14px; font-size: .82rem; color: var(--dim);}
.letter-jump{position: sticky; top: 80px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; padding: 8px; border-radius: 18px; border: 1px solid var(--line); background: rgba(12, 6, 16, .86); backdrop-filter: blur(12px);}
.letter-jump a{display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 10px; font: 800 .82rem/1 var(--ui); color: var(--mist); text-decoration: none;}
.letter-jump a:hover{background: rgba(255, 79, 139, .2); color: var(--cream);}
@container (min-width: 520px){
.letter-group{--cols: 3; --gap: 14px;}
}
@container (min-width: 700px){
.letter-group{--cols: 4;}
}
@container (min-width: 860px){
.letter-group{--cols: 5;}
}
@container (min-width: 1020px){
.letter-group{--cols: 6;}
}
@container (min-width: 1180px){
.letter-group{--cols: 7;}
}
.letter-group{display: flex; flex-direction: column; gap: 10px; max-width: 100%;}
.fav-btn[aria-pressed="true"]{border-color: var(--rose); color: var(--cream); background: rgba(255, 79, 139, .2);}
.voice-player{display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 520px; margin-top: 24px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1px solid rgba(255, 79, 139, .4); background: rgba(255, 79, 139, .08);}
.coin-pill{display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 161, 51, .14); border: 1px solid var(--gold-dim); color: var(--gold); font-weight: 700; font-size: .86rem;}
.coin-pill b{color: #ffe08a; font-size: 1rem;}
.coin-pill .icon{width: 18px; height: 18px;}
.coin-pill.is-bump{animation: coin-bump .5s var(--ease);}
.reactions b{font-weight: 800; color: var(--cream);}
.reactions button:disabled{cursor: default;}
.reactions [aria-pressed="true"]{background: rgba(255, 79, 139, .14);}
.is-short{animation: shake .4s;}
.settings-nav{position: sticky; top: 92px; display: grid; gap: 4px;}
.settings-nav a{display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; border-radius: 14px; font-weight: 700; color: var(--mist); text-decoration: none;}
.settings-nav a:hover{background: rgba(247, 236, 226, .05); color: var(--cream);}
.settings-nav a[aria-current="true"]{color: var(--cream); background: linear-gradient(90deg, rgba(255, 46, 126, .28), rgba(255, 46, 126, .04));}
.switch{position: relative; width: 52px; height: 30px; flex: none; border: 0; border-radius: 999px; background: rgba(247, 236, 226, .18); cursor: pointer; transition: background .25s;}
.switch[aria-checked="true"]{background: linear-gradient(135deg, var(--rose-2), var(--hot));}
@media (max-width: 1180px){
.masthead .nav-right .nav-link[data-nav="community"]{display: none;}
}
@media (max-width: 960px){
.masthead .me-btn{display: inline-grid;}
}
@media (max-width: 760px){
.card-cta{display: none;}
.letter-jump{top: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;}
.voice-player{grid-template-columns: auto minmax(0, 1fr); border-radius: 22px;}
.settings-nav{position: static; display: flex; overflow-x: auto; scrollbar-width: none;}
.settings-nav a{flex: none; border: 1px solid var(--line); border-radius: 999px;}
.bottom-nav{grid-template-columns: repeat(5, 1fr);}
.bottom-nav a{font-size: .66rem;}
}
.count-pill{display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 79, 139, .18); font: 800 .72rem/1.6 var(--ui); color: var(--rose-2); vertical-align: middle;}
.watch-list strong, .inbox-list strong{display: block;}
.watch-list small, .inbox-list small, .next-list small{color: var(--mist); font-size: .82rem;}
[data-watch][aria-pressed="true"]{border-color: var(--rose); color: var(--cream);}
.inbox-list{display: grid; gap: 4px; margin: 4px 0 14px;}
.inbox-list li{display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px;}
.inbox-list .is-unread{background: rgba(255, 79, 139, .07);}
[data-save-place][aria-pressed="true"]{border-color: var(--gold); color: var(--gold);}
.footer-social{display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: .82rem; font-weight: 700;}
.footer-social a{display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--mist); text-decoration: none;}
.footer-social a:hover{color: var(--cream);}
body[data-page="agegate"] .topbar, body[data-page="agegate"] .masthead, body[data-page="agegate"] .site-footer, body[data-page="agegate"] .bottom-nav{display: none;}
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after{animation-play-state: paused !important;}
.masthead .guest-only{white-space: nowrap;}
.flex-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none;}
.flex-tile{position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 6px; padding: 22px 24px 24px; border-radius: 26px; border: 1px solid var(--line); background: radial-gradient(circle at 100% 0%, rgba(255, 79, 139, .16), transparent 60%), var(--night-2);}
.flex-tile > .icon{width: 38px; height: 38px; padding: 9px; margin-bottom: 8px; border-radius: 12px; background: rgba(255, 79, 139, .14); color: var(--rose-2);}
.flex-num{font: 800 clamp(2.4rem, 4.4vw, 3.6rem)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--rose-2) 0%, var(--hot) 45%, var(--gold) 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 24px rgba(255, 46, 126, .4)); padding-right: .06em;}
.flex-num small{margin-left: .14em; font-size: .42em; letter-spacing: .04em;}
.flex-label{font: 700 1rem/1.3 var(--ui); color: var(--cream);}
.flex-note{display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: var(--dim);}
.tag-demo{min-height: 18px; padding: 0 7px; border-style: dashed; background: rgba(255, 161, 51, .12); border-color: rgba(255, 161, 51, .5); color: var(--gold);}
.flex-hero{grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "icon legend" "num legend" "label legend" "bar bar"; gap: 6px 40px; padding: 26px 30px 30px; background: radial-gradient(circle at 0% 0%, rgba(255, 79, 139, .26), transparent 55%), radial-gradient(circle at 100% 100%, rgba(255, 161, 51, .16), transparent 55%), var(--night-2);}
.flex-hero::before{content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--flex-spin), transparent 0 55%, var(--rose), var(--gold), transparent 85%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: flex-spin 9s linear infinite;}
.flex-hero > .icon{grid-area: icon;}
.flex-hero .flex-num{grid-area: num; font-size: clamp(3.2rem, 7.4vw, 6.2rem);}
.flex-hero .flex-label{grid-area: label; font-size: 1.1rem;}
.flex-bar{grid-area: bar; display: flex; gap: 3px; height: 14px; margin-top: 18px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06);}
.flex-bar i{flex-basis: 0; min-width: 6px; transform-origin: left;}
.flex-legend{grid-area: legend; align-self: center; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none;}
.flex-legend li{display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.2em; align-items: center; gap: 12px; min-width: 0; padding: 7px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); font: 600 .88rem/1.3 var(--ui); color: var(--mist);}
.flex-legend li i{width: 10px; height: 10px; border-radius: 3px;}
.flex-legend b{font-variant-numeric: tabular-nums; color: var(--cream);}
.flex-legend small{font-size: .76rem; font-variant-numeric: tabular-nums; color: var(--dim); text-align: right;}
.room-vault{background: linear-gradient(90deg, var(--rose), var(--rose-2));}
.room-diamond{background: linear-gradient(90deg, #7cc8ff, #c3e6ff);}
.room-emerald{background: linear-gradient(90deg, #2fbf83, #8ff0c2);}
.room-bonus{background: linear-gradient(90deg, var(--gold), #ffe08a);}
.room-hof{background: linear-gradient(90deg, #a77bff, #d9c4ff);}
.flex-band.can-count .flex-bar i{transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1);}
.flex-band.can-count .flex-bar i:nth-child(2){transition-delay: .12s;}
.flex-band.can-count .flex-bar i:nth-child(3){transition-delay: .24s;}
.flex-band.can-count .flex-bar i:nth-child(4){transition-delay: .36s;}
.flex-band.can-count .flex-bar i:nth-child(5){transition-delay: .48s;}
.flex-band.can-count.is-counted .flex-bar i{transform: none;}
@media (max-width: 960px){
.flex-hero{grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "num" "label" "bar" "legend";}
.flex-legend{margin-top: 16px;}
}
@media (max-width: 760px){
.flex-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.flex-tile{padding: 18px; border-radius: 22px;}
.flex-tile:last-child:nth-child(even){grid-column: 1 / -1;}
.flex-hero{padding: 22px 20px 24px;}
.flex-num{font-size: clamp(2rem, 9vw, 2.6rem);}
.flex-hero .flex-num{font-size: clamp(2.8rem, 15vw, 4rem);}
.flex-legend li{gap: 10px; padding: 6px 10px; font-size: .84rem;}
}
@media (prefers-reduced-motion: reduce){
.flex-hero::before{animation: none;}
}
[data-shot="1"] .flex-hero::before{animation: none;}
@media (pointer: coarse){
.letter-jump a{min-width: 44px; height: 44px;}
.topbar a, .text-link, .page-alt, .search-suggest a{position: relative;}
}
.month-strip{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 20px; padding: 12px 18px; border-radius: 18px; border: 1px solid var(--gold-dim); background: rgba(255, 154, 31, .08); font-weight: 600; color: var(--mist);}
.month-strip > .icon{flex: none; width: 20px; height: 20px; color: var(--gold);}
.month-strip > span{flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;}
.month-strip strong{color: var(--cream);}
.month-strip b{padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); font: 800 .74rem/1.4 var(--ui); color: var(--cream);}
.duel-strip{margin: 20px 0 0;}
/* 44 px tap targets on touch (2026-10-09) */
@media (pointer: coarse){
.pages-tabs a{min-height: 44px;}
}
/* Front page, 2026-10-09 (layout B): a short poster hero, so the newest sets are on the first screen; numbers after the rails. */
.hero.hero-poster{grid-template-columns: minmax(0, 1fr); align-content: center; gap: 0; min-height: 470px; padding: 32px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  background: radial-gradient(520px 480px at 76% 40%, rgba(255, 46, 126, .34), transparent 65%);}
.hero.hero-poster::before{background: linear-gradient(90deg, rgba(12, 6, 16, .9) 0%, rgba(12, 6, 16, .4) 44%, transparent 68%), linear-gradient(0deg, var(--night) 0%, transparent 28%);}
.hero-art{position: absolute; top: 0; bottom: 0; right: max(calc(var(--gutter) + 40px), calc((100% - var(--max)) / 2 + 140px)); z-index: -2; width: 440px;}
.hero-art img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(0deg, transparent 2%, #000 30%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(0deg, transparent 2%, #000 30%); mask-composite: intersect;}
html:not([data-shot="1"]) .hero-art img{animation: kenburns 18s ease-in-out infinite alternate; transform-origin: 50% 0;}
.hero-poster .hero-copy{max-width: 640px;}
.hero-poster .kicker{text-shadow: 0 1px 10px var(--night), 0 0 3px var(--night);}
.hero-poster h1{margin-top: 8px; font-size: clamp(2.6rem, 6vw, 5.6rem);}
.hero-poster .lede{margin-top: 16px;}
.hero-poster .hero-actions{margin-top: 24px;}
.section.front-first{padding-top: 24px;}
.front-first .sec-head{align-items: center; margin-bottom: 12px;}
.front-first .sec-head h2{font-size: clamp(1.5rem, 2.6vw, 2.4rem);}
.front-facts{max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);}
.front-facts .chips{margin-top: 16px;}
.front-facts + .ribbons-wrap .ribbons{margin-top: 8px;}
@media (max-width: 960px){
.hero.hero-poster{min-height: 420px; padding: 24px var(--gutter);}
.hero-art{right: 0;}
.section.front-first{padding-top: 16px;}
}
@media (max-width: 760px){
.hero.hero-poster{align-content: end; min-height: 364px; padding: 16px var(--gutter) 0; background: radial-gradient(360px 360px at 70% 30%, rgba(255, 46, 126, .34), transparent 70%);}
.hero.hero-poster::before{background: linear-gradient(90deg, rgba(12, 6, 16, .82) 0%, rgba(12, 6, 16, .2) 46%, transparent 64%), linear-gradient(0deg, var(--night) 0%, rgba(12, 6, 16, .7) 36%, transparent 60%);}
.hero-art{width: min(66%, 320px);}
.hero-art img{-webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 42%), linear-gradient(0deg, transparent 8%, #000 50%); mask-image: linear-gradient(90deg, transparent 2%, #000 42%), linear-gradient(0deg, transparent 8%, #000 50%);}
.hero-poster h1{margin-top: 8px; font-size: clamp(2.6rem, 12.4vw, 3.6rem);}
.hero-poster .lede{display: none;}
.hero-poster .hero-actions{margin-top: 12px;}
.front-facts .chips{margin-top: 4px;}
}
/* Front page fixes, 2026-10-10: 44 px links under the Patreon cards, the duel favourite shows her own card, and on a phone the numbers are one panel plus one swipe row. */
.page-alt{min-height: 44px; margin-block: -6px;}
.flex-grid{grid-template-columns: minmax(0, 1fr);}
.flex-stats{display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; min-width: 0; margin: 0; padding: 0; list-style: none;}
@media (max-width: 760px){
.flex-band .sec-head{margin-bottom: 12px;}
.flex-grid{gap: 10px;}
.flex-hero{grid-template-areas: "num" "label" "bar" "legend"; gap: 4px; padding: 18px 18px 16px;}
.flex-hero > .icon{display: none;}
.flex-hero .flex-label{font-size: 1rem;}
.flex-bar{height: 12px; margin-top: 12px;}
.flex-legend{display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px;}
.flex-legend li{display: flex; gap: 6px; padding: 0; background: none; font-size: .78rem;}
.flex-legend b{display: none;}
.flex-legend small{font-size: .78rem; font-weight: 800; color: var(--cream);}
.flex-stats{display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none;}
.flex-stats::-webkit-scrollbar{display: none;}
.flex-stats .flex-tile{flex: none; display: flex; align-items: baseline; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 999px; scroll-snap-align: start;}
.flex-stats .flex-tile > .icon, .flex-stats .flex-note{display: none;}
.flex-stats .flex-num{font-size: 1.5rem;}
.flex-stats .flex-num small{font-size: .56em;}
.flex-stats .flex-label{font-size: .9rem; white-space: nowrap;}
}
/* Patreon's own offer, while it runs, as one quiet line under the ZBaiArt Join button (2026-10-24). */
.page-offer{display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: .84rem; font-weight: 700; line-height: 1.35; color: var(--mist); text-align: center; text-wrap: pretty;}
.page-offer .icon{flex: none; width: 16px; height: 16px; color: var(--gold);}