:root {
  color-scheme:light;
  --ink:#20372f;
  --muted:#61705c;
  --green:#285e49;
  --green-dark:#173f35;
  --line:#e2e7de;
  --paper:#f6f7f2;
  --progress:0%;
  font-family:"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  font-size:14px;
  color:var(--ink);
  background:var(--paper)
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select {
  font:inherit
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait;
  opacity:.55
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #80ad7d;
  outline-offset:4px
}
button {
  color:inherit
}
svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}
.icon-library {
  display:none
}
a {
  color:inherit
}
button {
  border:0
}
.topbar {
  height:86px;
  display:flex;
  align-items:center;
  gap:25px;
  padding:0 4.2%;
  background:#fff;
  border-bottom:1px solid var(--line)
}
.brand {
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:25px;
  font-weight:800;
  letter-spacing:-1.4px
}
.brand small {
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:2px
}
.brand-mark {
  width:43px;
  height:43px;
  border-radius:13px;
  background:var(--green-dark);
  color:#dfebad;
  display:grid;
  place-items:center
}
.brand-mark svg {
  width:28px;
  height:28px
}
.header-divider {
  height:25px;
  width:1px;
  background:var(--line)
}
.header-title {
  font-size:14px;
  color:var(--muted)
}
.topbar-right {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:22px;
  font-size:12px
}
.local-badge {
  color:var(--muted);
  border:1px solid #e3e6db;
  border-radius:5px;
  padding:6px 10px
}
.connection {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted)
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c5b48a;
  flex-shrink:0
}
.status-dot.blue {
  background:#6d98b0
}
main {
  max-width:1560px;
  margin:auto;
  padding:39px 4.2% 0
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px
}
.eyebrow,.small-label {
  font-size:11px;
  letter-spacing:1.7px;
  font-weight:700;
  color:var(--muted)
}
.eyebrow {
  letter-spacing:2.2px
}
h1 {
  font-size:32px;
  font-weight:700;
  letter-spacing:-1.4px;
  margin:7px 0 10px
}
h1 span {
  color:#759756
}
.page-heading p {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr) 342px;
  gap:25px;
  align-items:start
}
.map-panel,.capture-panel {
  min-width:0
}
.map-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:22px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:16px 16px 0 0
}
.map-heading .small-label {
  font-size:12px;
  letter-spacing:0;
  color:var(--muted);
  font-weight:500
}
h2 {
  margin:6px 0 0;
  font-size:17px;
  letter-spacing:-.6px
}
.device-tag {
  font-size:12px;
  padding:7px 10px;
  background:#f4f6f0;
  border:1px solid #e9ece3;
  border-radius:6px;
  color:var(--muted);
  white-space:nowrap
}
.map-stage {
  height:459px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#e5ead9;
  border:1px solid var(--line)
}
#map,.map-placeholder {
  position:absolute;
  inset:0
}
.map-placeholder {
  z-index:500
}
.map-placeholder>img {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.86
}
.map-start-card {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(310px,80%);
  padding:27px 20px 21px;
  text-align:center;
  background:#fffffff0;
  border:1px solid #fff;
  border-radius:18px;
  box-shadow:0 12px 44px #35553712;
  backdrop-filter:blur(6px)
}
.round-icon {
  width:48px;
  height:48px;
  border-radius:50%;
  background:#eaf0df;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  color:#527b44
}
.round-icon svg {
  width:24px;
  height:24px
}
.map-start-card h3 {
  font-size:21px;
  letter-spacing:-.7px;
  margin:0 0 11px
}
.map-start-card p {
  color:var(--muted);
  line-height:1.8;
  font-size:12px;
  margin:0 0 21px
}
.map-start-card small {
  display:block;
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
  margin-top:14px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border-radius:9px;
  min-height:43px;
  padding:11px 18px;
  font-weight:600;
  font-size:12px;
  transition:background .15s,transform .15s
}
.button:hover:not(:disabled) {
  transform:translateY(-1px)
}
.button.green {
  background:var(--green-dark);
  color:#fff
}
.button.green:hover {
  background:#285a46
}
.button.green svg {
  width:17px
}
.button.secondary {
  background:#fff;
  border:1px solid var(--line)
}
.capture-link {
  margin-top:14px;
  text-decoration:none
}
.illustration-label {
  position:absolute;
  bottom:14px;
  left:18px;
  font-size:11px;
  color:var(--muted);
  background:#ffffffb8;
  padding:5px 8px;
  border-radius:4px
}
.map-tools {
  position:absolute;
  top:16px;
  right:16px;
  z-index:800;
  display:grid;
  gap:8px
}
.map-tool {
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #e0e5d9;
  border-radius:8px;
  box-shadow:0 2px 8px #334e3010
}
.map-tool svg {
  width:18px;
  height:18px
}
.map-tool:hover {
  background:#f2f5ed
}
.map-caption {
  position:absolute;
  bottom:15px;
  left:16px;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:75%;
  padding:10px 12px;
  border:1px solid #edf0e6;
  background:#fffffff5;
  border-radius:8px;
  font-size:12px;
  color:var(--muted);
  z-index:800
}
.map-placeholder:not([hidden])~.map-caption {
  display:none
}
.map-caption button {
  padding:0 0 0 8px;
  background:none;
  text-decoration:underline;
  color:#6c8271
}
.map-footnote {
  padding:15px 20px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 16px 16px
}
.map-footnote p {
  font-size:12px;
  color:var(--muted);
  line-height:1.75;
  margin:0
}
.map-footnote>span {
  margin-left:auto;
  white-space:nowrap;
  font-size:11px;
  color:var(--muted);
  padding-top:3px
}
.capture-status {
  display:flex;
  gap:15px;
  align-items:flex-start;
  margin-top:22px;
  padding:23px 21px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px
}
.capture-status-icon {
  width:40px;
  height:40px;
  background:#f1f4eb;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:var(--muted);
  flex-shrink:0
}
.capture-status h2 {
  font-size:13px;
  margin:1px 0 8px
}
.capture-status p {
  margin:0;
  font-size:12px;
  line-height:1.9;
  color:var(--muted)
}
.state-badge {
  margin-left:auto;
  background:#f5f1e7;
  color:#7b6533;
  padding:6px 9px;
  border-radius:5px;
  font-size:11px;
  white-space:nowrap
}
.location-privacy {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  padding:15px 3px
}
.capture-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:25px 23px
}
.settings-heading {
  display:flex;
  align-items:center;
  margin-bottom:30px
}
.settings-heading .small-label {
  font-size:10px;
  letter-spacing:1.45px
}
.settings-heading h2 {
  font-size:19px;
  margin-top:7px
}
.text-button {
  font-size:12px;
  background:none;
  color:var(--muted);
  margin-left:auto;
  padding:7px 0
}
.text-button:hover {
  text-decoration:underline
}
fieldset {
  min-width:0;
  margin:0;
  padding:0;
  border:0
}
legend {
  font-size:12px;
  font-weight:600;
  width:100%;
  padding:0;
  margin-bottom:13px
}
legend>span {
  float:right;
  font-size:11px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:.2px
}
.resolution-options {
  display:flex;
  border:1px solid #e6eade;
  background:#f6f8f1;
  border-radius:8px;
  padding:4px;
  gap:3px
}
.resolution-options label {
  flex:1;
  min-width:0;
  position:relative
}
.resolution-options input {
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer
}
.resolution-options span {
  display:block;
  padding:10px 1px;
  border-radius:5px;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  transition:background .15s
}
.resolution-options input:checked+span {
  background:var(--green-dark);
  color:#fff;
  box-shadow:0 2px 4px #173f3519
}
.resolution-options input:focus-visible+span {
  outline:3px solid #80ad7d;
  outline-offset:2px
}
.field-hint {
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  margin:10px 0 0
}
.control-block {
  margin-top:29px
}
.control-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  margin:0 0 13px
}
.control-label>span {
  font-size:11px;
  font-weight:400;
  color:var(--muted)
}
.control-label output {
  font-size:12px;
  font-weight:500;
  color:var(--muted)
}
.large-value {
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-bottom:15px
}
.large-value output {
  font-size:35px;
  line-height:1.1;
  letter-spacing:-1.5px;
  color:var(--green-dark);
  font-weight:650;
  font-variant-numeric:tabular-nums
}
.large-value>span {
  font-size:12px;
  color:var(--muted)
}
input[type=range] {
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  height:5px;
  margin:11px 0 0;
  border:0;
  border-radius:10px;
  background:linear-gradient(to right,#608453 var(--progress),#e9eddf var(--progress));
  cursor:pointer
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 1px #e2e7da,0 2px 5px #2c50281e
}
input[type=range]::-moz-range-thumb {
  width:11px;
  height:11px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 1px #e2e7da
}
.range-ends {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin-top:10px
}
.preset-row {
  display:flex;
  gap:7px;
  margin-top:13px
}
.preset-row button {
  flex:1;
  padding:8px 0;
  border:1px solid #e6eade;
  border-radius:6px;
  background:#fff;
  font-size:12px;
  color:var(--muted)
}
.preset-row button[aria-pressed=true] {
  background:#eff4e8;
  border-color:#a6bc94;
  color:#45683a;
  font-weight:600
}
.preset-row button:hover {
  border-color:#a6bc94
}
.duration-block {
  margin-top:27px
}
.performance-note {
  font-size:11px;
  line-height:1.8;
  padding:11px 12px;
  margin:17px 0 0;
  border-radius:7px;
  background:#faf5e8;
  color:#7b6533
}
.advanced {
  margin-top:26px;
  border-top:1px solid #edf0e7;
  border-bottom:1px solid #edf0e7
}
.advanced summary {
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  padding:17px 0;
  font-size:12px;
  color:var(--muted);
  list-style:none
}
.advanced summary::-webkit-details-marker {
  display:none
}
.advanced summary>span {
  font-size:15px;
  line-height:1
}
.advanced[open] summary>span {
  transform:rotate(45deg)
}
.advanced-controls {
  padding:3px 0 17px
}
.advanced-controls .control-label:not(:first-child) {
  margin-top:21px
}
.advanced-controls select {
  width:100%;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  padding:10px;
  color:var(--muted);
  font-size:12px
}
.capture-summary {
  position:relative;
  background:#f5f7f0;
  border:1px solid #e8ecdf;
  border-radius:9px;
  padding:16px;
  margin-top:23px
}
.capture-summary>span {
  font-size:11px;
  color:var(--muted)
}
.capture-summary strong {
  display:block;
  font-size:20px;
  font-weight:650;
  letter-spacing:-.6px;
  margin:8px 0
}
.capture-summary p {
  font-size:11px;
  color:var(--muted);
  margin:0;
  line-height:1.8
}
.capture-button {
  display:flex;
  width:100%;
  background:var(--green-dark);
  color:#fff;
  margin-top:16px;
  min-height:48px;
  font-size:13px
}
.capture-button:hover {
  background:#2a5945
}
.capture-button svg {
  width:20px
}
.capture-button .capture-arrow {
  width:17px;
  margin-left:auto
}
.capture-button>span {
  margin-right:auto
}
.capture-help {
  text-align:center;
  color:var(--muted);
  font-size:11px;
  line-height:1.8;
  margin:12px 0 0
}
.settings-toggle,.mobile-close,.settings-backdrop {
  display:none
}
footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  padding:25px 1px
}
.noscript-note {
  text-align:center;
  padding:15px
}
.leaflet-container {
  font:12px "Segoe UI","Malgun Gothic",sans-serif;
  background:#e4e9dc
}
.leaflet-control-attribution {
  font-size:10px!important
}
.leaflet-control-zoom a {
  color:#4f6750!important
}
.leaflet-control-zoom {
  border:1px solid #dce3d3!important;
  box-shadow:0 2px 8px #34492b10!important
}
body:has(.map-placeholder:not([hidden])) .map-tools {
  z-index:501
}
@media(min-width:1400px) {
  main {
    padding-top:45px
  }
  .map-stage {
    height:480px
  }
  .workspace {
    grid-template-columns:minmax(0,1fr) 355px;
    gap:28px
  }
  .capture-panel {
    padding:26px
  }
  .map-heading {
    padding:24px 27px
  }
}
@media(max-width:1050px) {
  main {
    padding-left:3%;
    padding-right:3%
  }
  .workspace {
    gap:18px;
    grid-template-columns:minmax(0,1fr) 310px
  }
  .capture-panel {
    padding:22px 19px
  }
  .map-stage {
    height:465px
  }
  .map-heading {
    padding:21px 19px
  }
  .map-heading h2 {
    font-size:15px
  }
  .map-footnote {
    padding:13px 15px
  }
  .map-footnote>span {
    display:none
  }
  .state-badge {
    display:none
  }
  .capture-status {
    padding:19px 17px
  }
}
@media(max-width:900px) {
  .topbar {
    height:74px;
    padding:0 6%;
    gap:17px
  }
  .header-divider,.header-title {
    display:none
  }
  .topbar-right {
    gap:12px
  }
  .local-badge {
    display:none
  }
  .brand {
    font-size:23px
  }
  .brand-mark {
    width:39px;
    height:39px
  }
  .brand small {
    font-size:8px
  }
  .connection {
    font-size:12px
  }
  main {
    padding:27px 5% 0
  }
  .page-heading {
    margin-bottom:24px;
    gap:12px
  }
  .page-heading h1 {
    font-size:28px
  }
  .page-heading p {
    font-size:12px;
    max-width:240px
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.5px
  }
  .settings-toggle {
    display:inline-flex;
    white-space:nowrap;
    gap:7px;
    padding:10px 12px;
    font-size:12px
  }
  .settings-toggle svg {
    width:18px
  }
  .workspace {
    display:block
  }
  .map-stage {
    height:440px
  }
  .capture-panel {
    display:none;
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    width:min(380px,92vw);
    border-radius:18px 0 0 18px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:27px 26px;
    z-index:2001;
    box-shadow:-12px 0 50px #12271a1f
  }
  .settings-open .capture-panel {
    display:block
  }
  .settings-backdrop:not([hidden]) {
    display:block;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background:#162e2466;
    z-index:2000
  }
  .settings-open {
    overflow:hidden
  }
  .settings-heading {
    margin-bottom:28px;
    gap:17px
  }
  .settings-heading>.text-button {
    margin-left:0
  }
  .settings-heading>div {
    margin-right:auto
  }
  .mobile-close {
    display:grid;
    place-items:center;
    background:#f4f6ee;
    width:31px;
    height:31px;
    border-radius:7px;
    order:3
  }
  .mobile-close svg {
    width:17px
  }
  footer {
    font-size:10px;
    padding:23px 1px
  }
  .capture-status {
    margin-top:18px
  }
  .state-badge {
    display:block
  }
}
@media(max-width:440px) {
  .page-heading {
    align-items:center
  }
  .page-heading h1 {
    font-size:25px
  }
  .page-heading p {
    font-size:12px;
    max-width:200px
  }
  .settings-toggle {
    font-size:0;
    width:40px;
    height:40px;
    padding:0
  }
  .settings-toggle svg {
    width:20px
  }
  .map-stage {
    height:415px
  }
  .map-heading {
    padding:19px 16px
  }
  .map-heading h2 {
    font-size:15px
  }
  .map-start-card {
    width:260px
  }
  .map-footnote p {
    font-size:11px
  }
  .capture-status {
    gap:12px;
    padding:18px 15px
  }
  .capture-status-icon {
    width:35px;
    height:35px
  }
  .capture-status h2 {
    font-size:12px
  }
  .capture-status p {
    font-size:11px
  }
  .state-badge {
    display:none
  }
  .location-privacy {
    font-size:10px
  }
  .map-caption {
    font-size:11px;
    bottom:22px;
    max-width:85%
  }
  .illustration-label {
    font-size:10px;
    left:12px
  }
  .topbar {
    padding:0 5%
  }
  footer {
    flex-direction:column;
    gap:3px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    scroll-behavior:auto!important
  }
}
[hidden] {
  display:none!important
}

