:root {
  --ink: var(--rs-text);
  --muted: var(--rs-muted);
  --line: var(--rs-border);
  --paper: var(--rs-surface);
  --soft: var(--rs-background);
  --primary: var(--rs-primary);
  --primary-dark: var(--rs-primary-dark);
  --accent: var(--rs-accent);
  --success: var(--rs-success);
  --danger: var(--rs-error);
  --shadow: 0 24px 70px color-mix(in srgb, var(--rs-text) 14%, transparent);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { color: var(--rs-text); background: var(--rs-background); font-family: var(--rs-font-body); font-size: var(--rs-font-size); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { color: var(--rs-heading); font-family: var(--rs-font-heading); font-weight: 750; line-height: 1.18; letter-spacing: -.018em; text-wrap: balance; }
h1 { font-size: var(--rs-h1-size); }
h2 { font-size: var(--rs-h2-size); }
h3 { font-size: var(--rs-h3-size); }
p, li { text-wrap: pretty; }
a { color: var(--rs-primary); }
a:hover { color: var(--rs-primary-dark); }

.site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--rs-border) 82%, transparent);
  background: color-mix(in srgb, var(--rs-background) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.brand, .brand:hover, .site-actions a { color: var(--rs-text); }
.brand-mark { background: linear-gradient(145deg, var(--rs-primary), var(--rs-primary-dark)); box-shadow: 0 8px 22px color-mix(in srgb, var(--rs-primary) 28%, transparent); }
.site-actions .header-post-ad { color: #fff; background: linear-gradient(135deg, var(--rs-primary), var(--rs-primary-dark)); box-shadow: 0 4px 18px color-mix(in srgb, var(--rs-primary) 28%, transparent); border-radius: var(--rs-button-radius); }

::-webkit-scrollbar-track { background: color-mix(in srgb, var(--rs-primary) 10%, var(--rs-background)); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rs-primary) 65%, var(--rs-secondary)); border-radius: 20px; }

@media (max-width: 800px) {
  body { font-size: var(--rs-font-size-mobile); }
  h1 { font-size: min(var(--rs-h1-size), 34px); }
  h2 { font-size: min(var(--rs-h2-size), 28px); }
  h3 { font-size: min(var(--rs-h3-size), 22px); }
}