:root{--panel-background:#fffffff0;--panel-text:#1f2a33;--panel-muted:#5b6770;--panel-border:#00000014;--accent:#1a73e8;color:var(--panel-text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{background:#f3efe4;height:100%;margin:0;overflow:hidden}.app{height:100%;position:relative}.map-canvas{touch-action:none;cursor:grab;position:absolute;inset:0}.map-canvas:active{cursor:grabbing}.map-canvas{overflow:hidden}.ground-plane{will-change:transform;position:absolute;overflow:hidden}.map-canvas canvas{will-change:transform;display:block;position:absolute;top:0;left:0}.message{padding:24px}.north-arrow{background:var(--panel-background);pointer-events:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;font-size:10px;font-weight:700;line-height:1;display:flex;position:absolute;top:16px;right:16px;box-shadow:0 1px 4px #0003}.compass-hint{background:var(--panel-background);max-width:calc(100% - 64px);color:var(--panel-text);text-align:center;pointer-events:none;border-radius:12px;margin:0;padding:10px 16px;font-size:14px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 10px #0003}.traces-button{right:16px;bottom:calc(156px + env(safe-area-inset-bottom));background:var(--panel-background);width:52px;height:52px;color:var(--panel-muted);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;box-shadow:0 2px 10px #0003}.traces-button .recording-dot{position:absolute;top:6px;right:6px}.recording-dot{background:#e03131;border-radius:50%;flex:none;width:10px;height:10px;display:inline-block;box-shadow:0 0 0 2px #fff}.recording-dot.paused{background:#868e96}.recording-status{background:var(--panel-background);color:var(--panel-text);font:inherit;cursor:pointer;border:none;border-radius:18px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:600;display:flex;position:absolute;top:82px;left:16px;box-shadow:0 2px 10px #0003}.traces-panel{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;background:var(--panel-background);border-radius:12px;max-width:440px;max-height:70%;margin:0 auto;padding:12px 14px;font-size:13px;position:absolute;overflow-y:auto;box-shadow:0 2px 14px #00000040}.recorder-status{align-items:center;gap:8px;margin:0;font-weight:600;display:flex}.traces-panel button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.control-panel{background:var(--panel-background);border-radius:12px;width:min(340px,100% - 92px);max-height:calc(100% - 48px);padding:12px 14px;font-size:13px;position:absolute;top:16px;left:16px;overflow-y:auto;box-shadow:0 2px 10px #00000026}.control-panel header,.traces-panel header{justify-content:space-between;align-items:center;gap:8px;display:flex}.control-panel h1,.traces-panel h1{margin:0;font-size:15px}.control-panel h2,.traces-panel h2{margin:0 0 6px;font-size:13px}.control-panel section,.traces-panel section{flex-direction:column;gap:10px;margin-top:12px;display:flex}.control-panel button,.traces-panel button{font:inherit;border:1px solid var(--panel-border);cursor:pointer;background:#fff;border-radius:8px;padding:6px 10px}.control-panel button:disabled,.traces-panel button:disabled{color:var(--accent);cursor:default}.control-panel .toggle,.traces-panel .toggle{color:var(--panel-muted);padding:4px 8px}.control-panel .buttons,.traces-panel .buttons{flex-direction:row}.distance-slider{flex-direction:column;gap:4px;display:flex}.distance-slider input{width:100%;accent-color:var(--accent)}.checkbox{align-items:center;gap:6px;display:flex}.hint{color:var(--panel-muted);margin:10px 0 0;font-size:12px}.developer-toggle{margin-top:12px}.developer-panel{border-top:1px solid var(--panel-border);margin-top:8px;padding-top:10px}.place-search{gap:6px;display:flex}.place-search input{min-width:0;font:inherit;border:1px solid var(--panel-border);border-radius:8px;flex:1;padding:6px 8px;font-size:16px}.found-places{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.control-panel .found-places button{text-align:left;flex-direction:column;align-items:flex-start;width:100%;display:flex}.place-context{color:var(--panel-muted);font-size:11px}.move-pad{grid-template-columns:auto 1fr auto;gap:6px;display:grid}.move-pad .move-forward,.move-pad .move-back{grid-column:2}.trace-list ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.trace-list li{border:1px solid var(--panel-border);border-radius:8px;grid-template-columns:auto 1fr;align-items:center;gap:4px 8px;padding:6px 8px;display:grid}.trace-color{border-radius:50%;width:14px;height:14px}.trace-name{min-width:0;font:inherit;background:0 0;border:1px solid #0000;border-radius:6px;padding:2px 4px;font-size:16px;font-weight:600}.trace-name:focus{border-color:var(--panel-border);background:#fff}.trace-details,.trace-actions{grid-column:2}.trace-details{color:var(--panel-muted);font-size:12px}.trace-actions{flex-wrap:wrap;gap:6px;display:flex}.zone-card{left:16px;right:84px;bottom:calc(96px + env(safe-area-inset-bottom));background:var(--panel-background);border-radius:12px;max-width:420px;margin:0 auto;padding:10px 12px;font-size:13px;position:absolute;box-shadow:0 2px 10px #0003}.zone-card p{margin:0}.zone-card-buttons{gap:8px;margin-top:8px;display:flex}.zone-card button{font:inherit;border:1px solid var(--panel-border);cursor:pointer;background:#fff;border-radius:8px;padding:6px 12px}.zone-card button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.notice{left:16px;right:84px;bottom:calc(96px + env(safe-area-inset-bottom));background:var(--panel-background);color:#9a5b00;pointer-events:none;border-radius:8px;width:fit-content;max-width:420px;margin:0 auto;padding:6px 10px;font-size:12px;position:absolute;box-shadow:0 1px 4px #0003}.travel-mode-picker{left:16px;bottom:calc(28px + env(safe-area-inset-bottom));background:var(--panel-background);border-radius:14px;gap:2px;padding:4px;display:flex;position:absolute;box-shadow:0 2px 10px #0003}.travel-mode-picker button{width:72px;height:52px;color:var(--panel-muted);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:11px;font-weight:600;display:flex}.travel-mode-picker button.selected{background:var(--accent);color:#fff}.recenter-button{right:16px;bottom:calc(28px + env(safe-area-inset-bottom));background:var(--panel-background);width:52px;height:52px;color:var(--panel-muted);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;box-shadow:0 2px 10px #0003}.three-d-button{right:16px;bottom:calc(92px + env(safe-area-inset-bottom));background:var(--panel-background);width:52px;height:52px;color:var(--panel-muted);font:inherit;cursor:pointer;border:none;border-radius:50%;font-size:15px;font-weight:700;position:absolute;box-shadow:0 2px 10px #0003}.three-d-button.active{background:var(--accent);color:#fff}.recenter-button.centered{color:var(--accent)}.route-list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.control-panel .route{text-align:left;background:0 0;border-color:#0000;align-items:center;gap:8px;width:100%;padding:4px 6px;display:flex}.control-panel .route:hover{background:#0000000a}.control-panel .route.selected{background:#1a73e81a;border-color:#1a73e84d}.route-color{border-radius:3px;flex:none;width:18px;height:5px}.route-ref{flex:none;font-weight:700}.route-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.attribution{right:6px;bottom:calc(4px + env(safe-area-inset-bottom));color:var(--panel-muted);background:#ffffffb3;border-radius:3px;padding:1px 4px;font-size:10px;position:absolute}.route-distance{color:var(--panel-muted);flex:none;margin-left:auto;font-size:12px}