@layer base, layout, scene, responsive;

@layer base {
  :root { color-scheme: light; font-family: Inter, "Segoe UI", Arial, sans-serif; color: #263143; background: #fff; --muted: #78818e; --line: #e9ecf0; }
  * { box-sizing: border-box; }
  body { margin: 0; min-width: 280px; }
  ::selection { background: #d9e8ff; }
}
@layer layout {
  .page { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(24px, 3.4vw, 52px); overflow: clip; }
  .header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; z-index: 2; }
  h1 { margin: 0; line-height: 0; }
  .logo { display: block; width: clamp(148px, 14.4vw, 207px); height: auto; }
  .main { min-height: 350px; display: grid; place-items: center; position: relative; }
  .footer { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; min-height: 45px; z-index: 2; }
  .status, .clock { display: flex; align-items: center; gap: 18px; }
  .footer-label { font-size: .75rem; font-weight: 500; letter-spacing: .13em; color: var(--muted); }
  .site-label { letter-spacing: .04em; }
  .clock { margin-left: auto; white-space: nowrap; }
  .status-value { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; }
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #9ca4af; }
  .status-value[data-state="online"] .status-dot { background: #28a878; box-shadow: 0 0 0 4px #28a8780b; }
  .status-value[data-state="offline"] .status-dot { background: #cc7841; }
  time { min-width: 8ch; font-size: .875rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
  .footer-date { font-size: .75rem; color: var(--muted); }
}
@layer scene {
  .ambient { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
}
@layer responsive {
  @media (max-width: 600px) {
    .page { padding: 26px 24px max(26px, env(safe-area-inset-bottom)); }
    .main { min-height: 360px; }
    .footer { padding-top: 20px; gap: 16px; }
    .status, .clock { gap: 10px; }
    .logo { width: 156px; }
  }
  @media (max-width: 360px) { .page { padding-inline: 18px; } .status, .clock { gap: 8px; } .footer-label { font-size: .75rem; letter-spacing: .06em; } }
  @media (max-height: 550px) and (min-width: 601px) { .page { padding-block: 20px; } .main { min-height: 250px; } .logo { width: 150px; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
}