:root {
  --black: #030303;
  --obsidian: #070707;
  --deep-black: #0c0905;
  --gold: #ffd56a;
  --gold-bright: #fff0a6;
  --gold-dark: #9b681c;
  --cyan: #66f4ff;
  --cyan-soft: rgba(102, 244, 255, 0.58);
  --magenta-soft: rgba(255, 72, 229, 0.24);
  --glass: rgba(13, 10, 5, 0.62);
  --artwork-ratio: 941 / 1672;
  --frame-width: min(100vw, 430px, calc(100svh * 941 / 1672));
  --frame-radius: 30px;
  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fuzzy-cycle: 4.44s;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--black);
  overflow-x: hidden;
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--gold-bright);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 213, 106, 0.14), transparent 28rem),
    radial-gradient(circle at 50% 88%, rgba(102, 244, 255, 0.10), transparent 25rem),
    linear-gradient(180deg, #010101 0%, #0a0703 48%, #020202 100%);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

.app-stage {
  min-height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(0px, 1.8vh, 18px);
  isolation: isolate;
}