:root {
  color-scheme: dark;
  --ink: #f2f0e9;
  --muted: #aaa99f;
  --surface: #171817;
  --line: rgba(242, 240, 233, 0.18);
  --accent: #c7f36b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  display: grid;
  place-items: center;
  background: #101110;
  color: var(--ink);
}

.site-shell {
  width: min(100vw, 177.778vh);
  height: min(100vh, 56.25vw);
  padding: min(5vh, 2.813vw) min(5vw, 8.889vh);
  display: grid;
  grid-template-rows: minmax(0, 0.66fr) minmax(0, 1fr) auto;
  gap: min(1.65vh, 0.928vw);
  overflow: hidden;
  background: #101110;
}

.site-header {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: min(4vw, 7.111vh);
  row-gap: min(1.2vh, 0.675vw);
  align-items: end;
}

.eyebrow,
.card-meta,
.card-footer,
.status,
.site-footer {
  font-size: min(0.72vw, 1.28vh);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow {
  grid-column: 1 / -1;
  color: var(--accent);
  margin: 0;
}

h1 {
  grid-column: 1;
  grid-row: 2 / 4;
  max-width: 7.8ch;
  margin: 0;
  align-self: center;
  font-size: min(6.45vw, 11.467vh);
  line-height: 0.84;
  letter-spacing: -0.075em;
  font-weight: 700;
}

.intro {
  align-self: end;
  color: var(--muted);
  font-size: min(1.05vw, 1.867vh);
  line-height: 1.4;
  margin: 0;
  max-width: 30ch;
}

.status {
  display: flex;
  gap: min(0.47vw, 0.836vh);
  align-items: center;
  color: var(--muted);
  grid-column: 2;
}

.status-dot {
  width: min(0.42vw, 0.747vh);
  height: min(0.42vw, 0.747vh);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 min(0.84vw, 1.493vh) var(--accent);
}

.screen-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: min(0.73vw, 1.298vh);
}

.screen-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: min(1.15vw, 2.044vh);
  border: 1px solid var(--line);
  border-radius: min(0.21vw, 0.373vh);
  overflow: hidden;
}

.screen-card--signal { background: var(--accent); color: #18200f; }
.screen-card--warm { background: #d8b29c; color: #301d18; }
.screen-card--night { background: #3039a0; color: #eff0ff; }

.card-meta,
.card-footer {
  display: flex;
  justify-content: space-between;
  gap: min(0.52vw, 0.924vh);
  opacity: 0.7;
}

.card-content { margin: auto 0; }

.card-kicker {
  margin: 0 0 min(1.3vh, 0.731vw);
  font-size: min(0.8vw, 1.422vh);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

h2 {
  margin: 0;
  font-size: min(3vw, 5.333vh);
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.card-support {
  max-width: 26ch;
  margin: min(1.7vh, 0.956vw) 0 0;
  font-size: min(0.9vw, 1.6vh);
  line-height: 1.3;
  opacity: 0.78;
}

.site-footer {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: min(1vw, 1.778vh);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: min(1vh, 0.563vw);
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }