:root{--color-stage:#e8e6e1;--color-surface:#f6f5f2;--color-surface-raised:#fff;--color-border:#e1ded8;--color-text:#1c1b19;--color-text-muted:#7a766e;--color-text-faint:#a8a39a;--color-accent:#1c1b19;--color-accent-contrast:#f6f5f2;--color-accent-hover:#34322e;--color-input:#ebe9e4;--color-input-hover:#e3e0da;--color-input-active:#d8d4cc;--color-success:#2f7d4f;--color-error:#b3392b;--color-error-hover:#9c2f23;--color-error-contrast:#fff;--color-experimental:#8e1b1b;--color-experimental-contrast:#fff;--color-drawing:#2f6bff;--drawing-overlay-opacity:.45;--color-brush-ring:#fff;--color-brush-ring-shadow:#0000008c;--color-mask-add:#2f6bff;--color-mask-subtract:#e5484d;--color-mask-handle:#fff;--color-mask-halo:#00000059;--color-checker-light:#fff;--color-checker-dark:#e3e0da;--checker-size:16px;--color-sketch-paper:#fff;--color-sketch-ink:#000;--color-sketch-guide:#a8a39a;--sketch-pad-size:200px;--font-sans:"Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--text-xs:11px;--text-sm:12px;--text-md:13px;--text-lg:15px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--tracking-caps:.06em;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-pill:999px;--shadow-art:0 1px 2px #0000000f, 0 16px 40px #0000001a;--shadow-toast:0 4px 16px #00000029;--shadow-control:0 1px 2px #00000014;--sidebar-left:264px;--sidebar-right:304px;--toolbar-width:44px;--tool-button-size:32px;--control-height:24px;--stage-control-height:34px;--shadow-window:0 8px 32px #0000002e;--ease:cubic-bezier(.2, .7, .2, 1);--duration:.16s}@media (width<=1180px){:root{--sidebar-left:216px;--sidebar-right:280px}}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--color-stage);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-md);-webkit-font-smoothing:antialiased;overflow:hidden}.app{grid-template-columns:var(--sidebar-left) var(--toolbar-width) minmax(0, 1fr) var(--sidebar-right);height:100dvh;display:grid}.sidebar{background:var(--color-surface);min-height:0;overflow-y:auto}.sidebar--left{border-right:1px solid var(--color-border);flex-direction:column;display:flex}.sidebar--right{border-left:1px solid var(--color-border);padding:var(--space-2) 0}.brand{justify-content:space-between;align-items:flex-start;gap:var(--space-2);padding:var(--space-5) var(--space-4) var(--space-4);display:flex}.brand__settings{width:28px;height:28px;color:var(--color-text-muted);background:0 0;margin-top:-2px;font-size:13px}.brand__settings:hover,.brand__settings.is-active{background:var(--color-input-hover);color:var(--color-text)}.settings-menu{z-index:50;width:264px;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-window);font-size:var(--text-xs);position:fixed}.settings-menu.is-hidden{display:none}.settings-menu__title{margin-bottom:var(--space-2);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-caps)}.settings-menu .settings-menu__pane .tp-rotv{--tp-container-horizontal-padding:0;--tp-blade-value-width:150px}.settings-menu__hint{margin:var(--space-2) 0 0;color:var(--color-text-muted);line-height:1.4}.settings-menu__section{align-items:flex-start;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border);flex-direction:column;display:flex}.settings-menu__section>.settings-menu__pane{align-self:stretch}.settings-menu__section>.settings-menu__hint{margin:0}.link-button{height:32px;padding:0 var(--space-4);border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-accent-contrast);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:background var(--duration) var(--ease);border:0;display:inline-grid}.link-button>span{text-align:center;grid-area:1/1;align-self:center}.link-button>span.is-hidden{visibility:hidden}.link-button:hover{background:var(--color-accent-hover)}.link-button.is-linked{background:var(--color-error);color:var(--color-error-contrast)}.link-button.is-linked:hover{background:var(--color-error-hover)}.link-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.brand__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:-.01em;margin:0}.brand__subtitle{margin:var(--space-1) 0 0;color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-caps)}.recipe-list{gap:var(--space-2);padding:0 var(--space-3) var(--space-4);flex-direction:column;display:flex}.recipe-card{gap:var(--space-1);width:100%;padding:var(--space-2);border-radius:var(--radius-lg);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease);background:0 0;border:1px solid #0000;flex-direction:column;display:flex}.recipe-card:hover{background:var(--color-surface-raised)}.recipe-card.is-active{background:var(--color-surface-raised);border-color:var(--color-border)}.recipe-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.recipe-card__thumb{aspect-ratio:16/9;width:100%;margin-bottom:var(--space-1);border-radius:var(--radius-md);background:var(--color-input);display:block}.recipe-card__title{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.recipe-card__name{min-width:0;font-weight:var(--weight-medium)}.recipe-card__desc{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.4}.recipe-card__tags{gap:var(--space-1);margin-top:var(--space-1);flex-wrap:wrap;display:flex}.tag{padding:1px var(--space-2);border-radius:var(--radius-pill);background:var(--color-input);color:var(--color-text-muted);font-size:var(--text-xs)}.tag--experimental{background:var(--color-experimental);color:var(--color-experimental-contrast);flex:none}.icon{flex:none;width:1em;height:1em;display:block;overflow:visible}.icon-button{width:var(--control-height);height:var(--control-height);border-radius:var(--radius-sm);background:var(--color-input);color:var(--color-text);cursor:pointer;transition:background var(--duration) var(--ease);border:0;flex:none;place-items:center;padding:0;font-size:12px;display:inline-grid}.icon-button:hover:not(:disabled){background:var(--color-input-hover)}.icon-button:active:not(:disabled){background:var(--color-input-active)}.icon-button:disabled{opacity:.4;cursor:default}.icon-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.icon-button--small{width:20px;height:20px;color:var(--color-text-muted);background:0 0;font-size:10px}.tooltip{z-index:100;padding:3px var(--space-2);border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-accent-contrast);font-size:var(--text-xs);white-space:pre;box-shadow:var(--shadow-toast);pointer-events:none;opacity:0;transition:opacity var(--duration) var(--ease);position:fixed;top:0;left:0}.tooltip.is-visible{opacity:1}.toolbar{align-items:center;gap:var(--space-1);padding:var(--space-3) 0;background:var(--color-surface);border-right:1px solid var(--color-border);flex-direction:column;display:flex}.tool-button{width:var(--tool-button-size);height:var(--tool-button-size);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:background var(--duration) var(--ease), color var(--duration) var(--ease), opacity var(--duration) var(--ease);background:0 0;border:0;place-items:center;padding:0;font-size:15px;display:grid}.tool-button:hover{background:var(--color-input-hover)}.tool-button.is-active{background:var(--color-accent);color:var(--color-accent-contrast)}.tool-button[aria-disabled=true]{opacity:.3;cursor:default}.tool-button[aria-disabled=true]:hover{background:0 0}.tool-button.is-active[aria-disabled=true]{background:var(--color-input-active);color:var(--color-text)}.tool-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.tool-button--compact{border-radius:var(--radius-sm);width:26px;height:26px;font-size:12px}.stage{flex-direction:column;min-width:0;min-height:0;display:flex;position:relative}.stage__controls{top:var(--space-3);right:var(--space-3);z-index:3;align-items:stretch;gap:var(--space-2);flex-direction:column;display:flex;position:absolute}.stage-button{height:var(--stage-control-height);border:1px solid var(--color-accent);border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-accent-contrast);box-shadow:var(--shadow-control);cursor:pointer;transition:background var(--duration) var(--ease);place-items:center;padding:0;font-size:14px;display:grid}.stage-button:hover,.stage-button.is-active{background:var(--color-accent-hover)}.stage-button[hidden]{display:none}.stage-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.view-switch{height:var(--stage-control-height);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-control);gap:2px;padding:2px;display:flex}.view-switch__option{width:calc(var(--stage-control-height) - 6px);height:100%;color:var(--color-text-muted);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:background var(--duration) var(--ease), color var(--duration) var(--ease);background:0 0;border:0;border-radius:2px;padding:0}.view-switch__option:hover{color:var(--color-text)}.view-switch__option.is-active{background:var(--color-accent);color:var(--color-accent-contrast)}.view-switch__option:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.stage__viewport{min-height:0;padding:var(--space-7);flex:1;place-items:center;display:grid;position:relative;overflow:hidden}.stage__frame{box-shadow:var(--shadow-art);position:relative}.stage__frame--transparent{background-color:var(--color-checker-light);background-image:conic-gradient(var(--color-checker-dark) 25%, transparent 0 50%, var(--color-checker-dark) 0 75%, transparent 0);background-size:var(--checker-size) var(--checker-size)}.stage__frame>canvas{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.stage__canvas--input{opacity:var(--drawing-overlay-opacity);transition:opacity var(--duration) var(--ease)}.stage__canvas--input.is-hidden{opacity:0}[data-tool=select]{cursor:var(--cursor-select,default)}[data-tool=direct]{cursor:var(--cursor-direct,default)}[data-tool=rect],[data-tool=ellipse]{cursor:var(--cursor-shape,crosshair)}[data-tool=pen]{cursor:var(--cursor-pen,crosshair)}.stage__viewport--drawing{cursor:none;touch-action:none}.stage__canvas--context.is-hidden,.stage__canvas--mask.is-hidden{visibility:hidden}.stage__viewport--mask{touch-action:none}.stage__viewport.is-drop-target .stage__frame{outline:2px dashed var(--color-mask-add);outline-offset:var(--space-2)}.stage__3d{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}.stage__3d:active{cursor:grabbing}.stage__3d.is-hidden{visibility:hidden;pointer-events:none}.stage__viewport--3d .stage__frame{visibility:hidden}.stage__brush{border:1px solid var(--color-brush-ring);box-shadow:0 0 0 1px var(--color-brush-ring-shadow), inset 0 0 0 1px var(--color-brush-ring-shadow);pointer-events:none;border-radius:50%;display:none;position:absolute;top:0;left:0}.stage__brush.is-visible{display:block}.stage__brush--erase{border-style:dashed}.stage__rope{pointer-events:none;width:1px;height:1px;filter:drop-shadow(0 0 1px var(--color-brush-ring-shadow));display:none;position:absolute;top:0;left:0;overflow:visible}.stage__rope.is-visible{display:block}.stage__rope line{stroke:var(--color-brush-ring);stroke-width:1px}.stage__rope circle{fill:var(--color-brush-ring)}.param-panel .sketch-slot{padding:0}.sketch-pad{-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}.sketch-pad__tools{padding:var(--space-2) var(--space-3) 0;justify-content:center;gap:2px;display:flex}.sketch-pad__area{padding:var(--space-3) var(--space-5);touch-action:none;place-items:center;display:grid;overflow:hidden}.sketch-pad__area[data-tool=brush],.sketch-pad__area[data-tool=eraser]{cursor:none}.sketch-pad__frame{width:100%;max-width:var(--sketch-pad-size);aspect-ratio:1;box-shadow:0 0 0 1px var(--color-border);position:relative}.sketch-pad__canvas{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.stage__caption{padding:0 var(--space-5) var(--space-4);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-xs);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (width<=1180px){.stage__viewport{padding:var(--space-5)}}.toast{left:50%;bottom:var(--space-6);max-width:min(480px, calc(100vw - 2 * var(--space-4)));padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-accent-contrast);font-size:var(--text-sm);box-shadow:var(--shadow-toast);opacity:0;pointer-events:none;transition:opacity var(--duration) var(--ease), transform var(--duration) var(--ease);position:fixed;transform:translate(-50%,8px)}.toast.is-visible{opacity:1;transform:translate(-50%)}.toast[data-kind=error]{background:var(--color-error)}.variations{z-index:2;gap:var(--space-3);padding:var(--space-3) var(--space-5) var(--space-5);background:var(--color-stage);flex-direction:column;display:flex;position:absolute;inset:0}.variations.is-hidden{display:none}.variations__head{align-items:center;gap:var(--space-2);height:var(--stage-control-height);margin-left:calc(var(--space-3) - var(--space-5));padding-right:120px;display:flex}.variations__grid{flex:1;place-content:center;gap:12px;min-height:0;display:grid}.variations__cell{box-shadow:var(--shadow-art);cursor:pointer;transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);background:0 0;border:0;padding:0;position:relative}.variations__cell:hover:not(.is-current):not(:disabled){box-shadow:0 0 0 2px var(--color-accent), var(--shadow-art);transform:translateY(-2px)}.variations__cell.is-current{box-shadow:0 0 0 2px var(--color-accent), 0 0 0 5px var(--color-surface), var(--shadow-art);cursor:default}.variations__cell.is-empty{visibility:hidden}.variations__cell:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.variations__canvas{width:100%;height:100%;display:block}.segmented{height:var(--stage-control-height);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-control);gap:2px;padding:2px;display:flex}.segmented__option{height:100%;padding:0 var(--space-3);color:var(--color-text-muted);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:background var(--duration) var(--ease), color var(--duration) var(--ease);background:0 0;border:0;border-radius:2px}.segmented__option:hover{color:var(--color-text)}.segmented__option.is-active{background:var(--color-accent);color:var(--color-accent-contrast)}.variations__head .icon-button{width:var(--stage-control-height);height:var(--stage-control-height);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-control);font-size:13px}.variations__head .icon-button:hover{background:var(--color-input-hover)}.variations__head .icon-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.param-panel .icon-row .tp-lblv_v{align-items:center;gap:var(--space-1);display:flex}.param-panel .icon-row .tp-lblv_v>:first-child{flex:1;min-width:0}.icon-row__button{font-size:12px}.icon-row__button.is-active{background:var(--color-accent);color:var(--color-accent-contrast)}.icon-row__button.is-active:hover:not(:disabled){background:var(--color-accent-hover)}.param-panel .palette-slot{padding:0 var(--space-3)}.palette-editor{gap:var(--space-2);padding:var(--space-2) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);font-size:var(--text-xs);flex-direction:column;display:flex}.palette-editor__row{align-items:center;gap:var(--space-1);display:flex}.palette-editor__input{height:var(--control-height);min-width:0;padding:0 var(--space-2);border-radius:var(--radius-sm);background:var(--color-input);color:var(--color-text);font:inherit;border:0;flex:1}.palette-editor__input:hover{background:var(--color-input-hover)}.palette-editor__input:focus-visible,.palette-editor__range:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}.palette-editor__field{align-items:center;gap:var(--space-2);grid-template-columns:64px 1fr auto;display:grid}.palette-editor__field .palette-editor__input{grid-column:2/4}.palette-editor__label{color:var(--color-text-muted)}.palette-editor__range{width:100%;accent-color:var(--color-accent)}.palette-editor__value{min-width:36px;color:var(--color-text-muted);font-family:var(--font-mono);text-align:right}.palette-editor__swatches{gap:var(--space-1);padding-top:var(--space-1);border-top:1px solid var(--color-border);flex-direction:column;display:flex}.palette-editor .palette-editor__pane .tp-rotv{--tp-container-horizontal-padding:0;--tp-blade-value-width:168px}.palette-editor__swatch .tp-lblv_v{align-items:center;gap:var(--space-1);display:flex}.palette-editor__swatch .tp-lblv_v>:first-child{flex:1;min-width:0}.palette-editor__text-button{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--color-text);font:inherit;cursor:pointer;background:0 0;border:0;align-self:flex-start}.palette-editor__text-button:hover:not(:disabled){background:var(--color-input-hover)}.palette-editor__text-button:disabled{opacity:.4;cursor:default}.palette-editor__restore{color:var(--color-text-muted);text-underline-offset:2px;align-self:center;text-decoration:underline}.param-panel,.param-panel .tp-rotv,.palette-editor__pane,.palette-editor__pane .tp-rotv,.settings-menu__pane,.settings-menu__pane .tp-rotv{--tp-base-background-color:var(--color-surface);--tp-base-shadow-color:transparent;--tp-base-border-radius:var(--radius-md);--tp-base-font-family:var(--font-sans);--tp-blade-border-radius:var(--radius-sm);--tp-blade-horizontal-padding:var(--space-1);--tp-blade-value-width:168px;--tp-button-background-color:var(--color-accent);--tp-button-background-color-active:#000;--tp-button-background-color-focus:var(--color-accent-hover);--tp-button-background-color-hover:var(--color-accent-hover);--tp-button-foreground-color:var(--color-accent-contrast);--tp-container-background-color:transparent;--tp-container-background-color-active:var(--color-input-active);--tp-container-background-color-focus:var(--color-input-hover);--tp-container-background-color-hover:var(--color-input-hover);--tp-container-foreground-color:var(--color-text);--tp-container-horizontal-padding:var(--space-3);--tp-container-unit-size:var(--control-height);--tp-container-unit-spacing:var(--space-1);--tp-container-vertical-padding:var(--space-2);--tp-groove-foreground-color:var(--color-border);--tp-input-background-color:var(--color-input);--tp-input-background-color-active:var(--color-input-active);--tp-input-background-color-focus:var(--color-input-hover);--tp-input-background-color-hover:var(--color-input-hover);--tp-input-foreground-color:var(--color-text);--tp-label-foreground-color:var(--color-text-muted);--tp-monitor-background-color:var(--color-input);--tp-monitor-foreground-color:var(--color-text-muted)}.param-panel .tp-rotv,.palette-editor__pane .tp-rotv,.settings-menu__pane .tp-rotv{font-size:var(--text-xs)}.param-panel .tp-fldv_b{font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-caps)}@media (width<=1180px){.param-panel,.param-panel .tp-rotv{--tp-blade-value-width:148px}}