@layer reset,base,tokens,recipes,utilities;:root{--editor-toolbar-height: 48px;--editor-left-panel-width: 260px;--editor-right-panel-width: 260px}body{background:#111}:root,body,#root{width:100%;height:100%;margin:0;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}.app{position:relative;width:100vw;height:100vh;overflow:hidden}.canvas-event-target{position:absolute;top:0;right:0;bottom:0;left:0;background:transparent;overflow:hidden;touch-action:none}.canvas-area{position:absolute;top:var(--editor-toolbar-height);left:var(--editor-left-panel-width);right:var(--editor-right-panel-width);bottom:0}.center-view{position:fixed;top:var(--editor-toolbar-height);left:var(--editor-left-panel-width);right:var(--editor-right-panel-width);bottom:0}.layers-panel{position:fixed;top:var(--editor-toolbar-height, 48px);left:0;bottom:0;width:var(--editor-left-panel-width, 260px);display:flex;flex-direction:column;background-color:#252525;border-right:1px solid #3d3d3d}.panel-header{padding:12px;font-size:12px;font-weight:600;color:#b3b3b3;border-bottom:1px solid #3d3d3d}.layers-list{flex:1;overflow-y:auto;padding:8px 0}.layer-item{-webkit-user-select:none;user-select:none}.layer-row{display:flex;align-items:center;gap:4px;height:28px;padding-right:8px;cursor:pointer;transition:background-color .1s}.layer-row:hover,.layer-row.hovered{background-color:#2d2d2d}.layer-row.selected{background-color:#0d99ff33}.layer-row.selected:hover{background-color:#0d99ff44}.layer-row.hidden-layer{opacity:.5}.layer-row.root-layer{font-weight:600}.layer-collapse-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:none;border:none;color:#666;font-size:8px;cursor:pointer;flex-shrink:0}.layer-collapse-btn:hover:not(:disabled){color:#999}.layer-collapse-btn:disabled{cursor:default}.layer-name{flex:1;font-size:12px;color:#e0e0e0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:grab}.layer-name:active{cursor:grabbing}.layer-actions{display:flex;gap:2px;opacity:0;transition:opacity .1s}.layer-row:hover .layer-actions{opacity:1}.layer-action-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:none;border:none;border-radius:2px;color:#888;font-size:12px;cursor:pointer}.layer-action-btn:hover{background-color:#3d3d3d}.layer-action-btn.active{color:#0d99ff}.properties-panel{position:fixed;top:var(--editor-toolbar-height, 48px);right:0;bottom:0;width:var(--editor-right-panel-width, 260px);display:flex;flex-direction:column;background-color:#252525;border-left:1px solid #3d3d3d}.panel-tabs{display:flex;border-bottom:1px solid #3d3d3d}.tab-button{flex:1;padding:12px;border:none;background-color:transparent;color:#b3b3b3;font-size:12px;font-weight:500;cursor:pointer;transition:color .15s,background-color .15s}.tab-button:hover{background-color:#2d2d2d}.tab-button.active{color:#fff;border-bottom:2px solid #0d99ff}.panel-content{flex:1;overflow-y:auto;padding:12px}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:#666;font-size:12px}.property-section{margin-bottom:16px}.section-title{margin-bottom:8px;font-size:11px;font-weight:600;color:#b3b3b3;text-transform:uppercase}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-row{display:flex;gap:8px}.property-section label{display:flex;align-items:center;gap:8px}.property-section label span{font-size:11px;color:#888;min-width:16px}.property-section input[type=number],.property-section input[type=text]{flex:1;padding:6px 8px;border:1px solid #3d3d3d;border-radius:4px;background-color:#1e1e1e;color:#fff;font-size:12px}.property-section input[type=number]:focus,.property-section input[type=text]:focus{outline:none;border-color:#0d99ff}.property-section input[type=color]{width:32px;height:32px;padding:0;border:1px solid #3d3d3d;border-radius:4px;cursor:pointer}.property-section select{flex:1;padding:6px 8px;border:1px solid #3d3d3d;border-radius:4px;background-color:#1e1e1e;color:#fff;font-size:12px;cursor:pointer}.property-section select:focus{outline:none;border-color:#0d99ff}.design-tab{display:flex;flex-direction:column;gap:4px}.code-tab{display:flex;flex-direction:column;height:100%;gap:8px}.code-header{display:flex;justify-content:space-between;align-items:center}.code-toggle{display:flex;gap:2px;background-color:#1e1e1e;padding:2px;border-radius:4px}.toggle-btn{padding:4px 10px;border:none;border-radius:3px;background-color:transparent;color:#888;font-size:11px;cursor:pointer;transition:all .15s}.toggle-btn:hover{color:#b3b3b3}.toggle-btn.active{background-color:#3d3d3d;color:#fff}.copy-btn{padding:4px 12px;border:1px solid #3d3d3d;border-radius:4px;background-color:transparent;color:#b3b3b3;font-size:11px;cursor:pointer;transition:all .15s}.copy-btn:hover{background-color:#3d3d3d;color:#fff}.code-preview{flex:1;margin:0;padding:12px;border-radius:4px;background-color:#1e1e1e;color:#e0e0e0;font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;line-height:1.5;overflow:auto;white-space:pre}.code-preview code{color:#9cdcfe}.toolbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;height:var(--editor-toolbar-height, 48px);padding:0 12px;background-color:#2d2d2d;border-bottom:1px solid #3d3d3d}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:4px}.toolbar-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:4px;background-color:transparent;color:#fff;font-size:16px;cursor:pointer;transition:background-color .15s}.toolbar-button:hover{background-color:#3d3d3d}.toolbar-button.active{background-color:#0d99ff}.zoom-level{min-width:48px;text-align:center;font-size:12px;color:#b3b3b3}.toolbar-separator{width:1px;height:24px;margin:0 8px;background-color:#3d3d3d}.component-menu-container{position:relative}.component-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:180px;padding:4px 0;background-color:#2d2d2d;border:1px solid #3d3d3d;border-radius:6px;box-shadow:0 4px 12px #0000004d;z-index:1000}.menu-item{display:block;width:100%;padding:8px 12px;border:none;background-color:transparent;color:#e0e0e0;font-size:12px;text-align:left;cursor:pointer}.menu-item:hover:not(:disabled){background-color:#3d3d3d}.menu-item:disabled{color:#666;cursor:not-allowed}.menu-separator{height:1px;margin:4px 0;background-color:#3d3d3d}.menu-label{padding:8px 12px 4px;font-size:10px;font-weight:600;color:#888;text-transform:uppercase}