/* The single global control stays reachable throughout the long mobile page. */
html { scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom,0px)); }
body > .motion-toggle { position: fixed; z-index: 50; right: calc(16px + env(safe-area-inset-right,0px)); bottom: calc(16px + env(safe-area-inset-bottom,0px)); min-height: 46px; margin: 0; padding: 10px 14px; gap: 8px; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 30px; box-shadow: 3px 3px 0 var(--ink); font-weight: 750; }
body > .motion-toggle .motion-toggle-icon { width: 20px; height: 20px; border-color: var(--ink); }
body > .motion-toggle:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
button, summary, .button, .text-link { touch-action: manipulation; }
button { user-select: none; -webkit-user-select: none; }
.site-header { padding-top: env(safe-area-inset-top,0px); }
.site-header, .hero, .section-shell, .site-footer { padding-left: max(var(--safe-padding,0px),env(safe-area-inset-left,0px)); padding-right: max(var(--safe-padding,0px),env(safe-area-inset-right,0px)); }
/* Reserve copy slots; changing illustrative data must not move the reading position. */
.scene-title { min-height: 2.3em; }
.scene-description { min-height: 5.25em; }
.scene-detail { min-height: 106px; }
.scene-detail > span { min-width: 0; }
.scene-detail > strong { max-width: 100px; }
.scene-status { min-height: 36px; }
@media (min-width:700px) {
  .site-header, .hero, .site-footer { --safe-padding: clamp(24px,4vw,64px); }
  .section-shell:not(.hero):not(.site-header):not(.site-footer) { --safe-padding: 0px; }
}
@media (max-width:699px) {
  .site-header, .hero, .site-footer { --safe-padding: 20px; }
  .workflow-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .workflow-controls button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 112px; padding: 10px 6px; border: 1px solid #726d78; border-radius: 4px; }
  .workflow-controls button strong { font-size: 12px; line-height: 1.35; }
  .workflow-controls button small, .workflow-controls button > svg { display: none; }
  .workflow-controls button[aria-selected="true"] { border: 2px solid var(--lime); padding: 9px 5px; }
  .workflow-demo { padding: 20px 14px; }
  .scene-card { padding: 24px 18px 20px; }
  .scene-description { min-height: 7em; }
  .scene-status { align-items: flex-start; }
  .scene-detail { gap: 10px; }
  .scene-detail > strong { max-width: 86px; }
  .scene-detail > span { overflow-wrap: anywhere; }
  .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width:359px) {
  .site-header .button-small { padding-inline: 10px; gap: 0; }
  .site-header .button-small svg { display: none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }