/* Global resets + the handful of rules inline styles can't express
   (hover states, keyframes) shared across the whole system. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--surface-canvas); }
body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-heading);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--surface-canvas); }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }

.ds-hov-fill { transition: transform var(--duration-hover) var(--ease-standard); }
.ds-hov-fill:hover { transform: translateY(-2px); }
.ds-hov-outline { transition: border-color var(--duration-hover) var(--ease-standard); }
.ds-hov-outline:hover { border-color: var(--accent-2); }
.ds-hov-nav { transition: color var(--duration-hover) var(--ease-standard); }
.ds-hov-nav:hover { color: var(--ink); }
.ds-hov-card { transition: border-color var(--duration-hover-slow) var(--ease-standard); }
.ds-hov-card:hover { border-color: rgba(63, 61, 86, .5); }

@keyframes ds-pulse { 0%, 100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---- Line-glyph icon vocabulary (GlyphIcon.jsx) — ported verbatim from
   the source's ".pgl" rules. .s/.sf = slate stroke/fill, .a/.af = accent
   stroke/fill; five looping motion classes, all idle until hover. ---- */
.pgl { width: clamp(36px, 4.4vw, 68px); height: clamp(36px, 4.4vw, 68px); flex: none; display: block; overflow: visible; }
.pgl .s { fill: none; stroke: var(--accent-2); stroke-opacity: .55; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pgl .sf { fill: var(--accent-2); fill-opacity: .5; }
.pgl .a { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pgl .af { fill: var(--accent); }
.pgl .puls, .pgl .drift, .pgl .a, .pgl .af { transform-box: fill-box; transform-origin: center; }
.pgl .puls { animation: pglPulse 2.6s ease-in-out infinite; }
.pgl .march { animation: pglMarch 2s linear infinite; }
.pgl .draw { animation: pglDraw 3.4s cubic-bezier(.4,0,.2,1) infinite; }
.pgl .drift { animation: pglDrift 3s ease-in-out infinite alternate; }
.pgl .spin { animation: pglSpin 5s linear infinite; }
@keyframes pglPulse { 0%, 100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes pglMarch { to { stroke-dashoffset: -14; } }
@keyframes pglDraw { 0% { stroke-dashoffset: var(--dl, 40); } 45%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: var(--dl, 40); } }
@keyframes pglDrift { from { transform: translate(0,0); } to { transform: translate(-2px,-3px); } }
@keyframes pglSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}