.cr-tool.cr-svg{grid-template-columns:320px minmax(0,1fr)}.cr-svg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex:1;min-height:520px}.cr-svg-code{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border-right:1.5px solid var(--color-line);min-width:0;font-size:var(--text-s)}.cr-svg-code.is-over{outline:2.5px dashed var(--color-accent);outline-offset:-8px;background:var(--color-accent-soft)}.cr-svg-code textarea{flex:1;min-height:460px;resize:vertical;font-size:var(--text-xs);line-height:1.55;white-space:pre;overflow:auto;tab-size:2}.cr-svg-preview{display:flex;flex-direction:column;min-width:0}.cr-svg-canvas{flex:1;display:grid;place-items:center;min-height:320px;padding:var(--space-5);overflow:auto}.cr-svg-canvas.is-checker{background:repeating-conic-gradient(var(--color-sunken) 0 25%,var(--color-bg) 0 50%) 0 0 /22px 22px}.cr-svg-canvas.is-light{background:#ffffff}.cr-svg-canvas.is-dark{background:#161212}.cr-svg-canvas img{display:block;width:auto;max-width:100%;max-height:520px;min-width:24px;object-fit:contain}.cr-svg-empty{color:var(--color-muted);font-weight:700;text-align:center;padding:var(--space-4);background:var(--color-surface);border:1.5px dashed var(--color-line-strong);border-radius:var(--radius-m)}.cr-svg-problem{margin:0;padding:var(--space-3) var(--space-4);border-top:1.5px solid var(--color-line);color:var(--color-muted);font-size:var(--text-xs);line-height:1.5;overflow-wrap:anywhere}.cr-svg-problem.is-error{color:var(--color-danger);background:var(--color-danger-soft)}.cr-svg-hint{color:var(--color-muted);font-size:var(--text-xs);line-height:1.45;margin:0}.cr-svg-paints{display:flex;flex-wrap:wrap;gap:6px}.cr-svg-paint{min-height:36px;padding:4px 8px;gap:6px;font:600 var(--text-2xs)/1.2 var(--font-mono);text-transform:none}.cr-svg-paint small{color:var(--color-muted);font-size:10px}.cr-svg-paint[aria-pressed=true]{border-color:var(--color-accent);background:var(--color-accent-soft);box-shadow:0 0 0 2px var(--color-accent)}.cr-svg-backdrop{display:inline-flex;gap:4px}@media (max-width:1180px){.cr-svg-split{grid-template-columns:minmax(0,1fr)}.cr-svg-code{border-right:0;border-bottom:1.5px solid var(--color-line)}.cr-svg-code textarea{min-height:300px}}@media (max-width:960px){.cr-tool.cr-svg{grid-template-columns:minmax(0,1fr)}.cr-svg .cr-panel{order:2}}@media (max-width:560px){.cr-svg-code{padding:var(--space-3)}.cr-svg-code textarea{min-height:240px}.cr-svg-canvas{min-height:220px;padding:var(--space-3)}}