:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#18212b;background:#dfe4e9;font-synthesis:none;text-rendering:optimizeLegibility;--blue: #2563eb;--blue-soft: #eaf0ff;--border: #d8dde3;--muted: #66717f;--surface: #ffffff;--chrome: #f6f7f9;--rail: #18212b;--orange: #e47718}*{box-sizing:border-box}body{margin:0;min-width:1100px;min-height:100vh;overflow:hidden}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #93b2ff;outline-offset:1px}.app-shell{display:grid;grid-template-rows:52px minmax(0,1fr) 26px;width:100vw;height:100vh;background:#e9edf1}.topbar{display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid #cfd5dc;background:#fff;box-shadow:0 1px 3px #18212b0d;z-index:10}.brand{display:flex;align-items:center;gap:9px;min-width:174px}.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;color:#fff;background:#1f56c8;font-size:15px;font-weight:800}.brand>span:last-child{display:flex;flex-direction:column;line-height:1.05}.brand strong{font-size:13px;letter-spacing:.01em}.brand small{margin-top:3px;color:var(--muted);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.topbar-group{display:flex;align-items:center;gap:2px}.topbar button,.inline-actions button,.section-title button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 9px;border:1px solid transparent;border-radius:5px;background:transparent;color:#3d4855;font-size:11px;font-weight:600;cursor:pointer}.topbar button:hover,.inline-actions button:hover,.section-title button:hover{border-color:#d7dce2;background:#f5f7f9}.topbar button:disabled{opacity:.35;cursor:default}.topbar-divider{width:1px;height:22px;margin:0 2px;background:#e0e4e8}.topbar-spacer{flex:1}.zoom-control{display:flex;align-items:center;height:30px;padding:0 2px;border:1px solid #d8dde3;border-radius:5px;background:#fafbfc}.zoom-control button{width:25px;padding:0}.zoom-control span{width:42px;text-align:center;color:#485361;font-size:10px;font-variant-numeric:tabular-nums}.topbar .export-secondary{border-color:#cdd4dd}.topbar .export-primary{padding:0 13px;border-color:#c65f0d;color:#fff;background:var(--orange)}.topbar .export-primary:hover{border-color:#a84d07;background:#cf6510}.editor-layout{display:grid;grid-template-columns:48px minmax(0,1fr) 308px;min-height:0}.tool-rail{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:10px;border-right:1px solid #0e151c;background:var(--rail)}.tool-button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:5px;background:transparent;color:#aeb8c3;cursor:pointer}.tool-button:hover{color:#fff;background:#24303c}.tool-button.active{border-color:#4f7de5;color:#fff;background:#2856bd}.workspace{position:relative;min-width:0;min-height:0;overflow:hidden;background-color:#e3e7eb;background-image:linear-gradient(45deg,#dfe3e7 25%,transparent 25%),linear-gradient(-45deg,#dfe3e7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dfe3e7 75%),linear-gradient(-45deg,transparent 75%,#dfe3e7 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.canvas-scroll{position:absolute;top:24px;right:0;bottom:0;left:24px;overflow:auto;padding:42px 92px 230px 54px}.canvas-frame{position:relative;flex:none;background:#fff;box-shadow:0 0 0 1px #4e586429,0 10px 28px #2b35402b}.canvas-frame canvas{image-rendering:auto}.ruler{position:absolute;z-index:3;color:#788391;background:#f5f7f8;font-size:8px;-webkit-user-select:none;user-select:none}.ruler-horizontal{top:0;right:0;left:24px;display:flex;height:24px;padding-left:44px;border-bottom:1px solid #cdd3d9}.ruler-horizontal span{width:50px;padding-top:5px;border-left:1px solid #d7dce1}.ruler-vertical{top:24px;bottom:0;left:0;width:24px;border-right:1px solid #cdd3d9}.ruler-vertical span{display:block;height:50px;padding:3px 0 0 3px;border-top:1px solid #d7dce1;writing-mode:vertical-rl}.inspector{min-height:0;overflow-y:auto;border-left:1px solid #ccd2d8;background:#f8f9fa}.inspector-section{padding:13px 14px 15px;border-bottom:1px solid #dfe3e7;background:#fff}.section-title{display:flex;align-items:center;justify-content:space-between;min-height:24px;margin-bottom:10px;color:#283440;font-size:11px;font-weight:750;letter-spacing:.015em}.section-title button,.inline-actions button{width:25px;height:25px;padding:0}.inline-actions{display:flex;gap:1px}.selection-kind{margin:-4px 0 10px;color:#7a8591;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.number-field{display:grid;grid-template-columns:37px minmax(0,1fr);align-items:center;gap:5px;color:#65707c;font-size:10px}.input-shell{position:relative;display:flex;align-items:center}.input-shell input{width:100%;height:28px;padding:0 7px;border:1px solid #d3d9df;border-radius:4px;color:#26313c;background:#fbfcfd;font-size:10px;font-variant-numeric:tabular-nums}.input-shell input:focus{border-color:#7da2f6;background:#fff}.input-shell small{position:absolute;right:6px;color:#8a949f;font-size:8px;pointer-events:none}.color-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.color-row label,.full-color-row{display:flex;align-items:center;gap:8px;color:#65707c;font-size:10px}input[type=color]{width:30px;height:25px;padding:2px;border:1px solid #d3d9df;border-radius:4px;background:#fff}.curve-editor,.stroke-editor,.arrange-editor{margin-top:12px;padding-top:10px;border-top:1px solid #e1e7ee}.button-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.button-grid button{height:26px;border:1px solid #d3d9df;border-radius:4px;color:#394653;background:#fbfcfd;font-size:9px;font-weight:700;cursor:pointer}.button-grid button:hover{border-color:#7c9fea;color:#1f56c8;background:#f6f9ff}.select-field{display:grid;grid-template-columns:37px minmax(0,1fr);align-items:center;gap:5px;color:#65707c;font-size:10px}.select-field select{width:100%;height:28px;border:1px solid #d3d9df;border-radius:4px;color:#26313c;background:#fbfcfd;font-size:10px}.empty-copy{margin:2px 0 0;color:#7c8793;font-size:10px;line-height:1.55}.pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}.pattern-tile{min-width:0;padding:3px;border:1px solid #d7dce2;border-radius:5px;background:#fff;cursor:pointer}.pattern-tile:hover,.pattern-tile.selected{border-color:#4f7de5;box-shadow:0 0 0 1px #4f7de5}.pattern-tile img{display:block;width:100%;aspect-ratio:1;border-radius:3px;object-fit:cover;image-rendering:pixelated}.pattern-tile span{display:block;overflow:hidden;margin-top:4px;color:#606b77;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.pattern-tile.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:59px;color:#647180;background:#f8fafb}.pattern-fields{margin-bottom:10px}.toggle-row{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 11px}.toggle-row label{display:inline-flex;align-items:center;gap:4px;color:#5f6a76;font-size:9px}.toggle-row input{accent-color:var(--blue)}.toggle-line{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;color:#5f6a76;font-size:9px;font-weight:600}.toggle-line input{accent-color:var(--blue)}.wide-secondary,.compact-primary{display:flex;align-items:center;justify-content:center;gap:6px;height:30px;border:1px solid #cbd2da;border-radius:5px;background:#fff;color:#34414e;font-size:10px;font-weight:700;cursor:pointer}.wide-secondary{width:100%}.wide-secondary:hover{border-color:#7c9fea;color:#1f56c8;background:#f6f9ff}.no-fill-button{margin-top:9px}.layer-list{display:flex;flex-direction:column;gap:5px}.layer-row{display:grid;grid-template-columns:26px minmax(0,1fr) 24px 24px 24px 24px;align-items:center;gap:4px;padding:5px;border:1px solid #dce3ea;border-radius:6px;background:#fff}.layer-row.active{border-color:#6e95ea;background:#f5f8ff;box-shadow:inset 3px 0 0 var(--blue)}.layer-row.dragging{opacity:.55}.layer-row:has(+.layer-row.dragging),.layer-row:hover{border-color:#b7c9ef}.layer-row button{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid #d7dfe7;border-radius:4px;background:#fff;color:#536171;cursor:pointer}.layer-row button:hover{border-color:#8ca7e5;color:#1f56c8}.layer-row .layer-select{width:26px;padding:0;font-size:7px;font-weight:800;text-transform:uppercase}.layer-row input{min-width:0;height:22px;border:1px solid #d7dfe7;border-radius:4px;padding:0 6px;color:#2d3845;font-size:10px;font-weight:600}.layer-type{max-width:22px;overflow:hidden;text-overflow:clip}.full-color-row{margin-top:10px}.full-color-row code{margin-left:auto;color:#697582;font-size:9px}.machine-section{background:#fbfcfe}.machine-dot{display:inline-flex;align-items:center;gap:5px;color:#257a4d;font-size:8px;font-weight:700}.machine-dot:before{width:6px;height:6px;border-radius:50%;background:#2b9b61;content:""}.physical-size{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding:9px;border:1px solid #dae1ea;border-radius:5px;color:#6c7783;background:#f3f6fa;font-size:9px}.physical-size strong{color:#23303c;font-size:10px;font-variant-numeric:tabular-nums}.region-label{margin:12px 0 8px;color:#596572;font-size:9px;font-weight:700;text-transform:uppercase}.preview-panel{position:absolute;right:14px;bottom:14px;z-index:5;width:320px;overflow:hidden;border:1px solid #c8d0d9;border-radius:6px;background:#fff;box-shadow:0 10px 25px #1c252e2e}.preview-heading{display:flex;align-items:center;justify-content:space-between;width:100%;height:42px;padding:0 12px;border:0;background:#f7f9fb;cursor:pointer}.preview-heading span{display:flex;flex-direction:column;align-items:flex-start}.preview-heading strong{font-size:10px}.preview-heading small{margin-top:2px;color:#7c8792;font-size:8px}.preview-body{padding:9px;border-top:1px solid #dfe4e8}.pixel-preview{position:relative;display:grid;place-items:center;height:138px;overflow:hidden;border:1px solid #ccd3da;background:linear-gradient(45deg,#e7eaee 25%,transparent 25%),linear-gradient(-45deg,#e7eaee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7eaee 75%),linear-gradient(-45deg,transparent 75%,#e7eaee 75%),#f5f6f7;background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px}.pixel-preview canvas{max-width:100%;max-height:100%;image-rendering:pixelated;object-fit:contain}.preview-loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;color:#596574;background:#fffc;font-size:10px}.preview-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.preview-meta>span{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:700}.preview-meta .safe{color:#24784b}.preview-meta .warning{color:#a96010}.compact-primary{height:27px;padding:0 9px;border-color:#c65f0d;color:#fff;background:var(--orange)}.statusbar{display:flex;align-items:center;gap:8px;padding:0 12px;border-top:1px solid #cbd1d8;color:#697581;background:#f8f9fa;font-size:9px}.status-ready{width:6px;height:6px;border-radius:50%;background:#2f9b62}.status-spacer{flex:1}@media(max-width:1180px){.editor-layout{grid-template-columns:44px minmax(0,1fr) 282px}.brand{min-width:144px}.file-actions button{padding:0 5px}.preview-panel{width:290px}}