:root{
 --bg:#080d1b;
 --panel:#111a2e;
 --panel2:#17233b;
 --line:#293653;
 --text:#edf3ff;
 --muted:#a2b2d1;
 --mint:#9cf5d9;
 --violet:#b4a4ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:var(--bg);color:var(--text);
 font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 line-height:1.6
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{
 outline:3px solid var(--mint);outline-offset:4px
}
.skip{position:absolute;top:-100px;left:12px;background:white;color:black;padding:12px;z-index:100}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.site-header{
 position:relative;z-index:5;display:flex;justify-content:space-between;
 align-items:center;gap:20px;padding:24px max(5vw,24px);
 border-bottom:1px solid var(--line);background:#0c1325
}
.brand{font-size:23px;font-weight:900;letter-spacing:-.04em}
.brand small{display:block;font-size:9px;letter-spacing:.3em;color:var(--muted)}
.site-header nav{display:flex;gap:22px;flex-wrap:wrap}
.site-header nav a{font-size:13px;color:#c7d6f4}
.site-header nav a:hover,.footer-links a:hover{color:var(--mint)}
.hero{
 min-height:690px;position:relative;overflow:hidden;
 padding:115px max(5vw,24px) 75px;
 background:radial-gradient(circle at 83% 35%,#202044 0%,transparent 43%),
 radial-gradient(circle at 18% 90%,#103a3d 0%,transparent 40%);
}
.hero>*:not(.orbit){position:relative;z-index:2}
.eyebrow{
 color:var(--mint);font-size:11px;font-weight:800;
 letter-spacing:.24em;text-transform:uppercase
}
.live-dot{
 display:inline-block;width:9px;height:9px;border-radius:50%;
 background:var(--mint);margin-right:9px;box-shadow:0 0 18px var(--mint)
}
h1,h2,h3,p{margin-top:0}
.hero h1{
 font-size:clamp(58px,8vw,132px);
 line-height:.98;letter-spacing:-.085em;
 max-width:1050px;margin:30px 0
}
.hero h1 span{
 background:linear-gradient(90deg,#9df7d7,#a8c8ff,#d8a7eb);
 color:transparent;background-clip:text
}
.hero-sub{font-size:clamp(17px,2vw,23px);color:var(--muted);max-width:720px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:40px 0}
.button{
 border:1px solid var(--line);border-radius:12px;padding:17px 23px;
 font-weight:800;font-size:13px;background:var(--panel2);
 color:var(--text);display:inline-block;transition:transform .2s,background .2s
}
.button:hover{transform:translateY(-3px);background:#253453}
.button.primary{background:var(--mint);color:#08131b;border-color:var(--mint)}
.hero-foot{display:flex;gap:25px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.orbit{
 position:absolute;right:-170px;top:35px;border:1px solid #6c82b23d;
 width:680px;height:680px;border-radius:50%;pointer-events:none
}
.orbit-two{right:-80px;top:130px;width:470px;height:470px;border-color:#a9f5df35}
.section{padding:95px max(5vw,24px)}
.section-heading{
 display:flex;justify-content:space-between;align-items:end;
 gap:20px;margin-bottom:32px;flex-wrap:wrap
}
.section-heading h2,.atlas-callout h2{font-size:clamp(34px,4.5vw,65px);letter-spacing:-.06em;line-height:1.05;margin:12px 0}
.section-heading p,.section-heading a{color:var(--muted)}
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.category-card{
 display:flex;flex-direction:column;gap:12px;min-height:245px;
 background:linear-gradient(145deg,#16223a,#0f172a);
 border:1px solid var(--line);border-radius:18px;padding:28px;
 transition:transform .2s,border-color .2s
}
.category-card:hover{transform:translateY(-5px);border-color:var(--mint)}
.category-symbol{font-size:35px;color:var(--mint)}
.category-card strong{font-size:23px;letter-spacing:-.03em}
.category-card span:not(.category-symbol){color:var(--muted);font-size:14px}
.category-card b{margin-top:auto;color:var(--mint);font-size:12px}
.search{
 width:100%;background:#152039;color:white;
 border:1px solid #344360;border-radius:13px;
 padding:20px;margin-bottom:15px
}
.search-count{font-size:12px;color:var(--muted);margin-bottom:25px}
.world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.world-card{
 background:var(--panel);border:1px solid var(--line);
 border-radius:16px;padding:24px;display:flex;flex-direction:column;
 min-height:240px;overflow-wrap:anywhere
}
.card-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tag,.status{font-size:10px;letter-spacing:.1em;color:var(--mint);text-transform:uppercase}
.status{color:#8396b9}
.world-card h3{font-size:22px;line-height:1.2;margin:23px 0 10px}
.world-card p{font-size:14px;color:var(--muted)}
.card-link{margin-top:auto;font-size:12px;font-weight:900;color:var(--mint)}
.atlas-callout{
 display:flex;align-items:center;justify-content:space-between;gap:35px;
 margin:40px max(5vw,24px) 100px;padding:65px;
 background:linear-gradient(125deg,#1d2444,#123638);
 border:1px solid #415776;border-radius:24px
}
.atlas-callout p{max-width:600px;color:#c4d5eb}
.collection-hero{
 padding:100px max(5vw,24px) 75px;
 background:radial-gradient(circle at 85% 20%,#27305b,transparent 55%)
}
.collection-hero h1{font-size:clamp(50px,7vw,95px);letter-spacing:-.07em;line-height:1}
.collection-hero p{font-size:20px;color:var(--muted);max-width:780px}
.collection-count{color:var(--mint);font-size:13px}
.prose{max-width:1000px}
.prose p{font-size:19px;color:var(--muted)}
.prose a{color:var(--mint)}
.next-links{padding:40px max(5vw,24px) 90px}
.next-links a{display:inline-block;margin:10px 22px 10px 0;color:var(--mint)}
footer{
 border-top:1px solid var(--line);padding:45px max(5vw,24px);
 display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap
}
footer p{color:var(--muted);max-width:480px}
.footer-links{display:flex;flex-direction:column;gap:10px;font-size:13px}
@media(max-width:950px){
 .category-grid,.world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .site-header{align-items:flex-start;flex-direction:column}
 .atlas-callout{padding:35px;flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
 .category-grid,.world-grid{grid-template-columns:1fr}
 .hero{padding-top:85px;min-height:620px}
 .hero h1{font-size:clamp(54px,13vw,80px)}
 .hero-actions{flex-direction:column;align-items:stretch}
 .button{text-align:center}
 .section{padding-top:65px;padding-bottom:65px}
 .orbit{opacity:.3}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}