/* Family OS design system: tokens + editorial theme. Dark mode follows the visitor's system setting. */
:root {
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --type-eyebrow: 10px;
  --type-caption: 12px;
  --type-body: 15px;
  --type-docBody: 13px;
  --type-h3: 17px;
  --type-h2: 21px;
  --type-h1: 28px;
  --type-cover: 40px;
  --chart-1: #446F8A;
  --chart-2: #A85D3F;
  --chart-3: #3F6F54;
  --chart-4: #8A5A6A;
  --chart-5: #9A7B4F;
  --chart-6: #4A5A7A;
  --accent-property: #A85D3F;
  --accent-finance: #3F6F54;
  --accent-health: #446F8A;
  --accent-family: #8A5A6A;
  --accent-legal: #4A5A7A;
  --accent-master: #9A7B4F;
  --status-done: #3F7D54;
  --status-progress: #B8862F;
  --status-progress-text: #8C6015;
  --status-blocked: #B1473B;
  --status-pending: #6B6B6B;
  --semantic-pos: #2E7D52;
  --semantic-neg: #C0392B;
  --semantic-link: #2F6FB0;
  --paper: #FAF8F4;
  --surface: #FFFFFF;
  --ink: #1A1A1A;
  --ink-2: #555555;
  --ink-3-text: #6E6E6E;
  --rule: #E3DCCF;
  --rule-faint: #EFEAE0;
}

html, body { height: 100%; margin: 0; background: #FFFFFF; color: var(--ink); }
body { font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: .5px; overflow: hidden; }
a { color: var(--ink); }
.clock { position: fixed; top: var(--space-4); left: 0; right: 0; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* emerald accent */ .clock span + span { margin-left: var(--space-12); }
.stage { position: fixed; inset: 0; display: grid; place-items: center; perspective: 900px; pointer-events: none; }
.float { animation: float 6s ease-in-out infinite; transform-style: preserve-3d; }
.mark { position: relative; width: 150px; height: 164px; transform-style: preserve-3d; animation: spin 14s cubic-bezier(.7,0,.3,1) infinite; }
.mark .l { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark .solid { fill: #1E6B4F; }
.mark .wire { fill: none; stroke: #1E6B4F; stroke-width: 1px; }
.mark .scan { -webkit-mask: url(crest.svg) center / 100% 100% no-repeat; mask: url(crest.svg) center / 100% 100% no-repeat;
  background: linear-gradient(180deg, transparent 0%, transparent 42%, rgba(190,255,220,.75) 50%, transparent 58%, transparent 100%) 0 -200% / 100% 300% no-repeat;
  animation: scan 3.5s ease-in-out infinite; }
@keyframes spin { 0%, 12% { transform: rotateY(-18deg) rotateX(6deg); } 45%, 57% { transform: rotateY(162deg) rotateX(-6deg); } 90%, 100% { transform: rotateY(342deg) rotateX(6deg); } }
@keyframes float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes scan { 0% { background-position: 0 -200%; } 60%, 100% { background-position: 0 200%; } }
@media (prefers-reduced-motion: reduce) { .mark, .float, .mark .scan { animation: none; } .mark { transform: rotateY(-22deg) rotateX(6deg); } }
.foot { position: fixed; bottom: var(--space-4); left: 0; right: 0; text-align: center; text-transform: uppercase; line-height: 2; }
.panel { position: fixed; left: var(--space-4); bottom: var(--space-4); max-width: 380px; text-transform: uppercase; line-height: 1.7; }
.panel p { margin: 0 0 var(--space-4); color: var(--ink-2); text-transform: none; letter-spacing: .3px; }
.panel nav a + a { margin-left: var(--space-6); }
.panel .label { color: var(--ink-3-text); }
@media (max-width: 520px) { .mark { width: 110px; height: 120px; } .panel { right: var(--space-4); } }