.gen-intro{position:fixed;inset:0;z-index:1000;background:#090e16;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .45s ease;overflow:hidden;color:#eaf0fa}
.gen-intro.intro-leaving{opacity:0;pointer-events:none}
.intro-mark{width:min(790px,90vw);perspective:1100px;transform:translateY(-15px)}
.intro-mark svg{width:100%;overflow:visible;filter:drop-shadow(0 25px 30px #0008);animation:intro-turn 2.2s cubic-bezier(.2,.7,.2,1) both}
.intro-mark text{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:270px;letter-spacing:-20px}
.intro-wire{fill:none;stroke:#8ab0ff;stroke-width:1.3;stroke-dasharray:1600;animation:intro-draw 1.3s ease-out both,intro-wire-out .6s 1.6s forwards}
.intro-back{fill:none;stroke:#527bc4;stroke-width:.7;transform:translate(24px,-16px);animation:intro-back-in 1s both}
.intro-grid{opacity:0;animation:intro-grid-in 1.6s .25s both}
.intro-depth{fill:#2b4165;stroke:#6890c0;stroke-width:.35;opacity:0;animation:intro-solid 1s .8s ease both}
.intro-face{fill:url(#intro-face);stroke:#f4f7ff;stroke-width:.45;opacity:0;animation:intro-solid 1s 1.1s ease both}
.intro-caption{font-size:11px;letter-spacing:.16em;color:#8998ae;margin:0;animation:intro-caption-in .7s .3s both}
.intro-skip{position:absolute;bottom:max(35px,env(safe-area-inset-bottom));right:6%;background:transparent;border:0;border-bottom:1px solid #566276;color:#b9c4d4;padding:12px 0;font-size:11px;cursor:pointer}
.intro-skip:focus-visible{outline:2px solid #8ab0ff;outline-offset:6px}
@keyframes intro-draw{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@keyframes intro-turn{from{transform:rotateY(-22deg) rotateX(9deg) scale(.94)}to{transform:rotateY(-5deg) rotateX(2deg) scale(1)}}
@keyframes intro-solid{from{opacity:0}to{opacity:1}}
@keyframes intro-wire-out{to{opacity:0}}
@keyframes intro-back-in{from{opacity:0}to{opacity:.65}}
@keyframes intro-grid-in{0%{opacity:0}35%,65%{opacity:.85}100%{opacity:0}}
@keyframes intro-caption-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.gen-intro{display:none}}
/* Center the visible glyph bounds, independently of caption and extrusion. */
.intro-mark{position:absolute;left:50%;top:50%;width:min(720px,86vw);transform:translate(-50%,-50%);perspective:1200px}
.intro-mark svg{display:block;transform-origin:50% 50%;animation:intro-turn 2.6s cubic-bezier(.22,.65,.25,1) both;filter:drop-shadow(0 18px 24px #0005)}
.intro-caption{position:absolute;left:0;right:0;text-align:center;top:calc(50% + min(170px,24vw));margin:0}
.intro-depth{animation:intro-solid .9s .8s ease both}
.intro-depth>g{animation:intro-assemble 2.6s cubic-bezier(.22,.65,.25,1) both;transform-origin:center}
.intro-back{animation:intro-back-in .6s both,intro-wire-out .45s 2s forwards}
.intro-face{animation:intro-solid .9s 1.15s ease both}
@keyframes intro-turn{0%{transform:rotateY(-105deg) rotateX(14deg) rotateZ(-7deg) scale(.82)}55%{transform:rotateY(22deg) rotateX(-5deg) rotateZ(2deg) scale(1)}82%,100%{transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1)}}
@keyframes intro-assemble{0%{transform:translate(60px,-36px);opacity:0}35%{opacity:1}60%{transform:translate(15px,-10px)}82%,100%{transform:translate(0,0);opacity:1}}