/* Layout: vollbreites Canvas als Header, darunter eine schmale Textspalte mit Tageszeit-Schaltern. */
:root {
  --bg: #eef4f2;
  --fg: #16261f;
  --muted: #4d6359;
  --accent: #2c7a5b;
  --line: #bccbc4;
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1b19; --fg: #e3eee8; --muted: #9bb2a7; --accent: #6fcf9f; --line: #34504a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1b19; --fg: #e3eee8; --muted: #9bb2a7; --accent: #6fcf9f; --line: #34504a;
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.6 var(--font-body);
}
.scene {
  position: relative;
  width: 100%;
  height: 33.333vh;
  min-height: 200px;
  overflow: hidden;
  background: #bfe3ee;
}
.scene canvas { display: block; width: 100%; height: 100%; }
.note {
  max-width: 62ch;
  margin: 0 auto;
  padding-block: 32px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.note h1 {
  margin: 0 0 12px;
  font: 600 clamp(1.6rem, 4vw, 2.2rem)/1.15 var(--font-display);
  text-wrap: balance;
}
.note p { margin: 0 0 12px; color: var(--muted); }
.note code {
  font-size: .92em;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg);
}