:root{--portal-bg: #050505;--portal-grid: rgba(115, 128, 151, .12);background:var(--portal-bg);color:#f5f7fb;font-family:Courier New,Courier,monospace}*,*:before,*:after{box-sizing:border-box}html,body{min-width:320px;margin:0;background:var(--portal-bg);color:#f5f7fb}body{overflow-x:hidden}button,input,textarea,select{font:inherit}.portal-runtime{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 22%,rgba(0,68,255,.16),transparent 24rem),radial-gradient(circle at 80% 18%,rgba(136,0,255,.07),transparent 22rem),radial-gradient(circle at 18% 68%,rgba(0,255,0,.05),transparent 18rem),linear-gradient(180deg,#030406,#06070b 38%,#080b12)}.portal-defs{position:absolute;width:0;height:0;overflow:hidden}.portal-backdrop,.portal-backdrop__grid,.portal-backdrop__haze,.portal-backdrop__noise,.portal-backdrop__beam{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.portal-backdrop{z-index:0}.portal-backdrop__grid{background:linear-gradient(var(--portal-grid) 1px,transparent 1px),linear-gradient(90deg,var(--portal-grid) 1px,transparent 1px),linear-gradient(30deg,transparent 49.8%,rgba(255,255,255,.025) 50%,transparent 50.2%);background-size:92px 92px,92px 92px,280px 280px;-webkit-mask-image:radial-gradient(circle at 50% 48%,rgba(0,0,0,.86),transparent 68%);mask-image:radial-gradient(circle at 50% 48%,rgba(0,0,0,.86),transparent 68%);opacity:.68}.portal-backdrop__haze{background:linear-gradient(180deg,transparent 0 12%,rgba(255,255,255,.028) 12.15%,transparent 12.4%),linear-gradient(180deg,transparent 0 40%,rgba(0,68,255,.034) 40.2%,transparent 40.55%),linear-gradient(90deg,rgba(0,0,0,.56),transparent 28%,transparent 72%,rgba(0,0,0,.62));animation:portal-haze 7s ease-in-out infinite alternate}.portal-backdrop__noise{background-image:radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1.2px),radial-gradient(circle,rgba(0,68,255,.18) 0 1px,transparent 1.2px);background-size:140px 140px,210px 210px;background-position:0 0,35px 45px;-webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0 44rem,transparent 70rem);mask-image:radial-gradient(circle at 50% 42%,#000 0 44rem,transparent 70rem);opacity:.14;animation:portal-noise-drift 18s linear infinite}.portal-backdrop__beam{width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);filter:blur(.4px);opacity:.32}.portal-backdrop__beam--left{left:29%;transform:rotate(18deg);transform-origin:top center}.portal-backdrop__beam--right{left:71%;transform:rotate(-18deg);transform-origin:top center}.portal-stage-shell{position:relative;z-index:1;display:grid;min-height:100vh;grid-template-rows:auto auto auto auto;align-items:center;gap:1rem;padding:clamp(1rem,2vw,2rem);outline:none}.portal-copy-wells{display:grid;justify-items:center;gap:.85rem;padding-top:clamp(.2rem,1.5vw,1rem)}.copy-well,.portal-lore-band__plate,.portal-footer__plate,.status-strip__label,.status-strip__value,.portal-nameplate__slot{position:relative}.copy-well{width:min(78vw,26rem);height:.95rem;border:1px solid rgba(110,119,130,.22);background:linear-gradient(180deg,#12151cd6,#07090ce6),repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 12px);box-shadow:inset 0 1px #ffffff0b}.copy-well:after,.portal-lore-band__plate:after,.portal-footer__plate:after,.status-strip__label:after,.status-strip__value:after,.portal-nameplate__slot:after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);opacity:.42}.copy-well--short{width:min(38vw,10rem)}.copy-well--medium{width:min(62vw,17rem)}.copy-well.has-copy,.portal-lore-band__plate.has-copy,.portal-footer__plate.has-copy{display:grid;align-items:center;min-height:1rem;height:auto;padding:.9rem 1rem;color:#f5f7fbe6;font-size:.88rem;line-height:1.5}.portal-stage{perspective:1400px;width:100%;height:70vh;min-height:32rem;position:relative;overflow:hidden}#portals{position:relative;width:100%;height:100%;transform-style:preserve-3d}.portal{position:absolute;top:50%;left:50%;transform-style:preserve-3d;transition:transform .6s ease,opacity .6s ease;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:min(28rem,86vw);padding:0;border:0;background:transparent;color:inherit;will-change:transform,opacity}.portal.center{transform:translate(-50%,-50%) scale(1) rotateY(0);z-index:3;opacity:1}.portal.left{transform:translate(calc(-50% - 19rem),-50%) scale(.8) rotateY(40deg);z-index:2;opacity:.8}.portal.right{transform:translate(calc(-50% + 19rem),-50%) scale(.8) rotateY(-40deg);z-index:2;opacity:.8}.portal.hidden{opacity:0;transform:translate(-50%,-50%) scale(.5);pointer-events:none}.portal:focus-visible{outline:1px solid rgba(255,255,255,.48);outline-offset:8px}.portal.glitching{animation:portal-jitter .2s infinite}.portal-shadow{position:absolute;bottom:2.2rem;width:min(18rem,56vw);height:3.8rem;background:radial-gradient(ellipse at center,rgba(110,231,255,.22),transparent 58%),radial-gradient(ellipse at center,rgba(255,170,84,.1),transparent 72%);filter:blur(28px);opacity:.74;transform:translateY(2.8rem)}.portal-visual{position:relative;width:min(24rem,76vw);aspect-ratio:1 / 1.14;pointer-events:none;filter:drop-shadow(0 0 18px rgba(109,215,255,.12)) drop-shadow(0 0 48px rgba(152,105,255,.08))}.portal-visual:before{position:absolute;top:8%;right:10%;bottom:12%;left:10%;content:"";background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.06),transparent 40%),radial-gradient(circle at 50% 58%,rgba(109,215,255,.09),transparent 54%);filter:blur(18px);opacity:.66;pointer-events:none}.portal-visual.is-glitching{filter:url(#digitalShred) contrast(1.35) brightness(1.45)}.portal-canvas{display:block;width:100%!important;height:100%!important}.portal-nameplate{display:grid;justify-items:center;gap:.55rem;width:min(20rem,70vw);padding:.85rem 1rem .9rem;border:1px solid rgba(110,119,130,.28);border-radius:.8rem;background:linear-gradient(180deg,#12151cdb,#080a0eeb),repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 14px);box-shadow:inset 0 1px #ffffff0a,0 14px 36px #00000042}.portal-name{color:#f5f7fbf5;font-size:clamp(.95rem,1.6vw,1.16rem);font-weight:700;letter-spacing:.12em;line-height:1.35;text-align:center;text-transform:uppercase}.portal-nameplate__slot{width:min(12rem,52vw);height:.28rem;border:1px solid rgba(110,119,130,.2);background:#0b0d12f2}.dial-container{display:flex;justify-content:center;align-items:center;margin-top:-1.2rem}#dial{position:relative;width:min(12rem,38vw);aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid rgba(110,119,130,.3);background:radial-gradient(circle at 50% 50%,#bc8eff61,#59abff1f 18%,#0a0b0ffa 30%),repeating-conic-gradient(from 0deg,rgba(255,255,255,.05) 0deg 6deg,transparent 6deg 14deg),radial-gradient(circle at 50% 44%,rgba(208,169,86,.12),transparent 52%),linear-gradient(180deg,#1a1d25f5,#0a0b0ffa);box-shadow:inset 0 1px #ffffff0d,0 22px 52px #00000047}#dial:active{cursor:grabbing}#dial:before,#dial:after{position:absolute;content:""}#dial:before{top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;border:1px solid rgba(164,130,88,.38);box-shadow:inset 0 0 0 1px #ffffff08}#dial:after{left:50%;top:10%;width:.16rem;height:14%;transform:translate(-50%);background:linear-gradient(180deg,#f5f7fbd1,#6dd7ff3d)}.status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;width:min(94vw,62rem);margin:0 auto 1rem}.status-strip__plate{padding:.9rem .85rem;border:1px solid rgba(110,119,130,.24);background:linear-gradient(180deg,#12151cc2,#080a0eeb),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 13px)}.status-strip__label,.status-strip__value{display:block;width:100%;border:1px solid rgba(110,119,130,.16);background:#07090cf5}.status-strip__label{height:.36rem;margin-bottom:.65rem}.status-strip__value{height:.62rem}.status-strip__label:not(:empty),.status-strip__value:not(:empty){height:auto;padding:.4rem .55rem;color:#f5f7fbe6;font-size:.72rem;line-height:1.35;text-transform:uppercase}.portal-lore-band,.portal-footer{position:relative;z-index:1;padding-inline:clamp(1rem,2vw,2rem)}.portal-lore-band{padding-bottom:1.1rem}.portal-footer{padding-bottom:1.2rem}.portal-lore-band__plate,.portal-footer__plate{width:min(90vw,58rem);height:1.05rem;margin:0 auto;border:1px solid rgba(110,119,130,.22);background:linear-gradient(180deg,#12151ccc,#07090cf0),repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 16px)}.portal-footer__plate{width:min(90vw,46rem)}@keyframes portal-haze{0%{opacity:.66}to{opacity:.9}}@keyframes portal-noise-drift{0%{background-position:0 0,35px 45px}to{background-position:140px 140px,245px 255px}}@keyframes portal-jitter{0%{transform:translate(-50%,-50%) scale(1.02)}50%{transform:translate(calc(-50% - .12rem),calc(-50% + .08rem)) scale(.99)}to{transform:translate(-50%,-50%) scale(1)}}@media(max-width:1100px){.portal.left{transform:translate(calc(-50% - 15rem),-50%) scale(.8) rotateY(40deg)}.portal.right{transform:translate(calc(-50% + 15rem),-50%) scale(.8) rotateY(-40deg)}}@media(max-width:900px){.portal-stage-shell{gap:.85rem;padding-top:1.4rem}.portal-stage{height:62vh;min-height:26rem}.portal{width:min(22rem,90vw)}.portal-visual{width:min(20rem,74vw)}.portal.left{transform:translate(calc(-50% - 11rem),-50%) scale(.76) rotateY(40deg)}.portal.right{transform:translate(calc(-50% + 11rem),-50%) scale(.76) rotateY(-40deg)}.status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.portal-stage-shell{min-height:auto}.portal-copy-wells{gap:.65rem}.portal-stage{height:54vh;min-height:23rem}.portal{width:min(17rem,92vw)}.portal-visual{width:min(15.5rem,82vw)}.portal.left{transform:translate(calc(-50% - 8rem),-50%) scale(.72) rotateY(40deg)}.portal.right{transform:translate(calc(-50% + 8rem),-50%) scale(.72) rotateY(-40deg)}.portal-nameplate{width:min(10.5rem,44vw);padding-inline:.5rem}.portal.center .portal-nameplate{width:min(18rem,72vw);padding-inline:1rem}.portal-name{font-size:.64rem;letter-spacing:.07em}.portal.center .portal-name{font-size:.9rem;letter-spacing:.09em}#dial{width:min(10rem,36vw)}.status-strip{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html.portal-reduced-motion .portal-backdrop__haze,html.portal-reduced-motion .portal-backdrop__noise,html.portal-reduced-motion .portal,html.portal-reduced-motion .portal.glitching{animation:none!important;transition-duration:.01ms!important}}
