:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #283e38; background: #f7f7f2; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid #617969; outline-offset: 5px; }
main { width: min(1180px, calc(100% - 80px)); margin: 0 auto; }
.masthead { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 24px; border-bottom: 1px solid #dfe3d9; }
.wordmark { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; font-weight: 650; font-size: 18px; letter-spacing: -.5px; }
.wordmark svg { width: 38px; height: 28px; fill: none; stroke: #52705e; stroke-width: 1.5; }
.edition { font-size: 10px; letter-spacing: 1.8px; color: #738075; }
.introduction { text-align: center; margin: 44px 0 32px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2.2px; color: #728273; margin: 0 0 16px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4vw, 51px); font-weight: 400; letter-spacing: -1.8px; margin: 0 0 15px; line-height: 1.15; }
h1 em { font-weight: 400; color: #687f5e; }
.intro-copy { color: #6b766c; font-size: 14px; line-height: 1.75; margin: 0; }
.editor { margin-bottom:26px; background: #fffefa; border: 1px solid #dfe3d9; border-radius: 18px; overflow: hidden; box-shadow: 0 5px 24px #243d3004; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 24px; border-bottom: 1px solid #e9eae2; }
.toolbar p { display: flex; align-items: center; gap: 10px; font-size: 12px; margin: 0; color: #68786a; }
.toolbar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.actions { display: flex; gap: 8px; }
.actions button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #e1e5da; background: transparent; border-radius: 7px; padding: 8px 11px; color: #53664f; font-size: 11px; cursor: pointer; white-space: nowrap; }
.actions button:hover:not(:disabled) { background: #f0f3e9; }
.actions button:disabled { opacity: .38; cursor: default; }
.stage { height: clamp(480px, 42vw, 560px); position: relative; background-image: radial-gradient(#b9c4b43b .8px, transparent .8px); background-size: 21px 21px; }
#diagram { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.set-circle { cursor: grab; outline: none; }
.set-circle.dragging { cursor: grabbing; }
.circle-fill { stroke-width: 1.8; }
.circle-ring { fill: none; stroke-width: 1.2; stroke-dasharray: 3 5; opacity: 0; pointer-events: none; }
.set-circle:focus-visible .circle-ring, .set-circle.chosen .circle-ring { opacity: .65; }
.set-circle.dragging .circle-fill { stroke-width: 2.5; }
.circle-label { font-family: Georgia, "Times New Roman", serif; font-weight: 400; text-anchor: middle; pointer-events: none; }
.label-backing { fill: #fffefa; fill-opacity: .76; }
.canvas-caption { position: absolute; bottom: 18px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: #83907c; pointer-events: none; text-align: center; }
.status-dot { width: 4px; height: 4px; background: #8e9e85; border-radius: 100%; flex-shrink: 0; }
.editor-bottom { padding: 15px 24px; border-top: 1px solid #e9eae2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.circle-picker { display: flex; gap: 9px; flex-wrap: wrap; }
.circle-picker button { display: flex; align-items: center; gap: 7px; background: transparent; color: #657164; font-size: 11px; padding: 6px 8px; border-radius: 5px; border: 1px solid transparent; cursor: pointer; }
.circle-picker button:hover, .circle-picker button[aria-pressed="true"] { border-color: #dce2d4; background: #f6f7ef; }
.swatch { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--stroke); background: var(--fill); }
.editable { font-size: 10px; color: #909985; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.editable span { width: 5px; height: 5px; border-radius: 50%; background: #a4b395; }
.guide { display: grid; grid-template-columns: 1fr 1.3fr 1.5fr; gap: 30px; padding: 22px 24px; border-top: 1px solid #e9eae2; }
.guide > div { display: flex; gap: 12px; align-items: flex-start; }
.guide-number { font-family: Georgia, serif; font-size: 14px; color: #8f9d83; padding-top: 2px; }
.guide p { margin: 0; font-size: 11px; line-height: 1.6; color: #86907e; }
.guide strong { display: block; font-size: 12px; font-weight: 500; color: #4b6048; margin-bottom: 4px; }
footer { border-top: 1px solid #dfe3d9; padding: 13px 0 20px; display: flex; gap: 12px; justify-content: space-between; color: #939b88; font-size: 10px; line-height: 1.7; }
footer p { margin: 0; }
kbd { font: inherit; color: #75856c; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1500px) { .introduction { margin-top: 58px; margin-bottom: 40px; } }
@media (max-width: 700px) {
  main { width: calc(100% - 30px); }
  .masthead { padding: 20px 2px; }
  .edition { font-size: 8px; letter-spacing: 1px; }
  .wordmark { font-size: 16px; }
  .introduction { margin: 33px 10px 26px; }
  h1 { max-width: 390px; margin-left: auto; margin-right: auto; font-size: 36px; letter-spacing: -1.2px; }
  h1 em { white-space: nowrap; }
  .intro-copy { font-size: 12px; }
  .desktop-break { display: none; }
  .toolbar { padding: 12px; gap: 8px; align-items: flex-start; }
  .toolbar p { font-size: 10px; max-width: 195px; line-height: 1.6; }
  .toolbar p svg { display: none; }
  .actions { gap: 5px; }
  .actions button { padding: 7px; font-size: 10px; }
  #undo span { display: none; }
  .stage { height: 520px; }
  .canvas-caption { bottom: 15px; font-size: 9px; }
  .editor-bottom { padding: 10px 6px; }
  .circle-picker { gap: 1px; width: 100%; justify-content: space-around; }
  .circle-picker button { font-size: 9px; gap: 5px; padding: 6px 4px; }
  .editable { display: none; }
  .guide { grid-template-columns: 1fr; padding: 22px 14px; gap: 17px; }
  .guide p span { display: block; }
  .guide strong { margin-bottom: 0; }
  footer { flex-direction: column; gap: 5px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.resize-handle { fill: #fffdf6; stroke: #466846; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.size-controls { display:flex;gap:5px; }
.size-controls button { border:1px solid #dce2d6; border-radius:6px;padding:6px 9px;background:#fafbf7;color:#50654a;cursor:pointer;font-size:11px; }
.equality-controls { padding:14px 24px 16px;border-top:1px solid #e9eae2;background:#fafbf6; }
.equality-controls > div { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.equality-controls label { font-size:12px;color:#40583d; }
.equality-controls select { max-width:100%;font:inherit;font-size:12px;color:#40583d;border:1px solid #c9d3c2;border-radius:6px;padding:8px 28px 8px 10px;background:#fffefa; }
.equality-controls p { font-size:11px;line-height:1.6;color:#6b7864;margin:9px 0 0; }
@media(max-width:700px) { .equality-controls { padding:14px; }.equality-controls > div { gap:8px; } }
button:disabled { cursor:default;opacity:.5; }
.record-panel { margin:0 0 32px;padding:26px 28px;background:#eff2e9;border:1px solid #dce3d4;border-radius:12px;display:grid;grid-template-columns:1fr 300px;gap:10px 30px; }
h2 { font-family:Georgia,serif;font-size:25px;line-height:1.2;font-weight:normal;color:#334c34;margin:4px 0 12px; }
.record-panel .eyebrow { margin:0 0 10px; }
.relationship-summary { font-size:13px;color:#53664e;line-height:1.7;margin-bottom:0; }
.primary-button { background:#41613f;color:#fff;border:0;border-radius:8px;padding:13px 20px;font:inherit;font-size:14px;cursor:pointer; }
.primary-button:hover:not(:disabled) { background:#304e30; }
.record-actions { align-self:center; }
.record-actions .primary-button { width:100%; }
#record-status { color:#52624e;line-height:1.6;font-size:12px;margin:10px 0;min-height:20px; }
.storage-note,.privacy-note { grid-column:1/-1;margin:4px 0;font-size:11px;line-height:1.6;color:#6c7964; }
.storage-note { font-weight:600; }
.privacy-note a, .document a { color:#426640; }
.boundary-note { color:#876721;font-size:12px;line-height:1.5; }
.results-panel { margin:0 0 30px; }
#results-total { font-size:12px;color:#65745d;line-height:1.6; }
.results-groups { display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px; }
.result-card { border:1px solid #dce3d4;border-radius:10px;padding:18px;background:#fbfcf8;font-size:12px;line-height:1.6;color:#56694f; }
.result-card h3 { margin:0;font-size:16px;color:#354d36; }
.result-card svg { width:100%;height:150px;margin:16px 0 0; }
.result-card .result-legend { font-size:10px; }
.result-card small { color:#85907d; }
.document { max-width:760px;margin:50px auto;line-height:1.8;color:#53664e;padding:0 20px; }
.document h1 { font-size:40px; }
.document label { display:block;font-size:14px; }
.document input { padding:12px;border:1px solid #bfcbb5;border-radius:6px;max-width:100%;width:400px;margin:10px 0; }
[hidden] { display:none !important; }
@media(max-width:700px) {
  .editor-bottom { flex-wrap:wrap;gap:10px;justify-content:center; }
  .record-panel { padding:20px;grid-template-columns:1fr;gap:15px; }
  .record-actions { width:100%; }
  h2 { font-size:23px; }
}
.label-leader { stroke-width:1.5; }
.histogram-track { height:12px;background:#e8edde;border-radius:6px;overflow:hidden;margin:12px 0 4px; }
.histogram-bar { height:100%;background:#67815c;border-radius:6px;min-width:2px; }
.owner-document { max-width:1000px; }
.owner-document .eyebrow { margin-top:32px; }
.owner-document h1 { line-height:1.15;margin:12px 0 24px; }
.results-actions { display:flex;gap:12px 24px;align-items:center;flex-wrap:wrap;padding:20px 0;border-block:1px solid #dce3d4;font-size:13px; }
.results-actions button { padding:9px 14px;border:1px solid #becbb1;border-radius:6px;background:white; }
.histogram { grid-template-columns:1fr; }
.histogram .result-card { display:grid;grid-template-columns:160px 1fr;column-gap:24px;align-items:center; }
.histogram .result-card svg { grid-column:1;grid-row:1/5;height:125px;margin:0; }
.histogram .result-card h3,.histogram .histogram-track,.histogram .result-card p,.histogram .result-card small { grid-column:2; }
.histogram .result-card p { margin:8px 0; }
.histogram .result-card .result-legend { display:none; }
.data-guide { margin:28px 0;font-size:13px; }
.data-guide summary { cursor:pointer;font-weight:600; }
.region-detail { grid-column:2;cursor:pointer;margin-top:8px;font-size:11px; }
@media(max-width:600px) { .owner-document h1 { font-size:32px; }.histogram .result-card { grid-template-columns:90px 1fr;column-gap:14px;padding:12px; }.histogram .result-card svg { height:90px; }.histogram .result-card h3 { font-size:14px; } }