:root{--panel:#12141ab8;--text:#f1f1ec;--muted:#b9bcc4;--accent:#fd3;--btn:#7a7a7a;--btn-hi:#a8a8a8;--btn-lo:#3e3e3e;--btn-active:#4f8a3a}*{box-sizing:border-box}html,body{height:100%;color:var(--text);background:#b9d7f4;margin:0;font:14px/1.35 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#app,#app canvas{display:block;position:fixed;inset:0}#app canvas{touch-action:none}.panel{background:var(--panel);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:2px solid #0009;border-radius:3px;position:fixed;box-shadow:inset 0 0 0 1px #ffffff1f}button.mc,select.mc{color:#fff;text-shadow:2px 2px #3a3a3a;background:var(--btn);box-shadow:inset 2px 2px 0 var(--btn-hi), inset -2px -2px 0 var(--btn-lo);cursor:pointer;border:2px solid #000;border-radius:0;padding:6px 10px;font-family:VT323,monospace;font-size:20px;line-height:1}button.mc:hover,select.mc:hover{background:#8a8fb8;box-shadow:inset 2px 2px #b8bde6,inset -2px -2px #4c5070}button.mc.active{background:var(--btn-active);box-shadow:inset 2px 2px #7fbf62,inset -2px -2px #2a4f1e}button.mc.small,select.mc.small{padding:4px 8px;font-size:17px}select.mc option{text-shadow:none;background:#333;font-family:system-ui,sans-serif;font-size:14px}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}#hud{min-width:250px;max-width:calc(100vw - 24px);padding:10px 12px;top:12px;left:12px}#hud .title{color:var(--accent);text-shadow:2px 2px #000;font-family:Silkscreen,monospace;font-size:20px}#hud .sub{color:var(--muted);margin-bottom:6px;font-size:12px}#hud dl{grid-template-columns:auto 1fr;gap:1px 10px;margin:0;font-size:13px;display:grid}#hud dt{color:var(--muted)}#hud dd{font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;max-width:200px;margin:0;overflow:hidden}#hud .perf{color:var(--muted);font-variant-numeric:tabular-nums;margin-top:6px;font-size:11px}#toolbar{flex-direction:column;gap:6px;width:212px;padding:8px;display:flex;top:12px;right:12px}#toolbar .seg{display:flex}#toolbar .seg button{flex:1}#toolbar .row{gap:4px;display:flex}#toolbar .row button{flex:1}#toolbar .row button:last-child{flex:0 0 34px}#toolbar .quality{color:var(--muted);justify-content:space-between;align-items:center;font-size:13px;display:flex}#landmarks{width:100%}.walkflags{gap:6px;display:none}body[data-mode=walk] .walkflags{display:flex}.flag{color:#aaa;background:#444;border:2px solid #000;padding:1px 8px;font-family:VT323,monospace;font-size:17px}.flag.on{background:var(--btn-active);color:#fff}button.flag{cursor:pointer;line-height:1.1}button.flag:hover{filter:brightness(1.15)}.walkflags{flex-wrap:wrap}body[data-cam=free] .hint-follow,body:not([data-cam=free]) .hint-free{display:none}body[data-cam=follow] #app canvas{cursor:grab}#nav{grid-template-columns:repeat(3,auto);place-items:center;gap:4px;padding:6px;display:grid;bottom:36px;right:12px}#nav #tilt-u{grid-column:1}#nav #tilt-d{grid-column:3}body[data-mode=walk] #nav .mc{display:none}#compass{cursor:pointer;background:radial-gradient(#3b3f48,#1f2228);border:2px solid #000;border-radius:50%;width:46px;height:46px;padding:0;position:relative;box-shadow:inset 0 0 0 2px #ffffff26}#compass-needle{transition:transform .1s linear;display:block;position:absolute;inset:4px}#compass-needle:before{content:"";border:5px solid #0000;border-top:0;border-bottom:14px solid #e03a2f;margin-left:-5px;position:absolute;top:4px;left:50%}#compass-needle:after{content:"";border:5px solid #0000;border-top:14px solid #ddd;border-bottom:0;margin-left:-5px;position:absolute;bottom:4px;left:50%}#compass .n{color:#fff;font:700 9px monospace;display:none;position:absolute;top:-3px;left:50%;transform:translate(-50%)}#mm-wrap{padding:4px;line-height:0;bottom:36px;left:12px}#minimap{width:240px;height:200px;image-rendering:pixelated;cursor:crosshair}#mm-zoom{line-height:1;position:absolute;top:8px;left:8px}#labels{pointer-events:none;position:fixed;inset:0;overflow:hidden}.lbl{white-space:nowrap;will-change:transform;position:absolute;top:0;left:0}.lbl.street{color:#fff;text-shadow:1px 1px #000,-1px -1px #000,1px -1px #000,-1px 1px #000;font-family:VT323,monospace;font-size:17px}.lbl.poi{color:#fff;background:#0f1116c7;border:1px solid #ffffff40;border-radius:2px;padding:2px 6px;font-size:12px;font-weight:600}.lbl.poi-landmark,.lbl.poi-university{color:var(--accent)}.lbl.poi-park{color:#9be07a}.lbl.poi-hospital{color:#ff9a9a}#crosshair{color:#fff;text-shadow:0 0 2px #000;pointer-events:none;font:24px monospace;display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}body.locked #crosshair{display:block}#walk-hint{white-space:nowrap;padding:6px 12px;font-family:VT323,monospace;font-size:19px;display:none;bottom:36px;left:50%;transform:translate(-50%)}body[data-mode=walk]:not(.locked) #walk-hint{display:block}#help{z-index:5;width:min(620px,100vw - 32px);max-height:calc(100vh - 32px);padding:18px 22px;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}#help.hidden{display:none}#help h2{color:var(--accent);margin:0 0 8px;font-family:Silkscreen,monospace;font-weight:400}#help h3{color:var(--muted);margin:6px 0 4px;font-size:14px}#help ul{margin:0;padding-left:18px}#help .cols{grid-template-columns:1fr 1fr;gap:16px;display:grid}#help .fine{color:var(--muted);font-size:12px}#help-close{position:absolute;top:10px;right:10px}#loading{z-index:10;image-rendering:pixelated;background:#3a2a1c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23866043'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23714f35'/%3E%3Crect x='40' y='16' width='8' height='8' fill='%239a7050'/%3E%3Crect x='24' y='40' width='8' height='8' fill='%23714f35'/%3E%3Crect x='48' y='48' width='8' height='8' fill='%239a7050'/%3E%3Crect x='0' y='32' width='8' height='8' fill='%235e4029'/%3E%3C/svg%3E") 0 0/64px;place-items:center;transition:opacity .4s;display:grid;position:fixed;inset:0}#loading.hidden{opacity:0;pointer-events:none}#loading .box{text-align:center;padding:24px}#loading .logo{color:#fff;text-shadow:4px 4px #3f3f3f;font-family:Silkscreen,monospace;font-size:clamp(28px,7vw,56px)}#load-msg{color:#fff;text-shadow:2px 2px #000;margin:12px 0;font-family:VT323,monospace;font-size:22px}#loading code{background:#0006;padding:1px 4px;font-size:14px}#loading .bar{background:#555;border:2px solid #000;width:min(360px,80vw);height:14px;margin:0 auto;box-shadow:inset 2px 2px #333}#load-bar{background:#6ad04a;width:0;height:100%;transition:width .15s;box-shadow:inset 0 -3px #3c8a2a}#attribution{color:#333;white-space:nowrap;text-overflow:ellipsis;background:#ffffffbf;max-width:100vw;padding:2px 8px;font-size:11px;position:fixed;bottom:0;right:0;overflow:hidden}@media (max-width:720px){#hud{min-width:0;padding:6px 8px}#hud dl,#hud .perf{display:none}#toolbar{width:170px}#mm-wrap{display:none}#help .cols{grid-template-columns:1fr}#walk-hint{white-space:normal;text-align:center;width:calc(100vw - 32px)}}