:root {
  color-scheme: dark;
  --pg-page-bg: #0a0e17;
  --pg-page-panel: #101826;
  --pg-page-border: #334155;
  --pg-page-text: #e2e8f0;
  --pg-page-muted: #b2bfd1;
  --pg-page-accent: #4ade80;
  --pg-page-blue: #93c5fd;
  --pg-page-purple: #c084fc;
  --pg-page-warning: #fbbf24;
  --pg-page-danger: #fca5a5;
}
:root[data-pg-theme="light"] {
  color-scheme: light;
  --pg-page-bg: #f6f8fc;
  --pg-page-panel: #ffffff;
  --pg-page-border: #a4b3c8;
  --pg-page-text: #17243b;
  --pg-page-muted: #435572;
  --pg-page-accent: #166534;
  --pg-page-blue: #1d4ed8;
  --pg-page-purple: #7e22ce;
  --pg-page-warning: #854d0e;
  --pg-page-danger: #b91c1c;
}
html { background: var(--pg-page-bg); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.75; }
p, li, dd { overflow-wrap: break-word; }
ul, ol { padding-inline-start: 1.5rem; }
h1, h2, h3 { line-height: 1.3; text-wrap: balance; }
pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
img, iframe { max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--pg-page-accent); outline-offset: 4px; }
.nav-links a.btn-primary { color: var(--pg-page-bg); }
.badge, .badge-free { background: var(--pg-page-panel); color: var(--pg-page-accent); border: 1px solid var(--pg-page-accent); }
.footer-legal { color: var(--pg-page-muted); }
[data-vaultspark-studio-footer-container], [data-vaultspark-studio-footer] { opacity: 1 !important; }
.pg-page-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 900px; margin: 0 auto 24px; padding: 12px 16px; border-bottom: 1px solid var(--pg-page-border); }
.pg-page-tools a { color: var(--pg-page-accent); font-weight: 700; text-decoration: none; padding: 8px 0; }
.pg-page-tools button { font: inherit; min-height: 44px; padding: 8px 14px; border: 1px solid var(--pg-page-border); border-radius: 8px; background: var(--pg-page-panel); color: var(--pg-page-text); cursor: pointer; }
@media (max-width: 600px) {
  h1 { font-size: clamp(28px, 8vw, 40px); }
  .nav-links { flex-wrap: wrap; justify-content: flex-end; }
  .features, .pricing, .grid { grid-template-columns: minmax(0, 1fr); }
  table { display: block; max-width: 100%; overflow-x: auto; }
}