:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #080807; color: #fff; overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
.experience { min-height: 100svh; position: relative; display: flex; align-items: end; padding: clamp(24px, 7vw, 96px); isolation: isolate; }
.fireplace { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transition: opacity .45s ease; }
.shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 45% 60%, transparent 0 34%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.42)), linear-gradient(90deg, rgba(0,0,0,.36), transparent 68%); }
.topbar { position: absolute; inset: 28px 32px auto; z-index: 2; display: flex; justify-content: space-between; align-items: start; }
.brand { display: block; width: clamp(82px, 10vw, 128px); filter: drop-shadow(0 3px 12px rgba(0,0,0,.65)); }
.brand img { display: block; width: 100%; height: auto; }
.icon-button, .secondary-button { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(13,13,11,.5); color: #fff; backdrop-filter: blur(9px); }
.icon-button { width: 48px; height: 48px; }.icon-button svg, .secondary-button svg { width: 22px; fill: currentColor; }
.fire-picker { position: absolute; top: 62px; right: 0; width: 290px; padding: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 17px; background: rgba(8,8,7,.82); backdrop-filter: blur(16px); box-shadow: 0 15px 45px #0008; }.fire-picker p { margin: 0 0 13px; font-size: 13px; font-weight: bold; }.fire-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.fire-choice { overflow: hidden; position: relative; aspect-ratio: 16/9; border: 2px solid transparent; border-radius: 8px; padding: 0; background: #222; }.fire-choice.active { border-color: #e52837; }.fire-choice img { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: opacity .2s; }.fire-choice:hover img { opacity: 1; }.fire-choice span { position: absolute; left: 6px; bottom: 5px; font-size: 10px; text-shadow: 0 1px 4px #000; }
.player-card { position: absolute; left: clamp(24px, 7vw, 96px); bottom: 28px; max-width: 500px; padding: 20px 23px 22px; }.on-air { float: right; display: flex; gap: 7px; align-items: center; color: #ff6070; font-weight: 800; font-size: 10px; letter-spacing: 1.2px; }.on-air i { width: 7px; height: 7px; border-radius: 50%; background: #f03545; box-shadow: 0 0 12px #f03545; animation: glow 1.4s infinite; }.eyebrow { margin: 0 0 8px; color: rgba(255,255,255,.67); font-size: 10px; letter-spacing: 1.25px; font-weight: bold; }.player-card h1 { margin: 0; font: 700 clamp(17px, 2vw, 26px)/1.1 Georgia, serif; }.player-card > p:not(.eyebrow) { margin: 8px 0 18px; color: rgba(255,255,255,.82); font-size: 15px; }.controls { display: flex; align-items: center; gap: 13px; }.play-button { width: 47px; height: 47px; border: 0; border-radius: 50%; background: #e12535; color: #fff; display: grid; place-items: center; box-shadow: 0 5px 20px #d718284c; }.play-button svg { fill: currentColor; width: 25px; }.pause-icon { display: none; }.playing .play-icon { display: none; }.playing .pause-icon { display: block; }.secondary-button { width: 38px; height: 38px; }.secondary-button svg { width: 18px; } input[type=range] { accent-color: #e12535; width: 125px; }.hint { position: absolute; bottom: 29px; right: 34px; color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .5px; text-shadow: 0 1px 7px #000; }.hint span { color: #e12535; font-size: 20px; vertical-align: -2px; margin-right: 5px; }
@keyframes glow { 50% { opacity: .45; box-shadow: 0 0 3px #f03545; } }
@media (max-width: 620px) { .experience { padding: 24px; }.topbar { inset: 20px 20px auto; }.player-card { left: 20px; right: 20px; bottom: 20px; width: auto; padding: 18px; }.hint { display: none; }.brand { width: 82px; }.fire-picker { right: 0; width: min(290px, calc(100vw - 40px)); } input[type=range] { flex: 1; width: auto; }.shade { background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 70%), rgba(0,0,0,.04); } }