@font-face{font-family: "Bricolage Grotesque"; src: url("../assets/fonts/bricolage-grotesque-latin.woff2?v=e9feb9b0e8") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap;}
@font-face{font-family: "Manrope"; src: url("../assets/fonts/manrope-latin.woff2?v=086aaebe24") format("woff2"); font-weight: 400 800; font-display: swap;}
:root{--night: #0c0610;
  --night-2: #150b1a;
  --plum: #22122a;
  --plum-2: #321a3d;
  --cream: #f8eee5;
  --mist: #d2c0cb;
  --dim: #a8949f;
  --rose: #ff4f8b;
  --rose-2: #ff8ab4;
  --rose-deep: #b0174f;
  --hot: #ff2e7e;
  --gold: #ffa133;
  --brand: #fb8a00;
  --gold-dim: rgba(255, 154, 31, .45);
  --line: rgba(247, 226, 214, .12);
  --line-2: rgba(247, 226, 214, .24);
  --glass: rgba(22, 12, 26, .74);
  --paper: #f8eee5;
  --paper-ink: #1d1222;
  --paper-muted: #5e4d5c;
  --paper-line: #d9c4b8;

  --display: "Bricolage Grotesque", "Manrope", "Segoe UI", system-ui, sans-serif;
  --ui: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --arch: 999px 999px 26px 26px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;}
*, *::before, *::after{box-sizing: border-box;}
html{-webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px;}
body{margin: 0; min-height: 100vh; font: 500 1rem/1.55 var(--ui); color: var(--cream);
  background:
    radial-gradient(1000px 700px at 85% -5%, rgba(255, 46, 126, .2), transparent 60%),
    radial-gradient(900px 900px at -10% 50%, rgba(120, 40, 140, .24), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(255, 79, 139, .1), transparent 60%),
    var(--night);
  overflow-x: hidden;}
body::after{content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
img{display: block; max-width: 100%; height: auto;}
a{color: inherit;}
button, input, select, textarea{font: inherit; color: inherit;}
h1, h2, h3{margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1;}
p{margin: 0;}
em{font-style: normal;}
.grad{font-style: normal; color: var(--rose);
  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 28px rgba(255, 46, 126, .45));
  padding-right: .06em;}
