* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #efe6d2; overflow: hidden; }
body { font: 14px/1.4 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: #2b2219; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: manipulation; }
#panel {
  position: fixed; top: 16px; right: 16px; width: 236px; max-width: calc(100vw - 32px);
  background: rgba(247, 240, 225, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(60, 45, 30, 0.18); border-radius: 10px; padding: 10px 12px 12px;
  box-shadow: 0 6px 24px rgba(60, 40, 20, 0.12);
}
#panel.folded #controls { display: none; }
#fold { all: unset; cursor: pointer; font-size: 15px; letter-spacing: 0.04em; display: block; width: 100%; }
#fold::after { content: "−"; float: right; opacity: 0.6; }
#panel.folded #fold::after { content: "+"; }
#controls { margin-top: 8px; display: grid; gap: 9px; }
label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }
label input[type=range], label select { grid-column: 1 / -1; width: 100%; }
label.check { display: flex; gap: 8px; }
output { font-variant-numeric: tabular-nums; opacity: 0.7; }
input[type=range] { accent-color: #5a3f27; }
select, .row button {
  font: inherit; color: inherit; background: rgba(255, 252, 244, 0.9);
  border: 1px solid rgba(60, 45, 30, 0.25); border-radius: 6px; padding: 5px 8px;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.row button { cursor: pointer; }
.row button:hover { background: #fff; }
.hint, .credit { margin: 0; font-size: 12px; opacity: 0.75; }
.credit { opacity: 0.55; }
.credit a { color: inherit; }
#label { position: fixed; left: 16px; bottom: 14px; font-size: 13px; letter-spacing: 0.06em; opacity: 0.55; pointer-events: none; }
#label span { opacity: 0.5; }
#error { position: fixed; left: 16px; right: 16px; top: 16px; padding: 12px; background: #fff3f0; border: 1px solid #c55; border-radius: 8px; }
@media (max-width: 560px) {
  #panel { top: auto; bottom: 40px; right: 16px; left: 16px; width: auto; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; }
}
.row.one { grid-template-columns: 1fr; }
#devToggle[aria-pressed="true"] { background: #5a3f27; color: #f7f0e1; border-color: #5a3f27; }

/* ---------- dev panel ---------- */
#dev {
  position: fixed; top: 0; left: 0; bottom: 0; width: 340px; z-index: 5;
  display: flex; flex-direction: column;
  background: rgba(247, 240, 225, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(60, 45, 30, 0.18); box-shadow: 4px 0 24px rgba(60, 40, 20, 0.10);
  font: 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: #2b2219;
}
#dev[hidden] { display: none; }
#dev header { display: flex; align-items: baseline; gap: 8px; padding: 12px 12px 6px; font: 15px/1.2 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: 0.03em; }
#dev header .keys { font: 11px system-ui, sans-serif; opacity: 0.5; flex: 1; }
#dev header button { all: unset; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; opacity: 0.6; }
#dev header button:hover { opacity: 1; }
#dev .bar { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 12px 8px; }
#dev .bar button, #dev .greset {
  font: inherit; color: inherit; background: rgba(255, 252, 244, 0.9); cursor: pointer;
  border: 1px solid rgba(60, 45, 30, 0.25); border-radius: 6px; padding: 5px 6px;
}
#dev .bar button:hover, #dev .greset:hover { background: #fff; }
#dev .find {
  margin: 0 12px 4px; font: inherit; padding: 6px 8px; border-radius: 6px;
  border: 1px solid rgba(60, 45, 30, 0.25); background: rgba(255, 252, 244, 0.9); color: inherit;
}
#dev .note { min-height: 16px; padding: 0 12px; font-size: 11px; color: #5a3f27; }
#dev .groups { flex: 1; overflow-y: auto; padding: 0 12px 8px; overscroll-behavior: contain; }
#dev details { border-top: 1px solid rgba(60, 45, 30, 0.14); padding: 6px 0; }
#dev details[hidden] { display: none; }
#dev summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 3px 0; }
#dev summary::-webkit-details-marker { display: none; }
#dev summary::before { content: "▸"; opacity: 0.5; font-size: 10px; width: 8px; }
#dev details[open] summary::before { content: "▾"; }
#dev summary .t { font-weight: 600; letter-spacing: 0.02em; }
#dev summary .n { flex: 1; font-size: 11px; color: #8a4a2a; }
#dev .greset { padding: 2px 7px; font-size: 11px; }
#dev .rows { display: grid; gap: 3px; padding: 4px 0 2px; }
#dev .row { display: grid; grid-template-columns: 118px 1fr 58px; align-items: center; gap: 6px; }
#dev .row[hidden] { display: none; }
#dev .row.c { grid-template-columns: 118px 40px 1fr; }
#dev .row label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; user-select: none; }
#dev .row.changed label { font-weight: 600; color: #6b3a1e; }
#dev .row.changed label::after { content: " •"; color: #b23a28; }
#dev input[type=range] { width: 100%; margin: 0; accent-color: #5a3f27; }
#dev input[type=number], #dev input.hex {
  width: 100%; font: 11px ui-monospace, Menlo, Consolas, monospace; padding: 3px 4px; color: inherit;
  border: 1px solid rgba(60, 45, 30, 0.22); border-radius: 4px; background: rgba(255, 252, 244, 0.9);
}
#dev input[type=color] { width: 40px; height: 22px; padding: 0; border: 1px solid rgba(60, 45, 30, 0.25); border-radius: 4px; background: none; }
#dev .foot { margin: 0; padding: 8px 12px 12px; font-size: 11px; opacity: 0.6; border-top: 1px solid rgba(60, 45, 30, 0.14); }
@media (max-width: 560px) {
  #dev { top: auto; right: 0; width: auto; height: 62vh; border-right: 0; border-top: 1px solid rgba(60, 45, 30, 0.18); border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  #dev .row { grid-template-columns: 112px 1fr 56px; }
}

