:root {
  color: #fff;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

[data-contract-stage] {
  position: relative;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

[data-contract-id] {
  position: absolute;
  margin: 0;
}

[data-contract-id="master-backdrop"] {
  object-fit: contain;
  display: block;
  filter: none;
  transform: none !important;
}

[data-contract-id="palantear-title"] {
  display: flex;
  align-items: center;
  font-size: clamp(22px, 3.2vw, 62px);
  line-height: .9;
  letter-spacing: .08em;
  font-weight: 900;
}

[data-contract-id="ticker-label"] {
  display: flex;
  align-items: center;
  color: #aaa;
  font: 700 clamp(14px, 1.5vw, 28px)/1 monospace;
  letter-spacing: .15em;
}

[data-contract-id="whisper-signal"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5%;
  padding-right: 2%;
}

[data-contract-id="whisper-signal"] span {
  width: 25%;
  height: 38%;
  border-top: max(2px, .25vw) solid #fff;
  border-radius: 50%;
  opacity: .25;
}

[data-contract-id="whisper-signal"] span.is-active { opacity: .95; }

[data-contract-id="listening-pulse"] {
  border: max(2px, .22vw) solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}

[data-contract-state="listening-state"] [data-contract-id="listening-pulse"] {
  border-color: rgba(255, 255, 255, .38);
}

[data-contract-state="armed-state"] [data-contract-id="listening-pulse"] {
  border-color: rgba(255, 255, 255, .95);
}

[data-contract-id="overheard-status"] {
  display: grid;
  place-items: center;
  border: max(2px, .2vw) solid #fff;
  background: #fff;
  color: #000;
  font-size: clamp(16px, 1.7vw, 34px);
  font-weight: 900;
  letter-spacing: .08em;
}

[data-contract-id="overheard-status"].is-flashing { background: #777; }

button[data-contract-id],
a[data-contract-id][role="link"],
a[data-contract-id][href] {
  min-width: 44px;
  min-height: 44px;
  border: max(1px, .12vw) solid #fff;
  border-radius: 0;
  background: #000;
  color: #fff;
  font: 800 clamp(10px, 1.05vw, 20px)/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
  padding: .3em .65em;
}

[data-contract-id="whisper-control"] { overflow: hidden; }
[data-contract-id="whisper-control"] .control-label { position: relative; z-index: 2; }
[data-contract-id="whisper-control"] .hold-meter {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 1;
  background: #3a3a3a;
}
[data-contract-state="armed-state"] [data-contract-id="whisper-control"] { background: #fff; color: #000; }
[data-contract-state="payoff-state"] [data-contract-id="whisper-control"] { border-style: dashed; }

[data-contract-id="mute-control"] {
  font-size: clamp(8px, .72vw, 14px);
  border-color: #777;
  color: #aaa;
}

[data-contract-id="x-link"],
[data-contract-id="pump-link"],
[data-contract-id="copy-ca"],
[data-contract-id="integration-status"] {
  font-family: monospace;
  font-size: clamp(9px, .9vw, 17px);
}

[data-contract-id="integration-status"] {
  display: grid;
  place-items: center;
  border-top: 1px solid #555;
  color: #aaa;
  text-align: center;
}

button[data-contract-id]:focus-visible,
a[data-contract-id]:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
a[data-contract-id][aria-disabled="true"] { cursor: default; opacity: .55; }
[data-contract-id="palantear-title"][data-contract-visibility="dimmed"],
[data-contract-id="ticker-label"][data-contract-visibility="dimmed"] { color: #666; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}