*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;min-height:100%}body{text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#020617;margin:0;font-family:Inter,SF Pro Text,PingFang SC,Microsoft YaHei,system-ui,-apple-system,sans-serif}.page{color:#e5edf7;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 20% 12%,#1e40af2e,#0000 33%),radial-gradient(circle at 78% 18%,#0891b224,#0000 27%),linear-gradient(145deg,#070b17 0%,#04070f 48%,#02040a 100%);min-height:100svh;position:relative;overflow:hidden}.page:after{content:"";pointer-events:none;z-index:1;background:radial-gradient(circle at 55% 42%,#d8e8ff0a,#0000 36%),radial-gradient(circle,#8faad608,#0000 50%);position:absolute;inset:0}.globe-full{z-index:0;position:absolute;inset:0}.map-canvas{width:100%;height:100%}.map-error{z-index:7;color:#fde68a;background:#1e1404b3;border:1px solid #fbbf2473;border-radius:12px;padding:12px;font-size:.88rem;position:absolute;inset:auto 16px 76px}.hero{z-index:5;pointer-events:none;position:absolute;top:18px;left:22px}.hero h1{letter-spacing:.13em;text-transform:uppercase;color:#dbeafeb8;margin:0;font-size:1.25rem;font-weight:600}.pin-popup-overlay{z-index:8;position:fixed;inset:0}.pin-popup{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#080e1cd9;border:1px solid #64a0ff40;border-radius:2px;flex-direction:column;gap:10px;width:max-content;max-width:min(340px,100vw - 32px);padding:14px 18px;animation:.18s ease-out popup-in;display:flex;position:absolute;transform:translate(-50%,calc(-100% - 16px));box-shadow:0 12px 48px #00000080,0 0 18px #3c82ff14}@keyframes popup-in{0%{opacity:0;transform:translate(-50%,calc(-100% - 16px))scale(.9)}to{opacity:1;transform:translate(-50%,calc(-100% - 16px))scale(1)}}.pin-popup-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.pin-popup-header h3{letter-spacing:.08em;text-transform:uppercase;color:#c8e1ffeb;margin:0;font-size:.92rem;font-weight:600}.pin-popup-close{color:#a0bee699;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:.9rem;transition:color .2s}.pin-popup-close:hover{color:#dbeafe}.pin-popup img{object-fit:cover;border-radius:2px;width:100%;max-height:200px}.pin-popup p{color:#b4cdf0d9;margin:0;font-size:.82rem;line-height:1.5}.pin-popup-coords{letter-spacing:.06em;color:#64aaff99;font-size:.72rem}.panel-overlay{z-index:4;position:absolute;inset:0}.panel{z-index:5;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1;background:#080e1ca6;border:1px solid #64a0ff33;border-radius:2px;width:min(390px,100% - 24px);transition:transform .25s,opacity .25s;position:absolute;top:60px;bottom:64px;right:20px;transform:translate(0);box-shadow:0 18px 60px #02061773}.panel.closed{opacity:0;pointer-events:none;transform:translate(108%)}.top-actions{z-index:6;gap:10px;display:flex;position:absolute;top:18px;right:22px}.fps-counter{z-index:6;letter-spacing:.08em;color:#8caad24d;pointer-events:none;font-size:.65rem;font-weight:400;position:absolute;top:56px;right:22px}.top-actions button{letter-spacing:.12em;text-transform:uppercase;color:#b4d2ffd9;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#080e1c8c;border:1px solid #64a0ff40;border-radius:2px;padding:6px 16px;font-size:.78rem;font-weight:500;transition:all .25s;position:relative}.top-actions button:before{content:"";clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);pointer-events:none;background:linear-gradient(135deg,#50a0ff1f,#0000 60%);border-radius:2px;position:absolute;inset:0}.top-actions button:hover{color:#dbeafe;background:#0c1834b8;border-color:#64b4ff80;box-shadow:0 0 12px #50a0ff2e,inset 0 0 8px #50a0ff0f}.panel-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.panel-close{color:#b4d2ffd9;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);letter-spacing:.1em;text-transform:uppercase;background:#080e1c8c;border:1px solid #64a0ff40;border-radius:2px;padding:5px 14px;font-size:.76rem;font-weight:500;transition:all .25s}.panel-close:hover{color:#dbeafe;background:#0c1834b8;border-color:#64b4ff80;box-shadow:0 0 10px #50a0ff26}.panel-scroll{flex-direction:column;gap:14px;height:100%;padding:18px;display:flex;overflow:auto}.panel h2,.panel h3{letter-spacing:.08em;text-transform:uppercase;color:#b4d2ffe6;margin:0;font-weight:600}.panel h2{font-size:.9rem}.panel-hint{color:#8caad2b3;letter-spacing:.04em;margin:0;font-size:.76rem;line-height:1.4}.tone-control{background:#080e1c66;border:1px solid #64a0ff26;border-radius:2px;gap:8px;padding:10px 12px;display:grid}.tone-control label{letter-spacing:.04em;color:#a0bee6cc;font-size:.76rem}.tone-control input[type=range]{width:100%}.pin-form{flex-direction:column;gap:10px;display:flex}.coords,.empty-tip,.empty-list{color:#96b4dccc;letter-spacing:.03em;background:#080e1c66;border:1px solid #64a0ff26;border-radius:2px;padding:10px 12px;font-size:.8rem}.pin-form input,.pin-form textarea{box-sizing:border-box;color:#dbeafe;width:100%;font:inherit;letter-spacing:.03em;background:#04081299;border:1px solid #64a0ff33;border-radius:2px;padding:9px 12px;font-size:.84rem;transition:border-color .2s,box-shadow .2s}.pin-form textarea{resize:vertical;min-height:88px}.pin-form input:focus,.pin-form textarea:focus{border-color:#50a0ff80;outline:none;box-shadow:0 0 8px #50a0ff26}.upload{letter-spacing:.04em;color:#a0bee6cc;flex-direction:column;align-items:flex-start;gap:8px;font-size:.8rem;display:inline-flex}.upload input{color:#78aaffcc;background:0 0;border:none;padding:0;font-size:.78rem}button{font:inherit;cursor:pointer;border:none;border-radius:2px}.pin-form button,.pin-list button,.danger{letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);padding:8px 14px;font-size:.78rem;font-weight:500;transition:all .25s}.pin-form button{color:#c8e1ffe6;background:#14327899;border:1px solid #508cff59}.pin-list button{text-align:left;color:#b4d2ffd9;background:#080e1c8c;border:1px solid #64a0ff33;width:100%}.pin-form button:hover,.pin-list button:hover{color:#dbeafe;background:#0c1834b8;border-color:#64b4ff80;box-shadow:0 0 10px #50a0ff26}.pin-card{background:#080e1c80;border:1px solid #64a0ff26;border-radius:2px;flex-direction:column;gap:8px;padding:12px;display:flex}.pin-card h3{margin:0;font-size:.85rem}.pin-card img{object-fit:cover;border-radius:2px;width:100%;height:auto;max-height:160px}.pin-card p{color:#b4cdf0d9;margin:0;font-size:.82rem;line-height:1.4}.pin-meta{letter-spacing:.04em;color:#64b4ffb3;font-size:.76rem}.danger{color:#ffb4b4e6;background:#8c14144d;border:1px solid #ff50504d}.danger:hover{color:#fecaca;background:#a01e1e73;border-color:#ff646480;box-shadow:0 0 10px #ff3c3c26}.pin-list ul{gap:8px;max-height:180px;margin:10px 0 0;padding:0;list-style:none;display:grid;overflow:auto}.record{z-index:6;text-align:center;color:#7890b2;-webkit-user-select:none;user-select:none;pointer-events:none;white-space:nowrap;font-size:.85rem;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}@media (width<=980px){.hero{top:12px;left:14px}.panel{width:auto;height:min(45vh,420px);inset:auto 8px 48px}.panel.closed{transform:translateY(110%)}.top-actions{gap:8px;top:12px;right:14px}.panel-scroll{padding:14px}.record{font-size:.75rem;bottom:8px}}