:root{
  /* brand marks — the swatches, used for graphics */
  --clotho:#76C28E;
  --atropos:#E46A6A;
  --lachesis:#D8A24C;
  --spindle-mark:#C85CA8;

  /* the same hues darkened for type. The swatches above sit at 2–3.4:1 on
     white, so none of them can carry 12px text; these clear 4.5:1. */
  --clotho-t:#2F7A4F;
  --atropos-t:#C0392F;
  --lachesis-t:#8A6212;
  --spindle-t:#9B3A7E;

  --void:#EBEAE7;
  --loom:#FFFFFF;
  --line:#DCDAD5;
  --thread:#2D3136;
  --muted:#5F6368;
  --spindle:#8A6212;
  --cut:#C0392F;

  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--thread);
  font-family:var(--sans);
  font-size:13px;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:1px solid var(--spindle);outline-offset:2px}

.app{
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}

/* ── masthead ─────────────────────────────────────────── */
.masthead{
  display:flex;align-items:baseline;gap:1.5rem;
  padding:1.1rem 1.5rem .9rem;
  border-bottom:1px solid var(--line);
}
.lockup{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.mark{display:block;width:30px;height:30px;flex:none}
.wordmark{
  font-weight:200;font-size:1.15rem;line-height:1;
  text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;
  margin:0;white-space:nowrap;
}
.tagline{
  margin:0;flex:1;
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:400;
}
.seed{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── stage ────────────────────────────────────────────── */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  min-height:0;
}
.world{padding:1rem;min-width:0;min-height:0}
.frame{position:relative;width:100%;height:100%}
#world{display:block;background:#fff;border:1px solid var(--line);border-radius:6px;cursor:crosshair}

.extinct{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  background:rgba(255,255,255,.93);
  text-align:center;padding:1rem;
}
.extinct[data-shown="1"]{display:flex}
.extinct-line{
  margin:0;
  font-size:1.4rem;font-weight:300;letter-spacing:.02em;
}
.extinct-note{margin:0;color:var(--muted)}

/* ── panel ────────────────────────────────────────────── */
.panel{
  border-left:1px solid var(--line);
  background:var(--loom);
  overflow-y:auto;
  padding-bottom:1.5rem;
}
.fate{border-bottom:1px solid var(--line);padding:1.15rem 1.2rem 1.35rem}
.fate:last-child{border-bottom:0}
.fate-head{margin:0 0 1rem}
/* uppercase needs a little tracking to stay legible — that's necessity, not decoration */
.fate-name{
  display:block;margin:0;
  font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;line-height:1;color:var(--spindle);
}
/* each panel carries its own thread, ringed like the ends of the mark */
.fate-name::before{
  content:"";display:inline-block;
  width:6px;height:6px;border-radius:50%;
  border:1.5px solid currentColor;
  margin-right:.5rem;vertical-align:.08em;
}
.fate--clotho     .fate-name{color:var(--clotho-t)}
.fate--lachesis   .fate-name{color:var(--lachesis-t)}
.fate--atropos    .fate-name{color:var(--atropos-t)}
.fate--individual .fate-name{color:var(--spindle-t)}
.fate-role{
  display:block;margin-top:.35rem;
  color:var(--muted);
}

/* readouts */
.readout{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.28rem 0}
.readout-k{color:var(--muted);white-space:nowrap}
.readout-v{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.readout-v.is-dim{color:var(--muted)}

/* controls */
.control{margin-top:.95rem}
.control-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.control-k{color:var(--muted)}
.control-v{font-variant-numeric:tabular-nums;color:var(--spindle);font-weight:500}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:14px;background:transparent;margin:0;cursor:ew-resize;
}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line)}
input[type=range]::-moz-range-track{height:1px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:3px;height:13px;background:var(--spindle);border:0;border-radius:0;margin-top:-6px;
}
input[type=range]::-moz-range-thumb{width:3px;height:13px;background:var(--spindle);border:0;border-radius:0}

.row{display:flex;gap:.35rem;margin-top:.9rem}
.btn{
  flex:1;min-width:0;
  font:inherit;font-size:12px;font-weight:500;
  color:var(--thread);background:#fff;
  border:1px solid var(--line);border-radius:5px;
  padding:.42rem .3rem;
  cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.btn:hover{border-color:var(--spindle);color:var(--spindle)}
.btn[aria-pressed="true"]{background:var(--spindle);border-color:var(--spindle);color:var(--void)}
.btn.is-wide{flex:none;padding:.5rem 1.5rem}

/* sparklines */
.spark{display:flex;align-items:center;gap:.6rem;padding:.32rem 0}
.spark-k{flex:none;width:84px;white-space:nowrap;color:var(--muted)}
.spark canvas{flex:1;min-width:0;height:20px;display:block}
.spark-v{flex:none;width:46px;text-align:right;font-variant-numeric:tabular-nums}

/* inspector */
.inspect-empty{margin:0;color:var(--muted);line-height:1.6}
.swatch{width:9px;height:9px;display:inline-block;flex:none}
#brain{width:100%;height:104px;display:block;margin-top:1rem;border:1px solid var(--line)}
.brain-key{
  display:flex;flex-wrap:wrap;gap:.25rem .9rem;
  margin-top:.55rem;color:var(--muted);font-size:11px;
}
.brain-key span{display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.brain-key i{display:block;width:12px;height:2px;flex:none}
.brain-key .k-pos{background:var(--spindle)}
.brain-key .k-neg{background:var(--cut)}

/* ── the thread ───────────────────────────────────────── */
.thread{border-top:1px solid var(--line);padding:.8rem 1.5rem 1rem}
.thread-head{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.55rem}
.thread-title{
  margin:0;
  font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;line-height:1;color:var(--thread);
}
.thread-note{color:var(--muted)}
#thread{display:block;width:100%;height:74px;background:#fff;border:1px solid var(--line);border-radius:6px}

/* ── load-in ──────────────────────────────────────────── */
.masthead,.stage,.thread{animation:rise .7s ease both}
.stage{animation-delay:.08s}
.thread{animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .masthead,.stage,.thread{animation:none}
  *{transition:none!important}
}

@media (max-width:880px){
  .app{height:auto;min-height:100%;grid-template-rows:auto auto auto}
  .stage{grid-template-columns:1fr}
  .world{height:60vh;min-height:300px}
  .panel{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .masthead{flex-wrap:wrap;gap:.5rem 1rem}
  .tagline{flex-basis:100%;order:3}
  .thread-head{flex-wrap:wrap;gap:.3rem .75rem}
}