:root{color-scheme:dark;--cyan:#82fff5;--violet:#a68bff;--pink:#fb76cc;--diameter:min(66vw,76svh,850px)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080411}.portal{position:relative;width:100%;height:100%;height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 43%,#38205655 0,#10081f 44%,#07050d 76%)}.portal__haze{position:absolute;inset:-15%;background:radial-gradient(ellipse at 30% 40%,#ad39ff24,transparent 35%),radial-gradient(ellipse at 70% 57%,#00f7ed17,transparent 33%);animation:haze 18s ease-in-out infinite alternate}.portal__grid{position:absolute;inset:53% -60% -100%;background-image:linear-gradient(#9179c42b 1px,transparent 1px),linear-gradient(90deg,#9179c42b 1px,transparent 1px);background-size:70px 70px;transform:perspective(400px) rotateX(63deg);transform-origin:50% 0;mask-image:linear-gradient(transparent,#000 18%,transparent 67%);animation:grid-drift 8s linear infinite}.portal__aperture,.portal__orbit,.portal__reticle,.portal__crosshair{position:absolute;left:50%;top:46%;width:var(--diameter);height:var(--diameter);translate:-50% -50%}.portal__aperture{z-index:2;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#372057,#100921 72%);border:1px solid #a7fff67a;box-shadow:0 0 32px #5edddc16,0 0 150px #a15dff24,inset 0 0 70px #05010c;mask-image:radial-gradient(circle,#000 69%,#000b 70%,transparent 71%)}.portal__subject{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:saturate(.65) contrast(1.12) brightness(.8);scale:1.025;animation:subject-drift 20s ease-in-out infinite alternate}.portal__tint{position:absolute;inset:0;background:linear-gradient(125deg,#ad5dff4d,transparent 48%,#5dfae744);mix-blend-mode:screen;box-shadow:inset 0 0 110px 20px #09021588}.portal__sweep{position:absolute;inset:0;background:linear-gradient(transparent 46%,#92fff31a 49.6%,#b4fff77a 50%,#92fff314 50.8%,transparent 54%);translate:0 -110%;animation:sweep 9s linear infinite;mix-blend-mode:screen}.portal__orbit{z-index:3;pointer-events:none;border-radius:50%;border:1px solid #c3acf12e}.portal__orbit--outer{width:calc(var(--diameter) + 80px);height:calc(var(--diameter) + 80px);background:repeating-conic-gradient(from 0deg,#ae9bd599 0deg .14deg,transparent .14deg 3deg);mask-image:radial-gradient(transparent 68.2%,#000 68.5%,#000 69.2%,transparent 69.5%);animation:orbit 110s linear infinite}.portal__orbit--inner{width:calc(var(--diameter) + 22px);height:calc(var(--diameter) + 22px);border:2px solid transparent;border-top-color:#83fff1b0;border-bottom-color:#b091ff66;box-shadow:0 0 22px #9a76f90a;animation:orbit 36s linear infinite reverse}.portal__reticle{z-index:4;width:calc(var(--diameter) + 58px);height:calc(var(--diameter) + 58px);pointer-events:none}.portal__reticle i{position:absolute;width:22px;height:22px;border-color:var(--cyan);border-style:solid;filter:drop-shadow(0 0 5px #74f7e988)}.portal__reticle i:nth-child(1){top:13%;left:13%;border-width:1px 0 0 1px}.portal__reticle i:nth-child(2){top:13%;right:13%;border-width:1px 1px 0 0}.portal__reticle i:nth-child(3){bottom:13%;left:13%;border-width:0 0 1px 1px}.portal__reticle i:nth-child(4){bottom:13%;right:13%;border-width:0 1px 1px 0}.portal__crosshair{z-index:4;display:grid;place-items:center;pointer-events:none;opacity:.42;color:#c1ffef;font:300 52px monospace;text-shadow:0 0 12px #baffef99}.portal__coordinates{position:absolute;left:0;right:0;text-align:center;font:12px/1 monospace;letter-spacing:12px;color:#be9bdf77;white-space:nowrap}.portal__coordinates--top{top:32px}.portal__coordinates--bottom{bottom:29px;color:#7feddf77}.portal__rail{position:absolute;top:18%;bottom:22%;width:17px;overflow:hidden;color:#987fb77a;font:11px/17px monospace;writing-mode:vertical-rl;white-space:nowrap;letter-spacing:9px}.portal__rail span{display:block;animation:rail 35s linear infinite}.portal__rail--left{left:6%}.portal__rail--right{right:6%;color:#75b8b77a;rotate:180deg}.portal__spectrum{position:absolute;z-index:4;left:50%;bottom:10%;translate:-50% 0;width:min(310px,45vw);height:24px;display:flex;align-items:center;justify-content:center;gap:5px;opacity:.72}.portal__spectrum i{width:2px;height:var(--h,13px);background:linear-gradient(var(--violet),var(--cyan));box-shadow:0 0 6px #75edd133;animation:spectrum 2.4s ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.portal__spectrum i:nth-child(3n){--h:22px;--delay:-.9s}.portal__spectrum i:nth-child(3n + 1){--h:8px;--delay:-1.7s}.portal__spectrum i:nth-child(4n){--h:17px;--delay:-.3s}.portal__grain{position:absolute;z-index:5;inset:0;pointer-events:none;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 3px,#a18cbb25 3px 4px)}.portal__corner{position:absolute;font:36px/1 monospace;color:#ad8ac77a}.portal__corner--tl{top:22px;left:24px}.portal__corner--tr{top:22px;right:24px}.portal__corner--bl{bottom:20px;left:24px}.portal__corner--br{bottom:20px;right:24px}.portal.is-paused *{animation-play-state:paused!important}@keyframes orbit{to{rotate:360deg}}@keyframes sweep{to{translate:0 110%}}@keyframes subject-drift{to{scale:1.08;translate:0 -1%}}@keyframes grid-drift{to{background-position:0 70px}}@keyframes haze{to{translate:3% -2%;scale:1.06}}@keyframes spectrum{to{scale:1 .3;opacity:.35}}@keyframes rail{to{translate:0 -50%}}@media(max-width:650px){:root{--diameter:min(77vw,63svh)}.portal__coordinates{font-size:9px;letter-spacing:7px}.portal__coordinates--top{top:28px}.portal__coordinates--bottom{bottom:25px}.portal__orbit--outer{width:calc(var(--diameter) + 48px);height:calc(var(--diameter) + 48px)}.portal__rail--left{left:4%}.portal__rail--right{right:4%}.portal__rail{top:14%;bottom:18%;font-size:9px;opacity:.7}.portal__spectrum{bottom:14%}.portal__corner{font-size:28px}.portal__corner--tl,.portal__corner--bl{left:16px}.portal__corner--tr,.portal__corner--br{right:16px}}@media(max-height:500px) and (min-width:651px){:root{--diameter:68svh}.portal__coordinates{font-size:9px;top:16px}.portal__coordinates--bottom{top:auto;bottom:15px}.portal__spectrum{bottom:5%;height:13px}}@media(prefers-reduced-motion:reduce){.portal *{animation:none!important}.portal__sweep{display:none}.portal__subject{scale:1.025}.portal__grid{background-position:0 0}}