:root{
  --bg: #0b0b0c;
  --fg: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --muted2: rgba(255,255,255,0.55);
  --shadow: 0 18px 60px rgba(0,0,0,0.65);
  --radius: 18px;
}
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.35;
}
.bg{ position: fixed; inset: 0; overflow: hidden; z-index: -1;
  background:
    radial-gradient(1200px 700px at 50% 35%, rgba(255,255,255,0.08), transparent 55%),
    radial-gradient(800px 500px at 50% 55%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(to bottom, #070708 0%, #0b0b0c 55%, #070708 100%);
}
.bg-svg{ width: 100%; height: 100%; }
.vignette{ position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 50% 40%, transparent 30%, rgba(0,0,0,0.55) 70%),
    radial-gradient(1200px 900px at 50% 80%, transparent 35%, rgba(0,0,0,0.75) 85%);
  pointer-events:none;
}
.grain{ position:absolute; inset:-40%; opacity: 0.08;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  transform: rotate(2deg);
  pointer-events:none;
}
.wrap{ width: min(1100px, 92vw); margin: 0 auto; padding: 28px 0 26px; }
.header{ display:flex; align-items:center; gap: 16px; margin-bottom: 18px; }
.logo{ width: 60px; height: 60px; object-fit: contain; filter: grayscale(100%) brightness(1.2); opacity: 0.92; }
.header-text h1{ font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 4px; }
.sub{ margin: 0; color: var(--muted); font-size: 14px; max-width: 68ch; }
.stage{ margin-top: 12px; position: relative; }
.stage-glow{ position:absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(980px, 92vw); height: min(560px, 52vh);
  background:
    radial-gradient(closest-side at 50% 50%, rgba(255,255,255,0.12), transparent 65%),
    radial-gradient(closest-side at 50% 50%, rgba(255,255,255,0.06), transparent 75%);
  filter: blur(2px); pointer-events:none;
}
.stage-frame{ position: relative; border-radius: calc(var(--radius) + 8px); padding: 12px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stage-inner{ position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.55);
}
.player{ width: 100%; aspect-ratio: 16 / 9; border: 0; display:block; background: rgba(0,0,0,0.7); }
.below{ display:flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; text-align:center; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); color: var(--fg); text-decoration:none; font-weight: 600;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.26); }
.fine{ margin: 0; color: var(--muted2); font-size: 13px; max-width: 70ch; }
.footer{ margin-top: 22px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45); font-size: 12px; text-align:center;
}
@media (max-width: 520px){
  .header{ align-items:flex-start; }
  .logo{ width: 52px; height: 52px; }
  .sub{ font-size: 13px; }
}