.icon{width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
:focus-visible{outline: 2px solid var(--rose-2); outline-offset: 3px; border-radius: 6px;}
.visually-hidden{position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.zb-skip{position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--cream); color: var(--night); font-weight: 700; text-decoration: none;}
.zb-skip:focus{top: 12px;}
.brand{display: inline-flex; align-items: center; min-height: 44px; border-radius: 12px;}
.brand img{width: auto; height: 56px; filter: drop-shadow(0 6px 18px rgba(251, 138, 0, .35)); transition: transform .35s var(--ease), filter .35s var(--ease);}
.brand:hover img{transform: rotate(-3deg) scale(1.06); filter: drop-shadow(0 8px 24px rgba(251, 138, 0, .6));}
.btn{display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  border-radius: 999px; border: 1px solid transparent; font: 800 .95rem/1 var(--ui); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .2s, border-color .2s;}
.btn .icon{width: 18px; height: 18px; transition: transform .25s var(--ease);}
.btn:hover .icon{transform: translateX(4px);}
.btn-glow{color: #2a0617; background: linear-gradient(135deg, var(--rose-2), var(--rose) 50%, var(--hot)); box-shadow: 0 12px 40px -8px rgba(255, 46, 126, .8), inset 0 1px 0 rgba(255, 255, 255, .5);}
.btn-glow:hover{transform: translateY(-2px); box-shadow: 0 18px 54px -8px rgba(255, 46, 126, 1), inset 0 1px 0 rgba(255, 255, 255, .5);}
.btn-ghost{color: var(--cream); border-color: var(--line-2); background: rgba(247, 236, 226, .05); backdrop-filter: blur(8px);}
.btn-ghost:hover{border-color: var(--gold); color: var(--gold);}
.btn-small{min-height: 44px; padding: 0 20px; font-size: .86rem;}
.icon-btn{display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: inherit; cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s;}
.icon-btn:hover{border-color: var(--gold); color: var(--gold);}
.masthead{position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  min-height: 72px; padding: 0 var(--gutter); background: linear-gradient(180deg, rgba(12, 6, 16, .94), rgba(12, 6, 16, .76));
  backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--line);}
.masthead nav{display: flex; gap: 4px;}
.masthead .nav-right{justify-self: end; display: flex; align-items: center; gap: 10px;}
.nav-link{position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font: 800 .76rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--mist); transition: color .2s;}
.nav-link:hover, .nav-link[aria-current="page"]{color: var(--cream);}
.nav-link[aria-current="page"]::after{content: ""; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 12px var(--rose);}
.menu-btn{display: inline-grid;}
.drawer{position: fixed; inset: 72px 0 0; z-index: 49; overflow: auto; padding: 24px var(--gutter) 120px; background: rgba(12, 6, 16, .97); backdrop-filter: blur(20px);}
.drawer h2{margin: 24px 0 6px; font: 800 .74rem/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold);}
.drawer ul{list-style: none; margin: 0; padding: 0;}
.drawer a{display: block; padding: 12px 0; font: 700 1.5rem/1.15 var(--display); text-decoration: none; border-bottom: 1px solid var(--line);}
.drawer a:hover{color: var(--gold);}
.drawer-open, .drawer-open body{overflow: hidden;}
@media (min-width: 961px){
.drawer:not([hidden]){display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 32px; bottom: auto; max-height: calc(100vh - 72px); padding: 6px max(var(--gutter), calc((100vw - var(--max)) / 2)) 30px; border-bottom: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);}
.drawer a{padding: 9px 0; font-size: 1.05rem; border-bottom-color: rgba(255, 255, 255, .05);}
}
.kicker{display: inline-flex; align-items: center; gap: 12px; font: 800 .76rem/1.2 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold);}
.kicker::before{content: ""; width: 36px; height: 2px; border-radius: 2px; background: currentColor;}
.hero-actions{display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px;}
@property --spin{syntax: "<angle>"; inherits: false; initial-value: 0deg;}
@keyframes spin{to { --spin: 360deg; }}
@keyframes bob{50% { transform: translateY(-10px); }}
@keyframes eq{0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); }}
@keyframes twinkle{50% { opacity: .25; transform: scale(.7) rotate(20deg); }}
@keyframes marquee{to { transform: translateX(-50%); }}
@view-transition{navigation: auto;}
.topbar{display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 38px; padding: 6px var(--gutter);
  background: linear-gradient(90deg, #5a0c2c, var(--rose-deep) 50%, #5a0c2c); font-size: .82rem; font-weight: 700; color: var(--cream);}
.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;}
.topbar-short{display: none;}
.live-dot{position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #ff9cc0; box-shadow: 0 0 10px var(--hot);}
.live-dot::after{content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #ff9cc0; animation: ping 2s ease-out infinite;}
@keyframes ping{80%, 100% { transform: scale(3); opacity: 0; }}
@keyframes drift{0% { opacity: 0; transform: translate3d(0, 0, 0); } 15% { opacity: .9; } 85% { opacity: .5; } 100% { opacity: 0; transform: translate3d(30px, -110vh, 0); }}
@keyframes kenburns{from { scale: 1; } to { scale: 1.07; }}
.rotator{display: block; white-space: nowrap; transition: opacity .45s var(--ease), translate .45s var(--ease), filter .45s var(--ease);}
.rotator.is-out{opacity: 0; translate: 0 .18em; filter: blur(8px);}
[data-tilt]{transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));}
[data-magnetic]{translate: var(--tx, 0px) var(--ty, 0px); transition: translate .35s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);}
.btn-glow, .btn-gold{position: relative; isolation: isolate; overflow: hidden;}
.btn-glow::after, .btn-gold::after{content: ""; position: absolute; inset: 0 auto 0 -60%; z-index: -1; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: shimmer 5s ease-in-out infinite;}
@keyframes shimmer{0%, 70% { left: -60%; } 100% { left: 130%; }}
@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%;}
}
@keyframes rise-in{from { opacity: 0; translate: 0 48px; scale: .97; }}
@keyframes stage-away{to { translate: 0 70px; scale: .9; opacity: .5; }}
body{-webkit-tap-highlight-color: transparent;}
.btn:active, .rail a:active, .bottom-nav a:active, .pages-tabs a:active{scale: .96;}
@keyframes new-glow{50% { box-shadow: 0 0 0 1px #ffd08a, 0 0 26px rgba(255, 154, 31, 1); }}
@keyframes folds{to { background-position: -520px 0; }}
@keyframes sway-rose{50% { rotate: .9deg; translate: 0 -3px; }}
@keyframes sway-gold{50% { rotate: -.8deg; translate: 0 3px; }}
.section{position: relative; max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 0;}
.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);}
.link-arrow:hover .icon{transform: translateX(4px);}
.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 li{position: relative;}
.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);}
.rail a::before{content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 220, 235, .28), transparent 60%);}
.rail a:hover::before{opacity: 1;}
.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;}
.tilting{transition: transform .12s linear, box-shadow .35s var(--ease) !important;}
.rail img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; transition: transform .8s var(--ease);}
.rail a::after{content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(0deg, rgba(12, 6, 16, .94), rgba(12, 6, 16, .1) 50%, transparent);}
.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);}
.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::after{content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 138, 180, .16), transparent 60%);}
.page-card:hover::after{opacity: 1;}
.page-card:hover{box-shadow: 0 40px 80px -30px rgba(255, 46, 126, .55), 0 0 0 1.5px var(--rose);}
@keyframes sheen{0%, 55% { translate: -100% 0; } 85%, 100% { translate: 100% 0; }}
.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 a::after{content: ""; position: absolute; inset: 2px; border-radius: 20px; pointer-events: none; background: linear-gradient(0deg, rgba(12, 6, 16, .92), rgba(12, 6, 16, .05) 45%, transparent);}
.hof .card-cap{z-index: 1; padding: 16px;}
.hof .card-cap strong{font-size: 1.05rem;}
@keyframes crown{0%, 70%, 100% { rotate: 0deg; } 80% { rotate: -14deg; } 90% { rotate: 10deg; }}
.zb-footer{position: relative; margin-top: 64px; padding: 0 var(--gutter) 32px; overflow: hidden; border-top: 1px solid var(--line);}
.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-logo:hover{transform: rotate(-1.5deg) scale(1.02);}
.footer-row{display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; text-align: center;}
.zb-footer-nav{display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px;}
.zb-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);}
.zb-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;}
.panel{padding: 26px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(34, 18, 42, .82), rgba(21, 11, 26, .82)); backdrop-filter: blur(10px);}
.panel h2{font-size: 2rem; letter-spacing: -.02em;}
.input, .select, .textarea{width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 6, 16, .6); transition: border-color .2s, box-shadow .2s;}
.input::placeholder, .textarea::placeholder{color: #93808e;}
.input:focus, .select:focus, .textarea:focus{outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(255, 79, 139, .22);}
@keyframes shimmer{to { background-position: -200% 0; }}
.state-box{padding: 40px 20px; text-align: center;}
.state-box h3{font-size: 1.6rem;}
.state-box p{margin: 8px 0 18px; color: var(--mist);}
.input[aria-invalid="true"]{border-color: #a3123f; box-shadow: 0 0 0 3px rgba(163, 18, 63, .14);}
.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;}
.rail{grid-template-columns: repeat(3, minmax(0, 1fr));}
.sugg-layout{grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);}
}
@media (max-width: 960px){
.masthead{grid-template-columns: auto 1fr; min-height: 62px;}
.masthead .nav-left, .masthead .nav-right .nav-link, .masthead .nav-right .btn{display: none;}
.masthead .brand{justify-self: start;}
.brand img{height: 42px;}
.masthead{transition: translate .35s var(--ease);}
.masthead.is-tucked{translate: 0 -100%;}
.menu-btn{display: inline-grid;}
.drawer{inset: 62px 0 0;}
.pages{gap: 12px;}
}
@media (max-width: 760px){
body{padding-bottom: 80px;}
.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;}
.section{padding-top: 36px;}
.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);}
.hof li{flex: 0 0 58vw; scroll-snap-align: start;}
.hof .card-cap{padding: 12px;}
.hof .card-cap strong{font-size: .95rem;}
.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-card .btn{padding: 0 16px; font-size: .88rem; white-space: nowrap;}
.topbar{font-size: .74rem; gap: 8px;}
.topbar-text{display: none;}
.topbar-short{display: inline;}
.zb-footer{margin-top: 44px;}
.footer-logo{margin-top: 26px;}
.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;}
.panel{padding: 20px 16px;}
@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);}
}
}
@keyframes snap-focus{entry 0% { scale: .86; opacity: .45; }
  entry 100% { scale: 1; opacity: 1; }
  exit 0% { scale: 1; opacity: 1; }
  exit 100% { scale: .86; opacity: .45; }}
