@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";
:root{--bg:#02030a;--text:#f6f5ff;--muted:#9b9baa;--accent:#b6a5ff}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}.experience{isolation:isolate;background:#02030a;width:100%;height:100dvh;position:relative;overflow:hidden}.universe-background{z-index:0;position:absolute;inset:0}.ambient{pointer-events:none;filter:blur(100px);opacity:.16;border-radius:50%;position:absolute}.ambient-one{background:#5132bd;width:420px;height:420px;top:15%;left:35%}.ambient-two{background:#164b91;width:350px;height:350px;bottom:5%;right:5%}.topbar{z-index:20;pointer-events:none;border-bottom:1px solid #ffffff0c;justify-content:space-between;align-items:center;width:100%;height:90px;padding:0 5%;display:flex;position:absolute;top:0;left:0}.topbar>*{pointer-events:auto}.logo{align-items:baseline;gap:12px;display:flex}.logo-symbol{letter-spacing:-.09em;font-family:Space Grotesk,sans-serif;font-size:28px;font-weight:700}.logo-symbol span{color:var(--accent)}.logo-caption{letter-spacing:.2em;color:#a6a6b7;font-size:9px}.topnav{align-items:center;gap:38px;display:flex}.topnav button,.topnav a{color:#b8b8c8;background:0 0;border:none;font-size:12px;transition:color .2s}.topnav button:hover,.topnav a:hover{color:#fff}.nav-cta{border:1px solid #ffffff40;border-radius:40px;align-items:center;gap:10px;padding:12px 20px;font-size:12px;display:flex}.intro{z-index:5;pointer-events:none;width:min(420px,35vw);position:absolute;top:50%;left:7%;transform:translateY(-50%)}.intro button{pointer-events:auto}.intro-line{color:var(--accent);letter-spacing:.2em;align-items:center;gap:10px;font-size:10px;font-weight:700;display:flex}.line-dot{background:var(--accent);width:6px;height:6px;box-shadow:0 0 15px var(--accent);border-radius:50%}.intro h1{letter-spacing:-.085em;margin:27px 0;font-family:Space Grotesk,sans-serif;font-size:clamp(55px,6.2vw,110px);font-weight:600;line-height:.98}.intro h1 span{color:#0000;background:linear-gradient(110deg,#fff,#b9aaff,#7967d7);-webkit-background-clip:text;background-clip:text}.intro p{color:#b0b0c0;max-width:360px;font-size:14px;line-height:1.9}.explore-button{color:#090914;background:#f5f4ff;border:none;border-radius:40px;align-items:center;gap:18px;margin-top:28px;padding:16px 25px;font-size:12px;font-weight:700;transition:transform .25s,box-shadow .25s;display:flex}.explore-button:hover{transform:translateY(-3px);box-shadow:0 10px 40px #a79bff45}.explore-instructions{z-index:5;color:#8b8ba4;letter-spacing:.12em;pointer-events:none;align-items:center;gap:10px;font-size:10px;display:flex;position:absolute;bottom:110px;left:7%}.detail-panel{z-index:15;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:#080a17e8;border:1px solid #ffffff2a;border-radius:18px;width:340px;padding:25px;position:absolute;top:50%;right:5%;transform:translateY(-50%);box-shadow:0 25px 90px #000a}.detail-header{color:#9999b4;letter-spacing:.1em;justify-content:space-between;align-items:center;font-size:10px;display:flex}.detail-header button{color:#fff;background:0 0;border:none}.detail-orb{border-radius:50%;width:110px;height:110px;margin:35px auto}.detail-eyebrow{color:var(--accent);letter-spacing:.18em;font-size:10px;font-weight:700}.detail-panel h2{margin:12px 0;font-family:Space Grotesk,sans-serif;font-size:28px}.detail-panel p{color:#aaaabc;font-size:13px;line-height:1.8}.detail-link{color:#fff;background:0 0;border:none;align-items:center;gap:12px;margin-top:25px;font-size:12px;font-weight:700;display:flex}.bottom-bar{z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#03040b66;border-top:1px solid #ffffff12;justify-content:space-between;align-items:center;width:100%;height:80px;padding:0 5%;display:flex;position:absolute;bottom:0;left:0}.bottom-left,.bottom-right{letter-spacing:.1em;color:#a6a6b7;align-items:center;gap:10px;font-size:10px;display:flex}.status-dot{background:#72e6b1;border-radius:50%;width:6px;height:6px;box-shadow:0 0 12px #72e6b1}.bottom-center{gap:10px;display:flex}.bottom-center button{color:#9999ad;background:#ffffff08;border:1px solid #ffffff1c;border-radius:50%;width:38px;height:38px;font-size:10px;transition:all .2s}.bottom-center button:hover,.bottom-center button.active{border-color:var(--accent);color:#fff;background:#a79bff22}.project-name{display:none}.projects-overlay{z-index:30;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background:#050612f2;padding:40px 7%;position:absolute;inset:90px 0 80px;overflow-y:auto}.overlay-top{justify-content:space-between;align-items:start;margin-bottom:35px;display:flex}.overlay-top h2{letter-spacing:-.06em;margin:10px 0;font-family:Space Grotesk,sans-serif;font-size:clamp(35px,4vw,60px)}.overlay-top h2 span{color:var(--accent)}.overlay-close{color:#fff;background:#ffffff12;border:1px solid #ffffff25;border-radius:50%;width:45px;height:45px}.overlay-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;display:grid}.overlay-project{color:#fff;text-align:left;background:#ffffff08;border:1px solid #ffffff1b;border-radius:15px;flex-direction:column;justify-content:space-between;min-height:200px;padding:25px;transition:background .2s,transform .2s;display:flex}.overlay-project:hover{background:#ffffff12;transform:translateY(-4px)}.overlay-index{color:#8585a0;font-size:10px}.overlay-orb{border-radius:50%;align-self:center;width:60px;height:60px}.overlay-project small{color:var(--accent);margin-bottom:7px;font-size:10px;display:block}.overlay-project strong{font-family:Space Grotesk,sans-serif;font-size:16px}.overlay-project>svg{align-self:flex-end}@media (max-width:900px){.intro{width:45vw;left:6%}.intro h1{font-size:clamp(48px,7vw,75px)}.detail-panel{width:290px;right:3%}.overlay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:650px){.experience{min-height:100dvh}.universe-background{top:39%;bottom:calc(82px + env(safe-area-inset-bottom))}.topbar{height:calc(66px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 5% 0}.logo-caption,.topnav{display:none}.logo-symbol{font-size:26px}.nav-cta{gap:7px;min-height:42px;padding:0 15px;font-size:11px}.intro{top:calc(78px + env(safe-area-inset-top));width:auto;left:7%;right:7%;transform:none}.intro-line{letter-spacing:.16em;font-size:9px}.intro h1{margin:14px 0;font-size:clamp(42px,12.2vw,54px);line-height:.94}.intro p{max-width:310px;margin:9px 0 0;font-size:12px;line-height:1.55}.explore-button{gap:12px;min-height:46px;margin-top:15px;padding:0 18px}.explore-instructions{display:none}.detail-panel{top:auto;bottom:calc(88px + env(safe-area-inset-bottom));width:auto;max-height:38dvh;padding:16px;left:5%;right:5%;overflow-y:auto;transform:none}.detail-planet-container{display:none}.detail-panel h2{margin:10px 0 6px;font-size:21px}.detail-panel p{margin:0;font-size:12px;line-height:1.55}.detail-link{min-height:44px;margin-top:8px;padding:0}.bottom-bar{height:calc(76px + env(safe-area-inset-bottom));padding:8px 12px calc(8px + env(safe-area-inset-bottom))}.bottom-left,.bottom-right{display:none}.bottom-center{overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:8px;width:100%;min-width:0;margin:0;overflow-x:auto}.bottom-center::-webkit-scrollbar{display:none}.bottom-center button{border-radius:999px;flex:none;justify-content:center;align-items:center;width:auto;min-width:48px;height:48px;min-height:48px;padding:0 14px;font-size:12px;display:inline-flex}.project-index{display:none}.project-name{white-space:nowrap;color:#deddeb;display:inline}.bottom-center button.active .project-name{color:#fff}.bottom-center button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.projects-overlay{inset:calc(66px + env(safe-area-inset-top)) 0 calc(76px + env(safe-area-inset-bottom));overscroll-behavior:contain;padding:22px 5%}.overlay-grid{grid-template-columns:1fr}.overlay-project{min-height:130px}}@media (max-width:650px) and (max-height:700px){.universe-background{top:47%}.intro{top:calc(74px + env(safe-area-inset-top))}.intro h1{margin:11px 0;font-size:clamp(38px,11vw,46px)}.intro p{max-width:285px;margin-top:7px;font-size:11px;line-height:1.45}.explore-button{min-height:42px;margin-top:11px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.detail-planet-container{perspective:600px;justify-content:center;align-items:center;width:180px;height:180px;margin:25px auto 35px;display:flex;position:relative}.detail-planet{background-position:35%;background-repeat:repeat-x;background-size:auto 100%;border-radius:50%;width:145px;height:145px;animation:45s linear infinite planet-spin;position:relative;overflow:hidden;box-shadow:inset -25px -12px 35px #000000bf,inset 12px 8px 18px #ffffff1f}.detail-planet:after{content:"";pointer-events:none;background:radial-gradient(circle at 30% 25%,#ffffff2e,#0000 45%,#000c 100%);border-radius:50%;position:absolute;inset:0}@keyframes planet-spin{0%{background-position:0%}to{background-position:200%}}.detail-saturn-rings{pointer-events:none;border:13px solid #ccb797a6;border-radius:50%;width:235px;height:90px;position:absolute;transform:rotate(-25deg);box-shadow:0 0 20px #ccb79726}@media (max-width:650px){.detail-planet-container{width:110px;height:110px;margin:10px auto 15px}.detail-planet{width:85px;height:85px}.detail-saturn-rings{border-width:8px;width:140px;height:55px}}@media (prefers-reduced-motion:reduce){.detail-planet{animation:none}}
