*{box-sizing:border-box}html,body{margin:0}body{font:16px/1.45 Arial,Helvetica,sans-serif;color:#173c31;background:#f6f7ef}.demo{padding:24px}.demo-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:23px}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:#78986e}.demo-head h1{font-size:31px;letter-spacing:-.04em;line-height:1.1;margin:7px 0}.demo-head p{margin:0;color:#657d6e;font-size:14px}.demo-tag{border:1px solid #d6e2d2;border-radius:99px;padding:8px 12px;white-space:nowrap;color:#61796b;font-size:12px;background:#fff}.demo-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px}.controls{border:1px solid #dbe4d6;border-radius:18px;background:#fffef9;padding:19px;display:flex;flex-direction:column;gap:8px}.control-label{font-size:13px;font-weight:700}.sample-options{display:grid;gap:9px;margin:10px 0}.sample-options button{border:1px solid #d5e2d4;border-radius:10px;background:#f8fbf5;color:#173c31;cursor:pointer;text-align:left;padding:13px;display:grid;gap:4px}.sample-options button:hover,.sample-options button.selected{border-color:#4f8566;background:#eaf3e6}.sample-options button:disabled{opacity:.65;cursor:wait}.sample-options strong{font-size:14px}.sample-options span{font-size:12px;color:#68816f}.form-note{font-size:11px;line-height:1.5;color:#7b8c7e;margin:4px 0 0}.map-panel{min-height:455px;position:relative;background:#f8fbf2;border:1px solid #dbe4d6;border-radius:18px;overflow:hidden}.map{height:455px;overflow:hidden}.map svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.map svg:active{cursor:grabbing}.map-actions{position:absolute;top:12px;right:12px;display:flex;gap:3px;background:#ffffffd9;padding:3px;border:1px solid #e0e7dc;border-radius:9px}.map-actions button{border:0;background:none;padding:5px 10px;color:#173c31;cursor:pointer;font-size:16px}.map-actions button:hover{background:#e4eddf;border-radius:6px}.result{position:absolute;left:12px;right:12px;bottom:12px;background:#fffef9eb;border:1px solid #e0e7dc;box-shadow:0 10px 30px #163c3018;border-radius:12px;padding:11px 14px;display:grid;gap:2px;backdrop-filter:blur(10px)}.result strong{font-size:14px}.result span{font-size:12px;color:#637a6a}.footnote{font-size:11px;color:#748477;margin:12px 0 0}@media(max-width:720px){.demo{padding:16px}.demo-head{display:block}.demo-tag{display:inline-block;margin-top:12px}.demo-grid{grid-template-columns:1fr}.controls{display:block}.sample-options{grid-template-columns:repeat(3,1fr)}.sample-options button{padding:10px}.sample-options strong{font-size:12px}.sample-options span{font-size:10px}.map-panel,.map{height:430px;min-height:430px}}

/* Keep the full interactive preview visible inside its embed. */
.demo{padding:16px}
.demo-head{margin-bottom:12px}
.demo-grid{gap:12px}
.map-panel{min-height:0}
.map{height:420px}
.footnote{margin-top:8px}
@media(max-width:720px){
  .demo{padding:10px}
  .demo-head{margin-bottom:8px}
  .demo-head h1{font-size:23px;margin:4px 0}
  .demo-head p{font-size:12px}
  .demo-tag{margin-top:6px;padding:4px 8px;font-size:10px}
  .demo-grid{gap:8px}
  .controls{padding:10px}
  .sample-options{margin:5px 0;gap:5px}
  .sample-options button{padding:6px 4px}
  .sample-options strong{font-size:11px}
  .sample-options span{font-size:9px}
  .form-note{display:none}
  .map-panel,.map{height:270px;min-height:0}
  .footnote{margin-top:7px;line-height:1.3}
}