:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#201c4a;background:#fafbff}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{margin:0;min-width:0;min-height:0;-webkit-font-smoothing:antialiased}button{font:inherit}.app-shell{width:100vw;height:100dvh;min-height:0;overflow:hidden;display:grid;place-items:center;padding:clamp(12px,4vmin,64px);background:#fafbff}.workspace-shell{width:min(100%,1580px);height:100%;max-height:833px;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:16px}.generator-card{width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;padding:24px;display:flex;flex-direction:column;gap:24px;background:#fff;border:1px solid #e0e6ff;border-radius:48px}.topbar{height:48px;padding:8px 48px;display:flex;align-items:center;justify-content:space-between}.topbar h1{margin:0;font-weight:400;font-size:16px;line-height:19px;letter-spacing:-.02em}.brand-mark{width:32px;height:32px;object-fit:contain}.canvas-wrap{flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}.pattern-canvas{position:relative;flex:0 0 auto;max-width:100%;max-height:100%;overflow:hidden;border:0;border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px #e0e6ff;touch-action:none}.grid-guides,.grid-hit-area{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(var(--columns),1fr);grid-template-rows:repeat(var(--rows),1fr)}.grid-guides{z-index:1}.grid-guides span{border-right:1px solid #e0e6ff;border-bottom:1px solid #e0e6ff}.grid-hit-area{z-index:10}.grid-cell{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;background:transparent;border:0;cursor:crosshair}.grid-cell:focus-visible{outline:3px solid #201c4a;outline-offset:-3px}.pattern-layer{z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.reference-pattern-fill{z-index:2;position:absolute;left:37.5%;top:25%;width:25%;height:50%;pointer-events:none;-webkit-mask:url(/assets/reference-union.svg) center / 100% 100% no-repeat;mask:url(/assets/reference-union.svg) center / 100% 100% no-repeat}.layers-panel{width:252px;height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #e0e6ff;border-radius:36px;background:#fff}.layers-content{width:100%;padding:24px;display:flex;flex-direction:column;gap:24px}.layers-header{width:100%;height:20px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}.layers-header h2{margin:0;color:#201c4a;font-size:16px;font-weight:400;line-height:normal}.layers-header-actions{display:flex;align-items:center;gap:6px}.layers-list{width:100%;display:flex;flex-direction:column;gap:8px}.layer-row{width:100%;min-height:52px;padding:8px;display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:16px;background:transparent;transition:border-color .15s,background .15s,opacity .15s}.layer-row.active{border-color:#e0e6ff;background:#fafbff}.layer-row.hidden .layer-preview,.layer-row.hidden .layer-name{opacity:.42}.layer-select{min-width:0;flex:1 1 auto;padding:0;display:flex;align-items:center;gap:8px;border:0;color:#515151;background:transparent;cursor:pointer;text-align:left}.layer-preview{width:36px;height:36px;flex:0 0 36px;display:block;border-radius:8px;background:#c8d1fd;box-shadow:inset 0 0 0 1px #201c4a08}.layer-details{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:4px}.layer-name{min-width:0;overflow:hidden;color:#515151;font-size:12px;line-height:normal;text-overflow:ellipsis;white-space:nowrap}.layer-opacity{width:88px;height:10px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:transparent}.layer-opacity::-webkit-slider-runnable-track{height:1px;border-radius:1px;background:#c8d1fd}.layer-opacity::-webkit-slider-thumb{width:5px;height:5px;margin-top:-2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:50%;background:#201c4a}.layer-opacity::-moz-range-track{height:1px;border:0;border-radius:1px;background:#c8d1fd}.layer-opacity::-moz-range-thumb{width:5px;height:5px;border:0;border-radius:50%;background:#201c4a}.layer-actions{width:24px;flex:0 0 24px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.layer-icon-button{width:16px;height:16px;position:relative;padding:0;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;cursor:pointer}.layer-icon-button img{width:16px;height:16px;display:block}.layer-icon-button:hover{background:#eef1ff}.layer-icon-button.is-hidden{opacity:.45}.layer-icon-button.is-hidden:after{content:"";width:17px;height:1px;position:absolute;left:0;top:8px;border-radius:1px;background:#a6b2fb;transform:rotate(-45deg)}.layer-add-button img{width:15px;height:15px;opacity:.72}.toolbar{height:56px;min-height:56px;padding:0;border:1px solid #e0e6ff;border-radius:60px;display:flex;align-items:center;background:#fafbff}.toolbar-left{width:100%;min-width:0;height:100%;padding:0 64px;display:flex;align-items:center;justify-content:space-between;gap:16px}.tool-group{display:flex;align-items:center;gap:8px}.toolbar-section-divider{width:1px;height:33px;flex:0 0 1px;background:#201c4a33}.paint-controls{display:flex;align-items:center;gap:4px}.icon-button{width:32px;height:32px;flex:0 0 32px;border:1px solid transparent;border-radius:8px;display:grid;place-items:center;color:#201c4a;background:transparent;cursor:pointer;transition:background .15s,border-color .15s}.icon-button img{width:16px;height:16px}.icon-button:hover,.icon-button.active{background:#f0efff;border-color:#dedbff}.icon-button:disabled{opacity:.3;cursor:not-allowed}.mode-control{height:32px;display:flex;align-items:center;border:1px solid transparent;border-radius:8px;background:transparent;transition:background .15s,border-color .15s}.mode-control.active{gap:10px;padding-right:8px;border-color:#e0e6ff;background:#eef1ff}.mode-trigger{width:32px;height:32px;flex:0 0 32px;padding:7px;display:grid;place-items:center;border:0;border-radius:8px;color:#201c4a;background:transparent;cursor:pointer}.mode-trigger:hover{background:#e0e6ff94}.mode-trigger img{width:18px;height:18px;display:block}.mode-size-input{width:22px;height:22px;padding:0;border:1px solid #e0e6ff;border-radius:4px;outline:0;color:#201c4a;background:#fff;text-align:center;font-size:12px;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.mode-size-input:focus{border-color:#a6b2fb}.mode-size-input::-webkit-inner-spin-button,.mode-size-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.inline-control{height:34px;display:flex;align-items:center;border:1px solid transparent;border-radius:8px;background:transparent;transition:background .16s,border-color .16s}.inline-control.expanded{gap:10px;padding-right:8px;border-color:#e0e6ff;background:#eef1ff}.control-trigger{width:32px;height:32px;padding:7px;display:grid;place-items:center;flex:0 0 32px;border:0;border-radius:8px;background:transparent;cursor:pointer}.control-trigger:hover{background:#f0efff}.control-trigger img{width:18px;height:18px}.radius-control.expanded{gap:10px;padding-right:8px}.curve-options{height:32px;display:flex;align-items:center;padding:2px 0}.curve-divider{width:1px;height:18px;flex:0 0 1px}.curve-preset-group{display:flex;align-items:center}.curve-preset{width:24px;height:24px;padding:4px;display:grid;place-items:center;border:0;background:transparent;opacity:.3;cursor:pointer}.curve-preset:hover,.curve-preset.selected{opacity:1}.curve-preview{width:16px;height:16px;display:block;border:2px solid #201c4a}.curve-preview.low{border-radius:2px}.curve-preview.medium{border-radius:6px}.curve-preview.high{border-radius:20px}.color-control{position:relative}.color-control.expanded{width:306px;flex:0 0 306px;gap:4px;padding-right:8px}.color-trigger-swatch{width:16px;height:16px;display:block;border-radius:4px}.color-selection-panel{width:306px;height:96px;position:absolute;left:-1px;bottom:calc(100% - 1px);z-index:9;overflow:hidden;border:1px solid #e0e6ff;border-radius:8px 8px 0 0;background:#d9d9d9;cursor:pointer}.color-selection-panel,.stroke-selection-panel{touch-action:none}.picker-handle{width:12px;height:12px;position:absolute;z-index:2;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #201c4a8c;transform:translate(-50%,-50%);pointer-events:none}.color-options{height:32px;display:flex;align-items:center;gap:8px;padding:2px 0}.color-divider{width:1px;height:18px;flex:0 0 1px}.inline-control .color-hex-input{width:72px;height:18px;padding:0 8px;flex:0 0 72px;border-color:#a6b2fb;text-align:left;font-size:10px}.color-choice-row{display:flex;align-items:center}.remove-color-preset,.color-preset{width:24px;height:24px;padding:4px;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;cursor:pointer}.remove-color-preset img{width:16px;height:16px}.color-preset>span{width:16px;height:16px;display:block;border-radius:4px}.gradient-preset{width:76px;height:24px;padding:4px;display:grid;place-items:stretch;border:0;border-radius:4px;background:transparent;cursor:pointer}.gradient-preset>span{display:block;border-radius:4px}.remove-color-preset:hover,.remove-color-preset.selected,.color-preset:hover,.color-preset.selected,.gradient-preset:hover,.gradient-preset.selected{background:#a6b2fb47}.stroke-control{position:relative}.stroke-control.expanded{width:328px;flex:0 0 328px;gap:4px;padding-right:8px}.stroke-trigger-swatch{width:16px;height:16px;display:block;border-radius:4px}.stroke-selection-panel{width:328px;height:96px;position:absolute;left:-1px;bottom:calc(100% - 1px);z-index:9;overflow:hidden;border:1px solid #e0e6ff;border-radius:8px 8px 0 0;background:#d9d9d9;cursor:pointer}.stroke-options{height:32px;display:flex;align-items:center;gap:8px;padding:2px 0}.stroke-inputs{display:flex;align-items:center;gap:4px}.inline-control .stroke-weight-input{width:18px;height:18px;padding:0;flex:0 0 18px;border-color:#a6b2fb;text-align:center;font-size:10px}.inline-control .stroke-hex-input{width:72px;height:18px;padding:0 8px;flex:0 0 72px;border-color:#a6b2fb;text-align:left;font-size:10px}.stroke-weight-input::-webkit-inner-spin-button,.stroke-weight-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.stroke-choice-row{display:flex;align-items:center}.remove-stroke-preset,.stroke-color-preset{width:24px;height:24px;padding:4px;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;cursor:pointer}.remove-stroke-preset img{width:16px;height:16px}.stroke-color-preset>span{width:16px;height:16px;display:block;border-radius:4px}.stroke-gradient-preset{width:76px;height:24px;padding:4px;display:grid;place-items:stretch;border:0;border-radius:4px;background:transparent;cursor:pointer}.stroke-gradient-preset>span{display:block;border-radius:4px}.remove-stroke-preset:hover,.remove-stroke-preset.selected,.stroke-color-preset:hover,.stroke-color-preset.selected,.stroke-gradient-preset:hover,.stroke-gradient-preset.selected{background:#a6b2fb47}.dimension-fields{display:flex;align-items:center;gap:4px}.dimension-fields span{color:#201c4a;font-size:12px}.inline-control input{width:22px;height:22px;padding:0;border:1px solid #e0e6ff;border-radius:4px;outline:0;color:#201c4a;background:#fff;text-align:center;font-size:12px;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.brush-control input::-webkit-inner-spin-button,.brush-control input::-webkit-outer-spin-button,.radius-control input::-webkit-inner-spin-button,.radius-control input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.brush-control input:focus,.radius-control input:focus{border-color:#a6b2fb}.layers-export{width:100%;padding:16px}.layers-export-card{width:100%;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding-top:16px;border-radius:16px;background:#201c4a}.layers-export-options{width:100%;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:10px}.layers-export-format{min-width:0;padding:0;display:flex;align-items:center;gap:4px;border:0;color:#a6b2fb;background:transparent;font-size:16px;cursor:pointer}.layers-export-format img{width:24px;height:24px;display:block}.layers-export-actions{display:flex;align-items:center;gap:4px}.layers-export-actions button{width:auto;min-width:43px;height:22px;padding:0 8px;border-radius:4px;font-size:10px;cursor:pointer}.copy-export{border:1px solid #a6b2fb;color:#201c4a;background:#a6b2fb}.save-export{border:1px solid #a6b2fb;color:#a6b2fb;background:transparent}.figma-insert-button{height:30px;margin:-6px 16px 0;border:1px solid #a6b2fb;border-radius:8px;color:#a6b2fb;background:transparent;cursor:pointer}.layers-export-button{width:100%;height:48px;border:0;border-radius:16px;color:#fff;background:#4840ba;font-size:16px;cursor:pointer}.layers-export-button:hover{background:#574ddd}@media(max-width:1200px){.workspace-shell{grid-template-columns:minmax(0,1fr) 220px}.layers-panel{width:220px}.layers-content{padding:24px 18px}.toolbar-left{padding:0 24px;gap:10px}.tool-group{gap:5px}.layers-export-options{padding:0 10px;gap:6px}}@media(max-width:860px){.app-shell{padding:16px}.workspace-shell{grid-template-columns:minmax(0,1fr) 190px;gap:10px}.generator-card{height:100%;min-height:0;padding:16px;border-radius:28px;gap:16px}.layers-panel{width:190px;border-radius:28px}.layers-content{padding:24px 10px}.layers-header{padding:0 8px}.topbar{padding:4px 10px}.canvas-wrap{min-height:0}.toolbar{gap:4px;border-radius:30px}.toolbar-left{padding:0 8px;gap:6px}.tool-group{min-width:0;gap:3px}.inline-control.expanded{gap:4px}.layers-export{padding:10px}.layers-export-card{gap:10px}.layers-export-options{padding:0 8px;gap:4px}.layers-export-format{font-size:13px}.layers-export-actions button{min-width:34px;padding:0 5px}}@media(max-width:620px){.app-shell{padding:8px}.workspace-shell{grid-template-columns:minmax(0,1fr) 132px;gap:6px}.generator-card{padding:10px;gap:10px;border-radius:22px}.layers-panel{width:132px;border-radius:22px}.layers-content{padding:18px 6px}.layers-header{padding:0 6px}.layers-header h2{font-size:13px}.layer-row{padding:6px;gap:5px}.layer-preview{width:28px;height:28px;flex-basis:28px}.layer-name{font-size:10px}.layer-opacity{width:50px}.topbar{height:40px}.toolbar{height:50px;min-height:50px}.toolbar-section-divider{display:none}.layers-export{padding:6px}.layers-export-card{padding-top:10px;gap:8px}.layers-export-options{flex-direction:column}.layers-export-format{font-size:11px}.layers-export-format img{width:18px;height:18px}.layers-export-button{height:42px;font-size:13px}}