/* The playground has one navigation: use cases. The examples do the explaining. */
:root{--canvas:#f4f4f4;--blue:#246bfe}
.topbar{height:58px;min-height:58px;padding:0 22px;display:flex;justify-content:space-between;gap:20px;background:#fff}
.brand{gap:16px}.brand>span:last-child{display:block;color:#555;font-size:13px}
.options-trigger{width:36px;height:36px;border:1px solid #ddd;border-radius:11px;font-size:22px;line-height:1;background:linear-gradient(#fff,#f6f6f6);box-shadow:inset 0 1px #fff,0 1px 2px #0000000a}
.shell{grid-template-columns:214px minmax(0,1fr)}
.sidebar{background:#fafafa;padding:20px 12px;gap:0;overscroll-behavior:contain;scrollbar-width:thin}
.use-case-list{display:flex;flex-direction:column;gap:23px;width:100%}
.nav-group>p{font-size:11px;color:#777;padding:0 10px 7px}
.nav-item{min-height:35px;margin:0 0 2px;padding:8px 10px;font-size:12px;border-radius:8px;color:#525252;white-space:nowrap}
.nav-item.active{background:#fff;border-color:#e0e0e0;color:#246bfe;box-shadow:inset 0 1px #fff,0 1px 3px #00000008}
.main .main-head{min-height:66px;height:auto;padding:13px 26px;background:#fafafa;gap:20px;border-color:#e4e4e4}
.main-title h1{font-size:15px;color:#333}.main-head .surface-controls{padding:0;border:0;background:none;gap:12px;flex-wrap:nowrap}
.main-head .segmented{background:#eaeaea;border-color:#e2e2e2}.main-head .segmented button{min-height:30px;font-size:12px;min-width:65px;padding:5px 13px}
.main-head .surface-controls select{min-width:0;max-width:175px}
#content{background:#f4f4f4;min-height:0}
#content .inspector{display:none!important}.workbench,.original-workbench{grid-template-columns:minmax(0,1fr)!important;min-height:100%}
.workbench .experiment,.scenario-workbench,.story-workbench{background:#f4f4f4;background-image:none}
.simple-collection .original-collection{padding:42px 32px;min-height:100%}
.simple-collection .original-grid{grid-template-columns:repeat(auto-fit,235px);max-width:100%;gap:30px 28px;justify-content:center}
.simple-collection .original-group{margin:0}.original-card-title{font-size:12px;color:#626262;padding-top:10px;min-height:36px}
.original-app-stage,.surface-stage.app-stage{padding:30px 24px}
.full-app-frame,.original-app{width:min(100%,365px,calc((100dvh - 188px)*402/874))}
.original-story-stage{height:calc(100dvh - 124px);min-height:520px}.original-story{height:100%}
.simple-scenario{min-height:100%;display:flex;flex-direction:column}.simple-scenario .scenario-comparison{padding:30px 24px;max-width:1050px;width:100%;margin:auto;gap:42px}
.simple-scenario.is-product .scenario-comparison{display:flex;justify-content:center;flex:1}
.simple-scenario.is-product .scenario-result{display:flex!important;width:100%;align-items:center;justify-content:center}
.simple-scenario.is-product .scenario-product-stage{width:100%;min-height:350px}
.simple-scenario .scenario-lane{height:auto}.simple-scenario .scenario-lane .full-app-frame,.simple-scenario .scenario-lane .original-app{width:min(100%,365px,calc((100dvh - 220px)*402/874))}
.simple-scenario.is-product .scenario-lane .full-app-frame,.simple-scenario.is-product .scenario-lane .original-app{width:min(100%,365px,calc((100dvh - 188px)*402/874))}
.scenario-transport{padding:12px 24px}.scenario-playback>span{font-size:11px}.scenario-simulate{display:flex;justify-content:center;padding:0 24px 24px}.scenario-simulate .btn{font-size:12px}
.story-context{display:none}.story-comparison .full-app-frame{width:min(100%,365px,calc((100dvh - 290px)*402/874))}
.playground-options{position:fixed;inset:64px 18px auto auto;margin:0;width:260px;max-width:calc(100vw - 24px);padding:14px;border:1px solid #d8d8d8;border-radius:16px;background:#fffffff5;color:#333;box-shadow:inset 0 1px #fff,0 6px 20px #00000017,0 1px 3px #00000010;font-size:12px;backdrop-filter:blur(12px);z-index:20}
.playground-options::backdrop{background:transparent}.option-heading{font-size:11px;color:#777;margin:4px 4px 10px}.playground-options .house-switch{width:100%;margin:0 0 12px;display:flex;flex:none}.playground-options .house-switch button{flex:1;min-height:36px}
.option-row{display:flex;align-items:center;justify-content:space-between;text-decoration:none;width:100%;padding:10px 6px;min-height:40px;color:#555;border-radius:8px;font-size:12px}.option-row .icon{width:15px;height:15px}.option-row:hover{background:#f1f1f1}
.playground-options label{display:flex;align-items:center;justify-content:space-between;margin:10px 4px;gap:10px;font-size:11px}.playground-options select{width:135px;min-height:36px;border:1px solid #ddd;border-radius:8px;background:#fff;padding:5px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px) and (min-width:741px){.shell{grid-template-columns:184px minmax(0,1fr)}.main .main-head{padding-inline:18px}.main-head .surface-controls{flex-wrap:wrap;justify-content:flex-end}.main-head .surface-controls select{max-width:145px}.main-title h1{font-size:13px}}
@media(max-width:740px){
 html,body{height:auto;overflow:auto}#app{min-height:100dvh;height:auto}.topbar{display:flex;grid-template:none;min-height:58px;height:58px;padding:0 16px}.brand>span:last-child{font-size:12px}.options-trigger{height:40px;width:40px}
 .shell{display:block;overflow:visible}.sidebar{display:block;padding:12px 16px;border-right:0;background:#fafafa}.use-case-list{display:none}
 .sidebar .only-mobile{display:block;margin:0;padding:0;min-height:44px;border:0;background:none;box-shadow:none;width:100%}.only-mobile select{font-size:16px;padding:10px 12px;width:100%;min-height:44px;border:1px solid #dedede;border-radius:10px;background:linear-gradient(#fff,#fafafa);box-shadow:inset 0 1px #fff,0 1px 2px #00000006}
 .main .main-head{min-height:62px;display:flex;padding:10px 16px}.main-head .main-title{display:none}.main-head .surface-controls{justify-content:space-between;flex-wrap:wrap;gap:10px;width:100%}.main-head .segmented{flex:1}.main-head .segmented button{flex:1;min-height:40px}.main-head .surface-controls select{flex-basis:100%;max-width:100%;min-height:44px;font-size:16px}
 .simple-collection .original-collection{padding:28px 16px 40px}.simple-collection .original-grid{grid-template-columns:235px;gap:25px}.original-app-stage,.surface-stage.app-stage{padding:24px 16px}.full-app-frame,.original-app{width:min(100%,365px)}
 .original-story-stage{height:820px;min-height:0}.simple-scenario .scenario-lane .full-app-frame,.simple-scenario .scenario-lane .original-app,.simple-scenario.is-product .scenario-lane .full-app-frame,.simple-scenario.is-product .scenario-lane .original-app{width:min(100%,365px)}
 .simple-scenario .scenario-comparison{padding:24px 16px}.simple-scenario.is-product .scenario-product-stage{min-height:340px}.simple-scenario .scenario-lane-controls{padding:12px 16px}.story-comparison .full-app-frame{width:min(100%,365px)}
 .playground-options{top:64px;right:12px}.playground-options select{font-size:16px}.playground-options .house-switch button,.option-row{min-height:44px}
}
@media(prefers-reduced-transparency:reduce){.playground-options{background:#fff;backdrop-filter:none}}
@media(forced-colors:active){.nav-item.active{border-color:Highlight;color:Highlight}.options-trigger,.playground-options{border:1px solid ButtonText}.option-row{color:LinkText}}
/* Keep the requested left navigation in the app's common half-width panel. */
@media(min-width:561px) and (max-width:740px){
 html,body{height:100%;overflow:hidden}#app{height:100dvh;min-height:0}.shell{display:grid;grid-template-columns:166px minmax(0,1fr);overflow:hidden;min-height:0}.sidebar{display:flex;overflow:auto;border-right:1px solid #e4e4e4;border-bottom:0;padding:18px 8px;min-height:0;height:auto}.sidebar .only-mobile{display:none}.use-case-list{display:flex;gap:20px}.nav-item{font-size:11px;padding:8px;min-height:35px}.nav-group>p{padding-left:8px}.main{min-height:0}.main .main-head{padding:10px 14px}.main-head .surface-controls{flex-wrap:wrap}.main-head .segmented button{min-width:50px;padding-inline:8px}.original-story-stage{height:820px}.original-app-stage{padding:24px 16px}.simple-collection .original-collection{padding:28px 16px 40px}
}
@media(min-width:561px) and (max-width:740px){.full-app-frame,.original-app,.simple-scenario .scenario-lane .full-app-frame,.simple-scenario .scenario-lane .original-app,.simple-scenario.is-product .scenario-lane .full-app-frame,.simple-scenario.is-product .scenario-lane .original-app{width:min(100%,365px,calc((100dvh - 220px)*402/874))}}
/* Four broad buckets, with one list open. Opening a bucket never remounts an app. */
.use-case-list{gap:5px}
.use-case-bucket{min-width:0}
.use-case-bucket>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:10px;border-radius:8px;font-size:13px;color:#515151;cursor:pointer;user-select:none;touch-action:manipulation}
.use-case-bucket>summary::-webkit-details-marker{display:none}
.use-case-bucket>summary:after{content:'';width:6px;height:6px;border-right:1.5px solid #8c8c8c;border-bottom:1.5px solid #8c8c8c;transform:rotate(-45deg);margin-right:3px}
.use-case-bucket[open]>summary{color:#242424;font-weight:600}
.use-case-bucket[open]>summary:after{transform:rotate(45deg);margin-top:-3px}
.use-case-bucket>summary:focus-visible{outline:2px solid #246bfe;outline-offset:1px}
.bucket-items{padding:1px 0 12px 8px}
.bucket-items .nav-item{font-size:12px;min-height:35px}
@media(hover:hover) and (pointer:fine){.use-case-bucket>summary:hover{background:#f0f0f0}}
@media(min-width:561px) and (max-width:740px){.use-case-list{gap:5px}.use-case-bucket>summary{font-size:12px;padding-inline:8px}.bucket-items{padding-left:4px}.bucket-items .nav-item{font-size:11px}}
@media(pointer:coarse){.use-case-bucket>summary,.bucket-items .nav-item{min-height:44px}}
/* Fit the whole app beneath mobile controls; scrolling stays inside the app. */
@media(max-width:560px){
 .main{--preview-height:max(440px,calc(100dvh - 244px))}
 .main:has(.surface-controls select){--preview-height:max(440px,calc(100dvh - 298px))}
 .original-app-stage>.original-app,.surface-stage.app-stage .full-app-frame,.simple-scenario.is-product .scenario-lane :is(.full-app-frame,.original-app){width:min(100%,365px,calc(var(--preview-height)*402/874))}
}
.surface-stage.widget-stage>.design-preview{justify-content:center}
/* The story transport lives outside the canvas; reserve its height. */
@media(min-width:741px){
 .simple-scenario.is-story .scenario-comparison{padding-block:22px;align-items:center}
 .simple-scenario.is-story .scenario-lane :is(.full-app-frame,.original-app){width:min(100%,365px,calc((100dvh - 238px)*402/874))}
 .simple-scenario.is-story .scenario-lane-label{display:none}
 .simple-scenario.is-story .scenario-lane-controls{display:none}
}
/* Starter stories share one checkpoint across Chat, widget and app views. */
.story-lane-switch,.story-step-select{display:none}
.story-messages{overscroll-behavior:contain}

@media(min-width:741px){
 .story-workbench .story-comparison{padding-block:22px;align-items:center}
 .story-workbench .story-lane-label{display:none}
 .story-workbench .story-comparison .full-app-frame{width:min(100%,365px,calc((100dvh - 292px)*402/874))}
}
@media(max-width:740px){
 .main:has(.story-workbench){--story-preview-height:max(440px,calc(100dvh - 362px))}
 .story-workbench .story-comparison{display:block;padding:16px;min-height:0}
 .story-workbench .story-lane{height:var(--story-preview-height)}
 .story-workbench .story-lane-label{display:none}
 .story-workbench[data-story-lane=chat] [data-story-panel=wabi],.story-workbench[data-story-lane=wabi] [data-story-panel=chat]{display:none}
 .story-workbench .story-comparison .full-app-frame{width:min(100%,365px,calc(var(--story-preview-height)*402/874))}
 .story-workbench .story-result{height:100%;min-height:0}
 .main>.story-transport{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
 .story-buttons{margin-bottom:12px;gap:6px}
 .story-buttons>span{margin-left:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
 .story-lane-switch{display:flex;gap:2px;margin-left:auto}
 .story-lane-switch button{min-height:44px;min-width:48px;padding:7px 9px}
 .story-steps{display:none}
 .story-step-select{display:block;width:100%;min-height:44px;font-size:16px;padding:8px 12px;border:1px solid #d8d8d8;border-radius:9px;background:linear-gradient(#fff,#fafafa);box-shadow:var(--raised)}
 .story-lane-switch button:focus-visible,.story-step-select:focus-visible{outline:2px solid #246bfe;outline-offset:2px}
}
@media(min-width:561px) and (max-width:740px){
 .main:has(.story-workbench){display:flex;overflow:hidden;--story-preview-height:max(360px,calc(100dvh - 312px))}
 .main:has(.story-workbench) #content{overflow:auto;min-height:0}
}
@media(max-width:370px){.story-buttons .btn{padding-inline:10px}.story-lane-switch button{min-width:43px;padding-inline:7px}}