:root { --bg:#07070c; --card:#14141d; --line:#262633; --text:#f4f6fb; --muted:#9aa0b4; --gold:#ffc53d; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; min-height:100vh; padding-bottom:108px; }
  header { position:relative; z-index:2; display:flex; align-items:center; gap:16px; min-height:52px; padding:calc(14px + env(safe-area-inset-top,0px)) 5vw 14px; background:var(--bg); }
  .logo{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:24px;display:flex;align-items:center;gap:8px;letter-spacing:-0.02em;color:#eceef1;text-decoration:none;line-height:1}
  .logo .marks{display:flex;gap:6px;font-size:14px;letter-spacing:2px}
  .logo .marks span:nth-child(1){color:#e8b64c}
  .logo .marks span:nth-child(2){color:#5b8def}
  .logo .marks span:nth-child(3){color:#e05d5d}
  .logo .marks span:nth-child(4){color:#5fd6a4}
  header input { margin-left:auto; width:min(320px,46vw); background:#101018; border:1px solid var(--line); color:#fff; border-radius:10px; padding:10px 14px; font:500 14px Inter,sans-serif; outline:none; }
  .chips { display:flex; gap:8px; overflow-x:auto; padding:12px 4vw 0; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { flex:0 0 auto; background:transparent; border:0; color:var(--muted); font:600 14px Inter,sans-serif; padding:8px 0; cursor:pointer; }
  .chip.on { color:#fff; box-shadow:inset 0 -2px 0 #fff; }
  .hero { position:relative; min-height:46vh; margin:12px 4vw 8px; border-radius:18px; overflow:hidden; display:flex; align-items:flex-end; background:#101018 center/cover no-repeat; }
  .hero::before { content:""; position:absolute; inset:0; background:linear-gradient(to top,#07070c 4%,rgba(7,7,12,.55) 46%,rgba(7,7,12,.15)); }
  .hero-copy { position:relative; padding:28px; max-width:640px; }
  .eyebrow { color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
  .hero h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(36px,5vw,64px); letter-spacing:-.045em; line-height:.95; }
  .hero p { color:#c8cce0; margin:12px 0 18px; }
  .play { background:#fff; color:#07070c; border:0; border-radius:10px; padding:12px 18px; font-weight:800; cursor:pointer; }
  .rail { padding:18px 0 6px; }
  .rail h2 { font-family:"Space Grotesk",sans-serif; font-size:22px; padding:0 4vw 10px; }
  .row { display:flex; gap:12px; overflow-x:auto; padding:0 4vw 12px; scrollbar-width:none; }
  .row::-webkit-scrollbar { display:none; }
  .card { flex:0 0 168px; width:168px; background:var(--card); border:1px solid #ffffff12; border-radius:14px; overflow:hidden; text-align:left; padding:0; color:#fff; cursor:pointer; position:relative; }
  .card img, .ph { width:100%; aspect-ratio:16/10; object-fit:contain; background:#0c0c10; display:block; }
  .ph { display:flex; align-items:center; justify-content:center; font-family:"Space Grotesk",sans-serif; font-size:26px; font-weight:700; }
  .card b { display:block; padding:8px 10px 0; font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card span { display:block; color:var(--muted); padding:2px 10px 12px; font-size:11px; }
  .card em { position:absolute; top:8px; right:8px; background:#07070ccc; color:var(--gold); font-style:normal; font-size:11px; font-weight:700; padding:2px 6px; border-radius:6px; }
  .card.on { outline:2px solid #fff; }
  .player { position:fixed; inset:0; z-index:20; background:#050507; display:none; flex-direction:column; }
  .player.open { display:flex; }
  .pbar { height:64px; display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid var(--line); }
  .pbar button, .now button { border:1px solid var(--line); background:#14141d; color:#fff; cursor:pointer; }
  .pbar button { width:40px; height:40px; border-radius:10px; font-size:16px; }
  .pbar .who { min-width:0; }
  .pbar b, .pbar small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pbar small { color:var(--muted); font-size:12px; }
  .pbar select { margin-left:auto; background:#101018; color:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
  .stage { position:relative; flex:1; background:#000; }
  video { width:100%; height:100%; background:#000; }
  .status { position:absolute; left:16px; bottom:16px; color:#fff; background:#000a; border-radius:8px; padding:6px 10px; font-size:13px; }
  .now { position:fixed; left:0; right:0; bottom:0; z-index:15; display:none; align-items:center; gap:12px; padding:10px 16px; background:#101018f2; border-top:1px solid var(--line); }
  .now.show { display:flex; }
  .now img, .now .ph { width:84px; height:48px; object-fit:contain; background:#0c0c10; border-radius:8px; }
  .now .who { min-width:0; flex:1; }
  .now small { color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .now b, .now span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .now span { color:var(--muted); font-size:12px; }
  .now button { border-radius:10px; padding:10px 14px; font-weight:700; }
  .now .open { background:#fff; color:#07070c; border-color:#fff; }