@media (min-width: 761px) and (max-width: 960px){
.sugg-layout{grid-template-columns: minmax(0, 1fr);}
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{animation: none !important; transition: none !important; scroll-behavior: auto !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:hover{transform: scale(1.06);}
.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);}
.page-head{position: relative; isolation: isolate; max-width: var(--max); margin: 0 auto; padding: 44px var(--gutter) 8px;}
.page-head::before{content: ""; position: absolute; inset: -120px 0 -40px; z-index: -1; pointer-events: none; background: radial-gradient(640px 360px at 18% 40%, rgba(255, 46, 126, .2), transparent 70%);}
.page-head h1{margin-top: 14px; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.035em; line-height: .95;}
.page-head .lede{margin-top: 14px; max-width: 54ch; font-weight: 600; color: var(--mist);}
.section-tight{padding-top: 24px;}
.demo-note{margin-top: 22px; font-size: .78rem; font-weight: 600; color: var(--dim);}
.fine{margin-top: 14px; font-size: .82rem; color: var(--dim);}
.crumbs{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: var(--max); margin: 0 auto; padding: 22px var(--gutter) 0; font-size: .82rem; font-weight: 700; color: var(--dim);}
.crumbs a{display: inline-flex; align-items: center; min-height: 32px; color: var(--mist); text-decoration: none;}
.crumbs a:hover{color: var(--gold);}
.crumbs [aria-current]{color: var(--cream);}
.seg{display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(12, 6, 16, .6);}
.seg button{min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: 800 .8rem/1 var(--ui); color: var(--mist); cursor: pointer; transition: background .2s, color .2s;}
.seg button[aria-pressed="true"]{color: #2a0617; background: linear-gradient(135deg, var(--rose-2), var(--rose)); box-shadow: 0 6px 18px -6px rgba(255, 46, 126, .8);}
.tabs{display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(21, 11, 26, .7); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;}
.tabs [role="tab"]{display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: 800 .82rem/1 var(--ui); color: var(--mist); cursor: pointer; transition: background .2s, color .2s;}
.tabs [role="tab"] .icon{width: 17px; height: 17px;}
.tabs [role="tab"]:hover{color: var(--cream);}
.tabs [role="tab"][aria-selected="true"]{color: var(--cream); background: linear-gradient(90deg, rgba(255, 46, 126, .42), rgba(255, 46, 126, .16)); box-shadow: inset 0 0 0 1px rgba(255, 79, 139, .5);}
.tier{display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 9px; border-radius: 999px; font: 800 .62rem/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;}
.tier::before{content: "◆"; font-size: .6rem;}
.tier-diamond{color: #cfe9ff; background: rgba(120, 190, 255, .16); border: 1px solid rgba(150, 205, 255, .45);}
.tier-emerald{color: #a6f5cf; background: rgba(40, 200, 130, .14); border: 1px solid rgba(80, 220, 150, .45);}
.tier-vault{color: var(--gold); background: rgba(255, 154, 31, .12); border: 1px solid var(--gold-dim);}
.char-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none;}
.char-grid > li[hidden]{display: none;}
.char-card{position: relative; display: grid; justify-items: center; gap: 4px; height: 100%; padding: 18px 12px 16px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(50, 26, 61, .7), rgba(21, 11, 26, .7)); text-align: center; text-decoration: none; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s;}
.char-card:hover{border-color: rgba(255, 79, 139, .7); transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(255, 46, 126, .8);}
.char-card img, .char-initial{width: 88px; height: 88px; margin-bottom: 8px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px rgba(255, 138, 180, .55); transition: box-shadow .3s;}
.char-card:hover img{box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--rose), 0 0 24px rgba(255, 46, 126, .6);}
.char-card strong{font: 800 .98rem/1.15 var(--ui);}
.char-card > span{min-height: 2.4em; font-size: .76rem; font-weight: 600; line-height: 1.25; color: var(--dim);}
.char-card .tier{margin-top: 4px;}
.char-new{position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #ffd27a, var(--gold)); color: #2a1400; font: 800 .6rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase;}
.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%;}
.letter-group[hidden], .letter-jump[hidden]{display: none;}
.fav-btn[aria-pressed="true"]{border-color: var(--rose); color: var(--cream); background: rgba(255, 79, 139, .2);}
.fav-btn[aria-pressed="true"] .icon{fill: var(--rose); stroke: var(--rose);}
.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);}
.series-grid, .collection-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none;}
.series-card, .collection-card{display: grid; gap: 4px; height: 100%; padding: 20px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(170deg, rgba(50, 26, 61, .8), rgba(21, 11, 26, .85)); text-decoration: none; transition: border-color .25s, transform .3s var(--ease), box-shadow .3s;}
.series-card:hover, .collection-card:hover{border-color: rgba(255, 79, 139, .7); transform: translateY(-4px); box-shadow: 0 22px 46px -22px rgba(255, 46, 126, .8);}
.collage{display: flex; margin-bottom: 14px;}
.collage img{width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--night-2);}
.collage img + img{margin-left: -16px;}
.series-card small, .collection-card small{margin-top: 6px; font: 800 .7rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);}
.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);}
@keyframes coin-bump{40% { transform: scale(1.12); box-shadow: 0 0 24px rgba(255, 161, 51, .6); }}
.reactions b{font-weight: 800; color: var(--cream);}
.reactions button:disabled{cursor: default;}
.reactions button:disabled:not([aria-pressed="true"]){opacity: .45;}
.reactions [aria-pressed="true"]{background: rgba(255, 79, 139, .14);}
@keyframes twinkle{50% { opacity: .15; scale: .6; }}
@keyframes aura-spin{to { rotate: 360deg; }}
@keyframes badge-float{50% { translate: 0 -4px; }}
@keyframes badge-nova{50% { scale: 1.18; filter: drop-shadow(0 0 18px rgba(255, 230, 140, 1)); }}
@keyframes badge-spin{to { rotate: 360deg; }}
@keyframes badge-pulse{50% { scale: 1.2; }}
@keyframes badge-wiggle{25% { rotate: -12deg; } 75% { rotate: 12deg; }}
@keyframes badge-shine{50% { filter: drop-shadow(0 0 16px rgba(160, 230, 255, 1)) brightness(1.3); }}
@keyframes plaque-shine{60%, 100% { translate: 120% 0; }}
.is-short{animation: shake .4s;}
@keyframes shake{25% { translate: -4px 0; } 75% { translate: 4px 0; }}
.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::after{content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); transition: translate .25s var(--ease);}
.switch[aria-checked="true"]{background: linear-gradient(135deg, var(--rose-2), var(--hot));}
.switch[aria-checked="true"]::after{translate: 22px 0;}
.switch::before{content: ""; position: absolute; inset: -7px;}
@keyframes eq{from { height: 20%; } to { height: 100%; }}
@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){
.page-head{padding: 26px 16px 4px;}
.page-head h1{font-size: clamp(2.3rem, 11vw, 3.2rem);}
.crumbs{padding-top: 14px;}
.seg{width: 100%;}
.seg button{flex: 1; padding: 0 8px;}
.card-cta{display: none;}
.char-grid, .char-grid-row{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.char-card{padding: 14px 8px 12px;}
.char-card img, .char-initial{width: 72px; height: 72px;}
.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;}
.series-grid, .collection-grid{grid-template-columns: minmax(0, 1fr);}
.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;}
}
.seg button[aria-checked="true"], .seg a[aria-current="page"]{color: #2a0617; background: linear-gradient(135deg, var(--rose-2), var(--rose)); box-shadow: 0 6px 18px -6px rgba(255, 46, 126, .8);}
.seg a{display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font: 800 .8rem/1 var(--ui); color: var(--mist); text-decoration: none;}
.sec-head-tight h2, .panel > h2{font-size: 1.35rem;}
.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, .next-list, .inbox-list, .release-list, .chip-links{margin: 0; padding: 0; list-style: none;}
.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 li[hidden]{display: none;}
.inbox-list .is-unread{background: rgba(255, 79, 139, .07);}
[data-save-place][aria-pressed="true"]{border-color: var(--gold); color: var(--gold);}
.zb-footer-social{display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: .82rem; font-weight: 700;}
.zb-footer-social a{display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--mist); text-decoration: none;}
.zb-footer-social a:hover{color: var(--cream);}
body[data-page="agegate"] .topbar, body[data-page="agegate"] .masthead, body[data-page="agegate"] .zb-footer, body[data-page="agegate"] .bottom-nav{display: none;}
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after{animation-play-state: paused !important;}
.session-guest .member-only, .session-member .guest-only{display: none !important;}
.masthead .guest-only, .masthead .btn{white-space: nowrap;}
@property --flex-spin{syntax: "<angle>"; inherits: false; initial-value: 0deg;}
@keyframes flex-spin{to { --flex-spin: 360deg; }}
@media (pointer: coarse){
.seg button, .filter-chips button, .tabs-compact [role="tab"], .check-new{min-height: 44px;}
.letter-jump a{min-width: 44px; height: 44px;}
.topbar a, .text-link, .page-alt, .search-suggest a{position: relative;}
.topbar a::before, .text-link::before, .page-alt::before, .search-suggest a::before{content: ""; position: absolute; inset: -8px 0;}
}