@font-face{font-family:system-ui;src:local('-apple-system')}
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#243043;background:#eef3fb;font-synthesis:none;--accent:#007aff;--line:#e2e8f0;--muted:#748195;--preview-width:37%;--side-width:208px;--surface:#fff}
*{box-sizing:border-box}body{margin:0;font-size:13px}button,input{font:inherit}button,a,input{touch-action:manipulation}button{border:1px solid #dde4ee;background:white;color:#334155;border-radius:9px;padding:9px 13px;cursor:pointer;font-weight:500;white-space:nowrap;transition:background .12s}button:hover{background:#f1f6ff}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #a4ccff;outline-offset:2px}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:#0067db}.icon-button{border:0;padding:6px 8px;background:transparent;font-size:19px;border-radius:7px;line-height:1}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}[hidden]{display:none!important}input{min-width:0;padding:10px 12px;border:1px solid #d8e0ed;border-radius:8px;color:#243043;background:#fff}input:focus{outline:2px solid #b0d4ff;border-color:var(--accent)}h1,h2,h3,p{margin:0}.muted{color:var(--muted)}.error{color:#b92730}.eyebrow{color:#6f7e94;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#f7faff;border-bottom:1px solid #dce4f0}.brand{display:flex;gap:10px;align-items:center;color:#172439;font-size:19px;font-weight:700;letter-spacing:-.6px}.brand:hover{text-decoration:none}.brand img{width:34px;height:34px;border-radius:9px}.brand b{font-weight:400;color:#758296}.brand .beta{margin:2px 0 0 4px;font-size:9px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;background:#e4edf9;color:#667b98;padding:4px 6px;border-radius:5px}.toplinks{display:flex;gap:23px;font-size:12px}.toplinks a{color:#66778e}.welcome{max-width:1080px;margin:auto;padding:72px 40px 30px}.welcome h1{font-size:54px;line-height:1.1;letter-spacing:-2.5px;font-weight:650;margin:17px 0 19px;color:#1c2b43}.welcome-copy>p{line-height:1.75;color:#68768b;font-size:15px}.welcome-actions{display:flex;gap:10px;margin-top:24px}.welcome-actions button{padding:12px 18px}.starter-section{margin-top:48px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-heading h2{font-size:15px;font-weight:600}.section-heading>span{font-size:11px;color:var(--muted)}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.starter{white-space:normal;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:22px;border-radius:16px;box-shadow:0 6px 18px #1b375205;min-height:200px}.starter strong{font-size:15px;margin:15px 0 7px;font-weight:600}.starter>span:not(.template-icon){font-size:12px;color:#7b879a;line-height:1.5}.starter small{margin-top:auto;padding-top:20px;color:#8894a6;width:100%;font-size:10px}.starter small b{float:right;color:#738eaf;font-size:14px}.template-icon{width:34px;height:34px;border-radius:9px;display:grid;place-content:center;font-size:17px;font-weight:650}.blue{background:#eaf3ff;color:#007aff}.orange{background:#fff1e4;color:#df9039}.purple{background:#f0eaff;color:#8960c7}.recent{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border:1px solid #dde5ef;border-radius:14px;margin-top:20px;background:#ffffff6e}.recent h2{font-size:15px;margin:7px 0}.recent p{color:var(--muted);font-size:11px}.storage-note{text-align:center;line-height:1.7;font-size:11px;color:#8896aa;margin:30px 0 0}.workspace{height:calc(100dvh - 66px);padding:18px 20px 0;display:flex;flex-direction:column;min-height:500px}.projectbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 3px 15px}.project-title{display:flex;gap:10px;align-items:center;min-width:130px}.project-title>div{display:flex;flex-direction:column;gap:3px;min-width:0}.project-name{padding:0;background:none;border:0;text-align:left;color:#26354d;font-size:15px;font-weight:650;max-width:280px;overflow:hidden;text-overflow:ellipsis}.project-name:hover{background:none;color:var(--accent)}#save-status{font-size:10px;color:#8592a4}.build-controls{display:flex;gap:7px}.build-controls button{padding:8px 12px;font-size:12px}.build-controls kbd{font-family:inherit;font-size:9px;color:#9ba7b7;margin-left:8px}.panes{flex:1;min-height:0;display:flex;border:1px solid #dbe3ef;border-radius:13px;background:white;overflow:hidden;box-shadow:0 7px 25px #354b6a05}.files-panel{width:var(--side-width);flex-shrink:0;background:#f8fafd;display:flex;flex-direction:column;border-right:1px solid var(--line);padding:8px 10px}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:5px 3px 12px}.panel-heading h2{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8492a6;font-weight:600}.file-list{overflow:auto;min-height:100px;flex:1}.file-row{display:flex;align-items:center;gap:6px;border:0;border-radius:7px;padding:9px 8px;margin:2px 0;text-align:left;background:transparent;width:100%;font-size:11px;font-weight:450}.file-row.active{background:#e9f1fd;color:#1765c6}.file-row .file-name{overflow:hidden;text-overflow:ellipsis;flex:1}.file-row .file-icon{color:#89a0bc;font-family:monospace;font-size:11px}.file-row .entry{font-size:8px;text-transform:uppercase;color:#7e9dbf}.folder{font-size:10px;color:#98a3b2;padding:14px 8px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-operations{display:flex;gap:4px;flex-wrap:wrap;padding:10px 0}.file-operations button{padding:4px 5px;background:transparent;border:0;font-size:9px;color:#8a98aa}.sidebar-bottom{border-top:1px solid var(--line);padding-top:9px;display:grid;gap:1px;margin-bottom:5px}#export-project{position:relative}#export-project.export-stale::after{content:"";position:absolute;right:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#e8a13c}.sidebar-bottom button{border:0;background:transparent;text-align:left;font-size:11px;padding:9px 8px;color:#697c94}.code-panel{flex:1;min-width:230px;display:flex;flex-direction:column}.tabs{height:42px;min-height:42px;display:flex;background:#fbfcfe;border-bottom:1px solid var(--line);overflow:auto}.tab{border:0;border-radius:0;padding:0 17px;font-size:11px;color:#8a98ac;border-right:1px solid #edf0f5;background:transparent}.tab[aria-selected=true]{color:#344b6b;background:white;box-shadow:inset 0 -2px var(--accent)}#editor{flex:1;min-height:110px;overflow:hidden}.cm-editor{height:100%;font-size:12.5px}.cm-scroller{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace!important;line-height:1.85!important}.cm-editor.cm-focused{outline:none}.cm-gutters{background:white!important;color:#b2bac7!important;border:0!important;padding-right:7px}.cm-activeLineGutter,.cm-activeLine{background:#f7faff!important}.cm-content{padding:17px 0!important}.cm-line{padding-left:4px!important}.cm-tooltip{font-size:12px}.cm-panels{background:#f4f7fc!important}.editor-footer{display:flex;justify-content:space-between;padding:7px 14px;border-top:1px solid #f0f3f8;color:#96a1b2;font-size:9px}.dot{padding:0 4px}.problems{border-top:1px solid var(--line);max-height:31%;display:flex;flex-direction:column;min-height:40px}.problems-heading{display:flex;align-items:center;justify-content:space-between;border:0;background:#fbfcfe;border-radius:0;width:100%;padding:10px 14px;color:#63758d;font-size:10px}.count{background:#eaf0f8;border-radius:9px;padding:1px 5px;font-size:9px;margin-left:5px}#check-status{font-size:9px;color:#98a4b5}#problem-list{overflow:auto;padding:11px 14px;font-size:11px;line-height:1.6;min-height:40px}.problem-row{display:flex;gap:6px;margin-bottom:5px}#problem-list .problem-main{flex:1;margin-bottom:0;min-width:0}#problem-list .problem-doc{flex-shrink:0;width:auto;white-space:nowrap;font-size:9px;font-weight:600;color:#5b7ba6;background:#f2f7ff;margin-bottom:0;align-self:flex-start;padding:8px 10px}.doc-flash{background:#fff3cf;border-radius:8px;transition:background 1.6s}#problem-list button{white-space:normal;width:100%;text-align:left;border:0;border-radius:6px;padding:8px;color:#a23236;background:#fff5f5;margin-bottom:5px;font-size:11px}#problem-list button.warning{color:#956516;background:#fff9ed}#problem-list small{display:block;color:#998a8a;font-size:9px}.problems.collapsed #problem-list{display:none}#splitter{width:5px;background:#f5f8fc;border-left:1px solid var(--line);border-right:1px solid var(--line);cursor:col-resize;flex-shrink:0}#splitter:hover,#splitter:focus{background:#8fc0ff}.inspector{width:var(--preview-width);min-width:260px;display:flex;flex-direction:column;background:#f7f9fc}.inspector-tabs{display:flex;padding:0 15px;height:42px;min-height:42px;border-bottom:1px solid var(--line);gap:20px;background:#fbfcfe}.inspector-tabs button{background:transparent;border:0;border-radius:0;padding:0 2px;font-size:11px;color:#94a0b2}.inspector-tabs button[aria-selected=true]{color:#3b506d;box-shadow:inset 0 -2px var(--accent)}.preview-panel{min-height:0;display:flex;flex-direction:column;flex:1}.preview-heading{display:flex;gap:11px;align-items:center;padding:22px 19px 17px}.shortcut-icon{background:#e6efff;color:#418bf3;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;font-size:23px}.preview-heading>div{flex:1;min-width:0}.preview-heading h2{font-size:14px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-heading p{font-size:10px;color:#929fb0;margin-top:3px}.preview-heading button{color:#8b9ab0;font-size:16px}.preview-banner{font-size:9px;line-height:1.6;color:#8d9bb0;padding:0 19px 13px}.preview-banner.stale{color:#ae7821}.action-preview{flex:1;overflow:auto;padding:0 16px 25px}.preview-more{width:100%;margin:4px 0 18px;font-size:11px;color:#5b7ba6;background:#f2f7ff;border-color:#d8e4f5}.empty-preview{display:flex;align-items:center;flex-direction:column;text-align:center;padding:60px 12px;color:#93a2b6}.empty-symbol{font-size:38px;background:#edf2fa;width:65px;height:65px;display:grid;place-content:center;border-radius:20px;margin-bottom:19px;color:#b0c2da}.empty-preview h3{font-size:13px;font-weight:550;color:#72839d;margin-bottom:9px}.empty-preview p{font-size:11px;line-height:1.7;max-width:210px}.empty-preview button{font-size:10px;margin-top:20px;background:transparent;border-color:#dce5f3;color:#708db3}.action-card{position:relative;background:white;border:1px solid #e5eaf3;border-radius:11px;padding:12px 13px;margin-bottom:14px;box-shadow:0 2px 6px #263b5703}.action-card:not(:last-child):after{content:'';position:absolute;height:15px;width:1px;background:#dae2ee;bottom:-16px;left:23px}.action-card-header{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;margin-bottom:7px}.action-number{font-size:9px;color:#a3afbf;margin-left:auto;font-weight:400}.action-badge{height:22px;min-width:22px;border-radius:6px;background:#eaf3ff;color:#408adf;display:grid;place-items:center;font-size:10px}.action-fields{font-size:11px;line-height:1.65;color:#53647b;overflow-wrap:anywhere}.parameter{margin-top:7px}.parameter-label{font-size:9px;color:#9ba7b7;display:block;margin-bottom:1px}.variable-chip{display:inline-block;border-radius:4px;background:#ecf3ff;color:#4081cb;font-size:10px;padding:1px 5px}.action-source{display:block;margin-top:8px;font-size:9px;color:#97a9c0;padding:0;border:0;background:none;overflow:hidden;text-overflow:ellipsis;max-width:100%}.action-card details{font-size:9px;color:#98a6b8;margin-top:8px}.action-card pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:9px;max-height:150px;overflow:auto}.actions-panel{padding:15px;overflow:auto;flex:1}.searchbox{display:flex;align-items:center;gap:8px;background:white;border:1px solid var(--line);border-radius:9px;padding:0 10px;color:#8b9caf}.searchbox input{width:100%;border:0;background:none;padding:10px 0;outline:none;font-size:11px}.catalog-status{font-size:10px;color:#9aa6b6;margin:12px 0}.catalog-item{display:flex;flex-direction:column;gap:5px;text-align:left;border:0;border-bottom:1px solid #e7edf5;border-radius:0;background:transparent;width:100%;white-space:normal;padding:12px 4px}.catalog-item strong{font-size:11px;font-weight:550}.catalog-item code{font-size:10px;color:#8b9aaf}.catalog-item span{font-size:10px;color:#90a0b5;line-height:1.5}.catalog-group{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#96a6bb;padding:20px 4px 3px}#action-detail{border:1px solid #dce5f3;border-radius:9px;background:white;margin-top:12px;padding:13px}#action-detail h3{font-size:12px}#action-detail p{font-size:11px;color:#7c8ca3;line-height:1.6;margin:8px 0}#action-detail code{font-size:10px;white-space:pre-wrap;overflow-wrap:anywhere;color:#4079bd}#action-detail dl{font-size:10px;line-height:1.6}#action-detail dt{font-weight:600;margin-top:9px}#action-detail dd{margin:2px 0;color:#94a1b4}#action-detail button{font-size:10px;width:100%;margin-top:12px}.statusbar{display:flex;justify-content:space-between;align-items:center;min-height:32px;padding:0 3px;color:#8c9bb0;font-size:10px}.statusbar .busy{color:#357bcc}.statusbar .failure{color:#b54c50}.segmented{display:none}dialog{border:1px solid #e2e8f1;border-radius:16px;padding:24px;width:min(420px,calc(100% - 30px));color:#26354a;box-shadow:0 25px 90px #172b4829}dialog::backdrop{background:#1c304c3b;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:17px;font-weight:600}dialog p{color:#7c8b9f;font-size:12px;line-height:1.6;margin:13px 0}dialog label{display:block;font-size:11px;color:#8091a7;margin:15px 0 8px}dialog input{width:100%}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}#dialog-error{color:#b53c46;font-size:11px;min-height:0}#toast{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:10px;background:#26364b;color:white;max-width:90%;box-shadow:0 5px 20px #1b2f4d20;font-size:12px;z-index:20}
@media(min-width:1500px){:root{--side-width:230px}.cm-editor{font-size:14px}.workspace{padding:22px 28px 0}.action-card{padding:15px}.action-card-header{font-size:12px}}
@media(max-width:1050px){:root{--side-width:165px;--preview-width:36%}.build-controls kbd{display:none}.topbar{padding:0 20px}.workspace{padding:12px 12px 0}.build-controls button{padding:8px 9px;font-size:11px}.inspector{min-width:245px}.project-name{max-width:190px}.file-operations button{font-size:8px}}
@media(max-width:760px){.topbar{height:56px;padding:0 16px}.brand{font-size:16px}.brand img{width:30px;height:30px}.brand .beta{display:none}.toplinks{font-size:10px;gap:12px}.welcome{padding:42px 22px 20px}.welcome h1{font-size:43px}.welcome-copy>p{font-size:13px}.starter-grid{grid-template-columns:1fr}.starter{min-height:150px}.starter-section{margin-top:36px}.recent{padding:18px;gap:15px}.recent button{font-size:11px}.workspace{height:calc(100dvh - 56px);min-height:480px;padding:12px 9px 0}.projectbar{flex-wrap:wrap;gap:12px}.project-title{width:100%}.project-name{max-width:70vw}.build-controls{width:100%;display:flex;justify-content:flex-end}.build-controls #show-actions{margin-right:auto}.files-panel{position:absolute;left:10px;top:212px;bottom:32px;width:220px;z-index:5;box-shadow:12px 0 30px #20354b17;border:1px solid var(--line);border-radius:10px}.segmented{display:flex;background:#e2eaf6;padding:3px;border-radius:8px;gap:3px;margin-bottom:10px}.segmented button{flex:1;border:0;background:transparent;border-radius:6px;font-size:11px;padding:6px}.segmented .selected{background:white;color:#356fad;box-shadow:0 1px 4px #20354b0c}.panes{position:static}.code-panel{min-width:0}.inspector{width:100%;min-width:0}.panes[data-mobile=code] .inspector{display:none}.panes:not([data-mobile=code]) .code-panel{display:none}.inspector-tabs,#splitter{display:none}.cm-editor{font-size:12px}.preview-heading{padding-top:17px}.preview-panel{max-height:100%}.statusbar{font-size:9px}#project-stats{display:none}.action-preview{padding:0 18px 22px}.empty-preview{padding:32px 12px}}

/* Shortcuty glyph picker: keyboard-accessible buttons with a live icon preview. */
#details-dialog{width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto}
#details-dialog label{display:block;margin-top:16px}#details-dialog input{width:100%}
.glyph-preview{display:flex;align-items:center;gap:12px;margin:18px 0}.glyph-preview small{display:block;color:#8090a7;margin-top:4px}
#details-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:15px;color:white}#details-icon svg{width:33px;height:33px}
.color-picker{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0}.color-picker button{width:28px;height:28px;border:3px solid white;background:var(--swatch);padding:0;border-radius:50%;color:white;box-shadow:0 0 0 1px #dce4ef}
.color-picker button[aria-pressed=true]{box-shadow:0 0 0 2px #007aff}
.glyph-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;max-height:245px;overflow:auto;margin-top:12px;padding:3px}
.glyph-picker button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 3px;font-size:10px;color:#556b87;background:#f6f8fc}.glyph-picker svg{width:25px;height:25px}
.glyph-picker button[aria-pressed=true]{background:#e5f1ff;color:#007aff;border-color:#007aff}
.shortcut-icon svg{width:28px;height:28px}button:focus-visible{outline:2px solid #007aff;outline-offset:3px}
@media(max-width:420px){.glyph-picker{grid-template-columns:repeat(4,minmax(0,1fr))}}

.details-tabs{display:flex;gap:5px;padding:5px;background:#f3f6fb;border-radius:10px;margin-top:16px}.details-tabs button{flex:1;background:transparent;border:0}.details-tabs button[aria-selected=true]{background:white;color:#007aff;box-shadow:0 1px 4px #172f5420}
#details-availability{padding:6px 0;min-height:385px}#details-availability h3{font-size:13px;margin:18px 0 10px}.metadata-options{display:grid;gap:2px}#details-dialog .metadata-options label{display:flex;align-items:center;gap:10px;margin:0;padding:8px 2px;font-size:13px}#details-dialog .metadata-options input{width:17px;height:17px;margin:0;accent-color:#007aff}#setting-input{width:100%;padding:10px;border:1px solid #dce4ef;border-radius:8px;background:white;color:#243851}

.requirements-panel{padding:20px;overflow:auto;min-height:0;flex:1;font-size:13px;line-height:1.55}.requirements-panel h2{font-size:15px;margin:20px 0 10px}.requirements-panel h2:first-child{margin-top:0}.requirements-panel small{display:block;overflow-wrap:anywhere;color:var(--muted)}.requirements-panel details{margin:16px 0}.ios-version{font-size:20px}.app-requirement{border-bottom:1px solid var(--line);padding:12px 0}.app-requirement p{margin:6px 0}.requirement-source{padding:3px 5px;margin:2px;font-size:11px}.import-notice{padding:14px 18px;font-size:12px;background:#edf3ff;border-bottom:1px solid var(--line)}.import-notice p{margin:6px 0}.import-notice small{display:block;margin-top:8px;color:var(--muted)}.welcome-actions{flex-wrap:wrap}.requirements-panel p{overflow-wrap:anywhere}

.app-identity{display:flex;align-items:center;gap:10px}.app-artwork{width:40px;height:40px;border-radius:9px;overflow:hidden;background:#e6ebf3;position:relative;flex:none;display:grid;place-items:center;color:#7b879b;font-size:25px}.app-artwork img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.app-artwork img[hidden]{display:none}.app-identity>div{min-width:0}

#apps-dialog{width:min(640px,calc(100vw - 32px))}.app-search-row{display:flex;gap:8px}.app-search-row input{min-width:0;flex:1}.app-picker-list{max-height:52vh;overflow:auto}.app-picker-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;margin:6px 0}.app-picker-item>span:nth-child(2){flex:1;min-width:0}.app-picker-item strong,.app-picker-item small{display:block}.app-picker-item small{overflow-wrap:anywhere;color:var(--muted);font-size:11px;margin-top:4px}.app-picker-item .app-artwork{flex:none}
/* Portable documentation and IDE help share the same quiet Studio surfaces. */
.docs-page{max-width:1180px;margin:0 auto;padding:48px 28px 80px}.docs-page-heading{margin-bottom:30px}.docs-page-heading h1{font-size:40px;letter-spacing:-.045em;margin:8px 0}.docs-page-heading p{color:#68788e}.docs-layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:28px;min-height:440px}.docs-sidebar{align-self:start}.docs-sidebar label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}.docs-sidebar input{width:100%;margin-bottom:14px}.docs-sidebar nav{display:grid;gap:4px}.docs-sidebar nav button{width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:9px;color:#43526a;font-weight:600}.docs-sidebar nav button[aria-current="true"]{background:#e9f0ff;color:#315fad}.docs-sidebar nav button:hover{background:#eef3fb}.docs-machine{display:grid;gap:9px;border-top:1px solid #dce5f0;padding:18px 10px;margin-top:18px;font-size:13px}.docs-machine strong{color:#42516b}.docs-machine a{color:#426cad;text-decoration:none}.docs-article{min-width:0;color:#2b3950;line-height:1.6;overflow:auto}.docs-article h1{font-size:29px;letter-spacing:-.03em;margin:0 0 18px}.docs-article h2{font-size:19px;margin:26px 0 8px}.docs-article h3{font-size:16px;margin:20px 0 6px}.docs-article p{margin:0 0 14px}.docs-article li{margin:6px 0}.docs-article ul,.docs-article ol{padding-left:24px;margin:0 0 16px}.docs-article a{color:#2b68b8}.docs-article code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:#eff4fa;padding:1px 4px;border-radius:4px}.doc-code{margin:12px 0 18px}.doc-code pre{overflow:auto;background:#142238;color:#ecf2fc;border-radius:11px;padding:15px 17px;margin:0;line-height:1.5}.doc-code pre code{background:none;color:inherit;padding:0}.doc-insert{margin-top:7px}.docs-footer{display:flex;align-items:center;gap:14px;border-top:1px solid #dce5f0;padding-top:15px;margin-top:18px}.docs-footer label{display:flex;align-items:center;gap:6px;margin-right:auto;font-size:13px}.docs-footer span{font-size:12px;color:#526b89}#docs-dialog{width:min(1050px,calc(100vw - 28px));max-height:min(88vh,900px);padding:24px}#docs-dialog .docs-layout{height:min(58vh,620px);min-height:300px}#docs-dialog .docs-article{padding-right:12px}@media(max-width:700px){.docs-page{padding:24px 16px 60px}.docs-layout{grid-template-columns:1fr;gap:18px}.docs-sidebar nav{display:flex;flex-wrap:wrap}.docs-machine{grid-template-columns:repeat(2,minmax(0,1fr))}#docs-dialog .docs-layout{height:min(58vh,500px);grid-template-columns:1fr;overflow:auto}#docs-dialog .docs-article{overflow:visible}.docs-footer{flex-wrap:wrap}}
#docs-dialog .docs-footer input{width:16px;height:16px;flex:none;margin:0}#docs-dialog .docs-footer label{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.welcome{max-width:920px;padding:86px 28px 48px}.welcome-actions{margin:0;gap:12px}.welcome-actions button{padding:13px 18px;font-size:13px}.starter-section{margin-top:30px}.starter-grid{gap:12px}.starter{min-height:86px;padding:17px;flex-direction:row;align-items:center;gap:12px}.starter strong{margin:0;font-size:13px}.starter .template-icon{flex:none}.recent{margin-top:30px}.recent h2{margin:0 0 5px}
@media(max-width:760px){.welcome{padding:36px 18px 30px}.welcome-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-actions #new-project{grid-column:1/-1}.welcome-actions button{padding:12px}.starter-section{margin-top:20px}.starter-grid{grid-template-columns:1fr;gap:8px}.starter{min-height:66px;padding:12px 14px}.recent{margin-top:22px;flex-wrap:wrap}.recent button{margin-left:auto}}

.welcome-copy{margin:2px 0 26px;max-width:640px}
.starter-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.starter-text>span{font-size:12px;color:#7b879a;line-height:1.5}

/* ---- Docs: IDE-style search, TOC, breadcrumbs, copy buttons ---- */
.docs-article{scroll-behavior:smooth}
.search-wrap{position:relative}
.docs-sidebar label kbd{font-family:ui-monospace,Menlo,monospace;font-size:10px;background:#eef3fb;border:1px solid #d5e0f0;border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:#5a6d89;margin-left:6px}
.search-results{position:absolute;top:100%;left:0;right:0;z-index:60;max-height:380px;overflow:auto;background:#fff;border:1px solid #d5e0f0;border-radius:11px;box-shadow:0 14px 38px rgba(31,63,110,.18);margin-top:6px;padding:6px}
.search-result{display:grid;grid-template-columns:1fr;gap:2px;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:8px;cursor:pointer}
.search-result:hover{background:#f2f6fc}
.search-result.active{background:#e9f0ff;outline:2px solid #b9cdf3;outline-offset:-2px}
.sr-doc{font-size:11px;font-weight:700;color:#6b7d97;text-transform:uppercase;letter-spacing:.04em}
.sr-head{font-size:14px;font-weight:700;color:#22344f}
.sr-title{font-size:13.5px;font-weight:700;color:#22344f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-snip{font-size:12.5px;color:#5a6d89;line-height:1.45}
.search-empty{padding:14px 10px;font-size:13px;color:#68788e;text-align:center}
.docs-toc-list a.spy-on{background:#e9f0ff;color:#2b68b8;font-weight:700}
.sr-snip mark,.docs-article mark{background:#ffe58a;border-radius:3px;padding:0 1px;color:inherit}
.docs-toc{margin-top:14px;border-top:1px solid #dce5f0;padding-top:12px}
.docs-toc-toggle{border:0;background:transparent;font-size:12px;font-weight:700;color:#42516b;padding:6px 8px;border-radius:7px;cursor:pointer;width:100%;text-align:left}
.docs-toc-toggle:hover{background:#eef3fb}
.docs-toc-toggle::before{content:"▾ ";color:#8ba0bd}
.docs-toc-toggle[aria-expanded="false"]::before{content:"▸ "}
.docs-toc-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:1px;max-height:300px;overflow:auto}
.docs-toc-list a{display:block;font-size:12.5px;color:#43526a;text-decoration:none;padding:5px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docs-toc-list a:hover{background:#eef3fb;color:#2b68b8}
.docs-toc-list .toc-l3 a{padding-left:20px;color:#68788e}
.docs-crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#7b879a;margin-bottom:14px;flex-wrap:wrap}
.docs-crumb .crumb-sep{color:#b3c2d6}
.docs-crumb .crumb-sec{color:#22344f;font-weight:600}
.doc-anchor{position:relative;scroll-margin-top:14px}
.doc-anchor-link{opacity:0;margin-left:8px;font-size:.75em;text-decoration:none;color:#8ba0bd}
.doc-anchor:hover .doc-anchor-link{opacity:1}
.doc-anchor.flash{animation:docflash 1.8s ease}
@keyframes docflash{0%{background:#fff3c4;border-radius:8px}100%{background:transparent}}
.doc-code{position:relative}
.doc-copy{position:absolute;top:8px;right:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#dbe6f7;font-size:11.5px;font-weight:600;border-radius:7px;padding:4px 10px;cursor:pointer}
.doc-copy:hover{background:rgba(255,255,255,.24)}
.variables-panel{padding:15px;overflow:auto;flex:1}
.variables-heading{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8492a6;font-weight:600;margin:14px 0 6px}
.variables-heading:first-child{margin-top:0}
.variables-heading.error{color:#b92730}
.variable-row{display:block;width:100%;text-align:left;background:white;border:1px solid #e5eaf3;border-radius:9px;padding:10px 12px;margin-bottom:8px}
.variable-row strong{font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.variable-row small{display:block;color:#8b9aaf;font-size:10px;margin-top:3px}
.dbg-hover{max-width:320px}.dbg-hover strong{font-size:12px}.dbg-hover .debug-var-value{margin-top:4px;font-size:11px;overflow-wrap:anywhere;max-height:160px;overflow:auto}.debug-hint{font-size:10px;line-height:1.6;padding:10px 12px;background:#f2f7ff;border:1px solid #dfe9f7;border-radius:9px;margin:0 0 12px;color:#5b7292}.debug-hint kbd{font-family:inherit;font-size:9px;background:#fff;border:1px solid #d5e0ef;border-radius:4px;padding:0 4px}.variables-note{margin-top:14px;font-size:10px}
.build-diff{padding:0 19px 10px;font-size:10px}
.build-diff-toggle{border:0;background:#eef4fd;color:#356fad;border-radius:7px;padding:6px 10px;font-size:10px}
.build-diff-list{margin-top:8px;background:white;border:1px solid #e5eaf3;border-radius:9px;padding:10px 12px;max-height:180px;overflow:auto}
.build-diff-list p{font-size:11px;margin:4px 0}
.build-diff-list small{color:#9aa6b6}
.diff-added{color:#1d7a3a}.diff-removed{color:#b92730}.diff-modified{color:#956516}
.history-list{max-height:30vh;overflow:auto;margin:10px 0}
.history-item{display:block;width:100%;text-align:left;margin-bottom:6px}
.history-item strong{font-size:12px}
.history-item small{display:block;color:#8b9aaf;font-size:10px;margin-top:2px}
.history-detail{border-top:1px solid #e7edf5;padding-top:12px;margin-top:6px}
.history-detail h3{font-size:13px;margin-bottom:4px}
.history-detail p{margin:8px 0}
.history-detail .primary{margin-top:10px}
#find-button{font-size:14px;padding:4px 6px}
.variable-row-wrap{display:flex;gap:6px;align-items:stretch;margin-bottom:8px}
.variable-row-wrap .variable-row{margin-bottom:0;flex:1}
.variable-rename{flex-shrink:0;font-size:14px;padding:8px 10px;align-self:center}
.import-notice{position:relative}
.import-notice-dismiss{position:absolute;top:8px;right:8px;font-size:16px;padding:4px 8px}
.fidelity-summary{margin:8px 0}
.fidelity-legend{margin:8px 0;font-size:11px}
.fidelity-details{margin:8px 0}
.fidelity-details summary{cursor:pointer;font-size:11px;color:#5b7186}
.fidelity-item{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;white-space:normal;margin:6px 0;padding:8px 10px;font-size:11px}
.fidelity-index{color:#9aa7b8;font-family:ui-monospace,Menlo,monospace;flex-shrink:0}
.fidelity-item strong{font-family:ui-monospace,Menlo,monospace;font-size:11px;overflow-wrap:anywhere}
.fidelity-item small{color:#8b9aaf;flex-basis:100%}
.fidelity-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:8px;flex-shrink:0}
.fidelity-approximated{background:#fff4e0;color:#a86a12}
.fidelity-dropped{background:#ffe7e7;color:#b3272f}

/* Template gallery: mirrors the app picker dialog, docs sidebar nav, and
   history list item surfaces. No new design language. */
#templates-dialog{width:min(920px,calc(100vw - 28px));max-height:min(88vh,880px)}
#templates-dialog[open]{display:flex;flex-direction:column}
.templates-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;min-height:380px;flex:1;min-height:0}
.templates-side{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.templates-side .searchbox{flex:none}
#templates-categories{display:flex;flex-wrap:wrap;gap:4px;flex:none}
#templates-categories button{border:0;background:transparent;padding:8px 11px;border-radius:8px;color:#43526a;font-weight:600;font-size:11px}
#templates-categories button:hover{background:#eef3fb}
#templates-categories button[aria-current="true"]{background:#e9f0ff;color:#315fad}
#templates-list{flex:1;min-height:120px}
.template-item{display:block;width:100%;text-align:left;white-space:normal;margin-bottom:6px;position:relative;padding-right:34px}
.template-item strong{font-size:12px}
.template-item small{display:block;color:#8b9aaf;font-size:10px;margin-top:3px;line-height:1.5}
.template-item[aria-current="true"]{background:#e9f0ff;border-color:#b9cdf3}
.template-delete{position:absolute;top:8px;right:8px;border:0;background:transparent;color:#9aa7b8;font-size:14px;padding:4px 7px;border-radius:6px}
.template-delete:hover{background:#ffe7e7;color:#b3272f}
.templates-preview-wrap{min-width:0;display:flex;flex-direction:column;min-height:0}
.templates-preview-wrap .eyebrow{margin-bottom:8px;flex:none}
.templates-preview-wrap .doc-code{flex:1;min-height:0;display:flex;margin:0 0 6px}
.templates-preview-wrap .doc-code pre{flex:1;min-height:0;max-height:56vh;overflow:auto;margin:0}
#templates-status{min-height:18px}
@media(max-width:700px){.templates-layout{grid-template-columns:1fr;overflow:auto}.templates-preview-wrap .doc-code pre{max-height:32vh}}

/* Enhanced action library (additive; mirrors existing Studio tokens) */
.lib-catselect{width:100%;margin-top:8px;padding:10px 12px;border:1px solid #d8e0ed;border-radius:8px;background:#fff;color:#243043;font:inherit;font-size:11px}
.lib-card{position:relative;cursor:pointer;padding-right:36px}
.lib-card:focus-visible{outline:3px solid #a4ccff;outline-offset:-3px}
.lib-selected{background:#e9f1fd;box-shadow:inset 3px 0 var(--accent)}
[data-theme] .lib-selected{background:var(--accent-soft);box-shadow:inset 3px 0 var(--accent)}
.lib-star{position:absolute;top:8px;right:6px;border:0;background:transparent;font-size:15px;line-height:1;color:#c3cfdf;padding:6px;cursor:pointer}
.lib-star:hover{color:#e8a13c;background:transparent}
.lib-star.fav{color:#e8a13c}
.lib-params{display:block;font-size:9px;color:#a3b2c6;margin-top:3px}
#action-detail h3 .lib-detail-star{position:static;margin:0 8px 0 0;padding:2px;vertical-align:-2px;font-size:14px}

/* ============ Studio themes ============
   Light is the default: it uses the rules above untouched (no data-theme).
   Every other theme sets [data-theme="<name>"] on <html>, which (1) redefines
   the semantic palette below and (2) activates the shared structural
   overrides further down. Components reference var() only, so new surfaces
   (including the graph view) follow every theme automatically. */

/* (A) Semantic palette, light values. Additive: nothing above references these. */
:root{
  --bg:#eef3fb;--bg-raised:#ffffff;--bg-sunken:#f8fafd;--bg-hover:#f1f6ff;
  --text:#243043;--text-dim:#68768b;--text-faint:#96a1b2;--line:#e2e8f0;
  --accent:#007aff;--accent-hover:#0067db;--accent-soft:#e9f1fd;--accent-soft-text:#1765c6;
  --error:#b92730;--error-bg:#fff5f5;--warn:#956516;--warn-bg:#fff9ed;--ok:#1d7a3a;--ok-bg:#eef9f0;
  --input-bg:#ffffff;--input-border:#d8e0ed;--input-text:#243043;
  --cm-gutter-bg:#ffffff;--cm-gutter-text:#b2bac7;--cm-active-line:#f7faff;--cm-cursor:#243043;
  --cm-selection:#d9e2f5;--cm-panel-bg:#f4f7fc;--cm-tooltip-bg:#ffffff;--cm-tooltip-border:#d5e0f0;
  --cm-match-bg:#fff3b3;--cm-match-selected:#ffdf80;
  --tok-keyword:#9859a5;--tok-string:#568966;--tok-number:#c58b3f;--tok-comment:#a0acbc;
  --tok-variable:#486989;--tok-operator:#8593a7;--tok-bool:#bc8362;
  --graph-bg:#eef3fb;--graph-node-bg:#ffffff;--graph-node-border:#dbe3ef;--graph-node-text:#243043;
  --graph-edge:#8ba0bd;--graph-edge-label:#68768b;--graph-selected:#007aff;
  --editor-font-size:12.5px;
}

/* (B) Theme palettes. */
[data-theme="dark"]{color-scheme:dark;
  --bg:#141416;--bg-raised:#202023;--bg-sunken:#18181b;--bg-hover:#2b2b30;
  --text:#f0f0f3;--text-dim:#a1a1ab;--text-faint:#7d7d89;--line:#343439;
  --accent:#0a84ff;--accent-hover:#3390ff;--accent-soft:#1d3a5f;--accent-soft-text:#7db3ff;
  --error:#f08a8e;--error-bg:#2a1e20;--warn:#e8b96a;--warn-bg:#2a2318;--ok:#7bc98a;--ok-bg:#17281c;
  --input-bg:#18181b;--input-border:#3a3a40;--input-text:#f0f0f3;
  --cm-gutter-bg:#131924;--cm-gutter-text:#5b6a82;--cm-active-line:#1b2433;--cm-cursor:#e8eef7;
  --cm-selection:#314e78;--cm-panel-bg:#1a2230;--cm-tooltip-bg:#1c2534;--cm-tooltip-border:#2e3a4e;
  --cm-match-bg:#5a4a1f;--cm-match-selected:#7a5f22;
  --tok-keyword:#c792ea;--tok-string:#9ece8f;--tok-number:#f0b67f;--tok-comment:#75859c;
  --tok-variable:#8fb3e8;--tok-operator:#93a1b8;--tok-bool:#e0a477;
  --graph-bg:#10151f;--graph-node-bg:#1a2230;--graph-node-border:#2b3648;--graph-node-text:#dbe4f2;
  --graph-edge:#4a5a74;--graph-edge-label:#8b98ac;--graph-selected:#0a84ff;
}
[data-theme="nord"]{color-scheme:dark;
  --bg:#2e3440;--bg-raised:#3b4252;--bg-sunken:#2a303c;--bg-hover:#434c5e;
  --text:#d8dee9;--text-dim:#a9b4c6;--text-faint:#6d7a90;--line:#434c5e;
  --accent:#88c0d0;--accent-hover:#8fcae0;--accent-soft:#3a4a5a;--accent-soft-text:#88c0d0;
  --error:#bf616a;--error-bg:#3d2f36;--warn:#ebcb8b;--warn-bg:#3f3a2c;--ok:#a3be8c;--ok-bg:#2f3a2c;
  --input-bg:#333b4a;--input-border:#4c566a;--input-text:#d8dee9;
  --cm-gutter-bg:#2a303c;--cm-gutter-text:#616c82;--cm-active-line:#333b4a;--cm-cursor:#d8dee9;
  --cm-selection:#4c566a;--cm-panel-bg:#3b4252;--cm-tooltip-bg:#3b4252;--cm-tooltip-border:#4c566a;
  --cm-match-bg:#5e5a2e;--cm-match-selected:#7a7440;
  --tok-keyword:#b48ead;--tok-string:#a3be8c;--tok-number:#d08770;--tok-comment:#616c82;
  --tok-variable:#8fbcbb;--tok-operator:#9aa7bd;--tok-bool:#d08770;
  --graph-bg:#2e3440;--graph-node-bg:#3b4252;--graph-node-border:#4c566a;--graph-node-text:#d8dee9;
  --graph-edge:#616c82;--graph-edge-label:#a9b4c6;--graph-selected:#88c0d0;
}
[data-theme="dracula"]{color-scheme:dark;
  --bg:#282a36;--bg-raised:#343746;--bg-sunken:#21222c;--bg-hover:#44475a;
  --text:#f8f8f2;--text-dim:#bcc2d6;--text-faint:#6272a4;--line:#44475a;
  --accent:#bd93f9;--accent-hover:#d0a9fb;--accent-soft:#3d3a5c;--accent-soft-text:#bd93f9;
  --error:#ff5555;--error-bg:#3d2b33;--warn:#f1fa8c;--warn-bg:#3d3d2b;--ok:#50fa7b;--ok-bg:#263b2e;
  --input-bg:#2e3140;--input-border:#4a4e69;--input-text:#f8f8f2;
  --cm-gutter-bg:#21222c;--cm-gutter-text:#55586e;--cm-active-line:#343746;--cm-cursor:#f8f8f2;
  --cm-selection:#44475a;--cm-panel-bg:#343746;--cm-tooltip-bg:#343746;--cm-tooltip-border:#4a4e69;
  --cm-match-bg:#5c5a24;--cm-match-selected:#7a7832;
  --tok-keyword:#ff79c6;--tok-string:#f1fa8c;--tok-number:#bd93f9;--tok-comment:#6272a4;
  --tok-variable:#8be9fd;--tok-operator:#bcc2d6;--tok-bool:#ffb86c;
  --graph-bg:#282a36;--graph-node-bg:#343746;--graph-node-border:#4a4e69;--graph-node-text:#f8f8f2;
  --graph-edge:#55586e;--graph-edge-label:#bcc2d6;--graph-selected:#bd93f9;
}
[data-theme="solarized-dark"]{color-scheme:dark;
  --bg:#002b36;--bg-raised:#073642;--bg-sunken:#00212c;--bg-hover:#0e4553;
  --text:#839496;--text-dim:#93a1a1;--text-faint:#586e75;--line:#0e4553;
  --accent:#268bd2;--accent-hover:#3a9bdc;--accent-soft:#0e3a4d;--accent-soft-text:#6fb3e0;
  --error:#dc322f;--error-bg:#3d1f1e;--warn:#b58900;--warn-bg:#3d3214;--ok:#859900;--ok-bg:#2b3a12;
  --input-bg:#06313d;--input-border:#1a4a58;--input-text:#839496;
  --cm-gutter-bg:#00212c;--cm-gutter-text:#4a6a74;--cm-active-line:#073642;--cm-cursor:#839496;
  --cm-selection:#0e4553;--cm-panel-bg:#073642;--cm-tooltip-bg:#073642;--cm-tooltip-border:#1a4a58;
  --cm-match-bg:#5c4d14;--cm-match-selected:#7a6620;
  --tok-keyword:#6c71c4;--tok-string:#859900;--tok-number:#d33682;--tok-comment:#586e75;
  --tok-variable:#2aa198;--tok-operator:#93a1a1;--tok-bool:#cb4b16;
  --graph-bg:#002b36;--graph-node-bg:#073642;--graph-node-border:#1a4a58;--graph-node-text:#839496;
  --graph-edge:#4a6a74;--graph-edge-label:#93a1a1;--graph-selected:#268bd2;
}
[data-theme="high-contrast"]{color-scheme:dark;
  --bg:#000000;--bg-raised:#0d0d0d;--bg-sunken:#000000;--bg-hover:#1f1f1f;
  --text:#ffffff;--text-dim:#d6d6d6;--text-faint:#a3a3a3;--line:#6e6e6e;
  --accent:#4da3ff;--accent-hover:#7db9ff;--accent-soft:#0a2a5c;--accent-soft-text:#9cc4ff;
  --error:#ff7a7a;--error-bg:#3d1414;--warn:#ffdd33;--warn-bg:#3d340a;--ok:#6fe08a;--ok-bg:#0f3d1c;
  --input-bg:#000000;--input-border:#8a8a8a;--input-text:#ffffff;
  --cm-gutter-bg:#000000;--cm-gutter-text:#8a8a8a;--cm-active-line:#141414;--cm-cursor:#ffffff;
  --cm-selection:#0a4a9c;--cm-panel-bg:#0d0d0d;--cm-tooltip-bg:#0d0d0d;--cm-tooltip-border:#6e6e6e;
  --cm-match-bg:#6e5a00;--cm-match-selected:#8f7600;
  --tok-keyword:#d68bff;--tok-string:#9fff9f;--tok-number:#ffb86b;--tok-comment:#a3a3a3;
  --tok-variable:#8bd4ff;--tok-operator:#d6d6d6;--tok-bool:#ffb86b;
  --graph-bg:#000000;--graph-node-bg:#0d0d0d;--graph-node-border:#8a8a8a;--graph-node-text:#ffffff;
  --graph-edge:#8a8a8a;--graph-edge-label:#d6d6d6;--graph-selected:#4da3ff;
}

/* (C) Shared structural overrides: every themed mode maps components to the
   palette via var(). Nothing here is hardcoded per-theme. */
[data-theme]{color:var(--text);background:var(--bg)}
[data-theme] button{border-color:var(--line);background:var(--bg-raised);color:var(--text)}
[data-theme] button:hover{background:var(--bg-hover)}
[data-theme] .primary{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme] .primary:hover{background:var(--accent-hover)}
[data-theme] input,[data-theme] select{background:var(--input-bg);border-color:var(--input-border);color:var(--input-text)}
[data-theme] input:focus{border-color:var(--accent)}
[data-theme] .topbar{background:var(--bg-sunken);border-bottom-color:var(--line)}
[data-theme] .brand{color:var(--text)}
[data-theme] .brand b{color:var(--text-faint)}
[data-theme] .toplinks a{color:var(--text-dim)}
[data-theme] .welcome h1{color:var(--text)}
[data-theme] .welcome-copy>p{color:var(--text-dim)}
[data-theme] .starter>span:not(.template-icon){color:var(--text-dim)}
[data-theme] .recent{background:var(--bg-raised);border-color:var(--line)}
[data-theme] .recent p{color:var(--text-dim)}
[data-theme] .storage-note{color:var(--text-faint)}
[data-theme] .project-name{color:var(--text)}
[data-theme] #save-status{color:var(--text-faint)}
[data-theme] .build-controls kbd{color:var(--text-faint)}
[data-theme] .panes{background:var(--bg-raised);border-color:var(--line)}
[data-theme] .files-panel{background:var(--bg-sunken)}
[data-theme] .panel-heading h2{color:var(--text-faint)}
[data-theme] .file-row .file-icon{color:var(--text-faint)}
[data-theme] .file-row .entry{color:var(--text-faint)}
[data-theme] .folder{color:var(--text-faint)}
[data-theme] .file-row.active{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] .file-operations button{color:var(--text-dim)}
[data-theme] .sidebar-bottom button{color:var(--text-dim)}
[data-theme] .tabs{background:var(--bg-sunken);border-bottom-color:var(--line)}
[data-theme] .tab{color:var(--text-dim);border-right-color:var(--line)}
[data-theme] .tab[aria-selected=true]{color:var(--text);background:var(--bg-raised)}
[data-theme] .editor-footer{border-top-color:var(--line);color:var(--text-faint)}
[data-theme] .problems-heading{background:var(--bg-sunken);color:var(--text-dim)}
[data-theme] .count{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] #check-status{color:var(--text-faint)}
[data-theme] #problem-list button{background:var(--error-bg);color:var(--error)}
[data-theme] #problem-list button.warning{background:var(--warn-bg);color:var(--warn)}
[data-theme] #problem-list small{color:var(--text-faint)}
[data-theme] #splitter{background:var(--bg-sunken)}
[data-theme] .inspector{background:var(--bg-sunken)}
[data-theme] .inspector-tabs{background:var(--bg-sunken);border-bottom-color:var(--line)}
[data-theme] .inspector-tabs button{color:var(--text-dim)}
[data-theme] .inspector-tabs button[aria-selected=true]{color:var(--text)}
[data-theme] .preview-banner{color:var(--text-faint)}
[data-theme] .preview-banner.stale{color:var(--warn)}
[data-theme] .preview-heading p{color:var(--text-faint)}
[data-theme] .preview-heading button{color:var(--text-faint)}
[data-theme] .shortcut-icon{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] .empty-preview{color:var(--text-dim)}
[data-theme] .empty-symbol{background:var(--bg-hover);color:var(--text-faint)}
[data-theme] .empty-preview h3{color:var(--text-dim)}
[data-theme] .empty-preview button{border-color:var(--line);color:var(--accent-soft-text)}
[data-theme] .action-card{background:var(--bg-raised);border-color:var(--line)}
[data-theme] .action-card:not(:last-child):after{background:var(--line)}
[data-theme] .action-number{color:var(--text-faint)}
[data-theme] .action-badge{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] .action-fields{color:var(--text-dim)}
[data-theme] .parameter-label{color:var(--text-faint)}
[data-theme] .variable-chip{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] .action-source{color:var(--text-faint)}
[data-theme] .action-card details{color:var(--text-faint)}
[data-theme] .searchbox{background:var(--input-bg);border-color:var(--line);color:var(--text-faint)}
[data-theme] .catalog-status{color:var(--text-faint)}
[data-theme] .catalog-item{border-bottom-color:var(--line)}
[data-theme] .catalog-item code{color:var(--text-faint)}
[data-theme] .catalog-item span{color:var(--text-dim)}
[data-theme] .catalog-group{color:var(--text-faint)}
[data-theme] #action-detail{background:var(--bg-raised);border-color:var(--line)}
[data-theme] #action-detail p{color:var(--text-dim)}
[data-theme] #action-detail code{color:var(--accent-soft-text)}
[data-theme] #action-detail dd{color:var(--text-faint)}
[data-theme] .statusbar{color:var(--text-faint)}
[data-theme] .statusbar .busy{color:var(--accent)}
[data-theme] .statusbar .failure{color:var(--error)}
[data-theme] .muted{color:var(--text-dim)}
[data-theme] .error{color:var(--error)}
[data-theme] .eyebrow{color:var(--text-faint)}
[data-theme] dialog{background:var(--bg-raised);border-color:var(--line);color:var(--text)}
[data-theme] dialog p{color:var(--text-dim)}
[data-theme] dialog label{color:var(--text-dim)}
[data-theme] #dialog-error,[data-theme] .dialog-error{color:var(--error)}
[data-theme] .import-notice{background:var(--bg-sunken);border-bottom-color:var(--line)}
[data-theme] .fidelity-details summary{color:var(--text-dim)}
[data-theme] .fidelity-index{color:var(--text-faint)}
[data-theme] .fidelity-item small{color:var(--text-dim)}
[data-theme] .fidelity-approximated{background:var(--warn-bg);color:var(--warn)}
[data-theme] .fidelity-dropped{background:var(--error-bg);color:var(--error)}
[data-theme] .variables-heading{color:var(--text-faint)}
[data-theme] .variables-heading.error{color:var(--error)}
[data-theme] .variable-row{background:var(--bg-raised);border-color:var(--line)}
[data-theme] .variable-row small{color:var(--text-dim)}
[data-theme] .build-diff-toggle{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] .build-diff-list{background:var(--bg-raised);border-color:var(--line)}
[data-theme] .build-diff-list small{color:var(--text-faint)}
[data-theme] .diff-added{color:var(--ok)}
[data-theme] .diff-removed{color:var(--error)}
[data-theme] .diff-modified{color:var(--warn)}
[data-theme] .history-detail{border-top-color:var(--line)}
[data-theme] .history-item small{color:var(--text-dim)}
[data-theme] .requirements-panel small{color:var(--text-dim)}
[data-theme] .app-artwork{background:var(--bg-hover);color:var(--text-faint)}
[data-theme] .app-picker-item small{color:var(--text-dim)}
[data-theme] .glyph-picker button{background:var(--bg-hover);color:var(--text-dim)}
[data-theme] .glyph-picker button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-soft-text);border-color:var(--accent)}
[data-theme] .color-picker button{box-shadow:0 0 0 1px var(--line)}
[data-theme] .color-picker button[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}
[data-theme] .details-tabs{background:var(--bg-sunken)}
[data-theme] .details-tabs button[aria-selected=true]{background:var(--bg-raised);color:var(--accent)}
[data-theme] #details-dialog .metadata-options input,[data-theme] #settings-dialog .metadata-options input{accent-color:var(--accent)}
[data-theme] .glyph-preview small{color:var(--text-dim)}
[data-theme] .segmented{background:var(--bg-hover)}
[data-theme] .segmented .selected{background:var(--bg-raised);color:var(--accent-soft-text)}
[data-theme] #settings-dialog h3.settings-section{font-size:13px;margin:18px 0 10px;color:var(--text)}
[data-theme] #settings-dialog .metadata-options label{display:flex;align-items:center;gap:10px;margin:0;padding:8px 2px;font-size:13px;color:var(--text-dim)}
[data-theme] #settings-dialog .metadata-options input{width:17px;height:17px;margin:0;flex:none}
[data-theme] #settings-dialog input[type=range]{padding:0;accent-color:var(--accent)}
[data-theme] #settings-dialog select#settings-theme{width:100%;padding:10px;border:1px solid var(--input-border);border-radius:8px;background:var(--input-bg);color:var(--input-text)}
[data-theme] .settings-row-label{display:flex;justify-content:space-between;align-items:baseline}
/* Settings dialog base styles (mirror the details dialog; work in light too via :root vars). */
#settings-dialog h3.settings-section{font-size:13px;margin:18px 0 10px}
#settings-dialog h3.settings-section:first-of-type{margin-top:6px}
#settings-dialog .metadata-options label{display:flex;align-items:center;gap:10px;margin:0;padding:8px 2px;font-size:13px}
#settings-dialog .metadata-options input{width:17px;height:17px;margin:0;flex:none;accent-color:#007aff}
#settings-dialog input[type=range]{padding:0;accent-color:#007aff}
#settings-dialog select#settings-theme{width:100%;padding:10px;border:1px solid #dce4ef;border-radius:8px;background:white;color:#243851}
.settings-row-label{display:flex;justify-content:space-between;align-items:baseline}
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.theme-card{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:10px;text-align:left}
.theme-card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.theme-swatch-row{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.theme-swatch{flex:1}
.theme-name{font-size:11px;font-weight:600;text-align:center}
/* CodeMirror surfaces follow the palette. */
[data-theme] .cm-editor{font-size:var(--editor-font-size)}
[data-theme] .cm-gutters{background:var(--cm-gutter-bg)!important;color:var(--cm-gutter-text)!important;border:0!important}
[data-theme] .cm-activeLineGutter,[data-theme] .cm-activeLine{background:var(--cm-active-line)!important}
[data-theme] .cm-content{caret-color:var(--cm-cursor)}
[data-theme] .cm-cursor{border-left-color:var(--cm-cursor)!important}
[data-theme] .cm-selectionBackground{background:var(--cm-selection)!important}
[data-theme] .cm-panels{background:var(--cm-panel-bg)!important;border-bottom:1px solid var(--line)}
[data-theme] .cm-search{color:var(--text)}
[data-theme] .cm-textfield{background:var(--input-bg);border-color:var(--input-border);color:var(--input-text)}
[data-theme] .cm-tooltip{background:var(--cm-tooltip-bg)!important;border:1px solid var(--cm-tooltip-border)!important;color:var(--text)}
[data-theme] .cm-tooltip-autocomplete>ul>li[aria-selected]{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] .cm-searchMatch{background:var(--cm-match-bg)}
[data-theme] .cm-searchMatch-selected{background:var(--cm-match-selected)}
[data-theme] .cm-diagnostic{border-left-color:var(--line)}
.tok-keyword{color:var(--tok-keyword)}
.tok-string{color:var(--tok-string)}
.tok-number{color:var(--tok-number)}
.tok-comment{color:var(--tok-comment);font-style:italic}
.tok-variableName{color:var(--tok-variable)}
.tok-operator{color:var(--tok-operator)}
.tok-bool{color:var(--tok-bool)}
/* Docs surfaces follow the palette. */
[data-theme] .docs-article{color:var(--text)}
[data-theme] .docs-article a{color:var(--accent)}
[data-theme] .docs-article code{background:var(--bg-hover);color:var(--text)}
[data-theme] .docs-page-heading p{color:var(--text-dim)}
[data-theme] .docs-sidebar nav button{color:var(--text-dim)}
[data-theme] .docs-sidebar nav button:hover{background:var(--bg-hover)}
[data-theme] .docs-sidebar nav button[aria-current="true"]{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] .docs-machine{border-top-color:var(--line)}
[data-theme] .docs-machine strong{color:var(--text-dim)}
[data-theme] .docs-machine a{color:var(--accent)}
[data-theme] .docs-sidebar label kbd{background:var(--bg-hover);border-color:var(--line);color:var(--text-dim)}
[data-theme] .search-results{background:var(--bg-raised);border-color:var(--line)}
[data-theme] .search-result:hover{background:var(--bg-hover)}
[data-theme] .search-result.active{background:var(--accent-soft)}
[data-theme] .sr-doc{color:var(--text-faint)}
[data-theme] .sr-head,[data-theme] .sr-title{color:var(--text)}
[data-theme] .sr-snip{color:var(--text-dim)}
[data-theme] .search-empty{color:var(--text-dim)}
[data-theme] .docs-toc{border-top-color:var(--line)}
[data-theme] .docs-toc-toggle{color:var(--text-dim)}
[data-theme] .docs-toc-toggle:hover{background:var(--bg-hover)}
[data-theme] .docs-toc-list a{color:var(--text-dim)}
[data-theme] .docs-toc-list a:hover{background:var(--bg-hover);color:var(--accent)}
[data-theme] .docs-toc-list a.spy-on{background:var(--accent-soft);color:var(--accent-soft-text)}
[data-theme] .docs-toc-list .toc-l3 a{color:var(--text-faint)}
[data-theme] .docs-crumb{color:var(--text-dim)}
[data-theme] .docs-crumb .crumb-sec{color:var(--text)}
[data-theme] .docs-crumb .crumb-sep{color:var(--text-faint)}
[data-theme] .doc-anchor-link{color:var(--text-faint)}
[data-theme] .docs-footer{border-top-color:var(--line)}
[data-theme] .docs-footer span{color:var(--text-dim)}

/* ---- IDE extras: command palette, tabs, signature hints, outline, graph ---- */
#command-palette{padding:0;overflow:hidden;width:min(560px,calc(100% - 30px))}
#palette-search{border:0;border-bottom:1px solid var(--line);border-radius:0;width:100%;padding:16px 18px;font-size:14px}
#palette-search:focus{outline:none;border-bottom-color:var(--accent)}
#palette-list{max-height:320px;overflow:auto;padding:8px}
#palette-list [data-cmd]{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;border:0;background:transparent;text-align:left;padding:10px 12px;border-radius:8px;font-size:13px;color:inherit}
#palette-list [data-cmd] small{color:var(--muted);font-size:10px;flex-shrink:0}
#palette-list [data-cmd].selected{background:#e9f1fd;color:#1765c6}
[data-theme] #palette-list [data-cmd].selected{background:var(--accent-soft);color:var(--accent-soft-text)}
.palette-empty{padding:16px;text-align:center}
#palette-button kbd{font-family:inherit;font-size:9px;color:#9ba7b7;margin-left:8px}
#graph-button.active{background:#e9f1fd;color:#1765c6;border-color:#bcd6f5}

.tab{position:relative;display:inline-flex;align-items:center;gap:8px}

#signature-hint{position:fixed;z-index:30;max-width:min(560px,90vw);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px #172b4826;padding:10px 14px;font-size:12px;line-height:1.6;color:inherit}
#signature-hint .hint-params{color:var(--muted)}
#signature-hint .hint-current{background:#e9f1fd;color:#1765c6;border-radius:4px;padding:1px 4px}
[data-theme] #signature-hint .hint-current{background:var(--accent-soft);color:var(--accent-soft-text)}
#signature-hint small{display:block;margin-top:4px;font-size:10px}

#outline-select{margin-left:auto;align-self:center;max-width:190px;flex-shrink:0;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:8px;padding:6px 8px;font-size:11px}
@media(max-width:760px){#outline-select{display:none}}

#graph-view{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface);position:relative}
.graph-toolbar{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:11px}
.graph-toolbar button{padding:6px 10px;font-size:11px}
.graph-spacer{flex:1}
.graph-flow{display:flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
.graph-flow input{width:auto;accent-color:var(--accent)}
.graph-svg{flex:1;min-height:0;width:100%;cursor:grab;touch-action:none}
.graph-svg:active{cursor:grabbing}
.gedge{fill:none;stroke:#c3cfdf;stroke-width:1.5}
.gedge.data{stroke:var(--accent);stroke-dasharray:6 4;stroke-width:1.5;opacity:.75}
.gnode{cursor:pointer}
.gnode rect{fill:var(--surface);stroke:var(--line);stroke-width:1}
.gnode.begin rect{stroke-width:2}
.gnode:hover rect{stroke:var(--accent)}
.gnode:focus{outline:none}
.gnode:focus rect{stroke:var(--accent);stroke-width:2}
.gnode text{fill:currentColor;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.gnode-title{font-size:12px;font-weight:600}
.gnode-sub{font-size:10px;opacity:.65}
.gnode-badge-t{font-size:11px;font-weight:700}
.gnode-kind{font-size:13px;font-weight:700;opacity:.55}
.gnode-toggle{opacity:.9}
#graph-popover{position:absolute;z-index:10;width:290px;max-height:340px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px #172b4833;padding:14px;font-size:12px}
.gpop-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gpop-id{font-size:10px;margin:6px 0;overflow-wrap:anywhere}
.gpop-branch{font-size:11px;font-weight:600;margin:4px 0}
.gpop-actions{display:flex;gap:8px;flex-wrap:wrap}
.gpop-actions button{font-size:11px;padding:8px 12px}
.gpop-params{font-size:10px;max-height:150px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#f6f8fc;border:1px solid var(--line);border-radius:8px;padding:8px;margin:8px 0}
/* Debugger: breakpoints, paused line, toolbar, live panel. All colors are theme variables. */
.cm-debug-gutter{cursor:pointer}
.dbg-gutter-marker{width:10px;height:10px;border-radius:50%;margin:5px auto}
.dbg-gutter-marker.dbg-bp-set{background:var(--error)}.dbg-bp-conditional{background:var(--warn)}
.dbg-gutter-marker.dbg-bp-disabled{border:2px solid var(--text-faint);background:transparent;width:8px;height:8px}
.dbg-gutter-marker.dbg-bp-unresolved{border:2px dashed var(--text-faint);background:transparent;width:8px;height:8px;opacity:.6}
.dbg-gutter-marker.dbg-bp-hit{background:var(--error);box-shadow:0 0 0 3px var(--error-bg);outline:2px solid var(--error)}
.dbg-gutter-marker.dbg-current{width:0;height:0;border-radius:0;background:transparent;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--warn);margin:4px auto}
.dbg-gutter-marker.dbg-bp-spacer{visibility:hidden}
.dbg-current-line{background:var(--warn-bg)!important}
.debug-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 14px;background:var(--bg-sunken);border-bottom:1px solid var(--line);min-height:42px}
.debug-toolbar button{padding:7px 10px;font-size:11px}
.debug-toolbar kbd{font-family:inherit;font-size:9px;color:var(--text-faint);margin-left:6px}
.debug-status{font-size:11px;font-weight:600;color:var(--text-dim);margin-right:4px;min-width:0}
.debug-spacer{flex:1}
.debug-input-label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim)}
.debug-input-label input{padding:6px 9px;font-size:11px;max-width:150px}
.debug-menu-items{display:grid;gap:8px;margin:6px 0 4px}
.debug-menu-item{width:100%;text-align:left;white-space:normal}
.debug-live-wrap{border-bottom:1px solid var(--line);margin-bottom:12px}
.debug-live{padding:4px 2px 12px}
.debug-status-inline{font-size:10px;font-weight:600;color:var(--warn)}
.debug-current{font-size:11px;margin:6px 0}
.debug-subhead{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);font-weight:600;margin:14px 0 6px}
.debug-var{display:flex;gap:8px;align-items:baseline;font-size:11px;padding:4px 0;border-bottom:1px dashed var(--line);min-width:0}
.debug-var-name{font-weight:600;color:var(--tok-variable);flex-shrink:0}
.debug-var-type{font-size:9px;color:var(--text-faint);flex-shrink:0}
.debug-var-value{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.debug-frame{font-size:11px;color:var(--text-dim);padding:3px 0}
.debug-unsupported{font-size:11px;line-height:1.6;background:var(--warn-bg);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin:8px 0;color:var(--text)}
.debug-console{background:var(--bg-sunken);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-height:180px;overflow:auto;font-size:11px;line-height:1.6}
.debug-log{padding:2px 0;overflow-wrap:anywhere}
.debug-log-alert{color:var(--accent-soft-text);font-weight:600}
.debug-log-result{color:var(--ok);font-weight:600}
.debug-log-warn{color:var(--warn)}
.debug-log-error{color:var(--error)}
.debug-log-input{color:var(--text-dim);font-style:italic}
.debug-log-web{color:var(--text-dim)}
@media(max-width:760px){.debug-toolbar{padding:6px 9px}.debug-input-label input{max-width:110px}.debug-toolbar .debug-status{flex-basis:100%}}
.share-layout{display:flex;flex-direction:column;align-items:center;gap:14px;margin:16px 0}#share-qr{width:200px;height:200px;border:1px solid #e2e8f1;border-radius:12px;background:#fff}.share-link-row{display:flex;gap:8px;width:100%}.share-link-row input{flex:1;min-width:0}
.fidelity-preserved{background:#edf2f7;color:#425d78}

.workflow-review{padding:10px 14px;border-bottom:1px solid #dce3ec;font-size:12px}
.workflow-review summary,.review-action summary{cursor:pointer}
#export-review-dialog{width:min(850px,calc(100vw - 32px));max-height:85vh;overflow:auto}
.review-action{border-top:1px solid #dce3ec;padding:8px 0}
.review-action summary{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.review-action small,.review-category{color:#64748b;font-size:10px;margin-left:8px}
.review-action ul{list-style:none;padding:0}
.review-action li{margin:12px 0;overflow-wrap:anywhere}
.review-values{display:flex;gap:8px;align-items:center;margin:6px 0}
.review-values pre{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f6f8;padding:8px;max-height:180px;overflow:auto;font-size:11px}
@media(max-width:600px){.review-values{flex-direction:column;align-items:stretch}}

/* Focused workspace: primary actions stay visible; occasional tools use disclosures. */
.topbar{height:48px;padding:0 20px}.brand{font-size:16px;gap:8px}.brand img{width:28px;height:28px;border-radius:7px}
body.workspace-open{overflow:hidden}.workspace-open .toplinks{display:none}
.workspace{height:calc(100dvh - 48px);min-height:320px;padding:12px 14px 0}
.projectbar{min-height:46px;padding:0 2px 10px;gap:16px}.project-title{gap:9px;min-width:0}.project-title>div{min-width:0}
.project-name{font-size:14px;max-width:min(38vw,340px)}#save-status{font-size:10px}
.build-controls{align-items:center;gap:8px}.build-controls>button{padding:8px 15px;font-size:12px}
.build-controls #build{background:var(--accent-soft,#eaf3ff);color:var(--accent-soft-text,#2469b5);border-color:transparent}
.build-controls #toggle-inspector{background:transparent;border-color:transparent;color:var(--text-dim,#65778e);padding:8px 10px}
.build-controls #toggle-inspector[aria-pressed=true]{background:var(--bg-hover,#edf2f8)}
.panes{border-radius:9px;box-shadow:none}.files-panel{width:190px}.code-panel{min-width:0}
.inspector{width:34%;min-width:320px}.inspector-tabs{padding:0 12px;gap:0;justify-content:space-between}
.inspector-tabs button{padding:0 7px}.tabs{height:38px;min-height:38px}.tab{font-size:12px}
.editor-footer{align-items:center;justify-content:flex-start;gap:12px;padding:3px 12px;font-size:10px;min-height:27px}
.problems{min-height:34px}.problems-heading{padding:9px 13px;font-size:11px}#check-status{font-size:10px}
.problems.collapsed{flex:none}.problems-heading>span:first-child::before{content:'▾';display:inline-block;width:14px;color:var(--text-faint,#8592a4)}
.problems.collapsed .problems-heading>span:first-child::before{content:'▸'}
.preview-heading{padding:18px 16px 12px}.preview-banner{font-size:10px;padding:0 16px 12px}
.empty-preview{padding:56px 12px;gap:10px}.empty-preview p{font-size:12px}.empty-preview kbd{font:10px inherit;color:var(--text-faint,#8797ab)}
.panel-heading{padding:3px 3px 9px}.panel-heading h2{text-transform:none;letter-spacing:0;font-size:12px;color:var(--text-dim,#65778e)}
.file-tools{display:flex;align-items:center;gap:1px}.file-tools .icon-button{font-size:18px;padding:5px}
.studio-menu{position:relative;flex:none}.studio-menu summary{display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;border:1px solid var(--line,#dde4ee);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--text-dim,#65778e);user-select:none;white-space:nowrap}
.studio-menu summary::-webkit-details-marker{display:none}.studio-menu summary:hover,.studio-menu[open]>summary{background:var(--bg-hover,#edf2f8)}
.studio-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#tools-menu>summary::after{content:'⌄';font-size:12px;margin-left:7px}
#project-menu>summary,#file-menu>summary{border-color:transparent;padding:4px 7px;font-size:20px;line-height:1}
.menu-content{position:absolute;top:calc(100% + 7px);right:0;z-index:70;min-width:220px;max-width:min(300px,calc(100vw - 28px));max-height:calc(100dvh - 150px);overflow:auto;background:var(--bg-raised,#fff);border:1px solid var(--line,#dde4ee);border-radius:10px;padding:5px;box-shadow:0 12px 36px #172b4826}
#project-menu .menu-content{right:auto;left:0}#file-menu .menu-content{right:auto;left:-150px}
.menu-content button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:9px 10px!important;font-size:12px!important;border:0;border-radius:6px;background:transparent;text-align:left;font-weight:450}
.menu-content button:hover{background:var(--bg-hover,#f1f6ff)}.menu-content button kbd{font-family:inherit;font-size:10px;color:var(--text-faint,#8998aa)}
.menu-content hr{border:0;border-top:1px solid var(--line,#e2e8f0);margin:5px}.menu-label{font-size:10px;color:var(--text-faint,#8998aa);padding:6px 10px;overflow-wrap:anywhere}
#export-project.export-stale::after{right:8px}.statusbar{min-height:27px}
.welcome{max-width:860px;padding:60px 30px 30px}.welcome h1{font-size:36px;letter-spacing:-1.2px;margin:0 0 12px}
.welcome-copy{margin:0;max-width:none}.welcome-copy>p{font-size:14px}.welcome-actions{flex-wrap:wrap;margin-top:24px}
.starter-section{margin-top:40px}.starter-grid{gap:12px}.starter{min-height:135px;padding:18px;border-radius:11px;box-shadow:none;gap:12px}
.starter strong{font-size:13px;margin:0}.starter-text{gap:7px}.starter-text>span{font-size:11px}
.text-button{border:0;background:transparent!important;color:var(--accent)!important;padding:5px 0;font-size:12px;font-weight:450}.section-heading h2{font-size:13px}
.storage-note{text-align:left;margin-top:24px}.recent{padding:16px 18px;border-radius:10px}.recent h2{margin:0 0 5px}
@media(min-width:761px){.panes.inspector-hidden .inspector,.panes.inspector-hidden #splitter{display:none}}
@media(max-width:1050px){.workspace{padding:10px 10px 0}.project-name{max-width:30vw}.inspector{min-width:295px}.files-panel{width:170px}.build-controls>button{padding:8px 12px}}
@media(max-width:760px){
  .topbar{height:48px;padding:0 14px}.workspace{height:calc(100dvh - 48px);padding:10px 8px 0;min-height:320px}
  .projectbar{gap:10px;padding-bottom:10px}.project-title{width:100%}.project-title>div{flex:1}.project-name{max-width:70vw}
  .build-controls{width:100%;justify-content:flex-end}.build-controls #build{margin-right:auto}.build-controls #toggle-inspector{display:none}
  .segmented{display:flex;align-items:center;gap:10px;background:transparent!important;padding:0 2px;margin:0 0 10px;border-radius:0}
  .segmented>span{font-size:11px;color:var(--text-dim,#65778e)}.segmented select{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--line,#dde4ee);border-radius:7px;font:12px inherit}
  .files-panel{top:184px;left:8px;bottom:27px;width:min(240px,calc(100vw - 24px));border-radius:8px;z-index:6}
  .inspector{width:100%;min-width:0}.inspector-tabs{display:none}.menu-content{max-height:calc(100dvh - 155px)}
  #project-menu .menu-content{left:auto;right:0}.welcome{padding:40px 22px 24px}.welcome h1{font-size:30px}
  .starter-grid{grid-template-columns:1fr}.starter{flex-direction:row;align-items:center;min-height:82px;padding:15px}.starter-section{margin-top:32px}
  .recent{align-items:flex-start;flex-wrap:wrap;gap:10px}.toplinks{font-size:11px}
}

[data-theme] #outline-select{background:var(--bg-sunken);color:var(--text-dim);border-color:var(--line)}

[data-theme] .project-name,[data-theme] .project-name:hover{background:transparent}

.graph-toolbar{gap:5px;padding:8px}.graph-toolbar>button{padding:6px 9px}.graph-toolbar #graph-count{min-width:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.graph-toolbar .studio-menu>summary{padding:6px 9px;font-size:11px}.graph-toolbar .graph-flow{padding:9px 10px;font-size:12px;color:var(--text-dim,#65778e)}
[data-theme] #graph-view{background:var(--graph-bg);color:var(--graph-node-text)}
[data-theme] .graph-toolbar{background:var(--bg-sunken)}
[data-theme] .gnode rect{fill:var(--graph-node-bg);stroke:var(--graph-node-border)}
[data-theme] .gnode text{fill:var(--graph-node-text)}
[data-theme] .gedge{stroke:var(--graph-edge)}[data-theme] .gedge.data{stroke:var(--accent)}
[data-theme] #graph-popover,[data-theme] #signature-hint{background:var(--bg-raised);color:var(--text);border-color:var(--line)}
[data-theme] .gpop-params{background:var(--bg-sunken)}
@media(max-width:760px){.graph-toolbar #graph-count{max-width:55px;font-size:10px}.graph-toolbar{gap:4px}.graph-spacer{min-width:0}}

/* Syntax reference tables */
.doc-table{overflow-x:auto;margin:16px 0 24px;border:1px solid #dce5f0;border-radius:10px}
.doc-table table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.doc-table th,.doc-table td{padding:10px 14px;vertical-align:top;border-bottom:1px solid #dce5f0}
.doc-table th{background:#eff4fa;font-weight:650}
.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table code{white-space:nowrap}
[data-theme] .doc-table,[data-theme] .doc-table th,[data-theme] .doc-table td{border-color:var(--line)}
[data-theme] .doc-table th{background:var(--bg-hover)}

[data-theme] .doc-code pre code{background:none;color:inherit}

/* Guided AI creation shares the Studio palette without exposing editor controls. */
.ai-workspace{max-width:760px;margin:0 auto;padding:28px 24px 70px;color:var(--text,#26354d)}
.ai-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.ai-intro h1{font-size:30px;letter-spacing:-1px;margin:10px 0 12px;line-height:1.2}
.ai-intro{text-align:center}.ai-intro p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:28px}
.ai-composer{padding:20px;border:1px solid var(--line,#dce5f0);border-radius:20px;background:var(--bg-raised,#fff);box-shadow:0 4px 24px #00000004}
.ai-composer label{display:block;font-weight:600;margin-bottom:12px}
.ai-composer textarea{display:block;width:100%;resize:vertical;min-height:100px;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;line-height:1.6;padding:0 0 18px;outline-offset:5px}
.ai-composer-footer{display:flex;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--line,#dce5f0);padding-top:15px}
.ai-composer-footer span{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.ai-status{min-height:24px;margin:18px 0;color:var(--muted);line-height:1.6}
.ai-question{border-left:3px solid var(--accent);padding:10px 20px;margin-bottom:24px;line-height:1.7}
.ai-question h2{font-size:16px;margin-bottom:8px}
.ai-result{padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--bg-raised,#fff);margin-top:24px}
.ai-result-heading{display:flex;gap:16px;justify-content:space-between;align-items:center;margin-bottom:16px}
.ai-result h2{font-size:22px;margin-top:8px;letter-spacing:-.6px}
.ai-result-actions{display:flex;gap:8px;flex-wrap:wrap}
.ai-check-label{font-size:11px;color:var(--accent);font-weight:600}.ai-check-label.needs-changes{color:#b97b20}
#ai-summary{font-size:14px;line-height:1.7;margin-bottom:22px}
#ai-requirements{border:1px solid var(--line,#dce5f0);border-radius:12px;padding:16px 18px;line-height:1.7}
#ai-requirements h3,.ai-preview h3{font-size:14px;margin-bottom:8px}
.ai-preview-note{font-size:12px;color:var(--muted);margin:20px 0 16px}
.ai-preview ol{list-style:none;counter-reset:action;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}.ai-preview li{counter-increment:action;position:relative;padding:14px 16px 14px 48px;border-bottom:1px solid var(--line);background:var(--bg-sunken,#f8f9fc)}.ai-preview li:last-child{border-bottom:0}.ai-preview li::before{content:counter(action);position:absolute;left:16px;top:14px;font-size:11px;color:var(--text-dim,#748195);line-height:18px}.ai-preview summary{font-weight:500;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}.ai-preview summary::-webkit-details-marker{display:none}.ai-preview summary::after{content:"›";font-size:18px;color:var(--text-dim,#748195);line-height:16px;transition:transform .15s}.ai-preview details[open] summary::after{transform:rotate(90deg)}.ai-preview h3{display:flex;justify-content:space-between;align-items:center}.ai-preview h3 span{font-size:11px;color:var(--text-dim,#748195);font-weight:400}
.ai-preview dl{margin:8px 0 0;font-size:12px;line-height:1.6}.ai-preview dl div{display:flex;gap:12px}.ai-preview dt{color:var(--muted);min-width:110px}.ai-preview dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap;min-width:0}
#ai-connect-dialog{width:min(480px,calc(100vw - 32px))}#ai-connect-form>label{display:block;font-weight:600;margin:18px 0 7px}#ai-connect-form>input,#ai-connect-form>select{width:100%;padding:10px;border:1px solid var(--line,#dce5f0);border-radius:8px;background:var(--bg-raised,#fff);color:inherit}#ai-connect-form .muted{font-size:12px;line-height:1.7;margin-top:12px}#ai-connect-status{margin-top:14px;line-height:1.6}
@media(max-width:700px){.ai-workspace{padding:22px 16px 50px}.ai-heading{margin-bottom:28px}.ai-intro h1{font-size:28px}.ai-result-heading{align-items:flex-start;flex-direction:column}.ai-composer-footer{align-items:flex-start;flex-direction:column}.ai-composer-footer button{width:100%}.ai-preview dl div{flex-direction:column;gap:2px}.ai-preview dt{min-width:0}}

/* Guided controls use the same contrast tokens as the editor themes. */
.ai-composer textarea::placeholder{color:var(--text-dim,#68768b);opacity:1}
.ai-composer textarea:focus-visible{outline:none}
[data-theme] .ai-intro p,[data-theme] .ai-status,[data-theme] .ai-preview-note,[data-theme] .ai-composer-footer span,[data-theme] .ai-preview dt{color:var(--text-dim)}
[data-theme] #ai-connect-form>input,[data-theme] #ai-connect-form>select{background:var(--input-bg);border-color:var(--input-border);color:var(--input-text)}
[data-theme] #ai-connect-form input::placeholder{color:var(--text-dim);opacity:1}
[data-theme] .ai-check-label.needs-changes{color:var(--warn)}

/* A focused starting point, with secondary tools kept quiet. */
.welcome{max-width:960px;padding-top:56px}.welcome h1{font-size:42px;letter-spacing:-1.7px}.welcome-secondary{display:flex;gap:18px;margin-top:18px}.welcome-secondary button{padding:2px 0;font-size:12px}.welcome-actions button{min-height:44px;border-radius:12px;padding:12px 22px}.welcome .starter-section{margin-top:36px}
.ai-mark{width:52px;height:52px;border-radius:16px;background:var(--accent-soft,#e7f1ff);color:var(--accent);display:grid;place-items:center;margin:0 auto 18px}.ai-mark svg{width:30px;height:30px}.ai-heading #ai-connection{border:1px solid var(--line);background:var(--bg-raised,#fff);border-radius:24px;padding:8px 14px;font-size:12px;color:var(--text,#334155)}
.ai-workspace button{min-height:38px;border-radius:10px}.ai-composer label{font-size:12px;color:var(--text-dim,#68768b);font-weight:500}.ai-composer textarea{min-height:90px;font-size:15px;line-height:1.6}.ai-check-label{color:var(--ok,#23794b);display:inline-flex;align-items:center;gap:5px}.ai-check-label::before{content:"✓"}.ai-check-label.needs-changes::before{content:"!"}.ai-preview-note{line-height:1.5}.ai-result #ai-edit{border:0;background:transparent;color:var(--accent);font-size:12px;padding:8px}.ai-composer:focus-within{border-color:var(--accent)}
#ai-connect-dialog{border-radius:20px;padding:24px}#ai-connect-dialog .dialog-heading h2{font-size:20px;letter-spacing:-.4px}#ai-connect-form .dialog-actions{margin-top:20px}#ai-connect-form .dialog-actions button{border-radius:10px;min-height:40px}
@media(max-width:700px){.welcome{padding-top:32px}.welcome h1{font-size:34px}.welcome-secondary{flex-wrap:wrap}.ai-result{padding:18px}.ai-result-heading{gap:12px}.ai-result-actions{width:100%;flex-direction:row-reverse;justify-content:flex-end}.ai-intro h1{font-size:27px}.ai-composer-footer span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.ai-preview summary::after{transition:none}}

#ai-connect-form>select{min-height:40px;font:inherit}#ai-connect-form>input{min-height:40px}.ai-composer textarea{caret-color:var(--accent)}

.ai-workspace.has-draft .ai-intro{display:none}.ai-workspace.has-draft .ai-heading{margin-bottom:20px}

.ai-shortcut-identity{display:flex;align-items:center;gap:14px;min-width:0}.ai-shortcut-icon{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;color:white}.ai-shortcut-icon svg{width:30px;height:30px}.ai-shortcut-identity h2{overflow-wrap:anywhere}