@layer base {
  :root {
    color-scheme: light;
    --mac-border: rgba(255, 255, 255, .72);
    --mac-shadow: 0 24px 80px rgba(15, 23, 42, .12);
  }

  html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
  body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif; }
  ::selection { background: rgba(14, 165, 233, .18); color: #0f172a; }
}

.mac-window {
  box-shadow: var(--mac-shadow);
  position: relative;
}

.mac-window::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.08));
}

.glass-noise {
  background-image: radial-gradient(circle at 1px 1px, rgba(15,23,42,.06) 1px, transparent 0);
  background-size: 20px 20px;
}

img { max-width: 100%; height: auto; }

details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .mac-window, article, a, button { transition-timing-function: cubic-bezier(.2,.8,.2,1); }
}