:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.app{max-width:1400px;margin:0 auto;padding:1rem;font-family:system-ui,sans-serif}.app header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem;display:flex}.app h1{margin:0;font-size:1.5rem}.template-select{align-items:center;gap:.5rem;font-size:.9rem;display:flex}.template-select select{background:#fff;border:1px solid #ccc;border-radius:.25rem;padding:.35rem .5rem;font-size:.9rem}.doc-header{margin-bottom:.75rem}.doc-id{color:#666;font-size:.8rem}.editor{grid-template-columns:320px 1fr 1fr;align-items:start;gap:1rem;display:grid}.sidebar{flex-direction:column;gap:1rem;display:flex}.panel{background:#fafafa;border:1px solid #ccc;border-radius:.375rem;padding:.75rem}.panel h2{margin:0 0 .75rem;font-size:.95rem}.param-list{flex-direction:column;gap:.75rem;display:flex}.param-row{flex-direction:column;gap:.35rem;font-size:.85rem;display:flex}.param-row.inline{flex-direction:row;align-items:center;gap:.5rem}.param-row input[type=range]{width:100%}.param-row input[type=color]{border:1px solid #ccc;width:3rem;height:1.75rem;padding:0}.param-group{border:1px solid #e0e0e0;border-radius:.375rem;overflow:hidden}.param-group summary{cursor:pointer;-webkit-user-select:none;user-select:none;background:#f0f0f0;padding:.4rem .6rem;font-size:.8rem;font-weight:600}.param-group-body{flex-direction:column;gap:.6rem;padding:.5rem;display:flex}.number-input-row{align-items:center;gap:.5rem;display:flex}.number-input-row input[type=range]{flex:1}.number-field{border:1px solid #ccc;border-radius:.25rem;width:4.5rem;padding:.25rem .35rem;font-size:.8rem}.toolbar,.variant-form{flex-wrap:wrap;gap:.5rem;display:flex}.toolbar button,.variant-form button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:.25rem;padding:.4rem .75rem;font-size:.85rem}.toolbar button:disabled,.variant-form button:disabled{opacity:.5;cursor:not-allowed}.variant-form input{border:1px solid #ccc;border-radius:.25rem;flex:1;min-width:120px;padding:.35rem .5rem;font-size:.85rem}.variant-list,.issue-list{margin:0;padding:0;font-size:.85rem;list-style:none}.variant-list li{border-bottom:1px solid #eee;justify-content:space-between;gap:.5rem;padding:.35rem 0;display:flex}.variant-list li:last-child{border-bottom:none}.variant-list span{color:#888;font-size:.75rem}.empty{color:#888;margin:0;font-size:.85rem}.validation-panel.valid{color:#2f7d32}.issue{border-bottom:1px solid #eee;flex-wrap:wrap;align-items:center;gap:.35rem;padding:.35rem 0;display:flex}.issue:last-child{border-bottom:none}.issue-level{text-transform:uppercase;background:#e0e0e0;border-radius:.2rem;padding:.1rem .3rem;font-size:.7rem;font-weight:600}.issue-schema .issue-level{background:#ffccbc}.issue-structural .issue-level{background:#fff59d}.issue-renderable .issue-level{background:#b39ddb}.issue-message{flex:1}.cloud-controls{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.cloud-controls .account-email,.cloud-controls .account-placeholder{color:#555;text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-size:.8rem;overflow:hidden}.cloud-controls a,.cloud-controls .button-link{color:#000;cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:.25rem;padding:.4rem .75rem;font-size:.85rem;text-decoration:none;display:inline-block}.cloud-controls a:hover,.cloud-controls .button-link:hover{background:#f5f5f5}.share-url{gap:.5rem;width:100%;display:flex}.share-url input{border:1px solid #ccc;border-radius:.25rem;flex:1;min-width:0;padding:.35rem .5rem;font-size:.8rem}.pattern-preview,.preview{min-width:0}.pattern-canvas{flex-direction:column;gap:.5rem;min-height:0;display:flex;position:relative}.pattern-canvas-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;font-size:.85rem;font-weight:600;display:flex}.pattern-toolbar{flex-wrap:wrap;gap:.35rem;display:flex}.pattern-toolbar button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem}.pattern-toolbar button.active{color:#fff;background:#334;border-color:#334}.pattern-toolbar button.reset{color:#b71c1c;background:#ffebee;border-color:#e57373}.pattern-toolbar-separator{background:#ddd;width:1px;margin:0 .15rem}.pattern-units{color:#666;font-weight:400}.pattern-edge{stroke:#44445559;stroke-width:12px;fill:none;cursor:crosshair}.pattern-edge:hover{stroke:#d32f2f99}.pattern-vertex{fill:#445;stroke:#fff;stroke-width:1.5px;cursor:pointer}.pattern-vertex.draggable{cursor:move;fill:#667}.pattern-vertex.draggable:hover{fill:#d32f2f}.pattern-grid-line{stroke:#ffffff14;stroke-width:1px}.pattern-seam line{stroke:#8e24aa;stroke-width:2px;stroke-dasharray:6 4;opacity:.7;pointer-events:none}.mode-split .pattern-piece polygon,.mode-delete .pattern-piece polygon,.mode-round .pattern-piece polygon{fill:#c8c8dc1f}.mode-handles .pattern-piece polygon{cursor:move}.pattern-svg{aspect-ratio:1;-webkit-user-select:none;user-select:none;touch-action:none;background:#fafafa;border:1px solid #ccc;border-radius:.375rem;width:100%;height:auto}.pattern-piece polygon{fill:#c8c8dc40;stroke:#445;stroke-width:1.5px}.pattern-piece.piece-cape_body polygon,.pattern-piece.piece-skirt polygon{fill:#3b3f8c1f}.pattern-piece.piece-hood polygon{fill:#c8a24a26}.piece-label{fill:#334;pointer-events:none;font-size:13px;font-weight:600}.pattern-handle{cursor:grab}.pattern-handle:active{cursor:grabbing}.pattern-rotate-handle{cursor:grab}.pattern-rotate-handle:active{cursor:grabbing}.rotate-handle-core{fill:#fff;stroke:#445;stroke-width:1.5px}.rotate-handle-arm{stroke:#445;stroke-width:1.5px;stroke-dasharray:3 2}.rotate-handle-knob{fill:#fff;stroke:#d32f2f;stroke-width:2px;transition:r .1s,fill .1s}.pattern-rotate-handle:hover .rotate-handle-knob{fill:#ffebee;r:7}.pattern-handle circle{fill:#fff;stroke:#d32f2f;stroke-width:2.5px;r:10;transition:r .1s,fill .1s}.pattern-handle:hover circle{fill:#ffebee;r:13}.handle-label-group rect{fill:#ffffffd9;stroke:#d32f2f4d;stroke-width:1px}.handle-label{fill:#b71c1c;text-anchor:middle;pointer-events:none;font-size:12px;font-weight:600}.pattern-live-value{z-index:50;color:#fff;pointer-events:none;white-space:nowrap;background:#b71c1c;border-radius:.25rem;padding:.35rem .6rem;font-size:.8rem;font-weight:600;position:fixed}.preview-wrap{width:100%;display:inline-block;position:relative}.viewport{aspect-ratio:4/3;border:1px solid #ccc;border-radius:.375rem;width:100%;max-width:100%;height:auto;display:block}.preview-actions{gap:.5rem;display:flex;position:absolute;bottom:.75rem;right:.75rem}.preview-actions button{color:#fff;cursor:pointer;background:#00000080;border:1px solid #ffffff4d;border-radius:.25rem;padding:.35rem .6rem;font-size:.8rem}.fps-counter{font-variant-numeric:tabular-nums;color:#fff;background:#00000080;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;position:absolute;top:.75rem;left:.75rem}.toast{z-index:100;color:#fff;background:#b71c1c;border-radius:.375rem;align-items:center;gap:.75rem;padding:.6rem .9rem;font-size:.85rem;animation:.2s ease-out toast-in;display:flex;position:fixed;top:1rem;right:1rem;box-shadow:0 4px 12px #00000040}.toast button{color:#fff;cursor:pointer;background:0 0;border:none;font-size:1.1rem;line-height:1}@keyframes toast-in{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@media (width<=1100px){.editor{grid-template-columns:320px 1fr}.preview{grid-column:1/-1}}@media (width<=700px){.editor{grid-template-columns:1fr}.preview,.pattern-preview{grid-column:auto}}