.svg-workbench{display:flex;height:calc(100dvh - 64px);min-height:650px;flex-direction:column;padding:20px 28px 28px;color:var(--tc-ink-1);background:var(--tc-bg-base)}.svg-workbench__header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:16px}.svg-workbench__heading{display:flex;min-width:0;align-items:center;gap:12px}.svg-workbench__icon{display:grid;width:40px;height:40px;flex:0 0 auto;place-items:center;color:var(--tc-accent);border:1px solid color-mix(in srgb,var(--tc-accent) 22%,var(--tc-border));border-radius:var(--tc-radius-md);background:var(--tc-accent-soft)}.svg-workbench__heading h1{margin:0;color:var(--tc-ink-1);font-size:19px;font-weight:680;letter-spacing:-.025em;line-height:1.25}.svg-workbench__heading p{margin:4px 0 0;overflow:hidden;color:var(--tc-ink-4);font-size:12px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}.svg-workbench__header-actions{display:flex;flex:0 0 auto;gap:8px}.svg-workbench__layout{display:flex;min-height:0;flex:1;overflow:hidden;border:1px solid var(--tc-border);border-radius:var(--tc-radius-lg);background:var(--tc-surface-1);box-shadow:var(--tc-shadow-sm)}.svg-workbench__pane{display:flex;min-width:300px;min-height:0;flex:1;flex-direction:column}.svg-workbench__pane--editor{min-width:300px;flex:0 0 auto}.svg-workbench__pane--preview{min-width:300px}.svg-workbench__pane-header{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--tc-border);background:var(--tc-surface-2)}.svg-workbench__pane-header div{display:grid;min-width:0;gap:3px}.svg-workbench__pane-header strong{overflow:hidden;color:var(--tc-ink-2);font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.svg-workbench__pane-header div span{overflow:hidden;color:var(--tc-ink-4);font-size:11px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.svg-workbench__pane-header>span{display:inline-flex;flex:0 0 auto;align-items:center;gap:4px;padding:4px 7px;color:var(--tc-ink-4);border:1px solid var(--tc-border);border-radius:4px;background:var(--tc-surface-1);font-family:var(--tc-font-mono);font-size:10px;font-weight:600;letter-spacing:.08em}.svg-workbench__editor-wrap{min-height:0;flex:1;overflow:hidden;background:var(--tc-code-bg)}.svg-workbench__resizer{position:relative;width:9px;flex:0 0 9px;cursor:col-resize;background:var(--tc-surface-1)}.svg-workbench__resizer:after{position:absolute;top:50%;left:3px;width:3px;height:28px;border-radius:var(--tc-radius-pill);background:var(--tc-border-strong);content:"";transform:translateY(-50%);transition:background-color var(--tc-duration-fast) var(--tc-ease),height var(--tc-duration-fast) var(--tc-ease)}.svg-workbench__resizer:hover:after{height:44px;background:var(--tc-accent)}.svg-workbench__preview-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:7px 10px;border-bottom:1px solid var(--tc-border);background:var(--tc-surface-1)}.svg-workbench__preview-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.svg-workbench__preview-controls>span{min-width:42px;color:var(--tc-ink-4);font-family:var(--tc-font-mono);font-size:11px;text-align:center}.svg-workbench__base64,.svg-workbench__preview-surface{min-height:0;flex:1}.svg-workbench__preview-surface{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.svg-workbench__preview-surface.is-panning{cursor:grabbing}.svg-workbench__preview-surface.bg-grid{background-color:var(--tc-surface-2);background-image:linear-gradient(var(--tc-border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--tc-border-subtle) 1px,transparent 1px);background-size:20px 20px}.svg-workbench__preview-surface.bg-white{background:#fff}.svg-workbench__preview-surface.bg-dark{background:#171922}.svg-workbench__preview-surface.bg-transparent-pattern{background:linear-gradient(45deg,var(--tc-surface-2) 25%,transparent 25%) 0 0/18px 18px,linear-gradient(-45deg,var(--tc-surface-2) 25%,transparent 25%) 0 0/18px 18px,linear-gradient(45deg,transparent 75%,var(--tc-surface-2) 75%) 0 0/18px 18px,linear-gradient(-45deg,transparent 75%,var(--tc-surface-2) 75%) 0 0/18px 18px,var(--tc-surface-1)}.svg-preview-content{max-width:100%;max-height:100%;transform-origin:center center;pointer-events:none}.svg-preview-content svg{display:block;max-width:none;max-height:none}.svg-workbench__drop-hint{display:grid;gap:10px;place-items:center;color:var(--tc-ink-4);font-size:13px;text-align:center}.svg-workbench__drop-hint svg{color:var(--tc-accent)}.svg-workbench__base64{padding:12px;background:var(--tc-code-bg)}.svg-workbench__base64 .ant-input{height:100%!important;resize:none!important;color:var(--tc-ink-3);background:var(--tc-surface-1);font-family:var(--tc-font-mono);font-size:12px;word-break:break-all}.svg-workbench__footer{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:10px;padding:9px 10px;border:1px solid var(--tc-border);border-radius:var(--tc-radius-md);background:var(--tc-surface-1)}.svg-workbench__edit-actions,.svg-workbench__export-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.svg-workbench__edit-actions>span,.svg-workbench__export-actions>span{display:inline-flex;align-items:center;gap:5px;color:var(--tc-ink-4);font-size:11px;font-weight:600}.svg-workbench__export-actions>i{color:var(--tc-ink-4);font-style:normal}.svg-workbench__export-actions .ant-input-number{width:72px}@media(max-width:960px){.svg-workbench{height:auto;min-height:calc(100dvh - 64px);padding:18px 16px 24px}.svg-workbench__layout{min-height:770px;flex-direction:column;overflow:visible}.svg-workbench__pane,.svg-workbench__pane--editor,.svg-workbench__pane--preview{width:100%!important;min-width:0;min-height:340px;flex:1 1 340px}.svg-workbench__pane--editor{border-bottom:1px solid var(--tc-border)}.svg-workbench__resizer{display:none}.svg-workbench__footer{align-items:flex-start;flex-direction:column}}@media(max-width:600px){.svg-workbench{padding:14px 12px 20px}.svg-workbench__header{align-items:stretch;flex-direction:column}.svg-workbench__icon{width:36px;height:36px}.svg-workbench__edit-actions>span,.svg-workbench__export-actions>span,.svg-workbench__heading p,.svg-workbench__pane-header div span{display:none}.svg-workbench__header-actions{display:flex;gap:8px}.svg-workbench__header-actions .ant-btn:first-child{min-height:44px;flex:0 0 88px}.svg-workbench__header-actions .ant-btn-primary{min-height:44px;flex:1 1 auto;font-size:14px;font-weight:700}.svg-workbench__layout{min-height:700px}.svg-workbench__pane,.svg-workbench__pane--editor,.svg-workbench__pane--preview{min-height:280px;flex-basis:280px}.svg-workbench__pane--editor{min-height:390px;flex-basis:390px}.svg-workbench__pane-header{min-height:46px;padding-block:8px}.svg-workbench__preview-toolbar{align-items:flex-start;flex-direction:column}.svg-workbench__preview-controls{justify-content:flex-start;max-width:100%;overflow-x:auto;padding-bottom:2px}.svg-workbench__footer{gap:10px;padding:9px}.svg-workbench__edit-actions,.svg-workbench__export-actions{gap:5px}}