:root{--color-primary: #007bff;--color-primary-deep: #0056b3;--color-ink: #333333;--color-white-panel: rgba(255, 255, 255, .95);--color-page-bg: #f0f0f0;--color-track-bg: #ddd;--color-scrim-idle: rgba(0, 0, 0, .1);--color-scrim-drag: rgba(0, 0, 0, .2);--color-inspection-guide: rgba(255, 0, 0, .35);--radius-sm: 5px;--radius-lg: 15px;--space-xs: 6px;--space-sm: 10px;--space-md: 15px;--space-lg: 20px}html,body{margin:0;padding:0;width:100%;height:100vh;background-size:100px;font-family:Georgia,Calibri;background-image:url(/default.svg);background-color:var(--color-page-bg);overflow:hidden}.app{width:100%;height:100%}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.drop-zone{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;z-index:1500;background-color:var(--color-scrim-idle);color:var(--color-primary);transition:all .3s ease}.drop-zone-dragging{background-color:var(--color-scrim-drag);color:var(--color-ink)}.grid-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1200;pointer-events:none;background-image:linear-gradient(to right,rgba(255,0,0,.35) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,0,0,.35) 1px,transparent 1px)}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;display:flex;justify-content:center;align-items:center}.container{width:min(400px,calc(100vw - 2rem));background-color:var(--color-white-panel);padding:var(--space-lg);border-radius:var(--radius-lg);position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:1000;transition:all .3s ease;box-shadow:0 4px 15px #0000001a}.container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--radius-lg);animation:float 6s ease-in-out infinite;pointer-events:none}.container-hover{transform:translate(-50%) scale(1.02);box-shadow:0 6px 20px #00000026}.content{text-align:center}.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-md)}h1{font-size:1.1em;margin:0;color:var(--color-ink);font-family:Comic Sans MS,Comic Sans,cursive;white-space:nowrap;flex:1}.file-input-wrapper{margin:0}.file-input-label{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:var(--space-xs) var(--space-sm);background:var(--color-primary);color:#fff;border-radius:var(--radius-lg);cursor:pointer;transition:all .3s ease;font-size:.8em;white-space:nowrap;animation:pulse 2s infinite}.file-input-label:hover{background:var(--color-primary-deep);transform:translateY(-2px)}.file-input:focus-visible+.file-input-label,.file-input:focus+.file-input-label{outline:2px solid var(--color-ink);outline-offset:2px}.slider-row{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-md) 0}.slider-container{flex:1;padding:0 var(--space-xs)}.slider{-webkit-appearance:none;width:100%;height:8px;background:var(--color-track-bg);border-radius:var(--radius-sm);outline:none;cursor:pointer;margin:8px 0;transition:all .2s ease;position:relative;overflow:visible}.slider:before{content:"";position:absolute;top:0;left:0;height:100%;width:var(--fill, 0%);background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8b00ff,#ff0000);background-size:200% 100%;animation:rainbow-track 3s linear infinite;border-radius:var(--radius-sm);z-index:1}.slider::-webkit-slider-runnable-track{background:transparent}.slider::-moz-range-track{background:transparent}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003;position:relative;z-index:2}.slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 8px #007bff66}.slider::-moz-range-thumb{width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003;position:relative;z-index:2}.slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 8px #007bff66}.size-value{display:inline-block;font-size:.85em;color:var(--color-ink);min-width:3.5em;text-align:right}.toggle-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm)}.toggle-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;background:white;color:var(--color-ink);border:1px solid var(--color-track-bg);border-radius:var(--radius-lg);cursor:pointer;font-size:.85em;transition:all .2s ease}.toggle-btn:hover{border-color:var(--color-primary)}.toggle-btn:focus-visible{outline:2px solid var(--color-ink);outline-offset:2px}.toggle-btn-active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.toggle-btn:disabled{opacity:.5;cursor:not-allowed}.toggle-btn:disabled:hover{border-color:var(--color-track-bg)}.color-swatch{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;cursor:pointer}.color-swatch input[type=color]{width:36px;height:36px;padding:0;border:1px solid var(--color-track-bg);border-radius:50%;cursor:pointer}.color-swatch input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:50%;overflow:hidden}.color-swatch input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}.color-swatch input[type=color]::-moz-color-swatch{border:none;border-radius:50%}.color-swatch:has(input:focus-visible){outline:2px solid var(--color-ink);outline-offset:2px}.bounce-enter-active{animation:bounce-in .8s}.bounce-leave-active{animation:bounce-in .8s reverse}@keyframes bounce-in{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.animated-title{animation:rainbow 5s linear infinite,float-title 3s ease-in-out infinite;background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#8b00ff);background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.5px rgba(0,0,0,.35);text-shadow:none;display:inline-block}@keyframes rainbow{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes float-title{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes rainbow-track{0%{background-position:0% 50%}to{background-position:200% 50%}}@media (prefers-reduced-motion: reduce){.container:before,.file-input-label,.animated-title,.slider:before{animation:none!important}.bounce-enter-active,.bounce-leave-active{animation:none!important}.drop-zone,.container,.file-input-label,.toggle-btn{transition:none!important}}