:root {
  color: #f7f4ed;
  background: #090a0b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 1024px;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #28231d 0, #111214 48%, #050606 100%);
}

[hidden] { display: none !important; }

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

[data-contract-stage]::before,
[data-contract-stage]::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

[data-contract-stage]::before {
  content: "";
  inset: 0;
  z-index: 98;
  background: radial-gradient(circle at 19% 24%, #f0a04b47 0, #f0a04b18 18%, transparent 46%);
}

[data-contract-stage]::after {
  content: attr(data-approval-feedback);
  left: 3%;
  top: 11%;
  width: 31%;
  height: 27%;
  z-index: 99;
  display: grid;
  place-items: center;
  padding: 2.2%;
  border: 2px solid #ffc978;
  border-radius: clamp(.75rem, 1.2vw, 1.4rem);
  background: linear-gradient(145deg, #20160ff7, #090a0cfa);
  color: #ffd89c;
  box-shadow: 0 0 0 1px #000, 0 0 2.8rem #f0a04b70, inset 0 0 2.2rem #f0a04b1c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1rem, 1.65vw, 1.9rem);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: .055em;
  text-align: center;
  text-shadow: 0 0 1.1rem #f0a04b66;
}

[data-contract-stage].approval-feedback::before {
  animation: approval-flash 620ms ease-out both;
}

[data-contract-stage].approval-feedback::after {
  animation: approval-card 620ms ease-out both;
}

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

[data-contract-id="opening-frame"] {
  display: block;
  object-fit: contain;
  background: #0b0c0d;
  user-select: none;
  pointer-events: none;
}

[data-contract-id="cable-twitch"] {
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 .35rem #f0a04b66);
}

[data-contract-id="cable-twitch"] line {
  stroke: #ffc266;
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .95;
}

[data-contract-id="cable-twitch"][data-contract-visibility="highlighted"] {
  filter: drop-shadow(0 0 .85rem #ff9f32) drop-shadow(0 0 1.5rem #f0a04b99);
  animation: cable-twitch 300ms ease-in-out both;
}

[data-contract-id="site-title"] {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: #f6f1e8;
  font-size: clamp(.75rem, 1.18vw, 1.35rem);
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1;
  text-shadow: 0 .12rem .35rem #000;
}

[data-contract-id="site-title"] b {
  display: inline-grid;
  place-items: center;
  min-height: 1.8rem;
  padding: .35rem .65rem;
  border: 1px solid #f0a04baa;
  border-radius: 999px;
  color: #f0a04b;
  background: #0a0b0ce6;
  font-size: .78em;
  letter-spacing: .08em;
}

[data-contract-id="permission-surface"] {
  border: 1px solid #f4cf9b77;
  border-radius: clamp(.75rem, 1.2vw, 1.4rem);
  background:
    linear-gradient(145deg, #151719f2, #090a0cf2),
    #0b0c0d;
  box-shadow:
    0 1rem 2.5rem #000b,
    inset 0 1px #fff1,
    inset 0 0 0 1px #000;
  backdrop-filter: blur(8px);
  transition: opacity 80ms ease, transform 80ms ease;
}

[data-contract-id="dialog-kicker"] {
  display: flex;
  align-items: center;
  color: #f0a04b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.54rem, .75vw, .84rem);
  font-weight: 800;
  letter-spacing: .2em;
}

[data-contract-id="permission-heading"] {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: clamp(1.05rem, 1.9vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: balance;
}

[data-contract-id="permission-body"] {
  display: flex;
  align-items: flex-start;
  color: #cac5bc;
  font-size: clamp(.65rem, .92vw, 1.05rem);
  font-weight: 560;
  line-height: 1.3;
  max-width: 27%;
}

button[data-contract-id="allow-once"],
button[data-contract-id="retry-mission"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 44px;
  min-height: 44px;
  padding: 0 clamp(.7rem, 1.2vw, 1.25rem);
  border: 1px solid #ffcf8b;
  border-radius: .7rem;
  background: linear-gradient(180deg, #f6b35f, #dc7f28);
  color: #16100a;
  box-shadow: 0 .4rem 1rem #0008, inset 0 1px #fff8;
  font-size: clamp(.66rem, 1vw, 1.05rem);
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
}

button[data-contract-id="allow-once"] span,
button[data-contract-id="retry-mission"] span {
  color: #3c2410;
  font-size: 1.25em;
}

[data-contract-id="mission-status"] {
  color: #9d978e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.52rem, .7vw, .82rem);
  letter-spacing: .05em;
}

[data-contract-id="field-comms-label"] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b8174;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.42rem, .58vw, .68rem);
  font-weight: 800;
  letter-spacing: .17em;
  text-shadow: 0 1px #000;
}

[data-contract-id="x-link"],
[data-contract-id="pump-link"],
[data-contract-id="copy-ca"],
[data-contract-id="copy-status"] {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: .2rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #c9c1b5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.34rem, .42vw, .52rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

[data-contract-id="x-link"] [data-cell-label],
[data-contract-id="pump-link"] [data-cell-label] {
  transform: translateY(calc(-1 * clamp(.35rem, .55vw, .7rem)));
}

[data-contract-id="copy-ca"] [data-cell-label],
[data-contract-id="copy-status"] [data-cell-label] {
  transform: translateY(calc(-1 * clamp(.95rem, 1.3vw, 1.55rem)));
}

[data-contract-id="x-link"],
[data-contract-id="pump-link"],
[data-contract-id="copy-ca"] {
  cursor: pointer;
}

[data-contract-id="x-link"]:hover,
[data-contract-id="pump-link"]:hover,
[data-contract-id="copy-ca"]:hover:not(:disabled) {
  color: #f0a04b;
  text-shadow: 0 0 .65rem #f0a04b99;
}

[data-contract-id="copy-status"] { pointer-events: none; }

button[data-contract-id]:focus-visible,
a[data-contract-id]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

button[data-contract-id]:disabled,
a[data-contract-id][aria-disabled="true"] {
  cursor: default;
  opacity: .48;
}

[data-contract-id="x-link"][aria-disabled="true"],
[data-contract-id="pump-link"][aria-disabled="true"],
[data-contract-id="copy-ca"]:disabled {
  opacity: .7;
}

[data-contract-visibility="dimmed"] { opacity: .42; }

[data-contract-id="permission-surface"][data-contract-visibility="highlighted"] {
  border-color: #f0a04b;
  box-shadow: 0 0 2.2rem #f0a04b33, inset 0 1px #fff1;
}

[data-contract-id="permission-heading"][data-contract-visibility="highlighted"] {
  color: #f0a04b;
  text-shadow: 0 0 1.5rem #f0a04b33;
}

@keyframes cable-twitch {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(8px, -5px); }
  55% { transform: translate(-6px, 4px); }
  78% { transform: translate(4px, -2px); }
}

@keyframes approval-flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: .82; }
  100% { opacity: 0; }
}

@keyframes approval-card {
  0% { opacity: 0; transform: scale(.965); }
  10% { opacity: 1; transform: scale(1.015); }
  18%, 82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.99); }
}

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