.alif-canvas-editor{--canvas-accent:var(--alif-color-primary);--canvas-border:var(--alif-color-border);--canvas-panel:var(--alif-color-surface);--canvas-text:var(--alif-color-foreground);background:var(--alif-color-background);color:var(--canvas-text);font-family:var(--alif-font-sans);outline:none;grid-template-rows:48px minmax(0,1fr);height:100%;min-height:520px;display:grid;overflow:hidden}.alif-canvas-toolbar{background:color-mix(in srgb, var(--alif-color-surface) calc(var(--alif-opacity-toolbar) * 100%), transparent);border-bottom:var(--alif-border-default) solid var(--canvas-border);align-items:center;gap:var(--alif-space-4);padding:var(--alif-space-2) var(--alif-space-3);z-index:10;display:flex;position:relative}.alif-canvas-toolbar__group{align-items:center;gap:var(--alif-space-1);display:flex}.alif-canvas-toolbar__group--end{margin-left:auto}.alif-canvas-toolbar button,.alif-canvas-delete{border:var(--alif-border-default) solid transparent;border-radius:var(--alif-radius-sm);color:inherit;cursor:pointer;font:inherit;font-size:var(--alif-font-size-sm);padding:var(--alif-space-2) var(--alif-space-3);background:0 0;font-weight:600}.alif-canvas-toolbar button:hover{background:var(--alif-color-interactive);border-color:var(--canvas-border)}.alif-canvas-toolbar button:disabled{cursor:default;opacity:var(--alif-opacity-disabled)}.alif-canvas-file-input{display:none}.alif-canvas-editor__workspace{grid-template-columns:224px minmax(0,1fr) 248px;min-height:0;display:grid}.alif-canvas-navigator{background:var(--canvas-panel);border-right:var(--alif-border-default) solid var(--canvas-border);flex-direction:column;min-width:0;display:flex;overflow:hidden}.alif-canvas-navigator__tabs{border-bottom:var(--alif-border-default) solid var(--canvas-border);grid-template-columns:1fr 1fr;display:grid}.alif-canvas-navigator button{color:var(--alif-color-subdued-foreground);cursor:pointer;font:inherit;font-size:var(--alif-font-size-xs);min-width:0;padding:var(--alif-space-2);text-align:left;background:0 0;border:0}.alif-canvas-navigator__tabs button{text-align:center;text-transform:capitalize}.alif-canvas-navigator__tabs button.is-active,.alif-canvas-navigator button.is-selected,.alif-canvas-navigator button:hover{background:var(--alif-color-interactive);color:var(--canvas-text)}.alif-canvas-navigator__content{gap:var(--alif-space-1);padding:var(--alif-space-2);display:grid;overflow:auto}.alif-canvas-navigator__row,.alif-canvas-navigator__variable{align-items:center;gap:var(--alif-space-1);grid-template-columns:minmax(0,1fr) auto;display:grid}.alif-canvas-navigator__row>button:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.alif-canvas-navigator__variable{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.alif-canvas-navigator__variable input{background:var(--alif-color-input);border:var(--alif-border-default) solid var(--alif-color-border-subtle);border-radius:var(--alif-radius-sm);color:var(--canvas-text);font:inherit;font-size:var(--alif-font-size-xs);min-width:0;padding:var(--alif-space-1)}.alif-canvas-navigator__add{margin-top:var(--alif-space-2);border:var(--alif-border-default) solid var(--canvas-border)!important;border-radius:var(--alif-radius-sm)!important;color:var(--canvas-text)!important}.alif-canvas-navigator__item,.alif-canvas-layer>button{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}.alif-canvas-layer{padding-left:var(--alif-space-2);display:grid}.alif-canvas-layer:first-child{padding-left:0}.alif-canvas-navigator__empty{color:var(--alif-color-quiet-foreground);font-size:var(--alif-font-size-xs);margin:var(--alif-space-2);line-height:1.4}.alif-canvas-stage{background-color:var(--alif-color-canvas);background-image:radial-gradient(circle, var(--alif-color-canvas-dot) var(--alif-border-default), transparent var(--alif-border-default));cursor:grab;touch-action:none;background-size:20px 20px;min-width:0;position:relative;overflow:hidden}.alif-canvas-stage:active{cursor:grabbing}.alif-canvas-world{transform-origin:0 0;width:1px;height:1px;position:absolute;top:0;left:0}.alif-canvas-node{background:var(--node-fill);box-sizing:border-box;cursor:move;height:var(--node-height);opacity:var(--node-opacity);transform:translate(var(--node-x), var(--node-y)) rotate(var(--node-rotation));transform-origin:50%;width:var(--node-width);position:absolute;top:0;left:0}.alif-canvas-node.is-selected:after{border:var(--alif-border-focus) solid var(--canvas-accent);box-sizing:border-box;content:"";inset:calc(-1 * var(--alif-border-focus));pointer-events:none;position:absolute}.alif-canvas-transform{border:var(--alif-border-focus) solid var(--canvas-accent);box-sizing:border-box;pointer-events:none;position:absolute}.alif-canvas-transform button{background:var(--alif-color-surface);border:var(--alif-border-focus) solid var(--canvas-accent);height:var(--alif-space-3);pointer-events:auto;width:var(--alif-space-3);border-radius:999px;padding:0;position:absolute}.alif-canvas-transform__resize{bottom:calc(-1 * var(--alif-space-2));cursor:nwse-resize;right:calc(-1 * var(--alif-space-2))}.alif-canvas-transform__rotate{cursor:grab;left:calc(50% - var(--alif-space-2));top:calc(-1 * var(--alif-space-8))}.alif-canvas-marquee{background:color-mix(in srgb, var(--canvas-accent) 14%, transparent);border:var(--alif-border-focus) solid var(--canvas-accent);box-sizing:border-box;pointer-events:none;position:absolute}.alif-canvas-node--frame{border:var(--alif-border-default) solid var(--alif-color-canvas-frame);box-shadow:var(--alif-shadow-raised) color-mix(in srgb, var(--alif-color-foreground) calc(var(--alif-opacity-shadow) * 100%), transparent)}.alif-canvas-node--component{border:var(--alif-border-focus) solid var(--canvas-accent)}.alif-canvas-node--group{border:var(--alif-border-default) dashed var(--alif-color-canvas-frame)}.alif-canvas-image{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.alif-canvas-frame-label{color:var(--alif-color-muted-foreground);font-size:var(--alif-font-size-body);left:0;top:calc(-1 * var(--alif-space-6));font-weight:600;position:absolute}.alif-canvas-node--rectangle{border-radius:var(--alif-radius-sm)}.alif-canvas-node--text{background:0 0;align-items:center;display:flex}.alif-canvas-text{font-size:var(--node-font-size);overflow-wrap:anywhere;outline:none;width:100%;min-height:1em;line-height:1.15}.alif-canvas-text--editing{cursor:text;font:inherit;resize:none;-webkit-user-select:text;user-select:text;background:0 0;border:0;height:100%;padding:0}.alif-canvas-text--editing:focus{outline:none}.alif-canvas-zoom{background:color-mix(in srgb, var(--alif-color-overlay) calc(var(--alif-opacity-overlay) * 100%), transparent);border-radius:var(--alif-radius-sm);bottom:var(--alif-space-3);color:var(--alif-color-primary-foreground);font-size:var(--alif-font-size-compact);font-variant-numeric:tabular-nums;padding:var(--alif-space-2);pointer-events:none;right:var(--alif-space-3);position:absolute}.alif-canvas-preview{background:var(--alif-color-overlay);z-index:30;display:grid;position:absolute;inset:0}.alif-canvas-preview__bar{background:var(--canvas-panel);border-bottom:var(--alif-border-default) solid var(--canvas-border);align-items:center;gap:var(--alif-space-2);padding:var(--alif-space-2) var(--alif-space-3);display:flex}.alif-canvas-preview__bar select,.alif-canvas-preview__bar button{background:var(--alif-color-input);border:var(--alif-border-default) solid var(--canvas-border);border-radius:var(--alif-radius-sm);color:var(--canvas-text);font:inherit;padding:var(--alif-space-1) var(--alif-space-2)}.alif-canvas-preview__bar button{margin-left:auto}.alif-canvas-preview__backdrop{padding:var(--alif-space-6);justify-content:center;align-items:center;display:flex;overflow:auto}.alif-canvas-preview__device{box-shadow:var(--alif-shadow-raised);max-width:100%;position:relative;overflow:hidden}.alif-canvas-preview__device.is-scrollable{overflow:auto}.alif-canvas-preview-node{box-sizing:border-box;color:var(--canvas-text);text-align:left;border:0;align-items:center;padding:0;display:flex;position:absolute;overflow:hidden}.alif-canvas-preview-node img{object-fit:cover;width:100%;height:100%}.alif-canvas-preview-node.is-fixed{position:sticky}.alif-canvas-preview__overlay{backdrop-filter:blur(var(--alif-space-1));background:color-mix(in srgb, var(--alif-color-overlay) 30%, transparent);position:absolute;inset:0}.alif-canvas-preview-node__badge{background:var(--canvas-accent);color:var(--alif-color-primary-foreground);font-size:var(--alif-font-size-xs);padding:var(--alif-space-1);position:absolute;top:0;right:0}.alif-canvas-properties{background:var(--canvas-panel);border-left:var(--alif-border-default) solid var(--canvas-border);gap:var(--alif-space-4);padding:var(--alif-space-4);flex-direction:column;display:flex;overflow:auto}.alif-canvas-properties label{color:var(--alif-color-subdued-foreground);font-size:var(--alif-font-size-xs);gap:var(--alif-space-2);letter-spacing:.04em;text-transform:uppercase;font-weight:700;display:grid}.alif-canvas-properties input,.alif-canvas-properties textarea,.alif-canvas-properties select{background:var(--alif-color-input);border:var(--alif-border-default) solid var(--alif-color-border-subtle);border-radius:var(--alif-radius-sm);box-sizing:border-box;color:var(--canvas-text);font:inherit;font-size:var(--alif-font-size-sm);min-width:0;padding:var(--alif-space-2);resize:vertical;text-transform:none;width:100%}.alif-canvas-properties__fieldset{border:var(--alif-border-default) solid var(--canvas-border);gap:var(--alif-space-2);padding:var(--alif-space-2);margin:0;display:grid}.alif-canvas-properties__fieldset legend{color:var(--alif-color-quiet-foreground);font-size:var(--alif-font-size-xs);padding:0 var(--alif-space-1);text-transform:uppercase;font-weight:700}.alif-canvas-properties__toggle{align-items:center;gap:var(--alif-space-2);font-size:var(--alif-font-size-xs)!important;display:flex!important}.alif-canvas-properties__toggle input{width:auto;min-width:auto}.alif-canvas-properties__action{background:var(--alif-color-interactive);border:var(--alif-border-default) solid var(--canvas-border);border-radius:var(--alif-radius-sm);color:var(--canvas-text);cursor:pointer;font:inherit;padding:var(--alif-space-2)}.alif-canvas-properties input:focus,.alif-canvas-properties textarea:focus{border-color:var(--canvas-accent);outline:var(--alif-border-focus) solid color-mix(in srgb, var(--alif-color-focus) calc(var(--alif-opacity-focus) * 100%), transparent)}.alif-canvas-properties__heading{border-bottom:var(--alif-border-default) solid var(--canvas-border);gap:var(--alif-space-1);padding-bottom:var(--alif-space-3);display:grid}.alif-canvas-properties__heading span{color:var(--alif-color-quiet-foreground);font-size:var(--alif-font-size-xs);text-transform:uppercase}.alif-canvas-properties__heading strong{font-size:var(--alif-font-size-md)}.alif-canvas-properties__grid{gap:var(--alif-space-2);grid-template-columns:1fr 1fr;display:grid}.alif-canvas-color-row{gap:var(--alif-space-2);grid-template-columns:36px 1fr;display:grid}.alif-canvas-color-row input[type=color]{height:33px;padding:var(--alif-space-1)}.alif-canvas-delete{border-color:var(--alif-color-danger-border);color:var(--alif-color-danger-foreground);margin-top:auto}.alif-canvas-component-actions button{background:var(--alif-color-interactive);border:var(--alif-border-default) solid var(--canvas-border);border-radius:var(--alif-radius-sm);color:var(--canvas-text);cursor:pointer;font:inherit;font-size:var(--alif-font-size-sm);padding:var(--alif-space-2);width:100%}.alif-canvas-delete:hover{background:var(--alif-color-danger-surface)}.alif-canvas-properties__empty{color:var(--alif-color-quiet-foreground);font-size:var(--alif-font-size-sm);gap:var(--alif-space-1);text-align:center;margin:auto 0;display:grid}.alif-canvas-properties__empty strong{color:var(--alif-color-foreground)}@media (width<=760px){.alif-canvas-editor__workspace{grid-template-columns:1fr}.alif-canvas-properties,.alif-canvas-navigator{display:none}.alif-canvas-toolbar{gap:var(--alif-space-1);overflow-x:auto}}