/* A demo responds to its own column, including on tablets with wide viewports. */
[hidden]{display:none!important}
.player{container:demo / inline-size;min-width:0}
.stage,.a-win,.a-main,.demo{min-width:0}
.a-view,.a-view-sm{
  position:relative;
  zoom:1;
  height:580px;
  min-height:min(400px,70svh);
  max-height:70svh;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scroll-padding:24px;
}
.a-view>*,.a-composer>*,.a-live-grid>*,.a-replay>*,.a-nt>*{min-width:0;flex-shrink:0}
.a-nt{grid-template-columns:minmax(0,1fr)}
.a-composer{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.a-live-grid{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.a-replay{grid-template-columns:minmax(0,1fr) minmax(0,280px)}
.a-input{height:auto;min-height:38px;padding-top:8px;padding-bottom:8px;line-height:1.4;overflow-wrap:anywhere}
.a-input-sm{min-height:30px;padding-top:4px;padding-bottom:4px}
.a-composer .a-input{height:auto!important}
.a-revise{grid-template-columns:minmax(0,1fr) auto!important}
.a-plan-actions{display:flex!important;flex-wrap:wrap;gap:8px;max-width:100%}
.a-pg{flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.a-pg>span{min-width:0}
.a-status{white-space:normal;overflow:visible;flex-wrap:wrap;justify-content:center;text-align:center;line-height:1.45}
.a-status .step{overflow:visible;text-overflow:clip;min-width:0}
.a-device{max-width:100%;flex:none}
.a-region-label{max-width:160px;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.a-device .a-region-label{max-width:120px;font-size:10px}
.a-caption{align-items:flex-start;flex-wrap:wrap;gap:3px 10px;line-height:1.4}
.a-film{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:4px;padding:3px 3px 10px;scrollbar-width:thin}
.a-frame{scroll-snap-align:center}
.a-steplist li,.a-chk,.a-say{grid-template-columns:26px minmax(0,1fr)}
.a-say{grid-template-columns:44px minmax(0,1fr)}
.a-plan-item{grid-template-columns:24px minmax(0,1fr)}
.a-verdict,.a-kv,.a-field,.a-plan-input,.a-ta,.a-msg{min-width:0;overflow-wrap:anywhere}
.a-kv{grid-template-columns:max-content minmax(0,1fr)}
.type-a,.type-b{max-width:none;white-space:normal;overflow:visible;animation:demo-copy-in .4s ease both}
.type-b{animation-delay:.8s}
@keyframes demo-copy-in{from{opacity:0}to{opacity:1}}

/* Keep the preview label out of the content and give every header row its width. */
.preview-tag{position:static;display:inline-flex;align-self:flex-start;margin:4px 6px 8px}
.player-top{padding-left:6px;gap:10px 14px}
.player-top .title{flex:1 1 240px;min-width:0}
.player-top .ctl{margin-left:0;flex:none}
.player-chap{flex-wrap:wrap;min-width:0}
.player-chap span{white-space:nowrap}
.tabs{flex-wrap:wrap;min-width:0}
[data-devpane]{display:flex;flex-direction:column;gap:16px}
.tab{white-space:normal;text-align:left}

/* Browser illustrations use the same control boxes as the animated pointer. */
.demo-browser{position:relative;min-width:0;color:var(--ink);background:#fff;overflow:hidden}
.demo-browser header,.demo-browser nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.demo-browser header{padding-bottom:14px;border-bottom:1px solid var(--line)}
.demo-browser header b{font:700 18px var(--display)}
.demo-browser nav{font-size:12px;color:var(--muted)}
.demo-browser h3{font:600 19px/1.25 var(--sans);letter-spacing:0}
.demo-browser p{font-size:13px;line-height:1.45}
.demo-project-list,.demo-project-form{display:grid;gap:12px;min-width:0;margin-top:20px}
.demo-project-form label{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.demo-project-form input{width:100%;min-width:0;min-height:42px;border:1px solid var(--control);border-radius:7px;padding:9px 11px;background:#fff;color:var(--ink);font:600 16px/1.35 var(--sans)}
.demo-browser button{max-width:100%;min-height:36px;padding:8px 12px;border:1px solid var(--control);border-radius:7px;background:#fff;color:var(--ink);font:600 12px/1.35 var(--sans);white-space:normal;cursor:default}
.demo-project-form>button,.demo-project-list>button{justify-self:start}
.demo-cursor{position:absolute;z-index:6;width:0;height:0;pointer-events:none;transition:left .4s ease,top .4s ease}
.demo-web-screen{aspect-ratio:auto;min-height:440px}
.demo-project-page{position:absolute;inset:0;padding:14px 14px 76px;background:#fff}
.demo-browser-toolbar{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:12px}
.demo-browser-address{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px var(--mono);color:var(--muted)}
.a-live{overflow:clip}
.a-live-top{position:sticky;top:0;z-index:5;min-height:44px;height:auto;gap:8px;padding:7px 10px;flex:none;background:var(--ink);border-bottom:1px solid #343b32}
.a-live-top .a-url{display:block;flex:1 1 100px;min-height:28px;padding:5px 8px;border:1px solid #4a5147;background:#272d25;color:#edf0e9;font-size:11px;line-height:1.45}
.a-live-top>.a-live-dot{flex:none}
.demo-browser-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:11px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.demo-browser-nav b{margin-right:auto;font:700 17px var(--display)}
.demo-project-form .a-btn,.demo-project-list .a-btn{justify-self:start}
.demo-project-form p{margin:0}
.demo-project-form p:not(.demo-observation){display:none}
.demo-mismatch{outline:2px solid var(--fail-dot);outline-offset:2px}
.demo-observation{color:var(--fail);font-size:12px!important}
.demo-phone-welcome{position:absolute;inset:0;padding:80px 20px 32px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;text-align:center;background:linear-gradient(#EEF7C6,#fff)}
.demo-phone-welcome>b{font-size:25px;line-height:1.1}
.demo-phone-welcome p{margin:0;font-size:13px;color:var(--muted)}
.demo-phone-welcome .a-btn{font-size:12px}
.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 6px 4px;min-width:0}
.demo-controls>[data-scene-label]{flex:1;min-width:0;text-align:center;font-size:13px;line-height:1.35;color:var(--muted)}
.demo-controls .ctl{justify-content:center;min-height:40px;min-width:44px;padding:0 12px;flex:none}

/* Keep the phone proportionate without reserving a second full viewport for it. */
[data-screen="run"]>.a-head2{gap:10px}
[data-screen="run"]>.a-head2>div{flex:1 1 280px}
[data-screen="run"] .a-live-grid{gap:16px;margin-top:16px!important}
[data-screen="run"] .a-device2{gap:8px;padding:10px;border-radius:12px}
[data-screen="run"] .a-device{width:210px;padding:10px;border-radius:49px}
[data-screen="run"] .a-device-screen{border-radius:39px}
[data-screen="run"] .a-status{justify-content:center;gap:4px 8px;padding:0;font-size:12px;line-height:1.45}
[data-screen="run"] .a-live-grid>.a-device2+div{gap:12px!important}
[data-screen="run"] .a-live-grid>.a-device2+div>.a-card{padding:14px 16px!important}
[data-screen="run"] .a-chk{padding:7px 0;font-size:13px;line-height:1.45}
[data-screen="run"] .a-say{padding:7px 0;font-size:13px;line-height:1.45}
[data-screen="run"] #r-said{max-height:136px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}

@container demo (max-width:820px){
  .a-replay,.a-live-grid,.a-composer{grid-template-columns:minmax(0,1fr)}
  .a-view,.a-view-sm{padding:22px;gap:20px}
  .a-replay{padding:20px;gap:20px}
  .a-passrow{grid-template-columns:30px minmax(0,1fr);gap:6px 12px}
  .a-passrow .a-val,.a-passrow .a-link{grid-column:2}
  .a-screen{min-height:320px;aspect-ratio:auto}
}
@container demo (max-width:520px){
  .a-split>div[style*="display:flex"]{flex-wrap:wrap;min-width:0;max-width:100%}
  .a-seg2{display:flex;align-self:stretch;max-width:100%;flex-wrap:wrap}
  .a-seg2 span{flex:1;min-width:0;justify-content:center;padding:0 8px;font-size:13px}
  .a-view,.a-view-sm{padding:16px 12px 20px;gap:18px;scroll-padding:16px}
  .a-card,.a-nt-card,.a-fail-card{padding:18px 16px}
  .a-list{padding:0}
  .a-replay{padding:16px 12px;gap:18px}
  .a-panelhead{padding:16px 14px 8px}
  .a-passrow{padding:12px 14px}
  .a-verdict{flex-direction:column;gap:12px}
  .a-verdict h1{font-size:26px;line-height:1.2}
  .a-h1{font-size:22px}
  .a-ta{padding:12px;min-height:112px}
  .a-chat{min-height:0}
  .a-msg{max-width:100%}
  .a-revise{grid-template-columns:minmax(0,1fr)!important}
  .a-revise>.a-btn{justify-self:end}
  .a-pg{gap:7px 10px;padding:9px}
  .a-pg>span[style*="margin-left:auto"]{flex-basis:100%;justify-content:flex-end}
  .a-plan-actions{justify-content:flex-end;width:100%}
  .a-plan-actions>.a-btn-primary{white-space:normal}
  .a-kv{gap:6px 10px;padding:14px;font-size:14px}
  .a-kv .a-val{font-size:16px}
  .a-handoff{grid-template-columns:minmax(0,1fr)}
  .a-handoff>div+div{border-left:0;border-top:1px solid var(--line)}
  .a-next{grid-template-columns:minmax(0,1fr)}
  .a-tabs{padding:0 10px}
  .a-device2{padding:20px 0}
  .a-screen{min-height:330px}
  .a-caption{left:10px;right:10px;bottom:10px;padding:8px 10px;font-size:13px}
  .player-top .title{flex-basis:100%;font-size:12px}
  .player-chap{gap:5px}
  .player-chap span{padding:4px 8px;font-size:11px}
  .player-bottom{font-size:12px}
  .demo-browser header{gap:8px}
  .demo-browser nav{gap:8px 12px}
  .demo-project-list,.demo-project-form{margin-top:16px;gap:10px}
}
@container demo (min-width:560px) and (max-width:820px){
  [data-screen="run"] .a-live-grid{grid-template-columns:230px minmax(0,1fr)}
}

@media (max-width:1100px){
  .player{display:flex;flex-direction:column;height:min(800px,calc(100svh - 90px));min-height:500px}
  .player>.stage{flex:1;min-height:0}
  .player .a-win{height:100%}
  .player .a-view{height:100%;min-height:0;max-height:none}
  .player-top,.player-bottom,.demo-controls,.preview-tag,.player-bar{flex:none}
  .step-grid,.step-grid.rev{flex-direction:column;flex-wrap:nowrap;gap:28px}
  .step-grid>.side,.step-grid>.demo{width:100%;flex-basis:auto}
  .side{position:static}
  #run .step-grid.rev>.side{order:-1}
}
@media (max-width:640px){
  .top nav{padding:10px 16px;gap:12px}
  .logo{gap:8px}
  .nav-right{gap:8px;min-width:0}
  .nav-cta .long,.nav-cta .nav-cta-full{display:none}
  .nav-cta .short,.nav-cta .nav-cta-short{display:inline}
  .nav-cta{padding:10px 12px;font-size:14px}
  .hero{padding:40px 16px 24px}
  .step{padding:72px 16px 24px}
  .wrap{padding-left:16px;padding-right:16px}
  .devs .wrap{padding-top:64px;padding-bottom:64px;gap:28px}
  .pricing{padding:72px 16px 24px}
  .faq{padding:64px 16px 24px}
  .final{padding:48px 16px 64px}
  .final-band{padding:28px 22px;border-radius:20px}
  .final .btn{white-space:normal}
  .tabs{width:100%;gap:8px}
  .tab{flex:1 1 120px;justify-content:center;padding:8px 12px;line-height:1.3}
  .code-head{overflow-wrap:anywhere}
  .tbox,.tbox textarea,.tbox .starters,.tbox .starter{min-width:0}
  .tbox .starter{max-width:100%;overflow-wrap:anywhere}
  .tbox #tbox-starters{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
  .tbox .where{overflow-wrap:anywhere}
  .tbox .saving{flex-wrap:wrap}
  .tbox .saving .bar{min-width:0}
}
@media (min-width:641px){.nav-cta .short,.nav-cta .nav-cta-short{display:none}}
@media (prefers-reduced-motion:reduce){.demo-cursor{transition:none}.type-a,.type-b{animation:none}}