:root { color-scheme: dark; }
* { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(800px 500px at 0% 20%, rgba(168,85,247,0.08), transparent 55%),
    #0a0f1c;
  color: #e2e8f0;
}
.font-display { font-family: 'Bricolage Grotesque', sans-serif; }
.font-mono, code, pre { font-family: 'IBM Plex Mono', monospace; }

/* subtle grid backdrop for hero */
.shm-grid-bg {
  background-image:
    linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 75%);
}

/* animations */
@keyframes shm-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.shm-reveal { opacity: 0; animation: shm-reveal .6s cubic-bezier(.2,.7,.2,1) forwards; }

@keyframes shm-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.shm-pop { animation: shm-pop .2s ease-out; }

@keyframes shm-slide { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.shm-slide { animation: shm-slide .25s ease-out; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

input[type=range] { height: 6px; border-radius: 3px; }

button { cursor: pointer; }
select option { background: #0f172a; }
</parameter>