.cb-status{
  margin:clamp(1.25rem,3vw,2rem) 0 0;
  border:2px solid var(--iron);background:var(--paper);
}
.cb-status-bar{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.35rem .8rem;background:var(--iron);color:var(--on-iron);
  font:700 .95rem/1.4 "Courier New",Courier,monospace;
}
.cb-status-body{padding:1rem 1rem 1.1rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem}
.cb-meter{height:14px;border:2px solid var(--iron);background:var(--concrete);overflow:hidden}
.cb-meter span{display:block;height:100%;width:0;background:var(--hazard);transition:width .4s ease}
@media (prefers-reduced-motion:reduce){ .cb-meter span{transition:none} }
.cb-done{margin:0;font-weight:700;color:var(--rust)}

.cb-parser{display:flex;align-items:center;gap:.5rem;
  border:2px solid var(--iron);background:var(--concrete);padding:.45rem .7rem;
  font:700 1.05rem/1.3 "Courier New",Courier,monospace}
.cb-parser label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cb-parser span{color:var(--hazard)}
.cb-parser input{flex:1;min-width:0;width:100%;border:0;background:transparent;color:var(--iron);
  font:inherit;text-transform:uppercase;padding:.15rem 0}
.cb-parser input:focus{outline:none}
.cb-parser:focus-within{outline:3px solid var(--hazard);outline-offset:2px}
.cb-parser button{font:inherit;font-size:.9rem;border:2px solid var(--iron);background:var(--iron);
  color:var(--on-iron);padding:.2rem .7rem;cursor:pointer}
.cb-said{margin:0;min-height:1.4em;font:700 .95rem/1.4 "Courier New",Courier,monospace;color:var(--rust)}
.cb-tools{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.95rem;color:var(--steel)}
.cb-reset{font:inherit;background:none;border:1px solid var(--line-strong);color:var(--steel);
  padding:.25rem .7rem;cursor:pointer}
.cb-reset:hover{border-color:var(--iron);color:var(--iron)}

@media (max-width:30rem){ .cb-status-bar > span:last-child{display:none} }

.cb-book{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:clamp(2rem,4vw,2.75rem)}
.cb-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:2px solid var(--iron);padding-bottom:.4rem}
.cb-sec-h h2{margin:0}
.cb-sec-n{font:700 .95rem/1 "Courier New",Courier,monospace;color:var(--steel);white-space:nowrap}
.cb-sec-intro{margin:.6rem 0 1rem;color:var(--steel);max-width:62ch}
.cb-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}

.cb-q{border:1px solid var(--line-strong);background:var(--paper);padding:.9rem 1rem 1rem}
.cb-q-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.cb-q h3{margin:0;font-size:1.1rem;line-height:1.35}
.cb-pts{font:700 .85rem/1 "Courier New",Courier,monospace;color:var(--steel);white-space:nowrap}
.cb-q.is-found{border-color:var(--hazard)}
.cb-q.is-found .cb-pts{color:var(--rust)}
.cb-q.is-found .cb-pts::before{content:"\2713  found \00b7  "}

.cb-hints{margin:.6rem 0 0;padding-left:1.4rem;display:grid;gap:.35rem}
.cb-hints:not(:has(li:not([hidden]))){display:none}
.cb-hint{color:var(--iron);line-height:1.5}
.cb-hint kbd{font:700 .92em/1 "Courier New",Courier,monospace;border:1px solid var(--line-strong);
  background:var(--concrete);padding:.12em .35em;white-space:nowrap}
.cb-answer{list-style:none;margin-left:-1.4rem}

.cb-ink{animation:cb-ink .7s ease-out}
@keyframes cb-ink{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){ .cb-ink{animation:none} }

.cb-reveal{margin-top:.7rem;font:600 .95rem/1.2 inherit;font-family:inherit;
  border:2px solid var(--iron);background:transparent;color:var(--iron);
  padding:.4rem .8rem;cursor:pointer}
.cb-reveal:hover,.cb-reveal:focus-visible{background:var(--iron);color:var(--on-iron);outline:0}
.cb-off{padding:1rem;border:1px solid var(--line-strong)}