/* Editing surface: quiet chrome, a consistent stroke family and generous canvas. */
.workbench{--studio-bg:#0d0d10;--studio-surface:#19191e;--studio-border:#303036;--studio-muted:#919099;--studio-accent:#c4a5e4}
.workbench button,.workbench input,.workbench textarea{font-family:inherit}
.workbench button:focus-visible,.workbench a:focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
.workbench .editor-top{height:50px;min-height:50px;background:#111114;border-color:#26262c;padding:0 18px}
.workbench .editor-name{font-size:12px;font-weight:550;width:240px;padding:6px 8px}
.workbench .editor-top-actions .btn{min-height:30px;padding:6px 10px;font-size:11px;border-radius:6px;box-shadow:none;background:#29252f;border:1px solid #403747;color:#e4d5f2}
.workbench .editor-top-actions .btn.light{background:transparent;border-color:#303036;color:#aaa8b3}
.workbench .editor-top-actions .icon-btn{width:28px;height:28px;color:#9996a3}
.workbench .editor-layout{grid-template-columns:minmax(0,1fr) clamp(320px,27vw,400px);gap:8px;padding:0 8px 8px 0}
.workbench .editor-workspace{position:relative;padding:0;overflow:hidden;background:#0d0d10 radial-gradient(#35353d .75px,transparent .8px);background-size:18px 18px}
.workbench .board-top{height:53px;min-height:53px;padding:0 14px;gap:8px;z-index:25;flex-wrap:nowrap}
.board-label{display:none}
.board-item-controls,.composition-top{display:flex;gap:7px;align-items:center;min-width:0}
.composition-top{margin-left:auto}
.workbench .board-top>.icon-btn{width:28px;height:28px;color:#8c8995}
.workbench .canvas-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:6px 9px;border:1px solid #34343c;border-radius:6px;background:#222227;color:#bcbac4;font-size:11px;font-weight:500;line-height:1.3;cursor:pointer;white-space:nowrap;box-shadow:none}
.workbench .canvas-button:hover{background:#303037;color:#f2eff6;border-color:#48454f}
.workbench .canvas-button svg{width:14px;height:14px;flex:none}
.workbench .canvas-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;padding:0;border:0;border-radius:6px;background:transparent;color:#a4a1ad;cursor:pointer;box-shadow:none;flex:none;text-decoration:none}
.workbench .canvas-icon svg{width:18px;height:18px;flex:none}
.workbench .canvas-icon:hover,.workbench .canvas-icon[aria-pressed=true]{color:#f2e6ff;background:#39323f}
.workbench .canvas-icon:disabled{opacity:.35;cursor:default}
.canvas-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(3px);padding:6px 8px;border:1px solid #45414e;border-radius:5px;background:#27232e;box-shadow:0 4px 15px #0005;color:#eee8f6;font-size:11px;line-height:1.4;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:80}
.canvas-icon:hover .canvas-tooltip,.canvas-icon:focus-visible .canvas-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}
.board-top .canvas-tooltip{top:calc(100% + 10px);bottom:auto;left:auto;right:0;transform:none}
.board-view-switch{display:flex;align-items:center;gap:2px;border:1px solid #38383e;background:#202024;padding:3px;border-radius:7px}
.board-view-switch button{display:flex;align-items:center;gap:5px;height:26px;padding:0 8px;background:transparent;border:0;border-radius:4px;color:#8f8c98;font-size:11px;cursor:pointer}
.board-view-switch button svg{width:13px;height:13px}
.board-view-switch button[aria-pressed=true]{background:#3b3a42;color:#f1eff5;box-shadow:0 1px 3px #0003}
.workbench .editor-canvas{position:relative;flex:1;min-height:0;overflow:auto;padding:20px 40px 34px;display:flex;align-items:center;justify-content:center}
.workbench .editor-device{border:1px solid #46414e;border-radius:12px;box-shadow:0 12px 45px #0005;background:#17141c;transform-origin:center;transition:transform .15s;height:min(100%,620px);max-width:100%}
.workbench .editor-device.landscape{border-radius:10px;width:min(100%,860px);height:auto}
.workbench .editor-device[hidden]{display:none!important}
.workbench .editor-device.blank-device{box-shadow:none;border:1px dashed #343139;background:#121115}
.workbench .blank-canvas{padding:24px}.workbench .blank-canvas h2{font-size:16px;font-weight:550;max-width:270px;line-height:1.5}.workbench .blank-canvas p{font-size:11px;color:#827d8c}.workbench .blank-canvas>svg{width:25px;height:25px;opacity:.5}
.workbench .canvas-dock{display:flex;position:relative;bottom:auto;align-self:center;align-items:center;gap:4px;flex:none;padding:4px 7px;border:1px solid #2d2d34;border-radius:7px;background:#17171c;box-shadow:none;margin:0 0 79px;height:34px}
.workbench .canvas-dock>button,.workbench .device-switch button{display:flex;align-items:center;gap:5px;min-height:25px;padding:4px 7px;background:transparent;border:0;color:#96929f;font-size:10px;border-radius:4px;cursor:pointer}
.workbench .canvas-dock svg{width:13px;height:13px}.workbench .canvas-dock>button:hover,.workbench .device-switch button:hover{background:#2b2832;color:#e8dff1}.workbench .device-switch button.active{background:#38303f;color:#e4d3f3}
.canvas-separator,.workbench .dock-divider{width:1px;height:18px;background:#414047;margin:0 5px;flex:none}
.workbench .creation-dock{display:flex;align-items:center;justify-content:center;gap:4px;position:absolute;bottom:23px;left:50%;transform:translateX(-50%);padding:7px 9px;background:#27262d;border:1px solid #3c3b44;border-radius:10px;box-shadow:0 8px 25px #0005;z-index:35;width:max-content;max-width:calc(100% - 24px)}
.workbench .creation-dock .canvas-icon{width:34px;height:34px}
.canvas-viewport-controls{position:absolute;right:15px;bottom:28px;display:flex;align-items:center;background:#222126;border:1px solid #34323b;border-radius:6px;z-index:30}
.workbench .canvas-viewport-controls .canvas-icon{width:24px;height:28px;min-width:24px}.canvas-viewport-controls svg{width:13px!important;height:13px!important}
.zoom-value{background:none;border:0;color:#aaa5b4;min-width:42px;height:28px;padding:0 5px;font-size:11px;cursor:pointer}
.workbench .canvas-hint{position:absolute;bottom:5px;left:0;right:0;font-size:9px;color:#686370;pointer-events:none}
.creation-dock[hidden],.canvas-viewport-controls[hidden]{display:none!important}
.workbench-panel{border:1px solid #343039;border-radius:9px;margin:0;background:#131316;box-shadow:none;overflow:hidden}
.workbench .panel-cap{height:40px;min-height:40px;padding:0 14px;background:linear-gradient(180deg,#352041,#21182b 65%,#18141f);color:#ddd1e9;letter-spacing:0;font-size:12px}
.panel-cap strong{font-weight:550}.panel-cap svg{width:15px;height:15px}.panel-live-dot{background:#a58cbb;box-shadow:none}
.workbench .editor-rail{padding:6px 9px;gap:2px;background:#151418;border-bottom:1px solid #27252d}
.workbench .editor-rail button{padding:8px 3px;font-size:10px;gap:4px;color:#87828f;min-height:31px}
.workbench .editor-rail button.active{background:#2a2432;color:#d8c0ec}.workbench .editor-rail svg{width:13px;height:13px}
.workbench .editor-settings{padding:18px 15px;background:#131316;scrollbar-color:#39343f transparent}
.workbench .panel-save{padding:9px 13px;border-top:1px solid #26232c;background:#151418;min-height:46px}.workbench .panel-save .save-state{font-size:10px;color:#aaa2b3}.workbench .panel-save small{font-size:9px;color:#6f687b}
.panel-eyebrow{display:block;color:#7d738b;font-size:9px;font-weight:550;letter-spacing:1.1px;margin-bottom:9px}.workbench .panel-intro{padding:0 0 17px}.workbench .panel-intro h2{font-size:16px;font-weight:550;letter-spacing:-.3px}.workbench .panel-intro h2 small{font-size:11px;font-weight:400;color:#82728f;margin-left:6px}.workbench .panel-intro p{color:#8c8496;font-size:11px;line-height:1.7;margin:8px 0 0}
.workbench .editor-settings:has(.agent-thread){display:flex;flex-direction:column;gap:0;padding:14px 12px 10px}
.workbench .agent-mode{display:none}.workbench .agent-thread{flex:1;min-height:130px;overflow:auto;padding:10px 3px 22px}
.workbench .agent-welcome{padding:28px 10px 20px;text-align:left}.workbench .agent-welcome>svg{width:24px;height:24px;color:#a18bb4;margin-bottom:19px}.workbench .agent-welcome h2{font-size:23px;line-height:1.35;font-weight:500;color:#e4dce9;letter-spacing:-.7px}.workbench .agent-welcome p{font-size:12px;line-height:1.75;color:#86808e;max-width:290px;margin:13px 0 22px}.workbench .agent-welcome>div{display:flex;gap:6px;flex-wrap:wrap}.workbench .agent-welcome button{border:1px solid #323039;background:#1e1c22;border-radius:6px;padding:8px 9px;color:#b1a6bd;font-size:10px;text-align:left}
.workbench .agent-message{font-size:12px;border:1px solid #2b2932;border-radius:9px;background:#1b1920;padding:11px 12px;margin:9px 0}.workbench .agent-message.user{margin-left:28px;background:#18262f;border-color:#1e3645}.workbench .agent-message small{font-size:8px;letter-spacing:.6px;color:#8d819c}.workbench .agent-message p{font-size:12px;line-height:1.65}
.workbench .agent-mcp-info{background:transparent;border:0;padding:7px 4px;color:#77707f;font-size:9px;line-height:1.5}.workbench .agent-mcp-info>svg{width:13px;height:13px}.workbench .agent-mcp-info button{color:#8c8099}
.workbench .agent-composer{background:#202025;border:1px solid #36323e;border-radius:9px;padding:9px;box-shadow:0 3px 12px #0003;margin:0}.workbench .agent-composer:focus-within{border-color:#766087;box-shadow:0 0 0 2px #b58acf0d}
.workbench .agent-composer .agent-prompt{padding:3px 2px;min-height:66px;font-size:12px;line-height:1.6;color:#e2dbe9;background:transparent;border:0;resize:vertical}.workbench .agent-prompt::placeholder{color:#8b8495}.workbench .agent-composer>div:last-child{display:flex;align-items:center;gap:7px;padding-top:5px}.workbench .agent-composer>div:last-child small{color:#756d81;font-size:9px;flex:1}.workbench .agent-composer [data-act=agent-send]{width:28px;height:28px;border:1px solid #51405e;background:#483454;border-radius:6px;color:#eee0fa;display:grid;place-items:center}.workbench .agent-composer [data-act=agent-send] svg{width:15px;height:15px}.workbench .agent-refresh{font-size:9px;color:#7c7188;padding:10px 0 0;margin:0}
.attachment-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 0 7px}.attachment-chip{display:flex;align-items:center;gap:5px;border:1px solid #403847;border-radius:5px;background:#2b2631;padding:3px 3px 3px 7px;min-width:0;max-width:100%;font-size:10px;color:#b9a8ca}.attachment-chip>svg{width:13px;height:13px;flex:none}.attachment-chip a{color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}.workbench .attachment-chip .canvas-icon{width:21px;height:21px;min-width:21px}.attachment-chip .canvas-icon svg{width:12px;height:12px}.agent-attachments{max-height:100px;overflow:auto}.agent-attachments:empty{display:none}
.layer-list{display:grid;gap:4px}.workbench .layer-row{display:flex;align-items:center;gap:9px;width:100%;padding:10px 9px;border:1px solid transparent;background:#1a181e;border-radius:6px;text-align:left;color:#a59aae;font-size:11px;cursor:pointer}.layer-row>svg{width:16px;height:16px;flex:none}.layer-row>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row small{font-size:8px;color:#71677d}.workbench .layer-row.selected{border-color:#564362;background:#302438;color:#e2ccef}
.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;border-top:1px solid #2d2734;padding-top:18px;margin-top:20px}.inspector-heading>span{font-size:8px;letter-spacing:.8px;color:#82728d}.inspector-heading>div{display:flex;gap:0}.workbench .inspector-heading .canvas-icon{width:27px;height:27px;min-width:27px}.inspector-heading svg{width:14px!important;height:14px!important}
.layer-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 10px;margin:15px 0}.layer-fields label{display:grid;gap:7px;font-size:10px;color:#91829d;min-width:0}.layer-fields .field-wide{grid-column:1/-1}.layer-fields input,.layer-fields textarea,#canvas-comment{box-sizing:border-box;width:100%;background:#1d1923;color:#dcd1e5;border:1px solid #39303f;padding:9px;border-radius:5px;font:inherit;font-size:11px;outline:none}.layer-fields input:focus,.layer-fields textarea:focus,#canvas-comment:focus{border-color:#826490}.layer-fields textarea{min-height:70px;resize:vertical}.number-field{display:flex;align-items:center;border:1px solid #39303f;background:#1d1923;border-radius:5px}.number-field:focus-within{border-color:#826490}.number-field input{border:0;background:transparent;min-width:0;padding:8px}.number-field small{padding-right:8px;font-size:9px;color:#756981}.layer-fields input[type=color]{height:32px;padding:4px}
.comment-compose{border:1px solid #3a3043;border-radius:8px;background:#201a27;padding:9px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}#canvas-comment{border:0;background:transparent;resize:vertical;min-height:70px;padding:2px}.canvas-comment{padding:15px 0;border-bottom:1px solid #2b2432}.comment-meta{display:flex;align-items:center;gap:7px;font-size:10px;color:#b3a3bf}.comment-avatar{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#33273f;color:#b595d1}.comment-avatar svg{width:13px;height:13px}.comment-meta>span:nth-child(2){flex:1}.comment-meta time{display:block;font-size:9px;color:#776983;margin-top:3px}.workbench .comment-meta .canvas-icon{width:25px;height:25px;min-width:25px}.comment-meta svg{width:13px!important;height:13px!important}.canvas-comment p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7;margin:11px 0 0;color:#c7b9d2}.canvas-comment.resolved p{opacity:.5;text-decoration:line-through}
.workbench .editor-canvas.gallery-open{display:block;padding:18px 28px 70px;container-type:normal}.board-gallery{width:100%;max-width:1100px;margin:0 auto}.gallery-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0 25px}.gallery-heading h2{font-size:21px;font-weight:500;letter-spacing:-.5px;margin:0;color:#ded6e5}.gallery-heading p,.gallery-footnote{font-size:11px;color:#8b8196;line-height:1.7}.board-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px}.gallery-file{background:#1a1720;border:1px solid #34303b;border-radius:9px;overflow:hidden}.gallery-preview{height:140px;background:#211d28;position:relative;display:grid;place-items:center}.gallery-preview>svg{width:32px;height:32px;color:#6f5b80}.gallery-preview img{width:100%;height:100%;object-fit:contain}.gallery-preview>span{position:absolute;bottom:8px;left:8px;font-size:8px;letter-spacing:.6px;background:#17131ed9;padding:4px 6px;color:#b8a6c8;border-radius:4px}.gallery-file-meta{padding:12px 12px 4px;display:grid;gap:5px}.gallery-file-meta strong{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d3c6df}.gallery-file-meta small,.gallery-file-actions>small{font-size:9px;color:#80718d}.gallery-file-actions{padding:8px 10px 10px;display:flex;align-items:center;gap:4px}.gallery-file-actions>:first-child{margin-right:auto}.gallery-file-actions .canvas-button{font-size:10px;min-height:27px;padding:4px 6px}.workbench .gallery-file-actions .canvas-icon{width:25px;height:25px;min-width:25px}.gallery-file-actions svg{width:13px!important;height:13px!important}.gallery-footnote{margin-top:22px}
.canvas-empty{text-align:center;padding:34px 12px;color:#80728d;font-size:11px;line-height:1.8}.canvas-empty>svg{width:28px;height:28px;color:#796387;margin:0 auto 12px;display:block}.canvas-empty h3{font-weight:500;font-size:14px;color:#bfb0cc;margin:0 0 7px}.canvas-empty p{margin:5px auto 16px;max-width:260px}.canvas-empty .canvas-button{margin-top:9px}
.history-current{display:flex;justify-content:space-between;padding:17px 0;border-bottom:1px solid #302637;color:#a695b3;font-size:11px}.history-current strong{color:#cfacdf}.history-row{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid #29212f}.history-dot{width:7px;height:7px;margin-top:5px;border-radius:50%;background:#8c689f;flex:none}.history-row strong{display:block;font-size:12px;color:#c9b8d7;font-weight:500}.history-row time,.history-row small{display:block;font-size:10px;color:#847190;margin-top:5px}.history-row>div>div{display:flex;gap:7px;margin-top:12px}.history-error{color:#e2a2a2;font-size:11px;line-height:1.6}
.review-banner{padding:5px 14px;background:#21182a;color:#9c88ac;font-size:10px;text-align:center;line-height:1.5;flex:none}
.composition-overlay{isolation:isolate}
@media(min-width:1500px){.workbench .editor-layout{grid-template-columns:minmax(0,1fr) 390px}.workbench .editor-settings{padding:20px 18px}}
@media(max-width:1200px){.workbench .editor-layout{grid-template-columns:minmax(0,1fr) 310px}.board-item-controls .canvas-button span{display:none}.board-item-controls .canvas-button{padding:7px}.composition-top{gap:4px}.workbench .board-top{padding:0 9px;gap:4px}.workbench .canvas-viewport-controls{bottom:87px;right:12px}.workbench .canvas-dock{margin-bottom:83px}}
@media(max-width:850px){.workbench .editor-layout{grid-template-columns:minmax(0,1fr) 290px;padding-right:5px;gap:4px}.workbench .editor-canvas{padding:15px 18px 24px}.composition-top>.canvas-button span{display:none}.board-view-switch button{padding:0 6px}.board-view-switch button span{font-size:10px}.workbench .creation-dock{gap:2px;padding:6px;bottom:22px}.workbench .creation-dock .canvas-icon{width:30px;min-width:30px;height:34px}.canvas-separator{margin:0 3px}.workbench .canvas-dock{gap:2px}.workbench .canvas-dock>button span{display:none}.workbench .canvas-dock>button{padding:5px}.workbench .editor-settings{padding:14px 12px}}
@media(max-width:600px){.workbench .editor-layout{display:block;padding:0}.workbench .editor-top{min-height:48px;height:48px;padding:0 9px}.workbench .editor-top-actions .btn{padding:6px}.workbench .editor-name{width:140px}.workbench .editor-layout .workbench-panel{border-radius:0;border-width:0}.workbench .editor-layout .editor-workspace{height:100%}.workbench .editor-settings:has(.agent-thread){display:flex!important}.workbench .board-top{height:48px;min-height:48px;padding:0 10px}.workbench .board-top>.icon-btn{display:none}.board-item-controls .canvas-button{min-width:34px;min-height:34px}.board-view-switch button{height:29px;padding:0 7px}.composition-top>.canvas-button{height:34px;min-width:34px}.workbench .creation-dock{gap:0;max-width:calc(100% - 12px);padding:3px;bottom:17px}.workbench .creation-dock .canvas-icon{width:40px;min-width:40px;height:44px}.canvas-separator{margin:0 2px;height:18px}.workbench .canvas-dock{margin-bottom:81px}.workbench .canvas-viewport-controls{bottom:88px;right:8px}.workbench .canvas-hint{font-size:8px;bottom:1px}.workbench .editor-canvas{padding:12px 15px 22px}.workbench .editor-device{max-height:100%}.workbench .editor-canvas.gallery-open{padding:14px 14px 30px}.board-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-heading{align-items:flex-start;gap:10px}.gallery-heading h2{font-size:17px}.gallery-preview{height:100px}.gallery-file-actions{flex-wrap:wrap}.gallery-file-actions .canvas-button{font-size:9px}.canvas-tooltip{display:none}.workbench .mobile-editor-tabs{background:#17131c;border-color:#332a3b}.workbench .mobile-editor-tabs button.active{background:#34283f}}
@media(prefers-reduced-motion:reduce){.workbench *{transition:none!important}}
.demo-sidebar .panel-eyebrow{margin:30px 8px 12px}.demo-project-link{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #45404e;background:#302a38;border-radius:6px;font-size:12px;color:#e2d8ec}.demo-project-link small{font-size:8px;color:#a58bb8;letter-spacing:.7px}.demo-sidebar>.subtext{padding:8px;font-size:11px;line-height:1.8;color:#8a7e97}.demo-sidebar>a:last-child{margin-top:auto;padding:10px;font-size:11px;color:#ac98bc}
.workbench .editor-workspace:has(.gallery-open) .canvas-dock,.workbench .editor-workspace:has(.gallery-open) .canvas-hint{display:none!important}