@font-face{font-family:Bungee;src:url('assets/Bungee-Regular.ttf')}@font-face{font-family:Fredoka;src:url('assets/Fredoka-Variable.ttf')}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#02072b;color:#fff;font-family:Fredoka,Arial,sans-serif}.stage{position:relative;min-height:930px;padding:0 30px 14px;background:linear-gradient(180deg,rgba(0,4,34,.42),rgba(2,4,33,.14) 55%,rgba(1,5,37,.9) 100%),url('assets/stage-rooftop.webp') center top/cover no-repeat;overflow:hidden}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 18%,rgba(255,30,240,.18) 18.3%,transparent 18.7%),linear-gradient(68deg,transparent 70%,rgba(0,216,255,.2) 70.3%,transparent 70.7%)}.topbar{position:relative;z-index:5;height:108px;display:flex;align-items:center;max-width:1580px;margin:auto}.brand img{width:245px;height:88px;object-fit:contain}.topbar nav{display:flex;align-items:center;justify-content:center;gap:52px;flex:1}.topbar nav a{color:#fff;text-decoration:none;font-weight:800;font-size:17px;text-shadow:0 2px 5px #000}.topbar nav a:hover{color:#62ecff}.login{margin-left:auto}.login span{font-size:25px;margin-right:8px}.menu{display:none}.hero{position:relative;z-index:2;text-align:center}.hero h1{margin:-2px auto 4px;font-family:Bungee,Impact,sans-serif;font-size:clamp(62px,7.3vw,118px);line-height:1;color:#fff;letter-spacing:-5px;font-style:italic;text-shadow:-5px 0 #ef34df,5px 0 #28d9ff,0 9px 0 #4527a7,0 0 28px #713cff}.play-now{position:relative;z-index:6;display:inline-flex;justify-content:center;align-items:center;width:370px;height:66px;color:#fff;text-decoration:none;font-size:34px;font-weight:900;font-style:italic;border:3px solid #ff4cef;border-radius:16px;background:linear-gradient(90deg,rgba(39,76,213,.88),rgba(183,13,198,.88));box-shadow:0 0 0 2px #4be9ff inset,0 0 24px #eb38ee;text-shadow:0 2px 4px #6e0878}.cast{height:320px;display:flex;align-items:flex-end;justify-content:center;max-width:1260px;margin:-6px auto 0}.critter{position:relative;display:flex;flex:1;min-width:0;max-width:175px;height:310px;flex-direction:column;justify-content:flex-end;align-items:center;color:#fff;text-decoration:none}.critter img{position:absolute;bottom:28px;width:100%;height:285px;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(0,0,20,.75));transition:transform .2s}.critter.featured{max-width:205px}.critter.featured img{height:305px}.critter:hover img{transform:translateY(-6px)}.critter b{position:relative;z-index:2;font-size:16px;text-shadow:0 2px 5px #000}.feature-panels{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .98fr 1.08fr;gap:12px;max-width:1620px;margin:0 auto}.panel{min-height:276px;padding:17px;border:1px solid #7c75da;border-radius:22px;background:linear-gradient(145deg,rgba(5,13,61,.96),rgba(3,8,46,.95));box-shadow:inset 0 0 22px rgba(52,89,207,.16)}.panel>header{display:flex;align-items:center;gap:15px}.panel-icon{font-size:42px;color:#ff58ec;text-shadow:0 0 12px #f0f}.panel h2{margin:0;font-size:24px;line-height:1}.panel p{margin:5px 0 0;color:#e0e2f2;font-size:15px}.portrait-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:15px 0 12px}.portrait-row img{width:100%;height:115px;object-fit:contain;object-position:center bottom;border:1px solid #56d9e8;border-radius:9px;background:linear-gradient(#0b174c,#080b2d)}.outline-button{display:flex;height:39px;align-items:center;justify-content:center;max-width:250px;margin:auto;border:2px solid #4fdfff;border-radius:8px;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 0 12px rgba(30,209,255,.35)}.stage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0 12px}.stage-row figure{position:relative;margin:0;height:127px;overflow:hidden;border:1px solid #6d7be3;border-radius:10px}.stage-row img{width:100%;height:100%;object-fit:cover}.stage-row figcaption{position:absolute;left:0;right:0;bottom:0;padding:5px;background:rgba(0,2,26,.78);font-size:12px;font-weight:800;text-align:center}.mixer-body{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:center;margin:10px 0}.mixer-body>img{width:100%;height:130px;object-fit:cover;object-position:top;border:1px solid #694fae;border-radius:8px}.mixer-body>a{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-decoration:none}.round-play{display:grid;place-items:center;width:62px;height:62px;margin-bottom:6px;border:5px solid #5ae5ff;border-radius:50%;background:#de20d9;color:#fff;font-size:26px;box-shadow:0 0 15px #d23eff}.mixer-body b{font-size:15px;line-height:1.05}.mixer-body small{margin-top:5px;color:#d3d7ec;font-size:12px}.benefits{display:grid;grid-template-columns:repeat(4,1fr);min-height:94px;padding:14px 6%;background:#03133f;border-top:1px solid #174d9c}.benefits>div{display:flex;align-items:center;gap:16px;padding:0 24px;border-right:1px solid #215498}.benefits>div:last-child{border:0}.benefits i{font-size:39px;font-style:normal;color:#ffdf4d;text-shadow:0 0 12px #f1b82e}.benefits div:last-child i{color:#59e8ff}.benefits span{display:flex;flex-direction:column}.benefits b{font-size:15px}.benefits small{margin-top:2px;color:#c9cee8;font-size:12px}@media(max-width:1050px){.topbar nav{gap:18px}.topbar nav a{font-size:14px}.feature-panels{grid-template-columns:1fr 1fr}.mixer-panel{grid-column:1/-1}.stage{padding-inline:18px}.benefits{grid-template-columns:1fr 1fr}.benefits>div:nth-child(2){border-right:0}}@media(max-width:700px){.stage{min-height:auto;padding:0 12px 14px;background-position:center top}.topbar{height:74px}.brand img{width:170px;height:60px}.menu{display:block;margin-left:auto;border:1px solid #5ce7ff;border-radius:8px;background:#091349;color:#fff;padding:7px 11px;font-size:20px}.topbar nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;padding:8px;background:#04103a;border:1px solid #5974dc;border-radius:12px}.topbar nav.open{display:flex}.topbar nav a{width:100%;padding:10px}.hero h1{font-size:46px;letter-spacing:-2px}.play-now{width:260px;height:52px;font-size:26px}.cast{height:270px;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory}.critter{flex:0 0 115px;height:255px;scroll-snap-align:center}.critter img,.critter.featured img{height:225px}.feature-panels{grid-template-columns:1fr}.mixer-panel{grid-column:auto}.panel{min-height:0}.benefits{grid-template-columns:1fr;padding:10px 16px}.benefits>div{min-height:66px;border-right:0;border-bottom:1px solid #215498}.benefits>div:last-child{border-bottom:0}}
 .portrait-row figure{position:relative;margin:0;height:115px;overflow:hidden;border:1px solid #56d9e8;border-radius:9px;background:linear-gradient(#0b174c,#080b2d)}.portrait-row figure img{width:100%;height:100%;object-fit:contain;object-position:center bottom;border:0;border-radius:0;background:none}.portrait-row figcaption{position:absolute;left:0;right:0;bottom:0;padding:3px 1px;background:rgba(1,3,26,.82);font-size:9px;font-weight:800;text-align:center}
/* 1680x945 reference-proportional desktop composition */
@media(min-width:701px){.stage{min-height:871px;background-image:linear-gradient(180deg,rgba(0,4,34,.18),rgba(2,4,33,.05) 55%,rgba(1,5,37,.82) 100%),url('assets/stage-neon.webp')}.topbar{height:96px}.brand{width:290px;flex:0 0 290px}.brand img{width:250px}.hero h1{max-width:900px;font-size:100px}.cast{height:310px;max-width:1320px}.critter{max-width:185px}.critter img{height:325px}.critter.featured{max-width:215px}.critter.featured img{height:350px}.feature-panels{max-width:1620px}.benefits{min-height:74px;padding-block:8px}}
@media(min-width:701px) and (max-width:1400px){.stage{min-height:664px;padding-inline:23px}.topbar{height:73px;max-width:1205px}.brand{width:221px;flex-basis:221px}.brand img{width:190px;height:67px}.topbar nav{gap:39px}.topbar nav a{font-size:13px}.login span{font-size:19px}.hero h1{max-width:686px;margin:-1px auto 3px;font-size:76px;letter-spacing:-3px;text-shadow:-4px 0 #ef34df,4px 0 #28d9ff,0 7px 0 #4527a7,0 0 21px #713cff}.play-now{width:282px;height:50px;font-size:26px;border-radius:12px}.cast{height:244px;max-width:1006px;margin-top:-4px}.critter{max-width:141px;height:236px}.critter img{bottom:21px;height:248px}.critter.featured{max-width:164px}.critter.featured img{height:267px}.critter b{font-size:12px}.feature-panels{gap:9px;max-width:1234px}.panel{min-height:210px;padding:13px;border-radius:17px}.panel>header{gap:11px}.panel-icon{font-size:32px}.panel h2{font-size:18px}.panel p{font-size:11px;margin-top:4px}.portrait-row{gap:4px;margin:11px 0 9px}.portrait-row figure{height:88px}.portrait-row figcaption{font-size:7px}.stage-row{gap:7px;margin:11px 0 9px}.stage-row figure{height:97px}.stage-row figcaption{font-size:9px;padding:4px}.outline-button{height:30px;max-width:190px;font-size:12px}.mixer-body{grid-template-columns:1fr 91px;gap:7px;margin:7px 0}.mixer-body>img{height:99px}.round-play{width:47px;height:47px;border-width:4px;font-size:20px}.mixer-body b{font-size:11px}.mixer-body small{font-size:9px}.benefits{min-height:56px;padding:7px 4.5%}.benefits>div{gap:12px;padding:0 18px}.benefits i{font-size:29px}.benefits b{font-size:11px}.benefits small{font-size:9px}}
@media(min-width:701px) and (max-width:1400px){.stage{height:664px;min-height:0}.topbar nav{gap:46px}.topbar nav>a:first-child{margin-left:100px}.feature-panels{grid-template-columns:1.03fr .98fr 1.08fr}}
@media(min-width:701px) and (max-width:1400px){.hero h1{font-size:100px;transform:scaleX(.78);margin-top:-7px;margin-bottom:-1px}.cast{height:220px}}
@media(min-width:701px) and (max-width:1400px){.hero h1{max-width:none;white-space:nowrap}}
@media(min-width:701px) and (max-width:1400px){.critter img{height:360px;bottom:-70px}.critter.featured img{height:385px}}
@media(min-width:701px) and (max-width:1400px){.critter img{transform:translateY(38px) scale(1.4);transform-origin:center bottom}.critter:hover img{transform:translateY(32px) scale(1.4)}}
@media(min-width:701px) and (max-width:1400px){.critter img{transform:translateY(78px) scale(1.4)}.critter:hover img{transform:translateY(72px) scale(1.4)}}
@media(min-width:701px){.play-now{margin-top:14px}.cast{height:296px}}
@media(min-width:701px) and (max-width:1400px){.cast{height:206px}}
body{min-height:100svh;display:flex;flex-direction:column}.stage{flex:1 0 auto}.benefits{flex:0 0 auto}
.stage{background:#02072b}.stage:before{content:"";position:absolute;z-index:0;left:0;right:0;top:0;height:clamp(430px,34.5vw,580px);background:linear-gradient(180deg,rgba(0,4,34,.18),rgba(2,4,33,.04) 72%,#02072b 100%),url('assets/stage-neon.webp') center top/cover no-repeat;pointer-events:none}.stage:after{height:clamp(430px,34.5vw,580px);bottom:auto}
.portrait-row figure img{transform:translateY(-7px) scale(1.72);transform-origin:center bottom}
@media(min-width:1401px){.stage{min-height:max(871px,calc(100svh - 74px))}}
@media(min-width:701px) and (max-width:1400px){.stage{height:auto;min-height:max(664px,calc(100svh - 56px))}}
@media(min-width:701px) and (max-aspect-ratio:3/2){.topbar{height:95px}.hero{padding-top:25px}.cast{height:340px}.feature-panels{margin-top:36px;margin-bottom:18px}}
@media(min-width:701px) and (max-aspect-ratio:3/2){.stage:before,.stage:after{height:62svh}}
@media(min-width:701px){html,body{height:100%;overflow-y:hidden}}
@media(min-width:701px){html,body{height:100%;overflow-y:auto}.stage{padding-bottom:0}}
@media(min-width:701px) and (max-width:1400px){.stage{min-height:max(663px,calc(100svh - 57px))}}
@media(min-width:1401px){.stage{min-height:max(870px,calc(100svh - 75px))}}
@media(min-width:1600px) and (min-height:850px){.topbar{height:108px}.hero{padding-top:8px}.hero h1{font-size:110px;margin-bottom:4px}.play-now{margin-top:18px}.cast{height:350px}.feature-panels{margin-top:18px}.stage:before,.stage:after{height:610px}}
@media(min-width:1600px) and (min-height:850px){.critter img{transform:translateY(74px) scale(1.35);transform-origin:center bottom}.critter:hover img{transform:translateY(68px) scale(1.35)}}
@media(min-width:701px) and (max-width:900px){.feature-panels{grid-template-columns:1fr;gap:14px;max-width:760px;margin-top:28px}.mixer-panel{grid-column:auto}.panel{min-height:0;padding:18px;border-radius:20px}.panel>header{gap:14px}.panel-icon{font-size:38px}.panel h2{font-size:22px}.panel p{margin-top:5px;font-size:14px}.portrait-row{gap:7px;margin:15px 0 13px}.portrait-row figure{height:120px}.portrait-row figcaption{font-size:9px}.stage-row{gap:10px;margin:15px 0 13px}.stage-row figure{height:140px}.stage-row figcaption{padding:5px;font-size:11px}.outline-button{height:38px;max-width:260px;font-size:14px}.mixer-body{grid-template-columns:1fr 105px;gap:12px;margin:12px 0}.mixer-body>img{height:160px}.round-play{width:58px;height:58px;font-size:24px}.mixer-body b{font-size:14px}.mixer-body small{font-size:11px}}
@media(max-width:700px){.stage{padding-inline:10px}.cast{height:225px;margin-top:0;justify-content:center;gap:0;overflow:visible;scroll-snap-type:none}.critter,.critter.featured{flex:1 1 0;min-width:0;max-width:none;height:215px;scroll-snap-align:none}.critter img,.critter.featured img{width:128%;height:190px;bottom:20px}.critter b{font-size:9px;line-height:1}.feature-panels{margin-top:0}}
@media(max-width:700px){.cast{height:270px;margin-top:0;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding-inline:calc(50% - 70px);scroll-padding-inline:calc(50% - 70px);scroll-snap-type:x mandatory;scrollbar-width:none}.cast::-webkit-scrollbar{display:none}.critter,.critter.featured{flex:0 0 140px;min-width:140px;max-width:140px;height:260px;scroll-snap-align:center}.critter img,.critter.featured img{width:100%;height:250px;bottom:0}.feature-panels{margin-top:0}}
.panel{border-color:rgba(139,143,226,.28);box-shadow:inset 0 1px rgba(146,190,255,.1),0 13px 30px rgba(0,0,28,.24)}.portrait-row img{border:0;box-shadow:inset 0 1px rgba(97,226,255,.16)}.stage-row figure{border:0;box-shadow:0 8px 18px rgba(0,0,24,.3)}.benefits{border-top-color:rgba(36,105,190,.35)}.benefits>div{border-right-color:rgba(46,107,178,.38)}