:root{--bg:#07080c;--fg:#f4f5f8;--mut:#9aa0ad;--acc:#4588c8;--acc2:#fcce2d;--card:#141720;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:var(--bg);color:var(--fg)}
a{color:inherit}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:linear-gradient(#07080ce6,#07080c00);transition:background .3s}
header.solid{background:#07080cf0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{display:flex;gap:6px;align-items:center;text-decoration:none;font-size:20px;letter-spacing:-.02em}.brand img{width:26px;height:26px}.brand span{color:var(--acc2);font-weight:800}
#sbtn svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
#hero{position:relative;height:min(78vh,640px);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s;background:#000 center/cover}
.slide.on{opacity:1}.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07080c00 35%,#07080c 96%),linear-gradient(90deg,#07080cc0,#07080c00 70%)}
.hcap{position:absolute;z-index:2;left:18px;right:18px;bottom:34px;max-width:620px}
.hcap .tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc2)}
.hcap h1{font-size:clamp(30px,8vw,56px);line-height:1.02;margin:6px 0 8px;letter-spacing:-.03em}
.hcap p{color:#d5d8e0;font-size:15px;line-height:1.4;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.btns{display:flex;gap:10px}.play{background:#fff;color:#000;font-weight:700;padding:12px 22px;border-radius:12px;display:flex;gap:8px;align-items:center}
.ghost{background:#ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 18px;border-radius:12px;font-weight:600}
.dots{position:absolute;z-index:3;right:18px;bottom:40px;display:flex;gap:6px}.dots i{width:6px;height:6px;border-radius:3px;background:#fff6;transition:.3s}.dots i.on{width:18px;background:#fff}
#chips{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 8px;scrollbar-width:none}#chips::-webkit-scrollbar{display:none}
#chips button{flex:none;padding:8px 14px;border-radius:999px;background:#1b1f2a;font-size:14px;font-weight:600;color:#cfd3dc}#chips button.on{background:#fff;color:#000}
.row{margin:18px 0 6px}.row h2{font-size:19px;margin:0 16px 10px;letter-spacing:-.01em}
.rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 6px;scrollbar-width:none;scroll-padding:16px}.rail::-webkit-scrollbar{display:none}
.tile{flex:none;width:132px;scroll-snap-align:start;text-align:left}.tile .art{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--card) center/cover;box-shadow:0 6px 18px #0007;transition:transform .2s}
.tile:active .art{transform:scale(.96)}.tile.wide{width:240px}.tile.wide .art{aspect-ratio:16/9}
.tile .art .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:10px;font-weight:800;font-size:15px;background:linear-gradient(135deg,#1f3f66,#0d1220)}
.tile .t{font-size:13px;margin-top:6px;color:#dfe2e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile .y{font-size:12px;color:var(--mut)}
.prog{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:2px;background:#fff4}.prog b{display:block;height:100%;background:var(--acc2);border-radius:2px}
.badge{position:absolute;top:7px;left:7px;font-size:10px;font-weight:800;padding:3px 6px;border-radius:5px;background:#000a;backdrop-filter:blur(6px)}
footer{color:var(--mut);font-size:12px;padding:30px 16px calc(env(safe-area-inset-bottom) + 30px);line-height:1.5}
#sheet{position:fixed;inset:0;z-index:40}.scrim{position:absolute;inset:0;background:#000a;animation:fd .25s}
.card{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;background:#12151d;border-radius:22px 22px 0 0;animation:up .32s cubic-bezier(.2,.9,.3,1);padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}
@media(min-width:760px){.card{left:50%;width:640px;transform:translateX(-50%);bottom:auto;top:8vh;border-radius:22px}}
.card .bd{aspect-ratio:16/9;background:#000 center/cover;position:relative}.card .bd:after{content:"";position:absolute;inset:0;background:linear-gradient(#12151d00 50%,#12151d)}
.card .in{padding:0 18px}.card h3{font-size:26px;margin:-28px 0 4px;position:relative;z-index:2;letter-spacing:-.02em}
.meta{color:var(--mut);font-size:13px;margin-bottom:12px}.card p{color:#cdd1da;line-height:1.5;font-size:15px}
.lic{font-size:12px;color:var(--mut);border-top:1px solid #ffffff14;padding-top:12px;margin-top:14px}.lic a{color:var(--acc)}
.grab{width:40px;height:5px;border-radius:3px;background:#fff5;position:absolute;top:8px;left:50%;margin-left:-20px;z-index:3}
#player{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column}
.pbar{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px}.pbar span{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pclose{font-size:20px;width:40px;height:40px;border-radius:20px;background:#ffffff1f}#psrc{background:#1b1f2a;color:#fff;border:0;border-radius:8px;padding:7px}
#pstage{flex:1;display:flex;align-items:center;justify-content:center}#pstage video,#pstage iframe{width:100%;max-height:100%;aspect-ratio:16/9;border:0;background:#000}
#search{position:fixed;inset:0;z-index:30;background:#07080cf7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:calc(env(safe-area-inset-top) + 12px) 16px 0;overflow:auto;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
#search[hidden],#sheet[hidden],#player[hidden]{display:none}
#q{flex:1;font-size:17px;padding:11px 14px;border-radius:12px;border:0;background:#1b1f2a;color:#fff;outline:none}#sx{color:var(--acc)}
.grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;padding:6px 0 40px}.grid .tile{width:auto}
@keyframes up{from{transform:translateY(100%)}}@keyframes fd{from{opacity:0}}
.badge.live{background:#ff3b30;color:#fff}.tile.wide .art{aspect-ratio:16/9}