:root{color-scheme:dark light}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial;background:#0b0b0c;color:#e9e9ea}
a{color:inherit;text-decoration:none}
.header{position:sticky;top:0;background:rgba(12,12,12,.75);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);z-index:10}
.container{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;gap:12px;align-items:center}
.brand{font-weight:800;letter-spacing:.2px}
.spacer{flex:1}
.button{appearance:none;border:1px solid #2a2a2d;background:#0f0f10;color:#fff;border-radius:12px;
  padding:10px 14px;cursor:pointer}
.button:hover{background:#141416}
/* grid */
.grid{display:grid;gap:16px;padding:16px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:#121214;border:1px solid #1f1f22;border-radius:16px;overflow:hidden;transition:.2s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.thumb{aspect-ratio:16/9;background:#0e0e10;display:block;width:100%;object-fit:cover}
.meta{padding:10px 12px}
.title{font-weight:700;margin:0 0 6px 0;font-size:14px}
.small{opacity:.7;font-size:12px}
/* player */
.player-wrap{min-height:100vh;display:grid;grid-template-rows:auto 1fr}
.topbar{display:flex;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #1f1f22}
.topbar .spacer{flex:1}
.vrbox{display:grid;place-items:center;padding:10px}
video{max-width:100%;height:auto;border-radius:12px}
.footer{padding:16px;text-align:center;opacity:.6}