.dimension-passage[open]{position:fixed;inset:0;margin:0;padding:0;width:100%;max-width:none;height:100dvh;max-height:none;display:block;overflow:hidden;border:0;border-radius:0;background:transparent;color:#f4faff;isolation:isolate;box-shadow:none;--dimension-color:#75ddff}.dimension-passage::backdrop{background:transparent}.dimension-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,#03091860,#020511dd 75%);animation:dimension-veil 1650ms ease both}.dimension-tunnel{position:absolute;left:50%;top:48%;width:min(65vmin,500px);aspect-ratio:1;translate:-50% -50%;animation:dimension-cross 1650ms cubic-bezier(.2,.7,.2,1) both;pointer-events:none}.dimension-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--dimension-color);box-shadow:0 0 20px color-mix(in srgb,var(--dimension-color) 75%,transparent),inset 0 0 25px color-mix(in srgb,var(--dimension-color) 35%,transparent);background:conic-gradient(from 30deg,transparent 0 10%,color-mix(in srgb,var(--dimension-color) 55%,transparent) 14%,transparent 22% 60%,#ffffff70 66%,transparent 75%);mask-image:radial-gradient(transparent 61%,#000 64% 70%,transparent 74%);animation:dimension-spin 1650ms linear both}.dimension-ring.secondary{inset:-10%;border-style:dashed;border-width:1px;opacity:.6;animation-direction:reverse}.dimension-core{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,#ffffff0a,transparent 30%,color-mix(in srgb,var(--dimension-color) 12%,transparent) 70%);box-shadow:inset 0 0 45px color-mix(in srgb,var(--dimension-color) 25%,transparent)}.dimension-rays{position:absolute;inset:0;pointer-events:none;overflow:hidden;animation:dimension-ray-fade 1650ms ease both}.dimension-rays i{position:absolute;left:50%;top:48%;height:1px;width:13vmin;transform-origin:left center;transform:rotate(var(--angle)) translateX(var(--distance));background:linear-gradient(90deg,transparent,var(--dimension-color),#ffffffa0);animation:dimension-ray 1050ms var(--delay) cubic-bezier(.25,.1,.2,1) both}.dimension-caption{position:absolute;left:15%;right:15%;bottom:19%;text-align:center;animation:dimension-caption 1650ms ease both;pointer-events:none}.dimension-caption small{display:block;font:650 9px system-ui;letter-spacing:.3em;color:#cde9ff}.dimension-caption strong{display:block;font:750 clamp(20px,5vw,33px)/1.3 system-ui;margin-top:10px;color:#f5fbff;text-shadow:0 0 18px var(--dimension-color)}
@keyframes dimension-cross{0%{scale:.25;opacity:0}22%{scale:.8;opacity:.85}48%{scale:1.1;opacity:1}82%{scale:4;opacity:.3}100%{scale:6;opacity:0}}@keyframes dimension-spin{to{rotate:100deg}}@keyframes dimension-veil{0%,100%{opacity:0}23%,53%{opacity:1}82%{opacity:.2}}@keyframes dimension-ray{0%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scaleX(.2)}30%{opacity:.6}100%{opacity:0;transform:rotate(var(--angle)) translateX(75vmin) scaleX(3)}}@keyframes dimension-ray-fade{0%,100%{opacity:0}35%,65%{opacity:1}}@keyframes dimension-caption{0%,100%{opacity:0;translate:0 6px}25%,58%{opacity:1;translate:0 0}80%{opacity:0;translate:0 -5px}}
@media(prefers-reduced-motion:reduce){.dimension-passage *{animation:none!important}.dimension-passage .dimension-tunnel,.dimension-passage .dimension-rays{display:none}}
/* The portal is a transparent top layer, not one of the platform's glass panels. */
.dimension-passage[open]{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;border-radius:0!important}