.hero{--hero-red-1: var(--red-1, #ec000b);--hero-red-2: var(--red-2, #cc000a);--hero-r: 18px;--hero-ease: cubic-bezier(.22, .61, .36, 1);position:relative;display:block;margin:0 0 24px;padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px);container-type:inline-size;font-family:var(--font, Kanit, sans-serif);color:#fff}.hero[hidden]{display:none}.hero-frame{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--hero-r);background:#0d0d11;box-shadow:0 0 0 1px #ffffff0d inset;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.hero[data-mode=mobile] .hero-frame{aspect-ratio:4 / 5;max-height:74svh}.hero[data-mode=desktop] .hero-frame{height:clamp(300px,36vw,520px);height:clamp(300px,38cqw,520px)}.hero-boot .hero-frame{aspect-ratio:4 / 5;max-height:74svh}@container (min-width: 640px){.hero-boot .hero-frame{aspect-ratio:auto;height:clamp(300px,38cqw,520px)}.hero-boot .hero-skel{justify-content:center;padding:0 5.5%}}.hero-stage{position:absolute;top:0;right:0;bottom:0;left:0}.hero-slide{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden;transition:opacity .7s var(--hero-ease),visibility 0s linear .7s,transform .3s var(--hero-ease)}.hero-slide.is-active{z-index:1;opacity:1;visibility:visible;transition:opacity .7s var(--hero-ease),transform .3s var(--hero-ease)}.hero.is-dragging .hero-slide.is-active{transition:none}.hero-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;display:none;background:center 25% / cover no-repeat}.hero-img{position:absolute;display:block;opacity:0;transition:opacity .45s ease}.hero-img[hidden]{display:none}.hero-slide.img-ready .hero-img{opacity:1}.hero-shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.hero-body{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:flex-start}.hero-slide .hero-body{opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}.hero-slide.is-active .hero-body{opacity:1;transform:none;transition:opacity .45s ease .28s,transform .55s var(--hero-ease) .28s}.hero-slide.is-active .hero-img,.hero-slide.is-active .hero-backdrop:not(.is-blur){animation:hero-push calc(var(--hero-interval, 6s) + 2s) ease-out both}@keyframes hero-push{0%{transform:scale(1.05)}to{transform:scale(1)}}.hero-badge{margin-bottom:10px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.2px;color:#fff;background:linear-gradient(180deg,var(--hero-red-1),var(--hero-red-2));box-shadow:0 4px 14px #ec000b55}.hero-badge--hot{background:linear-gradient(180deg,#ffb020,#f08c00);color:#1a1000;box-shadow:0 4px 14px #f08c0040}.hero-badge--pick{background:#fff;color:#111;box-shadow:none}.hero-badge--dub{background:#ffffff24;border:1px solid #ffffff40;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-title{margin:0;font-weight:600;line-height:1.22;text-shadow:0 2px 18px #000000b3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;cursor:pointer}.hero-meta{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:#e4e4e7;font-size:13px;line-height:1.4}.hero-meta i{width:3px;height:3px;border-radius:50%;background:#ffffff80}.hero-desc{margin:8px 0 0;color:#d4d4d8;font-size:13.5px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.hero-actions{display:flex;gap:10px;margin-top:16px;width:100%}.hero-play,.hero-list{height:46px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:transform .15s ease,filter .15s ease,background-color .15s ease}.hero-play{border:0;color:#fff;background:linear-gradient(180deg,var(--hero-red-1),var(--hero-red-2));box-shadow:0 8px 22px #ec000b4d}.hero-list{border:1px solid #ffffff38;color:#fff;background:#ffffff1f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.hero-list[aria-pressed=true]{background:#fff3;border-color:#ffffff59}.hero-play:active,.hero-list:active{transform:scale(.97)}@media(hover:hover){.hero-play:hover{filter:brightness(1.12)}.hero-list:hover{background:#fff3}}.hero-play:focus-visible,.hero-list:focus-visible,.hero-nav:focus-visible,.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}.hero[data-mode=mobile] .hero-img{top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}.hero[data-mode=mobile] .hero-shade{background:linear-gradient(180deg,#00000059,#0000 18%),linear-gradient(180deg,#0000 38%,#000000a6 64%,#000000f2)}.hero[data-mode=mobile] .hero-body{left:0;right:0;bottom:0;padding:18px 16px 16px}.hero[data-mode=mobile] .hero-title{font-size:24px;font-size:clamp(21px,6.8cqw,30px)}.hero[data-mode=mobile] .hero-play,.hero[data-mode=mobile] .hero-list{flex:1 1 0;min-width:0;padding:0 12px}.hero[data-mode=desktop]{--hero-r: 20px}.hero[data-mode=desktop] .hero-backdrop{display:block;background-position:right center}.hero[data-mode=desktop] .hero-backdrop.is-blur{top:-40px;right:-40px;bottom:-40px;left:-40px;background-position:center 30%;filter:blur(34px) saturate(1.45) brightness(.82)}.hero[data-mode=desktop] .hero-img{top:50%;right:6%;height:82%;width:auto;aspect-ratio:3 / 4;object-fit:cover;object-position:50% 20%;border-radius:14px;translate:0 -50%;box-shadow:0 30px 70px #000000b3,0 0 0 1px #ffffff1a}.hero[data-mode=desktop] .hero-shade{background:radial-gradient(55% 90% at 0% 100%,#ec000b2e,#0000 70%),linear-gradient(90deg,#000000e6,#000000b8,#00000040 56%,#0000 76%),linear-gradient(0deg,#000000a6,#0000 38%)}.hero[data-mode=desktop] .has-wide-art .hero-shade{background:linear-gradient(90deg,#000000eb,#000000b3 32%,#0000 66%),linear-gradient(0deg,#0009,#0000 35%)}.hero[data-mode=desktop] .hero-body{left:5.5%;top:50%;translate:0 -50%;width:min(48%,580px)}.hero[data-mode=desktop] .has-wide-art .hero-body{width:min(46%,560px)}.hero[data-mode=desktop] .hero-title{font-size:34px;font-size:clamp(26px,3.4cqw,46px)}.hero[data-mode=desktop] .hero-meta{font-size:14px;margin-top:12px}.hero[data-mode=desktop] .hero-desc{font-size:15px;margin-top:12px;-webkit-line-clamp:3;max-width:520px}.hero[data-mode=desktop] .hero-actions{width:auto;margin-top:22px}.hero[data-mode=desktop] .hero-play,.hero[data-mode=desktop] .hero-list{height:48px;min-width:168px;padding:0 26px}.hero-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border:1px solid #ffffff2e;border-radius:50%;color:#fff;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;opacity:0;transition:opacity .2s ease,background-color .2s ease}.hero-prev{left:14px}.hero-next{right:14px}.hero-frame:hover .hero-nav,.hero-nav:focus-visible{opacity:1}.hero-nav:hover{background:#000000a6}.hero.is-single .hero-nav,.hero.is-loading .hero-nav{display:none}@media(hover:none){.hero-nav{display:none}}.hero-dots{height:24px;margin-top:10px;display:flex;justify-content:center;align-items:center;gap:0}.hero-dot{position:relative;width:34px;height:24px;padding:0 0 0 4px;border:0;background:none;cursor:pointer;display:flex;align-items:center}.hero-dot span{position:relative;flex:none;width:7px;height:7px;border-radius:999px;overflow:hidden;background:#ffffff47;transition:width .3s var(--hero-ease),background-color .2s ease}.hero-dot.is-active span{width:26px;background:#ffffff38}.hero-dot.is-active span:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--hero-red-1);transform-origin:left center;animation:hero-fill var(--hero-interval, 6s) linear forwards}.hero.is-paused .hero-dot.is-active span:after{animation-play-state:paused}.hero.no-auto .hero-dot.is-active span:after{animation:none}@keyframes hero-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.hero-skel{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:18px 16px}.hero[data-mode=desktop] .hero-skel{justify-content:center;padding:0 5.5%}.hero-skel .sk{display:block;border-radius:8px;background:linear-gradient(90deg,#ffffff0d,#ffffff1f,#ffffff0d) 0 0 / 200% 100%;animation:hero-shimmer 1.4s linear infinite}.sk-badge{width:64px;height:22px}.sk-title{width:70%;max-width:420px;height:30px}.sk-line{width:88%;max-width:480px;height:14px}.sk-btns{width:100%;max-width:360px;height:46px;margin-top:6px}@keyframes hero-shimmer{to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide.is-active,.hero-img,.hero-dot,.hero-dot span{transition:none}.hero-slide .hero-body,.hero-slide.is-active .hero-body{transition:none;transform:none}.hero-slide.is-active .hero-img,.hero-slide.is-active .hero-backdrop,.hero-skel .sk,.hero-dot.is-active span:after{animation:none}}