*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:#0d0d0d;color:#e0e0e0}#app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:12px;padding:0 16px;background:#1a1a1a;border-bottom:1px solid #2a2a2a;height:44px;flex-shrink:0}.logo{font-size:14px;font-weight:600;color:#a855f7;letter-spacing:.5px;font-family:JetBrains Mono,monospace}.topbar select{background:#2a2a2a;color:#ccc;border:1px solid #3a3a3a;border-radius:4px;padding:5px 10px;font-size:12px;outline:none;cursor:pointer}.topbar select:hover{border-color:#555}.topbar button{background:#a855f7;color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s}.topbar button:hover{background:#9333ea}.topbar button:disabled{opacity:.5;cursor:not-allowed}#share-btn{margin-left:auto;background:#2a2a2a;color:#ccc;border:1px solid #3a3a3a}#share-btn:hover{background:#333;border-color:#555}.snap-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:#999;cursor:pointer;-webkit-user-select:none;user-select:none}.snap-toggle input[type=checkbox]{accent-color:#a855f7;cursor:pointer}.snap-toggle span{font-family:JetBrains Mono,monospace}.workspace{display:flex;flex:1;overflow:hidden}.editor-panel{width:38%;min-width:260px;border-right:1px solid #2a2a2a;display:flex;flex-direction:column}.editor-panel textarea{flex:1;background:#111;color:#d4d4d4;border:none;padding:16px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:13px;line-height:1.6;resize:none;outline:none;-moz-tab-size:2;tab-size:2}.editor-panel textarea::selection{background:#a855f74d}.editor-panel textarea::placeholder{color:#444}.preview-panel{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px;background:#0a0a0a}#preview{display:flex;align-items:flex-start;justify-content:center}.props-panel{width:210px;min-width:210px;background:#141414;border-left:1px solid #2a2a2a;display:flex;flex-direction:column;overflow-y:auto}.props-header{padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#666;border-bottom:1px solid #2a2a2a;font-family:JetBrains Mono,monospace}.props-content{padding:10px 14px}.props-id{font-size:11px;font-family:JetBrains Mono,monospace;color:#a855f7;margin-bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.props-group{margin-bottom:14px}.props-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#555;margin-bottom:6px}.props-row{display:flex;gap:6px}.props-row-single{align-items:center}.props-field{display:flex;align-items:center;gap:4px;flex:1}.props-field span{font-size:11px;font-family:JetBrains Mono,monospace;color:#666;min-width:14px}.props-field input[type=number]{width:100%;background:#1e1e1e;color:#d4d4d4;border:1px solid #333;border-radius:3px;padding:4px 6px;font-size:12px;font-family:JetBrains Mono,monospace;outline:none;-moz-appearance:textfield}.props-field input[type=number]::-webkit-inner-spin-button,.props-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.props-field input[type=number]:focus{border-color:#a855f7}.props-field input[type=number]::placeholder{color:#444;font-style:italic}.props-row input[type=range]{flex:1;accent-color:#a855f7;height:4px}.props-opacity-val{font-size:11px;font-family:JetBrains Mono,monospace;color:#888;min-width:28px;text-align:right}.props-empty{flex:1;display:flex;align-items:center;justify-content:center;color:#444;font-size:12px;padding:24px}.layers-section{border-top:1px solid #2a2a2a;display:flex;flex-direction:column;flex:1;min-height:0}.layers-header{padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#666;border-bottom:1px solid #222;font-family:JetBrains Mono,monospace}.layers-list{overflow-y:auto;flex:1}.layer-item{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:11px;font-family:JetBrains Mono,monospace;cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom:1px solid #1a1a1a;transition:background .1s}.layer-item:hover{background:#1e1e1e}.layer-item.layer-selected{background:#2a1a3a;color:#c084fc}.layer-item.layer-bg{cursor:default;color:#444}.layer-type{color:#555;min-width:36px;font-size:10px;text-transform:uppercase}.layer-item.layer-selected .layer-type{color:#a855f7}.layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#999}.layer-item.layer-selected .layer-name{color:#e0e0e0}.statusbar{display:flex;align-items:center;padding:0 16px;background:#1a1a1a;border-top:1px solid #2a2a2a;height:28px;flex-shrink:0;font-size:11px;color:#555;font-family:JetBrains Mono,monospace}.ps-canvas{box-shadow:0 4px 24px #00000080}.ps-canvas [data-block-id]{cursor:move}.ps-canvas [data-block-id]:hover{outline:1px dashed rgba(168,85,247,.3);outline-offset:1px}.ps-canvas [contenteditable=true]{cursor:text!important;outline:2px solid rgba(168,85,247,.8)!important;outline-offset:2px!important}.ps-grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px)}.ps-sel-overlay{position:absolute;pointer-events:none;z-index:9999;box-sizing:border-box}.ps-sel-primary{border:1.5px solid #a855f7}.ps-sel-secondary{border:1.5px solid rgba(168,85,247,.5)}.ps-handle{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid #a855f7;border-radius:1px;box-sizing:border-box;pointer-events:auto}.ps-handle-nw{top:-4px;left:-4px;cursor:nw-resize}.ps-handle-n{top:-4px;left:calc(50% - 4px);cursor:n-resize}.ps-handle-ne{top:-4px;right:-4px;cursor:ne-resize}.ps-handle-e{top:calc(50% - 4px);right:-4px;cursor:e-resize}.ps-handle-se{bottom:-4px;right:-4px;cursor:se-resize}.ps-handle-s{bottom:-4px;left:calc(50% - 4px);cursor:s-resize}.ps-handle-sw{bottom:-4px;left:-4px;cursor:sw-resize}.ps-handle-w{top:calc(50% - 4px);left:-4px;cursor:w-resize}.ps-rotation-line{position:absolute;left:50%;top:-28px;width:1px;height:24px;background:#a855f7;transform:translate(-50%);pointer-events:none}.ps-handle-rotation{position:absolute;left:50%;top:-38px;width:12px;height:12px;border:1.5px solid #a855f7;border-radius:50%;background:#fff;transform:translate(-50%);cursor:grab;pointer-events:auto;box-sizing:border-box}.ps-handle-rotation:hover{background:#f3e8ff}.ps-snap-guide{position:absolute;z-index:9998;pointer-events:none}.ps-snap-guide-v{top:0;width:1px;background:#f43f5e;opacity:.7}.ps-snap-guide-h{left:0;height:1px;background:#f43f5e;opacity:.7}