:root {
  --bg: #fbfbf8;
  --fg: #151a18;
  --muted: #6d7773;
  --accent: #2f8f7a;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b100e;
    --fg: #e8ede9;
    --muted: #8b968f;
    --accent: #6fd0b4;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: fixed;
  inset: 0;
}

.fill {
  position: absolute;
  inset: 2vh 3.5vw 2vh 2vw;
  width: calc(100% - 5.5vw);
  height: calc(100% - 4vh);
  display: block;
  user-select: none;
}

.t {
  font-family: var(--sans);
  font-size: 55px;
  font-weight: 900;
  letter-spacing: -2px;
  fill: var(--fg);
  transition: fill 0.35s ease;
}

.t2 { fill: var(--accent); transition: fill 0.35s ease; }

.sub {
  position: absolute;
  right: max(6vw, env(safe-area-inset-right));
  bottom: max(3.5vh, env(safe-area-inset-bottom));
  margin: 0;
  font-size: clamp(16px, 4vw, 32px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  transition: color 0.35s ease;
  user-select: none;
}