:root {
    --page: #ececec;
    --frame: #b3bba3;
    --panel: #d8dccf;
    --ink: #222;
    --tab-idle: #f2f3ee;
    --hover: rgba(0, 0, 0, .07);
    --font-ui: "Space Grotesk", system-ui, sans-serif;
    --font-blank: "Redacted Script", cursive;
    --tab-height: 48px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --page: #1b1d18; --frame: #3c4334; --panel: #5d6651; --ink: #f1f3ec;
      --tab-idle: #a9b19c; --hover: rgba(255, 255, 255, .08); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --page: #1b1d18; --frame: #3c4334; --panel: #5d6651; --ink: #f1f3ec;
    --tab-idle: #a9b19c; --hover: rgba(255, 255, 255, .08); color-scheme: dark;
  }

  /* Sky cycle: one loop of night -> dawn -> day -> dusk.
     Sky colors are animatable custom properties so the gradient can blend. */
  @property --sky-top { syntax: "<color>"; inherits: false; initial-value: #02030a; }
  @property --sky-low { syntax: "<color>"; inherits: false; initial-value: #0b1026; }
  @property --sun-tint { syntax: "<color>"; inherits: false; initial-value: #f7b733; }
  @property --ground-light { syntax: "<number>"; inherits: false; initial-value: .35; }
  @property --dawn    { syntax: "<color>"; inherits: false; initial-value: rgba(255, 140, 90, 0); }
  @property --dusk    { syntax: "<color>"; inherits: false; initial-value: rgba(255, 110, 70, 0); }
  :root {
    --moon-light: #fff;
    --sun-core: #f7b733;
    --sun-glow: #ffcf4d;
    --sun-haze: rgba(255, 176, 40, .55);
    --orb-size: clamp(77px, 14vw, 147px);
    --cycle: 360s;                       /* full day, start to finish */
    --cycle-start: calc(var(--cycle) * -0.44); /* open as the moon nears the left edge */
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; }
  img, canvas { max-width: 100%; }
  [hidden] { display: none !important; }
  html, body { height: 100%; }

  body {
    min-height: 100%;
    padding: 24px;
    color: var(--ink);
    /* sky: deep overhead, lighter at the horizon, with a warm glow on the
       side the sun enters (right) or leaves (left), up where the sun travels */
    background: #02030a;              /* the sky itself is .sky-bg, which covers the page */
    font-size: clamp(1rem, 1.6vw, 1.5rem);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
  }
  @keyframes sky-cycle {
    0%        { --sky-top: #1d1d3f; --sky-low: #24224a; --sun-tint: #ff6a3a; --dawn: rgba(255, 140, 80, 0); --dusk: rgba(255, 105, 60, 0.3); --ground-light: 0.45; }
    5%        { --sky-top: #0b0f24; --sky-low: #10142e; --sun-tint: #ff6a3a; --dawn: rgba(255, 140, 80, 0); --dusk: rgba(255, 105, 60, 0.1); --ground-light: 0.38; }
    10%, 40%  { --sky-top: #02030a; --sky-low: #0a0e22; --sun-tint: #ff6a3a; --dawn: rgba(255, 140, 80, 0); --dusk: rgba(255, 105, 60, 0); --ground-light: 0.32; }
    44%       { --sky-top: #0b1030; --sky-low: #161a3e; --sun-tint: #ff6a3a; --dawn: rgba(255, 140, 80, 0.18); --dusk: rgba(255, 105, 60, 0); --ground-light: 0.38; }
    48%       { --sky-top: #2a2f62; --sky-low: #3c3f73; --sun-tint: #ff6a3a; --dawn: rgba(255, 140, 80, 0.6); --dusk: rgba(255, 105, 60, 0); --ground-light: 0.55; }
    52%       { --sky-top: #4f6aa8; --sky-low: #6f86bb; --sun-tint: #ff8a3d; --dawn: rgba(255, 140, 80, 0.85); --dusk: rgba(255, 105, 60, 0); --ground-light: 0.75; }
    57%       { --sky-top: #6f9fd2; --sky-low: #93bbe0; --sun-tint: #ffb43f; --dawn: rgba(255, 140, 80, 0.35); --dusk: rgba(255, 105, 60, 0); --ground-light: 0.92; }
    62%, 86%  { --sky-top: #5f9bd2; --sky-low: #a9cde8; --sun-tint: #f7b733; --dawn: rgba(255, 140, 80, 0); --dusk: rgba(255, 105, 60, 0); --ground-light: 1; }
    90%       { --sky-top: #5d86bf; --sky-low: #8fb0d6; --sun-tint: #ffa63c; --dawn: rgba(255, 140, 80, 0); --dusk: rgba(255, 105, 60, 0.35); --ground-light: 0.9; }
    94%       { --sky-top: #3d4684; --sky-low: #5a5f96; --sun-tint: #ff7a3a; --dawn: rgba(255, 140, 80, 0); --dusk: rgba(255, 105, 60, 0.8); --ground-light: 0.7; }
    97%       { --sky-top: #2a2a5e; --sky-low: #35346a; --sun-tint: #ff6a3a; --dawn: rgba(255, 140, 80, 0); --dusk: rgba(255, 105, 60, 0.55); --ground-light: 0.55; }
    100%      { --sky-top: #1d1d3f; --sky-low: #24224a; --sun-tint: #ff6a3a; --dawn: rgba(255, 140, 80, 0); --dusk: rgba(255, 105, 60, 0.3); --ground-light: 0.45; }
  }

  /* Ground strip: dirt, grass and the pond basin, drawn on one canvas */
  /* Sky layer: its own element so stormy weather can grey and dim it */
  .sky-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* the cycle runs here, not on body: only this element uses the colours,
       so the rest of the page is not restyled every frame */
    animation: sky-cycle var(--cycle) linear infinite var(--cycle-start);
    background:
      radial-gradient(ellipse 85% 110% at 100% 12%, var(--dawn), transparent 72%),
      radial-gradient(ellipse 85% 110% at 0% 12%, var(--dusk), transparent 72%),
      linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-low) 100%);
  }

  /* Storm greying: a flat slate layer over the sky, faded in with the weather */
  .sky-grey {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #39414b;
    opacity: 0;
    pointer-events: none;
  }