:root {
  --pico-font-family-sans-serif: "Fira Sans", system-ui, sans-serif;
  --pico-font-family-monospace: "Fira Code", ui-monospace, monospace;
  --as-line: var(--pico-muted-border-color);
  --as-dim: var(--pico-muted-color);
  --as-good: #16844c;
  --as-good-bg: #e4f4eb;
  --as-bad: #c43d3d;
  --as-bad-bg: #fae5e5;
  --as-current: var(--pico-primary);
}
@media (prefers-color-scheme: dark) {
  :root { --as-good: #4ade80; --as-good-bg: #113522; --as-bad: #ff7777; --as-bad-bg: #421d22; }
}
[hidden] { display: none !important; }
main.container { max-width: min(1500px, 96vw); padding-block: 1.4rem 3rem; }
header { margin-bottom: 1rem; }
h1 { margin-bottom: .25rem; font-size: 1.5rem; }
header p { margin: 0; color: var(--as-dim); font-size: .9rem; }
#setup { display: grid; grid-template-columns: minmax(15rem, 30rem) 9rem auto; gap: .6rem; align-items: end; max-width: 50rem; margin-bottom: 0; }
#setup label { margin: 0; font-size: .78rem; }
#setup input, #setup button { height: 2.35rem; margin: .2rem 0 0; padding-block: .35rem; font-size: .82rem; }
#data { font-family: var(--pico-font-family-monospace); }
#setup button { width: auto; }
#error { min-height: 1.3rem; margin: .25rem 0 0; color: var(--pico-del-color); font-size: .8rem; }

#controls { margin-top: .7rem; }
.control-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.playback { margin: 0; }
.playback button { margin: 0; padding: .25rem .55rem; font-size: .72rem; --pico-border-radius: 3px; }
.playback .wide { min-width: 5.2rem; }
.speed { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--as-dim); font-size: .72rem; }
.speed input { width: 7rem; height: .5rem; margin: 0; }
.speed output { min-width: 2.5rem; font-family: var(--pico-font-family-monospace); }
#scrub { height: .5rem; margin: .55rem 0 .3rem; }
.options { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.options label { margin: 0; font-size: .76rem; }
#status { min-height: 1.4rem; margin: .45rem 0 .2rem; font-size: .82rem; color: var(--as-dim); }

#work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); gap: 1.2rem; align-items: start; }
#history { min-width: 0; }
.question { margin: .5rem 0 1rem; font-size: 1.04rem; }
.trial { margin: 0 0 1rem; padding: .8rem; border: 1px solid var(--as-line); border-radius: 6px; overflow-x: auto; }
.trial.current { border-color: var(--as-current); box-shadow: 0 0 0 1px color-mix(in srgb, var(--as-current) 25%, transparent); }
.bounds, .ask, .answer { margin: 0 0 .35rem; font-size: .82rem; }
.ask { color: var(--as-dim); }
.answer { margin-top: .5rem; margin-bottom: 0; }
.yes { color: var(--as-good); }
.no { color: var(--as-bad); }
.array { display: flex; width: max-content; gap: 10px; padding-top: 2rem; }
.cell { box-sizing: border-box; position: relative; display: grid; place-items: center; width: var(--cell-width, 2.7rem); height: 2.4rem; padding-inline: .4rem; border: 1px solid var(--as-line); border-radius: 4px; font: 500 .92rem var(--pico-font-family-monospace); background: var(--pico-card-background-color); }
.fragment { position: absolute; z-index: 1; pointer-events: none; left: -4px; top: -1.65rem; height: 4.35rem; width: calc(100% + 8px); border: 2px solid var(--as-good); border-radius: 6px; }
.fragment.bad { border-color: var(--as-bad); }
.fragment-label { position: absolute; top: -1.45rem; left: .2rem; white-space: nowrap; color: var(--as-good); font: .68rem var(--pico-font-family-monospace); }
.fragment-label.bad { color: var(--as-bad); }
.cell.grouped { background: var(--as-good-bg); }
.cell.bad-group, .cell.trying { color: var(--as-bad); border-color: var(--as-bad); background: var(--as-bad-bg); }
.final-answer { padding: .8rem 1rem; border-left: 3px solid var(--as-good); background: var(--as-good-bg); font-size: .9rem; }

aside { position: sticky; top: .5rem; }
#plot-card { margin: .5rem 0 0; padding: .8rem; }
#plot-card > header { margin: -.8rem -.8rem .4rem; padding: .65rem .8rem; font-size: .78rem; }
#plot { display: block; width: 100%; min-height: 260px; }
#plot text { fill: var(--as-dim); font: 11px var(--pico-font-family-monospace); }
.axis, .grid { stroke: var(--as-line); }
.grid { opacity: .45; stroke-dasharray: 2 3; }
.target-line { stroke: var(--as-good); stroke-width: 2; stroke-dasharray: 5 4; }
.curve { fill: none; stroke: var(--as-dim); stroke-width: 1.5; opacity: .65; }
.point { fill: var(--as-current); stroke: var(--pico-background-color); stroke-width: 2; }
.point.current { r: 6; fill: var(--as-bad); }
.plot-note { margin: .3rem 0 0; font-size: .7rem; color: var(--as-dim); }
.target-key { display: inline-block; width: 1.3rem; border-top: 2px dashed var(--as-good); vertical-align: middle; }
footer { margin-top: 1.5rem; color: var(--as-dim); }

@media (max-width: 850px) {
  #work { grid-template-columns: 1fr; }
  aside { position: static; }
  #plot-card { max-width: 32rem; }
}
@media (max-width: 600px) {
  #setup { grid-template-columns: 1fr 7rem; }
  #setup button { grid-column: 1 / -1; width: 100%; }
  .playback { width: 100%; }
  .playback button { flex: 1; padding-inline: .25rem; }
  .playback .wide { min-width: 0; }
  .speed { width: 100%; }
  .speed input { flex: 1; }
}