*{box-sizing:border-box}:root{--font-ui: "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-bg: #f5f4ef;--color-surface: #ffffff;--color-ink: #1f2937;--color-muted: #6b7280;--color-border: #e5e7eb;--color-header: #2f2f2f;--color-accent: #3b82f6;--color-accent-strong: #2563eb;--color-dark: #21252b;--color-dark-2: #1e1e1e;--color-error-bg: #fee2e2;--color-error: #b91c1c;--color-danger: #ef4444}body{font-family:var(--font-ui);margin:0;padding:0;height:100vh;display:flex;flex-direction:column;background:var(--color-bg);color:var(--color-ink)}header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--color-header);color:#fff}header img.logo{height:2rem;width:auto}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header-buttons{display:flex;gap:.5rem}.header-buttons button{padding:.5rem 1rem;font-size:.875rem;border-radius:4px;border:none;cursor:pointer;font-weight:500;font-family:inherit}#create-new-btn{background:#4b5563;color:#fff}#create-new-btn:hover{background:#374151}#start-template-btn{background:#4b5563;color:#fff}#start-template-btn:hover{background:#374151}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .15s ease}.modal-overlay.closing{animation:fadeOut .15s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.modal-content{background:var(--color-surface);border-radius:8px;padding:1.5rem;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;animation:scaleIn .15s ease}.modal-overlay.closing .modal-content{animation:scaleOut .15s ease forwards}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}to{transform:scale(.95);opacity:0}}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.modal-header h2{margin:0;font-size:1.25rem;color:var(--color-ink)}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-muted);padding:.25rem;line-height:1}.modal-close:hover{color:#1f2937}.template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.template-card{border:2px solid var(--color-border);border-radius:8px;padding:.75rem;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.template-card:hover{border-color:var(--color-accent);box-shadow:0 2px 8px #3b82f626}.template-preview{aspect-ratio:1;background:#f9fafb;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:.5rem}.template-preview svg{max-width:100%;max-height:100%}.template-name{font-size:.875rem;font-weight:500;color:#374151;text-align:center}.container{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}.panel{display:flex;flex-direction:column;overflow:hidden}.panel-left{background:var(--color-surface);border-right:1px solid var(--color-border)}.panel-right{background:var(--color-dark-2)}#preview{flex:1;padding:2rem;overflow:hidden;position:relative;cursor:grab;touch-action:none}#preview.is-panning{cursor:grabbing}#preview .preview-grid{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:auto}#preview .preview-grid-hover{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}#preview .preview-pan{position:absolute;inset:0;z-index:1;pointer-events:none}#preview .preview-svg{position:absolute;left:0;top:0;pointer-events:none}#preview .preview-svg svg{pointer-events:none;max-width:none;max-height:none;display:block}#preview .grid-dot{fill:#00000040;transition:transform .12s ease,fill .12s ease;transform-origin:center;transform-box:fill-box;pointer-events:none}#preview .grid-dot.is-hovered{fill:var(--color-danger);transform:scale(2.4)}#preview .grid-dot-hover{fill:var(--color-danger);transition:r .12s ease,opacity .12s ease}#preview .grid-dot-hit{fill:transparent;pointer-events:all}#preview .grid-tooltip{position:absolute;z-index:3;padding:.2rem .4rem;background:#0f172ae6;color:#f8fafc;border-radius:4px;font-size:.7rem;font-family:JetBrains Mono,Fira Code,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;letter-spacing:.02em;pointer-events:none;white-space:nowrap}#error{background:var(--color-error-bg);color:var(--color-error);padding:1rem;font-family:var(--font-ui);font-size:.875rem;white-space:pre-wrap;min-height:0}#error:empty{display:none}#editor{flex:1;overflow:auto}#editor .cm-editor{height:100%}#editor .cm-scroller{overflow:auto}.svg-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-top:1px solid var(--color-border);background:var(--color-dark);color:#abb2bf;font-size:.75rem;letter-spacing:.02em;text-transform:uppercase}.svg-toolbar button{background:#3b4048;color:#abb2bf;border:0;border-radius:4px;padding:.25rem .5rem;font-size:.75rem;cursor:pointer}.svg-toolbar button:disabled{opacity:.6;cursor:default}#svg-string{margin:0;padding:.75rem 1rem;background:#282c34;color:#abb2bf;font-family:var(--font-ui);font-size:.75rem;line-height:1.4;max-height:30vh;overflow:auto;white-space:pre-wrap;word-break:break-word}#svg-string code{font-family:inherit}.tok-tag{color:#e06c75}.tok-attr{color:#d19a66}.tok-string{color:#98c379}footer{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:.5rem 1rem;background:var(--color-header);color:#9ca3af;font-size:.75rem}footer a{color:#9ca3af;text-decoration:none;display:flex;align-items:center;gap:.35rem}footer a:hover{color:#fff}footer span{white-space:nowrap;display:flex}