:root{
  --bg:#f3f1ec; --panel:#ffffff; --ink:#23262b; --sub:#5b5f66; --line:#dcd8cf;
  --teal:#2b6f6f; --teal-soft:#cfe3e0;
  --plum:#7a4b8a; --amber:#c9862f; --red:#b34a3f;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --serif: ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
  /* fixed (non-theme-swapping) dark ink for text sitting on the palette's fixed-lightness
     room colors -- var(--ink) itself flips to a light color in dark mode and would go
     unreadable on those same light pastel fills. */
  --room-ink: #23262b;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14171a; --panel:#1c2023; --ink:#e7e5df; --sub:#a9aca3; --line:#33383d;
    --teal:#4fb3ac; --teal-soft:#20302f;
    --plum:#c79bdb; --amber:#e3ab53; --red:#e08277;
  }
}
:root[data-theme="dark"]{
  --bg:#14171a; --panel:#1c2023; --ink:#e7e5df; --sub:#a9aca3; --line:#33383d;
  --teal:#4fb3ac; --teal-soft:#20302f; --plum:#c79bdb; --amber:#e3ab53; --red:#e08277;
}
:root[data-theme="light"]{
  --bg:#f3f1ec; --panel:#ffffff; --ink:#23262b; --sub:#5b5f66; --line:#dcd8cf;
  --teal:#2b6f6f; --teal-soft:#cfe3e0; --plum:#7a4b8a; --amber:#c9862f; --red:#b34a3f;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  padding:2.5rem 1.5rem 4rem;
}
.wrap{max-width:960px; margin:0 auto;}
header{margin-bottom:1.6rem;}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); margin:0 0 .6rem;
}
h1{
  font-family:var(--serif); font-weight:600; font-size:1.85rem; margin:0 0 .5rem;
  text-wrap:balance; letter-spacing:-.01em;
}
.lede{color:var(--sub); font-size:1rem; line-height:1.55; max-width:66ch; margin:0 0 1.3rem;}

.controls{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:1rem 1.1rem; margin-bottom:1rem;
}
.controls label{font-family:var(--mono); font-size:.72rem; color:var(--sub); text-transform:uppercase; letter-spacing:.05em;}
.controls input[type=text]{
  font-family:var(--mono); font-size:.88rem; padding:.5rem .6rem; border-radius:6px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); min-width:19rem; flex:1;
}
.controls input[type=number]{
  font-family:var(--mono); font-size:.88rem; padding:.5rem .5rem; border-radius:6px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); width:4rem;
}
button{
  font-family:var(--sans); font-size:.85rem; font-weight:600; padding:.5rem .9rem; border-radius:6px;
  border:1px solid var(--line); background:var(--teal); color:#fff; cursor:pointer;
}
button:hover{filter:brightness(1.08);}
button.ghost{background:transparent; color:var(--ink);}
.controls-row{display:flex; gap:.6rem; flex-wrap:wrap; width:100%; align-items:center;}
.presets{font-family:var(--mono); font-size:.75rem; color:var(--sub); display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.presets a{color:var(--teal); cursor:pointer; text-decoration:underline;}
.err{
  display:none; background:color-mix(in srgb, var(--red) 15%, var(--panel)); border:1px solid var(--red);
  color:var(--red); border-radius:8px; padding:.7rem 1rem; font-family:var(--mono); font-size:.85rem;
  margin-bottom:1rem;
}
.facts{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-family:var(--mono); font-size:.82rem;
  color:var(--sub); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:.7rem 0; font-variant-numeric:tabular-nums; margin-bottom:1.5rem;
}
.facts b{color:var(--ink); font-weight:600;}
.facts .pill{
  background:var(--teal-soft); color:var(--teal); border-radius:5px; padding:.1rem .5rem; font-weight:700;
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;}
@media (max-width:760px){ .grid{grid-template-columns:1fr;} }
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:1.3rem 1.3rem 1.1rem; display:flex; flex-direction:column; margin-top:0;
}
.panel + .panel{margin-top:1.5rem;}
.panel h2{font-family:var(--serif); font-size:1.05rem; margin:0 0 .2rem; font-weight:600;}
.panel p.cap{color:var(--sub); font-size:.85rem; line-height:1.5; margin:.2rem 0 1rem;}
.figure{flex:1; display:flex; align-items:center; justify-content:center; min-height:120px;}
svg{max-width:100%; height:auto; display:block;}
.room{stroke:var(--panel); stroke-width:2;}
.room-label{font-family:var(--mono); font-size:11px; fill:var(--room-ink); opacity:.8; text-anchor:middle; dominant-baseline:central;}
.edge{stroke-width:2.6; fill:none;}
.edge-ghost{stroke-width:4.5; pointer-events:none;}
.edge-hit{pointer-events:stroke; cursor:pointer;}
.node{stroke:var(--panel); stroke-width:2.2;}
.node-label{font-family:var(--mono); font-size:11px; fill:var(--panel); text-anchor:middle; dominant-baseline:central; font-weight:600;}
.node-tag{font-family:var(--mono); font-size:9px; fill:var(--sub); text-anchor:middle;}
.node-ring{fill:none; stroke:var(--red); stroke-width:2; stroke-dasharray:3 2.5;}
.badge{stroke:var(--panel); stroke-width:1.6;}
.badge-label{font-family:var(--mono); font-size:9.5px; fill:var(--room-ink); text-anchor:middle; dominant-baseline:central; font-weight:700;}
.badge-group{cursor:pointer;}
.badge-ghost .badge{stroke:var(--ink); stroke-width:2.4;}
.badge-ghost{pointer-events:none;}
.meander-blue{stroke:var(--teal); stroke-width:2; fill:none;}
.meander-red{stroke:var(--red); stroke-width:2; fill:none;}
.meander-pt-black{stroke:var(--panel); stroke-width:1.2;}
.meander-pt-white{stroke:var(--ink); stroke-width:1.4; fill:var(--panel);}
.meander-tag{font-family:var(--mono); font-size:8px; fill:var(--sub); text-anchor:middle;}
.legend-swatch{display:inline-block; width:1.4em; height:2px; vertical-align:middle; margin-right:.35em;}
table.corr{width:100%; border-collapse:collapse; font-size:.82rem; margin-top:.4rem;}
table.corr th{
  text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sub); font-weight:600; padding:.35rem .5rem; border-bottom:1px solid var(--line);
}
table.corr td{padding:.32rem .5rem; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;}
table.corr td.room-cell{display:flex; align-items:center; gap:.45rem;}
.dot{width:11px; height:11px; border-radius:3px; display:inline-block; flex:none;}
table.corr td.mono{font-family:var(--mono); color:var(--sub);}
.note{margin-top:1.6rem; background:var(--teal-soft); border-radius:10px; padding:1rem 1.2rem; font-size:.9rem; line-height:1.6; color:var(--ink);}
.note b{color:var(--teal);}
footer{margin-top:2rem; font-family:var(--mono); font-size:.72rem; color:var(--sub);}