.place-studio-link { text-decoration: none; color: inherit; }
:root {
  --ink: #17201d;
  --muted: #68716c;
  --paper: #f3f1ea;
  --panel: #fbfaf6;
  --line: #dcded6;
  --green: #306857;
  --green-dark: #214c40;
  --mint: #cde7d5;
  --sand: #e8e0cf;
  --orange: #de7138;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.topbar { height: 76px; padding: 0 max(28px, calc((100vw - 1380px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(243, 241, 234, .93); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 760; letter-spacing: -.03em; }
.brand-mark { width: 25px; height: 25px; position: relative; display: inline-block; }
.brand-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); position: absolute; }
.brand-mark i:nth-child(1) { top: 3px; left: 1px; }.brand-mark i:nth-child(2) { top: 14px; left: 9px; }.brand-mark i:nth-child(3) { top: 2px; right: 0; }
.brand-mark:after { content: ""; position: absolute; inset: 6px 5px 6px 5px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-38deg); }
.top-actions { display: flex; align-items: center; gap: 20px; }.privacy { font-size: 13px; color: var(--muted); }.status-dot { width: 7px; height: 7px; background: #4fa26c; display: inline-block; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 4px #dcebdd; }
.button { border: 0; border-radius: 8px; padding: 11px 17px; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .2s ease; }.button:hover { transform: translateY(-1px); }.button-primary { color: white; background: var(--green); box-shadow: 0 6px 16px rgba(48, 104, 87, .17); }.button-primary:hover { background: var(--green-dark); }.button-light { background: #eceee9; }
main { width: min(1380px, calc(100% - 56px)); margin: 0 auto; }
.intro { min-height: 300px; padding: 55px 3.5% 44px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }.eyebrow,.step-label { margin: 0 0 14px; color: var(--orange); font-size: 11px; letter-spacing: .16em; font-weight: 800; }.intro h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5vw, 67px); line-height: .98; font-weight: 400; letter-spacing: -.045em; margin: 0; }.intro h1 em { color: var(--green); font-weight: 400; }.intro-copy { color: var(--muted); max-width: 640px; margin: 26px 0 0; line-height: 1.65; font-size: 16px; }.intro-note { max-width: 350px; display: flex; gap: 16px; border-left: 1px solid #c9cbc4; padding: 6px 0 6px 22px; }.intro-note p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.intro-note strong { color: var(--ink); }.note-icon { color: var(--orange); font-size: 25px; }
.workspace { min-height: 650px; display: grid; grid-template-columns: 330px 1fr; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: var(--panel); box-shadow: 0 22px 55px rgba(48, 54, 49, .08); }.filter-panel { padding: 28px; border-right: 1px solid var(--line); }.panel-heading,.map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }.panel-heading { margin-bottom: 31px; }.panel-heading h2,.map-toolbar h2,.export-section h2,.dialog-heading h2 { margin: 0; font-family: Georgia, serif; font-weight: 400; letter-spacing: -.025em; }.panel-heading h2 { font-size: 26px; }.panel-heading .step-label,.map-toolbar .step-label { margin-bottom: 7px; }.text-button { border: 0; background: none; padding: 3px; cursor: pointer; color: var(--green); font-size: 12px; font-weight: 700; }
.field-label, fieldset legend, .filter-panel label span { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #59635e; text-transform: uppercase; display: block; margin-bottom: 9px; }.select-wrap,.search-wrap { position: relative; margin-bottom: 25px; }.select-wrap:after { content: "⌄"; position: absolute; right: 13px; top: 10px; pointer-events: none; }select,input,textarea { width: 100%; border: 1px solid #d4d7cf; border-radius: 7px; background: white; padding: 11px 12px; outline: 0; color: var(--ink); }select { appearance: none; }.search-wrap span { position: absolute; left: 13px; top: 8px; font-size: 20px; color: var(--muted); }.search-wrap input { padding-left: 39px; }.filter-panel input:focus,.filter-panel select:focus,dialog input:focus,dialog textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(48,104,87,.1); }
fieldset { border: 0; padding: 0; margin: 0 0 24px; }.date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.filter-panel input[type="date"] { font-size: 12px; padding: 10px 8px; }.summary-card { margin-top: 34px; padding: 22px; border-radius: 10px; background: #e8ede6; border: 1px solid #d7dfd6; }.summary-card > p { margin: 0 0 16px; font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--green); }.summary-value { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid #cbd4ca; padding-bottom: 16px; }.summary-value strong { font-family: Georgia, serif; font-size: 35px; font-weight: 400; }.summary-value span { color: var(--muted); font-size: 12px; }.summary-stats { display: flex; gap: 30px; padding-top: 15px; }.summary-stats span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }.summary-stats b { display: block; color: var(--ink); font-size: 12px; margin-bottom: 3px; text-transform: none; letter-spacing: 0; }
.map-panel { min-width: 0; display: flex; flex-direction: column; }.map-toolbar { height: 91px; padding: 20px 27px; }.map-toolbar h2 { font-size: 25px; }.map-actions { display: flex; align-items: center; gap: 9px; }.icon-button { width: 41px; height: 41px; background: white; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 20px; }.map-stage { flex: 1; min-height: 460px; position: relative; overflow: hidden; background-color: #dfe5dd; background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.7) 0 3%, transparent 3.3%), linear-gradient(25deg, transparent 47%, rgba(255,255,255,.26) 48% 52%, transparent 53%), linear-gradient(115deg, transparent 48%, rgba(48,104,87,.06) 49% 51%, transparent 52%); background-size: auto, 85px 85px, 120px 120px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.map-stage:before,.map-stage:after { content: ""; position: absolute; border-radius: 46% 54% 57% 43%; background: rgba(255,255,255,.26); pointer-events: none; }.map-stage:before { width: 44%; height: 45%; left: -12%; top: -10%; transform: rotate(18deg); }.map-stage:after { width: 32%; height: 35%; right: -8%; bottom: -10%; transform: rotate(-20deg); }.map-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: crosshair; }.map-legend { position: absolute; z-index: 3; left: 22px; bottom: 20px; background: rgba(251,250,246,.94); border: 1px solid var(--line); border-radius: 7px; padding: 10px 13px; display: flex; gap: 8px; align-items: center; font-size: 11px; box-shadow: 0 5px 16px rgba(30,40,35,.1); }.map-legend i { width: 18px; height: 3px; background: var(--orange); border-radius: 4px; }.map-legend b { color: var(--muted); padding-left: 9px; margin-left: 2px; border-left: 1px solid var(--line); }.map-attribution { position: absolute; right: 14px; bottom: 10px; color: #6e7872; font-size: 9px; z-index: 3; }.map-empty { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(234,237,230,.92); }.map-empty[hidden] { display: none; }.map-empty span { font-size: 42px; color: var(--orange); }.map-empty small { color: var(--muted); margin-top: 6px; }.point-strip { min-height: 112px; padding: 15px 20px; display: flex; gap: 9px; overflow-x: auto; background: #f7f6f1; }.point-strip-tools { min-width: 150px; padding: 8px 12px 8px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 10px; color: var(--muted); font-size: 10px; }.point-strip-tools b { color: var(--ink); font-size: 12px; }.point-strip-tools div { display: flex; gap: 6px; }.point-strip-tools button { border: 1px solid var(--line); background: white; border-radius: 5px; padding: 5px 8px; cursor: pointer; font-size: 10px; font-weight: 700; }.point-card { position: relative; min-width: 185px; max-width: 210px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 13px 39px 11px 13px; cursor: pointer; text-align: left; transition: .18s ease; }.point-card:hover,.point-card.active { border-color: var(--orange); box-shadow: 0 3px 12px rgba(50,55,50,.08); }.point-card.excluded { opacity: .48; background: #eeeee9; border-style: dashed; }.point-card strong,.point-card span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.point-card strong { font-size: 12px; }.point-card span { margin-top: 5px; font-size: 10px; color: var(--muted); }.point-toggle { position: absolute; right: 9px; top: 10px; width: 23px; height: 23px; padding: 0; border: 1px solid #aac3b6; border-radius: 50%; background: #e4efe8; color: var(--green); font-size: 12px; font-weight: 800; cursor: pointer; }.point-card.excluded .point-toggle { background: white; border-color: #c5c8c1; color: var(--muted); }
.export-section { margin: 28px 0 55px; padding: 33px 40px; border-radius: 13px; background: var(--sand); display: flex; justify-content: space-between; align-items: center; gap: 30px; }.export-section h2 { font-size: 30px; }.export-section p:not(.step-label) { color: var(--muted); margin: 9px 0 0; font-size: 13px; }.export-actions { display: flex; gap: 11px; }.export-button { width: 190px; min-height: 78px; border: 1px solid #ced2ca; border-radius: 9px; background: var(--panel); padding: 13px 15px; display: grid; grid-template-columns: 35px 1fr; grid-template-rows: auto auto; text-align: left; cursor: pointer; }.export-button > span { grid-row: 1/3; font-size: 17px; color: var(--green); align-self: center; }.export-button b { font-size: 13px; }.export-button small { color: var(--muted); font-size: 10px; }.export-dark { background: var(--green); border-color: var(--green); color: white; }.export-dark > span,.export-dark small { color: #d9e8df; }.studio-button { background: var(--orange); border-color: var(--orange); color: white; }.studio-button > span,.studio-button small { color: #fff1e8; }.export-button:hover { transform: translateY(-2px); box-shadow: 0 6px 17px rgba(44,55,48,.1); }
dialog { width: min(510px, calc(100% - 30px)); border: 0; border-radius: 14px; padding: 0; background: var(--panel); box-shadow: 0 25px 80px rgba(20,30,25,.25); }dialog::backdrop { background: rgba(24,32,29,.46); backdrop-filter: blur(3px); }dialog form { padding: 27px; }.dialog-heading { display: flex; justify-content: space-between; margin-bottom: 25px; }.dialog-close { border: 0; background: none; font-size: 28px; cursor: pointer; }.dialog-heading h2 { font-size: 28px; }dialog label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 16px; }dialog input,dialog textarea { margin-top: 7px; }.dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 23px; }.dialog-actions > div { display: flex; gap: 8px; }.danger { color: #a44937; }.toast { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%, 20px); background: var(--ink); color: white; padding: 11px 17px; border-radius: 7px; opacity: 0; pointer-events: none; transition: .25s; z-index: 20; font-size: 13px; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
#importDialog { width: min(720px, calc(100% - 30px)); }.import-dialog-content { padding: 30px; }.import-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }.import-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #faf9f5; }.import-steps li > span { color: var(--orange); font-size: 12px; font-weight: 800; letter-spacing: .09em; padding-top: 2px; }.import-steps strong { display: block; margin-bottom: 5px; }.import-steps p,.import-privacy p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 13px; }.import-steps code { color: var(--ink); background: #ecebe4; border-radius: 4px; padding: 2px 5px; }.import-privacy { display: flex; align-items: flex-start; gap: 10px; margin-top: 17px; padding: 14px 16px; border-radius: 9px; background: #edf4ef; }.import-privacy .status-dot { flex: 0 0 auto; margin-top: 5px; }.import-dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 20px; }.official-help { text-decoration: none; }
@media (max-width: 900px) { .intro { padding-inline: 0; }.intro-note { display: none; }.workspace { grid-template-columns: 1fr; }.filter-panel { border-right: 0; border-bottom: 1px solid var(--line); }.map-stage { min-height: 430px; }.export-section { align-items: flex-start; flex-direction: column; }.export-actions { width: 100%; flex-wrap: wrap; }.export-button { flex: 1 1 190px; width: auto; } }
@media (max-width: 600px) { .topbar { height: 67px; padding: 0 16px; }.privacy { display: none; }.top-actions .button { font-size: 0; padding: 10px 13px; }.top-actions .button-icon { font-size: 18px; }.brand { font-size: 18px; }main { width: min(100% - 24px, 1380px); }.intro { min-height: 260px; padding-block: 37px 30px; }.intro h1 { font-size: 39px; }.intro-copy { font-size: 14px; }.filter-panel { padding: 22px 18px; }.map-toolbar { height: auto; min-height: 84px; padding: 17px; }.map-actions .button { font-size: 0; width: 41px; padding: 0; }.map-actions .button:after { content: "✎"; font-size: 17px; }.map-stage { min-height: 370px; }.map-attribution { display: none; }.export-section { padding: 27px 20px; }.export-actions { flex-direction: column; }.export-button { width: 100%; }.date-grid { grid-template-columns: 1fr; }.dialog-actions { align-items: flex-start; flex-direction: column-reverse; }.dialog-actions > div { width: 100%; }.dialog-actions .button { flex: 1; }.import-dialog-content { padding: 22px 18px; }.import-steps li { grid-template-columns: 34px 1fr; padding: 13px; gap: 9px; }.import-dialog-actions { align-items: stretch; flex-direction: column-reverse; }.import-dialog-actions .button { width: 100%; }.official-help { text-align: center; } }