/* Shared with Screenshot Studio: neutral surfaces, tactile controls, blue emphasis. */
:root{--ink:#202020;--muted:#666;--paper:#f7f7f7;--panel:#fff;--canvas:#f1f1f1;--well:#eee;--control:#fafafa;--blue:#0068e1;--blue-wash:#edf4ff;--line:#e1e1e1;--raised:inset 0 1px 0 #fff,inset 0 -1px 1px #00000004,0 1px 2px #0000000d;--pressed:inset 0 1px 3px #00000013,0 1px 0 #fff;color-scheme:light;background:var(--paper)}
html,body{height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink)}
body{font-size:13px}
::selection{background:#cde2ff;color:#111}
#app{height:100dvh;display:flex;flex-direction:column;min-height:0}
button,input,select,textarea{font:inherit;color:inherit}
button{transition:transform 160ms var(--ease-out);touch-action:manipulation}
button:active:not(:disabled){transform:translateY(1px);transition-duration:100ms}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.topbar{height:62px;min-height:62px;padding:0 20px;gap:14px;background:linear-gradient(#fff,#fcfcfc);border-bottom:1px solid var(--line);box-shadow:inset 0 1px #fff;flex:none}
.brand{gap:15px}.wordmark{font-size:35px}.brand>span:last-child{font-size:13px;color:#404040}.divider{background:var(--line);height:22px}
.view-bar{height:52px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 20px;background:linear-gradient(#fff,#fcfcfc);border-bottom:1px solid var(--line);box-shadow:inset 0 1px #fff;flex:none}
.segmented{display:flex;align-items:stretch;background:#eaeaea;border:1px solid #e0e0e0;box-shadow:inset 0 1px 3px #00000008,0 1px 0 #fff;border-radius:12px;padding:3px;gap:1px}
.segmented button{border:1px solid transparent;border-radius:8px;color:#636363;font-size:12px;min-height:29px;min-width:86px;padding:5px 14px}
.segmented button[aria-pressed=true]{color:var(--blue);background:linear-gradient(#fff,#fbfbfb);border-color:#dcdcdc;box-shadow:inset 0 1px 0 #fff,0 1px 2px #00000012,0 2px 4px #00000004}
.shell{grid-template-columns:188px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
.sidebar{position:static;display:flex;flex-direction:column;padding:16px 10px 14px;background:#fff;border-right:1px solid var(--line);height:auto;min-height:0;overflow:auto;scrollbar-color:#bcbcbc transparent}
.nav-group{margin:0}.nav-group>p{font-size:11px;padding:4px 10px 12px;color:#666;margin:0}
.nav-item{font-size:12px;padding:10px;gap:9px;min-height:39px;border:1px solid transparent;border-radius:9px;box-shadow:none;color:#4e4e4e;margin:0 0 3px}
.nav-item .icon{width:16px;height:16px;color:#7b7b7b}
.nav-item.active{background:var(--blue-wash);border-color:#a9c8f2;box-shadow:inset 0 1px 0 #ffffffb3;color:var(--blue)}
.nav-item.active .icon{color:var(--blue)}
.sidebar-foot{margin-top:auto;padding:20px 2px 0;border:0;display:grid;gap:3px}
.sidebar-link{display:flex;align-items:center;gap:9px;font-size:11px;color:#666;text-decoration:none;text-align:left;min-height:33px;padding:6px 8px;border-radius:7px}
.sidebar-link .icon{width:14px;height:14px}.sidebar-link.selected{color:var(--blue);background:var(--blue-wash)}
.main{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--canvas)}
.main .main-head{position:static;padding:0 24px;min-height:54px;height:54px;flex:none;border-bottom:1px solid #00000008;background:#f7f7f7;gap:14px}
.main-title{gap:12px}.main-title h1{font-family:Selecta,system-ui,sans-serif;font-size:16px;font-weight:400;letter-spacing:0;line-height:1.3}.view-label{font-size:11px;color:#777}
.head-actions{gap:8px}.head-actions .btn{font-size:11px;min-height:30px;padding:6px 10px}
.btn,.icon-btn{background:linear-gradient(#fff,#f8f8f8);border:1px solid #dedede;box-shadow:var(--raised);border-radius:9px;color:#333;min-height:34px;font-size:12px;padding:7px 11px;gap:7px}
.btn .icon{width:15px;height:15px}.icon-btn{padding:0}.guide-toggle[aria-expanded=true]{background:var(--blue-wash);border-color:#a9c8f2;color:var(--blue);box-shadow:var(--pressed)}
.topbar>.btn{margin-left:auto;padding:9px 17px;min-height:36px}
select,input,textarea{border:1px solid #dedede;background:#f7f7f7;box-shadow:inset 0 1px 2px #00000006,0 1px 0 #fff;border-radius:8px;padding:8px 10px}
input[type=checkbox]{accent-color:var(--blue);box-shadow:none}
#content{min-height:0;flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#bcbcbc transparent;overscroll-behavior:contain}
.workbench,.original-workbench{grid-template-columns:minmax(0,1fr);min-height:100%;align-items:stretch}
.workbench .inspector{display:none;background:#fff;border-color:var(--line);padding:0 20px 24px;color:#202020;min-width:0}
html[data-details=true] .workbench{grid-template-columns:minmax(0,1fr) 270px}
html[data-details=true] .workbench .inspector{display:block}
.guide-heading{height:53px;display:flex;align-items:center;justify-content:space-between;margin:0 -20px 20px;padding:0 17px;border-bottom:1px solid var(--line);font-size:12px;background:#fff}
.guide-heading button{display:grid;place-items:center;width:30px;height:30px;border:1px solid #dedede;background:linear-gradient(#fff,#f4f4f4);border-radius:50%;box-shadow:var(--raised)}
.guide-heading .icon{width:14px;height:14px}
.inspector h2{font-size:12px;font-weight:400;margin-bottom:12px;color:#303030}.inspector p{font-size:12px;line-height:1.65;color:#666}.inspector-section{border-color:var(--line);margin:0 0 20px;padding:0 0 20px}.inspector .guard{font-size:11px;color:#666;line-height:1.65;gap:8px}.guard .icon{color:#666}.original-handoff p{font-size:12px;color:#333}.original-handoff small{color:#666;font-size:10px}
.composition{border-color:#dedede;background:linear-gradient(#fff,#fafafa);box-shadow:var(--raised);border-radius:9px}.composition>.icon{color:#666}.composition span{font-size:12px}.composition small{color:#777}
.flow-list button{font-size:12px;color:#666}.flow-list button.active{color:var(--blue)}.flow-list button.active .step-number{background:var(--blue);border-color:var(--blue);color:#fff}.step-number{border-color:#ddd}
.workbench .experiment,.original-workbench .experiment{min-width:0;background-color:var(--canvas);background-image:radial-gradient(#0000000d .7px,transparent .7px);background-size:14px 14px}
.canvas{background:none;min-height:570px;padding:30px 24px}.primitive-stage{min-height:500px}
.canvas-toolbar{justify-content:flex-end;gap:8px;padding:14px 24px;background:#f7f7f7b8;border-bottom:1px solid #00000005}
.canvas-toolbar select,.original-open-toolbar select{font-size:11px;background:linear-gradient(#fff,#f8f8f8);border-color:#dedede;box-shadow:var(--raised);padding:8px 10px;min-height:33px;color:#333}
.original-phases{display:flex;width:max-content;max-width:calc(100% - 48px);padding:3px;margin:20px 24px 0;background:#eaeaea;border:1px solid #e0e0e0;box-shadow:inset 0 1px 3px #00000008,0 1px 0 #fff;border-radius:12px;gap:1px}
.original-phases button{min-height:29px;font-size:11px;min-width:61px;padding:5px 10px;border-radius:8px;color:#666;border:1px solid transparent}
.original-phases button[aria-pressed=true]{background:linear-gradient(#fff,#fbfbfb);border-color:#dcdcdc;color:var(--blue);box-shadow:inset 0 1px 0 #fff,0 1px 2px #00000012,0 2px 4px #00000004}
.original-collection{padding:26px 28px 38px;min-height:0}
.original-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));max-width:1100px;gap:20px 24px;justify-content:start}
.original-group{margin-bottom:28px}.original-group h2{font-size:11px;color:#666;margin:0 0 12px 12px}
.original-card{width:100%;max-width:235px}.original-card-title{padding:7px 12px 0;font-size:12px;min-height:28px;color:#333;justify-content:space-between}.original-card-title span{color:#777;font-size:12px}
.original-widget-launch:focus-visible{outline-color:var(--blue)}
.companion-toggle{border-color:#dedede;max-width:1080px;font-size:12px;color:#555;padding:14px 12px;margin:0 0 12px}.companion-toggle span{color:#666;border-color:#ddd;background:#f8f8f8}
.original-open-toolbar{padding:17px 24px 0;max-width:950px;margin:auto}
.original-app-stage{padding:25px 24px 36px}.original-app{background:#fff;box-shadow:0 0 0 1px #00000008,0 2px 4px #00000008,0 14px 40px #00000018}
.journey-footer{padding:13px 24px;background:#f7f7f7b8;border-color:#00000008;min-height:54px}.journey-footer p,.stage-controls>span{font-size:11px;color:#666}.primitive-caption{color:#666;font-size:11px}
.recipe-view{padding:28px;max-width:1150px}.recipe-header h2{font-family:Selecta,system-ui,sans-serif;font-size:21px;letter-spacing:-.3px}.recipe-header .status-pill{font-size:10px;color:#666;background:#eee;border:1px solid #ddd}
.recipe-card,.catalog-card{background:linear-gradient(#fff,#fcfcfc);border:1px solid #dedede;box-shadow:inset 0 1px #fff,0 1px 2px #00000004;border-radius:13px}
.recipe-card h3{font-size:13px}.recipe-card p,.recipe-card li{font-size:13px;color:#606060}.recipe-card code{color:#555;background:#f1f1f1;border:1px solid #e5e5e5;font-size:11px}
.original-recipe-pieces button{font-size:13px;border-color:#e1e1e1;color:#333}.original-recipe-pieces button small{color:#666}.original-recipe-pieces button>span:last-child{color:#666}
.contract-table th,.contract-table td{border-color:#e1e1e1;font-size:12px}.contract-table th{color:#666}.text-button{color:var(--blue)}
.catalog-card h3{font-family:Selecta,system-ui,sans-serif;font-size:17px}.catalog-card p{color:#666}.catalog-card>.icon{color:#666}.catalog-card button{color:#333}.catalog-card .inline-presets button{border-color:#e5e5e5}.map-note{color:#666;font-size:12px}
.primitive-links span{color:#666;background:#f0f0f0}.field-chip{color:#666}.custom-colors label{color:#666}
#toast{background:#202020f5;color:white;border:1px solid #ffffff26;box-shadow:inset 0 1px 0 #ffffff12,0 3px 8px #00000016,0 12px 30px #0000001a;border-radius:100px;font-size:12px}
@media(hover:hover) and (pointer:fine){
 .nav-item:hover:not(.active){background:#f4f4f4}.nav-item.active:hover{background:var(--blue-wash)}
 .btn:hover,.icon-btn:hover{background:linear-gradient(#fff,#f0f0f0);border-color:#ccc}
 .segmented button:hover,.original-phases button:hover{color:#333;background:#ffffff70}
 .segmented button[aria-pressed=true]:hover,.original-phases button[aria-pressed=true]:hover{color:var(--blue);background:linear-gradient(#fff,#fbfbfb)}
 .sidebar-link:hover{background:#f4f4f4}.original-card-title:hover,.original-recipe-pieces button:hover{color:var(--blue)}
}
.btn:active:not(:disabled),.icon-btn:active:not(:disabled),.segmented button:active:not(:disabled),.original-phases button:active:not(:disabled){box-shadow:var(--pressed)}
@media(max-width:1050px){.shell{grid-template-columns:165px minmax(0,1fr)}html[data-details=true] .workbench{grid-template-columns:minmax(0,1fr) 245px}.original-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:20px 10px}.original-collection{padding:23px 17px}.nav-item{font-size:11px;gap:7px;padding:10px 8px}}
@media(max-width:740px){
 html,body{height:auto;overflow:auto}#app{min-height:100dvh;height:auto}.topbar{height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 15px 0;min-height:58px}.wordmark{font-size:30px}.brand{gap:10px}.brand>span:last-child{font-size:11px}.topbar>.btn{padding:9px 14px;min-height:38px;font-size:11px}
 .view-bar{height:54px;min-height:54px;padding:7px 13px;gap:8px}.segmented button{min-width:0;padding:7px 12px;font-size:11px;min-height:31px}.guide-toggle{font-size:11px;padding:7px 10px;min-height:37px}.guide-toggle .icon{display:none}
 .shell{display:block;overflow:visible}.sidebar{display:block;padding:9px 13px;border-right:0;border-bottom:1px solid var(--line);height:auto;overflow:visible}.sidebar>.nav-group:not(.library-groups){display:none}.sidebar .sidebar-foot{display:none}.only-mobile{display:block;width:100%;padding:9px 12px;font-size:16px;background:linear-gradient(#fff,#f8f8f8);border:1px solid #dedede;border-radius:9px;box-shadow:var(--raised)}
 .library-groups{display:flex;gap:5px;overflow-x:auto}.library-groups>p{display:none}.library-groups .nav-item{font-size:11px;min-width:max-content;width:auto;padding:7px 9px;min-height:34px;margin:0}.library-groups .icon{display:none}
 .main{overflow:visible;display:block}.main .main-head{min-height:48px;height:48px;padding:0 17px}.main-title h1{font-size:14px}.head-actions .btn:not(.dark){display:flex}#content{overflow:visible;min-height:400px}.workbench,html[data-details=true] .workbench{grid-template-columns:minmax(0,1fr);min-height:0}.workbench .inspector{border-left:0;border-top:1px solid var(--line);padding-inline:20px}html[data-details=true] .workbench .inspector{display:block}
 .original-phases{margin:17px 17px 0;max-width:calc(100% - 34px)}.original-phases button{min-height:32px;min-width:61px}.original-collection{padding:23px 9px 30px}.original-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}.original-group{margin-bottom:25px}.original-card-title{font-size:11px;gap:4px}.original-card-title span{font-size:10px}
 .original-open-toolbar{padding:15px 16px 0}.original-app-stage{padding:22px 13px 30px}.original-open-toolbar select{font-size:16px;max-width:70%;padding:8px}.canvas-toolbar{padding:12px 17px}.canvas-toolbar select{font-size:16px;max-width:50%}.canvas{padding:26px 16px;min-height:450px}.primitive-stage{min-height:420px}.journey-footer{padding:13px 17px}.journey-footer p{max-width:230px;font-size:10px}.recipe-view{padding:20px 16px}.recipe-header h2{font-size:20px}
}
@media(max-width:360px){.brand>span:last-child{max-width:80px;line-height:1.3}.segmented button{padding-inline:10px}.original-card-title{font-size:10px}.original-phases button{min-width:56px}}
@media(prefers-reduced-motion:reduce){button:active:not(:disabled){transform:none!important}button{transition:none!important}}
html[data-input=keyboard] button{transition:none!important}html[data-input=keyboard] button:active{transform:none!important}
@media(forced-colors:active){.nav-item.active,.segmented button[aria-pressed=true],.original-phases button[aria-pressed=true]{color:Highlight;outline:2px solid Highlight;background:Canvas}.btn,.icon-btn,select{border:1px solid ButtonText;box-shadow:none}.original-widget-launch:focus-visible{outline-color:Highlight}}

.guide-links{display:none}
@media(max-width:740px){.main .main-head:not(:has(.head-actions>*)){display:none}.main-head:has(.head-actions>*) .main-title{display:none}.main .main-head:has(.head-actions>*){justify-content:flex-end}.guide-links{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:18px}.guide-links button,.guide-links a{font-size:12px;text-decoration:none;color:var(--blue);padding:8px 0}}
.sidebar{align-self:stretch}

@media(max-width:740px){.topbar>.btn{min-height:44px}.view-bar .segmented button{min-height:35px}.guide-toggle{min-height:40px}}