:root{--bg:#0a1922;--panel:rgba(8,23,32,.83);--border:rgba(169,196,193,.18);--white:#eaf0e9;--muted:#95a7a6;--gold:#d7a36e;--teal:#78bbc0;--soft:rgba(233,234,221,.08)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--white);font-family:'Trebuchet MS',Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#city{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}#city.dragging{cursor:grabbing}#vignette{position:fixed;pointer-events:none;inset:0;background:linear-gradient(90deg,rgba(4,13,21,.10),transparent 29%,transparent 72%,rgba(4,13,21,.12)),linear-gradient(0deg,rgba(4,13,21,.42),transparent 19%,transparent 80%,rgba(4,13,21,.18))}
.glass{background:var(--panel);backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:0 18px 75px rgba(0,0,0,.22)}.topbar{height:84px;position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 39px;z-index:4;border-bottom:1px solid rgba(241,222,184,.18);background:linear-gradient(180deg,rgba(4,12,17,.7),transparent)}.brand{display:flex;align-items:center;gap:13px;letter-spacing:3px}.brand-symbol{font-size:33px;color:var(--gold);font-weight:200}.brand b{font-size:20px;font-weight:700}.brand-dot{color:var(--gold)}.brand small{display:block;color:#c89c76;font-size:9px;letter-spacing:3.4px;margin-top:3px}.top-middle{color:#c0bfb4;letter-spacing:2.3px;font-size:10px}.top-middle .line{display:inline-block;width:50px;height:1px;background:var(--gold);vertical-align:middle;margin-right:14px}.sep{color:var(--gold);margin:0 13px}.top-middle strong{color:white;font-weight:400}.top-right{display:flex;align-items:center;gap:28px;font-size:12px;letter-spacing:2px}.online{font-size:10px;color:#a3c9b2}.online i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a2e5ab;margin-right:9px;box-shadow:0 0 12px #93d99c}.icon-btn{border:1px solid var(--border);background:#17303a;color:white;padding:8px 12px}
.leftpanel,.rightpanel{position:absolute;top:110px;z-index:3;border-radius:3px}.leftpanel{left:29px;width:333px;max-height:calc(100vh - 230px);padding:25px 25px 12px;overflow:auto;scrollbar-width:thin;scrollbar-color:#587077 transparent}.rightpanel{right:29px;width:288px;padding:23px 22px 16px;max-height:calc(100vh - 470px);min-height:330px;overflow:auto;scrollbar-width:thin}.eyebrow{font-size:9px;letter-spacing:2px;color:#c6ae8f;display:flex;align-items:center;gap:10px;font-weight:bold}.mini-line{height:2px;width:18px;display:inline-block;background:var(--gold)}.dot-square{margin-left:auto;color:#667a7e}.leftpanel h1{font-size:35px;line-height:1.09;letter-spacing:-.8px;margin:25px 0 14px;font-weight:500}.leftpanel h1 em{font-family:Georgia,serif;font-weight:400;color:var(--gold);font-style:italic}.lead{color:#a6b5b6;line-height:1.56;font-size:12px;margin:0 0 23px;max-width:263px}.metrics{display:grid;grid-template-columns:1fr 1fr 1.15fr;padding:17px 0 23px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);gap:5px}.metrics strong{font-size:22px;display:block;font-weight:500;font-family:Georgia,serif;color:#f4e5d3}.metrics span{color:var(--muted);font-size:8px;letter-spacing:.8px;margin-top:6px;display:block}.section-line{margin-top:20px;margin-bottom:9px;font-size:9px;letter-spacing:1.2px;color:#c4c6b5;display:flex;justify-content:space-between}.section-line>span:last-child{color:#798d93}.destinations{display:flex;flex-direction:column;gap:1px}.destination{display:flex;align-items:center;gap:11px;width:100%;padding:9px 5px;background:transparent;color:#d5dfda;border:0;border-bottom:1px solid rgba(167,189,186,.08);text-align:left;transition:.2s}.destination:hover,.destination.active{background:rgba(194,152,99,.12);color:#fff}.destination .number{font-size:9px;color:var(--gold);width:19px}.destination .dest-text{flex:1}.destination b{font-size:11px;font-weight:500;display:block;letter-spacing:.25px}.destination small{font-size:9px;color:#819c9c;display:block;margin-top:2px}.destination .arr{color:#c69b65;font-size:16px}.panel-foot{margin-top:15px;border-top:1px solid var(--border);padding:14px 0 0;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#819a9b}.panel-foot code{font-size:10px;color:#d9bc91}
.control-group{margin-top:23px}.control-name{display:flex;justify-content:space-between;color:#c9d2cc;font-size:11px}.control-name strong{font-size:11px;color:var(--gold);font-weight:500}input[type=range]{width:100%;margin-top:16px;height:2px;appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,#b18b66,#53676c);outline:none;border:0}input[type=range]::-webkit-slider-thumb{appearance:none;background:#e5c9a2;width:12px;height:12px;border-radius:50%;border:2px solid #18303b;box-shadow:0 0 0 2px rgba(213,163,110,.35)}input[type=range]::-moz-range-thumb{background:#e5c9a2;width:10px;height:10px;border-radius:50%;border:0}.range-ends{display:flex;justify-content:space-between;color:#778c8f;font-size:9px;margin-top:7px}.section-line.compact{margin-top:27px;margin-bottom:14px;border-top:1px solid var(--border);padding-top:18px}.segmented{display:flex;gap:5px}.segmented button{flex:1;background:rgba(122,144,148,.09);border:1px solid var(--border);padding:12px 6px;color:#a7b8b7;font-size:10px;letter-spacing:1px}.segmented button.selected{border-color:#b99772;color:#e0c09b;background:rgba(165,120,74,.18)}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:19px;font-size:11px;color:#b2c0be}.tiny-btn{font-size:9px;background:transparent;border:1px solid var(--border);color:#c6ab8b;padding:7px 8px;letter-spacing:1px}.inspector{font-size:11px;line-height:1.5;color:#b9c5bf;min-height:63px}.inspect-hint{color:#718e94}.inspect-name{font-size:16px;color:white;letter-spacing:.1px;margin:5px 0}.inspect-tag{font-size:9px;letter-spacing:1.3px;color:var(--gold)}.inspect-stats{display:flex;gap:20px;margin:11px 0 12px}.inspect-stats b{font-size:16px;font-family:Georgia,serif;color:#f0e3ca;font-weight:400}.inspect-stats small{font-size:8px;color:#92aaa7;display:block}.inspect-btn{background:var(--gold);color:#101f27;border:0;padding:10px 13px;font-weight:700;letter-spacing:1px;font-size:9px}.inspect-btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.minimap{position:absolute;bottom:90px;right:29px;width:288px;z-index:3;padding:12px 12px 10px;border-radius:3px}.minimap-head,.minimap-foot{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1px;color:#ccddd7}.minimap-head small{color:#839fa2;font-size:8px;margin-left:3px}.compass{color:var(--gold)}#map{margin-top:11px;display:block;width:100%;height:auto;aspect-ratio:1;cursor:crosshair;border:1px solid rgba(171,191,184,.13);background:#17333c}.minimap-foot{margin-top:9px;color:#91aaaa;font-size:8px}.key-dot{display:inline-block;width:6px;height:6px;background:#e4b074;border-radius:50%;margin-right:6px;box-shadow:0 0 8px #e4b074}
.bottom{position:absolute;left:394px;bottom:88px;display:flex;align-items:center;justify-content:space-between;z-index:3;gap:26px;padding:14px 18px;background:rgba(8,23,32,.56);border:1px solid var(--border);min-width:390px;max-width:calc(100vw - 750px)}.bottom>div:first-child{display:flex;align-items:center;gap:10px}.bottom #districtName{font-size:11px;letter-spacing:1px;white-space:nowrap}.bottom small{font-size:8px;letter-spacing:1px;color:#8ba5a6;white-space:nowrap}.hud-right{display:flex;gap:18px;color:#829a9e;font-size:9px;white-space:nowrap}.hud-right b{color:#d6e5dc;margin-left:5px}.footerbar{position:absolute;bottom:0;left:0;right:0;z-index:4;padding:22px 38px;display:flex;gap:5px;align-items:center;background:linear-gradient(0deg,rgba(5,17,24,.95),rgba(5,17,24,.35));border-top:1px solid rgba(153,180,174,.14);font-size:9px;letter-spacing:1.1px;color:#a0b2b4}.keycap{padding:4px 6px;border:1px solid rgba(179,193,192,.30);border-radius:2px;color:#c7d5d3;min-width:20px;text-align:center;font-size:9px}.separator{width:1px;height:19px;background:var(--border);margin:0 16px}.mouse-icon{font-size:22px;color:var(--gold);line-height:0}
.intro{position:absolute;inset:0;background:linear-gradient(100deg,rgba(5,13,19,.97),rgba(5,13,19,.83) 42%,rgba(5,13,19,.38) 70%),radial-gradient(circle at 80% 75%,rgba(168,119,66,.17),transparent 40%);z-index:10;display:flex;align-items:center;padding:0 clamp(30px,10vw,200px);backdrop-filter:blur(8px);transition:opacity .8s,visibility .8s}.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}.intro-inner{max-width:570px}.intro-tag{font-size:11px;letter-spacing:3px;color:#9aaca9}.intro-tag span{color:var(--gold);margin:0 8px}.intro-overline{font-size:12px;letter-spacing:5px;color:var(--gold);margin:62px 0 19px}.intro-title{font-size:clamp(68px,10vw,147px);font-family:Georgia,serif;letter-spacing:-5px;line-height:.82;color:#e9ebdd}.intro-title i{font-weight:400;color:#c6a07b}.intro-title span{color:#ae7a4d}.intro-rule{width:90px;height:2px;background:#d0a06d;margin-top:35px}.intro-subtitle{font-size:13px;letter-spacing:5px;margin-top:20px;color:#dcc4a2}.intro p{max-width:470px;color:#a6b8bb;font-size:14px;line-height:1.75;margin:24px 0 32px}.enter-button{background:#d5a673;border:0;padding:19px 25px;color:#0e222a;letter-spacing:2.3px;font-size:12px;font-weight:800;min-width:260px;display:flex;justify-content:space-between}.enter-button:hover{background:#f0c08a}.intro-bottom{margin-top:72px;font-size:9px;letter-spacing:1.1px;color:#839a9e}.intro-bottom span{margin-left:20px;color:#cfb28d}.intro-index{position:absolute;bottom:40px;right:40px;writing-mode:vertical-rl;color:#b49c80;letter-spacing:3px;font-size:9px}.toast{position:absolute;bottom:138px;left:50%;transform:translateX(-50%) translateY(12px);color:#eed7b5;background:rgba(8,27,33,.91);border:1px solid #967b60;padding:12px 19px;font-size:11px;letter-spacing:.5px;opacity:0;transition:.22s;z-index:8;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.error-panel{position:absolute;z-index:20;inset:30%;padding:30px;color:white;background:#4c242a;border:1px solid #d78d7b}.hide-ui .ui{display:none}.hide-ui .topbar{background:transparent}
@media(max-width:1240px){.top-middle{display:none}.leftpanel{width:285px;padding:20px}.leftpanel h1{font-size:29px}.rightpanel,.minimap{width:255px}.bottom{left:327px;max-width:calc(100vw - 615px)}.bottom small{display:none}.footerbar{padding:16px 24px;font-size:8px}}
@media(max-width:850px){.topbar{height:67px;padding:0 14px}.brand b{font-size:16px}.top-right{gap:8px}.online{display:none}.leftpanel{left:10px;top:80px;width:220px;max-height:38vh}.leftpanel h1{font-size:26px;margin:12px 0}.lead{display:none}.metrics strong{font-size:17px}.metrics span{font-size:7px}.destinations .destination{padding:6px}.rightpanel{top:auto;bottom:80px;right:10px;width:220px;max-height:28vh;min-height:0}.minimap{width:170px;right:10px;top:80px;bottom:auto}.minimap-head small,.minimap-foot{display:none}.bottom{left:10px;bottom:70px;min-width:0;max-width:calc(100vw - 255px);padding:11px}.hud-right{display:none}.footerbar{overflow:auto;white-space:nowrap;gap:4px;padding:15px 10px}.intro{padding:35px}.intro-overline{margin-top:25px}.intro-bottom{margin-top:35px}.intro-bottom span{display:block;margin:10px 0}.intro-title{font-size:67px}}