:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; color: #191919; background: #f7f7f6; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 1320px; min-height: 100vh; margin: 0 auto; padding: clamp(1.25rem, 4vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.workspace { min-width: 0; }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.eyebrow { margin: 0 0 .45rem; color: #777; font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 2.15rem); font-weight: 650; letter-spacing: -.045em; }
.zoom-readout { color: #666; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; white-space: nowrap; }
.map-frame { position: relative; width: min(100%, 640px); aspect-ratio: 1; overflow: hidden; background-image: conic-gradient(#ededeb 25%, transparent 0 50%, #ededeb 0 75%, transparent 0); background-size: 22px 22px; border: 0; border-radius: 0; }
#map { position: absolute; z-index: 0; inset: 0; background: transparent; }.shape-circle #map { clip-path: circle(50% at 50% 50%); }.shape-heart #map { clip-path: url(#heartClip); }
.shape-outline { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #000; stroke-width: .65; vector-effect: non-scaling-stroke; pointer-events: none; }.shape-outline > * { display: none; }.shape-rectangle .outline-rectangle, .shape-circle .outline-circle, .shape-heart .outline-heart { display: block; }.shape-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.maplibregl-canvas { outline: none; }
.maplibregl-ctrl-bottom-right { display: none; }
.map-hint { position: absolute; z-index: 1; left: 1rem; bottom: 1rem; padding: .45rem .65rem; color: #595959; background: rgb(255 255 255 / .88); border: 1px solid #e0e0de; border-radius: 99px; font-size: .75rem; pointer-events: none; transition: color .15s, background .15s; }
.map-hint.is-placing { color: #fff; background: #1c1c1c; border-color: #1c1c1c; }
.canvas-note { margin: .85rem 0 0; color: #888; font-size: .78rem; }
.control-panel { align-self: center; padding: 1.6rem; background: #fff; border: 1px solid #e1e1df; border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .035); }
.brand { display: flex; align-items: center; gap: .45rem; margin-bottom: 1.65rem; font-size: 1.08rem; font-weight: 700; letter-spacing: -.03em; }.brand-heart { font-size: 1.25rem; }
.control-section { padding: 1.1rem 0; border-top: 1px solid #ededeb; }.control-section:first-of-type { border-top: 0; padding-top: 0; }.field-label { display: block; margin-bottom: .65rem; font-size: .82rem; font-weight: 650; }.label-row { display: flex; justify-content: space-between; align-items: baseline; }.label-row .field-label { margin: 0 0 .65rem; }
.search-row { display: flex; gap: .45rem; }.search-row input { width: 100%; min-width: 0; padding: .68rem .75rem; border: 1px solid #dcdcd9; border-radius: 7px; color: #242424; outline: none; }.search-row input:focus, select:focus { border-color: #555; box-shadow: 0 0 0 3px #0000000d; }.icon-button, .square-button { display: grid; place-items: center; border: 1px solid #dcdcd9; border-radius: 7px; background: #fff; }.icon-button { width: 2.6rem; font-size: 1.35rem; }.field-help, .export-message { min-height: 1.05rem; margin: .45rem 0 0; color: #888; font-size: .72rem; }.export-message.is-error { color: #ab3434; }.export-message.is-success { color: #317144; }
.value-pill, .status-chip { padding: .22rem .45rem; color: #666; background: #f3f3f2; border-radius: 4px; font-family: ui-monospace, monospace; font-size: .7rem; }.status-chip { color: #39714a; font-family: inherit; }.zoom-controls { display: grid; grid-template-columns: 2.4rem 1fr 2.4rem; align-items: center; gap: .55rem; }.square-button { height: 2.2rem; font-size: 1.2rem; }.square-button:hover, .icon-button:hover { background: #f5f5f3; } input[type="range"] { accent-color: #222; width: 100%; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; gap: 3px; background: #f1f1ef; border-radius: 7px; }.segmented button { padding: .47rem .2rem; color: #777; border: 0; border-radius: 5px; background: transparent; font-size: .78rem; }.segmented button.is-active { color: #222; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }.secondary-button { width: 100%; padding: .7rem .8rem; color: #222; border: 1px solid #d9d9d6; border-radius: 7px; background: #fff; font-size: .82rem; font-weight: 600; }.secondary-button.is-active { color: #fff; background: #1e1e1d; border-color: #1e1e1d; }.field-spacer { height: 1rem; } select { width: 100%; padding: .65rem .75rem; color: #333; border: 1px solid #dcdcd9; border-radius: 7px; background: #fff; }.export-section { padding-bottom: 0; }.export-button { width: 100%; margin-top: .75rem; padding: .8rem; color: #fff; border: 1px solid #1c1c1c; border-radius: 7px; background: #1c1c1c; font-weight: 650; }.export-button:hover { background: #3a3a38; }.export-button:disabled { cursor: wait; opacity: .6; }.export-button span { margin-left: .3rem; }.attribution { margin: 1.35rem 0 0; color: #aaa; font-size: .62rem; line-height: 1.45; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.toggle-row .field-label { margin: 0; }.toggle-row p { margin: .25rem 0 0; color: #888; font-size: .72rem; }.switch { position: relative; width: 2.45rem; height: 1.42rem; flex: 0 0 auto; cursor: pointer; }.switch input { position: absolute; opacity: 0; }.switch span { position: absolute; inset: 0; border-radius: 99px; background: #dededb; transition: background .15s; }.switch span::after { position: absolute; top: 3px; left: 3px; width: calc(1.42rem - 6px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); content: ''; transition: transform .15s; }.switch input:checked + span { background: #20201f; }.switch input:checked + span::after { transform: translateX(1.03rem); }.switch input:focus-visible + span { outline: 3px solid #0000001c; outline-offset: 2px; }
@media (max-width: 860px) { .app-shell { grid-template-columns: 1fr; max-width: 680px; align-items: start; }.map-frame { width: 100%; }.control-panel { width: 100%; }.workspace-heading { margin-top: .5rem; } }