@charset "UTF-8";
:root {
  color-scheme: light dark;
  --paper: #f7f5ef;
  --ink: #262b25;
  --muted: #61665b;
  --line: #d4d7ca;
  --accent: #526543;
  --panel: #ebeee3;
  --selection: #d7e1c7;
  --selected: #98601c;
  --track: #d5dbc9;
  --button-ink: #fff;
  --button-bg: #526543;
  --disabled-bg: #e5e7df;
  --disabled-ink: #64695c;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; }
::selection { background: var(--selection); color: var(--ink); }
main { max-width: 1120px; margin: 0 auto; padding: 56px 48px 28px; }
.document-heading { padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; font-weight: 650; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 5vw, 58px); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; }
h1 span { color: var(--accent); }
@media (max-width: 850px) { main { padding: 36px 28px 24px; } }
@media (max-width: 620px) {
  main { padding: 25px 22px 23px; }
  .document-heading { padding-bottom: 20px; }
}
@media (prefers-color-scheme: dark) {
  :root { --selected: #edba70; --track: #424e39; --button-ink: #1c211c; --button-bg: #bdcfa6; --disabled-bg: #323b2c; --disabled-ink: #a1ab97; --paper: #1c211c; --ink: #e7eadd; --muted: #b2bbaa; --line: #414a3c; --accent: #bdcfa6; --panel: #2b3528; --selection: #46563b; }
}

.spread-model { padding: 25px 0 0; }
.model-heading { margin-bottom: 19px; }
.model-heading h2 { font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; line-height: 1.2; margin: 0; }
.society-layout { display: grid; grid-template-columns: minmax(0, 1fr) 211px; gap: 27px; }
.society-view { min-width: 0; }
.society-key { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.attitude-spectrum { width: 65px; height: 6px; border-radius: 3px; background: linear-gradient(90deg,#c85858,#b69630,#64a04a,#3b9b9b,#657bc2,#aa67b8); }
#society { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.person { cursor: pointer; outline: none; }
#society.is-running .person { transition: transform .65s linear; }
#society.is-running .person-dot { transition: fill .65s linear; }
.person-target { fill: transparent; }
.person-ring { fill: none; stroke: transparent; stroke-width: 2; }
.person-dot { fill: hsl(var(--attitude-hue) 52% 43%); stroke: var(--paper); stroke-width: 2; }
.person.selected .person-ring, .person:focus-visible .person-ring { stroke: var(--selected); stroke-width: 2.5; }
.person.previewed:not(.selected) .person-ring { stroke: var(--selected); stroke-dasharray: 2 3; }
.spread-result { display: flex; justify-content: flex-end; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 3px; }
.person-panel { border-left: 1px solid var(--line); padding-left: 23px; padding-top: 2px; }
.person-panel h3 { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 400; line-height: 1.2; margin: 0 0 10px; white-space: nowrap; }
.beliefs { padding-top: 16px; margin-top: 14px; border-top: 1px solid var(--line); }
.beliefs h4 { font-size: 12px; font-weight: 600; margin: 0 0 9px; }
.belief-row { display: flex; align-items: center; gap: 9px; margin: 6px 0; color: var(--muted); font-size: 11px; }
.belief-row > span:first-child { width: 9px; }
.belief-row > span:last-child { width: 29px; font-variant-numeric: tabular-nums; text-align: right; }
.belief-track { flex: 1; height: 5px; border-radius: 3px; overflow: hidden; background: var(--track); }
.belief-track > span { display: block; height: 100%; background: hsl(var(--attitude-hue) 52% 43%); }
.receptivity { border-top: 1px solid var(--line); padding-top: 13px; margin: 17px 0 0; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.receptivity strong { color: var(--ink); font-weight: 550; }
.model-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.model-controls button { font: inherit; font-size: 12px; font-weight: 600; min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--paper); cursor: pointer; }
.model-controls #spread-toggle { background: var(--button-bg); color: var(--button-ink); border-color: var(--button-bg); min-width: 121px; }
.model-controls button:hover:not(:disabled) { border-color: var(--accent); filter: brightness(.95); }
.model-controls button:focus-visible { outline: 2px solid var(--selected); outline-offset: 3px; }
.model-controls button:disabled { color: var(--disabled-ink); background: var(--disabled-bg); border-color: var(--disabled-bg); cursor: default; }
#spread-status { min-height: 1.6em; flex: 1; min-width: 225px; margin: 0 0 0 10px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.model-error { color: var(--ink); background: var(--panel); padding: 12px; }
@media (max-width: 850px) {
  .society-layout { grid-template-columns: minmax(0, 1fr) 175px; gap: 20px; }
  .person-panel { padding-left: 18px; }
}
@media (max-width: 620px) {
  .model-heading { margin-bottom: 20px; }
  .model-heading h2 { font-size: 23px; }
  .society-layout { display: block; }
  .society-key { font-size: 10px; gap: 6px 12px; }
  .person-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 39px minmax(60px, auto); align-items: start; column-gap: 20px; border-left: none; border-top: 1px solid var(--line); margin-top: 19px; padding: 18px 0 0; }
  .person-panel h3 { grid-column: 1; font-size: 24px; }
  .beliefs { grid-column: 2; grid-row: 1 / span 2; padding: 0; border: none; margin: 0; }
  .receptivity { grid-column: 1; grid-row: 2; margin-top: 14px; padding-top: 11px; }
  #spread-status { flex-basis: 100%; min-width: 0; margin: 5px 0 0; }
  .model-controls { gap: 8px; margin-top: 19px; }
  .model-controls button { min-height: 44px; }
}
@media (prefers-color-scheme: dark) {
  .person-dot { fill: hsl(var(--attitude-hue) 58% 66%); }
  .belief-track > span { background: hsl(var(--attitude-hue) 58% 66%); }
}
@media (prefers-reduced-motion: reduce) {
  #society.is-running .person, #society.is-running .person-dot { transition: none; }
}

.square-ground { fill: #eeeade; stroke: #d8d3c4; stroke-width: 1.5; }
.stone-grain { fill: #a9a28f; opacity: .25; }
.square-border { fill: none; stroke: #d7d0bd; stroke-width: 5; stroke-linecap: round; }
.market-stall rect { fill: #d2c3a9; stroke: #b9a98d; stroke-width: 1; }
.market-stall > path:not(.awning-stripe) { fill: #a7b08e; stroke: #89936f; stroke-width: 1; }
.market-stall.second-stall > path:not(.awning-stripe) { fill: #c49b85; stroke: #af856d; }
.awning-stripe { stroke: #f3f0e6; stroke-width: 8; fill: none; }
.square-benches { fill: #b29a74; stroke: #978361; stroke-width: 1; }
.square-trees { fill: #b5c29e; stroke: #a4b48c; stroke-width: 6; }
.fountain-rim { fill: #d6d0bc; stroke: #c1baa4; stroke-width: 2; }
.fountain-water { fill: #afc7c6; stroke: #8dadaa; stroke-width: 1; }
.fountain-ripple, .fountain-jet { fill: none; stroke: #dce8e0; stroke-width: 2; stroke-linecap: round; }
.conversation { pointer-events: none; }
.speech-bubble { fill: var(--paper); stroke: hsl(var(--attitude-hue) 45% 35%); stroke-width: 1.3; }
.speech-dot { fill: hsl(var(--attitude-hue) 45% 35%); }
@media (prefers-color-scheme: dark) {
  .speech-bubble { stroke: hsl(var(--attitude-hue) 58% 66%); }
  .speech-dot { fill: hsl(var(--attitude-hue) 58% 66%); }
  .square-ground { fill: #293026; stroke: #424a39; }
  .stone-grain { fill: #7f886e; }
  .square-border { stroke: #404936; }
  .market-stall rect { fill: #5f5745; stroke: #7b7059; }
  .market-stall > path:not(.awning-stripe) { fill: #677750; stroke: #89966e; }
  .market-stall.second-stall > path:not(.awning-stripe) { fill: #886a56; stroke: #a78970; }
  .awning-stripe { stroke: #aaa88e; }
  .square-benches { fill: #8a7955; stroke: #a08d68; }
  .square-trees { fill: #596e45; stroke: #465b37; }
  .fountain-rim { fill: #626451; stroke: #7b7d66; }
  .fountain-water { fill: #466c69; stroke: #6e9390; }
  .fountain-ripple, .fountain-jet { stroke: #a1bdb1; }
}
@media (max-width: 620px) { .model-heading h2 { font-size: 21px; } }
@media print { main { padding: 0; } .model-controls { display: none; } }