:root{--color-bg: #f4f4f4;--color-bg-elevated: #f4f4f4;--color-bg-panel: #e0e0e0;--color-bg-hover: rgba(0, 0, 0, .05);--color-bg-active: rgba(0, 0, 0, .1);--color-bg-overlay: rgba(244, 244, 244, .85);--color-surface: #f4f4f4;--color-surface-hover: #eaeaea;--color-border: #333333;--color-border-subtle: #cccccc;--color-border-focus: #000000;--color-text-primary: #222222;--color-text-secondary: #555555;--color-text-muted: #888888;--color-text-inverse: #ffffff;--color-accent: #000000;--color-accent-hover: #DF0909;--shadow-accent-hover-glow: 0 0 10px var(--color-accent-hover);--color-accent-glow: transparent;--color-danger: #cc0000;--color-danger-hover: #990000;--color-success: #008800;--color-warning: #cc8800;--font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-panel-header: var(--font-size-base);--line-height-panel-header: 32px;--font-weight-light: 400;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--letter-spacing: 0;--letter-spacing-tight: 1px;--letter-spacing-brutalist: 2px;--space-xxs: 2px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--btn-height: 25px;--tool-btn-padding-compact: var(--space-xs) var(--space-sm);--tool-btn-height-compact: var(--btn-height);--radius-sm: 0;--radius-md: 0;--radius-lg: 0;--radius-xl: 0;--radius-full: 0;--shadow-sm: none;--shadow-md: none;--shadow-lg: none;--shadow-glow: none;--transition-fast: none;--transition-base: .1s linear;--transition-smooth: .2s linear;--sidebar-width: 244px;--tool-flyout-width: 244px;--header-height: 40px;--panel-padding: var(--space-lg);--sidebar-item-v-padding: var(--space-xs);--sidebar-item-h-padding: var(--space-sm);--sidebar-item-gap: var(--space-md);--action-btn-width: calc(var(--tool-flyout-width) - (var(--space-lg) * 2));--mobile-toolbar-height: 44px;--mobile-action-bar-height: 32px;--mobile-panel-max-height: 200px;--mobile-ui-btn-height: var(--btn-height)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{height:100%;width:100%;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);line-height:var(--line-height);letter-spacing:var(--letter-spacing);color:var(--color-text-primary);background-color:var(--color-bg);overflow:hidden;height:100%;width:100%}a{color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}img{display:block;max-width:100%}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border-subtle);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--color-border)}::selection{background:var(--color-accent);color:var(--color-text-inverse)}canvas{image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#app{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--space-lg);background:var(--color-bg-elevated);border-bottom:1px dotted var(--color-border);flex-shrink:0;z-index:80}.app-header__logo{display:flex;align-items:center;height:100%;flex-shrink:0}.app-header__logo img{height:32px;width:auto;display:block;cursor:pointer}.processing-message{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);letter-spacing:var(--letter-spacing-tight);margin-left:var(--space-md);white-space:nowrap;animation:pulse-processing 1.5s ease-in-out infinite}@keyframes pulse-processing{0%,to{opacity:.5}50%{opacity:1}}.app-header__logo-icon{display:none}.app-header__actions{display:flex;align-items:center;gap:var(--space-md)}.app-header__actions .btn{width:78px;padding:0}.app-body{display:flex;flex:1;min-height:0;overflow:hidden;position:relative}.sidebar-left{width:var(--sidebar-width);background:var(--color-bg-elevated);border-right:1px dashed var(--color-border-subtle);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;position:relative;z-index:60}.sidebar-left__header{display:flex;align-items:center;line-height:var(--line-height-panel-header);padding:var(--space-xl) var(--space-lg) var(--space-sm);font-size:var(--font-size-panel-header);font-weight:var(--font-weight-bold);text-transform:uppercase;color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}.sidebar-left__list{flex:1;overflow-y:auto;padding:var(--space-sm)}.canvas-area{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--color-bg);position:relative;overflow:hidden}.canvas-viewport{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;touch-action:none;background-image:url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23cccccc'/%3E%3C/svg%3E");background-size:8px 8px;background-position:center;transition:margin-left .2s cubic-bezier(.4,0,.2,1)}.canvas-area.has-tool-open .canvas-viewport,.canvas-area.has-tool-open .zoom-bar{margin-left:var(--tool-flyout-width)}.canvas-area__canvas{max-width:90%;max-height:90%;object-fit:contain;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);transition:transform .05s linear;will-change:transform;image-rendering:pixelated;position:relative;z-index:120}.zoom-bar{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-xl);background:var(--color-bg-elevated);border-top:1px dotted var(--color-border);flex-shrink:0;height:40px}.zoom-bar__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:var(--font-size-lg);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);background:none;border:none}.zoom-bar__btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.zoom-bar__slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1px;background:var(--color-border);outline:none;cursor:pointer}.zoom-bar__slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2px;height:16px;background:var(--color-border-focus);cursor:pointer}.zoom-bar__slider::-webkit-slider-thumb:hover{background:var(--color-accent)}.zoom-bar__value{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);min-width:40px;text-align:right;font-variant-numeric:tabular-nums}.upload-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--color-bg);z-index:5;transition:opacity .6s cubic-bezier(.4,0,.2,1),visibility .6s;gap:var(--space-xl)}.upload-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.upload-overlay.is-dragging{background:var(--color-bg-elevated)}.upload-overlay__text{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-brutalist);text-align:center}.upload-overlay__home,.upload-overlay__about{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2;gap:var(--space-xl)}.upload-overlay__about{max-width:440px;align-items:flex-start;gap:var(--space-xl)}.about-section{display:flex;flex-direction:column;gap:var(--space-xs)}.about-section__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-accent);letter-spacing:var(--letter-spacing-brutalist);text-transform:uppercase}.about-section__body{font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.btn--import{width:var(--action-btn-width);background:var(--color-accent);color:var(--color-text-inverse);padding:var(--space-xs) var(--space-md);font-weight:var(--font-weight-bold);letter-spacing:1px;border:none}.btn--import:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-accent-hover-glow)}.upload-overlay__input{display:none}.slime-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;image-rendering:auto;filter:blur(.7px);opacity:.88}.upload-overlay__text,.btn--import{position:relative;z-index:2}.sidebar-left__section{display:flex;flex-direction:column;overflow:hidden}.sidebar-left__section:first-child{flex:1}.sidebar-left__section:last-child{flex:0 0 auto;max-height:30%}.sidebar-left__section-header{display:flex;align-items:center;line-height:var(--line-height-panel-header);justify-content:space-between;padding:var(--space-xl) var(--space-lg) var(--space-sm);font-size:var(--font-size-panel-header);font-weight:var(--font-weight-bold);text-transform:uppercase;color:var(--color-text-primary);flex-shrink:0;position:sticky;top:0;background:var(--color-bg-elevated);z-index:1;letter-spacing:var(--letter-spacing-tight)}.sidebar-left__section-content{flex:1;overflow-y:auto;padding:var(--space-sm)}.sidebar-left__section-actions{padding:var(--space-md) var(--space-lg);flex-shrink:0;transition:opacity var(--transition-base);pointer-events:auto}.tool-flyout{width:var(--tool-flyout-width);background:var(--color-bg-elevated);border-right:1px dashed var(--color-border-subtle);display:none;position:absolute;top:0;bottom:0;left:var(--sidebar-width);flex-direction:column;flex-shrink:0;overflow:hidden;z-index:70;box-shadow:10px 0 30px #0000000d}.tool-flyout.is-open{display:flex}.tool-flyout__header{display:flex;align-items:center;line-height:var(--line-height-panel-header);justify-content:space-between;padding:var(--space-xl) var(--space-lg) var(--space-sm);font-size:var(--font-size-panel-header);font-weight:var(--font-weight-bold);text-transform:uppercase;color:var(--color-text-primary);flex-shrink:0;letter-spacing:var(--letter-spacing-tight)}.tool-flyout__content{padding:0;flex:1;overflow-y:auto;display:flex;flex-direction:column}.tool-flyout__params-wrap{padding:var(--space-md) var(--space-lg)}.tool-flyout__actions{padding:var(--space-lg);background:var(--color-bg-panel);flex-shrink:0;display:flex;flex-direction:column;gap:var(--space-md)}.no-image-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center;padding:var(--space-xl)}.resize-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-bg-elevated);z-index:9999;display:none;align-items:center;justify-content:center;text-align:center}.resize-overlay.is-visible{display:flex}.resize-overlay__content{display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);padding:var(--space-3xl)}.resize-overlay__logo{height:32px;width:auto;display:block}.resize-overlay__text{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-brutalist)}.letter-fountain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:11;pointer-events:none;overflow:hidden}.letter-fountain__letter{position:fixed;pointer-events:none;-webkit-user-select:none;user-select:none;line-height:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:0 var(--space-md);height:var(--btn-height);border-radius:0;font-size:var(--font-size-base);font-weight:var(--font-weight-regular);transition:all var(--transition-fast);white-space:nowrap;-webkit-user-select:none;user-select:none}.btn--full-width{width:100%}.btn--primary{background:var(--color-accent);color:var(--color-text-inverse)}@media(hover:hover){.btn--primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-accent-hover-glow)}}.btn--primary:active{background:var(--color-accent-hover)}.btn--secondary{background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border)}@media(hover:hover){.btn--secondary:hover{background:var(--color-surface-hover);color:var(--color-text-primary);border-color:var(--color-border-focus)}}.btn--danger{background:transparent;color:var(--color-danger)}@media(hover:hover){.btn--danger:hover{background:#e74c6f1a;color:var(--color-danger-hover)}}.btn--ghost{background:transparent;color:var(--color-text-secondary);padding:var(--space-xs) var(--space-sm)}@media(hover:hover){.btn--ghost:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}}.btn--icon{width:32px;height:32px;padding:0;border-radius:0}.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.sidebar-item{display:flex;align-items:center;gap:var(--sidebar-item-gap);padding:var(--sidebar-item-v-padding) var(--sidebar-item-h-padding);border-radius:var(--radius-sm);font-size:var(--font-size-base);color:var(--color-text-secondary);transition:all var(--transition-fast);position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;background:transparent;border:none;width:100%;text-align:left;height:var(--line-height-panel-header);box-sizing:border-box}.sidebar-item:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.sidebar-item.is-active{background:transparent;color:var(--color-text-primary)}.sidebar-item.is-disabled{opacity:.4;cursor:default;pointer-events:auto}.sidebar-item:not(.sidebar-item--history).is-disabled{pointer-events:none;cursor:not-allowed}.sidebar-item.is-static{pointer-events:none;cursor:default;color:var(--color-text-muted)}.sidebar-item:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.sidebar-item__prefix{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);min-width:18px;text-align:center;flex-shrink:0}.sidebar-item.is-active .sidebar-item__prefix{color:var(--color-text-primary)}.sidebar-item__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-base);font-weight:var(--font-weight-regular)}.sidebar-item__actions{display:none;gap:var(--space-xs);flex-shrink:0}.sidebar-item:hover .sidebar-item__actions,.sidebar-item.is-active .sidebar-item__actions{display:flex}.sidebar-item__btn{width:auto;min-width:24px;height:24px;padding:0 var(--space-xs);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);background:none;border:none;white-space:nowrap;flex-shrink:0}.sidebar-item__btn:hover{background:var(--color-bg-active);color:var(--color-text-primary)}.sidebar-item__btn--delete:hover{background:#e74c6f26;color:var(--color-danger)}.sidebar-item__dev-badge{font-size:9px;font-weight:var(--font-weight-medium);color:var(--color-text-muted);border:1px dashed var(--color-border-subtle);padding:1px 4px;letter-spacing:.05em;flex-shrink:0;opacity:.6}.sidebar-left__divider{height:1px;border-top:1px dashed var(--color-border-subtle);margin:var(--space-sm) var(--sidebar-item-h-padding);opacity:.5}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-group--full-width{flex-direction:column;align-items:stretch;gap:var(--space-xs)}.toggle-group .form-label{margin-bottom:0;cursor:pointer}.toggle-switch{display:flex;border:1px solid var(--color-border);background:var(--color-surface);overflow:hidden;font-size:var(--font-size-xs);height:var(--tool-btn-height-compact)}.toggle-switch--full-width{width:100%;gap:var(--space-lg)}.toggle-switch__option{flex:1;padding:var(--tool-btn-padding-compact);border:none;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);font-family:var(--font-family);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.toggle-switch__option.is-active{background:var(--color-accent);color:var(--color-text-inverse);box-shadow:inset 0 0 20px var(--color-accent-glow)}.toggle-switch__option:not(.is-active):hover{background:var(--color-surface-hover);color:var(--color-text-primary);border-color:var(--color-border-focus)}.toggle-switch__divider{width:1px;background:var(--color-border)}.form-group{margin-bottom:var(--space-lg)}.form-label{display:block;font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.form-range{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1px;background:var(--color-border);outline:none;cursor:pointer}.form-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2px;height:16px;background:var(--color-border-focus);cursor:pointer}.form-range::-webkit-slider-thumb:hover{background:var(--color-accent)}.form-range-value{font-size:var(--font-size-xs);color:var(--color-text-primary);text-align:right;margin-top:var(--space-xs)}.form-range-wrap{display:flex;align-items:center;gap:var(--space-sm);width:100%}.slider-step-btn{background:transparent;border:none;color:var(--color-text-secondary);font-size:var(--font-size-base);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1;flex-shrink:0}.slider-step-btn:hover{color:var(--color-text-primary)}.slider-step-btn:active{background:var(--color-bg-active)}.form-color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border:1px solid var(--color-border);cursor:pointer;padding:0;background:none}.form-color-input::-webkit-color-swatch-wrapper{padding:0}.form-color-input::-webkit-color-swatch{border:none}.form-color-input:hover{border-color:var(--color-accent)}.color-swatch{width:24px;height:24px;border:1px solid var(--color-border);cursor:pointer;flex-shrink:0}.color-swatch:hover{border-color:var(--color-accent)}.badge{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-xs);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);background:transparent;color:var(--color-text-primary)}.badge:before{content:"["}.badge:after{content:"]"}.divider{height:1px;background:var(--color-border-subtle);margin:var(--space-md) 0}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-4px);padding:var(--space-xs) var(--space-sm);background:var(--color-bg-panel);color:var(--color-text-primary);font-size:var(--font-size-xs);border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-md);z-index:100}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-overlay);z-index:1000}.modal{background:var(--color-bg-elevated);border:1px dashed var(--color-border-subtle);width:400px;max-width:90vw;position:relative;display:flex;flex-direction:column}.modal__header{display:flex;align-items:center;justify-content:space-between;line-height:var(--line-height-panel-header);padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-panel-header);font-weight:var(--font-weight-bold);text-transform:uppercase;color:var(--color-text-primary);border-bottom:1px dotted var(--color-border);letter-spacing:var(--letter-spacing-tight)}.modal__body{padding:var(--space-lg);font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height)}.modal__footer{padding:var(--space-md) var(--space-lg);display:flex;justify-content:flex-end;gap:var(--space-md)}.modal__close{background:none;border:none;font-size:var(--font-size-base);color:var(--color-text-muted);cursor:pointer;padding:0;display:flex;align-items:center}.modal__close:hover{color:var(--color-text-primary)}.base-tool__color-popup-wrapper{position:relative}.base-tool__color-swatch{width:24px;height:24px;border:none;border-radius:var(--radius-sm);padding:0;cursor:pointer;background-color:transparent;transition:all var(--transition-base);box-shadow:0 0 8px var(--swatch-color)}.base-tool__color-swatch:hover{box-shadow:0 0 12px var(--swatch-color)}.base-tool__color-popup{position:absolute;top:calc(100% + var(--space-xs));left:0;z-index:50;background:var(--color-bg-elevated);border:1px dashed var(--color-border);box-shadow:var(--shadow-lg);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md)}.base-tool__color-popup.is-above{top:auto;bottom:calc(100% + var(--space-xs))}.base-tool__colors-row>:last-child .base-tool__color-popup{left:auto;right:0}.base-tool__color-hex-input{background:transparent;border:none;color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--font-size-base);width:80px;text-transform:uppercase;outline:none;border-bottom:1px dotted var(--color-border)}.base-tool__color-hex-input:focus{border-color:var(--color-accent)}.distressed--blur{filter:blur(1.2px);opacity:.82}.distressed--melt{display:inline-block;transform:skewY(1.8deg) scaleY(1.04) scaleX(.97) translateY(1px);transform-origin:bottom left;letter-spacing:.01em;filter:blur(.4px)}.distressed--melt-heavy{display:inline-block;transform:skew(-2.5deg) skewY(3deg) scaleY(1.07) translateY(2px);transform-origin:bottom center;filter:blur(.7px);opacity:.88;letter-spacing:-.02em}.distressed--damaged{clip-path:polygon(0% 0%,97% 0%,100% 15%,98% 40%,100% 55%,97% 70%,100% 85%,97% 100%,3% 100%,0% 85%,2% 60%,0% 40%,2% 20%);opacity:.78;letter-spacing:.03em}.distressed--glitch{display:inline-block;transform:translate(1px);text-shadow:-1.5px 0 rgba(139,0,0,.25),1.5px 0 rgba(0,30,100,.18)}.distressed--ghost{opacity:.32;filter:saturate(.2);letter-spacing:.06em}.distressed--compressed{display:inline-block;transform:scaleX(.88) scaleY(1.06);transform-origin:left center;font-weight:700;letter-spacing:-.06em;filter:contrast(1.15)}.distressed--cracked{display:inline-block;transform:rotate(-.8deg) translate(-1px);text-shadow:1px 1px 0 rgba(0,0,0,.35);opacity:.85}.distressed--smear{display:inline-block;transform:scaleX(1.08) skew(1.5deg);filter:blur(.5px);opacity:.75;letter-spacing:.04em}.distressed--spray-worn{opacity:.72;text-shadow:1px 0px 0 rgba(0,0,0,.25),-2px 1px 0 rgba(0,0,0,.12),0px 2px 3px rgba(0,0,0,.1);letter-spacing:.04em;filter:contrast(1.1) saturate(.7)}.scribble-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9;overflow:visible}.base-tool{display:flex;flex-direction:column;gap:var(--space-xs)}.base-tool__type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xs);width:100%}.base-tool__type-btn{display:flex;flex-direction:column;align-items:center;gap:var(--space-xxs);padding:var(--space-sm) var(--space-xs);border-radius:0;background:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-secondary);min-width:0;width:100%}.base-tool__type-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.base-tool__type-btn.is-active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text-inverse)}.base-tool__type-btn--compact{height:var(--btn-height);padding:0;justify-content:center}.base-tool__type-icon{font-size:var(--font-size-base);line-height:1;flex-shrink:0}.base-tool__type-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}.base-tool__colors-row{display:flex;gap:var(--space-lg)}.base-tool__color-field{display:flex;align-items:center;gap:var(--space-sm);flex:1}.base-tool__color-info{display:flex;flex-direction:column;gap:0}.base-tool__color-label{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.2}.base-tool__color-hex{font-size:var(--font-size-xs);font-family:var(--font-family);color:var(--color-text-muted);opacity:.6}.base-tool__toggle-row{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;font-size:var(--font-size-sm);color:var(--color-text-secondary);padding:var(--space-xs) 0;-webkit-user-select:none;user-select:none;flex-direction:row-reverse;justify-content:flex-end}.base-tool__toggle-row:hover{color:var(--color-text-primary)}.base-tool__checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border:2px solid var(--color-border);border-radius:50%;cursor:pointer;position:relative;transition:all var(--transition-fast);flex-shrink:0}.base-tool__checkbox:checked{background:transparent;border-color:var(--color-border)}.base-tool__checkbox:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--color-accent-hover)}.base-tool__checkbox:hover{border-color:var(--color-accent)}.base-tool__custom-upload{margin-top:var(--space-sm)}.base-tool__custom-preview-row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm);background:var(--color-surface);border-radius:0;border:1px dotted var(--color-border)}.base-tool__custom-thumb{width:32px;height:32px;border-radius:0;overflow:hidden;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--color-bg)}.base-tool__custom-thumb canvas{display:block;width:32px;height:32px}.base-tool__custom-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xxs)}.base-tool__custom-name{font-size:var(--font-size-xs);color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.base-tool__custom-change{font-size:var(--font-size-xs);padding:var(--space-xxs) 0;align-self:flex-start;color:var(--color-accent)}.base-tool__custom-change:hover{color:var(--color-text-primary)}@media(max-width:768px){:root{--header-height: auto}.sidebar-left,.tool-flyout,.zoom-bar,.resize-overlay{display:none!important}.app-body{flex-direction:column}.canvas-area.has-tool-open .canvas-viewport{margin-left:0}.app-header{padding:var(--space-xs) var(--space-md);justify-content:center;position:relative;box-sizing:border-box;border-top:1px dotted var(--color-border)}.app-header__logo{width:100%;display:flex;justify-content:center}.app-header__logo img{height:auto;width:100%;max-width:100%;object-fit:contain;position:static;transform:none;z-index:85;display:block}.app-header__actions{display:none!important}.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:20px;font-weight:var(--font-weight-bold);color:var(--color-text-primary);background:transparent;border:1px solid var(--color-border);cursor:pointer;transition:all .15s ease;line-height:1;flex-shrink:0;z-index:101}.mobile-menu-btn.is-open{background:var(--color-text-primary);color:var(--color-bg);border-color:var(--color-text-primary)}.mobile-menu-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:100}.mobile-menu-overlay.is-open{display:block}.mobile-menu{position:absolute;top:var(--space-md);right:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs);padding-top:44px}.mobile-menu__item{display:flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-primary);background:var(--color-bg);border:1px solid var(--color-border);cursor:pointer;letter-spacing:1px;white-space:nowrap;transition:background .1s}.mobile-menu__item:active{background:var(--color-bg-active)}.canvas-area{flex:1;min-height:0}.canvas-area__canvas{max-width:95%;max-height:95%}.mobile-zoom-reset-btn{position:absolute;bottom:var(--space-md);right:var(--space-md);width:36px;height:36px;background:#000;border:none;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:200;cursor:pointer}.mobile-zoom-reset-btn:active{opacity:.8}.upload-overlay__home{margin-top:3vh}.upload-overlay__text{font-size:var(--font-size-xs);padding:0 var(--space-md)}.upload-overlay__about{max-width:90%;padding:0 var(--space-md)}.mobile-toolbar{display:none;align-items:center;height:var(--mobile-toolbar-height);background:var(--color-bg-elevated);border-top:1px dotted var(--color-border);overflow-x:auto;overflow-y:hidden;flex-shrink:0;gap:var(--space-xs);padding:0 var(--space-lg);-webkit-overflow-scrolling:touch;scrollbar-width:none}.mobile-toolbar.is-visible{display:flex}.mobile-toolbar::-webkit-scrollbar{display:none}.mobile-toolbar__item{display:flex;align-items:center;justify-content:center;height:calc(var(--mobile-ui-btn-height) * 1.1);box-sizing:border-box;padding:0 var(--space-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background:transparent;border:1px solid var(--color-border-subtle);white-space:nowrap;flex-shrink:0;cursor:pointer;transition:all .1s linear;text-decoration:none;letter-spacing:.5px}.mobile-toolbar__item:active{background:var(--color-bg-active)}.mobile-toolbar__item.is-active{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.mobile-toolbar__divider{width:1px;height:20px;background:var(--color-border-subtle);flex-shrink:0;opacity:.5}.mobile-panel{position:relative;display:none;flex-direction:column;background:var(--color-bg-elevated);border-top:1px dotted var(--color-border);flex-shrink:0;overflow:hidden}.mobile-panel.is-open{display:flex}.mobile-panel__header-scroll{display:flex;align-items:center;height:calc(var(--mobile-ui-btn-height) + 12px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0 var(--space-lg);gap:var(--space-xs);-webkit-overflow-scrolling:touch;flex-shrink:0}.mobile-panel__header-scroll::-webkit-scrollbar{display:none}.mobile-panel__header-item{white-space:nowrap;font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-muted);background:transparent;border:1px solid transparent;padding:4px 10px;cursor:pointer;transition:all .1s linear;letter-spacing:.5px;height:calc(var(--mobile-ui-btn-height) - 2px);box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0}.mobile-panel__header-item.is-active{background:var(--color-text-primary);color:var(--color-bg);border-color:var(--color-text-primary)}.mobile-panel__content{height:52px;overflow:hidden;display:flex;padding:0;padding-bottom:var(--space-md);box-sizing:border-box}.mobile-panel__content--horizontal{overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:row;scroll-snap-type:none;padding:0;padding-bottom:var(--space-md);scrollbar-width:none;width:100%;box-sizing:border-box}.mobile-panel__content--horizontal::-webkit-scrollbar{display:none}.mobile-panel__content--horizontal>*,.mobile-panel__slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:center;padding:0 var(--space-lg);box-sizing:border-box;overflow:hidden}.base-tool--horizontal{display:flex;width:100%;height:100%}.base-tool--horizontal .form-group,.base-tool--horizontal .toggle-group,.base-tool--horizontal .base-tool__slider,.base-tool--horizontal .base-tool__toggle,.base-tool--horizontal .base-tool__select,.base-tool--horizontal .base-tool__color-row{flex:0 0 100%;scroll-snap-align:center;padding:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin-bottom:0;height:100%}.base-tool--horizontal .form-label{display:none!important}.base-tool--horizontal .toggle-group{grid-template-columns:1fr;align-items:flex-start}.form-range-horizontal-wrap{display:flex;align-items:center;justify-content:center;gap:var(--space-md);width:100%;margin:0 auto;padding:0}.form-range-horizontal-wrap .form-range{flex:1}.form-range-value-side{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);min-width:48px;text-align:right;flex-shrink:0;font-family:var(--font-family)}.edits-panel--horizontal{display:flex;width:100%;height:100%}.edits-panel--horizontal .sidebar-item{flex:0 0 100%;scroll-snap-align:center;padding:var(--space-md) 0;box-sizing:border-box;border:none;background:transparent;justify-content:center}.mobile-panel__actions{display:flex;flex-direction:row;align-items:center;gap:var(--space-md);padding:0 var(--space-lg);border-top:1px dotted var(--color-border-subtle);flex-shrink:0;background:var(--color-bg-panel);height:var(--mobile-action-bar-height);box-sizing:border-box}.mobile-panel__action-col{flex:1;display:flex;align-items:center;min-width:0}.mobile-panel__action-col .toggle-group{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-sm)}.mobile-panel__action-col .form-label{display:block!important;font-size:var(--font-size-base);margin-bottom:0;white-space:nowrap}.mobile-panel__action-col .btn{width:100%}.mobile-panel__uncommitted-container{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);height:calc(var(--mobile-ui-btn-height) + 12px + 52px);background:var(--color-bg-panel)}.mobile-panel__uncommitted-title{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);letter-spacing:.5px}.mobile-panel__uncommitted-subtitle{font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-muted);letter-spacing:.5px}.mobile-action-bar{display:none;align-items:stretch;justify-content:center;gap:0;height:var(--mobile-action-bar-height);background:var(--color-bg-elevated);border-top:1px dotted var(--color-border);border-bottom:1px dotted var(--color-border);flex-shrink:0;padding:0}.mobile-action-bar.is-visible{display:flex}.mobile-action-bar .btn{flex:1;height:100%;border:none}.form-range::-webkit-slider-thumb{width:4px;height:22px}.form-range{height:2px}.btn{height:var(--mobile-ui-btn-height);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}.toggle-switch{height:32px;width:calc((50vw - var(--space-lg) - (var(--space-md) / 2)) / 2);min-width:80px;margin-left:0;box-sizing:border-box;display:flex;align-items:center}.base-tool .toggle-switch{margin:0}.toggle-switch__option{flex:1;width:50%;height:100%;padding:0!important}.base-tool__type-grid{grid-template-columns:repeat(2,1fr)}.base-tool__type-grid--horizontal{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:var(--space-md);padding:var(--space-xs) 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;scroll-snap-type:x mandatory;flex-shrink:0}.base-tool__type-grid--horizontal::-webkit-scrollbar{display:none}.base-tool__type-grid--horizontal .base-tool__type-btn{flex:0 0 calc((50vw - var(--space-lg) - (var(--space-md) / 2)) / 2);scroll-snap-align:center;min-width:80px;height:32px;padding:var(--space-xs);gap:var(--space-md);flex-direction:row;align-items:center;justify-content:center}.base-tool__type-grid--horizontal .base-tool__type-icon{font-size:var(--font-size-xs)}.base-tool__type-grid--horizontal .base-tool__type-label{font-size:var(--font-size-xs);width:100%;flex:1;min-width:0}.base-tool__color-popup{position:fixed;left:50%!important;right:auto!important;transform:translate(-50%);bottom:calc(var(--mobile-action-bar-height) + var(--mobile-panel-max-height) + var(--space-md));top:auto!important;z-index:100;max-width:90vw}.toggle-group{grid-template-columns:1fr 1fr;gap:var(--space-md)}.modal{width:90vw;max-width:90vw}.modal__footer{flex-direction:column;gap:var(--space-sm)}.modal__footer .btn{width:100%}}.mobile-color-picker__panel{position:relative;background:var(--color-bg);border-top:1px dotted var(--color-border);flex-shrink:0}.mobile-color-picker{width:100%;padding:var(--space-sm) var(--space-lg);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-xs)}.mobile-color-picker__header{display:flex;align-items:center;gap:var(--space-sm)}.mobile-color-picker__preview{flex:1;height:20px;border:1px solid var(--color-border);min-width:40px}.mobile-color-picker__preview-row{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0}.mobile-color-picker__label{font-weight:700;font-size:var(--font-size-xs);letter-spacing:1px;width:52px;flex-shrink:0}.mobile-color-picker__hex{font-size:var(--font-size-xs);letter-spacing:1px;color:var(--color-text-muted);font-family:var(--font-family)}.mobile-color-picker__slider-row{display:flex;align-items:center;gap:var(--space-sm)}.mobile-color-picker__slider-label{font-size:var(--font-size-xs);letter-spacing:1px;color:var(--color-text-secondary);width:52px;flex-shrink:0}.mobile-color-picker__slider-row .form-range-horizontal-wrap{flex:1;min-width:0}.mobile-color-picker__eyedropper{background:transparent;border:none;cursor:pointer;color:var(--color-text-muted);padding:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.mobile-color-picker__eyedropper.is-active{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.mobile-color-picker__loupe{position:fixed;width:100px;height:100px;border:3px solid #000;border-radius:50%;overflow:hidden;pointer-events:none;z-index:9999;box-shadow:0 0 0 1px #ffffff80}.mobile-color-picker__loupe canvas{width:100%;height:100%;border-radius:50%;image-rendering:pixelated}.form-range.form-range--gradient{background:var(--range-gradient);height:3px}.landscape-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--color-bg-elevated);z-index:99999;display:none;align-items:center;justify-content:center;text-align:center}.landscape-overlay__content{display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);padding:var(--space-3xl)}.landscape-overlay__logo{height:32px;width:auto;display:block}.landscape-overlay__icon{font-size:2rem;color:var(--color-text-muted);line-height:1}.landscape-overlay__text{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-brutalist)}@media(orientation:landscape)and (pointer:coarse)and (max-height:500px){.landscape-overlay{display:flex}}@media(min-width:769px){.mobile-toolbar,.mobile-panel,.mobile-action-bar,.mobile-menu-btn,.mobile-menu-overlay{display:none!important}}