/* anything hidden stays hidden, whatever its display */
[hidden] { display: none !important; }

/* ---------- explore ---------- */
#explore { position: fixed; inset: 0; z-index: 20; }
#field { position: absolute; inset: 0; touch-action: none; cursor: grab; display: block; }
#field:active { cursor: grabbing; }
#explore .xbar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(820px, calc(100vw - 24px)); box-sizing: border-box;
  display: grid; gap: 6px; padding: 10px 12px 8px;
  background: rgba(250, 244, 230, 0.94); backdrop-filter: blur(6px);
  border: 1px solid rgba(60, 45, 30, 0.18); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(60, 40, 20, 0.16);
  font: 13px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #3a2a1c;
}
#explore .xrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#explore button {
  font: inherit; color: inherit; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(60, 45, 30, 0.25); background: rgba(255, 252, 244, 0.9);
}
#explore button:hover:not(:disabled) { background: #fffaf0; border-color: rgba(60, 45, 30, 0.45); }
#explore button:disabled { opacity: 0.4; cursor: default; }
#explore button.primary { background: #4a3322; color: #fbf3e2; border-color: #4a3322; }
#explore button.primary:hover { background: #2e1f14; }
#explore .seg { display: inline-flex; }
#explore .seg button { border-radius: 0; }
#explore .seg button:first-of-type { border-radius: 6px 0 0 6px; }
#explore .vary span { margin-right: 6px; font-size: 12px; color: #5a3f27; align-self: center; }
#explore .seg button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
#explore .seg button[aria-pressed=true] { background: #e8d9bb; font-weight: 600; }
#explore .spread { display: inline-flex; align-items: center; gap: 6px; }
#explore .spread input { width: 110px; accent-color: #5a3f27; }
#explore .xrow [data-a=open] { margin-left: auto; }
#explore .pins { font-size: 12px; color: #5a3f27; }
#explore .pins label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
#explore .xhint { margin: 0; font-size: 12px; opacity: 0.7; }
#explore .compass span {
  position: absolute; max-width: 34vw; padding: 3px 8px; border-radius: 5px;
  font: italic 12px/1.3 Georgia, serif; color: #6b3a1e; background: rgba(250, 244, 230, 0.85);
  pointer-events: none;
}
#explore .compass .n { top: 10px; left: 50%; transform: translateX(-50%); }
#explore .compass .s { bottom: 150px; left: 50%; transform: translateX(-50%); }
#explore .compass .e { right: 10px; top: 45%; text-align: right; }
#explore .compass .w { left: 10px; top: 45%; }
@media (max-width: 560px) {
  #explore .xbar { bottom: 8px; padding: 8px; gap: 5px; font-size: 12px; }
  #explore button { padding: 5px 8px; }
  #explore .spread input { width: 80px; }
  #explore .xhint { display: none; }
  #explore .compass span { max-width: 40vw; font-size: 11px; }
  #explore .compass .s { bottom: 190px; }
}