/* Shared window geometry. Contents scroll; changing apps/stages never resizes the frame. */
:root{--demo-sidebar-width:230px;--demo-sidebar-gap:30px;--demo-side-space:260px;--demo-window-max-width:1040px;--demo-window-height:clamp(360px,calc(100svh - 320px),560px);--demo-chrome-height:44px}
@media(min-width:1000px) and (max-width:1200px){:root{--demo-sidebar-width:205px;--demo-sidebar-gap:21px;--demo-side-space:226px}}
#problems.usecases-section,#forge{height:auto;min-height:100svh;max-height:none;overflow:visible;justify-content:flex-start}
#problems .uc-layout{grid-template-columns:var(--demo-sidebar-width) minmax(0,1fr);gap:var(--demo-sidebar-gap);justify-content:center;align-items:start;flex:0 0 auto}
#problems .uc-demo-column{width:100%;max-width:var(--demo-window-max-width);justify-self:center;min-width:0}
#problems .uc-demo-column>.uc-case-heading{min-height:80px;height:80px;flex:0 0 80px}
#problems .uc-frame,#forge .fg-window{width:100%;max-width:var(--demo-window-max-width);height:var(--demo-window-height);max-height:var(--demo-window-height);min-height:0;box-sizing:border-box;flex:0 0 var(--demo-window-height);overflow:hidden;border-radius:10px;display:flex;flex-direction:column}
#forge .builder-frame{width:min(var(--demo-window-max-width),calc(100% - var(--demo-side-space)));max-width:var(--demo-window-max-width);min-height:0;flex:0 0 auto;margin-inline:auto;overflow:visible}
#problems .uc-frame .uc-frame-top,#forge .fg-window .fg-chrome{height:var(--demo-chrome-height);min-height:var(--demo-chrome-height);flex:0 0 var(--demo-chrome-height)}
#problems .uc-frame .uc-visual{min-height:0;max-height:none;flex:1 1 auto;overflow:auto;overscroll-behavior:contain}
#problems .uc-frame .uc-controls,#problems .uc-frame .uc-feedback{flex-shrink:0}
#forge .fg-window .fg-workspace{min-height:0;max-height:none;flex:1 1 auto;overflow:hidden;grid-template-rows:minmax(0,1fr)}
#forge .fg-window .fg-stage-nav{min-height:0;overflow:auto;overscroll-behavior:contain}
#forge .fg-window .fg-content{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;flex:1 1 auto}
#forge .fg-window .fg-content-header,#forge .fg-window .fg-idea{flex-shrink:0}
#forge .fg-window .fg-stage-body{flex:1 0 auto;min-height:min-content}
@media(max-width:999px){:root{--demo-side-space:0px;--demo-window-height:clamp(360px,calc(100svh - 32px),560px)}#problems .uc-layout{grid-template-columns:minmax(0,1fr);gap:17px}#problems .uc-demo-column{margin-inline:auto}#problems .uc-demo-column>.uc-case-heading{height:100px;min-height:100px;flex-basis:100px}#problems .uc-frame .uc-controls{gap:12px;padding:12px 13px}#problems .uc-frame .uc-controls[data-count="1"]{grid-template-columns:minmax(0,1fr)}#problems .uc-frame .uc-controls[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}#problems .uc-frame .uc-controls[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}#problems .uc-frame .uc-controls[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}#problems .uc-frame .uc-control>label{min-height:28px;align-items:start}#problems .uc-frame .uc-control input:not([type=range]),#problems .uc-frame .uc-control select{padding-inline:7px}#forge .fg-window .fg-stage-nav{flex-shrink:0}}
@media(max-width:700px){#problems .uc-demo-column>.uc-case-heading{height:120px;min-height:120px;flex-basis:120px}#problems .uc-frame .uc-control>label{font-size:10px;line-height:1.4}#problems .uc-frame .uc-feedback{max-height:110px;overflow:auto}}
@media(max-width:359px){#problems .uc-demo-column>.uc-case-heading{height:132px;min-height:132px;flex-basis:132px}}


@media(max-width:999px){#problems .uc-frame .uc-visual,#forge .fg-window .fg-content{overscroll-behavior-y:auto}}
#problems .uc-build-links{flex-wrap:wrap;row-gap:4px;min-width:0}
#problems .uc-case-heading>div{min-width:0}
#forge .forge-demo-footer{min-width:0;flex-wrap:wrap}