:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --cyan:#61e6ff; --blue:#337cff; }
* { box-sizing:border-box; }
body { margin:0; color:#edf8ff; background:radial-gradient(circle at 15% -10%,#063d61 0,transparent 34%),#040812; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:linear-gradient(#6ee7ff0a 1px,transparent 1px),linear-gradient(90deg,#6ee7ff0a 1px,transparent 1px); background-size:38px 38px; }
main { position:relative; width:min(1180px,calc(100% - 24px)); margin:auto; padding:42px 0 70px; }
header,.player-shell,.controls,.catalog article { border:1px solid #70dfff24; background:#081421dc; backdrop-filter:blur(18px); box-shadow:0 20px 70px #0007; }
header { padding:clamp(24px,5vw,52px); border-radius:28px; }
.eyebrow { color:var(--cyan); font-size:12px; letter-spacing:.13em; font-weight:850; }.eyebrow i { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 20px var(--cyan); animation:pulse 1.5s infinite; }
@keyframes pulse { 50%{opacity:.35;transform:scale(.7)} }
h1 { margin:18px 0 12px; font-size:clamp(38px,7vw,74px); line-height:1; letter-spacing:-.06em; } h1 em { color:var(--cyan); font-style:normal; }
header p { max-width:820px; color:#9bb1c5; line-height:1.75; }
.player-shell { margin-top:18px; padding:16px; border-radius:25px; }
.plyr { border-radius:18px; overflow:hidden; background:#000; --plyr-color-main:#48cfff; }
.telemetry { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.telemetry div { padding:14px; border-radius:14px; background:#ffffff08; }.telemetry span { display:block; color:#7891a8; font-size:11px; }.telemetry strong { display:block; margin-top:6px; font-variant-numeric:tabular-nums; }
.controls { display:grid; grid-template-columns:1fr 1.4fr auto auto; gap:12px; align-items:end; margin:18px 0; padding:18px; border-radius:20px; }
label { color:#8ea5b9; font-size:12px; } select,button,a { width:100%; min-height:46px; margin-top:7px; padding:0 14px; border:1px solid #62d8ff38; border-radius:12px; color:#dff7ff; background:#102236; font:inherit; text-decoration:none; }
button,a { display:grid; place-items:center; margin-top:0; cursor:pointer; font-weight:760; } button { color:#041420; background:linear-gradient(135deg,#69e7ff,#508aff); }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:34px 3px 14px; }.section-head h2 { margin:0; }.section-head span { color:#72dfff; font-size:13px; }
.catalog { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.catalog article { padding:18px; border-radius:18px; }.catalog h3 { margin:0 0 8px; }.catalog p { margin:4px 0; color:#8299ac; font-size:13px; }.state { display:inline-flex; align-items:center; gap:7px; color:#6ce9bd!important; }.state.bad { color:#ff8795!important; }
@media(max-width:760px){main{padding-top:12px}.telemetry{grid-template-columns:1fr 1fr}.controls{grid-template-columns:1fr}.catalog{grid-template-columns:1fr}header{border-radius:22px;padding:23px}h1{font-size:43px}}