*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0d0d0f;color:#eee}
a{color:inherit}.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px 4vw;background:linear-gradient(#0d0d0f,#0d0d0fcc)}
.logo{font-weight:700;letter-spacing:.06em;text-decoration:none;color:#f2c14e}.links a{margin-left:18px;text-decoration:none;color:#bbb;font-size:14px}
.hero{min-height:52vh;display:flex;align-items:flex-end;background:linear-gradient(0deg,#0d0d0f 5%,#0d0d0f00 60%),var(--bg) center/cover no-repeat}
.hero-in{padding:0 4vw 5vh;max-width:640px}.hero h1{font-size:clamp(28px,5vw,52px);margin:0 0 8px}.hero p{color:#ccc;margin:0 0 16px}
.play{background:#f2c14e;color:#111;border:0;border-radius:6px;padding:10px 22px;font-weight:700;cursor:pointer}
.row-title{margin:28px 4vw 10px;font-size:18px}.row{display:flex;gap:12px;overflow-x:auto;padding:0 4vw 8px;scroll-snap-type:x mandatory}
.card{flex:0 0 clamp(200px,24vw,300px);scroll-snap-align:start;border:0;padding:0;background:#18181b;border-radius:8px;overflow:hidden;color:inherit;text-align:left;cursor:pointer}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#222}.card:hover img{opacity:.85}
.meta{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;font-size:13px}.meta .d{color:#888}
footer{text-align:center;padding:40px;color:#777}article{max-width:760px;margin:0 auto;padding:24px;line-height:1.6}
dialog{width:min(960px,96vw);padding:0;border:0;border-radius:10px;background:#000;color:#eee}dialog::backdrop{background:#000c}
.bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#141416}.bar button{background:none;border:0;color:#eee;font-size:18px;cursor:pointer}
#pvideo{width:100%;display:block;max-height:80vh;background:#000}