*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html {
  -webkit-text-size-adjust: 100%;
  background: linear-gradient(var(--surface-page) 0%, var(--surface-page) 50%, var(--surface-inverse) 50%, var(--surface-inverse) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
  border-radius: var(--radius-sm);
}
@keyframes sds-rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes sds-fade{from{opacity:0}to{opacity:1}}
@keyframes sds-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.5deg)}}
@keyframes sds-glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes sds-draw{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:0}}
@keyframes sds-spin{to{transform:rotate(360deg)}}
.sds-reveal{animation:sds-rise var(--dur-reveal) var(--ease-out) both}
.sds-float{animation:sds-float 6s var(--ease-in-out) infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}
a{color:var(--text-brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--royal-700)}
::selection{background:var(--gold-300);color:var(--royal-900)}