/* Fit mode: the whole 3D walkthrough (toolbar, scene, reading, story) fits the viewport without scrolling. */
.arc3d .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto auto minmax(0,1fr) auto;
  height:calc(100svh - var(--arc-hdr,115px) - 16px);min-height:440px;max-height:940px;scroll-margin-top:calc(var(--arc-hdr,115px) + 8px)}
.arc3d .stage>.stage-head{grid-column:1/-1;padding:8px 14px}
.arc3d .stage>.steps{grid-column:1/-1;margin:8px 12px 0;flex-wrap:nowrap}
.arc3d .stage>.steps button{padding:.5rem .6rem;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.arc3d .stage>.gl{grid-column:1/-1;grid-row:3;height:100%!important;min-height:0;margin-top:8px}
.arc3d .stage>.poster{inset:0}
.arc3d .stage>.hud{grid-column:1;grid-row:4;align-self:stretch;margin:10px 6px 12px 12px;padding:10px 14px;gap:2px 14px}
.arc3d .stage>.hud input{margin:8px 0}
.arc3d .stage>.hud p{margin:.3rem 0 0;font-size:.8rem;line-height:1.4}
.arc3d .stage>.story{grid-column:2;grid-row:4;margin:10px 12px 12px 6px;padding:10px 14px}
.arc3d .stage>.story h3{font-size:1.08rem!important;margin:.25rem 0 .2rem!important}
.arc3d .stage>.story p{font-size:.84rem!important;line-height:1.45!important}
.arc3d .stage>.story .nav{margin-top:8px;gap:6px}
.arc3d .stage>.story .nav button{padding:.42rem .8rem;font-size:.76rem}
.arc3d .stage>.hud.off{visibility:hidden}
.arc3d .stage>.lbl{top:96px;width:min(380px,40%)}
@media (max-height:800px) and (min-width:701px){
  .arc3d .stage>.story p{font-size:.8rem;line-height:1.38}
}
@media (max-width:700px){
  .arc3d .stage{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto auto;height:calc(100svh - var(--arc-hdr,106px) - 10px);min-height:420px}
  .arc3d .stage>.stage-head{padding:6px 10px;font-size:.72rem}
  .arc3d .stage>.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:6px 8px 0;gap:3px;padding:3px}
  .arc3d .stage>.steps button{padding:.35rem .2rem;font-size:.6rem!important;line-height:1.15!important;white-space:normal;overflow:visible;text-overflow:clip;hyphens:auto}
  .arc3d .stage>.gl{grid-row:3;margin-top:6px}
  .arc3d .stage>.hud{grid-column:1;grid-row:4;margin:6px 8px 0;padding:6px 10px;grid-template-columns:1fr 1fr}
  .arc3d .stage>.hud.off{display:grid;visibility:hidden;height:0;padding:0;margin:0;border:0}
  .arc3d .stage>.hud label{font-size:.7rem!important;line-height:1.25}
  .arc3d .stage>.hud input{margin:4px 0}
  .arc3d .stage>.hud small{font-size:.56rem!important}
  .arc3d .stage>.hud .hud-e{margin:.1rem 0 .1rem}
  .arc3d .stage>.hud .hud-e strong{font-size:1.25rem!important}
  .arc3d .stage>.hud p{font-size:.68rem!important;line-height:1.3!important;margin:0!important}
  .arc3d .stage>.story{grid-column:1;grid-row:5;margin:6px 8px 8px;padding:8px 10px}
  .arc3d .stage>.story h3{font-size:.95rem!important}
  .arc3d .stage>.story p{font-size:.76rem!important;line-height:1.38!important}
  .arc3d .stage>.story .nav{margin-top:6px;gap:4px;flex-wrap:nowrap}
  .arc3d .stage>.story .nav button{padding:.38rem .55rem;font-size:.7rem;white-space:nowrap}
  .arc3d .stage>.lbl{position:absolute;display:block;top:92px;right:8px;left:auto;margin:0;width:62%;transform:translateX(130%)}
  .arc3d .stage>.lbl.on{transform:none}
}