/* Screenshot Studio shell. Product artwork and embedded originals keep their own styles. */
:root{--blue:#246bfe;--blue-wash:#edf3ff;--canvas:#f2f2f2;--line:#e3e3e3;--raised:inset 0 1px 0 #fff,0 1px 2px #00000009,0 2px 4px #00000003}
.topbar{height:64px;min-height:64px;padding:0 22px;gap:24px;justify-content:flex-start;position:relative;z-index:5;background:#fff;box-shadow:0 1px 2px #00000002}
.brand{gap:16px;flex:none;white-space:nowrap}.brand img{width:68px;height:auto;display:block}.brand>.divider{height:20px}.brand>span:last-child{font-size:12px;color:#525252}
.topbar .view-bar{height:auto;min-height:0;padding:0;border:0;box-shadow:none;background:none;flex:1;justify-content:center;min-width:0}
.topbar .segmented{padding:3px;border-radius:10px;border-color:#e5e5e5;background:#f2f2f2;box-shadow:inset 0 1px 2px #00000004}
.topbar .segmented button{min-width:0;min-height:32px;padding:6px 15px;font-size:12px;border-radius:7px}
.topbar .btn.studio-export{flex:none;margin-left:0;min-height:35px;padding:7px 12px;gap:8px;border-radius:9px;border:1px solid #252525;color:#fff;background:radial-gradient(90% 160% at 30% -40%,#666,#202020 95%);box-shadow:inset 0 1px 1px #ffffff45,inset 0 0 0 1px #ffffff0d,0 1px 2px #0002,0 3px 7px #00000014;font-size:12px}
.studio-export .icon{width:14px;height:14px}
/* The shell uses immediate light/press feedback, without moving controls. */
:where(.topbar,.sidebar,.main-head,.scenario-toolbar,.scenario-transport,.direction-toolbar,.style-study-controls,.style-next,.story-transport) button{transition:none}
:where(.topbar,.sidebar,.main-head,.scenario-toolbar,.scenario-transport,.direction-toolbar,.style-study-controls,.style-next,.story-transport) button:active:not(:disabled){transform:none;filter:brightness(.96)}
.shell{grid-template-columns:192px minmax(0,1fr);min-height:0}
.sidebar{background:linear-gradient(90deg,#fafafa,#fdfdfd);padding:18px 10px 12px;gap:16px;box-shadow:inset -1px 0 #fff}
.nav-group>p{padding:0 10px 14px;font-size:11px;color:#737373}.nav-item{min-height:42px;padding:10px;gap:10px;border-radius:8px;font-size:12px;color:#555;margin-bottom:4px;line-height:1.4}
.nav-item .icon{width:17px;height:17px;color:#777}.nav-item.active{color:#2356b9;background:#edf3ff;border-color:#ccdbf1;box-shadow:inset 0 1px #fff,0 1px 2px #00000003}.nav-item.active .icon{color:#246bfe}
.sidebar-foot{border-top:1px solid #e7e7e7;padding:12px 0 0;gap:3px}.sidebar-link{min-height:34px;padding:8px 10px;font-size:11px}.sidebar-link.selected{background:#edf3ff;color:#2356b9}
.main .main-head{height:auto;min-height:62px;padding:10px 24px;gap:18px;background:#fafafa;border-bottom:1px solid #dedede;box-shadow:inset 0 1px #fff;z-index:3}
.main-title{min-width:0;flex:1;gap:10px}.main-title h1{font-size:14px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
.head-actions{flex:none;gap:7px}.head-actions:empty{display:none}.head-actions .btn,.head-actions .btn:not(.dark){display:inline-flex;min-height:33px;padding:7px 10px;font-size:11px;border-radius:8px}
.main-head :is(.surface-controls,.style-topline,.scenario-lane-controls){padding:0;min-height:0;background:none;border:0;flex:none;gap:12px;justify-content:flex-end}
.main-head .surface-controls select{max-width:200px;min-width:125px;font-size:12px;min-height:33px;padding:7px 8px}
.main-head .style-topline .try-with{gap:7px}.main-head .style-topline select{min-height:33px}
.segmented{border-radius:10px;padding:3px;background:#ebebeb;border-color:#e1e1e1;box-shadow:inset 0 1px 2px #00000007,0 1px #fff}
.segmented button{border-radius:7px;font-size:11px;min-height:29px;padding:5px 12px;min-width:62px}
.segmented button[aria-pressed=true]{color:#2356b9;background:#fff;border-color:#dedede;box-shadow:0 1px 2px #0000000d,inset 0 1px #fff}
.btn{border-radius:8px;box-shadow:var(--raised);background:linear-gradient(#fff,#fafafa);border-color:#dedede;min-height:34px}
/* Small dark actions retain the directional light, with a quieter contact shadow. */
:is(.scenario-playback,.story-buttons,.style-next,.style-study-controls) .btn.dark{border-radius:9px;background:radial-gradient(100% 170% at 30% -45%,#686868,#222 92%);border:1px solid #292929;box-shadow:inset 0 1px 1px #ffffff45,0 1px 2px #0002,0 3px 6px #00000012;padding:8px 13px}
:is(.scenario-toolbar,.direction-toolbar,.style-study-controls){padding:12px 24px;gap:18px;background:#f9f9f9;border-color:#e2e2e2;box-shadow:inset 0 1px #fff}
:is(.scenario-toolbar,.style-knobs,.try-with) label{color:#737373}
:is(.scenario-toolbar,.style-knobs,.try-with) select{border-radius:8px;min-height:33px;font-size:12px;padding:7px 26px 7px 10px;background:linear-gradient(#fff,#fafafa);box-shadow:var(--raised);border-color:#dedede}
.direction-toolbar .style-knobs{gap:20px}.direction-toolbar .text-button{font-size:11px;color:#616161}
.style-study-controls{margin-top:12px}.style-facts{padding:28px 36px 3px}.style-facts p{font-size:14px}.style-facts>span{font-size:11px}
.style-notes{background:#fafafa;border-color:#e0e0e0}.style-notes>summary{font-size:11px;min-height:44px;padding:15px 0}
:is(.scenario-workbench,.style-explorer,.story-workbench,.workbench .experiment){background-color:var(--canvas);background-image:radial-gradient(#0000000c .65px,transparent .65px);background-size:14px 14px}
.surface-stage.widget-stage{justify-content:center;align-items:center;min-height:480px;padding:38px 24px}.widget-stage>.design-preview{justify-content:center}.surface-stage.app-stage{padding-top:28px}
.original-phases{margin-top:20px;background:#e9e9e9;border-radius:10px}.original-phases button{border-radius:7px}.original-collection{padding:28px 24px 40px}.original-group h2{font-size:11px;color:#737373}.original-grid{gap:24px}
.scenario-toolbar{flex-wrap:wrap;gap:18px}.scenario-toolbar label{font-size:11px;gap:9px}.scenario-toolbar .btn{font-size:11px;min-height:33px;padding:7px 11px}.scenario-toolbar .btn[aria-expanded=true]{background:#edf3ff;border-color:#c1d3f0;color:#2356b9}
.scenario-simulation{font-size:10px;display:block;color:#737373}.scenario-sources{padding:18px 24px;gap:12px;background:#f8f8f8;border-color:#e2e2e2}.scenario-source{border-radius:10px;border-color:#e0e0e0;box-shadow:0 1px 2px #00000003}
.scenario-comparison{padding:18px 36px 22px;gap:40px;max-width:1050px;flex:1;align-items:center}.scenario-lane{height:100%}.scenario-lane-label{font-size:11px;margin-bottom:14px}.scenario-product-stage{align-items:center}
.scenario-transport{flex:none;padding:12px 24px 14px;background:#fafafa;border-color:#dedede;box-shadow:inset 0 1px #fff}.scenario-playback{gap:8px}.scenario-playback .btn{min-height:33px;font-size:11px;padding:7px 11px}.scenario-playback>span{margin-left:auto;font-size:11px}.scenario-beats{margin-top:12px;gap:12px}.scenario-beats li{padding-top:9px;font-size:10px;gap:6px;border-top-width:2px}.scenario-beats li>span{font-variant-numeric:tabular-nums;font-size:9px;color:#888}.scenario-beats li[aria-current=step]>span{color:var(--blue)}
.story-transport{flex:none;position:static;background:#fafafa;border-color:#dedede}.story-steps button{border-top-width:2px;font-size:11px}.story-buttons .btn{min-height:33px;font-size:11px}.original-story-stage{height:max(700px,calc(100dvh - 127px))}
@media(min-width:741px){.scenario-lane .full-app-frame,.scenario-lane .original-app{width:min(100%,330px,calc((100dvh - 338px)*402/874))}.scenario-lane:has(.full-app-frame){justify-content:center}.style-study-stage{min-height:400px}}
@media(hover:hover) and (pointer:fine){.topbar .studio-export:hover{filter:brightness(1.12)}.topbar .segmented button:not([aria-pressed=true]):hover{background:#e7e7e7}.nav-item:hover:not(.active){background:#f0f0f0}.direction-toolbar .text-button:hover{color:var(--blue)}}
@media(max-width:1100px) and (min-width:741px){.topbar{gap:18px;padding-inline:18px}.brand{gap:12px}.brand>span:last-child{display:none}.topbar .view-bar{justify-content:flex-start}.topbar .segmented button{padding-inline:14px}.shell{grid-template-columns:176px minmax(0,1fr)}.main .main-head{padding-inline:18px;gap:12px}.main-title h1{font-size:13px}.main-head .surface-controls{flex-wrap:wrap;justify-content:flex-end;gap:8px}.main-head .surface-controls select{max-width:155px}.main-head .style-topline{gap:8px}.main-head .style-topline>a{font-size:11px}.scenario-toolbar{padding-inline:18px;gap:12px}.scenario-simulation{margin-left:0}.scenario-comparison{padding-inline:24px;gap:22px}}
@media(max-width:740px){
 html,body{height:auto;overflow:auto}#app{height:auto;min-height:100dvh}
 .topbar{display:grid;grid-template-columns:1fr auto;grid-template-rows:56px 54px;height:auto;min-height:110px;padding:env(safe-area-inset-top) 16px 0;gap:0 16px;background:#fff}
 .brand{grid-column:1;grid-row:1;gap:12px}.brand img{width:62px}.brand>span:last-child{display:block;font-size:11px}.brand>.divider{height:18px}
 .topbar .btn.studio-export{grid-column:2;grid-row:1;min-height:36px;font-size:11px;padding:8px 11px;position:relative}.studio-export:before{content:'';position:absolute;inset:-5px 0}
 .topbar .view-bar{grid-column:1/-1;grid-row:2;align-self:start;justify-content:stretch;width:100%;padding:0;background:none}
 .topbar .segmented{width:100%;overflow:visible}.topbar .segmented button{flex:1;padding:6px 4px;font-size:11px;min-height:44px;white-space:nowrap}
 .shell{display:block}.sidebar{padding:10px 16px;background:#fafafa;box-shadow:none;border-bottom:1px solid #e4e4e4}.only-mobile{min-height:44px;font-size:16px;background:linear-gradient(#fff,#fafafa);border-radius:8px;box-shadow:var(--raised);padding:9px 11px}
 .main .main-head,.main .main-head:has(.head-actions>*),.main .main-head:not(:has(.head-actions>*)){display:flex;min-height:58px;height:auto;padding:10px 16px;gap:10px;justify-content:space-between;flex-wrap:wrap}
 .main-head .main-title,.main-head:has(.head-actions>*) .main-title{display:none}
 .main-head:has(.main-title:only-child){display:none}
 .main-head .surface-controls,.main-head .style-topline,.main-head .scenario-lane-controls{flex:1;min-width:0;justify-content:space-between;gap:10px;flex-wrap:wrap}
 .main-head .surface-controls select{min-width:0;max-width:100%;flex:1;min-height:40px;font-size:16px}.main-head .segmented button{min-height:34px;min-width:54px;font-size:11px;padding:6px 10px}.main-head .head-actions{margin-left:auto}.head-actions .btn,.head-actions .btn:not(.dark){min-height:40px;padding:8px;font-size:11px}.head-actions .btn .icon{width:14px;height:14px}
 .main-head .style-topline{gap:12px}.main-head .style-topline .try-with{width:100%;justify-content:space-between}.main-head .style-topline select{font-size:16px;min-height:42px}
 :is(.scenario-toolbar,.direction-toolbar,.style-study-controls){padding:12px 16px;gap:12px}.scenario-toolbar label{align-items:flex-start;gap:7px;flex:1;min-width:0}.scenario-toolbar select{font-size:16px;min-height:42px;padding:9px 22px 9px 10px;width:100%}.scenario-toolbar .btn{min-height:42px;align-self:flex-end}.scenario-simulation{flex-basis:100%;text-align:right;margin:0;font-size:10px}
 .direction-toolbar .style-knobs{gap:10px}.style-knobs select{font-size:16px;min-height:42px;max-width:140px}.direction-toolbar .text-button{padding-block:6px;margin-left:auto}
 .scenario-comparison{padding:24px 16px;display:block}.scenario-lane{height:auto}.scenario-product-stage{min-height:320px}.scenario-lane .full-app-frame,.scenario-lane .original-app{width:min(100%,365px)}
 .scenario-transport{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.scenario-playback{gap:7px}.scenario-playback .btn{min-height:44px;padding:8px 12px}.scenario-playback>span{flex-basis:100%;margin:5px 0 0;font-size:11px}.scenario-beats{gap:6px;margin-top:14px}.scenario-beats li{font-size:10px}.scenario-beats li>span{display:none}.scenario-sources{padding:16px}
 .surface-stage.widget-stage{padding:28px 16px;min-height:370px}.surface-stage.app-stage{padding:24px 16px}.original-collection{padding:22px 8px 30px}.original-grid{gap:20px 0}.style-study-stage{min-height:350px}.style-facts{padding:24px 20px 4px}.style-notes{padding-inline:20px}.story-transport{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.story-buttons .btn{min-height:44px}.original-story-stage{height:820px}
 .library-groups .nav-item{min-height:40px}.main-head:has(.view-label){display:none}
}
@media(max-width:370px){.brand{gap:9px}.brand>span:last-child{font-size:10px;max-width:none}.brand img{width:56px}.topbar{padding-inline:12px}.main-head .surface-controls{flex-basis:100%}.main-head:has(.surface-controls) .head-actions{margin-left:0}.scenario-toolbar{gap:8px}.scenario-toolbar select{padding-left:6px;font-size:16px}}
@media(prefers-reduced-transparency:reduce){.topbar,.main .main-head{background:#fff}}
@media(forced-colors:active){.topbar .studio-export,:is(.scenario-playback,.story-buttons,.style-next,.style-study-controls) .btn.dark{color:ButtonText;background:ButtonFace;border:1px solid ButtonText;box-shadow:none}.nav-item.active,.segmented button[aria-pressed=true]{color:Highlight;border-color:Highlight}.brand img{forced-color-adjust:none}.scenario-beats li[aria-current=step]{color:Highlight;border-color:Highlight}}

@media(min-width:741px){.main>.scenario-transport,.main>.story-transport{border-top:1px solid #dedede}.scenario-workbench{min-height:100%}.main:has(>.scenario-transport) #content{scrollbar-gutter:stable}.main:has(>.story-transport) .story-workbench{min-height:100%}}

@media(pointer:coarse){.topbar button,.main-head button,.sidebar button{min-height:44px}.topbar button,.main-head button,.sidebar button{-webkit-user-select:none}}