@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";html,body,#root{height:100%;margin:0}.ribbon-app,.ribbon-app *,.ribbon-app :before,.ribbon-app :after{box-sizing:border-box}.ribbon-app p{margin:0 0 6px}.ribbon-app button{font:inherit}.ribbon-app{--ink-950:#12161d;--ink-900:#191f28;--ink-800:#262e3a;--ink-700:#333d4b;--ink-200:#ccd5e0;--ink-400:#7c8899;--paper-100:#eef2f6;--paper-200:#e2e9f0;--paper-300:#c7d3de;--paper-900:#1b2431;--ribbon-600:#c23b4e;--ribbon-700:#9c2f40;--ribbon-100:#f6dfe3;background:var(--ink-950);height:100dvh;color:var(--ink-200);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;flex-direction:column;font-family:Space Grotesk,sans-serif;display:flex;overflow:hidden}.ribbon-app :focus-visible{outline:2px solid var(--ribbon-600);outline-offset:2px}.ghost-btn{border:1px solid var(--ink-700);color:var(--ink-200);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:5px;justify-content:center;align-items:center;gap:5px;min-height:34px;padding:8px 12px;font-size:11.5px;transition:border-color .15s,color .15s;display:flex}.ghost-btn:disabled{opacity:.4;cursor:default}.head-actions{flex:none;align-items:center;gap:6px;display:flex}.main{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.code-panel{background:var(--ink-950);flex-direction:column;flex:1 1 0;min-height:0;display:flex;overflow:hidden}.draft-panel{background:var(--paper-100);flex-direction:column;flex:1 1 0;min-height:0;display:flex;overflow:hidden}.ribbon-seam{background:var(--ribbon-600);flex:none;justify-content:center;align-items:center;width:100%;height:20px;display:flex;position:relative}.seam-stitch{border-top:1.5px dashed #ffffff8c;height:0;position:absolute;top:50%;left:18px;right:18px;transform:translateY(-50%)}.seam-tab{z-index:1;background:var(--ribbon-700);color:#fff;cursor:pointer;letter-spacing:.08em;touch-action:manipulation;border:none;border-radius:0 0 6px 6px;align-items:center;gap:5px;padding:4px 12px;font-family:Space Grotesk,sans-serif;font-size:10.5px;font-weight:700;transition:filter .15s;display:flex;position:relative}.seam-icon{display:inline-flex}.seam-icon-side{display:none}.panel-head{flex:none;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.code-panel .panel-head{border-bottom:1px solid var(--ink-800)}.panel-head-left{align-items:baseline;display:flex}.panel-title{letter-spacing:.12em;font-size:11px;font-weight:700}.code-panel .panel-title{color:var(--ink-200)}.filename{color:var(--ink-400);margin-left:8px;font-family:JetBrains Mono,monospace;font-size:11.5px}.info-note{color:var(--ink-400);border-bottom:1px solid var(--ink-800);padding:6px 14px;font-family:JetBrains Mono,monospace;font-size:11px}.parse-error{color:#fff;background:var(--ribbon-700);padding:6px 14px;font-family:JetBrains Mono,monospace;font-size:11.5px}.code-body{flex:1;font-family:JetBrains Mono,monospace;font-size:13px;line-height:1.65;display:flex;overflow:hidden}.gutter{text-align:right;color:var(--ink-400);-webkit-user-select:none;user-select:none;background:var(--ink-900);border-right:1px solid var(--ink-800);padding:14px 10px 14px 16px;overflow:hidden}.code-textarea{color:var(--ink-200);resize:none;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;background:0 0;border:none;outline:none;flex:1;padding:14px 16px;overflow:auto}.toolbar{border-top:1px solid var(--paper-300);background:var(--paper-200);flex-wrap:wrap;flex:none;justify-content:center;gap:6px;padding:12px 16px;display:flex}.toolbar button{touch-action:manipulation;border:1px solid var(--paper-300);color:var(--paper-900);cursor:pointer;background:#fff;border-radius:6px;align-items:center;gap:6px;padding:6px 10px;font-size:12.5px;font-weight:500;transition:border-color .15s,color .15s;display:flex}.draft-body{flex:1;display:flex;overflow:hidden}.canvas-column{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.canvas-wrap{overscroll-behavior:contain;flex:1;justify-content:center;align-items:flex-start;padding:24px;display:flex;overflow:auto}.canvas-frame{width:100%}.draft-svg{border:1px solid var(--paper-300);touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border-radius:6px;width:100%;height:auto;display:block;box-shadow:0 1px 3px #1b243114}.handle{fill:var(--paper-100);stroke:var(--ribbon-600)}.sel-outline{fill:none;stroke:var(--ribbon-600);pointer-events:none}.props-panel{border-left:1px solid var(--paper-300);background:var(--paper-200);flex-direction:column;flex:0 0 240px;width:240px;display:flex;overflow-y:auto}.props-panel-head{letter-spacing:.1em;color:var(--paper-900);opacity:.6;border-bottom:1px solid var(--paper-300);flex:none;padding:10px 14px;font-size:11px;font-weight:700}.explorer-list{flex-direction:column;display:flex}.explorer-empty{color:var(--paper-900);opacity:.55;margin:0;padding:14px;font-size:12px;line-height:1.45}.layer-row-wrap{border-bottom:1px solid var(--paper-300)}.layer-row{cursor:pointer;text-align:left;width:100%;color:var(--paper-900);touch-action:manipulation;background:0 0;border:none;align-items:center;gap:7px;padding:9px 14px;font-family:Space Grotesk,sans-serif;font-size:12.5px;font-weight:500;transition:background .12s;display:flex}.layer-row-wrap.active>.layer-row{background:var(--ribbon-100);color:var(--ribbon-700);font-weight:600}.layer-chevron{color:var(--paper-900);opacity:.45;flex:none;transition:transform .15s}.layer-chevron.expanded{transform:rotate(90deg)}.layer-row-wrap.active .layer-chevron{opacity:.9;color:var(--ribbon-700)}.layer-icon{opacity:.65;flex:none;align-items:center;display:flex}.layer-row-wrap.active .layer-icon{opacity:1}.layer-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.layer-body{border-top:1px solid var(--paper-300);background:#fff;padding:12px 14px 16px}.layer-fields{flex-direction:column;gap:10px;display:flex}.props-hint{color:var(--paper-900);opacity:.5;word-break:break-all;margin:0;font-family:JetBrains Mono,monospace;font-size:10.5px}.snap-section,.sub-section{border-top:1px solid var(--paper-300);flex-direction:column;gap:8px;margin-top:2px;padding-top:10px;display:flex}.snap-toggle{color:var(--paper-900);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:12px;font-weight:500;display:flex}.snap-toggle input[type=checkbox]{width:15px;height:15px;accent-color:var(--ribbon-600);cursor:pointer}.props-foot{border-top:1px solid var(--paper-300);justify-content:flex-end;align-items:center;margin-top:2px;padding-top:10px;display:flex}.props-actions{flex-wrap:wrap;gap:6px;display:flex}.props-actions button{border:1px solid var(--paper-300);color:var(--paper-900);cursor:pointer;touch-action:manipulation;background:#fff;border-radius:4px;justify-content:center;align-items:center;gap:5px;padding:5px 10px;font-size:11.5px;font-weight:500;display:flex}.points-section{border-top:1px solid var(--paper-300);flex-direction:column;gap:8px;margin-top:2px;padding-top:10px;display:flex}.points-head{letter-spacing:.06em;text-transform:uppercase;color:var(--paper-900);opacity:.55;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;display:flex}.points-count{letter-spacing:0;font-family:JetBrains Mono,monospace}.points-list{flex-direction:column;gap:6px;display:flex}.point-row{align-items:flex-end;gap:6px;display:flex}.point-index{color:var(--paper-900);opacity:.45;text-align:right;flex:0 0 14px;font-family:JetBrains Mono,monospace;font-size:10.5px;line-height:27px}.point-remove{border:1px solid var(--paper-300);width:24px;height:27px;color:var(--paper-900);cursor:pointer;touch-action:manipulation;background:#fff;border-radius:4px;flex:none;justify-content:center;align-items:center;transition:border-color .15s,color .15s;display:flex}.point-remove:disabled{opacity:.3;cursor:default}.add-point{border:1px dashed var(--paper-300);width:100%;color:var(--paper-900);cursor:pointer;touch-action:manipulation;background:#fff;border-radius:5px;justify-content:center;align-items:center;gap:5px;padding:7px 10px;font-size:12px;font-weight:500;transition:border-color .15s,color .15s;display:flex}.field-row{gap:8px;display:flex}.field{flex-direction:column;flex:1;gap:4px;min-width:0;font-size:11px;display:flex}.field span{text-transform:uppercase;letter-spacing:.06em;color:var(--paper-900);opacity:.55;font-weight:600}.field span:empty{display:none}.field input[type=number],.field input[type=text]{border:1px solid var(--paper-300);color:var(--paper-900);background:#fff;border-radius:4px;width:100%;padding:5px 7px;font-family:JetBrains Mono,monospace;font-size:12.5px}.path-input{border:1px solid var(--paper-300);color:var(--paper-900);resize:vertical;white-space:pre-wrap;word-break:break-word;background:#fff;border-radius:4px;outline:none;width:100%;min-height:92px;padding:7px 8px;font-family:JetBrains Mono,monospace;font-size:11.5px;line-height:1.55}.path-input::placeholder{color:var(--paper-900);opacity:.35}.color-input{flex-direction:column;gap:6px;display:flex}.color-mode,.select-input{border:1px solid var(--paper-300);color:var(--paper-900);background:#fff;border-radius:4px;width:100%;padding:5px 6px;font-family:JetBrains Mono,monospace;font-size:11.5px}.field input::placeholder{color:var(--paper-900);opacity:.3;font-style:italic}.color-custom{align-items:center;gap:6px;display:flex}.color-custom input[type=color]{border:1px solid var(--paper-300);background:0 0;border-radius:4px;flex:none;width:26px;height:26px;padding:0}.color-custom input[type=text]{flex:1;min-width:0}@media (hover:hover) and (pointer:fine){.ghost-btn:hover:not(:disabled){border-color:var(--ribbon-600);color:#fff}.seam-tab:hover{filter:brightness(1.15)}.toolbar button:hover{border-color:var(--ribbon-600);color:var(--ribbon-700)}.handle:hover{fill:var(--ribbon-100)}.layer-row:hover{background:#1b24310d}.props-actions button:hover:not(.danger){border-color:var(--paper-900)}.props-actions button.danger:hover{background:var(--ribbon-600);border-color:var(--ribbon-600);color:#fff}.point-remove:hover:not(:disabled){border-color:var(--ribbon-600);color:var(--ribbon-600)}.add-point:hover{border-color:var(--ribbon-600);color:var(--ribbon-700)}}.toolbar button:active{background:var(--ribbon-100);border-color:var(--ribbon-600);color:var(--ribbon-700)}.layer-row:active{background:#1b243114}.props-actions button:active{background:var(--paper-200)}.props-actions button.danger:active{background:var(--ribbon-600);border-color:var(--ribbon-600);color:#fff}.point-remove:active:not(:disabled),.add-point:active{background:var(--ribbon-100);border-color:var(--ribbon-600);color:var(--ribbon-700)}.seam-tab:active{filter:brightness(.92)}.ghost-btn:active:not(:disabled){border-color:var(--ribbon-600);color:#fff}@media (pointer:coarse){.toolbar{gap:8px;padding:10px 12px}.toolbar button{min-height:44px;padding:8px 14px;font-size:13.5px}.layer-row{min-height:48px;padding:14px;font-size:14px}.props-actions button{min-height:40px;padding:8px 12px;font-size:12.5px}.seam-tab{padding:9px 20px;font-size:11.5px}.ribbon-seam{height:26px}.ghost-btn{min-height:40px;padding:9px 14px;font-size:12.5px}.snap-toggle{min-height:40px;font-size:13.5px}.snap-toggle input[type=checkbox]{width:20px;height:20px}.color-custom input[type=color]{width:40px;height:40px}.point-index{font-size:12px;line-height:40px}.point-remove{width:40px;height:40px}.add-point{min-height:44px;font-size:13.5px}.field input[type=number],.field input[type=text],.color-mode,.select-input{padding:9px 10px;font-size:16px}.path-input{min-height:120px;padding:10px;font-size:16px}.code-textarea,.gutter{font-size:14px}}@media (width>=721px){.main{flex-direction:row}.draft-panel{flex:auto;min-width:0}.ribbon-seam{flex:0 0 22px;width:22px;height:auto}.seam-stitch{border-top:none;border-left:1.5px dashed #ffffff8c;width:0;height:auto;inset:18px auto 18px 50%;transform:translate(-50%)}.seam-tab{border-radius:6px;flex-direction:column;padding:12px 4px}.seam-icon-stack{display:none}.seam-icon-side{display:inline-flex}.seam-tab-label{writing-mode:vertical-rl;transform:rotate(180deg)}.code-panel{flex:0 50%;min-width:280px;max-width:80vw}.ribbon-seam.resizable{cursor:col-resize}.ribbon-seam.resizable .seam-tab{cursor:pointer}}@media (width<=720px){.draft-body{flex-direction:column}.canvas-wrap{padding:12px}.canvas-frame{max-width:none!important}.props-panel{border-left:none;border-top:1px solid var(--paper-300);-webkit-overflow-scrolling:touch;flex:none;width:100%;max-height:42vh}.props-panel-head{z-index:2;background:var(--paper-200);position:sticky;top:0}.toolbar{scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto}.toolbar::-webkit-scrollbar{display:none}.toolbar button{flex:none}.filename{display:none}.gutter{padding-left:10px;padding-right:7px}}@media (width<=480px){.head-actions .btn-label{display:none}.head-actions .ghost-btn{padding:8px 11px}}@media (height<=480px){.canvas-wrap{padding:8px}.toolbar{padding:6px 12px}.toolbar button{min-height:38px}.props-panel{max-height:50vh}}