:root {
  --warm: rgba(255, 198, 106, 0.92);
  --paper: rgba(242, 234, 218, 0.90);
  --cold: rgba(205, 233, 236, 0.82);
  --green: rgba(117, 228, 195, 0.85);
  --dark: rgba(8, 13, 18, 0.9);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #071016; color: var(--paper); font-family: Georgia, 'Times New Roman', serif; overflow: hidden; }
.stage { position: relative; width: 100vw; height: 100vh; isolation: isolate; background: #071016; }
.photo { position: absolute; inset: 0; background-size: cover; background-position: center center; opacity: 0; transition: opacity 1100ms ease, transform 9000ms ease; transform: scale(1.012); z-index: 0; }
.photo-calm { background-image: url('assets/bromarv-calm.jpeg'); }
.photo-burning { background-image: url('assets/bromarv-burning.jpeg'); }
.stage.calm .photo-calm, .stage.burning .photo-burning { opacity: 1; transform: scale(1.018); }
.grade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(circle at 14% 48%, rgba(255, 171, 43, 0.12), transparent 23%),
  linear-gradient(180deg, rgba(2, 5, 9, 0.10) 0%, rgba(2, 5, 9, 0.05) 35%, rgba(2, 5, 9, 0.34) 100%),
  linear-gradient(90deg, rgba(2, 5, 9, 0.38), transparent 28%, transparent 70%, rgba(2, 5, 9, 0.35));
  mix-blend-mode: multiply;
}
#signalCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.title-block { position: absolute; z-index: 3; left: clamp(22px, 5vw, 74px); top: clamp(22px, 6vh, 64px); width: min(760px, 80vw); text-shadow: 0 3px 22px rgba(0,0,0,.94); pointer-events: none; }
.kicker { margin: 0 0 12px; font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; color: rgba(221, 236, 236, .78); }
h1 { margin: 0; font-weight: 400; letter-spacing: -0.045em; font-size: clamp(32px, 6vw, 84px); line-height: .91; max-width: 860px; color: rgba(252, 239, 218, .93); }
.translation { margin: 16px 0 0; font-size: clamp(15px, 1.8vw, 24px); color: rgba(232, 238, 229, .86); font-style: italic; }
.nav { position: absolute; z-index: 3; right: clamp(22px, 4vw, 58px); top: clamp(24px, 5.5vh, 58px); display: flex; gap: 20px; font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .11em; text-transform: uppercase; }
.nav a { color: rgba(236, 231, 217, .72); text-decoration: none; text-shadow: 0 2px 14px rgba(0,0,0,.85); }
.nav a:hover { color: rgba(255,255,255,.95); }
.subtitle { position: absolute; z-index: 3; left: clamp(22px, 5vw, 74px); bottom: clamp(35px, 6vh, 74px); max-width: min(760px, 68vw); text-shadow: 0 2px 18px rgba(0,0,0,.92); pointer-events: none; }
.subtitle p { margin: 0; font-size: clamp(15px, 1.8vw, 24px); line-height: 1.28; color: rgba(246, 239, 224, .88); }
.subtitle .line-b { margin-top: 4px; font-size: clamp(12px, 1.3vw, 16px); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; color: rgba(200, 225, 224, .70); }
.receiver { position: absolute; z-index: 4; right: clamp(18px, 4vw, 54px); bottom: clamp(22px, 5vh, 58px); width: min(330px, 38vw); padding: 14px 16px 13px; border: 1px solid rgba(229, 229, 218, .24); border-radius: 2px; background: rgba(7, 12, 15, .48); backdrop-filter: blur(5px); box-shadow: 0 10px 32px rgba(0,0,0,.28); font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; color: rgba(235, 236, 224, .75); }
.receiver-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
button { color: rgba(235, 236, 224, .82); background: transparent; border: 1px solid rgba(235,236,224,.25); padding: 5px 8px; font: inherit; text-transform: uppercase; cursor: pointer; }
button:hover { border-color: rgba(235,236,224,.55); color: white; }
#tune { width: 100%; accent-color: #d4c39d; cursor: pointer; }
.scale { margin-top: 6px; display: flex; justify-content: space-between; opacity: .62; }
.scene-button { margin-top: 12px; width: 100%; opacity: .72; }
@media (max-width: 760px) {
  .nav { left: 22px; right: auto; top: auto; bottom: 16px; gap: 12px; font-size: 10px; }
  .receiver { left: 22px; right: 22px; bottom: 48px; width: auto; }
  .subtitle { bottom: 165px; max-width: 86vw; }
  .title-block { top: 26px; width: 86vw; }
}