:root{
  /* Okabe–Ito colorblind-safe palette */
  --oi-blue:#0072B2; --oi-sky:#56B4E9; --oi-orange:#E69F00; --oi-verm:#D55E00;
  --oi-green:#009E73; --oi-purple:#CC79A7; --oi-yellow:#F0E442;
  /* graphite chrome */
  --ink:#15171c; --panel:#1d2026; --panel-2:#24272e; --line:#33373f;
  --text:#e9eaec; --muted:#9aa1ac; --paper:#ffffff; --grid:#e6e8ec;
  --radius:10px;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --serif:"STIX Two Text","STIX Two Math",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:14px/1.45 var(--sans);
  display:flex; flex-direction:column; overflow:hidden;
}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--oi-sky); outline-offset:2px}

/* ---------- header ---------- */
header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel);
}
.brand{display:flex; align-items:baseline; gap:10px; margin-right:auto}
.brand h1{font:600 19px/1 var(--serif); margin:0; letter-spacing:.01em}
.brand h1 .mu{color:var(--oi-orange); font-style:italic}
.brand .sub{color:var(--muted); font-size:12px}
.hbtn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2);
}
.hbtn:hover{border-color:var(--muted)}
.hbtn.primary{background:var(--oi-blue); border-color:var(--oi-blue); color:#fff}
.hbtn.primary:hover{filter:brightness(1.12)}

/* ---------- toolbar ---------- */
.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 16px; border-bottom:1px solid var(--line); background:var(--panel);
}
.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel-2)}
.seg button{
  padding:6px 12px; border-right:1px solid var(--line); color:var(--muted);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"]{background:var(--oi-blue); color:#fff}
.seg button:not([aria-pressed="true"]):hover{color:var(--text)}
.seg button kbd{
  font:11px var(--mono); color:inherit; opacity:.55;
  border:1px solid currentColor; border-radius:4px; padding:0 4px; line-height:1.4;
}
.tgroup{display:flex; gap:6px; align-items:center}
.tbtn{
  padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.tbtn:hover:not(:disabled){border-color:var(--muted)}
.tbtn:disabled{opacity:.35; cursor:default}
.tsep{width:1px; align-self:stretch; background:var(--line); margin:2px 2px}
.spacer{flex:1}

/* ---------- main ---------- */
main{flex:1; display:flex; min-height:0}
.stage{flex:1; position:relative; min-width:0; background:var(--paper)}
canvas#board{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
.empty-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; color:#8a919c; text-align:center; padding:0 24px;
}
.empty-hint .card{font-family:var(--serif); font-size:17px; line-height:1.6}
.empty-hint .card b{color:#4a5058}

aside{
  width:300px; border-left:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column; min-height:0;
}
aside.hidden{display:none}
.panel-sec{border-bottom:1px solid var(--line); padding:12px 14px; overflow:auto}
.panel-sec h2{
  margin:0 0 8px; font:600 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.panel-sec h2 .count{margin-left:auto; font-weight:400; text-transform:none; letter-spacing:0}

/* mutation word trail — the signature element */
#trail{display:flex; flex-wrap:wrap; gap:6px; min-height:30px; align-content:flex-start}
#trail:empty::after{content:"No mutations yet."; color:var(--muted); font-size:12.5px}
.mu-tok{
  font:500 16px/1 var(--serif); font-style:italic;
  padding:5px 8px 6px; border:1px solid var(--line); border-radius:7px; background:var(--panel-2);
  color:var(--text); transition:transform .08s;
}
.mu-tok sub{font-size:.68em; font-style:normal}
.mu-tok:hover{border-color:var(--oi-orange); transform:translateY(-1px)}
.mu-tok.active{background:var(--oi-orange); border-color:var(--oi-orange); color:#1a1200}
.mu-tok.ahead{opacity:.38}
.trail-actions{display:flex; gap:8px; margin-top:10px}
.mini{font-size:12px; color:var(--muted); padding:3px 8px; border:1px solid var(--line); border-radius:6px}
.mini:hover{color:var(--text); border-color:var(--muted)}

/* B-matrix */
#bmatrix{font:12.5px var(--mono); overflow:auto; max-height:260px}
#bmatrix table{border-collapse:collapse}
#bmatrix td,#bmatrix th{padding:2px 7px; text-align:right; font-weight:400}
#bmatrix th{color:var(--muted); font-size:11px}
#bmatrix td.p{color:var(--oi-sky)} #bmatrix td.n{color:#ff8a50} #bmatrix td.z{color:#565c66}
#bmatrix .empty{color:var(--muted); font-family:var(--sans); font-size:12.5px}

.legend{display:grid; gap:7px; font-size:12.5px; color:var(--muted)}
.legend .row{display:flex; align-items:center; gap:9px}
.dot{width:14px;height:14px;border-radius:50%;background:var(--oi-blue);flex:none}
.sq{width:13px;height:13px;border-radius:3px;background:#7b8494;flex:none}
.dot.sel{background:var(--oi-orange)}

/* ---------- status bar ---------- */
.status{
  display:flex; align-items:center; gap:16px; padding:6px 16px;
  border-top:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:12.5px;
}
.status .hint{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.status .stat b{color:var(--text); font-weight:500}

/* ---------- menus / popovers ---------- */
.pop{
  position:absolute; z-index:60; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:0 12px 32px rgba(0,0,0,.45); padding:8px; min-width:190px;
}
.pop[hidden]{display:none}
.pop .item{
  display:flex; width:100%; text-align:left; padding:7px 10px; border-radius:7px; gap:8px; align-items:center;
}
.pop .item:hover{background:rgba(255,255,255,.06)}
.pop .item small{margin-left:auto; color:var(--muted)}
.pop .grp{padding:6px 10px 4px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.pop .nrow{display:flex; align-items:center; gap:8px; padding:6px 10px}
.pop input[type=number]{
  width:64px; background:var(--ink); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:4px 6px; font:13px var(--mono);
}

/* ---------- modal (tutorial) ---------- */
.overlay{
  position:fixed; inset:0; z-index:100; background:rgba(10,11,14,.66);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.overlay[hidden]{display:none}
.modal{
  width:min(620px,100%); max-height:min(86vh,720px); display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.modal header{background:transparent; border-bottom:1px solid var(--line); padding:14px 18px}
.modal header h2{margin:0; font:600 18px var(--serif)}
.modal .body{padding:18px 20px; overflow:auto; line-height:1.62}
.modal .body p{margin:0 0 12px}
.modal .body .fig{
  background:var(--paper); border-radius:10px; padding:10px; margin:12px 0; text-align:center;
}
.modal .body code,.modal kbd{
  font:12.5px var(--mono); background:var(--ink); border:1px solid var(--line);
  border-radius:5px; padding:1px 6px;
}
.modal .body .rule{
  border-left:3px solid var(--oi-orange); padding:2px 0 2px 12px; margin:12px 0; color:var(--text);
}
.modal footer{
  display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--line);
}
.dots{display:flex; gap:6px; margin:0 auto}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--oi-orange)}
.modal .serif-i{font-family:var(--serif); font-style:italic}

/* toast */
#toast{
  position:fixed; left:50%; bottom:56px; transform:translateX(-50%) translateY(8px);
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:8px 14px; border-radius:9px; opacity:0; pointer-events:none; transition:.22s; z-index:120;
  box-shadow:0 8px 24px rgba(0,0,0,.4); font-size:13px;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media (max-width:860px){
  main{flex-direction:column}
  aside{width:100%; max-height:38%; flex-direction:row; border-left:none; border-top:1px solid var(--line)}
  .panel-sec{flex:1; border-bottom:none; border-right:1px solid var(--line)}
  .panel-sec:last-child{border-right:none}
  .panel-sec.legend-sec{display:none}
  .brand .sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}