:root { --bg: #000; --ink: #f2f2f2; --soft: #9c9c9c; --faint: #4a4a4a; --red: #ff2b22; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: Jost, 'Futura', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; }
main { max-width: 460px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; }

.sign { border: 1.5px solid var(--red); border-radius: 4px; padding: 8px 17px 7px; background: #000;
  box-shadow: 0 0 10px rgba(255, 43, 34, .55), 0 0 32px rgba(255, 43, 34, .25), inset 0 0 10px rgba(255, 43, 34, .35); }
.sign span { display: block; color: var(--red); font-weight: 600; font-size: clamp(22px, 6vw, 32px); letter-spacing: .14em; line-height: 1; margin-right: -.14em;
  text-shadow: 0 0 4px rgba(255, 70, 60, .9), 0 0 12px rgba(255, 43, 34, .7), 0 0 26px rgba(255, 43, 34, .45); }
.origin { margin: 10px 0 0; color: var(--soft); font-size: 15px; font-weight: 300; letter-spacing: .06em; }
.line { margin: 34px 0 0; font-size: 19px; font-weight: 300; line-height: 1.45; max-width: 22em; }

.play { margin-top: 34px; width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; -webkit-tap-highlight-color: transparent; transition: background .2s; }
.play svg { width: 30px; height: 30px; fill: currentColor; grid-area: 1 / 1; }
.play .i-pause { display: none; }
.play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-pause { display: block; }
.play:hover { background: rgba(255, 255, 255, .06); }
.play:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.play.wait { opacity: .6; }

.listeners { margin: 30px 0 0; font-size: 15px; color: var(--soft); letter-spacing: .04em; }
.listeners #count { color: var(--ink); font-size: 22px; font-weight: 400; margin-left: .35em; font-variant-numeric: tabular-nums; }

#globe { margin-top: 26px; width: min(100%, 400px); aspect-ratio: 1; display: block; }
.studio { margin-top: 30px; color: var(--faint); font-size: 12px; text-decoration: none; letter-spacing: .05em; }
.studio:hover, .studio:focus-visible { color: var(--soft); }

@media (min-width: 700px) { main { padding-top: 72px; } .line { font-size: 21px; } }