:root {
  --night: #1a2142;
  --dusk: #2e3a6e;
  --glow: #ffc864;
  --rose: #f28fad;
  --mint: #7fd6c2;
  --ink: #eef0f7;
  --muted: #b9bfd6;
  --wall: #34407a;
  --roof: #f28fad;
  --display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

:root { --ground: #1c2349; --sky-top: var(--night); --sky-low: var(--dusk); }
body.day { --ground: #2c4630; --sky-top: #3f5fae; --sky-low: #86a3dd; }

* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--ground);
  font: 400 1.0625rem/1.6 var(--body);
}
main { flex: 1; }
a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--glow); }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; border-radius: 4px; }

/* scene: sky, then a ground band the text stands on */
.scene {
  position: relative;
  height: min(62vh, 520px);
  min-height: 340px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-low) 100%);
}
.sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.stars circle { fill: var(--ink); opacity: 0.8; }
.sky-light {
  position: absolute;
  top: 9%;
  right: max(8%, 1.5rem);
  width: clamp(44px, 7vw, 64px);
  height: auto;
  cursor: pointer;
  overflow: visible;
}
.sky-light:focus-visible { outline: 3px solid var(--glow); outline-offset: 6px; border-radius: 50%; }
.moon { fill: #fff3d1; }
.moon-bite { fill: var(--sky-top); }
.sun { fill: #ffd98a; opacity: 0; filter: drop-shadow(0 0 14px rgba(255, 217, 138, 0.8)); }
.sun, .moon, .moon-bite, .stars { transition: opacity 400ms ease; }
body.day .stars, body.day .moon, body.day .moon-bite { opacity: 0; }
body.day .sun { opacity: 1; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26%; }
.ground path { fill: var(--ground); }

.house {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: min(58vw, 280px);
  transform: translateX(-50%);
  overflow: visible;
}
.roof { fill: var(--roof); }
.chimney { fill: #c86f8c; }
.walls { fill: var(--wall); }
.door { fill: var(--mint); }
.knob { fill: var(--night); }
.window, .attic {
  fill: #1f2750;
  stroke: #1f2750;
  stroke-width: 3;
  cursor: pointer;
  transition: fill 260ms ease, filter 260ms ease;
}
.window[aria-checked="true"], .attic[aria-checked="true"] {
  fill: var(--glow);
  filter: drop-shadow(0 0 9px rgba(255, 200, 100, 0.75));
}
.window:focus-visible, .attic:focus-visible { outline: none; stroke: var(--mint); }

/* the one orchestrated moment: lights come on one by one */
.js .window { fill: #1f2750; filter: none; }
.js .window.on { fill: var(--glow); filter: drop-shadow(0 0 9px rgba(255, 200, 100, 0.75)); }

/* text */
.hello { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; text-align: center; }
h1 {
  margin: 0 0 0.75rem;
  font: 700 clamp(2.4rem, 8vw, 4.2rem)/1.02 var(--display);
  letter-spacing: -0.03em;
}
.hello p { margin: 0 auto 0.5rem; color: var(--muted); max-width: 30rem; }
.hint { font-size: 0.9375rem; color: var(--mint); }

footer {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding: 1.25rem 1rem 2rem;
  font-size: 0.9375rem;
}
footer a { color: var(--muted); }

/* legal pages */
.doc { max-width: 40rem; color: var(--ink); margin: 0 auto; padding: 3rem 1.25rem 2rem; }
.doc h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); }
.doc h2 { font: 650 1.25rem/1.3 var(--display); margin: 2rem 0 0.5rem; color: var(--glow); }
.doc p, .doc li { color: var(--ink); }
.doc .lede { color: var(--muted); }
.doc ul { padding-left: 1.2rem; }
.back { display: inline-block; margin-bottom: 1.5rem; color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  .window, .attic { transition: none; }
}