:root {
  color-scheme: dark;
  --ink: #100b1d;
  --panel: #191024;
  --border: #3c2850;
  --text: #fdf0ff;
  --quiet: #ccb7dc;
  --pink: #ff91dd;
  --effects: .78;
  font: 16px/1.45 "Inter", system-ui, sans-serif;
  background: var(--ink);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid #ff9adf; outline-offset: 4px; }
.site { max-width: 1520px; margin: auto; padding: 0 clamp(16px, 4vw, 60px); }
.masthead { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wordmark, .station-title, .quick-links { display: flex; align-items: center; gap: 12px; }
.wordmark { text-decoration: none; }
.wordmark strong { display: block; font-size: clamp(1rem, 2vw, 1.28rem); letter-spacing: -.055em; }
.wordmark-radio { color: var(--pink); }
.wordmark small, .panel-kicker, .scene-title p, .scene-tag, .scene-location, .effects label, .effects output, .chat-status {
  font: 600 .71rem/1.3 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .09em;
}
.wordmark small { color: var(--quiet); display: block; margin-top: 2px; }
.quick-links { gap: clamp(8px, 2.2vw, 26px); }
.quick-links a, .external, footer a { font-size: .84rem; text-underline-offset: 4px; text-decoration-color: #9563ac; }
.outline { border: 1px solid #916489; border-radius: 7px; padding: 7px 11px; background: #170c23de; color: var(--text); }
.outline:hover, .reset:hover { background: #42234f; }
.quick-links .outline { white-space: nowrap; }
.walk {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(395px, 66svh, 805px);
  border: 1px solid #4d285f; border-radius: 16px;
  background: #100a24;
}
.scene, .scene video, .grade, .texture, .vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene { isolation: isolate; background: #150e29 url("assets/walk-poster.webp") center/cover no-repeat; }
.scene video {
  object-fit: cover; object-position: center 47%;
  filter: saturate(calc(1 + var(--effects) * .67)) contrast(calc(1 + var(--effects) * .20)) brightness(calc(1 - var(--effects) * .34));
}
.grade {
  opacity: var(--effects);
  background: linear-gradient(165deg, #12165e 0%, #751b8e 28%, #f61aa8 60%, #4b1b79 100%);
  mix-blend-mode: color;
}
.texture {
  opacity: calc(var(--effects) * .47);
  background: repeating-linear-gradient(to bottom, transparent 0 2px, #10071e66 2px 3px), radial-gradient(circle, #ffe0ff6b .55px, transparent .8px) 1px 1px/4px 4px;
  mix-blend-mode: soft-light;
}
.vignette {
  background: radial-gradient(ellipse at 52% 42%, transparent 26%, rgb(10 7 33 / calc(var(--effects) * .79)) 100%);
}
.cat {
  position: absolute; bottom: -2%; left: 50%; width: clamp(380px, 52vw, 880px); max-width: none; height: auto;
  transform: translateX(-50%); pointer-events: none;
}
.scene-top, .scene-title, .motion, .walk-retry, .cinema-exit { position: absolute; z-index: 1; }
.scene-top { inset: 19px 21px auto; display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.scene-tag, .scene-location {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid #ae75b378; border-radius: 6px;
  background: #130b24df; padding: 7px 9px; color: #fbe9ff;
}
.scene-tag i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #ff80d5; box-shadow: 0 0 11px #ff63c5; }
.scene-title { bottom: clamp(18px, 3vw, 44px); left: clamp(18px, 3vw, 44px); pointer-events: none; text-shadow: 0 2px 18px #140322, 0 1px 3px #1c0328; }
.scene-title p { margin: 0 0 10px; color: #fff0ff; }
.scene-title p span { color: #ff9fdf; margin: 0 3px; }
.scene-title h1 { margin: 0; font: 800 clamp(2.9rem, 7.6vw, 8rem)/.84 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -.082em; }
.scene-title em { font-style: normal; color: #ff9ae2; }
.motion { right: 19px; bottom: 19px; font-size: .8rem; }
.walk-retry { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.effects {
  display: flex; align-items: center; gap: clamp(8px, 2vw, 18px); min-height: 58px;
  margin-bottom: 16px; border-bottom: 1px solid var(--border); color: var(--quiet);
}
.effects label { color: var(--text); white-space: nowrap; }
.effects input { width: clamp(90px, 23vw, 250px); accent-color: #fb80ce; height: 30px; cursor: pointer; }
.effects output { min-width: 3.4ch; color: var(--pink); }
.reset { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--quiet); border-radius: 6px; padding: 4px 10px; font-size: .8rem; }
.stations { display: grid; grid-template-columns: 1.12fr 1fr; gap: 18px; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--panel); scroll-margin-top: 12px; }
.panel-heading { min-height: 84px; padding: 14px 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.panel-heading img { border-radius: 7px; object-fit: cover; }
.panel-kicker { color: var(--pink); margin: 0 0 2px; }
.panel h2 { margin: 0; font-size: clamp(1.08rem, 2vw, 1.42rem); line-height: 1.15; letter-spacing: -.035em; }
.external { white-space: nowrap; color: var(--quiet); }
.player {
  min-height: 240px; background: #120b1d radial-gradient(ellipse at 50% 100%, #3b1650, transparent 78%);
  display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;
}
.player iframe { display: block; width: 100%; aspect-ratio: 16/9; min-height: 200px; border: 0; }
.player p { margin: 10px 12px; color: var(--quiet); font-size: .8rem; }
.tune, .send { border: 0; border-radius: 7px; padding: 8px 12px; background: #f48bd5; color: #210d29; font-weight: 750; }
.tune span { margin-right: 4px; }
.tune:hover, .send:hover { background: #ffc0ea; }
.send:disabled { cursor: default; opacity: .5; }
.chat { display: flex; flex-direction: column; }
.chat-status { text-transform: uppercase; color: var(--quiet); white-space: nowrap; }
.chat-status[data-live="true"] { color: #89f1d5; }
.chat-history { min-height: 136px; height: 165px; flex: 1 0 auto; overflow-y: auto; padding: 12px 17px; }
.chat-history p, .chat-note { font-size: .82rem; color: var(--quiet); margin: 0; }
.messages { margin: 0; padding: 0; list-style: none; }
.messages li { margin-bottom: 8px; overflow-wrap: anywhere; font-size: .9rem; white-space: pre-wrap; }
.messages b { color: #f2a5e0; margin-right: 7px; }
#chat-form { display: grid; grid-template-columns: auto minmax(86px, .8fr) minmax(96px, 1.4fr) auto; gap: 7px; padding: 10px 14px 8px; border-top: 1px solid var(--border); }
#chat-form input { min-width: 0; width: 100%; border-radius: 7px; border: 1px solid #62436d; background: #100a1b; color: var(--text); padding: 7px 8px; font-size: max(.88rem, 16px); }
.nick-label { align-self: center; color: var(--quiet); font-size: .8rem; }
.chat-note { padding: 0 14px 12px; min-height: 32px; }
footer { display: flex; justify-content: space-between; gap: 12px; padding: 25px 0; color: var(--quiet); font-size: .82rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cinema-exit { display: none; }
.walk.is-cinema {
  position: fixed; inset: 0; z-index: 10; height: 100%; width: 100%; border: 0; border-radius: 0;
}
.walk.is-cinema .scene-title, .walk.is-cinema .scene-top { display: none; }
.walk.is-cinema .cinema-exit { display: block; right: max(19px, env(safe-area-inset-right)); top: max(19px, env(safe-area-inset-top)); }
.walk.is-cinema .cat { width: clamp(410px, 60vw, 1050px); }
.cat-still, .walk.is-paused .cat { display: none; }
.walk.is-paused .cat-still { display: block; }
@media (max-width: 840px) {
  .stations { grid-template-columns: 1fr; }
}
@media (max-width: 530px) {
  .site { padding: 0 12px; }
  .masthead { min-height: 66px; }
  .wordmark { gap: 7px; }
  .wordmark img { width: 33px; height: 33px; }
  .wordmark small { font-size: .58rem; }
  .quick-links { gap: 8px; }
  .quick-links a { font-size: .75rem; }
  .quick-links .outline { font-size: .75rem; padding: 5px 6px; }
  .walk { height: clamp(380px, 67svh, 560px); border-radius: 12px; }
  .scene-top { inset: 11px 11px auto; }
  .scene-title { left: 14px; bottom: 48px; }
  .scene-title p { margin-bottom: 7px; }
  .scene-title h1 { font-size: clamp(2.7rem, 13vw, 4.4rem); }
  .cat { width: clamp(390px, 105vw, 520px); bottom: -1%; }
  .motion { bottom: 9px; right: 10px; padding: 5px 7px; }
  #chat-form { grid-template-columns: 68px minmax(0, 1fr) auto; }
  #chat-form #nickname { grid-column: span 2; }
  #chat-form #message { grid-column: span 2; }
}