#harvestBoard.is-board { position: fixed; inset: 0; z-index: 10000; width: 100%; height: 100dvh; max-width: none; box-sizing: border-box; margin: 0; padding: 16px; background: var(--bg); overflow: hidden; }
#harvestBoard.is-board > .harvest-story,
#harvestBoard.is-board > .guide-note { display: none; }
#harvestBoard.is-board .board-toolbar { justify-content: space-between; }
#harvestBoard.is-board .cluster-bench { margin: 0 auto; max-width: none; }
#harvestBoard.is-board .tabs { margin-bottom: 12px; }
#harvestBoard.is-board .stage { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "diagram explanation" "controls explanation"; }
#harvestBoard.is-board .svgwrap { grid-area: diagram; overflow: visible; }
#harvestBoard.is-board #stage { min-width: 0; width: 100%; height: auto; }
#harvestBoard.is-board .controls { grid-area: controls; }
#harvestBoard.is-board .explain { grid-area: explanation; grid-template-columns: minmax(0, 1fr); align-content: start; border-left: 1px solid var(--line); }
#harvestBoard.is-board #code { white-space: pre-wrap; overflow-wrap: anywhere; }
#harvestBoard.is-board .recap { gap: 12px; margin-top: 12px; }
@media(max-width: 760px) {
  #harvestBoard.is-board .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "diagram" "controls" "explanation"; }
  #harvestBoard.is-board .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #harvestBoard.is-board .tab { flex-wrap: wrap; }
  #harvestBoard.is-board .recap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

