:root{color-scheme:dark;--bg:#050a18;--glass:rgba(10,18,41,.66);--muted:#90a6c3;--aqua:#a9ebff;--border:rgba(185,215,255,.17);--serif:Georgia,'Times New Roman',serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#f0f5ff;font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{color:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #b7f0ff;outline-offset:4px}::selection{background:#97dfff;color:#061326}
#experience{position:relative;width:100%;height:100svh;min-height:650px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 30% 60%,#362651,#080b20 72%)}
#sky{position:absolute;inset:0;width:100%;height:100%;cursor:grab;display:block;touch-action:none}#sky:active{cursor:grabbing}
.scene-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,7,21,.61) 0%,transparent 45%,rgba(2,7,21,.17) 74%,rgba(2,7,21,.5) 100%),linear-gradient(180deg,rgba(2,7,21,.58),transparent 21%,transparent 69%,rgba(1,5,18,.74));}
.noise{position:absolute;inset:0;pointer-events:none;opacity:.13;z-index:2;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".6" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="128" height="128" filter="url(%23n)" opacity=".34"/%3E%3C/svg%3E');}
.header{position:absolute;z-index:10;left:clamp(20px,4vw,66px);right:clamp(20px,3.5vw,56px);top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}.logo{width:39px;height:39px;position:relative;border:1px solid rgba(186,236,255,.58);border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 14px rgba(94,192,245,.12)}.logo:before{content:'';width:25px;height:10px;border-top:2px solid #aeebff;transform:rotate(-29deg) translateY(6px);border-radius:50%}.logo:after{content:'';position:absolute;width:10px;height:10px;left:18px;top:11px;border-radius:50%;background:#d1f6ff;box-shadow:0 0 16px #74cdff}.brand-name{font-weight:680;font-size:14px;letter-spacing:.31em}.brand-small{display:block;margin-top:3px;color:#9db3d0;font-size:9px;letter-spacing:.22em;font-weight:550}.header-nav{display:flex;align-items:center;gap:24px}.nav-button{border:0;background:none;color:rgba(225,239,255,.82);font-size:10px;letter-spacing:.18em;font-weight:720;white-space:nowrap;padding:9px 0}.nav-button:hover{color:#bcf4ff}.nav-line{width:24px;height:1px;background:rgba(201,229,255,.36)}
.hero-copy{position:absolute;z-index:3;top:clamp(125px,22vh,210px);left:clamp(22px,5.1vw,82px);pointer-events:none;max-width:min(700px,50vw)}
.kicker{display:flex;gap:12px;align-items:center;color:#bae3ff;letter-spacing:.32em;font-size:10px;font-weight:750;text-transform:uppercase}.kicker:before{content:'';width:24px;height:1px;background:#9ce2f7;box-shadow:0 0 10px #4abdea}
h1{font-family:var(--serif);font-size:clamp(67px,9.15vw,151px);font-weight:400;line-height:.89;letter-spacing:-.067em;margin:24px 0 16px;color:#f4f6ff;text-shadow:0 7px 40px rgba(3,5,15,.22)}h1 span{color:#abd9ed;font-style:italic;font-weight:400}.hero-subtitle{font-family:var(--serif);font-size:clamp(18px,2.35vw,34px);letter-spacing:-.015em;font-weight:400;line-height:1.25;margin:0 0 18px}.hero-desc{color:#b4c7df;font-size:12px;line-height:1.85;letter-spacing:.035em;max-width:365px;margin:0}.hero-rule{height:1px;width:75px;margin:25px 0;background:linear-gradient(90deg,#c2eaff,transparent)}
.left-rail{position:absolute;z-index:5;left:clamp(22px,5.1vw,82px);bottom:42px;width:min(328px,30vw)}.microheading{font-size:9px;font-weight:760;letter-spacing:.26em;color:#99b1cc}.formation-list{margin-top:15px;display:flex;flex-direction:column;gap:3px}.formation{background:transparent;border:none;text-align:left;padding:9px 8px 9px 1px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(208,232,255,.12);font-size:11px;color:#abc0da;letter-spacing:.025em;transition:color .2s,padding-left .2s}.formation:hover,.formation[aria-pressed="true"]{color:#ebfaff;padding-left:5px}.formation-n{color:#7bb3d6;font-size:10px}.formation-arr{margin-left:auto;color:#81cbef;font-size:14px;opacity:0}.formation[aria-pressed="true"] .formation-arr,.formation:hover .formation-arr{opacity:1}.hint{color:#7f9cb9;font-size:9px;letter-spacing:.085em;margin-top:15px;display:flex;gap:8px;align-items:center}.hint svg{flex-shrink:0;opacity:.8}
.hotspot-layer{position:absolute;inset:0;pointer-events:none;z-index:4}.hotspot{position:absolute;pointer-events:auto;background:transparent;border:0;padding:0;width:38px;height:38px;transform:translate(-50%,-50%);transition:opacity .2s}.hotspot[hidden]{display:none}.hotspot-dot{position:absolute;width:5px;height:5px;border-radius:50%;top:16px;left:16px;background:var(--hue);box-shadow:0 0 8px 4px rgba(127,219,255,.55)}.hotspot-pulse{position:absolute;width:25px;height:25px;border:1px solid rgba(186,226,255,.48);border-radius:50%;left:6px;top:6px;box-shadow:0 0 12px rgba(97,196,255,.15);animation:breathing 3s ease-in-out infinite}.hotspot.selected .hotspot-pulse{border-color:#c2fbff;box-shadow:0 0 17px rgba(115,209,255,.5)}.hotspot-label{position:absolute;left:40px;top:13px;font-size:9px;letter-spacing:.09em;color:#cee8ff;text-shadow:0 2px 7px #011}.hotspot:hover{transform:translate(-50%,-50%) scale(1.3)}@keyframes breathing{50%{transform:scale(1.3);opacity:.5}}
.panel{position:absolute;z-index:8;top:94px;right:clamp(20px,3.5vw,56px);bottom:38px;width:clamp(284px,25vw,337px);display:flex;flex-direction:column;background:linear-gradient(158deg,rgba(13,25,49,.83),rgba(8,17,39,.77));backdrop-filter:blur(23px) saturate(140%);border:1px solid var(--border);box-shadow:0 32px 80px rgba(0,4,17,.27),inset 0 1px 0 rgba(255,255,255,.05);border-radius:13px;overflow:hidden}
.panel-top{padding:26px 25px 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.panel-title{font-family:var(--serif);font-size:27px;font-weight:400;letter-spacing:-.035em;margin:7px 0 0}.panel-dot{width:6px;height:6px;background:#8ddaf2;border-radius:50%;box-shadow:0 0 12px #4ad3ee;margin-top:6px}.panel-content{padding:0 25px 18px;overflow:auto;scrollbar-width:thin;flex:1;scrollbar-color:#335270 transparent}
.presets{display:flex;gap:5px;margin:11px 0 24px}.preset{flex:1;text-align:center;border:1px solid rgba(173,211,249,.17);background:rgba(214,235,255,.03);color:#95adcb;border-radius:5px;font-size:9px;letter-spacing:.065em;padding:10px 3px}.preset[aria-pressed="true"]{background:rgba(130,210,249,.13);color:#dcf7ff;border-color:rgba(151,222,248,.48)}.control{padding:0 0 19px;margin-bottom:17px;border-bottom:1px solid rgba(201,227,255,.105)}.control-head{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:10px}.control-head label{font-size:11px;color:#d5e4f6}.control-value{color:#bdeeff;font-size:10px;font-variant-numeric:tabular-nums}.control-note{font-size:9px;color:#7897b7;margin:8px 0 0;letter-spacing:.03em}
input[type="range"]{display:block;appearance:none;width:100%;height:3px;border:none;border-radius:9px;outline:none;background:linear-gradient(90deg,#a2e9fc 0%,#a2e9fc var(--percent,55%),rgba(185,226,249,.16) var(--percent,55%),rgba(185,226,249,.16) 100%);cursor:pointer}input[type="range"]::-webkit-slider-thumb{appearance:none;background:#d1f4ff;border:2px solid #142a44;width:12px;height:12px;border-radius:50%;box-shadow:0 0 9px rgba(128,219,255,.5)}input[type="range"]::-moz-range-thumb{background:#d1f4ff;border:2px solid #142a44;width:11px;height:11px;border-radius:50%}
.panel-metrics{border-top:1px solid var(--border);padding:17px 25px 20px;background:rgba(0,8,24,.23)}.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stat-key{font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#86a3c0}.stat-val{font-size:17px;font-weight:400;margin-top:6px;font-variant-numeric:tabular-nums;font-family:var(--serif)}.meter{height:2px;background:#233953;margin-top:16px;overflow:hidden}.meter span{height:100%;display:block;background:linear-gradient(90deg,#8be9ff,#f6d4d1);transition:width .2s}.meter-desc{margin-top:9px;color:#9cb3cd;font-size:9px;letter-spacing:.025em}
.close-controls{display:none;border:0;background:none;color:#b4cce6;font-size:22px;padding:0 4px}.open-controls{display:none}
.bottom-bar{position:absolute;z-index:6;bottom:27px;left:50%;transform:translateX(-36%);display:flex;gap:18px;align-items:center}.tiny-btn{border:1px solid rgba(195,226,255,.23);border-radius:100px;background:rgba(12,25,49,.45);backdrop-filter:blur(9px);height:35px;min-width:35px;padding:0 13px;color:#d2eafc;font-size:12px;display:flex;align-items:center;justify-content:center;gap:9px}.tiny-btn:hover{border-color:rgba(203,245,255,.66);background:rgba(44,82,118,.36)}.tiny-btn span{font-size:8px;letter-spacing:.13em}.live-time{white-space:nowrap;font-size:9px;color:#b0c7dc;letter-spacing:.12em}.live-time span{font-variant-numeric:tabular-nums;color:#f2f6ff}
.patch-card{position:absolute;bottom:89px;left:50%;transform:translateX(-36%);width:260px;z-index:5;pointer-events:none;background:rgba(4,13,29,.36);border-left:1px solid rgba(194,230,255,.42);padding:11px 15px;backdrop-filter:blur(9px)}.patch-tag{font-size:8px;letter-spacing:.18em;color:#9bb9d5}.patch-name{font-family:var(--serif);font-size:20px;margin:8px 0 7px;font-weight:400}.patch-text{font-size:10px;line-height:1.65;color:#b1c7e1;margin:0 0 9px}.patch-metric{display:flex;justify-content:space-between;gap:9px;border-top:1px solid rgba(183,222,255,.18);padding-top:9px;font-size:8px;letter-spacing:.1em;color:#96c8da}.patch-metric strong{font-size:10px;color:#d4faff;white-space:nowrap;font-weight:500}
.scrolldown{position:absolute;z-index:5;left:50%;bottom:24px;transform:translateX(-20%);text-decoration:none;color:#91aec7;display:flex;gap:7px;align-items:center;font-size:8px;letter-spacing:.15em}.scrolldown span{font-size:16px}
.field-guide{background:linear-gradient(180deg,#070e21,#090f20 800px,#080d1b);padding:120px 6vw 100px;position:relative}.guide-wrap{max-width:1110px;margin:auto;display:grid;grid-template-columns:235px minmax(0,760px);gap:8vw}.guide-aside{align-self:start;position:sticky;top:35px}.guide-aside h2{font-family:var(--serif);font-size:30px;font-weight:400;letter-spacing:-.03em;margin:15px 0 16px}.guide-aside p{color:#9eb6d1;font-size:12px;line-height:1.8}.guide-aside a{display:block;color:#aacde0;text-decoration:none;padding:11px 0;border-bottom:1px solid rgba(205,225,249,.1);font-size:11px}.guide-aside a:hover{color:#fff}.guide-main h2{font-family:var(--serif);font-weight:400;font-size:clamp(33px,4.5vw,63px);line-height:1.1;letter-spacing:-.04em;margin:17px 0 30px}.guide-main h3{font-family:var(--serif);font-size:28px;font-weight:400;letter-spacing:-.02em;margin:49px 0 14px}.guide-main h4{font-weight:550;font-size:15px;margin:26px 0 8px;color:#e8f3ff}.guide-main p,.guide-main li{font-size:14px;line-height:1.9;color:#b4c4dc}.guide-main strong{color:#e6eeff;font-weight:600}.guide-main a{color:#9ce3f7;text-decoration-color:#517c9a;text-underline-offset:3px}.guide-main ul,.guide-main ol{padding-left:23px}.guide-main blockquote{padding:7px 20px;border-left:1px solid #a9d8e5;background:rgba(100,194,224,.045);margin:28px 0}.guide-main hr{margin:50px 0;border:0;border-top:1px solid var(--border)}.guide-main h1{display:none}.guide-main p:first-of-type{font-size:16px;color:#c7d7e8}.eyebrow{font-size:10px;color:#9acbdf;letter-spacing:.27em;font-weight:650}.back{margin-top:30px;border:1px solid rgba(171,227,245,.35);background:transparent;padding:13px 20px;border-radius:3px;font-size:10px;letter-spacing:.12em}.foot{max-width:1110px;margin:80px auto 0;border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#7e9bb6;letter-spacing:.08em}
dialog{background:linear-gradient(155deg,#152445,#0a1229);border:1px solid rgba(167,226,255,.35);border-radius:10px;color:#e6efff;max-width:530px;width:calc(100% - 40px);padding:35px;box-shadow:0 32px 120px #0008}dialog::backdrop{background:rgba(1,4,15,.76);backdrop-filter:blur(7px)}dialog h2{font-family:var(--serif);font-size:35px;letter-spacing:-.04em;font-weight:400;margin:10px 0 14px}dialog p{font-size:13px;line-height:1.8;color:#aec4db}dialog .modal-close{margin-top:15px;padding:11px 18px;border:1px solid #7ea3c0;background:#142944;border-radius:5px;font-size:11px}
@media (max-width:1050px){.hero-copy{max-width:48vw;top:20vh}h1{font-size:clamp(65px,9vw,102px)}.panel{width:290px}.left-rail{width:240px}.patch-card{left:48%;width:220px}.bottom-bar{left:48%}.header-nav{gap:12px}}
@media (max-width:800px){#experience{min-height:620px}.header{top:19px}.brand-name{font-size:12px;letter-spacing:.22em}.brand-small{font-size:8px}.header-nav .nav-line{display:none}.nav-button{font-size:9px}.nav-button:nth-of-type(2){display:none}.hero-copy{top:18%;max-width:90%;left:24px}.kicker{font-size:9px}h1{font-size:clamp(65px,13vw,107px);margin:18px 0 12px}.hero-subtitle{font-size:clamp(21px,3.6vw,27px)}.hero-desc{font-size:11px;max-width:285px}.left-rail{display:none}.patch-card{left:23px;bottom:111px;transform:none;width:min(250px,65vw)}.bottom-bar{left:24px;bottom:60px;transform:none;gap:8px}.scrolldown{left:auto;right:24px;bottom:26px;transform:none}.open-controls{z-index:11;position:absolute;right:21px;bottom:67px;display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:6px;background:rgba(22,41,66,.88);border:1px solid rgba(199,238,255,.35);font-size:10px;letter-spacing:.06em}.open-controls span{font-size:18px}.panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:min(76svh,670px);height:auto;border-radius:18px 18px 0 0;transform:translateY(104%);transition:transform .35s ease;z-index:12;background:rgba(9,18,38,.96)}.panel.open{transform:translateY(0)}.panel-top{padding:21px 25px 10px}.panel-title{font-size:25px}.close-controls{display:block}.panel-content{max-height:48vh}.panel-metrics{padding:13px 25px 17px}.stats{grid-template-columns:repeat(4,1fr)}.stat-val{font-size:14px}.guide-wrap{grid-template-columns:1fr;gap:35px}.guide-aside{position:static}.guide-aside h2{margin:8px 0}.guide-aside a{display:inline-block;margin-right:15px;font-size:10px}.field-guide{padding:78px 7vw 65px}}
@media (max-width:520px){.header-nav{gap:0}.nav-button{font-size:9px}.brand{gap:10px}.logo{width:32px;height:32px}.brand-name{font-size:11px;letter-spacing:.15em}.brand-small{font-size:7px;letter-spacing:.1em}.hero-copy{top:20.5%;left:22px}.kicker{letter-spacing:.2em}.hero-copy h1{font-size:clamp(58px,17vw,78px);margin:21px 0 16px}.hero-subtitle{font-size:22px;max-width:270px}.hero-desc{max-width:245px;font-size:10px;line-height:1.8}.hero-rule{margin:17px 0}.patch-card{left:20px;bottom:147px;width:calc(100% - 40px);max-width:315px;padding:9px 12px}.patch-card .patch-text{font-size:9px;max-height:45px;overflow:hidden}.patch-name{font-size:18px;margin:4px 0}.bottom-bar{left:20px;bottom:99px;gap:6px}.tiny-btn{height:32px;min-width:32px;padding:0 9px}.tiny-btn span{font-size:7px}.live-time{font-size:8px}.open-controls{bottom:42px;left:20px;right:auto;padding:10px 13px}.scrolldown{right:18px;bottom:50px;font-size:7px}.hotspot-label{display:none}.hotspot{width:32px;height:32px}.hotspot-pulse{left:3px;top:3px}.hotspot-dot{left:13px;top:13px}.panel-content{max-height:49vh}.guide-main p,.guide-main li{font-size:13px}.guide-main h3{font-size:25px}.foot{flex-direction:column}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}