@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#050812;--panel:rgba(9,18,34,.72);--line:rgba(150,208,232,.22);--text:#d8edf2;--muted:#71909b;--cyan:#7eeeff;--pink:#ff48a9;--violet:#8f73ff;--lime:#c8ff6b;--font-head:'Barlow Condensed',sans-serif;--font-mono:'Space Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-mono);overflow-x:hidden}button,a{font:inherit;color:inherit}button{cursor:pointer;border:0}a{text-decoration:none}.app-shell{min-height:100vh;position:relative;background:radial-gradient(circle at 70% 18%,#17203f 0,transparent 33%),linear-gradient(180deg,#060a17 0%,#050812 100%);overflow:hidden}.scanlines,.noise{position:fixed;inset:0;pointer-events:none;z-index:20}.scanlines{background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.14) 4px);opacity:.25}.noise{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.rain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.34;background-image:linear-gradient(110deg,transparent 48%,rgba(126,238,255,.55) 49%,transparent 51%);background-size:19px 100%;animation:rain 1.1s linear infinite}@keyframes rain{to{background-position:0 100px}}.glass-panel{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px)}.topbar{position:fixed;z-index:30;top:20px;left:4vw;right:4vw;height:65px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-mark{color:var(--cyan);font-weight:bold;font-size:20px;letter-spacing:-2px}.brand-copy{display:flex;flex-direction:column;font-family:var(--font-head);letter-spacing:2px;font-size:18px;line-height:.8}.brand-copy small{color:var(--muted);font-size:9px;margin-top:5px;letter-spacing:3px}.main-nav{display:flex;gap:32px;font-size:11px;letter-spacing:1.5px;color:var(--muted)}.main-nav a{padding:22px 0;border-bottom:1px solid transparent}.main-nav a.active,.main-nav a:hover{color:var(--cyan);border-color:var(--cyan)}.top-status{display:flex;align-items:center;gap:12px;font-size:9px;color:var(--muted);letter-spacing:1px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink);margin-right:6px}.icon-button{font-size:28px;background:none;color:var(--cyan);line-height:0;transform:rotate(-30deg);margin-left:12px}.menu-button{background:none;display:none}.menu-button i{display:block;width:22px;border-top:1px solid var(--cyan);margin:5px}.hero{height:860px;min-height:760px;position:relative;padding:195px 8vw 0;overflow:hidden}.hero-copy{position:relative;z-index:4;max-width:580px}.eyebrow{font-size:10px;letter-spacing:2.2px;color:var(--cyan);margin:0 0 26px}.eyebrow-line{display:inline-block;width:28px;border-top:1px solid var(--pink);vertical-align:middle;margin-right:10px}.hero h1,h2{font:700 clamp(70px,9vw,148px)/.8 var(--font-head);letter-spacing:-4px;text-transform:uppercase;margin:0;color:#e5f6f5;text-shadow:0 0 30px rgba(126,238,255,.13)}h1 em,h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--cyan);text-shadow:0 0 25px rgba(126,238,255,.25)}.hero-lede{max-width:390px;font-size:11px;line-height:2;color:#9fb9c0;margin:34px 0}.hero-actions{display:flex;align-items:center;gap:27px}.primary-button{background:var(--pink);color:#170914;padding:15px 22px;font-weight:bold;font-size:11px;letter-spacing:1px;box-shadow:0 0 26px rgba(255,72,169,.28);transition:.25s}.primary-button:hover{background:#ff86c4;transform:translateY(-3px)}.primary-button span{font-size:18px;margin-left:16px}.text-button{background:none;color:var(--text);font-size:10px}.play{color:var(--cyan);font-size:12px;border:1px solid var(--cyan);border-radius:50%;display:inline-flex;width:25px;height:25px;align-items:center;justify-content:center;margin-right:8px}.hero-aside{position:absolute;z-index:5;right:8vw;top:185px;display:flex;flex-direction:column;align-items:flex-end;gap:120px;color:var(--muted);font-size:9px;letter-spacing:1.5px;text-align:right}.coordinates{display:flex;gap:23px}.hero-caption{line-height:1.8}.hero-caption strong{color:var(--pink)}.skyline{position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(11,31,51,.88) 75%,#09111c 100%);overflow:hidden}.moon{position:absolute;width:180px;height:180px;border:1px solid rgba(126,238,255,.3);border-radius:50%;right:23%;top:145px;box-shadow:0 0 80px rgba(126,238,255,.08),inset 0 0 35px rgba(126,238,255,.18);background:radial-gradient(circle at 35% 30%,rgba(177,250,255,.15),transparent 56%)}.cloud{position:absolute;height:14px;background:rgba(82,114,155,.13);filter:blur(7px);transform:skewX(-25deg)}.cloud-one{top:255px;left:5%;width:430px}.cloud-two{top:370px;right:7%;width:300px}.tower{position:absolute;bottom:0;background:linear-gradient(100deg,#07101e,#111a2d);border:1px solid rgba(126,238,255,.09);box-shadow:inset 8px 0 24px rgba(126,238,255,.06)}.tower:after{content:"";position:absolute;inset:8px;background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(126,238,255,.12) 13px 14px),repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,72,169,.1) 18px 19px);opacity:.8}.tower-a{height:45%;width:15%;left:7%;clip-path:polygon(15% 0,90% 0,100% 100%,0 100%)}.tower-b{height:59%;width:12%;left:24%;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.tower-c{height:70%;width:12%;right:25%;clip-path:polygon(30% 0,75% 0,100% 100%,0 100%)}.tower-d{height:32%;width:18%;right:6%}.tower-e{height:27%;width:23%;left:40%}.tower-f{height:83%;width:9%;right:8%;clip-path:polygon(35% 0,73% 0,100% 100%,0 100%)}.tower-sign,.holo{position:absolute;z-index:2;top:20%;left:12%;font:700 18px/1 var(--font-head);letter-spacing:2px;color:var(--pink);text-shadow:0 0 13px var(--pink);transform:skewY(-6deg)}.holo{color:var(--cyan);top:25%;left:21%;font-size:24px}.antenna{position:absolute;left:49%;top:-45px;border-left:1px solid var(--pink);height:45px}.tower-lights{position:absolute;z-index:2;left:30%;top:28%;height:35%;width:2px;background:var(--pink);box-shadow:10px 18px var(--cyan),-10px 45px var(--pink)}.lower-city{position:absolute;z-index:5;bottom:0;left:0;right:0;height:24%;display:flex;align-items:flex-end;gap:10px;padding:0 2%;background:linear-gradient(transparent,#080f1b 70%)}.lower-city span{height:var(--h,80%);flex:1;background:repeating-linear-gradient(0deg,#131e2c 0 15px,#18283b 16px 18px);box-shadow:0 -3px 25px rgba(255,72,169,.12)}.lower-city span:nth-child(1){--h:65%}.lower-city span:nth-child(2){--h:90%}.lower-city span:nth-child(3){--h:52%}.lower-city span:nth-child(4){--h:75%}.lower-city span:nth-child(5){--h:60%}.lower-city span:nth-child(6){--h:82%}.lower-city span:nth-child(7){--h:47%}.street-glow{position:absolute;bottom:0;left:20%;width:60%;height:10%;background:linear-gradient(90deg,transparent,var(--pink),transparent);filter:blur(25px);opacity:.45}.hero-scroll{position:absolute;z-index:6;bottom:40px;left:8vw;color:var(--muted);font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:12px}.hero-scroll i{width:60px;border-top:1px solid var(--cyan);position:relative}.hero-scroll i:after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;border-right:1px solid var(--cyan);border-top:1px solid var(--cyan);transform:rotate(45deg)}.world-section,.log-section{padding:130px 8vw;position:relative;z-index:4}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:60px}.section-heading h2,.interface-copy h2{font-size:90px;letter-spacing:-2px}.section-heading>p{color:var(--muted);font-size:10px;max-width:245px;line-height:2;margin:0 4vw 7px 0}.district-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}.district-card{height:420px;position:relative;text-align:left;padding:22px;background:#0a1424;border:1px solid var(--line);overflow:hidden;transition:.35s}.district-card:hover,.district-card.active{border-color:var(--cyan);transform:translateY(-8px);box-shadow:0 15px 45px rgba(0,0,0,.3)}.district-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#07101dcc 100%);z-index:1}.card-index,.card-arrow{position:relative;z-index:3;font-size:9px;color:var(--cyan);letter-spacing:1px}.card-arrow{float:right;font-size:20px}.card-visual{position:absolute;inset:0;opacity:.8}.kowloon-visual{background:linear-gradient(135deg,#15133d,#0b1928 45%,#320d3c)}.kowloon-visual:before{content:"";position:absolute;inset:20% 8% 0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(126,238,255,.3) 23px 25px),repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,72,169,.4) 26px 29px);transform:perspective(300px) rotateX(15deg)}.kowloon-visual i{position:absolute;width:90px;height:5px;background:var(--pink);box-shadow:0 0 20px var(--pink);transform:rotate(-28deg);left:28%;top:35%}.kowloon-visual i:nth-child(2){top:48%;left:46%;background:var(--cyan);box-shadow:0 0 20px var(--cyan)}.kowloon-visual i:nth-child(3){top:63%;left:13%;width:130px}.dome-visual{background:radial-gradient(ellipse at 55% 45%,#8b8b39 0 4%,#28372c 5% 18%,transparent 19%),linear-gradient(140deg,#1d2840,#122728)}.dome-visual:after{content:"";position:absolute;width:70%;height:60%;left:18%;bottom:-18%;border:2px solid #c8ff6b;border-radius:50% 50% 0 0;box-shadow:0 0 40px #c8ff6b}.tide-visual{background:linear-gradient(170deg,#1c2851,#0b1f2b 50%,#070b19)}.tide-visual:before{content:"";position:absolute;inset:55% 0 0;background:repeating-linear-gradient(-10deg,transparent 0 11px,rgba(126,238,255,.3) 12px 14px)}.tide-visual:after{content:"";position:absolute;top:28%;left:40%;height:35%;border-left:2px solid var(--pink);transform:rotate(24deg);box-shadow:8px 0 var(--cyan)}.card-label{position:absolute;z-index:3;left:22px;bottom:22px}.card-label h3{font:600 38px/1 var(--font-head);margin:0 0 7px;color:#f3ffff}.card-label p{font-size:9px;color:var(--muted);letter-spacing:1px;margin:0}.interface-section{padding:115px 8vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;align-items:center;background:linear-gradient(90deg,rgba(16,27,53,.35),transparent);position:relative;z-index:4}.interface-copy h2{font-size:82px}.muted{max-width:330px;font-size:10px;line-height:2;color:var(--muted);margin:30px 0}.outline-button{background:transparent;border:1px solid var(--cyan);padding:13px 20px;color:var(--cyan);font-size:10px}.outline-button span{font-size:18px;margin-left:20px}.terminal{min-height:300px;padding:20px;font-size:10px;color:var(--muted);box-shadow:0 0 50px rgba(126,238,255,.05)}.terminal-head,.terminal-footer{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px}.terminal-online{color:var(--lime)}.terminal-body{padding:50px 3px;color:#748a92;line-height:2}.terminal-body b{color:#d3e5e3;font-weight:400}.terminal-body .cyan{color:var(--cyan)}.cursor{animation:blink 1s infinite;color:var(--pink)}@keyframes blink{50%{opacity:0}}.terminal-footer{padding-top:13px;border-top:1px solid var(--line)}.terminal-footer b{color:var(--cyan);font-weight:400}.log-section{padding-top:110px}.compact{margin-bottom:35px}.compact h2{font-size:72px}.view-all{font-size:10px;color:var(--cyan);margin-bottom:10px}.signal-item{display:grid;grid-template-columns:130px 190px 1fr 30px;align-items:center;border-top:1px solid var(--line);min-height:82px;transition:.2s}.signal-item:hover{padding-left:12px;background:linear-gradient(90deg,rgba(126,238,255,.07),transparent)}.signal-time,.signal-type{font-size:9px;color:var(--muted)}.signal-type{color:var(--pink)}.signal-item h3{font:500 23px var(--font-head);margin:0}.signal-arrow{color:var(--cyan);font-size:19px}.footer{position:relative;z-index:4;display:flex;justify-content:space-between;padding:26px 8vw;border-top:1px solid var(--line);color:#57717c;font-size:8px;letter-spacing:1px}.player-hud{position:fixed;z-index:25;left:4vw;bottom:25px;width:265px;padding:15px;transform:translateY(140%);transition:.45s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 30px rgba(0,0,0,.4)}.player-hud.visible{transform:translateY(0)}.hud-head{display:flex;justify-content:space-between;font-size:9px;color:var(--cyan);padding-bottom:13px;border-bottom:1px solid var(--line)}.hud-head button{background:none;color:var(--muted);font-size:20px}.hud-location{padding:20px 0}.hud-location small,.hud-controls{font-size:8px;color:var(--muted);display:block;letter-spacing:1px}.hud-location strong{font:500 28px var(--font-head);display:block;color:#fff;margin:7px 0}.hud-location span{font-size:9px;color:var(--pink)}.hud-controls{display:flex;justify-content:space-between}.hud-bar{height:2px;background:#243a49;margin-top:15px}.hud-bar span{display:block;background:var(--cyan);width:64%;height:100%;box-shadow:0 0 10px var(--cyan)}.modal-backdrop{position:fixed;z-index:50;inset:0;background:rgba(2,5,12,.7);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.3s}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal{position:relative;width:min(560px,90vw);padding:45px}.modal h2{font-size:72px;margin-bottom:25px}.modal p:not(.eyebrow){font-size:11px;line-height:2;color:var(--muted);max-width:390px}.modal-close{position:absolute;right:20px;top:15px;color:var(--cyan);background:none;font-size:25px}.modal-meta{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:30px;padding-top:14px;color:var(--pink);font-size:8px}.toast{position:fixed;z-index:60;right:4vw;bottom:30px;background:var(--cyan);color:#07121c;padding:12px 18px;font-size:10px;transform:translateY(80px);opacity:0;transition:.3s}.toast.show{transform:none;opacity:1}
@media(max-width:800px){.topbar{left:15px;right:15px;padding:0 15px}.main-nav{display:none}.menu-button{display:block}.hero{height:740px;padding:160px 7vw 0}.hero h1{font-size:76px}.hero-aside{top:auto;bottom:85px;right:7vw;gap:25px}.coordinates{display:none}.skyline{opacity:.75}.world-section,.log-section,.interface-section{padding:80px 7vw}.section-heading{display:block}.section-heading>p{margin-top:25px}.section-heading h2,.interface-copy h2{font-size:65px}.district-grid{grid-template-columns:1fr}.district-card{height:330px}.interface-section{display:block}.terminal{margin-top:45px}.signal-item{grid-template-columns:1fr 1fr 20px;gap:6px;padding:15px 0}.signal-item h3{grid-column:1/-1;grid-row:2;font-size:20px}.signal-type{grid-column:2}.footer{padding:22px 7vw;gap:12px;flex-wrap:wrap}.footer span:last-child{width:100%}.modal{padding:30px}.modal h2{font-size:58px}.player-hud{left:15px;bottom:15px}.hero-scroll{left:7vw}}

/* V1.5 WebGL viewport */
.city3d-stage{position:absolute;z-index:3;inset:80px 0 0;pointer-events:auto;mix-blend-mode:screen}.city3d-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 50%,transparent 20%,rgba(3,6,15,.55) 82%),linear-gradient(180deg,transparent 50%,rgba(4,8,16,.72))}.city3d-stage canvas{width:100%;height:100%;display:block;cursor:grab}.city3d-stage canvas:active{cursor:grabbing}.scene-badge,.scene-help{position:absolute;z-index:2;right:8vw;bottom:90px;font-size:8px;letter-spacing:1.5px;color:var(--cyan);background:rgba(5,8,18,.6);padding:8px 11px;border:1px solid rgba(126,238,255,.25)}.scene-help{right:8vw;bottom:55px;color:var(--muted);border:0;background:none;padding:0}
@media(max-width:800px){.city3d-stage{inset:100px 0 0}.scene-badge{right:7vw;bottom:80px}.scene-help{right:7vw;bottom:45px}}