:root{--bg:#0f0f12;--card:#141418;--line:#24242a;--text:#f2f2f5;--muted:#bdbdc4;--fox:#ff7a45;--pink:#ffb3c7}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Arial}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:24px}
header{display:flex;gap:12px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:18px 24px;position:sticky;top:0;background:rgba(15,15,18,.8);backdrop-filter:blur(6px);z-index:5}
.logo{display:flex;gap:10px;align-items:center;font-weight:700}
.logo .dot{width:12px;height:12px;background:linear-gradient(45deg,var(--fox),var(--pink));border-radius:50%}
nav a{color:var(--muted);text-decoration:none;margin:0 10px}
nav a:hover{color:var(--text)}
.btn{display:inline-block;padding:10px 14px;border-radius:14px;text-decoration:none;font-weight:600;border:1px solid var(--line);transition:transform .1s ease,box-shadow .1s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--fox);color:#1a1a1a;border-color:transparent}
.btn-ghost{background:transparent}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.hero h1{font-family:Poppins,system-ui,Arial;font-size:40px;margin:.2em 0}
.hero p{color:var(--muted);line-height:1.5}
.badge{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.85rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.card h3{margin:.3rem 0 .6rem;font-family:Poppins,system-ui,Arial}
.meta{color:var(--muted);font-size:.9rem}
footer{padding:28px;color:#aaa;border-top:1px solid var(--line);text-align:center;margin-top:24px}
.thumb{width:100%;aspect-ratio:16/9;border-radius:12px;background:#1b1b20;border:1px solid var(--line)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.announce{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  padding:10px 14px;border-radius:999px;color:var(--muted);margin:0 0 16px}
.announce .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(45deg,var(--fox),var(--pink))}
#videos .card{padding:12px}
#videos .card h3{font-size:1rem;line-height:1.3;margin-top:8px}
#videos .thumb{aspect-ratio:16/9;object-fit:cover}