*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;min-height:100vh;
 background:radial-gradient(ellipse at 50% 17%,
 #312450 0%,var(--night,#111329) 45%,
 var(--void,#090b17) 85%);
 color:var(--text,#f4f1ff);
 font-family:var(--font,system-ui,sans-serif);
}
button,input{font:inherit}
button{cursor:pointer}
.topbar{
 display:flex;align-items:center;
 justify-content:space-between;
 padding:22px 20px;
 border-bottom:1px solid #ffffff18;
}
.brand{letter-spacing:3px;font-size:14px}
.status{color:var(--cyan,#80dce4);font-size:11px}
main{max-width:1100px;margin:auto;padding:25px 20px}
.hero{text-align:center}
.eyebrow{font-size:11px;letter-spacing:3px;color:var(--violet)}
.portal{
 width:230px;height:230px;margin:20px auto;
 display:grid;place-items:center;position:relative;
 filter:drop-shadow(0 0 30px #9574ff55);
}
.ring{
 position:absolute;width:145px;height:195px;
 border:2px solid #b4a1ff;border-radius:50%;
 box-shadow:0 0 24px #9c83ff77;
 animation:spin 16s linear infinite;
}
.ring-two{animation-duration:22s;transform:rotate(60deg);opacity:.6}
.ring-three{animation-duration:28s;transform:rotate(120deg);opacity:.4}
.portal-core{font-size:65px;color:#f6f0ff;z-index:2;text-shadow:0 0 25px #c0aaff}
@keyframes spin{to{transform:rotate(360deg)}}
h1{font-size:clamp(34px,7vw,64px);letter-spacing:-2px;margin:12px 0}
.subtitle,.notice{color:var(--muted,#b4b0cc)}
.subtitle{font-size:15px}
.notice{font-size:11px}
.command{
 display:flex;gap:8px;align-items:center;
 max-width:650px;margin:28px auto 12px;
 background:#17182ddc;border:1px solid #8878bb;
 padding:8px;border-radius:19px;
}
.command input{
 flex:1;min-width:0;padding:13px;
 border:0;outline:0;color:white;background:none;
}
.command button,#return-gate{
 border:0;border-radius:12px;padding:13px 17px;
 background:linear-gradient(135deg,#b5a2ff,#7962d9);
 color:#100e22;font-weight:700;
}
.worlds-section h2{
 font-size:12px;letter-spacing:2px;
 margin:43px 0 17px;color:#d8d2ff;
}
.world-grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:12px;
}
.world-grid button{
 text-align:left;min-height:140px;
 padding:20px 15px;
 border:1px solid #ffffff22;border-radius:18px;
 background:linear-gradient(145deg,#272441,#151728);
 color:white;font-size:28px;
}
.world-grid strong,.world-grid small{display:block}
.world-grid strong{font-size:14px;margin-top:13px}
.world-grid small{font-size:11px;color:var(--muted);margin-top:5px}
.world-grid button:focus-visible,
button:focus-visible,input:focus-visible{
 outline:3px solid var(--cyan,#80dce4);
 outline-offset:3px;
}
.mission{
 margin-top:28px;padding:23px;
 border:1px solid #44405f;border-radius:20px;
 background:#17192e;
}
.mission h2{font-size:18px;margin-top:0}
.mission p{line-height:1.7;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
footer{text-align:center;padding:40px;color:#8681a8;font-size:11px}
@media(min-width:700px){
 .world-grid{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){
 .ring{animation:none}
 html{scroll-behavior:auto}
}