.px-page{--px-panel-gap:.8rem}.px-hero{justify-content:space-between;align-items:flex-end;gap:1rem;display:flex}.px-hero h1{margin-top:.15rem}.px-history-actions,.px-palette-actions,.px-chip-row{flex-wrap:wrap;gap:.4rem;display:flex}.px-presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-top:1rem;display:grid}.px-preset{border:var(--pixel) solid var(--border);background:var(--surface-2);color:var(--foreground);text-align:left;cursor:pointer;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.75rem .9rem;transition:border-color .12s,box-shadow .12s,transform .12s;display:flex}.px-preset:hover{border-color:var(--accent);transform:translateY(-2px)}.px-preset strong{font-size:.8rem}.px-preset span{color:var(--muted);font-size:.65rem;line-height:1.5}.px-preset-active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface-2));box-shadow:3px 3px 0 var(--accent-strong)}.px-concept-panel{margin-bottom:1rem;padding:1rem}.px-concept-heading,.px-concept-heading>div,.px-save-copy,.px-save-actions{align-items:center;display:flex}.px-concept-heading{justify-content:space-between;gap:1rem}.px-concept-heading>div,.px-save-copy{gap:.7rem}.px-concept-heading h2,.px-concept-heading p{margin:0}.px-concept-heading h2{color:var(--foreground);font-size:.85rem;font-weight:800}.px-concept-heading p,.px-selected-concept,.px-save-copy span{color:var(--muted);font-size:.68rem;line-height:1.5}.px-selected-concept{border:var(--pixel) solid var(--border-strong);background:var(--surface);color:var(--foreground-soft);flex:none;padding:.35rem .55rem}.px-step{border:var(--pixel) solid var(--accent);width:28px;height:28px;color:var(--accent);font-family:var(--font-mono), monospace;flex:none;place-items:center;font-size:.72rem;font-weight:800;display:inline-grid}.px-simple-workspace{flex-direction:column;gap:1rem;min-width:0;display:flex}.px-save-panel{justify-content:space-between;align-items:center;gap:1rem;padding:1rem;display:flex}.px-save-copy>div{flex-direction:column;gap:.15rem;min-width:0;display:flex}.px-save-copy strong{color:var(--foreground);font-size:.78rem}.px-save-actions{flex:none;gap:.55rem}.px-save-actions .px-change-image,.px-save-actions .px-download{border:var(--pixel) solid var(--border-strong);width:auto;min-width:112px;min-height:42px;padding:0 .8rem}.px-save-actions .px-download{border-color:var(--accent-strong)}.px-drop-step{margin-bottom:.1rem}.px-shell{grid-template-columns:340px minmax(0,1fr);align-items:start;gap:1rem;display:grid}.px-controls{max-height:calc(100vh - 6rem);position:sticky;top:4.8rem;overflow:auto}.px-panel{border-bottom:var(--pixel) solid var(--border)}.px-panel:last-of-type{border-bottom:0}.px-panel summary{color:var(--foreground);letter-spacing:.08em;cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:.85rem 1rem;font-size:.75rem;font-weight:800;list-style:none;display:flex}.px-panel summary::-webkit-details-marker{display:none}.px-panel summary:after{content:"+";color:var(--accent);font-size:1rem}.px-panel[open] summary:after{content:"−"}.px-panel-body{gap:var(--px-panel-gap);flex-direction:column;padding:0 1rem 1rem;display:flex}.px-field{flex-direction:column;gap:.45rem;display:flex}.px-label,.px-range-field>span,.px-color-row>span{color:var(--muted);letter-spacing:.07em;font-size:.68rem;font-weight:700}.px-size-row{grid-template-columns:minmax(0,1fr) 68px;align-items:center;gap:.55rem;display:grid}.px-size-row input[type=number]{border:var(--pixel) solid var(--border-strong);background:var(--surface-2);width:100%;min-height:34px;color:var(--foreground);font:inherit;text-align:center;font-size:.72rem}.px-range-field{grid-template-columns:1fr auto;align-items:center;gap:.35rem .6rem;display:grid}.px-range-field output{min-width:3.5rem;color:var(--foreground);font-family:var(--font-mono), monospace;text-align:right;font-size:.68rem}.px-range-field input,.px-size-row input[type=range]{width:100%;accent-color:var(--accent);grid-column:1/-1}.px-chip{cursor:pointer;transition:border-color .1s,color .1s,background .1s}.px-chip:hover:not(:disabled){border-color:var(--accent);color:var(--foreground)}.px-chip:disabled{opacity:.4;cursor:not-allowed}.px-chip-active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, var(--surface-2));color:var(--foreground);box-shadow:2px 2px 0 var(--accent-strong)}.px-check,.px-color-row{color:var(--muted);justify-content:space-between;align-items:center;gap:.65rem;font-size:.7rem;display:flex}.px-check{justify-content:flex-start}.px-check input{accent-color:var(--accent)}.px-color-row input{border:var(--pixel) solid var(--border-strong);background:var(--surface-2);width:42px;height:28px;padding:1px}.px-download{justify-content:center;align-items:center;width:100%;min-height:44px;padding:0 .7rem;font-size:.72rem;display:inline-flex}.px-download:disabled{opacity:.45;cursor:not-allowed}.px-json-button,.px-change-image{width:100%;padding:.6rem .7rem}.px-change-image{border:0;border-top:var(--pixel) solid var(--border);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.px-workspace{flex-direction:column;gap:1rem;min-width:0;display:flex}.px-stage{background-color:var(--surface);background-image:linear-gradient(45deg, color-mix(in srgb, var(--foreground) 4%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--foreground) 4%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--foreground) 4%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--foreground) 4%, transparent) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;justify-content:center;align-items:center;min-height:560px;padding:.85rem;display:flex;position:relative;overflow:hidden}.px-stage>div:not(.px-processing){width:100%}.px-stage-drag{box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);border-color:var(--accent)!important}.px-drop{border:var(--pixel) dashed var(--border-strong);background:color-mix(in srgb, var(--surface-2) 78%, transparent);width:100%;min-height:520px;color:var(--foreground);cursor:pointer;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.7rem;padding:2rem 1rem;transition:border-color .1s,background .1s;display:flex}.px-drop:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 7%, var(--surface-2))}.px-drop-icon{border:var(--pixel) solid var(--accent);width:52px;height:52px;color:var(--accent);box-shadow:4px 4px 0 var(--accent-strong);place-items:center;font-size:1.5rem;display:grid}.px-processing{border:var(--pixel) solid var(--accent);background:color-mix(in srgb, var(--background) 92%, transparent);color:var(--foreground);letter-spacing:.08em;z-index:8;align-items:center;gap:.45rem;padding:.35rem .6rem;font-size:.62rem;display:flex;position:absolute;bottom:1rem;right:1rem}.px-processing span{background:var(--accent);width:7px;height:7px;animation:.65s steps(2,end) infinite px-processing-blink}@keyframes px-processing-blink{50%{opacity:.25}}.px-error{border:var(--pixel) solid var(--border-strong);background:color-mix(in srgb, var(--background) 94%, transparent);max-width:calc(100% - 2rem);color:var(--foreground-soft);text-align:center;z-index:9;margin:0;padding:.35rem .75rem;font-size:.7rem;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.px-compare{border:var(--pixel) solid var(--border-strong);background:var(--background);width:100%;line-height:0;position:relative;overflow:hidden}.px-compare canvas{object-fit:contain;max-height:min(72vh,760px)}.px-compare-top{position:absolute;inset:0}.px-compare-divider{background:var(--accent);pointer-events:none;z-index:3;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px)}.px-compare-handle{border:var(--pixel) solid var(--accent-strong);background:var(--accent);color:var(--accent-contrast);white-space:nowrap;padding:3px 7px;font-size:10px;line-height:1.4;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.px-compare-range{opacity:0;cursor:ew-resize;z-index:4;width:100%;height:100%;margin:0;position:absolute;inset:0}.px-compare-range:focus-visible~.px-compare-tag{outline:2px solid var(--accent)}.px-compare-tag{border:var(--pixel) solid var(--border-strong);background:color-mix(in srgb, var(--background) 86%, transparent);color:var(--foreground-soft);pointer-events:none;z-index:3;padding:3px 8px;font-size:.62rem;font-weight:700;line-height:1.4;position:absolute;top:.55rem}.px-compare-tag-left{left:.55rem}.px-compare-tag-right{right:.55rem}.px-grid-on .px-compare:after{content:"";background-image:linear-gradient(to right, color-mix(in srgb, var(--foreground) 15%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--foreground) 15%, transparent) 1px, transparent 1px);pointer-events:none;z-index:2;background-size:12px 12px;position:absolute;inset:0}.px-palette-editor{padding:1rem}.px-palette-heading{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem;display:flex}.px-palette-heading>div:first-child{flex-direction:column;gap:.15rem;min-width:0;display:flex}.px-palette-heading strong{color:var(--foreground);font-size:.78rem}.px-palette-heading span,.px-hint{color:var(--muted);margin:0;font-size:.64rem;line-height:1.5}.px-swatches,.px-custom-colors{flex-wrap:wrap;gap:5px;display:flex}.px-swatches button{border:var(--pixel) solid var(--border-strong);cursor:pointer;width:32px;height:32px;position:relative}.px-swatches button.is-locked{border-color:var(--accent);box-shadow:2px 2px 0 var(--accent-strong)}.px-swatches button span{color:#fff;text-shadow:1px 1px #000;place-items:center;font-size:.55rem;display:grid;position:absolute;inset:0}.px-custom-color{border:var(--pixel) solid var(--border-strong);width:42px;height:38px;display:inline-flex;position:relative}.px-custom-color input{cursor:pointer;background:0 0;border:0;width:100%;height:100%;padding:0}.px-custom-color button{border:1px solid var(--border-strong);background:var(--background);width:16px;height:16px;color:var(--foreground);cursor:pointer;place-items:center;font-size:10px;line-height:1;display:grid;position:absolute;top:-6px;right:-6px}.px-custom-color button:disabled{display:none}.px-add-color{border:var(--pixel) dashed var(--border-strong);min-height:38px;color:var(--muted);cursor:pointer;background:0 0;padding:0 .7rem;font-size:.65rem}@media (max-width:1000px){.px-shell{grid-template-columns:300px minmax(0,1fr)}.px-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:760px){.px-hero,.px-palette-heading,.px-save-panel{flex-direction:column;align-items:stretch}.px-shell{grid-template-columns:1fr}.px-controls{grid-row:2;max-height:none;position:static}.px-workspace{grid-row:1}.px-stage,.px-drop{min-height:360px}.px-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.px-save-actions{width:100%}.px-save-actions .px-change-image,.px-save-actions .px-download{flex:1}}@media (max-width:430px){.px-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.px-concept-heading{flex-direction:column;align-items:flex-start}.px-history-actions,.px-palette-actions{width:100%}.px-history-actions button,.px-palette-actions button{flex:1}}@media (prefers-reduced-motion:reduce){.px-processing span{animation:none}.px-preset{transition:none}}