:root{color-scheme:light;--ink:#171822;--muted:#777781;--paper:#f5f3ee;--purple:#5146f4;--orange:#f2916d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Segoe UI","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.page-shell{max-width:1720px;margin:auto;padding:0 6.1%}
.site-header{height:102px;display:flex;align-items:center;border-bottom:1px solid #dcdad4}
.brand{display:inline-flex;gap:12px;align-items:center}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--purple);position:relative;display:block;flex:none}
.brand-mark span{position:absolute;left:7px;top:15px;width:20px;height:4px;background:#fff;border-radius:5px;transform:rotate(38deg)}
.brand-mark span+span{transform:rotate(-38deg)}
.brand-name{font-size:14px;font-weight:800;letter-spacing:-.55px;line-height:1}.brand-name span{display:block}
.header-note{margin:auto;color:#777781;font-size:9px;font-weight:700;letter-spacing:.18em;display:flex;align-items:center;gap:9px}
.status-dot,.eyebrow span{width:7px;height:7px;display:inline-block;border-radius:50%;background:#ed926e}
.header-link{font-size:10px;font-weight:800;letter-spacing:.14em;display:flex;align-items:center;gap:13px}.header-link span{font-size:17px;font-weight:400}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6.2%;align-items:stretch;padding:35px 0 36px;min-height:min(730px,calc(100vh - 171px))}
.intro{display:flex;flex-direction:column;padding:37px 0 12px;min-width:0}
.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:800;display:flex;gap:10px;align-items:center;color:#676775}
h1{font-size:clamp(66px,7.4vw,120px);line-height:.91;letter-spacing:-.085em;font-weight:780;margin:43px 0 37px}h1>span{display:block}.greeting{font-size:clamp(12px,1.1vw,15px);letter-spacing:.25em;line-height:1.5;margin-bottom:18px;font-weight:750}.period{color:var(--purple)}
.intro-copy{display:flex;align-items:flex-start;gap:30px}.intro-copy h2{font-size:clamp(19px,1.8vw,25px);line-height:1.55;letter-spacing:.04em;margin:0;font-weight:700;white-space:nowrap}.intro-copy p{font-size:13px;color:#7c7c85;line-height:1.95;margin:3px 0 0;letter-spacing:.025em}
.explore-link{display:inline-flex;align-items:center;gap:22px;width:max-content;font-size:12px;font-weight:700;letter-spacing:.08em;border-bottom:1px solid #272732;padding-bottom:10px;margin-top:32px}.explore-link .arrow{font-size:19px;line-height:1;transition:transform .2s}.explore-link:hover .arrow{transform:translate(3px,-3px)}
.intro-bottom{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:45px;color:#929196;font-size:9px;font-weight:750;letter-spacing:.14em}.intro-bottom-line{height:1px;background:#dad8d2;flex:1;max-width:90px}
.visual-card{position:relative;min-height:590px;overflow:hidden;border-radius:5px;color:#f6f4ff;background:radial-gradient(ellipse at 49% 51%,#343064 0,#201d42 40%,#151527 77%,#111421 100%);display:flex;flex-direction:column;isolation:isolate}
.visual-card:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.17;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 75%)}
.card-grain{position:absolute;inset:0;z-index:-1;opacity:.23;background:radial-gradient(circle at 14% 18%,#b79dff 0,transparent 18%),radial-gradient(circle at 83% 76%,#514cfe 0,transparent 25%);pointer-events:none}
.card-top,.card-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:31px 33px;font-size:9px;font-weight:700;letter-spacing:.18em;color:#c3bfd7}.card-index{font-size:11px;color:#a19bbd}.card-bottom{margin-top:auto;color:#aba8c3}.card-bottom p{margin:0;letter-spacing:.08em;font-size:11px;font-weight:500}.drag-icon{font-size:16px;margin-right:8px;color:#c0b4ff}.reset-button{width:36px;height:36px;border:1px solid #ffffff3d;border-radius:50%;background:transparent;color:#fff;font-size:19px;cursor:pointer;transition:background .2s}.reset-button:hover,.reset-button:focus-visible{background:#ffffff24}
.scene{position:absolute;inset:80px 12px 75px;display:grid;place-items:center;perspective:950px;cursor:grab;touch-action:none;outline-offset:-5px;user-select:none}.scene:active{cursor:grabbing}.scene:focus-visible,.explore-link:focus-visible,.brand:focus-visible,.header-link:focus-visible{outline:2px solid #a9a0ff;outline-offset:5px}
.world{position:relative;width:min(65%,330px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(var(--rotation-x,-16deg)) rotateY(var(--rotation-y,20deg));transition:transform .18s ease-out;will-change:transform}.scene.dragging .world{transition:none}
.halo{position:absolute;inset:10%;border-radius:50%;background:#856dff;filter:blur(70px);opacity:.35;transform:translateZ(-40px)}
.sphere{position:absolute;inset:21%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 32% 22%,#f8d9e8 0,#bda5ff 15%,#7775ef 42%,#4a3eaa 66%,#242053 90%);box-shadow:inset -22px -28px 46px #211c55a8,inset 8px 7px 24px #ffffff63,0 0 45px #8a79ed6b;transform:translateZ(4px)}
.sphere:after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(145deg,#ffffff38,transparent 36%,#0d103f52 100%)}.sphere-gloss{position:absolute;left:17%;top:9%;width:54%;height:27%;border-radius:50%;background:#fff;filter:blur(22px);opacity:.4;transform:rotate(-28deg)}
.sphere-line{position:absolute;left:4%;width:92%;height:25%;border:1px solid #ffffff3f;border-radius:50%;transform:rotate(-18deg)}.line-one{top:25%}.line-two{top:40%}.line-three{top:55%}
.orbit{position:absolute;inset:0;border:1px solid #d5cdff80;border-radius:50%;transform-style:preserve-3d}.orbit-one{transform:rotateX(73deg) rotateZ(-18deg);border-color:#e7d7ffab}.orbit-two{inset:5%;transform:rotateY(72deg) rotateZ(18deg);border-color:#d6c5ff66}.orbit-three{inset:-8%;transform:rotateX(68deg) rotateY(17deg) rotateZ(55deg);border-color:#b3b5ff61}
.planet{position:absolute;display:block;border-radius:50%;box-shadow:0 0 16px currentColor}.planet-one{width:14px;height:14px;left:14%;top:14%;background:#f6b8a4;color:#efa49b}.planet-two{width:10px;height:10px;left:82%;top:25%;background:#d6c9ff;color:#c5b4ff}.planet-three{width:7px;height:7px;left:48%;top:-4px;background:#fff1bf;color:#fff1bf}
.spark{position:absolute;color:#e4d7ff;transform:translateZ(60px);text-shadow:0 0 14px #b29aff}.spark-one{top:5%;left:10%;font-size:22px}.spark-two{right:2%;bottom:14%;font-size:16px}.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 9px #f4ecff}.stars i:nth-child(1){top:18%;left:19%}.stars i:nth-child(2){top:29%;left:76%}.stars i:nth-child(3){top:69%;left:16%}.stars i:nth-child(4){top:78%;left:70%}.stars i:nth-child(5){top:12%;left:62%;opacity:.45}.stars i:nth-child(6){top:82%;left:37%;opacity:.4}.stars i:nth-child(7){top:45%;left:8%;opacity:.4}.stars i:nth-child(8){top:52%;left:91%;opacity:.5}.scene-cross{position:absolute;color:#9992bc80;font-size:16px;font-weight:200}.cross-one{left:11%;top:35%}.cross-two{right:12%;bottom:27%}
.site-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;border-top:1px solid #dcdad4;min-height:69px;font-size:9px;color:#86858e;font-weight:700;letter-spacing:.15em}.footer-star{color:var(--purple);font-size:15px;margin-left:6px}
@media(max-width:1050px){.hero{gap:4%}.intro-copy{display:block}.intro-copy p{margin-top:15px}.visual-card{min-height:570px}.copy-break{display:none}}
@media(max-width:720px){.page-shell{padding:0 6%}.site-header{height:76px}.header-note{display:none}.header-link{margin-left:auto}.hero{display:flex;flex-direction:column;padding:0 0 24px;gap:26px}.intro{padding:37px 0 0}.eyebrow{font-size:9px}h1{font-size:clamp(62px,15vw,94px);margin:31px 0 27px}.greeting{font-size:12px;margin-bottom:15px}.intro-copy h2{font-size:20px}.intro-copy p{font-size:13px;margin-top:12px}.explore-link{margin-top:25px}.intro-bottom{padding-top:29px}.visual-card{min-height:470px}.card-top,.card-bottom{margin-left:23px;margin-right:23px}.site-footer{min-height:65px;font-size:8px}.site-footer span:nth-child(2){display:none}}
@media(max-width:390px){.visual-card{min-height:390px}.scene{inset:68px 3px}.world{width:68%}.card-top,.card-bottom{margin-top:23px;margin-bottom:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.world,.reset-button,.explore-link .arrow{transition:none}}