*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0a0a0f;min-height:100dvh;font-family:SF Mono,Fira Code,Cascadia Code,Consolas,monospace;overflow-x:hidden}#root{min-height:100dvh}.app{flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;display:flex}.upload-screen{text-align:center;flex-direction:column;align-items:center;gap:24px;padding:40px 20px;display:flex}.logo{letter-spacing:.08em;background:linear-gradient(135deg,#fff 0%,#c4b5d4 50%,#8a7a9a 100%);-webkit-text-fill-color:transparent;-webkit-user-select:none;user-select:none;-webkit-background-clip:text;background-clip:text;font-size:clamp(2.5rem,8vw,5rem);font-weight:900}.tagline{color:#888;letter-spacing:.15em;text-transform:uppercase;font-size:1rem}.drop-zone{cursor:pointer;border:2px dashed #333;border-radius:12px;flex-direction:column;align-items:center;gap:12px;width:min(400px,85vw);padding:60px 30px;transition:border-color .2s,background .2s;display:flex}.drop-zone:hover,.drop-zone.drag-over{background:#7c6a9a0f;border-color:#7c6a9a}.drop-icon{font-size:3rem}.drop-zone p{color:#666;font-size:.85rem}.privacy{color:#444;margin-top:8px;font-size:.7rem}.splatter-screen{flex-direction:column;align-items:center;gap:12px;width:100%;min-height:100dvh;padding:12px;display:flex}.toolbar{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.progress-bar-wrap{flex-direction:column;align-items:center;gap:6px;width:min(500px,90vw);display:flex}.progress-bar{background:#ffffff0f;border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#7c6a9a,#c4b5d4,#fff);border-radius:4px;height:100%;transition:none}.progress-label{color:#888;letter-spacing:.15em;text-transform:uppercase;font-size:.75rem;transition:color .2s}.toolbar button{color:#ccc;cursor:pointer;letter-spacing:.08em;background:#151519;border:1px solid #333;border-radius:6px;padding:8px 18px;font-family:inherit;font-size:.8rem;transition:background .15s,border-color .15s}.toolbar button:hover{color:#fff;background:#222;border-color:#7c6a9a}.canvas-wrap{border-radius:4px;line-height:0;position:relative;overflow:hidden;box-shadow:0 0 40px #0009}.base-canvas{display:block}.overlay-canvas{cursor:crosshair;touch-action:none;position:absolute;top:0;left:0}.drip-canvas{pointer-events:none;position:absolute;top:0;left:0}.overlay-canvas.no-interact{cursor:default;pointer-events:none}.eggplant{pointer-events:none;z-index:10;transform-origin:50%;filter:drop-shadow(0 0 30px #000c);--shake-intensity:0;--shake-speed:.1s;align-items:center;margin-top:-90px;font-size:clamp(100px,20vw,180px);line-height:1;transition:right .5s cubic-bezier(.34,1.56,.64,1),transform 80ms ease-out;display:flex;position:absolute;top:50%;right:-200px}.eggplant-hidden{right:-200px}.eggplant-entering{right:-55px}.eggplant-stroking{animation:eggplant-shake var(--shake-speed) ease-in-out infinite alternate;right:-55px}.eggplant-firing{--shake-intensity:1;animation:30ms ease-in-out infinite alternate eggplant-shake;right:-55px}.eggplant-leaving{transition:right .5s cubic-bezier(.55,0,1,.45);animation:none;right:-250px}@keyframes eggplant-shake{0%{transform:translateX(0) rotate(calc(var(--shake-intensity) * -4deg))}to{transform:translateX(calc(var(--shake-intensity) * -6px)) rotate(calc(var(--shake-intensity) * 4deg))}}.hand-display{z-index:21;pointer-events:none;--fist-offset:0;transform:translate(calc(var(--fist-offset) * 30px - 15px), calc(-50% + var(--fist-offset) * 60px - 30px));flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:50%;right:20px}.hand-emoji{filter:drop-shadow(0 0 12px #000000b3);font-size:clamp(50px,10vw,80px)}.hand-hint{color:#888;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;font-size:.7rem;animation:1.5s ease-in-out infinite hint-pulse}@keyframes hint-pulse{0%,to{opacity:.5}50%{opacity:1}}.stroke-meter{pointer-events:none;z-index:22;background:#ffffff14;border-radius:3px;width:6px;height:80px;position:absolute;top:50%;right:-22px;overflow:hidden;transform:translateY(-50%)}.stroke-fill{background:linear-gradient(#fff,#7c6a9a);border-radius:3px;width:100%;transition:height .1s ease-out;position:absolute;bottom:0}