body{background:#fdfaf5;color:#1a1a1a;transition:background-color .4s ease,color .4s ease,opacity .3s ease}
.symbol{width:64px;height:70px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.symbol::after{content:attr(aria-label);position:absolute;top:44px;white-space:nowrap;font:400 .9rem Georgia,serif;color:white;opacity:0;transition:opacity .4s ease;pointer-events:none}
.symbol:hover::after,.symbol.is-leaving::after{opacity:1}
body.dark-mode{background:#000;color:#fff}
body.dark-mode .symbol .glyph img{filter:brightness(0) invert(1)!important}
.glyph{position:relative;display:block;width:36px;height:36px;transform-origin:center}
.symbol .glyph img{position:absolute;inset:0;width:36px;height:36px;filter:brightness(0)!important;transform-origin:center}
.symbol:focus-visible{outline:1px solid #9d9280;outline-offset:6px}
.vessels .ring{clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%,0% 0%,38% 38%,62% 38%,62% 62%,38% 62%,38% 38%,0% 0%)}
.vessels .centre{clip-path:inset(38%)}
.ripple{position:absolute;inset:3px;border:1px solid currentColor;border-radius:50%;opacity:0}
.stroke-one{clip-path:inset(0 0 64%)}
.stroke-two{clip-path:inset(36% 0 32%)}
.stroke-three{clip-path:inset(68% 0 0)}
.myth.is-moving .glyph{animation:myth-turn .85s cubic-bezier(.4,0,.2,1) both}
.vessels.is-moving .ring{animation:vessel-open .8s ease both}
.vessels.is-moving .ripple{animation:ripple .85s ease both}
.pulse.is-moving .stroke{animation:pulse-stroke .5s ease both}
.pulse.is-moving .stroke-two{animation-delay:.12s}.pulse.is-moving .stroke-three{animation-delay:.24s}
.sound.is-moving .glyph{animation:sound-breath .9s ease both}
.symbol.is-leaving .glyph{animation:departure .65s cubic-bezier(.4,0,.2,1) both}
.myth.is-leaving .glyph{animation:myth-departure .65s ease both}
.vessels.is-leaving .ring{animation:ring-departure .65s ease both}
.pulse.is-leaving .glyph{animation:none}
body.leaving{opacity:0}
@keyframes myth-turn{0%{transform:rotate(0)}75%,100%{transform:rotate(45deg)}}
@keyframes vessel-open{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@keyframes ripple{0%{opacity:0;transform:scale(.9)}25%{opacity:.3}100%{opacity:0;transform:scale(1.65)}}
@keyframes pulse-stroke{0%,100%{transform:translateY(0);opacity:1}45%{transform:translateY(2px);opacity:.4}}
@keyframes sound-breath{0%,100%{transform:scale(1,1)}35%{transform:scale(1.12,.94)}70%{transform:scale(.96,1.1)}}
@keyframes departure{0%{transform:scale(1)}65%,100%{transform:scale(1.25)}}
@keyframes myth-departure{to{transform:rotate(45deg) scale(1.2)}}
@keyframes ring-departure{to{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){body{transition:none}.symbol .glyph,.symbol img,.symbol .ripple{animation:none!important}}