/*
 * Foxes and Rabbits. Everything is scoped to .far-app so the theme keeps its own page,
 * and every colour comes from a token so light and dark both resolve as a set.
 */
.far-app{
  --far-panel:#f6f8f3; --far-ink:#1b2119; --far-muted:#5f6b5d; --far-line:#c9d1c4;
  --far-moss:#456b4a; --far-fox:#c2501c; --far-rabbit:#31404e;
  --far-fur:#f5f4ee; --far-inner:#dd9aa0; --far-stone:#6e6e64;
  --far-grass:#8faa63; --far-onmoss:#f6f8f3;
  --far-bare:#cfc7ae;  /* dry earth, deliberately the same in both themes */
  --far-shadow:0 1px 0 rgba(27,33,25,.06), 0 8px 24px rgba(27,33,25,.07);

  display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:1.5rem; align-items:start;
  color:var(--far-ink); font-family:Karla,"Segoe UI",system-ui,sans-serif;
  font-size:1rem; line-height:1.55; margin:2rem 0;
}
@media (prefers-color-scheme: dark){
  .far-app:not([data-theme="light"]){
    --far-panel:#1a1f17; --far-ink:#e7ece2; --far-muted:#93a08d; --far-line:#2b3228;
    --far-moss:#8dc08c; --far-fox:#ec8442; --far-rabbit:#141a20;
    --far-fur:#eef0e7; --far-inner:#cf8b92; --far-stone:#a9ac9e;
    --far-grass:#41632f; --far-onmoss:#0d110b;
    --far-shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  }
}
.far-app[data-theme="dark"]{
  --far-panel:#1a1f17; --far-ink:#e7ece2; --far-muted:#93a08d; --far-line:#2b3228;
  --far-moss:#8dc08c; --far-fox:#ec8442; --far-rabbit:#141a20;
  --far-fur:#eef0e7; --far-inner:#cf8b92; --far-stone:#a9ac9e;
  --far-grass:#41632f; --far-onmoss:#0d110b;
  --far-shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
}
@media (max-width:880px){ .far-app{grid-template-columns:minmax(0,1fr)} }

.far-app *{box-sizing:border-box}
.far-app p, .far-app h2{margin:0}

.far-stage{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.far-boardbox{background:var(--far-bare);border:1px solid var(--far-line);border-radius:2px;
  padding:.6rem;box-shadow:var(--far-shadow)}
.far-app canvas{display:block;width:100%;height:auto;max-width:100%;touch-action:none}
.far-board{cursor:crosshair}
.far-board:focus-visible{outline:2px solid var(--far-fox);outline-offset:3px}

.far-readout{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:baseline;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.82rem;font-variant-numeric:tabular-nums}
.far-readout[hidden]{display:none}
.far-lbl{color:var(--far-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
.far-tick{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.4rem}
.far-tick-r{background:var(--far-fur);box-shadow:inset 0 0 0 1px var(--far-rabbit)}
.far-tick-f{background:var(--far-fox)}
.far-tick-g{background:var(--far-grass)}
.far-note{color:var(--far-moss);font-size:.85rem;min-height:1.25rem}

.far-chartbox{background:var(--far-panel);border:1px solid var(--far-line);border-radius:2px;padding:.5rem .6rem}
.far-chart{cursor:default}

.far-stats{display:flex;flex-direction:column;gap:.7rem;background:var(--far-panel);
  border:1px solid var(--far-line);border-radius:2px;padding:1rem}
.far-stats[hidden]{display:none}
.far-statline{font-size:.95rem}
.far-statline b{font-variant-numeric:tabular-nums}
.far-bars{display:grid;grid-template-columns:auto 1fr auto;gap:.25rem .6rem;align-items:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;font-variant-numeric:tabular-nums}
.far-bars .track{display:block;height:.62rem;background:var(--far-line);border-radius:1px;overflow:hidden}
.far-bars .bar{display:block;height:.62rem;background:var(--far-moss);border-radius:1px;min-width:1px}
.far-bars .n{color:var(--far-muted)}

.far-panel{display:flex;flex-direction:column;gap:1.1rem;background:var(--far-panel);
  border:1px solid var(--far-line);border-radius:2px;padding:1.1rem;box-shadow:var(--far-shadow)}
.far-group{display:flex;flex-direction:column;gap:.55rem}
.far-app .far-group h2, .far-app .far-stats h2{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--far-muted);font-weight:500;line-height:1.3}
.far-row{display:flex;gap:.5rem;flex-wrap:wrap}

.far-app .far-btn{font:500 .85rem/1 Karla,sans-serif;color:var(--far-ink);background:transparent;
  border:1px solid var(--far-line);border-radius:2px;padding:.5rem .7rem;cursor:pointer;
  text-transform:none;letter-spacing:normal;width:auto;min-height:0;
  transition:background .12s,border-color .12s,color .12s}
.far-app .far-btn:hover{border-color:var(--far-moss);background:transparent;color:var(--far-ink)}
.far-app .far-btn[aria-pressed="true"], .far-app .far-btn.far-primary{
  background:var(--far-moss);border-color:var(--far-moss);color:var(--far-onmoss)}
.far-app .far-btn:focus-visible, .far-app input:focus-visible{outline:2px solid var(--far-fox);outline-offset:2px}

.far-slider{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;font-size:.85rem;align-items:baseline}
.far-val{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;color:var(--far-muted);
  font-variant-numeric:tabular-nums}
.far-app input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--far-moss);margin:0;padding:0;
  background:transparent;border:0}
.far-hint{font-size:.78rem;color:var(--far-muted)}
.far-app kbd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;
  border:1px solid var(--far-line);border-bottom-width:2px;border-radius:3px;padding:.05rem .3rem;
  color:var(--far-ink);background:transparent;box-shadow:none}