:root {
  --pico-font-family-sans-serif: "Fira Sans", system-ui, sans-serif;
  --pico-font-family-monospace: "Fira Code", ui-monospace, monospace;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --heap-line: var(--pico-muted-border-color);
  --heap-face: var(--pico-card-background-color);
  --heap-text: var(--pico-color);
  --heap-dim: var(--pico-muted-color);
  --heap-accent: var(--pico-primary);
  --heap-current: #1976d2;
  --heap-active: #e3f2fd;
}
@media (prefers-color-scheme: dark) {
  :root { --heap-current: #64b5f6; --heap-active: #123454; }
}
[hidden] { display: none !important; }
main.container { max-width: min(1400px, 95vw); padding-block: 1.5rem 3rem; }
header { margin-bottom: 1rem; }
header h1 { margin: 0; font-size: 1.45rem; }
.compact > label { font-size: .8rem; color: var(--heap-dim); }
#setup { width: min(34rem, 100%); margin: .2rem 0 0; }
#setup input, #setup button, #push-form input, #push-form button, #btn-pop {
  margin-bottom: 0; padding-block: .4rem; font-size: .8rem;
}
#setup input, #push-form input { font-family: var(--pico-font-family-monospace); }
#setup button, #push-form button, #btn-pop { width: auto; white-space: nowrap; }
#operations { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin-top: 1rem; }
#push-form { width: min(18rem, 100%); margin: 0; }
#controls { margin-top: 1rem; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.playback { margin: 0; }
.playback button { margin: 0; padding: .25rem .55rem; font-size: .72rem; border-radius: 3px; }
.playback .wide { min-width: 5.2rem; }
.speed { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .72rem; color: var(--heap-dim); }
.speed input { width: 7rem; height: .5rem; margin: 0; }
.speed output { min-width: 3rem; font-family: var(--pico-font-family-monospace); }
#scrub { height: .5rem; margin: .55rem 0 .3rem; }
#status { display: flex; gap: .55rem; min-height: 1.6rem; margin: 0; font-size: .82rem; }
#counter { flex: none; color: var(--heap-dim); font-family: var(--pico-font-family-monospace); }
#message.bad { color: var(--pico-del-color, #c0392b); }
#options { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; margin: .4rem 0 0; }
#options label { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .76rem; }
#opt-code { width: auto; margin: 0; padding-block: .3rem; font-size: inherit; }
#work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; align-items: start; }
#stage { overflow-x: auto; margin-top: .8rem; padding-block: .5rem; border-block: 1px solid var(--heap-line); }
.heap-board { display: block; margin-inline: auto; }
.heap-board text { font-family: var(--pico-font-family-monospace); }
#reference { min-width: 0; margin-top: .8rem; }
.reference-diagram { max-width: 260px; margin: 0 auto 1rem; }
.reference-diagram figcaption { padding: 0 0 .4rem; font-size: .78rem; color: var(--heap-dim); }
.reference-diagram svg { display: block; width: 100%; font-family: var(--pico-font-family-monospace); }
.reference-diagram p { margin: .4rem 0 0; font-size: .7rem; color: var(--heap-dim); }
.edge { stroke: var(--heap-line); stroke-width: 2; }
.edge.pending { stroke: #d09b00; stroke-width: 5; }
.edge.violation { stroke: #e53935; stroke-width: 5; }
.edge.confirmed { stroke: #27955b; stroke-width: 4; }
.edge.checking { stroke: var(--heap-current); stroke-width: 7; }
.node, .cell { fill: var(--heap-face); stroke: var(--heap-line); stroke-width: 1.5; }
.cell { rx: 4; }
.value { fill: var(--heap-text); font-size: 17px; text-anchor: middle; dominant-baseline: central; }
.index, .array-index { fill: var(--heap-accent); font-size: 13px; text-anchor: middle; }
.caption { fill: var(--heap-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.empty { fill: var(--heap-dim); font-size: 15px; text-anchor: middle; }
.indexed.active .node, .indexed.active .cell { fill: var(--heap-active); stroke: var(--heap-current); stroke-width: 2.5; }
.indexed.hover .node, .indexed.hover .cell { stroke: var(--heap-accent); stroke-width: 3.5; }
#code-panel { margin: 0 0 1rem; padding: 0; }
#code-panel > header { margin: 0; padding: .6rem 1rem; color: var(--heap-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
#code { margin: 0; padding: .8rem 1rem; background: none; font-size: .82rem; line-height: 1.6; overflow-x: auto; }
#code .line { display: block; padding-inline: .4rem; border-radius: 3px; white-space: pre; }
#code .line.now { color: var(--heap-text); background: var(--heap-active); box-shadow: inset 2px 0 var(--heap-current); font-weight: 500; }
#code .hint { color: var(--heap-dim); white-space: normal; }
footer { margin-top: 1.7rem; color: var(--heap-dim); }
footer kbd { font-size: .72rem; }
@media (min-width: 1000px) {
  #work { grid-template-columns: minmax(0, 1fr) 15rem; }
  #work:has(#code-panel:not([hidden])) { grid-template-columns: minmax(0, 1fr) 26rem; }
}
@media (max-width: 640px) {
  main.container { padding-block: 1rem 2rem; }
  #operations > * { flex: 1; }
  .playback { width: 100%; }
  .playback button { flex: 1; padding-inline: .25rem; }
  .playback .wide { min-width: 0; }
  .speed { width: 100%; }
  .speed input { flex: 1; }
  #status { align-items: flex-start; }
}