@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/nunito-latin-400-normal-r8SDr6Up.woff2)format("woff2"),url(/assets/nunito-latin-400-normal-DKg4f3fz.woff)format("woff")}@font-face{font-family:Nunito;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/nunito-latin-600-normal-Br8yIETf.woff2)format("woff2"),url(/assets/nunito-latin-600-normal-Cd0eNu1l.woff)format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/jetbrains-mono-latin-400-normal-V6pRDFza.woff2)format("woff2"),url(/assets/jetbrains-mono-latin-400-normal-6-qcROiO.woff)format("woff")}*{box-sizing:border-box}html{min-height:100%;color:var(--ui-text-primary);background:var(--ui-background);font-family:var(--font-body);transition:background var(--duration-fast) var(--standard-easing), color var(--duration-fast) var(--standard-easing);overflow-x:clip}body{min-height:100vh;margin:0;overflow-x:clip}button,input,select{font:inherit}button,select{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,.open-action:focus-within,.empty-cta:focus-visible{outline:var(--focus-ring) solid var(--color-accent-current,var(--color-accent));outline-offset:var(--focus-offset)}.app-shell{width:100%;min-width:0;max-width:100%;min-height:100vh;padding:var(--control-gap);gap:var(--toolbar-gap);background:var(--ui-background);color:var(--ui-text-primary);flex-direction:column;display:flex}.top-bar{z-index:3;min-height:var(--top-bar-height);padding-block:var(--control-gap);align-items:center;gap:var(--toolbar-gap);background:var(--ui-background);grid-template-columns:minmax(0,1fr) max-content;display:grid;position:sticky;top:0}.brand,.top-actions,.brand-copy,.canvas-header,.tool-panel-head,.compact-color,.sample-button{align-items:center;display:flex}.brand{gap:var(--control-gap);min-width:0}.brand-mark{width:var(--icon-button);aspect-ratio:1;border-radius:var(--radius-pill);background:var(--color-accent-current,var(--color-accent));color:var(--ui-text-primary);font-weight:var(--weight-semibold);transition:transform var(--duration-fast) var(--easing), background var(--duration-fast) var(--standard-easing);flex:none;place-items:center;display:grid;position:relative}.brand-mark:before{content:"";inset:calc(var(--unit) * .5);border-radius:inherit;background:var(--ui-background);z-index:0;position:absolute}.brand-mark svg{z-index:1;width:70%;height:70%;color:var(--ui-background);display:block;position:relative}.brand-mark:hover{transform:rotate(-6deg)scale(1.04)}.brand-copy{flex-direction:column;align-items:flex-start;min-width:0;line-height:1.15}.brand-copy strong{max-width:100%;font-size:var(--font-size-title);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.brand-copy span,.canvas-readout,.tool-panel-head small,.empty-palette{color:var(--ui-text-secondary);font-size:var(--font-size-eyebrow)}.top-actions{justify-content:flex-end;align-items:center;gap:calc(var(--unit) * 2);flex-wrap:wrap;flex:none;display:flex}.topbar-select{appearance:none;height:calc(var(--unit) * 9);min-width:calc(var(--unit) * 18);border:var(--border-hairline) solid var(--ui-border);border-radius:var(--radius-pill);padding-inline:calc(var(--unit) * 3) calc(var(--unit) * 7);color:var(--ui-text-primary);font-family:var(--font-mono);font-size:var(--font-size-eyebrow);font-weight:var(--weight-semibold);background:var(--ui-surface);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - calc(var(--unit) * 3.5)) calc(50% - calc(var(--unit) * .5)), calc(100% - calc(var(--unit) * 2)) calc(50% - calc(var(--unit) * .5));background-size:calc(var(--unit) * 1.5) calc(var(--unit) * 1.5);filter:drop-shadow(var(--shadow-filter-float));transition:transform var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--standard-easing);cursor:pointer;background-repeat:no-repeat;padding-block:0;position:relative}.topbar-select:hover{border-color:var(--color-accent-current,var(--color-accent));transform:scale(1.02)}.topbar-select option{background:var(--ui-surface);color:var(--ui-text-primary)}.icon-action{width:calc(var(--unit) * 10);min-height:calc(var(--unit) * 9);border:var(--border-hairline) solid var(--ui-border);border-radius:var(--radius-pill);background:var(--ui-surface);color:var(--ui-text-primary);font-size:var(--font-size-eyebrow);font-weight:var(--weight-semibold);filter:drop-shadow(var(--shadow-filter-float));transition:transform var(--duration-fast) var(--easing), background var(--duration-fast) var(--standard-easing), color var(--duration-fast) var(--standard-easing), border-color var(--duration-fast) var(--standard-easing);place-items:center;padding-inline:0;display:inline-grid;position:relative}.icon-action-glyph{width:calc(var(--unit) * 4);aspect-ratio:1;pointer-events:none;place-items:center;display:inline-grid}.icon-action-glyph svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.icon-action.is-active{border-color:var(--color-accent-current,var(--color-accent));background:var(--color-accent-current,var(--color-accent));color:var(--ui-text-primary)}.theme-toggle[aria-pressed=true]{border-color:var(--color-accent-current,var(--color-accent));color:var(--color-accent-current,var(--color-accent));background:var(--ui-surface)}.top-file-input{opacity:0;cursor:pointer;position:absolute;inset:0}.main-stage{gap:var(--toolbar-gap);flex-direction:column;flex:1;min-width:0;max-width:100%;display:flex}.canvas-stage{gap:var(--toolbar-gap);flex-direction:column;min-width:0;max-width:100%;display:flex}.canvas-header{align-items:center;gap:calc(var(--unit) * 3);flex-wrap:wrap;display:flex}.preview-color-strip{min-height:calc(var(--unit) * 10);border-radius:var(--radius-medium);flex:auto;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;min-width:0;display:grid;overflow:hidden}.preview-color-swatch{min-width:calc(var(--unit) * 2);place-items:center;display:grid}.preview-color-hex{font-family:var(--font-mono);font-size:var(--font-size-mono);letter-spacing:.02em}.layout-picker{align-items:center;gap:calc(var(--unit) * 2);flex-wrap:wrap;display:none}.layout-picker-label{font-size:var(--font-size-eyebrow);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-secondary);white-space:nowrap}.bg-swatch-list{align-items:center;gap:calc(var(--unit) * 2);display:flex}.bg-swatch{width:calc(var(--unit) * 6);height:calc(var(--unit) * 6);border-radius:var(--radius-pill);border:calc(var(--unit) * .5) solid transparent;cursor:pointer;transition:transform var(--duration-fast) var(--easing);flex:none}.bg-swatch.is-active{border-color:var(--color-accent-current,var(--color-accent));transform:scale(1.15)}.bg-swatch:hover{transform:scale(1.1)}.canvas-header-field{gap:calc(var(--unit) * .5);min-width:calc(var(--unit) * 22);flex-direction:column;flex:none;display:flex}.canvas-header-label{padding-inline:calc(var(--unit) * 1.5);color:var(--ui-text-secondary);font-size:var(--font-size-eyebrow);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase}.canvas-header-select{appearance:none;min-height:calc(var(--unit) * 9);border:var(--border-hairline) solid var(--ui-border);border-radius:var(--radius-medium);padding-inline:calc(var(--unit) * 3) calc(var(--unit) * 7);color:var(--ui-text-primary);background:var(--ui-surface);background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - calc(var(--unit) * 3.5)) calc(50% - calc(var(--unit) * .5)), calc(100% - calc(var(--unit) * 2)) calc(50% - calc(var(--unit) * .5));background-size:calc(var(--unit) * 1.5) calc(var(--unit) * 1.5);filter:drop-shadow(var(--shadow-filter-float));transition:border-color var(--duration-fast) var(--standard-easing);cursor:pointer;background-repeat:no-repeat;padding-block:0;position:relative}.canvas-header-select:hover{border-color:var(--color-accent-current,var(--color-accent))}.canvas-header-select option{background:var(--ui-surface);color:var(--ui-text-primary)}.canvas-shell{min-height:var(--canvas-min);padding:var(--panel-pad);background:linear-gradient(var(--ui-surface-soft), var(--ui-surface-soft)), var(--ui-background);filter:drop-shadow(var(--shadow-filter-card));transition:outline-color var(--duration-fast) var(--standard-easing), background var(--duration-fast) var(--standard-easing);border-radius:0;place-items:center;display:grid;position:relative;overflow:hidden}.canvas-shell.status-empty{background:linear-gradient(var(--ui-surface-soft), var(--ui-surface-soft)), var(--ui-background)}.canvas-shell.is-dragover{outline:calc(var(--unit) * .5) dashed var(--color-accent-current,var(--color-accent));outline-offset:calc(var(--unit) * -.5)}.canvas-shell.is-dragover:after{content:"Drop image to extract palette";background:var(--ui-surface-soft);color:var(--ui-text-primary);font-weight:var(--weight-semibold);border-radius:inherit;pointer-events:none;z-index:2;place-items:center;display:grid;position:absolute;inset:0}.canvas-loading{place-items:center;gap:calc(var(--unit) * 2);background:var(--ui-surface-soft);color:var(--ui-text-primary);border-radius:inherit;pointer-events:none;z-index:2;font-weight:var(--weight-semibold);display:grid;position:absolute;inset:0}.canvas-loading-spinner{width:calc(var(--unit) * 7);aspect-ratio:1;border-radius:var(--radius-pill);border:calc(var(--unit) * .5) solid var(--ui-border);border-top-color:var(--color-accent-current,var(--color-accent));animation:spin var(--duration) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-cta{z-index:1;inset:var(--panel-pad);justify-content:center;align-items:center;gap:calc(var(--unit) * 3);padding:calc(var(--unit) * 6) calc(var(--unit) * 4);border:var(--border-hairline) dashed var(--ui-border);border-radius:var(--radius-medium);background:var(--ui-surface);color:var(--ui-text-primary);cursor:pointer;text-align:center;transition:transform var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--standard-easing), background var(--duration-fast) var(--standard-easing);flex-direction:column;display:flex;position:absolute}.empty-cta:hover{border-color:var(--color-accent-current,var(--color-accent));background:var(--ui-surface-lift);transform:scale(1.01)}.empty-cta-glyph{width:calc(var(--unit) * 16);aspect-ratio:1;border-radius:var(--radius-pill);background:var(--ui-surface-soft);color:var(--color-accent-current,var(--color-accent));place-items:center;display:grid}.empty-cta-glyph svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:60%;height:60%}.empty-cta-copy{gap:calc(var(--unit) * 1);flex-direction:column;display:flex}.empty-cta-copy strong{font-size:var(--font-size-control);font-weight:var(--weight-semibold)}.empty-cta-copy span{font-size:var(--font-size-eyebrow);color:var(--ui-text-secondary)}.empty-cta-keys{align-items:center;gap:calc(var(--unit) * 1);font-size:var(--font-size-eyebrow);color:var(--ui-text-secondary);display:inline-flex}.empty-cta-keys kbd,.revert-panel-hint kbd{min-width:calc(var(--unit) * 5);min-height:calc(var(--unit) * 5);padding-inline:calc(var(--unit) * 1);border-radius:var(--radius-small);background:var(--ui-surface-soft);color:var(--ui-text-primary);font-family:var(--font-mono);font-size:var(--font-size-mono);border:var(--border-hairline) solid var(--ui-border);place-items:center;display:inline-grid}.preview-canvas{width:auto;height:auto;max-width:min(calc(100vw - var(--control-gap) * 4), 100%);max-height:calc(100vh - var(--top-bar-height) - var(--canvas-min));aspect-ratio:var(--preview-aspect,3 / 4);border-radius:0;display:block}.tool-drawer{gap:var(--toolbar-gap);flex-direction:column;min-width:0;max-width:100%;display:flex}.tick-scale{display:none}.tool-rail{gap:calc(var(--unit) * 1);scrollbar-width:none;display:grid}.tool-rail::-webkit-scrollbar{display:none}.sample-list::-webkit-scrollbar{display:none}.compact-swatch-list::-webkit-scrollbar{display:none}.tool-button{min-width:0;min-height:calc(var(--unit) * 14);border:var(--border-hairline) solid var(--ui-border);border-radius:var(--radius-medium);padding:calc(var(--unit) * 1);place-items:center;gap:calc(var(--unit) * 1);background:var(--ui-surface);color:var(--ui-text-secondary);font-size:var(--font-size-eyebrow);transition:transform var(--duration-fast) var(--easing), background var(--duration-fast) var(--standard-easing), color var(--duration-fast) var(--standard-easing), border-color var(--duration-fast) var(--standard-easing);grid-template-rows:max-content max-content;display:grid;position:relative}.tool-button.is-active{color:var(--ui-text-primary);border-color:var(--color-accent-current,var(--color-accent));background:var(--color-accent-current,var(--color-accent))}.tool-icon{width:calc(var(--unit) * 5);aspect-ratio:1;background:0 0;place-items:center;display:grid}.tool-icon svg{width:var(--icon-size);aspect-ratio:1;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.tool-icon circle{fill:currentColor}.tool-indicator{top:calc(var(--unit) * 1);width:calc(var(--unit) * 1.5);aspect-ratio:1;border-radius:var(--radius-pill);background:var(--color-accent-current,var(--color-accent));outline:calc(var(--unit) * .5) solid var(--ui-surface);outline-offset:calc(var(--unit) * -.75);position:absolute;inset-inline-end:calc(var(--unit) * 1)}.tool-label{text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:var(--font-size-eyebrow);overflow:hidden}.tool-panel{min-width:0;max-width:100%;padding:var(--panel-pad);border-radius:var(--radius-large);background:var(--ui-surface);gap:var(--control-gap);filter:drop-shadow(var(--shadow-filter-float));flex-direction:column;display:flex}.segmented{min-height:var(--control-height);gap:calc(var(--unit) * 1);padding:calc(var(--unit) * 1);border:var(--border-hairline) solid var(--ui-border);border-radius:var(--radius-pill);background:var(--ui-surface-soft);display:flex}.segmented.wrap{border-radius:var(--radius-medium);flex-wrap:wrap}.segment{min-height:calc(var(--control-height) - var(--unit) * 2);border:var(--border-none);border-radius:var(--radius-pill);padding-inline:calc(var(--unit) * 4);color:var(--ui-text-secondary);transition:transform var(--duration-fast) var(--easing), background var(--duration-fast) var(--standard-easing), color var(--duration-fast) var(--standard-easing);white-space:nowrap;background:0 0}.segment.is-active{color:var(--ui-text-primary);background:var(--color-accent-current,var(--color-accent))}.tool-button:hover,.segment:hover,.icon-action:hover,.topbar-select:hover{transform:scale(1.02)}.tool-sections{gap:calc(var(--unit) * 2);flex-direction:column;display:flex}.tool-section{gap:calc(var(--unit) * 1);padding:calc(var(--unit) * 2) calc(var(--unit) * 2.5);border-radius:var(--radius-large);background:var(--ui-surface);filter:drop-shadow(var(--shadow-filter-float));flex-direction:column;display:none}.tool-section.is-active{display:flex}.tool-section-head{align-items:center;gap:calc(var(--unit) * 1);color:var(--ui-text-primary);flex-direction:row;display:flex}.tool-section-icon{width:calc(var(--unit) * 4);aspect-ratio:1;color:var(--color-accent-current,var(--color-accent));place-items:center;display:grid}.tool-section-icon svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.tool-section-title{font-size:var(--font-size-eyebrow);font-weight:var(--weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-secondary);white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;margin:0;overflow:hidden}.tool-section-body{gap:var(--control-gap);flex-direction:column;display:flex}.tool-section-body .tool-panel{filter:none;background:0 0;border-radius:0;padding:0}.range{width:100%;height:calc(var(--unit) * 10);appearance:none;cursor:pointer;touch-action:none;background:0 0;min-height:0;margin:0;padding:0}.range::-webkit-slider-runnable-track{height:calc(var(--unit) * 1.5);border-radius:var(--radius-pill);background:var(--ui-border)}.range::-moz-range-track{height:calc(var(--unit) * 1.5);border-radius:var(--radius-pill);background:var(--ui-border)}.range::-webkit-slider-thumb{appearance:none;width:calc(var(--unit) * 9);height:calc(var(--unit) * 9);border-radius:var(--radius-pill);border:calc(var(--unit) * .5) solid var(--ui-background);background:var(--color-accent-current,var(--color-accent));margin-top:calc((var(--unit) * 1.5 - var(--unit) * 9) / 2);filter:drop-shadow(var(--shadow-filter-float));transition:transform var(--duration-fast) var(--easing);cursor:grab}.range::-moz-range-thumb{width:calc(var(--unit) * 9);height:calc(var(--unit) * 9);border-radius:var(--radius-pill);border:calc(var(--unit) * .5) solid var(--ui-background);background:var(--color-accent-current,var(--color-accent));filter:drop-shadow(var(--shadow-filter-float));transition:transform var(--duration-fast) var(--easing);cursor:grab}.range:hover::-webkit-slider-thumb{transform:scale(1.1)}.range:focus::-webkit-slider-thumb{transform:scale(1.1)}.range:active::-webkit-slider-thumb{transform:scale(1.1)}.range:active::-webkit-slider-thumb{cursor:grabbing}.range:hover::-moz-range-thumb{transform:scale(1.1)}.range:focus::-moz-range-thumb{transform:scale(1.1)}.range:active::-moz-range-thumb{transform:scale(1.1)}.range:active::-moz-range-thumb{cursor:grabbing}.slider-control{align-items:center;gap:var(--control-gap);grid-template-columns:minmax(0,1fr) max-content;display:grid}.range-value{min-width:calc(var(--unit) * 14);min-height:calc(var(--unit) * 8);border-radius:var(--radius-pill);background:var(--ui-surface-soft);color:var(--ui-text-secondary);font-family:var(--font-mono);font-size:var(--font-size-mono);place-items:center;display:inline-grid}.revert-panel{gap:calc(var(--unit) * 2);flex-direction:column;display:flex}.revert-panel-copy{color:var(--ui-text-secondary);font-size:var(--font-size-eyebrow);margin:0;line-height:1.4}.revert-panel-actions{display:flex}.revert-action{min-height:calc(var(--unit) * 10);border:var(--border-hairline) solid var(--ui-border);border-radius:var(--radius-pill);padding-inline:calc(var(--unit) * 4);justify-content:center;align-items:center;gap:calc(var(--unit) * 2);background:var(--color-accent-current,var(--color-accent));color:var(--ui-text-primary);font-weight:var(--weight-semibold);filter:drop-shadow(var(--shadow-filter-float));transition:transform var(--duration-fast) var(--easing), background var(--duration-fast) var(--standard-easing);flex:1;display:inline-flex}.revert-action-glyph{width:calc(var(--unit) * 4);aspect-ratio:1;place-items:center;display:inline-grid}.revert-action-glyph svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:100%}.revert-panel-hint{align-items:center;gap:calc(var(--unit) * 1);color:var(--ui-text-secondary);font-size:var(--font-size-eyebrow);flex-wrap:wrap;margin:0;display:inline-flex}.sample-list{gap:calc(var(--unit) * 2);padding-block:calc(var(--unit) * 1);scroll-snap-type:x mandatory;scrollbar-width:none;grid-auto-columns:max-content;grid-auto-flow:column;display:grid;overflow-x:auto}.sample-button{min-width:calc(var(--unit) * 25);border:var(--border-hairline) solid var(--ui-border);border-radius:var(--radius-medium);padding:calc(var(--unit) * 1);background:var(--ui-surface-soft);color:var(--ui-text-primary);gap:calc(var(--unit) * 2);scroll-snap-align:start;transition:transform var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--standard-easing)}.sample-button.is-active{border-color:var(--color-accent-current,var(--color-accent))}.sample-button img{width:var(--sample-thumb);aspect-ratio:1;object-fit:cover;border-radius:var(--radius-small)}.palette-panel{gap:var(--control-gap);flex-direction:column;display:flex}.swatch-strip{min-height:var(--swatch-strip-height);border-radius:var(--radius-medium);background:var(--ui-surface-soft);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid;overflow:hidden}.strip-swatch{min-width:calc(var(--unit) * 2)}.compact-swatch-list{gap:calc(var(--unit) * 2);scrollbar-width:none;display:flex;overflow-x:auto}.compact-color{gap:calc(var(--unit) * 1.5);flex:none}.readout-swatch{width:var(--icon-size);aspect-ratio:1;border-radius:var(--radius-small);flex:none}.empty-palette{margin:0;line-height:1.5}code{font-family:var(--font-mono);font-size:var(--font-size-mono);color:var(--ui-text-secondary)}.error-banner{padding:var(--panel-pad);border-radius:var(--radius-medium);background:var(--ui-surface);color:var(--ui-text-primary)}.toast{right:var(--control-gap);bottom:var(--control-gap);padding:calc(var(--unit) * 3) calc(var(--unit) * 5);border-radius:var(--radius-pill);background:var(--ui-text-primary);color:var(--ui-background);opacity:0;transform:translateY(calc(var(--unit) * 3));transition:opacity var(--duration-fast) var(--standard-easing), transform var(--duration-fast) var(--easing);pointer-events:none;z-index:4;position:fixed}.toast.is-visible{opacity:1;transform:translateY(0)}@media (max-width:47.99em){.app-shell{padding:calc(var(--unit) * 2);gap:calc(var(--unit) * 2)}.top-bar{row-gap:calc(var(--unit) * 2);grid-template-columns:minmax(0,1fr);min-height:0}.top-actions{justify-content:space-between;align-items:center;column-gap:calc(var(--unit) * 1);grid-template-columns:max-content max-content max-content 1fr max-content;display:grid}.topbar-select{width:100%}.icon-action{width:calc(var(--unit) * 9);min-height:calc(var(--unit) * 8)}.brand-copy span{display:none}.brand-copy strong{font-size:calc(var(--font-size-title) - var(--unit))}.canvas-shell{min-height:calc(var(--unit) * 80)}.canvas-header{align-items:stretch;gap:calc(var(--unit) * 2);flex-direction:column}.canvas-header-field{width:100%;min-width:0}.canvas-header-select{width:100%}.empty-cta{padding:calc(var(--unit) * 4) calc(var(--unit) * 3)}.tool-rail{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;overflow-x:visible}.tool-button{min-height:calc(var(--unit) * 12)}}@media (min-width:48em){.app-shell{padding:var(--page-pad);gap:var(--stage-gap)}.top-bar{grid-template-columns:minmax(0,1fr) max-content}.canvas-shell{min-height:calc(var(--unit) * 100)}.tool-rail{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;overflow-x:visible}}@media (min-width:70em){.app-shell{width:min(100%, calc(var(--page-max) + var(--unit) * 120));margin-inline:auto}.main-stage{grid-template-columns:minmax(0, 1fr) calc(var(--unit) * 100);align-items:start;gap:var(--stage-gap);display:grid}.canvas-stage{min-width:0}.canvas-shell{min-height:calc(var(--unit) * 60)}.preview-canvas{max-width:min(100%, calc(var(--unit) * 120));max-height:calc(65vh - var(--top-bar-height))}.tool-drawer{min-width:0;max-height:calc(100vh - var(--top-bar-height) - var(--control-gap) * 2);padding-bottom:calc(var(--unit) * 4);overflow-y:auto}.tool-rail{display:none}.tool-section,.tool-section.is-active,.tool-section:not(.is-active){align-items:center;gap:calc(var(--unit) * 3);padding:calc(var(--unit) * 2) calc(var(--unit) * 3);grid-template-columns:max-content 1fr;display:grid}.tool-section-head{flex:none}.tool-section-body{min-width:0}.tool-section.is-active{outline:var(--border-hairline) solid var(--color-accent-current,var(--color-accent));outline-offset:calc(var(--unit) * -.5)}.layout-picker{display:flex}#section-layout{display:none!important}}@media (prefers-reduced-motion:reduce){.tool-button,.segment,.icon-action,.topbar-select,.sample-button,.toast,.canvas-loading-spinner,.empty-cta,.revert-action,.brand-mark{transition-duration:var(--duration-fast);animation-duration:1.6s}.range::-webkit-slider-thumb{transition-duration:var(--duration-fast);animation-duration:1.6s}.range::-moz-range-thumb{transition-duration:var(--duration-fast);animation-duration:1.6s}}