:root{color-scheme:dark;--ink:#121c21;--glass:rgba(17,27,31,.90);--border:rgba(213,196,158,.17);--gold:#e1b779;--gold-dim:#ac8756;--cream:#eee3cc;--muted:#9fa7a5;--blue:#87b2bd}
*{box-sizing:border-box}html,body{margin:0;height:100%;min-height:600px;background:#223338;color:var(--cream);font:12px/1.55 'Trebuchet MS','Arial',sans-serif;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#app,#viewport{position:absolute;inset:0}#viewport{background:linear-gradient(180deg,#354a56 0%,#98a4a0 28%,#c8a984 51%,#967758 100%)}#world{display:block;width:100%;height:100%}.atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 61% 34%,rgba(254,216,155,.16),transparent 43%),linear-gradient(0deg,rgba(18,24,26,.48) 0%,transparent 24%,transparent 82%,rgba(16,25,30,.34));}
.glass{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(18px);box-shadow:0 12px 36px rgba(0,0,0,.13)}
#header{height:73px;position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--border);background:rgba(15,24,28,.88);backdrop-filter:blur(16px)}.identity{display:flex;align-items:center;gap:16px}.seal{width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font:bold 27px Georgia,serif}.seal span{font-size:18px}.eyebrow{color:var(--gold-dim);letter-spacing:2px;font-size:9px;font-weight:bold}.brand{font:16px Georgia,serif;letter-spacing:1.8px;color:#f2e8d8;white-space:nowrap}.accent{color:var(--gold)}.header-center{letter-spacing:2.5px;color:#b5afa0;font-size:10px}.squiggle{color:var(--gold-dim);margin:0 15px}.header-actions{display:flex;align-items:center;gap:13px}.live{font-size:9px;letter-spacing:1px;color:#bdc8c0;margin-right:8px}.live span,.tiny-status i{display:inline-block;background:#8db69c;border-radius:50%;width:6px;height:6px;margin-right:7px;box-shadow:0 0 9px #8db69c}.outline,.gold{height:33px;border:1px solid rgba(230,204,157,.36);background:transparent;color:var(--cream);padding:0 15px;font-size:9px;letter-spacing:1px;font-weight:bold}.gold{background:var(--gold);color:#1b2526;border-color:var(--gold)}.gold span{margin-left:8px}
#places,#controls{position:absolute;z-index:4;top:95px;width:284px;bottom:188px;min-height:420px;padding:20px 19px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#625c50 transparent}#places{left:22px}#controls{right:22px;width:303px}.panel-title{display:flex;justify-content:space-between;align-items:center;color:var(--gold);letter-spacing:1.7px;font-size:10px;font-weight:bold;padding-bottom:16px;border-bottom:1px solid var(--border)}.small-symbol{font-size:20px}.tiny-status{color:#90b79b;letter-spacing:0;font-size:8px;font-weight:normal}.panel-sub{color:#abb1ad;line-height:1.75;padding:16px 0;font-size:11px}.section-head{font-size:9px;color:var(--gold);display:flex;justify-content:space-between;letter-spacing:1.3px;font-weight:bold;border-bottom:1px solid var(--border);padding:0 0 10px;margin-bottom:8px}.section-head span{color:#758b8e;letter-spacing:.6px;font-size:8px}.gap-top{margin-top:18px}.landmark{display:flex;gap:12px;align-items:center;padding:10px 5px;background:none;border:0;border-bottom:1px solid rgba(210,197,170,.10);color:var(--cream);width:100%;text-align:left;transition:background .15s}.landmark:hover,.landmark.selected{background:rgba(225,183,121,.1)}.landmark .num{color:var(--gold-dim);font:17px Georgia,serif}.landmark .place-title{font:bold 11px/1.2 Georgia,serif;letter-spacing:.4px}.landmark .sub{color:#8e9999;font-size:9px;margin-top:4px}.landmark .arrow{margin-left:auto;color:var(--gold)}.panel-foot{text-align:center;padding:20px 0 2px;font-size:9px;letter-spacing:1.3px;color:#8b9693}.ornament{color:var(--gold);padding:0 8px}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.metric{padding:13px 11px;border:1px solid var(--border);background:rgba(211,185,138,.045)}.metric small{display:block;color:var(--gold-dim);font-size:8px;letter-spacing:.7px}.metric strong{display:block;font:bold 24px Georgia,serif;color:var(--cream);margin-top:4px;font-variant-numeric:tabular-nums}.metric span{color:#879393;font-size:9px}.slider-row{padding:9px 0 5px}.slider-head{display:flex;justify-content:space-between;color:#d5d7ce;font-size:10px}.slider-head output{font-variant-numeric:tabular-nums;color:var(--gold)}input[type=range]{appearance:none;-webkit-appearance:none;height:3px;width:100%;background:linear-gradient(90deg,#d1a971,#545e5f);border-radius:4px;outline:none;margin:12px 0 5px}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#e6bf88;box-shadow:0 0 0 3px #1b2524;border-radius:50%;border:1px solid #f5d6a6}.actions{display:flex;gap:8px;margin-top:16px}.actions button{flex:1;border:1px solid rgba(213,190,149,.32);padding:9px;background:transparent;color:var(--cream);font-size:9px;letter-spacing:1px}.actions .primary{background:var(--gold);color:#192426;border-color:var(--gold);font-weight:bold}.engineering-note{color:#8d9897;font-size:9px;line-height:1.6;margin:12px 0 0}
#focus{position:absolute;left:clamp(325px,27%,500px);top:29%;z-index:2;width:400px;pointer-events:none;text-shadow:0 2px 14px #4b3d2c}#focus .tag{color:#f6d29b;border-left:2px solid var(--gold);padding-left:11px;font-size:10px;letter-spacing:2px}#focus h1{font:clamp(40px,4.5vw,70px)/1.06 Georgia,serif;letter-spacing:-1px;color:#fff5e6;margin:17px 0 18px}#focus h1 span{color:var(--gold)}#focus p{font-size:12px;max-width:350px;color:#fff1d9;line-height:1.85}#focus .focus-actions{pointer-events:all;display:flex;gap:12px;margin-top:22px}#focus button{padding:12px 14px;font-size:10px;letter-spacing:1px;border:1px solid var(--gold);background:var(--gold);color:#253134;font-weight:bold}#focus button+button{background:rgba(17,26,29,.50);color:#f1dbba}#focus button span{padding-left:12px}#focus.fade{opacity:0;pointer-events:none;transition:opacity .8s}
#labels{position:absolute;z-index:2;bottom:194px;left:325px;right:337px;display:flex;justify-content:space-between;pointer-events:none}.coord{background:rgba(12,21,25,.6);padding:5px 9px;font-size:9px;letter-spacing:1px;color:#c5d5cc}
#footer{position:absolute;bottom:0;left:0;right:0;height:177px;z-index:5;border-left:0;border-right:0;border-bottom:0;padding:14px 27px 10px}.footer-head{display:flex;justify-content:space-between;color:var(--gold);letter-spacing:1.5px;font-size:9px;font-weight:bold}.dot-gold{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--gold);margin-right:6px}.subnote{color:#788a88}.clock{color:#c5c6b9}.footer-body{display:flex;align-items:center;gap:25px;height:133px}#networkCard{width:35%;min-width:300px;height:120px}#network{width:100%;height:100%}.history-wrap{height:117px;flex:1;min-width:150px}.microheading{color:#b7b5a7;font-size:9px;letter-spacing:1px}.microheading span{float:right;color:#778e91}#trend{display:block;width:100%;height:96px}.footer-buttons{display:flex;flex-direction:column;gap:5px;min-width:155px}.footer-buttons button{border:1px solid var(--border);background:rgba(201,185,155,.07);color:#e5ded0;text-align:left;padding:7px 11px;font-size:9px;letter-spacing:1px}.footer-buttons small{float:right;color:var(--gold)}#toast{position:absolute;left:50%;bottom:210px;transform:translateX(-50%);background:rgba(23,34,37,.93);border:1px solid var(--gold-dim);color:#f1dfbb;padding:12px 18px;opacity:0;transition:.3s;pointer-events:none;z-index:9;letter-spacing:.7px;font-size:11px}#toast.show{opacity:1}
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(8,14,17,.65);backdrop-filter:blur(6px);z-index:15}.modal.hidden{display:none}.modal-box{position:relative;width:min(560px,90vw);padding:31px 36px;background:#19272c;border:1px solid #8d795a;box-shadow:0 20px 60px #0009}.modal h2{font:34px Georgia,serif;margin:10px 0 23px}.close{position:absolute;right:21px;top:15px;font-size:27px;color:var(--cream);background:none;border:0}.help-keys{display:grid;grid-template-columns:1fr 1fr;gap:15px;color:#d2d3c6}.help-keys div{display:grid;gap:4px}kbd{background:#314044;color:var(--gold);padding:3px 5px;min-width:69px;width:fit-content;font:10px monospace}
@media(max-width:1250px){.header-center{display:none}#focus{left:330px;width:330px}#focus h1{font-size:44px}#places{width:250px}#controls{width:280px}}
@media(max-width:900px){#places{display:none}#controls{top:83px;bottom:165px;right:8px;width:246px;padding:12px}#header{padding:0 10px}.identity{gap:8px}.brand{font-size:12px}.seal{width:32px;height:32px;font-size:21px}.header-actions .live,.header-actions .outline{display:none}#focus{left:18px;top:26%;width:calc(100% - 310px)}#focus h1{font-size:42px}#labels{display:none}#footer{padding:9px;height:155px}.footer-buttons{display:none}.footer-body{gap:5px}#networkCard{min-width:0;width:48%}}
@media(max-width:620px){#controls{top:auto;left:8px;right:8px;bottom:155px;width:auto;height:215px;min-height:0;overflow:auto}#focus{top:14%;width:calc(100% - 30px)}#focus h1{font-size:35px}#focus p{display:none}.metric-grid{grid-template-columns:repeat(4,1fr)}.metric{padding:5px}.metric strong{font-size:17px}.metric span{font-size:7px}#footer{height:145px}#networkCard{display:none}.history-wrap{width:100%}.brand{font-size:11px}.eyebrow{font-size:7px}}