/* Scene 1 layout candidate: side panels span the available scene height together. */
main>.hero .scene .sco-board-side:not([data-custom]) {
  top: clamp(76px,10%,108px)!important;
  bottom: 92px!important;
  height: auto!important;
  max-height: none!important;
  box-sizing: border-box!important;
  overflow: hidden!important;
}
main>.hero .scene .sco-board-story:not([data-custom]) {
  display:flex!important;
  flex-direction:column!important;
}
main>.hero .scene .sco-board-story:not([data-custom]) .sco-board-journey {
  flex:1 1 auto!important;
  grid-template-rows:repeat(4,minmax(48px,1fr))!important;
  align-content:stretch!important;
  margin-top:12px!important;
}
main>.hero .scene .sco-board-story:not([data-custom]) .sco-board-step {
  align-content:center!important;
}
main>.hero .scene .sco-board-story:not([data-custom]) .sco-board-story-trace {
  flex:none!important;
  margin-top:8px!important;
}
main>.hero .scene .sco-board-story:not([data-custom]) .sco-board-output {
  flex:none!important;
}
main>.hero .scene .sco-board-code:not([data-custom]) {
  display:flex!important;
  flex-direction:column!important;
}
main>.hero .scene .sco-board-code:not([data-custom]) .sco-board-code-shell {
  flex:1 1 auto!important;
  min-height:0!important;
}
main>.hero .scene:fullscreen .sco-board-side:not([data-custom]),
main>.hero .scene.sco-artery-fullscreen .sco-board-side:not([data-custom]) {
  top:clamp(76px,10vh,108px)!important;
  bottom:92px!important;
  height:auto!important;
}
@media(max-width:1399px) {
  main>.hero .scene.sco-exploring .sco-board-side:not([data-custom]) {
    display:flex!important;
    width:clamp(218px,25vw,252px)!important;
  }
  main>.hero .scene:not(.sco-exploring) .sco-board-side:not([data-custom]) {
    display:none!important;
  }
}
@media(max-height:650px) {
  main>.hero .scene .sco-board-side:not([data-custom]) {
    top:66px!important;
    bottom:70px!important;
  }
}
@media(max-width:1399px){
  main>.hero .scene .sco-board-compact{top:clamp(12px,3vh,24px)!important}
}