:root{font-family:system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;color:#24392f;background:#f5f5ef;line-height:1.55}*{box-sizing:border-box}body{margin:0}header{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9dfd5}h1{font-size:22px;margin:2px 0}small{color:#647164}#mode{font-size:12px;background:#e4e8de;border-radius:20px;padding:6px 12px}main{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:calc(100dvh - 100px)}.map-section{position:relative;min-height:600px}#map{position:absolute;inset:0;background:#e9ede4;overflow:hidden}#map svg{width:100%;height:100%;touch-action:none;display:block}#map[data-map-type=satellite]{background:#ced5c7}#map[data-map-type=satellite] svg{filter:brightness(.8) contrast(1.1)}.empty{margin:150px 24px;text-align:center}.empty h2{font-size:20px}.map-controls{position:absolute;top:16px;left:16px;right:16px;display:flex;gap:10px;justify-content:space-between;align-items:flex-start;pointer-events:none}.map-controls>*{pointer-events:auto}.types{display:flex;gap:4px}button,select,.primary{font:inherit;font-size:14px;min-height:44px;border:1px solid #bcc8b9;background:white;color:#24392f;border-radius:9px;padding:8px 12px;cursor:pointer}button:hover{background:#e9efe4}button:disabled{cursor:default;opacity:.55}button[aria-pressed=true]{background:#dce8d6;border-color:#48644a}#locate{font-weight:650;box-shadow:0 2px 8px #23352c20}.zoom-controls{position:absolute;right:16px;bottom:70px;display:grid;gap:6px}.zoom-controls button{font-size:22px;width:46px}.map-note{position:absolute;bottom:16px;left:16px;max-width:calc(100% - 90px);margin:0;padding:7px 12px;background:#ffffffeb;border-radius:8px;font-size:12px;pointer-events:none}aside{padding:24px;background:#fafbf6;border-left:1px solid #d9dfd5}aside p{font-size:13px;color:#627164}.step{display:flex;gap:10px;font-weight:650;margin-top:8px}.step span{color:#24392f}.coordinate{background:#edf1e8;border-radius:12px;padding:14px;margin:18px 0}.coordinate>*{display:block}output{font-size:18px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}fieldset{border:1px solid #d5dfcf;border-radius:10px;padding:12px}.arrows{display:flex;gap:8px;margin-top:10px}.arrows button{flex:1;font-size:22px}.confirm{display:flex;gap:8px;font-size:13px;margin:18px 0;align-items:center}input[type=checkbox]{width:20px;height:20px;accent-color:#426049;flex-shrink:0}.primary{display:block;background:#35543e;color:#fff;text-align:center;text-decoration:none;margin-top:12px;font-weight:650}.disabled{opacity:.5;pointer-events:none}#next{width:100%;margin-top:4px}#status{padding:12px;border-radius:10px;background:#edf1e8;min-height:56px}#status.error{background:#fff0e9;color:#913e24}details{font-size:13px;margin-top:18px}details label{display:block;margin-top:14px}details input{vertical-align:middle}.gps-dot{width:18px;height:18px;border:3px solid white;background:#2573d4;border-radius:50%;box-shadow:0 0 0 5px #2573d428}:focus-visible{outline:3px solid #cc783e;outline-offset:3px}[hidden]{display:none!important}@media(max-width:760px){header{padding:12px 16px}h1{font-size:19px}main{grid-template-columns:1fr}.map-section{height:52dvh;min-height:330px}aside{padding:18px 16px;border-left:0;border-top:1px solid #d9dfd5}.map-controls{left:10px;right:10px;top:10px;gap:6px}.types button{padding:8px;font-size:12px}#locate{font-size:13px;padding:8px 10px}.coordinate{margin:12px 0}#handoff{position:sticky;bottom:8px;z-index:2;box-shadow:0 2px 8px #0002}aside .step{margin-top:12px}}@media(max-width:360px){.map-controls{flex-wrap:wrap}.map-section{min-height:360px}}
:root #key-panel{padding:16px;border:1px solid #bcc8b9;border-radius:12px;background:#edf1e8;margin-bottom:20px}
#key-panel h2{font-size:19px;margin:0 0 10px}#demo-key-form label{display:block;font-size:14px;font-weight:650}#demo-key{display:block;width:100%;min-height:44px;margin-top:8px;padding:10px;border:1px solid #bcc8b9;border-radius:8px;font:inherit}#demo-connect{width:100%}

/* Public mobile test: keep the inactive handoff out of the key-entry area. */
#handoff.disabled{position:static;box-shadow:none}@media(max-width:760px){header{flex-wrap:wrap;gap:8px}#mode{max-width:100%}}