:root[data-theme=dark]{--bg:#111213;--surface:#1a1c1e;--ink:#f5f5f5;--muted:#a3a5a8;--line:#303234;--button:#f4f4f4;--button-ink:#111;--header:17,18,19}
.hero{user-select:none}
.hero canvas{opacity:.68;pointer-events:none}
:root[data-theme=light] .hero canvas{opacity:.72}
body .contact-surface{position:relative;--contact-level:0;--contact-rx:0deg;--contact-ry:0deg;--contact-lift:0px;--contact-shadow-x:0px;transform:perspective(850px) translateY(var(--contact-lift)) rotateX(var(--contact-rx)) rotateY(var(--contact-ry));transform-origin:center;box-shadow:var(--contact-shadow-x) 12px 25px -12px rgba(0,0,0,calc(var(--contact-level)*.3));transition:box-shadow 120ms ease,background-color 150ms ease;backface-visibility:hidden}
body .contact-surface:hover{transform:perspective(850px) translateY(var(--contact-lift)) rotateX(var(--contact-rx)) rotateY(var(--contact-ry))}
body .contact-surface[data-contact-pressed=true]{box-shadow:inset 0 2px 8px rgba(0,0,0,.12),var(--contact-shadow-x) 3px 12px -7px rgba(0,0,0,.25)}
body .contact-surface:focus-visible{outline:2px solid #8ebff0;outline-offset:5px}
:root[data-reduced=true] body .contact-surface{transform:none!important}
@media(hover:none){body .contact-surface{transform:none!important}.contact-surface{touch-action:auto}}