#surface-reactions{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:1;transition:opacity .45s ease}
#surface-reactions.surface-fade{opacity:0}
.surface-key{position:absolute;z-index:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;color:#cce8d8;opacity:0;transition:opacity .5s ease;pointer-events:auto;touch-action:manipulation}
.surface-key-mark{display:block;margin:auto;width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:0 0 8px #a6e1dc66}
.surface-key:is(:hover,:focus-visible){opacity:1;background:none}
.surface-key:focus-visible{outline:1px solid #b4e3d3;outline-offset:3px}
.surface-key[data-surface="sand"]{color:#ead5ad}
@media(prefers-reduced-motion:reduce){#surface-reactions,.surface-key{transition:none}}
html[data-motion="off"] #surface-reactions,html[data-motion="off"] .surface-key{transition:none}

.introduction{z-index:1}
@media(max-width:760px){.surface-key[data-surface="sky"]{z-index:6}}