:root {
  --bg: #f2efe8;
  --line: #322d25;
  --accent-a: #e5624f;
  --accent-b: #2f9da4;
  --accent-c: #8fbe4b;
  --accent-d: #e4b43e;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }

body {
  font-family: "Space Grotesk", sans-serif;
  background: var(--bg);
}

.app-shell {
  min-height: 100svh;
}

.stage {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #efe8da;
}

.flash-layer,
.shape-layer,
.grid-overlay {
  position: absolute;
  inset: 0;
}

.flash-layer {
  opacity: 0;
  pointer-events: none;
}

.shape-layer {
  overflow: hidden;
}

.grid-overlay {
  pointer-events: none;
  border: 2px solid rgba(50, 45, 37, 0.1);
}

.burst {
  position: absolute;
  border: 2px solid var(--line);
  pointer-events: none;
  transform-origin: center;
}

.burst.fill {
  border-width: 0;
}

.ring {
  border-radius: 999px;
}

.bar {
  height: 16px;
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
}

.zig {
  width: 160px;
  height: 90px;
}

.zig svg {
  width: 100%;
  height: 100%;
  display: block;
}