:root{font-family:Arial,sans-serif;color:#dceeea;background:#0a191c;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;border:1px solid #365151;color:#dceeea;background:#142b30;padding:10px 14px;border-radius:8px;transition:background .2s}button:hover,button.active,button[aria-pressed=true]{background:#245849;border-color:#78c5ab}button:focus-visible{outline:2px solid #ffd581;outline-offset:3px}header{height:82px;display:flex;gap:30px;align-items:center;padding:14px 24px;border-bottom:1px solid #314446}.brand{font-size:20px;letter-spacing:1px;min-width:225px}.brand b{color:#8ce3c1}.brand small{display:block;font-size:9px;letter-spacing:2.5px;margin-top:7px;color:#9fbcb8}nav{display:flex;gap:8px}.live{margin-left:auto;font-size:12px;color:#a7c0ba}main{display:grid;grid-template-columns:minmax(0,1fr) 310px;height:calc(100dvh - 82px)}#viewport{position:relative;overflow:hidden;background:#b7c5c2}canvas{display:block;width:100%;height:100%;outline:none}.intro{position:absolute;left:26px;top:22px;pointer-events:none;z-index:2;color:#17352f}.intro>span{font-size:10px;letter-spacing:2px;font-weight:bold}h1{font-size:32px;margin:10px 0}p{font-size:13px;line-height:1.6}.intro p{max-width:390px;margin-top:0}.toolbar{position:absolute;bottom:38px;left:22px;display:flex;gap:7px;z-index:4}.toolbar button{box-shadow:0 3px 15px #0002}.footnote{position:absolute;bottom:12px;left:24px;font-size:10px;color:#25453d}.keys{position:absolute;left:25px;bottom:90px;background:#102b31e8;padding:12px;border-radius:8px;font-size:12px}.keys[hidden]{display:none}aside{padding:24px 20px;overflow:auto;background:linear-gradient(160deg,#193b3e,#0c2026)}.sectionhead{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.8px;color:#a4d9c9}.sectionhead b{padding:6px 8px;background:#2d514e;border-radius:5px}h2{font-size:23px;line-height:1.25}#detail{border-bottom:1px solid #3a5554;padding-bottom:15px;margin-bottom:15px}#detail p{color:#bed0cd}.stats{display:flex;gap:12px}.stats>div{flex:1;background:#ffffff07;padding:12px;border:1px solid #48645b;border-radius:8px}.stats strong{font-size:20px;color:#9be7c7}.stats small{display:block;font-size:10px;line-height:1.4;margin-top:6px;color:#aac3bd}#list{display:grid;gap:7px}#list button{text-align:left;display:flex;gap:12px;align-items:center;padding:12px 10px;background:#ffffff04}#list button.active{background:#2b5a4e}#list i{font-style:normal;color:#88bea9;font-size:10px}#list span{font-size:12px;line-height:1.35}.source{font-size:10px;line-height:1.6;color:#90aaa6;margin-top:20px}#loading{position:absolute;inset:45% 25%;height:70px;padding:22px;text-align:center;border-radius:12px;background:#163534;color:#e7fff7;z-index:10}#labels{position:absolute;inset:0;pointer-events:none;z-index:3}.tag{position:absolute;transform:translate(-50%,-100%);background:#12352ef0;color:#dffff1;padding:6px 10px;border-radius:7px;font-size:10px;white-space:nowrap;box-shadow:0 2px 8px #0002}.tag:after{content:'';display:block;height:12px;width:1px;background:#487d67;position:absolute;left:50%;top:100%}@media(max-width:1000px){header{gap:12px;padding:12px}.live{display:none}nav{flex-wrap:wrap}nav button{padding:7px;font-size:11px}main{grid-template-columns:minmax(0,1fr) 250px}.brand{min-width:170px}aside{padding:15px}.toolbar{flex-wrap:wrap;right:12px}.toolbar button{font-size:11px;padding:8px}.intro h1{font-size:25px}}@media(max-width:650px){header{height:auto;align-items:start}.brand{min-width:130px;font-size:16px}.brand small{font-size:8px;letter-spacing:1px}main{height:auto;display:block}#viewport{height:70dvh;min-height:420px}aside{max-height:50dvh}.intro{left:15px;top:15px}.intro p{max-width:240px}.footnote{font-size:8px}}
.walking .intro{display:none}

.layout-tools{position:absolute;right:16px;top:18px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:330px;z-index:5}.layout-tools>span{flex-basis:100%;font-size:10px;text-align:right;color:#25453d;letter-spacing:1px}.layout-tools button{padding:7px 9px;font-size:11px}.layout-tools button:disabled{opacity:.4;cursor:default}.layout-note{position:absolute;bottom:89px;left:22px;right:20px;font-size:11px;color:#174b3a;background:#e4f1e6e8;padding:8px 12px;border:1px solid #aac9b7;border-radius:6px;z-index:4;pointer-events:none}.walking .layout-note,.walking .layout-tools{display:none}.layout-actions{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.layout-actions button{font-size:12px}.layout-position{color:#ffe0a2!important;font-variant-numeric:tabular-nums}#viewport canvas{touch-action:none}@media(max-width:1000px){.layout-tools{top:130px;right:12px;max-width:260px}.layout-note{bottom:123px;left:12px;right:12px}}@media print{.layout-tools,.layout-note{display:none!important}}