.cartogram{box-sizing:border-box;position:fixed;inset:3dvh 0 auto;margin:0 auto;width:min(1100px,96vw);height:94dvh;overflow:hidden;padding:20px;border:4px solid #9f8046;border-radius:16px;background:linear-gradient(#f9f1d4,#e4d6ad);color:#342b1b;font:17px Georgia,serif;display:none}.cartogram[open]{display:flex;flex-direction:column;gap:14px}.cartogram::backdrop{background:#172a2580}.cartogram header,.cartogram-actions,.cartogram-scale{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cartogram header{justify-content:space-between}.cartogram h2{margin:0}.cartogram button{font:inherit;padding:9px 12px;border:2px solid #294a40;border-radius:8px;background:#365b4d;color:#fff8df;cursor:pointer}.cartogram button:disabled{opacity:.45;cursor:default}.cartogram-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;flex:1;min-height:0}.cartogram-work{display:flex;flex-direction:column;min-height:0;gap:12px}.cartogram svg{flex:1;min-height:0;width:100%;background:#e4d3a0;border:2px solid #b49a60;cursor:crosshair;touch-action:none}.cartogram aside{overflow-y:auto;scrollbar-gutter:stable;background:#fff8df;border:2px solid #b49a60;padding:12px;border-radius:10px;line-height:1.5}.cartogram input{width:60px;font:inherit;padding:5px}.cartogram label{display:block}.cartogram textarea{width:100%;box-sizing:border-box;min-height:100px;font:inherit;padding:7px}.cartogram ul{padding-left:20px;margin:12px 0}.cartogram .status{background:#fff8df;padding:9px;min-height:2.5em}.cartogram button:focus-visible,.cartogram svg:focus-visible{outline:3px solid #c88b1f;outline-offset:2px}@media(max-width:700px){.cartogram{font-size:14px;padding:12px}.cartogram-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,3fr) minmax(0,1fr)}.cartogram h2{font-size:22px}.cartogram-actions{gap:5px}.cartogram button{padding:6px}.cartogram-scale{gap:5px}}

.cartogram header h2{display:flex;align-items:center;gap:12px}.cartogram header h2 img{width:44px;height:44px}.cartogram-canvas{display:flex;gap:12px;flex:1;min-height:0}.cartogram-canvas svg{height:100%;box-sizing:border-box}.cartogram-tools{display:flex;flex-direction:column;gap:8px;background:#e2cf99;border:2px solid #ad905b;padding:6px;width:68px;flex-shrink:0;align-items:center}.cartogram-tools strong{background:#345d83;color:#fff5db;font-size:14px;letter-spacing:1px;padding:3px 5px}.cartogram-tools button{width:64px;padding:3px;background:#e9d9aa;color:#342b1b;font-size:12px;border-color:#8e784d;border-radius:6px}.cartogram-tools img{display:block;width:44px;height:44px;margin:auto}.cartogram-tools button[aria-pressed=true]{background:#37648e;border-color:#f7e8b3;color:#fff8df;box-shadow:0 0 0 2px #37648e}.cartogram-scale{padding:8px;background:#e2cf99;border:1px solid #b49a60}.cartogram-scale strong{background:#345d83;color:#fff5db;padding:5px}.cartogram .save{background:#345d83;border-color:#24445f}@media(max-height:650px){.cartogram{gap:7px;padding:10px;font-size:14px}.cartogram header h2 img{width:30px;height:30px}.cartogram-tools img{width:30px;height:30px}.cartogram-tools button{font-size:11px}.cartogram-tools{gap:5px}.cartogram .status{min-height:1em;padding:5px}.cartogram-work{gap:6px}.cartogram button{padding:5px 8px}}

.cartogram .wall-size{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}.cartogram .wall-size label{display:flex;gap:8px;align-items:center}.cartogram .wall-size button{padding:5px 9px}.cartogram svg{user-select:none}.cartogram .cartogram-tools{overflow-y:auto;scrollbar-gutter:stable}@media(max-height:650px){.cartogram .wall-size{font-size:12px;gap:5px}.cartogram .wall-size input{padding:3px}.cartogram .cartogram-tools img{width:24px;height:24px}.cartogram .cartogram-tools button{padding:3px}}

.cartogram aside .wall-size{padding:10px 0;border-block:1px solid #b49a60;margin-block:10px}.cartogram aside .wall-size label{flex-wrap:wrap}.cartogram .status{font-size:14px;min-height:2em}

.cartogram .candidate-label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cartogram select{min-width:0;max-width:100%;font:inherit;padding:8px;background:#fff8df;color:#342b1b;border:2px solid #b49a60;border-radius:6px}.cartogram>p{margin:0}.cartogram .drawing text{user-select:none}
.cartogram-view{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.cartogram-view span{font-size:12px}.cartogram-view button{padding:5px 10px}.cartogram-view .pan[aria-pressed=true]{background:#37648e}.cartogram svg.panning{cursor:grab}.cartogram svg.panning:active{cursor:grabbing}