/* Keep the authored visual stages prominent. Labels must not squeeze the art. */
.page-home :is(a,button)>span>svg{display:block;width:1em;height:1em}
.page-home .demo-short-label{display:none}
body[data-readability] #main .demo-link-label{font-size:inherit}

@media(max-width:700px){
 body[data-readability] #main :is(.ascii-topline,.wisp-topline){display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:.75rem;min-height:4.25rem;padding-block:.75rem}
 body[data-readability] #main :is(.ascii-topline,.wisp-topline) .label{margin:0;font-size:.875rem;line-height:1.5;max-width:none}
 body[data-readability] #main :is(.ascii-topline>a,.wisp-topline button){font-size:.875rem;line-height:1.5;gap:.5rem;min-height:2.75rem;flex-shrink:0}
 .page-home .demo-link-detail,.page-home .demo-long-label,.page-home .demo-phase-index{display:none}
 .page-home .demo-short-label{display:inline}
 body[data-readability] #main :is(.ascii-stage,.wisp-stage){min-height:0}
 body[data-readability] #main :is(.ascii-status-row h2,.wisp-status-row h2){font-size:1.5rem;line-height:1.2;max-width:none}
 body[data-readability] #main :is(.ascii-status-row p,.wisp-status-row p){font-size:.875rem;line-height:1.5;margin-top:.375rem}
 body[data-readability] #main :is(.ascii-status-row p,.wisp-status-row p)>span:not(:last-child){display:none}
 body[data-readability] #main :is(.ascii-status-row p,.wisp-status-row p)>span::before{display:none}
 body[data-readability] #main :is(.ascii-bottomline,.wisp-bottomline){padding-block:1rem 1.25rem}
 body[data-readability] #main :is(.ascii-navigation-row,.wisp-navigation-row){display:grid;grid-template-columns:1fr;align-items:center;gap:.5rem;margin-top:.875rem;padding-top:.625rem}
 body[data-readability] #main :is(.ascii-phases,.wisp-phases){display:flex;justify-content:space-between;min-width:0;max-width:none;gap:.75rem;font-size:.875rem;line-height:1.5;padding-top:.5rem}
 body[data-readability] #main .ascii-controls{justify-content:flex-end;gap:.75rem}
 body[data-readability] #main .ascii-controls button{padding:.25rem;min-height:2.75rem}
 body[data-readability] #main .ascii-controls a{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem}
 body[data-readability] #main .ascii-section:not(.ascii-is-pinned) .ascii-stage{height:auto}
 body[data-readability] #main .ascii-section:not(.ascii-is-pinned) .ascii-canvas-wrap{flex:none;height:min(70svh,32rem);min-height:0}
 body[data-readability] #main .wisp-sequence{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;max-width:none}
 body[data-readability] #main .wisp-phases{flex:1;min-width:11.5rem}
 body[data-readability] #main .wisp-status-row p{display:none}
 body[data-readability] #main .wisp-arrival{display:none}
 body[data-readability] #main .wisp-presence-caption{display:flex;justify-content:flex-end;flex-shrink:0;margin:0;font-size:.875rem;line-height:1.5}
 body[data-readability] #main .wisp-conversation{min-height:0}
 body[data-readability] #main .wisp-action{gap:.75rem}
 body[data-readability] #main .wisp-start{flex:1;min-width:0;font-size:1rem;min-height:3rem}
 body[data-readability] #main :is(.wisp-audio,.wisp-audio label,.wisp-status,.wisp-consent){font-size:.875rem;line-height:1.5}
 body[data-readability] #main .wisp-audio{grid-template-columns:auto minmax(2.5rem,1fr) 2rem auto;gap:.375rem}
 body[data-readability] #main .wisp-status{min-height:0}
 body[data-readability] #main .wisp-controls-follow .wisp-topline{display:flex}
}