.demo{--bg:#090a0d;--panel:#101217;--raise:#171a21;--hover:#1f232c;--line:#22262f;--text:#f1f2f5;--muted:#8a909c;--gold:#f5b544;--gold-2:#ffd88a;--gold-ink:#231503;--emerald:#23d18b;--red:#ff6b6b;--r:14px;min-height:100vh;background:radial-gradient(900px 500px at 85% -10%,rgb(245 181 68/.07),transparent 60%),radial-gradient(700px 500px at -10% 30%,rgb(35 209 139/.05),transparent 60%),var(--bg);color:var(--text);font-size:14px;line-height:1.45;display:grid;grid-template-columns:244px minmax(0,1fr);grid-template-rows:68px minmax(0,1fr)}.demo .topbar{grid-column:1/-1;position:-webkit-sticky;position:sticky;top:0;z-index:30;justify-content:space-between;gap:1rem;padding:0 1.25rem;background:rgb(9 10 13/.82);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}.demo .logo,.demo .topbar{display:flex;align-items:center}.demo .logo{gap:.6rem}.demo .logo img{width:46px;height:46px;filter:drop-shadow(0 0 12px rgb(245 181 68/.35))}.demo .logo-text{font-weight:900;font-stretch:125%;letter-spacing:.02em;font-size:1.2rem;background:linear-gradient(180deg,#fff 30%,var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}.demo .badge{font-weight:700;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgb(245 181 68/.35);border-radius:6px;padding:.12rem .4rem}.demo .wallet{display:flex;align-items:center;height:44px;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgb(255 255 255/.03)}.demo .wallet select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;padding:0 .4rem 0 .9rem;height:100%;font-weight:800;cursor:pointer;color:var(--gold)}.demo .wallet select option{background:var(--panel);color:var(--text)}.demo .wallet .amount{padding:0 .9rem 0 .35rem;font-weight:800;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;min-width:6rem;text-align:right;transition:color .4s}.demo .wallet .amount.up{color:var(--emerald)}.demo .wallet .amount.down{color:#ffb3b3}.demo .wallet button{height:100%;border:0;padding:0 1.05rem;font-weight:800;white-space:nowrap;color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-2),var(--gold))}.demo .wallet button:hover{filter:brightness(1.06)}.demo .who{display:flex;align-items:center;gap:.55rem}.demo .lang{display:inline-flex;align-items:center;gap:.35rem;height:40px;padding:0 .7rem;border-radius:10px;background:var(--raise);color:#c9cdd6}.demo .lang select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;font-weight:600;cursor:pointer;max-width:6.5rem}.demo .lang select option{background:var(--panel)}.demo .btn{height:40px;padding:0 1.05rem;border-radius:10px;border:0;font-weight:800;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;transition:transform .15s ease,filter .15s,background-color .15s}.demo .btn:active{transform:scale(.97)}.demo .btn-gold{color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 6px 24px -8px rgb(245 181 68/.6)}.demo .btn-gold:hover{filter:brightness(1.07)}.demo .btn-ghost{background:var(--raise);color:var(--text)}.demo .btn-ghost:hover{background:var(--hover)}.demo .btn-glass{background:rgb(255 255 255/.1);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgb(255 255 255/.16)}.demo .btn-glass:hover{background:rgb(255 255 255/.16)}.demo .btn-lg{height:50px;padding:0 1.5rem;font-size:1rem;border-radius:12px}.demo .chip-user{display:flex;align-items:center;gap:.5rem;background:var(--raise);border-radius:10px;height:40px;padding:0 .8rem;font-weight:700}.demo .chip-user i{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald)}.demo .side{background:rgb(16 18 23/.7);border-right:1px solid var(--line);padding:1rem .75rem;position:-webkit-sticky;position:sticky;top:68px;height:calc(100vh - 68px);overflow-y:auto;display:flex;flex-direction:column;gap:1.25rem}.demo .side h4{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 .75rem;margin-bottom:.4rem;font-weight:800}.demo .side button{width:100%;display:flex;align-items:center;gap:.7rem;padding:.62rem .75rem;border-radius:10px;border:0;background:transparent;color:#c3c7d0;font-weight:700;text-align:left;transition:background-color .15s,color .15s}.demo .side button .ico{width:18px;height:18px;flex:none;opacity:.8}.demo .side button .count{margin-left:auto;color:var(--muted);font-size:.76rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.demo .side button:hover{background:var(--raise);color:var(--text)}.demo .side button[aria-current=true]{background:linear-gradient(90deg,rgb(245 181 68/.16),rgb(245 181 68/.02));color:#fff;box-shadow:inset 2px 0 0 var(--gold)}.demo .side-note{margin-top:auto;border-radius:var(--r);padding:.95rem;color:var(--muted);font-size:.8rem;background:linear-gradient(160deg,rgb(35 209 139/.1),rgb(35 209 139/.02));border:1px solid rgb(35 209 139/.18)}.demo .side-note strong{color:var(--text);display:block;margin-bottom:.25rem}.demo .main{padding:1.25rem clamp(1rem,2.4vw,2rem) 3rem;min-width:0}.demo .hero{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:21/8;min-height:300px;max-height:480px;isolation:isolate;background:#000;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:pan-y}.demo .slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}.demo .slide.on{opacity:1;visibility:visible;transition:opacity .9s ease;z-index:1}.demo .slide .poster,.demo .slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;transform:scale(1.08);transition:transform 7.5s ease-out}.demo .slide.on .poster,.demo .slide.on video{transform:scale(1)}.demo .slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(5 6 8/.92),rgb(5 6 8/.72) 30%,rgb(5 6 8/.1) 62%,transparent),linear-gradient(0deg,rgb(5 6 8/.55),transparent 40%)}.demo .slide-copy{position:absolute;z-index:2;left:clamp(1.25rem,4vw,3.25rem);top:50%;transform:translateY(-50%);max-width:min(30rem,62%)}.demo .slide-copy>*{opacity:0;transform:translateY(22px);filter:blur(6px)}.demo .slide.on .slide-copy>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}.demo .slide.on .slide-copy>:nth-child(2){animation-delay:.1s}.demo .slide.on .slide-copy>:nth-child(3){animation-delay:.2s}.demo .slide.on .slide-copy>:nth-child(4){animation-delay:.3s}@keyframes rise{to{opacity:1;transform:none;filter:none}}.demo .kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);background:rgb(245 181 68/.12);border:1px solid rgb(245 181 68/.3);border-radius:999px;padding:.32rem .7rem}.demo .kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.demo .slide-title{margin-top:.9rem;font-weight:900;font-stretch:125%;font-size:clamp(2.2rem,5.2vw,4.6rem);line-height:.9;letter-spacing:-.045em;text-wrap:balance}.demo .slide-title.gold{background:linear-gradient(180deg,#fff6df 0,var(--gold-2) 40%,#d18f1d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgb(245 181 68/.25))}.demo .slide-title.fire{background:linear-gradient(180deg,#fff,#ffd1f0 40%,#ff5fa8);-webkit-background-clip:text;background-clip:text;color:transparent}.demo .slide-body{margin-top:.85rem;color:rgb(255 255 255/.78);font-size:clamp(.95rem,1.3vw,1.08rem);max-width:26rem}.demo .slide-cta{margin-top:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap}.demo .hero-nav{position:absolute;z-index:3;right:1rem;bottom:1rem;display:flex;gap:.45rem}.demo .hero-nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgb(255 255 255/.18);background:rgb(0 0 0/.35);color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .15s}.demo .hero-nav button:hover{background:rgb(0 0 0/.6)}.demo .bars{position:absolute;z-index:3;left:clamp(1.25rem,4vw,3.25rem);bottom:1.25rem;display:flex;gap:.4rem}.demo .bars button{width:46px;height:4px;border:0;padding:0;border-radius:4px;background:rgb(255 255 255/.22);overflow:hidden;position:relative}.demo .bars button:before{content:"";position:absolute;inset:-10px 0}.demo .bars i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--gold)}.demo .bars button.done i{transform:scaleX(1)}.demo .bars button.on i{animation:fill var(--dur) linear forwards}.demo .hero[data-paused=true] .bars button.on i{animation-play-state:paused}@keyframes fill{to{transform:scaleX(1)}}.demo .ticker{margin:1.1rem 0 1.75rem;display:flex;align-items:center;gap:.9rem;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);overflow:hidden;height:52px}.demo .ticker-label{flex:none;height:100%;display:flex;align-items:center;gap:.5rem;padding:0 1rem;font-weight:800;font-size:.8rem;letter-spacing:.04em;color:var(--emerald);background:linear-gradient(90deg,rgb(35 209 139/.14),transparent)}.demo .ticker-label i{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald);animation:pulse 1.4s ease-in-out infinite}.demo .ticker-track{flex:1 1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.demo .ticker-row{display:flex;gap:.6rem;width:max-content;animation:marquee var(--dur,40s) linear infinite}.demo .ticker:hover .ticker-row{animation-play-state:paused}@keyframes marquee{to{transform:translateX(-50%)}}.demo .win{display:inline-flex;align-items:center;gap:.55rem;background:var(--raise);border-radius:10px;padding:.4rem .7rem .4rem .4rem;white-space:nowrap;font-size:.82rem}.demo .win img{width:28px;height:28px;border-radius:7px;object-fit:cover}.demo .win b{color:var(--emerald);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.demo .win span{color:var(--muted)}.demo .ticker-empty{color:var(--muted);padding-right:1rem}.demo .row-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 1rem}.demo .row-head h3{font-size:1.2rem;font-weight:900;font-stretch:112%;letter-spacing:-.02em;display:flex;align-items:baseline;gap:.55rem}.demo .row-head h3 span{color:var(--muted);font-size:.85rem;font-weight:700}.demo .section+.section{margin-top:2.25rem}.demo .search{display:flex;align-items:center;gap:.5rem;background:var(--panel);border:1px solid var(--line);border-radius:11px;height:42px;padding:0 .85rem;width:min(320px,100%);color:var(--muted);transition:border-color .15s}.demo .search input{background:transparent;border:0;outline:0;width:100%;color:var(--text)}.demo .search:focus-within{border-color:rgb(245 181 68/.5)}.demo .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));grid-gap:1.1rem;gap:1.1rem}.demo .grid.big{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.demo .tile{border:0;padding:0;background:none;text-align:left;display:flex;flex-direction:column;gap:.6rem;color:inherit}.demo .tile-art{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;isolation:isolate;background:var(--raise);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}.demo .tile-art .cover{position:absolute;inset:2px;z-index:1;border-radius:calc(var(--r) - 2px);overflow:hidden}.demo .tile-art .fallback,.demo .tile-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.demo .tile-art:before{content:"";position:absolute;inset:-50%;z-index:0;opacity:0;transition:opacity .3s;background:conic-gradient(from 0deg,transparent 0 62%,var(--gold) 75%,#fff4d6 80%,transparent 92%);animation:spin 2.6s linear infinite;pointer-events:none}@keyframes spin{to{transform:rotate(1turn)}}.demo .tile-art .shine{position:absolute;inset:0;z-index:3;background:linear-gradient(115deg,transparent 35%,rgb(255 255 255/.22) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}.demo .tile-art .name{position:absolute;z-index:3;left:.85rem;right:.85rem;bottom:.8rem;font-weight:900;font-stretch:125%;font-size:1.35rem;line-height:.95;letter-spacing:-.035em;color:#fff;text-shadow:0 2px 18px rgb(0 0 0/.6)}.demo .tile-art .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgb(0 0 0/.75),transparent 45%)}.demo .tile-art .play{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:rgb(9 10 13/.45);opacity:0;transition:opacity .25s}.demo .tile-art .play span{display:inline-flex;align-items:center;gap:.4rem;color:var(--gold-ink);font-weight:900;border-radius:999px;padding:.6rem 1.15rem;background:linear-gradient(180deg,var(--gold-2),var(--gold));transform:scale(.85);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 10px 30px -8px rgb(245 181 68/.7)}.demo .tile:focus-visible .tile-art,.demo .tile:hover .tile-art{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgb(0 0 0/.9),0 0 0 1px rgb(245 181 68/.35),0 0 40px -8px rgb(245 181 68/.35)}.demo .tile:focus-visible .tile-art img,.demo .tile:hover .tile-art img{transform:scale(1.07)}.demo .tile:focus-visible .tile-art:before,.demo .tile:hover .tile-art:before{opacity:1}.demo .tile:focus-visible .shine,.demo .tile:hover .shine{animation:shine .9s ease forwards}@keyframes shine{to{transform:translateX(120%)}}.demo .tile:focus-visible .play,.demo .tile:hover .play{opacity:1}.demo .tile:focus-visible .play span,.demo .tile:hover .play span{transform:scale(1)}.demo .tile-meta{display:flex;justify-content:space-between;gap:.5rem;color:var(--muted);font-size:.78rem;font-weight:700}.demo .tile-meta b{color:var(--text);font-weight:800}.demo .reveal{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards}.demo .empty{border:1px dashed var(--line);border-radius:var(--r);padding:3rem 1rem;text-align:center;color:var(--muted)}.demo .overlay{position:fixed;inset:0;z-index:50;background:rgb(4 5 7/.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;padding:1rem;animation:fade .2s ease}@keyframes fade{0%{opacity:0}}.demo .dialog{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.6rem;animation:pop .3s cubic-bezier(.2,.8,.2,1)}@keyframes pop{0%{opacity:0;transform:translateY(12px) scale(.98)}}.demo .dialog img{width:64px;height:64px;margin-bottom:.75rem}.demo .dialog h2{font-size:1.35rem;font-weight:900;letter-spacing:-.02em;font-stretch:110%}.demo .dialog p{color:var(--muted);margin:.35rem 0 1.25rem}.demo .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.9rem}.demo .field label{font-weight:700;font-size:.84rem;color:#c3c7d0}.demo .field input{height:46px;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:0 .9rem;outline:0;color:var(--text)}.demo .field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgb(245 181 68/.15)}.demo .error{color:var(--red);font-size:.85rem;margin:-.25rem 0 .9rem}.demo .dialog .row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.5rem}.demo .player{width:min(1240px,100%);height:min(780px,calc(100vh - 2rem));background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;animation:pop .35s cubic-bezier(.2,.8,.2,1)}.demo .player-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .7rem .6rem 1rem;border-bottom:1px solid var(--line)}.demo .player-bar .title{display:flex;align-items:center;gap:.7rem;min-width:0}.demo .player-bar .title img{width:34px;height:34px;border-radius:8px;object-fit:cover}.demo .player-bar strong{font-size:1rem}.demo .player-bar .muted{color:var(--muted);font-weight:700;font-size:.82rem;display:block}.demo .player iframe{flex:1 1;width:100%;border:0;background:#0b0d10}.demo .player .loading{flex:1 1;display:grid;place-items:center;color:var(--muted);grid-gap:1rem;gap:1rem;align-content:center}.demo .spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgb(245 181 68/.2);border-top:3px solid var(--gold);animation:spin .8s linear infinite}.demo .toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);z-index:60;background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:.75rem 1.05rem;font-weight:700;animation:pop .3s ease;box-shadow:0 20px 40px -20px #000}.demo .toast.err{border-color:rgb(255 107 107/.5)}.demo .foot{color:var(--muted);font-size:.8rem;margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:.75rem}.demo .foot,.demo .foot .brand{display:flex;align-items:center}.demo .foot .brand{gap:.5rem;color:var(--text);font-weight:800}.demo .foot .brand img{width:30px;height:30px}.demo .adult{border:1px solid var(--line);border-radius:999px;padding:.2rem .65rem;font-weight:700}.demo .short,.demo .tabs-mobile{display:none}@media (max-width:1000px){.demo{grid-template-columns:minmax(0,1fr)}.demo .side{display:none}.demo .tabs-mobile{display:flex;gap:.5rem;overflow-x:auto;margin:0 0 1.25rem;padding-bottom:.25rem;scrollbar-width:none}.demo .tabs-mobile button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:.5rem 1rem;font-weight:700;white-space:nowrap;color:#c3c7d0}.demo .tabs-mobile button[aria-current=true]{color:var(--gold-ink);border-color:var(--gold);background:linear-gradient(180deg,var(--gold-2),var(--gold))}}@media (max-width:700px){.demo .topbar{padding:0 .7rem;gap:.45rem}.demo .badge,.demo .lang select,.demo .logo-text,.demo .long,.demo .who .label{display:none}.demo .short{display:inline}.demo .lang{padding:0 .65rem;position:relative}.demo .lang select{display:block;position:absolute;inset:0;opacity:0;max-width:none}.demo .wallet select{padding:0 .3rem 0 .65rem}.demo .wallet .amount{min-width:0;padding-right:.55rem}.demo .wallet button{padding:0 .7rem}.demo .btn{padding:0 .8rem}.demo .hero{aspect-ratio:4/5;max-height:560px;border-radius:18px}.demo .slide .poster,.demo .slide video{object-position:72% center}.demo .slide:after{background:linear-gradient(0deg,rgb(5 6 8/.95),rgb(5 6 8/.6) 45%,transparent 75%)}.demo .slide-copy{top:auto;bottom:3.4rem;transform:none;max-width:none;right:1.25rem}.demo .hero-nav{display:none}.demo .grid,.demo .grid.big{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.demo .player{height:calc(100vh - 2rem)}}@media (prefers-reduced-motion:reduce){.demo .bars button.on i{transform:scaleX(1)}.demo .bars button.on i,.demo .ticker-row{animation:none!important}.demo .slide-copy>*{opacity:1;transform:none;filter:none}}.demo .more{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-top:1.75rem;color:var(--muted);font-size:.85rem}.demo .more .btn{min-width:220px;justify-content:center}.demo .side{scrollbar-width:thin;scrollbar-color:var(--line) transparent}