.canvas-page main{max-width:1580px;padding:0 24px}.canvas-page .site-header{max-width:1580px}.canvas-heading{display:flex;align-items:center;justify-content:space-between;padding:25px 0 21px;gap:15px}.canvas-heading a{font-size:11px;color:#8a6578}.canvas-heading h1{font-size:29px;letter-spacing:-1px;margin:13px 0 0}.canvas-heading>span{font-size:9px;letter-spacing:1.6px;color:#a0768b}#canvas-app{border:1px solid #e4dce2;border-radius:14px;background:white;overflow:hidden;margin-bottom:35px;font-size:12px}#canvas-app button,#canvas-app select{border:1px solid #e5dce2;background:white;border-radius:6px;padding:8px 11px;font:inherit;color:#553d4c;min-height:34px}#canvas-app button:hover{background:#f6edf2}#canvas-app button:focus-visible,#canvas-app select:focus-visible,#canvas-app input:focus-visible,#canvas-app textarea:focus-visible{outline:2px solid #b84970;outline-offset:2px}#canvas-app .primary{background:#47303e;color:white}#canvas-app .primary:hover{background:#76495f}.canvas-topbar{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:center;flex-wrap:wrap}.canvas-topbar>input{font-size:14px;font-weight:650;border:0;border-bottom:1px solid transparent;padding:8px;width:220px;min-width:150px;color:#493442}.canvas-topbar>input:focus{border-color:#b84970}.canvas-topbar>div{display:flex;gap:6px}.canvas-exports{margin-left:auto}.canvas-layout{display:grid;grid-template-columns:184px minmax(0,1fr) 218px}.canvas-library,.canvas-inspector{padding:18px 14px;background:#fffeff;min-width:0}.canvas-library{border-right:1px solid var(--line)}.canvas-inspector{border-left:1px solid var(--line)}#canvas-app h2{font-size:12px;margin:0 0 16px}#canvas-app h3{font-size:10px;font-weight:500;color:#9b7c8e;margin:20px 0 12px}.canvas-modes{display:flex;flex-wrap:wrap;gap:5px}#canvas-app .canvas-modes button{font-size:10px;padding:6px 8px}#canvas-app button[aria-pressed=true]{color:#9e4168;border-color:#cf91ad;background:#f9eaf1}.canvas-shapes{display:grid;grid-template-columns:1fr 1fr;gap:7px}#canvas-app .canvas-shapes button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 4px;font-size:9px;min-height:66px;cursor:grab}#canvas-app .canvas-shapes b{font-size:25px;font-weight:400;color:#a86b88}.canvas-library>label{display:block;font-size:10px;margin:22px 0 8px}.canvas-library>select{width:100%;font-size:10px!important;padding:8px 3px!important}.canvas-library>#canvas-load-template{width:100%;margin-top:8px;font-size:10px}.canvas-small{font-size:10px;line-height:1.7;color:#9b8492}.canvas-library details{border-top:1px solid var(--line);margin-top:20px;padding-top:15px;font-size:10px;line-height:1.8;color:#897381}#canvas-app summary{cursor:pointer;color:#816376;font-weight:600;font-size:10px}.canvas-center{min-width:0;background:#f7f4f7}.canvas-viewbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;gap:10px;border-bottom:1px solid var(--line)}.canvas-viewbar>div{display:flex;align-items:center;gap:5px}#canvas-app .canvas-viewbar button{font-size:11px;padding:3px 9px;min-height:28px}#canvas-zoom{font-size:10px;color:#9b8091;margin-left:7px}.canvas-viewbar label{font-size:10px;display:flex;gap:3px;align-items:center;white-space:nowrap}.canvas-viewbar input{accent-color:#ae5c83}.canvas-center #canvas-stage{height:560px;overflow:auto;position:relative;padding:28px;outline-offset:-3px;touch-action:none;background:#ede9ee;overscroll-behavior:contain}#canvas-paper{width:max-content;box-shadow:0 4px 22px #4c324311;line-height:0;margin:auto}#canvas-paper>svg{display:block;touch-action:none;background:white}#canvas-paper [data-node]{cursor:move}#canvas-paper [data-edge]{cursor:pointer}#canvas-paper [data-resize]{cursor:nwse-resize}#canvas-stage[data-mode=pan],#canvas-stage[data-mode=pan] [data-node]{cursor:grab}#canvas-stage[data-mode=connect] [data-node]{cursor:crosshair}#canvas-paper text{user-select:none}.canvas-bottom{padding:10px 14px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#947288;min-height:36px;background:#fcfafc}.canvas-bottom span:last-child{white-space:nowrap}.canvas-selection-actions{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}#canvas-app .canvas-selection-actions>*{font-size:10px}.canvas-inspector label{display:block;font-size:10px;color:#8b6a7c;margin:12px 0 6px}.canvas-inspector input:not([type=checkbox]),.canvas-inspector textarea,.canvas-inspector select{width:100%;border:1px solid #e5dce3;border-radius:5px;padding:8px;font:inherit;background:#fff;color:#4c3442}.canvas-inspector textarea{min-height:108px;resize:vertical;font-size:12px;line-height:1.5}.canvas-inspector input[type=color]{height:33px;padding:4px}.canvas-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.canvas-inspector button{font-size:10px!important;margin:5px 3px 3px 0}.canvas-inspector .canvas-check{display:flex;align-items:center;gap:5px}.canvas-page-settings{border-block:1px solid var(--line);padding:17px 0;margin:20px 0}.canvas-layers>div{max-height:210px;overflow:auto;padding-top:9px}#canvas-app .canvas-layer{width:100%;display:block;text-align:left;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0;padding:6px 8px;min-height:28px}.canvas-layers .canvas-layer.selected{background:#f8e6ef!important;border-color:#cc86a7!important}.canvas-footnote{border-top:1px solid var(--line);padding:13px 18px;color:#9b8291;font-size:10px;line-height:1.6}#canvas-error{margin:8px 14px;background:#fff0f3;color:#a03e61;padding:12px;border:1px solid #e8b2c5;border-radius:6px;font-size:11px;line-height:1.7}.canvas-feature{background:#f2eaf5;border:1px solid #e2d5e7;border-radius:14px;padding:27px 32px;margin:25px 0 0;display:flex;align-items:center;justify-content:space-between;gap:25px}.canvas-feature h2{font-size:24px;margin:0 0 8px;letter-spacing:-.6px}.canvas-feature p{font-size:13px;color:#897182;line-height:1.7;margin:0}.canvas-feature .primary{white-space:nowrap}.studio-canvas-link{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:12px 14px;background:#f2eaf5;border-radius:7px;font-size:11px;color:#905676;margin-bottom:16px}.studio-canvas-link button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}.canvas-hint{font-size:11px;color:#95828e;line-height:1.8}#canvas-properties .empty-inspector{padding:14px;border:1px dashed #dfcfda;border-radius:7px;line-height:1.8;color:#9a8290;font-size:11px}
@media(min-width:1550px){.canvas-center #canvas-stage{height:660px}.canvas-layout{grid-template-columns:200px minmax(0,1fr) 240px}}
@media(max-width:1100px){.canvas-layout{grid-template-columns:155px minmax(0,1fr) 195px}.canvas-library,.canvas-inspector{padding:15px 10px}.canvas-viewbar{padding:8px}.canvas-heading h1{font-size:26px}.canvas-heading>span{display:none}.canvas-topbar{gap:9px}}
@media(max-width:800px){.canvas-page main{padding:0 12px}.canvas-layout{grid-template-columns:1fr}.canvas-library{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px}.canvas-library>h2{display:none}.canvas-library .canvas-modes{grid-column:1/-1}.canvas-library h3{display:none}.canvas-shapes{display:flex;overflow:auto;grid-column:1/-1;gap:7px}#canvas-app .canvas-shapes button{min-width:66px;min-height:58px}.canvas-library>label{display:none}.canvas-library>select{min-width:0}.canvas-library>#canvas-load-template{margin:0}.canvas-library .canvas-small,.canvas-library details{display:none}.canvas-inspector{border-left:0;border-top:1px solid var(--line);padding:18px}.canvas-inspector textarea{min-height:78px}.canvas-center #canvas-stage{height:430px;padding:20px}.canvas-heading{padding:22px 0}.canvas-heading h1{font-size:25px}.canvas-topbar>input{flex:1;width:160px}.canvas-file-actions{flex:1}.canvas-topbar{padding:10px}.canvas-exports{margin:0}#canvas-app .canvas-topbar button{font-size:10px;padding:8px}.canvas-bottom{font-size:9px}.canvas-feature{padding:23px;display:block}.canvas-feature .primary{margin-top:18px}.canvas-feature h2{font-size:22px}.canvas-viewbar label{font-size:9px}.canvas-inspector input:not([type=checkbox]),.canvas-inspector textarea{font-size:16px}}
.canvas-commandbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid #e6dde4;background:#fcfafc}.canvas-command-group{display:flex;gap:4px;padding-right:10px;border-right:1px solid #e4dbe2}.canvas-command-group:last-child{margin-left:auto;border:0;padding:0}#canvas-app .canvas-commandbar button{font-size:10px;padding:5px 9px;min-height:29px}#canvas-app button:disabled{opacity:.4;cursor:not-allowed}.canvas-viewbar{height:auto;min-height:48px;flex-wrap:wrap}.canvas-viewbar>div{flex-wrap:wrap}#canvas-app #canvas-routing{font-size:10px;padding:5px;min-height:28px;max-width:135px}.canvas-center{position:relative}.canvas-overview{position:absolute;right:15px;bottom:92px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:5px}#canvas-app #canvas-overview-toggle{font-size:9px;padding:4px 8px;min-height:25px;background:#fffffff2}#canvas-minimap{border:1px solid #d9c4d1;background:#fff;box-shadow:0 3px 16px #5e385126;cursor:crosshair}#canvas-minimap[hidden]{display:none}#canvas-paper [data-port]{cursor:crosshair}#canvas-paper [data-handle=n],#canvas-paper [data-handle=s]{cursor:ns-resize}#canvas-paper [data-handle=w],#canvas-paper [data-handle=e]{cursor:ew-resize}#canvas-paper [data-handle=nw],#canvas-paper [data-handle=se]{cursor:nwse-resize}#canvas-paper [data-handle=ne],#canvas-paper [data-handle=sw]{cursor:nesw-resize}#canvas-stage.is-panning,#canvas-stage.is-panning [data-node]{cursor:grab}.canvas-context-menu{position:fixed;z-index:1000;width:225px;background:#fff;border:1px solid #e0d2db;border-radius:8px;padding:6px;box-shadow:0 10px 35px #42233326}.canvas-context-menu[hidden]{display:none}.canvas-context-menu button{display:flex;justify-content:space-between;gap:20px;width:100%;border:0;background:none;padding:10px 9px;border-radius:4px;font-size:12px;text-align:left;color:#553d4c}.canvas-context-menu button:hover{background:#f7eaf1}.canvas-context-menu button:disabled{opacity:.35}.canvas-context-menu kbd{color:#9b8391;font:10px Arial}.canvas-focused{overflow:hidden}.canvas-focused #canvas-app{position:fixed;inset:10px;z-index:100;margin:0;display:flex;flex-direction:column;box-shadow:0 0 0 20px #fcfaf9}.canvas-focused .canvas-layout{flex:1;min-height:0}.canvas-focused .canvas-library,.canvas-focused .canvas-inspector{overflow:auto}.canvas-focused .canvas-center{display:flex;flex-direction:column;min-height:0}.canvas-focused .canvas-center #canvas-stage{height:auto;min-height:0;flex:1}.canvas-focused .canvas-footnote{padding:7px 16px}.canvas-focused .canvas-topbar{padding:8px 14px}.canvas-focused .canvas-commandbar{padding:6px 10px}.canvas-focused .canvas-bottom{min-height:30px}.canvas-focused .canvas-overview{bottom:95px}
@media(max-width:800px){.canvas-commandbar{gap:5px;padding:7px}.canvas-command-group{border:0;flex-wrap:wrap;padding:0}.canvas-command-group:last-child{margin:0}.canvas-viewbar{gap:6px}.canvas-overview{bottom:103px}.canvas-focused .canvas-layout{display:flex;overflow:auto;flex-direction:column}.canvas-focused .canvas-library,.canvas-focused .canvas-inspector{overflow:visible}.canvas-focused .canvas-center{flex:none;min-height:500px}.canvas-focused .canvas-center #canvas-stage{height:360px;flex:none}.canvas-focused .canvas-commandbar{max-height:108px;overflow:auto}.canvas-focused .canvas-footnote{display:none}}

.canvas-route-warning{margin:8px 14px;padding:12px 14px;border:1px solid #dda943;background:#fff8e8;color:#75501a;border-radius:8px;font-size:13px;line-height:1.5}.canvas-route-warning[hidden]{display:none}

.canvas-center #canvas-stage{padding:0;overflow:hidden;background:#fff}#canvas-paper{width:100%;height:100%;margin:0;box-shadow:none;position:absolute;inset:0}#canvas-paper>svg{background:transparent}.canvas-infinite-badge{font-size:11px;color:#90607c;align-self:center;white-space:nowrap;padding:0 5px}#canvas-app #canvas-auto-layout{background:#f5e7f0;border-color:#d4abc2;color:#823757;font-weight:600}#canvas-layout-direction{max-width:150px;min-width:0;border:1px solid #e5dce3;border-radius:5px;background:#fff;color:#664458;font-family:inherit;font-size:10px;padding:5px}.canvas-page-settings .canvas-small{font-size:10px;line-height:1.6;margin:10px 0}#canvas-export-size{font-weight:600;color:#884564}

.canvas-quick-add{position:fixed;z-index:1100;width:min(292px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:14px;border:1px solid #dfbfd0;border-radius:14px;background:#fff;box-shadow:0 12px 45px #41233630;color:#4c3041;font:13px Arial,sans-serif}.canvas-quick-add[hidden]{display:none}.quick-add-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.quick-add-heading strong{font-size:15px}.quick-add-heading button{border:0;background:#f7f0f4;border-radius:7px;font-size:22px;line-height:1;width:30px;height:30px;color:#80516b;cursor:pointer}.canvas-quick-add p{font-size:12px;line-height:1.5;color:#806a77;margin:9px 0 14px}.quick-add-shapes{display:grid;grid-template-columns:1fr 1fr;gap:7px}.quick-add-shapes button{display:flex;align-items:center;gap:10px;text-align:left;background:#fcf8fa;border:1px solid #ecdee6;border-radius:8px;padding:11px 10px;color:#56394a;cursor:pointer;font:12px Arial,sans-serif;min-height:44px}.quick-add-shapes b{font-size:23px;font-weight:400;color:#b84970;min-width:22px;text-align:center}.canvas-quick-add button:hover{background:#f8e7f0;border-color:#c97b9d}.canvas-quick-add button:focus-visible{outline:2px solid #b84970;outline-offset:2px}.canvas-quick-add small{display:block;margin-top:13px;font-size:10px;color:#967887}
.canvas-brief-dialog{width:min(1100px,calc(100vw - 32px));max-width:none;height:min(850px,calc(100dvh - 32px));max-height:none;margin:auto;padding:0;border:1px solid #dfc9d6;border-radius:18px;background:#fff;color:#47303e;box-shadow:0 24px 100px #301e4140;font:14px Arial,sans-serif}.canvas-brief-dialog[open]{display:flex;flex-direction:column}.canvas-brief-dialog::backdrop{background:#30202c80;backdrop-filter:blur(4px)}.brief-header{display:flex;justify-content:space-between;gap:20px;padding:22px 25px;border-bottom:1px solid #eadfe6;background:#fdf9fc}.brief-header span{font-size:10px;letter-spacing:2px;color:#a54973;font-weight:bold}.brief-header h2{font-size:25px;letter-spacing:-.8px;margin:8px 0}.brief-header p{font-size:12px;color:#89707e;margin:0;line-height:1.6}.canvas-brief-dialog button,.canvas-brief-dialog select{font:inherit;border:1px solid #dfccd8;border-radius:8px;background:#fff;color:#654055;padding:10px 13px;cursor:pointer}.canvas-brief-dialog button:hover{background:#f5e8f0}.canvas-brief-dialog button:focus-visible,.canvas-brief-dialog select:focus-visible,.canvas-brief-dialog textarea:focus-visible{outline:2px solid #b84970;outline-offset:2px}#brief-close{font-size:24px;align-self:flex-start;line-height:1;padding:6px 10px}.brief-workspace{min-height:0;flex:1;display:grid;grid-template-columns:310px minmax(0,1fr)}.brief-workspace>aside{padding:22px;overflow:auto;border-right:1px solid #eadfe6}.brief-workspace label{display:block;font-size:12px;font-weight:bold;margin-bottom:10px}.brief-workspace textarea{box-sizing:border-box;border:1px solid #e0cfda;border-radius:8px;padding:12px;color:#47303e;background:#fff;font:13px/1.6 Arial,sans-serif}#brief-goal{width:100%;resize:vertical;min-height:100px;max-height:240px}.brief-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.brief-selects select{display:block;width:100%;font-size:12px;padding:8px 5px;margin-top:8px}.brief-workspace .brief-check{display:flex;gap:8px;align-items:flex-start;font-weight:normal;line-height:1.5}.brief-check input{accent-color:#b84970;margin:2px 0}.brief-help{font-size:11px;line-height:1.65;color:#957887}.brief-review{padding:13px;margin:20px 0;background:#fbf7f9;border:1px solid #e9dce4;border-radius:10px}.brief-review h3{font-size:12px;margin:0 0 10px}.brief-review p,.brief-review li{font-size:11px;line-height:1.6}.brief-review ul{padding-left:17px;overflow-wrap:anywhere;margin-bottom:0}.brief-review li+li{margin-top:7px}.brief-preview{display:flex;flex-direction:column;min-height:0;min-width:0;padding:20px;gap:10px;background:#faf8fb}.brief-preview>div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px}#brief-size{font-size:11px;color:#957887}#brief-output{flex:1;min-height:120px;width:100%;resize:none;white-space:pre;font:12px/1.65 Consolas,monospace;background:#fff}#brief-status{font-size:11px;color:#9b3a67;margin:0;min-height:16px}.canvas-brief-dialog footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #eadfe6;padding:16px 22px}.canvas-brief-dialog footer p{font-size:11px;line-height:1.6;max-width:570px;color:#8f7183;margin:0}.canvas-brief-dialog footer>div{display:flex;gap:8px;flex-shrink:0}.canvas-brief-dialog .brief-primary{background:#a8416c;border-color:#a8416c;color:#fff}.canvas-brief-dialog .brief-primary:hover{background:#883256}.canvas-brief-dialog button:disabled{opacity:.4;cursor:not-allowed}#canvas-app #canvas-llm{color:#953b63;background:#fcf0f6;border-color:#e0bcd0;font-weight:600}@media(max-width:700px){.canvas-brief-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px)}.brief-header{padding:16px}.brief-header h2{font-size:20px}.brief-workspace{display:block;overflow:auto}.brief-workspace>aside{overflow:visible;border-right:0;border-bottom:1px solid #eadfe6;padding:16px}.brief-preview{height:420px;padding:16px}.canvas-brief-dialog footer{padding:12px;display:block}.canvas-brief-dialog footer p{margin-bottom:10px}.canvas-brief-dialog footer>div{justify-content:flex-end}}

.llm-workspace{grid-template-columns:390px minmax(0,1fr)}.llm-step h3{display:flex;gap:10px;align-items:center;font-size:15px;margin:0 0 12px}.llm-step h3 b{display:grid;place-items:center;background:#f2e1eb;color:#9a4167;width:25px;height:25px;border-radius:50%;font-size:12px}.llm-step+.llm-step{border-top:1px solid #eadfe6;margin-top:20px;padding-top:20px}.llm-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.llm-actions button,.llm-actions select{font-size:11px}.llm-prompt-details{margin:12px 0;font-size:11px}.llm-prompt-details summary{cursor:pointer;color:#8e5876}.llm-workspace textarea{width:100%;resize:vertical;font:11px/1.6 Consolas,monospace}#llm-system-prompt{height:150px;margin-top:10px}#llm-code{min-height:160px;height:190px;margin-bottom:10px}.llm-result{overflow:auto}#llm-drawing{display:grid;place-items:center;flex:1;min-height:260px;background:#fff;border:1px solid #e8dde5;border-radius:10px;overflow:hidden;background-image:radial-gradient(#e8dde5 1px,transparent 1px);background-size:16px 16px}#llm-drawing>svg{width:100%;height:100%;min-height:260px;max-height:450px}.llm-empty{max-width:280px;text-align:center;font-size:13px;line-height:1.8;color:#9a8090;padding:25px}#llm-count{font-size:11px;color:#9a8090}#llm-error{color:#a63d58;font-size:12px;line-height:1.6;overflow-wrap:anywhere}#llm-status,#llm-copy-status{font-size:11px;color:#925471;line-height:1.6;margin:8px 0;min-height:16px}#llm-review{margin:0;max-height:160px;overflow:auto}#llm-close{font-size:24px;line-height:1;align-self:flex-start;padding:6px 10px}#canvas-app #canvas-llm-draw{background:#a8416c;color:#fff;border-color:#a8416c;font-weight:600}@media(max-width:700px){.llm-workspace{display:block}.llm-result{height:auto;min-height:370px}.llm-workspace>aside{padding:16px}.llm-import-dialog footer p{font-size:10px}}
.canvas-library #canvas-shape-search{box-sizing:border-box;width:100%;padding:10px 11px;border:1px solid #e5dce2;border-radius:8px;background:#faf7fa;color:#553d4c;font:12px Arial;margin:0 0 9px;min-width:0}.canvas-library-tabs{display:flex;gap:3px;margin-bottom:12px}#canvas-app .canvas-library-tabs button{flex:1;padding:5px 2px;font-size:10px;min-height:28px}.canvas-shapes{max-height:385px;overflow:auto;padding:2px 4px 3px 0;scrollbar-width:thin}#canvas-app .canvas-shapes button{background:#fdfbfd;min-height:74px;border-color:#ece3e9;transition:background .15s,border-color .15s}#canvas-app .canvas-shapes button:hover{background:#f9eaf2;border-color:#cd9cb4}#canvas-app .canvas-shapes button[hidden]{display:none}.canvas-shapes svg{width:39px;height:29px;color:#a85f80;flex:none}.canvas-shapes span{line-height:1.4}#canvas-library-empty{font-size:11px;line-height:1.7;color:#8b6a7c}#canvas-draft-status{font-size:10px;color:#6c8175;max-width:185px;line-height:1.5}#canvas-recovery{padding:14px 18px;display:flex;gap:9px;align-items:center;background:#f0f7f3;border-bottom:1px solid #d2e5da;color:#355e48}#canvas-recovery[hidden]{display:none}#canvas-recovery>div{flex:1}#canvas-recovery strong,#canvas-recovery span{display:block;font-size:12px}#canvas-recovery span{font-size:11px;margin-top:4px}.canvas-style-studio{margin-top:18px;padding-top:16px;border-top:1px solid #e7dce3}#canvas-app .canvas-style-studio h3{margin:0 0 8px;font-size:12px;font-weight:600;color:#5e3f52;display:flex;justify-content:space-between}.canvas-style-studio h3 span{background:#f3e5ed;color:#9a476e;padding:2px 7px;border-radius:10px;font-size:10px}.canvas-style-studio>p,.canvas-draft-settings p{font-size:10px;color:#8a7180;line-height:1.7}.canvas-palettes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}#canvas-app .canvas-palettes button{padding:5px 2px;margin:0;font-size:9px!important;min-width:0}.canvas-palettes button>span{display:block;width:24px;height:16px;margin:2px auto 5px;border-radius:4px;background:var(--swatch);border:1.5px solid var(--swatch-line)}.canvas-font-actions{display:flex;gap:4px;margin-top:10px}.canvas-font-actions button{flex:1}.canvas-neighbors{display:flex;flex-wrap:wrap;gap:3px;margin-top:12px}#canvas-app .canvas-neighbors button{flex:1;white-space:nowrap;font-size:9px!important;padding:6px}.canvas-draft-settings{border-top:1px solid #e7dce3;margin-top:18px;padding-top:16px}.quick-shape-icon{display:block;width:30px;flex:none}.quick-shape-icon svg{width:30px;height:24px;color:#a95f80}.canvas-inline-editor{position:absolute;z-index:8;background:white;border:2px solid #b84970;border-radius:8px;box-shadow:0 8px 35px #5a29432b;box-sizing:border-box;overflow:hidden}.canvas-inline-editor textarea{display:block;width:100%;resize:vertical;border:0;padding:12px;box-sizing:border-box;background:#fff;color:#49303f;font:15px/1.5 Arial}.canvas-inline-editor>div{padding:5px 8px;border-top:1px solid #eedee7;display:flex;align-items:center;justify-content:space-between;background:#fdf8fb}.canvas-inline-editor span{font:9px Arial;color:#987487}#canvas-app .canvas-inline-editor button{font-size:10px;padding:4px 9px;min-height:25px}.canvas-command-dialog{padding:0;width:min(620px,calc(100vw - 28px));max-height:min(620px,calc(100dvh - 60px));border:1px solid #dfcdd9;border-radius:16px;box-shadow:0 20px 90px #34203940;color:#4b3242;background:#fff}.canvas-command-dialog::backdrop{background:#30222f70;backdrop-filter:blur(4px)}.command-search{display:flex;align-items:center;gap:10px;padding:17px;border-bottom:1px solid #eadfe6}.command-search>span{font-size:25px;color:#b84970}.command-search input{flex:1;min-width:0;border:0;background:white;color:#4b3242;font:14px/1.5 Arial;outline:0}.command-search button{border:1px solid #e6d8e0;border-radius:5px;padding:5px;background:#faf6f8;color:#947285;cursor:pointer}#canvas-command-results{max-height:420px;overflow:auto;padding:8px;scrollbar-width:thin}#canvas-command-results>[role=option]{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 13px;border-radius:8px;font:13px/1.5 Arial;cursor:pointer}#canvas-command-results>[role=option] span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#canvas-command-results>[role=option] small{font-size:10px;flex-shrink:0;color:#9e8292}#canvas-command-results>[role=option][aria-selected=true],#canvas-command-results>[role=option]:hover{background:#f7eaf1;color:#923760}.canvas-command-dialog footer{display:flex;justify-content:space-between;gap:15px;padding:13px 18px;border-top:1px solid #eadfe6;background:#fdfafb;font:10px Arial;color:#937788}.command-empty{padding:20px;font:13px Arial;color:#8b6b7d}
@media(min-width:1101px){.canvas-layout{grid-template-columns:205px minmax(0,1fr) 245px}.canvas-library,.canvas-inspector{padding:18px 14px}.canvas-inspector{max-height:920px;overflow:auto;scrollbar-width:thin}.canvas-focused .canvas-inspector{max-height:none}}
@media(max-width:800px){.canvas-library #canvas-shape-search,.canvas-library-tabs{grid-column:1/-1}.canvas-library #canvas-shape-search{margin:0}.canvas-library-tabs{margin:0;max-width:330px}.canvas-shapes{max-height:none;padding:2px 0 8px}#canvas-app .canvas-shapes button{flex:0 0 80px;min-height:74px}.canvas-library .canvas-library-tabs{display:flex}#canvas-draft-status{max-width:160px}#canvas-recovery{flex-wrap:wrap}#canvas-recovery>div{flex-basis:100%}.canvas-palettes{max-width:330px}.canvas-focused .canvas-library{max-height:150px;overflow:auto;flex-shrink:0}.canvas-focused .canvas-inspector{max-height:330px;overflow:auto}.canvas-command-dialog{max-height:calc(100dvh - 32px)}#canvas-command-results{max-height:55dvh}.command-search input{font-size:16px}}

.canvas-viewbar>.canvas-mobile-panels{display:none}@media(max-width:800px){.canvas-viewbar>.canvas-mobile-panels{display:flex;width:100%}.canvas-library,.canvas-commandbar{display:none}.canvas-mobile-library .canvas-library{display:grid}.canvas-mobile-commands .canvas-commandbar{display:flex}.canvas-focused.canvas-mobile-library .canvas-library{max-height:240px}.canvas-focused .canvas-center{min-height:530px}.canvas-focused .canvas-center #canvas-stage{height:390px}}

.canvas-library-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.canvas-shape-tile{position:relative;min-width:0}.canvas-shape-tile[hidden]{display:none}.canvas-shape-tile>[data-shape]{width:100%;height:100%}#canvas-app .canvas-shapes .canvas-favorite{position:absolute;right:2px;top:2px;border:0;background:transparent;min-height:22px;min-width:22px;width:22px;height:22px;padding:0;font-size:15px;cursor:pointer;z-index:1}#canvas-app .canvas-shapes .canvas-favorite[aria-pressed=true]{color:#a75a22;background:#fff5de}.canvas-shape-tile svg{margin-top:5px}.canvas-advanced-options{padding:15px 0;border-top:1px solid #e7dce3;margin-top:15px}.canvas-advanced-options p{font-size:10px;line-height:1.6;color:#8d6f7f}.canvas-advanced-options .canvas-text-warning{padding:10px;border-radius:7px;background:#fff5df;color:#815c1d}.canvas-quick-add .quick-add-shapes{max-height:320px;overflow:auto}.canvas-focused .canvas-library{scrollbar-width:thin}@media(max-width:800px){.canvas-library .canvas-library-tabs{display:grid;grid-template-columns:repeat(4,1fr)}.canvas-shape-tile{flex:0 0 85px}#canvas-app .canvas-shapes .canvas-favorite{min-width:22px;min-height:22px}.canvas-focused.canvas-mobile-library .canvas-library{max-height:310px}}
.canvas-live{border-bottom:1px solid #ecdde5;background:#fffafc;color:#523744}.canvas-live summary{padding:14px 20px;cursor:pointer;font-size:13px;font-weight:650}.canvas-live summary [data-live-badge]{float:right;font-size:11px;font-weight:500;color:#836c78}.live-dot{display:inline-block;width:8px;height:8px;background:#ae9aa4;border-radius:50%;margin-right:5px}.is-connected .live-dot{background:#208260;box-shadow:0 0 0 3px #d8eee3}.live-content{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;padding:6px 24px 20px;max-width:1200px}.live-content h3{margin:0 0 8px;font-size:17px}.live-content p{font-size:12px;line-height:1.7;max-width:65ch}.live-content a{font-size:12px;color:#a43460}.live-content label{display:block;font-size:12px;margin-bottom:8px}.live-pair{display:flex;gap:8px}.live-pair input{min-width:0;flex:1;border:1px solid #d9c1cd;border-radius:8px;padding:10px;font:13px monospace}.live-pair button{white-space:nowrap}.live-content [data-live-controls]:not([hidden]){display:flex;align-items:center;gap:20px;flex-wrap:wrap}.live-content [data-live-controls] label{margin:0}.live-content ol{font-size:11px;color:#735965;padding-left:20px;line-height:1.8}.github-mark{width:20px;height:20px;vertical-align:middle;flex-shrink:0;margin-right:6px}.seo-footer-nav a:has(.github-mark){display:inline-flex;align-items:center}@media(max-width:700px){.live-content{grid-template-columns:1fr;gap:14px;padding:10px 16px 18px}.live-pair{flex-direction:column}.canvas-live summary{padding:14px 10px;font-size:12px}.canvas-live summary [data-live-badge]{float:none;margin-left:10px}}
#canvas-app .canvas-live>summary{display:block;text-align:left;font-size:13px;line-height:1.5;padding:14px 20px}#canvas-app .canvas-live>summary>span{transform:none}#canvas-app .canvas-live h3{font-size:17px;text-transform:none;letter-spacing:0;margin-bottom:10px}#canvas-app .canvas-live p{margin:8px 0;font-size:12px}#canvas-app .canvas-live label{font-size:12px}#canvas-app .canvas-live input[type=checkbox]{accent-color:#a64069}.canvas-live [data-live-status]{min-height:20px}@media(max-width:700px){#canvas-app .canvas-live>summary{font-size:12px;padding:14px 12px}}
#canvas-app .live-browser-connect{display:block;margin-top:14px;background:#fff;border:1px solid #b57694;color:#8c365d;padding:10px 14px;font-size:12px}

.canvas-exchange{width:min(1000px,94vw);max-height:90vh;overflow:auto;border:1px solid #e3d4df;border-radius:18px;padding:28px;color:#3d2938;background:#fffafb}.canvas-exchange::backdrop{background:#24142888}.exchange-close{float:right}.canvas-exchange h2{font-size:28px}.exchange-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.exchange-grid section{padding:18px;border:1px solid #eadfe7;border-radius:12px}.exchange-grid label{display:block;margin:12px 0}.exchange-grid select,.exchange-grid input,.exchange-grid textarea{display:block;width:100%;margin-top:6px}.exchange-grid textarea{height:120px}.exchange-grid button{margin:6px}.exchange-note{font-size:13px;color:#786475;line-height:1.6}.exchange-drawing{max-height:360px;overflow:auto;border:1px solid #eadfe7;background:white;margin:14px 0;padding:12px}.exchange-drawing svg{width:100%;height:auto;max-height:340px}.live-review{padding:20px;border-top:1px solid #e6d7e1}.live-review ul{max-height:150px;overflow:auto;overflow-wrap:anywhere;font-size:12px}.live-review button{margin:4px}@media(max-width:700px){.exchange-grid{grid-template-columns:1fr}.canvas-exchange{padding:16px}}
