.canvas-grid-frame{flex:1;min-height:320px;overflow:auto;border:1px solid #9fa7b3;background:#fff}.canvas-grid-surface{position:relative;min-width:1px;min-height:1px}.canvas-grid{position:sticky;top:0;left:0;display:block;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.canvas-grid.selection-mode{cursor:crosshair}.canvas-grid:focus-visible{outline:2px solid #2f6fed;outline-offset:-2px}.canvas-zoom-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-shrink:0}.canvas-zoom-controls button{padding:6px 10px;border:1px solid #c8ced8;border-radius:6px;background:#fff;color:inherit;cursor:pointer}.canvas-zoom-controls button:disabled{opacity:.5;cursor:default}.canvas-zoom-controls button:focus-visible{outline:2px solid #2f6fed;outline-offset:2px}.canvas-zoom-controls button:hover:not(:disabled){background:#f4f5f7}.canvas-zoom-controls output{min-width:5ch;text-align:center;font-variant-numeric:tabular-nums}.canvas-zoom-controls span{color:#646b76;font-size:13px}.pattern-preview{display:block;max-width:144px;max-height:144px;border:1px solid #c8ced8;background:#fff}.pattern-card{display:flex;flex-direction:column;gap:10px;border:1px solid #d7dbe2;border-radius:8px;padding:12px;background:#fff;cursor:grab}.pattern-card:active{cursor:grabbing}.pattern-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.pattern-card-header h3,.pattern-card-header p{margin:0}.pattern-card-header h3{overflow:hidden;font-size:16px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.pattern-card-header p{margin-top:4px;color:#646b76;font-size:13px}.pattern-card-preview{display:flex;min-height:88px;align-items:center;justify-content:center;overflow:auto;padding:8px;border:1px solid #edf0f4;background:#f8f9fb}.pattern-card-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pattern-card-actions button{min-width:0;border:1px solid #c8ced8;border-radius:6px;padding:7px 6px;background:#fff;color:#1d1d1f;cursor:pointer;font-size:12px;line-height:1.2}.pattern-card-actions button:hover{border-color:#7b8491;background:#f4f5f7}.pattern-card-actions button:focus-visible{outline:2px solid #2f6fed;outline-offset:2px}.pattern-grid-editor{display:flex;min-height:0;flex:1;flex-direction:column;gap:8px}.pattern-grid-viewport{height:48vh;min-height:220px;flex-shrink:0;overflow:auto;border:1px solid #c8ced8;background:#e5e7eb}.pattern-edit-grid{display:grid;width:max-content;touch-action:none}.pattern-grid-editor .pattern-edit-cell{box-sizing:border-box;min-width:0;border:1px solid #d1d5db;border-radius:0;padding:0}.pattern-grid-editor .pattern-edit-cell--1{background:#111827}.pattern-grid-editor .pattern-edit-cell--0,.pattern-grid-editor .pattern-edit-cell--null{background:#fff}.pattern-preview-zoom{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-shrink:0}.pattern-preview-zoom output{min-width:5ch;text-align:center;font-variant-numeric:tabular-nums}.pattern-preview-zoom span{color:#646b76;font-size:13px}.pattern-preview-zoom button:focus-visible{outline:2px solid #2f6fed;outline-offset:2px}.pattern-create-dialog{width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);border:0;border-radius:12px;padding:0;box-shadow:0 24px 80px #0005}.pattern-create-dialog::backdrop{background:#11182799}.pattern-create-modal{display:flex;max-height:calc(100vh - 32px);flex-direction:column}.pattern-create-modal header,.pattern-create-modal footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #d7dbe2}.pattern-create-modal footer{border-top:1px solid #d7dbe2;border-bottom:0}.pattern-create-modal h2,.pattern-create-modal p{margin:0}.pattern-create-content{display:flex;min-height:0;flex:1;flex-direction:column;gap:12px;overflow:auto;padding:20px}.pattern-create-file,.pattern-metadata label,.pattern-parameters label{display:flex;flex-direction:column;gap:5px}.pattern-parameters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.pattern-parameters>label{min-width:0}.pattern-parameters>label input{min-width:0}.pattern-parameter-slider{display:flex;min-width:0;flex-direction:column;gap:8px}.pattern-parameter-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.pattern-parameter-heading output{flex-shrink:0;font-variant-numeric:tabular-nums}.pattern-parameter-slider p{color:#646b76;font-size:13px;line-height:1.4}.pattern-create-modal .pattern-parameter-slider input[type=range]{box-sizing:border-box;width:100%;min-height:28px;margin:0;padding:0;border:0;accent-color:#2f6fed;cursor:pointer}.pattern-parameter-slider input:focus-visible{outline:2px solid #2f6fed;outline-offset:2px}.pattern-create-modal input,.pattern-create-modal select{border:1px solid #c8ced8;border-radius:6px;padding:8px}.pattern-create-modal button{border:1px solid #c8ced8;border-radius:6px;padding:8px 12px;background:#fff;cursor:pointer}.pattern-create-modal button:disabled{cursor:not-allowed;opacity:.55}.pattern-result-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.pattern-result-heading label{display:flex;align-items:center;gap:6px}.pattern-create-error{margin:0 20px 12px!important;color:#991b1b}@media(max-width:700px){.pattern-parameter-slider{grid-column:1 / -1}}.patterns-panel{display:flex;min-width:0;min-height:0;height:100vh;flex-direction:column;gap:20px;overflow:hidden;padding:24px;background:#fff}.pattern-create-button{width:36px;height:36px;flex:0 0 auto;border:1px solid #2f6fed;border-radius:50%;background:#2f6fed;color:#fff;cursor:pointer;font-size:24px;line-height:1}.pattern-create-notice{border:1px solid #86b69b;border-radius:6px;padding:8px 10px;background:#eefbf3;color:#245c39;font-size:13px}.pattern-placeholder{display:grid;min-height:160px;place-items:center;border:1px dashed #aeb6c2;border-radius:8px;color:#646b76;font-size:14px}.pattern-filters{display:flex;flex-direction:column;gap:10px;border:1px solid #d7dbe2;border-radius:8px;padding:12px;background:#f8f9fb}.pattern-filter-field{display:flex;flex-direction:column;gap:5px;color:#4b5563;font-size:13px}.pattern-filter-field input,.pattern-filter-field select{min-width:0;border:1px solid #c8ced8;border-radius:6px;padding:8px 10px;background:#fff;color:#1d1d1f;font:inherit}.pattern-filter-field input:focus-visible,.pattern-filter-field select:focus-visible,.pattern-add-tag-button:focus-visible,.pattern-tag-chip:focus-visible,.pattern-filter-footer button:focus-visible{outline:2px solid #2f6fed;outline-offset:2px}.pattern-add-tag-button,.pattern-filter-footer button,.pattern-tag-chip{border:1px solid #c8ced8;border-radius:6px;background:#fff;color:#1d1d1f;cursor:pointer;font-weight:600}.pattern-add-tag-button,.pattern-filter-footer button{padding:8px 10px}.pattern-add-tag-button:hover:not(:disabled),.pattern-filter-footer button:hover:not(:disabled),.pattern-tag-chip:hover{border-color:#7b8491;background:#f4f5f7}.pattern-add-tag-button:disabled,.pattern-filter-footer button:disabled{cursor:not-allowed;opacity:.55}.pattern-tag-chips{display:flex;flex-wrap:wrap;gap:6px}.pattern-tag-chip{padding:5px 8px;font-size:12px}.pattern-filter-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#646b76;font-size:13px}.pattern-card-list{display:flex;min-height:0;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding-right:4px;scrollbar-gutter:stable}.pattern-errors{max-height:180px;overflow:auto;border:1px solid #e1a1a1;border-radius:8px;padding:12px;background:#fff7f7;color:#7a2020;font-size:13px}.pattern-errors h3,.pattern-errors ul{margin:0}.pattern-errors ul{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-left:18px}.selection-context-menu{position:fixed;z-index:20;display:flex;min-width:160px;flex-direction:column;padding:4px;border:1px solid #c8ced8;border-radius:6px;background:#fff;box-shadow:0 12px 28px #181f2d29}.selection-context-menu button{border:0;border-radius:4px;padding:8px 10px;background:transparent;color:#1d1d1f;cursor:pointer;font:inherit;text-align:left}.selection-context-menu button:hover:not(:disabled),.selection-context-menu button:focus-visible{background:#edf3ff;outline:none}.selection-context-menu button:disabled{cursor:not-allowed;opacity:.45}.size-controls{display:flex;flex-wrap:wrap;align-items:end;gap:10px}.size-controls label{display:flex;flex-direction:column;gap:5px;color:#4b5563;font-size:13px}.size-controls input{width:88px;border:1px solid #c8ced8;border-radius:6px;padding:7px 8px;background:#fff;color:#1d1d1f}.size-controls button{border:1px solid #2f6fed;border-radius:6px;padding:8px 12px;background:#2f6fed;color:#fff;cursor:pointer;font-weight:600}.size-controls button:hover{background:#245dcc}.size-controls input:focus-visible,.size-controls button:focus-visible{outline:2px solid #2f6fed;outline-offset:2px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.toolbar button,.toolbar-file-button{border:1px solid #c8ced8;border-radius:6px;padding:8px 12px;background:#fff;color:#1d1d1f;cursor:pointer;font-weight:600}.toolbar button:hover,.toolbar-file-button:hover{border-color:#7b8491;background:#f4f5f7}.toolbar button:focus-visible,.toolbar-file-button:focus-within{outline:2px solid #2f6fed;outline-offset:2px}.toolbar-selection-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-left:auto;padding:0}.toolbar-selection-button.active{border-color:#2f6fed;background:#edf3ff}.toolbar-selection-icon{width:18px;height:18px;border:2px dashed currentColor;background:linear-gradient(currentColor,currentColor) 50% 0 / 2px 100% no-repeat,linear-gradient(currentColor,currentColor) 0 50% / 100% 2px no-repeat}.toolbar-file-button input{display:none}.toolbar-error{width:100%;margin:0;color:#9f1d1d;font-size:13px}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;height:100vh;overflow:hidden;background:#f4f5f7;color:#1d1d1f}.workspace-panel{min-width:0;min-height:0;padding:24px}.workspace-panel{display:flex;flex-direction:column;gap:20px;overflow:hidden;border-right:1px solid #d7dbe2}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.workspace-tools{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:end;justify-content:flex-end;gap:12px}.panel-header h1,.panel-header h2,.panel-header p{margin:0}.panel-header h1{font-size:24px;line-height:1.2}.panel-header h2{font-size:20px;line-height:1.25}.panel-header p{margin-top:6px;color:#646b76;font-size:14px;line-height:1.45}.canvas-edge-actions{display:flex;flex-wrap:wrap;align-items:end;justify-content:flex-end;gap:10px}.canvas-edge-actions button{border:1px solid #c8ced8;border-radius:6px;padding:8px 12px;background:#fff;color:#1d1d1f;cursor:pointer;font-weight:600}.canvas-edge-actions button:hover{border-color:#7b8491;background:#f4f5f7}.canvas-edge-actions button:focus-visible{outline:2px solid #2f6fed;outline-offset:2px}@media(max-width:900px){.app-shell{grid-template-columns:1fr;height:auto;min-height:100vh;overflow:visible}.panel-header{flex-direction:column}.workspace-tools{justify-content:flex-start}.workspace-panel{border-right:0;border-bottom:1px solid #d7dbe2}}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f4f5f7}body{margin:0}button,input,textarea,select{font:inherit}