:root{font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#172c27;background:#e8ede7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}#app{height:100dvh;min-height:620px;position:relative;overflow:hidden}#map{position:absolute;inset:0 0 70px;background:#dfe8df}.topbar{position:absolute;z-index:2;top:0;left:0;right:0;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 44px;pointer-events:none}.brand{display:flex;align-items:center;gap:10px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;font-weight:800;letter-spacing:.13em}.brand-mark{font-size:30px;color:#304c3f;line-height:1}.brand-divider{height:19px;width:1px;background:#aab8ab;margin:0 4px}.brand-sub,.prototype-label{font-size:9px;letter-spacing:.12em;font-weight:700}.brand-sub{color:#62766b}.prototype-label{border:1px solid #c2d0c4;background:#f8faf5d9;border-radius:100px;padding:9px 12px;letter-spacing:.03em;font-size:10px}.prototype-label span,.key-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ce8a55;margin-right:6px}.intro{position:absolute;z-index:1;left:44px;top:125px;max-width:400px;pointer-events:none}.eyebrow,.section-label{font-size:10px;letter-spacing:.14em;font-weight:800;color:#6e8174}.eyebrow span{color:#b97446;margin-right:9px}.intro h1,.modal h2{font-family:ui-sans-serif,system-ui,sans-serif;letter-spacing:-.06em;font-size:52px;line-height:1.07;margin:17px 0}.intro p,.modal-description{color:#61746a;font-size:14px;line-height:1.65;max-width:330px;margin:0}.selection-card{position:absolute;z-index:2;top:310px;left:44px;width:366px;padding:25px;background:#fbfcf8;border:1px solid #d8e2d6;border-radius:4px;box-shadow:0 12px 40px #304b3215}.card-top{display:flex;justify-content:space-between;align-items:center}.card-top h2{font-family:ui-sans-serif,system-ui,sans-serif;font-size:23px;letter-spacing:-.04em;margin:9px 0 0}.card-icon{border:1px solid #d7e0d3;color:#5b7866;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:22px}.card-copy{font-size:12px;color:#72847a;margin:8px 0 20px;line-height:1.5}.location-actions{display:flex;align-items:center;gap:10px;border-top:1px solid #e4eae1;padding-top:16px}.location-button{border:0;background:#edf3eb;color:#355945;padding:10px 12px;font-size:11px;font-weight:700;border-radius:3px;white-space:nowrap}.location-button span:first-child{font-size:16px;margin-right:4px}.location-actions>span{font-size:10px;color:#85958a;line-height:1.3}.center-button{border:0;background:none;color:#476c52;font-size:11px;font-weight:700;padding:12px 0 0}.radius-control{padding:14px 0 15px}.radius-heading{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.radius-heading strong{color:#a46b43}input[type=range]{width:100%;accent-color:#476c52;height:4px;margin:17px 0 8px}.range-ends{display:flex;justify-content:space-between;color:#9aa89c;font-size:10px}.selection-meta{display:flex;border-top:1px solid #e5ebe3;padding:16px 0;gap:50px}.selection-meta div,.review-summary div{display:flex;flex-direction:column;gap:6px}.selection-meta span,.review-summary span{font-size:9px;letter-spacing:.1em;color:#98a69a;font-weight:700}.selection-meta strong{font-size:12px;font-weight:700}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:#254f3a;color:white;padding:15px 17px;font-size:12px;font-weight:700;border-radius:3px}.primary span{font-size:16px}.primary:disabled{opacity:.4;cursor:not-allowed}.card-foot{text-align:center;color:#a1aea3;font-size:10px;margin:12px 0 0}.map-key{position:absolute;right:32px;top:105px;z-index:1;padding:10px 13px;background:#fbfcf8e8;border-radius:3px;color:#526d5c;font-size:10px;font-weight:700;max-width:280px}.key-dot{background:#688e70}.map-instruction{position:absolute;bottom:95px;right:30px;background:#fbfcf8e8;border:1px solid #dbe4da;padding:12px 15px;font-size:9px;font-weight:700;letter-spacing:.1em;color:#667c6b}.map-instruction span:first-child{color:#ba7e50;font-size:16px;margin-right:8px}.prototype-nav{position:absolute;bottom:0;height:70px;background:#f9faf6;border-top:1px solid #dbe4da;width:100%;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 44px}.nav-caption{display:flex;align-items:center;gap:22px}.nav-caption span,.nav-right{font-size:9px;letter-spacing:.12em;color:#9aa99c;font-weight:700}.nav-caption strong{font-size:10px;letter-spacing:.1em}.nav-controls{display:flex;align-items:center;gap:16px;font-size:10px;color:#a4b0a6}.nav-controls b{color:#2c4b39}.nav-controls button{border:1px solid #d9e3d8;background:transparent;border-radius:50%;width:32px;height:32px;color:#365642}.nav-right span{font-size:15px;margin-left:15px;color:#6c806f}#frame,.frame-help{display:none}.modal-backdrop{position:absolute;inset:0;z-index:10;background:#152a22a8;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden],[hidden]{display:none!important}.modal{background:#fbfcf8;width:min(460px,100%);padding:38px;position:relative;border-radius:4px;box-shadow:0 20px 80px #10291e33}.close{position:absolute;right:24px;top:20px;border:0;background:none;color:#788b7e;font-size:26px}.modal h2{font-size:38px}.review-summary{border-top:1px solid #e1e9de;border-bottom:1px solid #e1e9de;margin:24px 0;padding:20px 0;display:grid;gap:17px}.review-summary strong{font-size:13px;overflow-wrap:anywhere}.text-button{display:block;margin:16px auto 0;border:0;background:none;color:#64806d;font-size:11px;font-weight:700}.complete-icon{width:46px;height:46px;border-radius:50%;background:#e2eee1;color:#3e6d4c;display:grid;place-items:center;margin-bottom:25px}.complete-icon~.primary{margin-top:28px}
/* Frame variant */
[data-variant=B] .topbar{color:#fff;text-shadow:0 1px 5px #27423666}[data-variant=B] .brand-mark,[data-variant=B] .brand-sub{color:#fff}[data-variant=B] .prototype-label{color:#345443;text-shadow:none}[data-variant=B] .intro{top:112px;left:44px;color:#fff;text-shadow:0 2px 10px #243c3066}[data-variant=B] .intro h1{font-size:43px;margin:12px 0}[data-variant=B] .intro p,[data-variant=B] .intro .eyebrow{color:#fff}[data-variant=B] .intro .eyebrow span{color:#f1d5b4}[data-variant=B] .selection-card{left:50%;transform:translateX(-50%);top:auto;bottom:92px;width:min(720px,calc(100% - 40px));padding:20px 24px;display:grid;grid-template-columns:1fr 1fr 190px;column-gap:24px;align-items:center}[data-variant=B] .card-top h2{font-size:19px}[data-variant=B] .center-button,[data-variant=B] .card-icon,[data-variant=B] .card-copy,[data-variant=B] .radius-control,[data-variant=B] .card-foot{display:none}[data-variant=B] .location-actions{grid-column:1;grid-row:2;border:0;padding:12px 0 0}[data-variant=B] .selection-meta{grid-column:2;grid-row:1 / 3;border:0;border-left:1px solid #e3eae0;padding:0 0 0 24px;gap:25px;flex-wrap:wrap}[data-variant=B] .primary{grid-column:3;grid-row:1 / 3}[data-variant=B] .frame-help{display:flex;position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);white-space:nowrap;align-items:center;gap:8px;background:#f9fbf5e8;padding:10px 14px;border-radius:3px;font-size:11px;color:#496653;font-weight:700}.frame-symbol{font-size:18px}[data-variant=B] .map-key{top:105px}[data-variant=B] .map-instruction{display:none}[data-variant=B] #frame{display:block;position:absolute;pointer-events:none;left:30%;right:30%;top:27%;bottom:32%;border:1px solid #fff9;box-shadow:0 0 0 200vmax #19352824;z-index:1}[data-variant=B] #frame span{position:absolute;width:18px;height:18px;border-color:white;border-style:solid}[data-variant=B] #frame span:nth-child(1){top:-2px;left:-2px;border-width:3px 0 0 3px}[data-variant=B] #frame span:nth-child(2){top:-2px;right:-2px;border-width:3px 3px 0 0}[data-variant=B] #frame span:nth-child(3){bottom:-2px;left:-2px;border-width:0 0 3px 3px}[data-variant=B] #frame span:nth-child(4){bottom:-2px;right:-2px;border-width:0 3px 3px 0}
@media(max-height:850px) and (min-width:701px){.intro{top:92px}.intro h1{font-size:42px;margin:10px 0}.selection-card{top:235px;padding:20px}.card-copy{margin-bottom:12px}.radius-control{padding:14px 0 10px}.selection-meta{padding:12px 0}}
@media(max-width:700px){#app{min-height:0}.topbar{height:60px;padding:0 18px}.brand{font-size:11px}.brand-mark{font-size:24px}.brand-divider,.brand-sub{display:none}.prototype-label{font-size:9px;padding:7px 9px}.intro{left:20px;top:82px;max-width:280px}.intro h1{font-size:34px;margin:10px 0}.intro p{font-size:12px;line-height:1.45}.selection-card{left:12px;right:12px;top:auto;bottom:82px;width:auto;padding:16px}.card-top h2{font-size:19px}.card-copy{margin:5px 0 10px;font-size:11px}.location-actions{padding-top:10px}.radius-control{padding:12px 0 8px}.radius-control input{margin:10px 0 5px}.selection-meta{padding:10px 0;gap:35px}.primary{padding:12px 14px}.card-foot{display:none}.map-key{top:185px;right:15px;max-width:190px}.map-instruction{display:none}.prototype-nav{height:62px;padding:0 17px}.nav-caption{display:block}.nav-caption span{display:block;font-size:8px;margin-bottom:4px}.nav-caption strong{font-size:9px}.nav-right{display:none}#map{bottom:62px}[data-variant=B] .intro{top:80px;left:20px}[data-variant=B] .intro h1{font-size:32px}[data-variant=B] .intro p{max-width:240px}[data-variant=B] .map-key{top:180px}[data-variant=B] #frame{left:12%;right:12%;top:30%;bottom:34%}[data-variant=B] .selection-card{bottom:76px;padding:15px;grid-template-columns:1fr 135px;gap:10px;width:calc(100% - 24px)}[data-variant=B] .selection-meta{grid-column:1;grid-row:2;padding:0;border:0;gap:20px}[data-variant=B] .location-actions{grid-column:1 / 3;grid-row:3;padding:0}[data-variant=B] .primary{grid-column:2;grid-row:1 / 4}[data-variant=B] .frame-help{font-size:10px;max-width:95%;white-space:normal;width:max-content;text-align:center}[data-variant=B] .card-top h2{font-size:16px}.modal{padding:28px}.modal h2{font-size:32px}}
@media(max-width:700px){
  .intro{background:#fbfcf8df;padding:10px 12px;margin-left:-12px;border-radius:3px}
  [data-variant=B] .intro{background:#254434c9}
  .selection-card .card-copy{display:none}
  .selection-card .location-actions{margin-top:10px}
  .selection-card .radius-control{padding:8px 0 6px}
  .selection-card .selection-meta{padding:8px 0}
  .maplibregl-ctrl-bottom-right{bottom:auto!important;top:255px!important;right:5px!important}
  [data-variant=B] .selection-card .location-actions{margin-top:0}
}
@media(min-width:701px){.intro{max-width:366px}.intro h1{font-size:44px}.intro p{font-size:12px}}
@media(max-width:700px){
 .intro,[data-variant=B] .intro{top:66px}
 .intro .eyebrow,.intro p{display:none}
 .intro h1,[data-variant=B] .intro h1{font-size:25px;margin:0}
 [data-variant=B] .intro{top:66px}
 .map-key,[data-variant=B] .map-key{top:115px;right:12px;max-width:240px;padding:7px 9px;font-size:9px}
 .selection-card{padding:12px}
 .selection-card .location-actions{padding-top:7px;margin-top:7px}
 .location-button{padding:7px 9px}
 .center-button{padding-top:7px}
 .selection-card .radius-control{padding:7px 0 4px}
 .radius-control input{margin:7px 0 3px}
 .selection-card .selection-meta{padding:7px 0}
 .primary{padding:10px 12px}
 .maplibregl-ctrl-bottom-right{top:180px!important}
}
@media(min-width:701px){.intro{background:#fbfcf8e8;padding:14px 16px;margin-left:-16px;border-radius:3px}[data-variant=B] .intro{background:#254434d9}}
