*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,sans-serif;background:#090a0d;color:#fff}
body{display:flex;flex-direction:column}.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;flex:1;min-height:0}
.player{display:grid;place-items:center;background:radial-gradient(circle at center,#20242c,#0b0d11 65%)}
.offline{text-align:center}.offline h1{font-size:clamp(52px,9vw,130px);margin:12px 0 4px;letter-spacing:.06em}
.offline p{color:#aeb5c0}.dot{width:14px;height:14px;border-radius:50%;background:#777;margin:auto}
.chat{border-left:1px solid #292d35;background:#101217;display:flex;flex-direction:column}
.chat header{padding:16px;font-weight:700;text-align:center;border-bottom:1px solid #292d35}
.placeholder{margin:auto;text-align:center;color:#aeb5c0;display:flex;flex-direction:column;gap:8px}
footer{padding:9px 14px;background:#111319;border-top:1px solid #292d35;color:#7f8793;font-size:12px}
@media(max-width:800px){.layout{grid-template-columns:1fr;grid-template-rows:minmax(55vh,1fr) 300px}.chat{border-left:0;border-top:1px solid #292d35}}