:root{color-scheme:light;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#173a2a;background:#f1f5f0}
*{box-sizing:border-box}body{margin:0}main{max-width:820px;margin:56px auto;padding:0 22px}
.eyebrow{font-size:.85rem;color:#52725f;letter-spacing:.03em}h1{font-size:2.25rem;margin:.4em 0}h2{font-size:1.1rem;margin:0}
.intro{color:#4a6255;line-height:1.7}.card{background:#fff;border:1px solid #dce7dc;border-radius:18px;padding:26px;margin:24px 0;box-shadow:0 6px 25px #18332106}
.row{display:flex;gap:14px;justify-content:space-between;align-items:center}#account{font-size:.8rem;color:#617163}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}button{font:inherit;background:#236245;color:#fff;border:0;border-radius:9px;padding:12px 18px;cursor:pointer}
button.secondary{background:#e9f0e9;color:#244432}button:disabled{background:#e3e8e3;color:#748176;cursor:not-allowed}button:focus-visible{outline:3px solid #d59721;outline-offset:3px}
.note{font-size:.86rem;color:#68766b;line-height:1.7}.status{font-size:1.2rem;font-weight:650;line-height:1.6;margin-bottom:18px}
.capture-settings{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px}.capture-settings label{display:grid;gap:7px;flex:1;min-width:150px}input,select{font:inherit;padding:10px;border:1px solid #a7b9aa;border-radius:7px;max-width:100%;background:#fff;color:inherit}input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #d59721;outline-offset:3px}#slot-list{padding-left:20px;line-height:1.8;overflow-wrap:anywhere}#slot-list li{margin:10px 0}summary{cursor:pointer}
dl{display:grid;grid-template-columns:110px 1fr;gap:12px;font-size:.9rem}dt{color:#68766b}dd{margin:0;overflow-wrap:anywhere}
@media(max-width:560px){main{margin:28px auto}.card{padding:20px}.actions button{width:100%}h1{font-size:1.9rem}dl{grid-template-columns:88px 1fr}}
.mode-label{display:grid;gap:8px;margin-top:18px}.badge{font-size:.8rem;background:#f5eed7;color:#765a1b;padding:6px 10px;border-radius:20px;white-space:nowrap}.request-list{padding:0;list-style:none;display:grid;gap:9px}.request-list button{text-align:left;width:100%;overflow-wrap:anywhere}.photo-list{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.photo-list button{font-size:.85rem;padding:9px 12px}figure{margin:18px 0}#photo-image{display:block;width:100%;max-height:70vh;object-fit:contain;background:#172019;border-radius:10px}figcaption{font-size:.85rem;overflow-wrap:anywhere;margin-top:10px}#media-title{font-weight:650}

/* Unified service layout; preserve prototype identity and capture DOM hooks. */
main{max-width:1560px;margin:0 auto;padding:36px 4.2% 0}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start}
.main-column,aside{min-width:0}.topbar-right a{color:#285e49;text-decoration:none;font-weight:600;margin-left:18px}
.brand svg{width:25px;height:25px}.page-heading h1{font-size:36px}.card{margin:0 0 22px;padding:24px;box-shadow:none}
.main-column>.card{margin-top:24px}.map-stage{height:360px}.map-heading{background:white;border-radius:16px 16px 0 0}
.map-footnote{background:white}.map-start-card h3{color:#173f35}.map-tools svg,.round-icon svg{width:24px;height:24px}
.capture-settings{display:grid;gap:16px}.capture-settings label{min-width:0}.actions{margin:18px 0;gap:8px}.actions button{padding:11px 14px}
#capture{flex:1;min-width:150px}#retry{width:100%;font-size:12px}.row{flex-wrap:wrap}#device{font-size:12px;color:#61705c}
.future-settings fieldset{border:1px dashed #d4ded3;border-radius:10px;padding:14px}.future-settings legend{font-size:12px;color:#61705c}
.future-settings label{display:grid;gap:5px;margin:8px 0}.future-settings input,.future-settings select{background:#f3f5f1}
button:disabled{cursor:not-allowed}#photo-list button{max-width:100%;overflow-wrap:anywhere}.photo-list{align-items:flex-start}
[hidden]{display:none!important}#photos-heading,#capture-settings-panel{scroll-margin-top:22px}
.choice-setting{border:0;padding:0;margin:18px 0;min-width:0}.choice-setting legend{font-weight:600;width:100%;margin-bottom:12px;display:flex;justify-content:space-between;gap:8px}.choice-setting output{font-size:12px;font-weight:400;color:#61705c}.choice-options{display:grid;gap:7px}.resolution-choices{grid-template-columns:repeat(4,minmax(0,1fr))}.mode-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-options label{position:relative;display:block!important;min-width:0;cursor:pointer}.choice-options input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.choice-options span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;border:1px solid #d4ded3;border-radius:9px;background:#f4f7f2;color:#285e49;font-weight:600}.choice-options small{font-size:10px;font-weight:400}.choice-options input:checked+span{background:#285e49;color:white;border-color:#285e49}.choice-options input:focus-visible+span{outline:3px solid #d59721;outline-offset:3px}.choice-options input:disabled+span{background:#f0f1ed;color:#8a9187;border-style:dashed}.choice-options .unavailable{cursor:not-allowed}
/* One shared track and one moving selection surface per radio group. */
.choice-options{--segments:4;--selected:0;position:relative;isolation:isolate;gap:0;padding:4px;border:1px solid #d4ded3;border-radius:14px;background:#eaf0e7}
.mode-choices{--segments:2}
.choice-options:has(>label:nth-child(2) input:checked){--selected:1}
.choice-options:has(>label:nth-child(3) input:checked){--selected:2}
.choice-options:has(>label:nth-child(4) input:checked){--selected:3}
.choice-options::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--segments));border-radius:10px;background:#285e49;box-shadow:0 2px 6px #173f3526;transform:translateX(calc(var(--selected)*100%));transition:transform 240ms cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:0}
.choice-options label{z-index:1}.choice-options span{border:0;background:transparent;min-height:58px;transition:color 180ms ease;border-radius:10px}
.choice-options input:checked+span{background:transparent;border:0;color:#fff}
.choice-options input:disabled+span{background:transparent;border:0;color:#8a9187}
@media(prefers-reduced-motion:reduce){.choice-options::before,.choice-options span{transition:none}}
.slider-setting>label{font-weight:600}.slider-value{display:flex;align-items:baseline;gap:8px;margin:10px 0}.slider-value output{font-size:30px;font-weight:700;color:#285e49}.slider-value span{font-size:13px;color:#61705c}.slider-setting input[type=range]{width:100%;padding:0;cursor:pointer;accent-color:#285e49}.slider-setting .preset-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.slider-setting .preset-row button{flex:1;min-width:34px;padding:8px 6px;border:1px solid #d4ded3;background:#f4f7f2;color:#285e49;border-radius:7px}.slider-setting .preset-row button[aria-pressed=true]{background:#285e49;color:white;border-color:#285e49}
@media(max-width:900px){.workspace{display:flex;flex-direction:column}#capture-settings-panel{order:-1;width:100%}.main-column{width:100%}.capture-settings{grid-template-columns:repeat(3,minmax(0,1fr))}.future-settings{display:none}.map-stage{height:310px}.topbar-right{display:flex;gap:10px}.topbar-right a{margin:0;font-size:12px}}
@media(max-width:560px){main{padding:24px 16px 0}.capture-settings{grid-template-columns:1fr}.topbar{padding:12px 16px}.header-divider,.header-title{display:none}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:29px}.map-stage{height:300px}.card{padding:20px}.map-start-card{max-width:90%}.actions button{width:auto}#photo-list button{width:100%;text-align:left}footer{gap:12px;flex-wrap:wrap}}