*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--paper: #fdfbf7;--pencil: #2d2d2d;--muted: #e5e0d8;--accent: #ff4d4d;--blue: #2d5da1;--postit: #fff9c4;--white: #ffffff;--font-heading: "Kalam", cursive;--font-body: "Patrick Hand", cursive;--wobbly: 255px 15px 225px 15px / 15px 225px 15px 255px;--wobbly-md: 15px 225px 15px 255px / 225px 15px 255px 15px;--wobbly-sm: 10px 150px 10px 150px / 150px 10px 150px 10px;--wobbly-btn: 255px 25px 225px 25px / 25px 225px 25px 255px;--shadow: 4px 4px 0px 0px var(--pencil);--shadow-sm: 3px 3px 0px 0px rgba(45, 45, 45, .15);--shadow-lg: 8px 8px 0px 0px var(--pencil);--shadow-hover: 2px 2px 0px 0px var(--pencil)}html.dark{--paper: #1a1a1e;--pencil: #e8e4de;--muted: #2e2e34;--accent: #ff6b6b;--blue: #6ba3e8;--postit: #3a3520;--white: #252528;--shadow: 4px 4px 0px 0px rgba(0, 0, 0, .5);--shadow-sm: 3px 3px 0px 0px rgba(0, 0, 0, .25);--shadow-lg: 8px 8px 0px 0px rgba(0, 0, 0, .5);--shadow-hover: 2px 2px 0px 0px rgba(0, 0, 0, .5)}body{font-family:var(--font-body);color:var(--pencil);background-color:var(--paper);background-image:radial-gradient(var(--muted) 1px,transparent 1px);background-size:24px 24px;min-height:100vh;-webkit-font-smoothing:antialiased}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}h1{font-size:3rem}h2{font-size:2.25rem}h3{font-size:1.5rem}p,span,label,li{font-size:1.125rem}.btn{font-family:var(--font-body);font-size:1.125rem;padding:12px 28px;border:3px solid var(--pencil);border-radius:var(--wobbly-btn);background:var(--white);color:var(--pencil);box-shadow:var(--shadow);cursor:pointer;transition:all .1s ease;display:inline-flex;align-items:center;gap:8px;min-height:48px;-webkit-user-select:none;user-select:none}.btn:hover{background:var(--accent);color:var(--white);box-shadow:var(--shadow-hover);transform:translate(2px,2px)}.btn:active{box-shadow:none;transform:translate(4px,4px)}.btn-secondary{background:var(--muted)}.btn-secondary:hover{background:var(--blue);color:var(--white)}.btn-sm{padding:8px 18px;font-size:.95rem;min-height:38px}.btn-accent{background:var(--accent);color:var(--white)}.btn-accent:hover{background:var(--pencil)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}.btn:disabled:hover{background:var(--white);color:var(--pencil);transform:none}.card{background:var(--white);border:2px solid var(--pencil);border-radius:var(--wobbly-md);box-shadow:var(--shadow-sm);padding:24px;position:relative;transition:transform .1s ease}.card:hover{transform:rotate(-.5deg)}.card-postit{background:var(--postit)}.card-tape:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%) rotate(-2deg);width:80px;height:24px;background:#c8c8b480;border-radius:2px;z-index:2}.card-tack:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);width:16px;height:16px;background:var(--accent);border-radius:50%;border:2px solid rgba(0,0,0,.2);box-shadow:1px 1px 2px #0000004d;z-index:2}.input{font-family:var(--font-body);font-size:1.125rem;padding:12px 16px;border:2px solid var(--pencil);border-radius:var(--wobbly-sm);background:var(--white);color:var(--pencil);width:100%;outline:none;transition:border-color .15s ease;min-height:48px}.input::placeholder{color:#2d2d2d59}.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2d5da126}textarea.input{resize:vertical;min-height:100px}select.input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}.dropzone{border:3px dashed var(--pencil);border-radius:var(--wobbly-md);padding:48px 24px;text-align:center;cursor:pointer;transition:all .15s ease;background:var(--white);position:relative}.dropzone:hover,.dropzone.active{border-color:var(--blue);background:#2d5da10a;transform:rotate(-.5deg)}.dropzone.has-file{border-style:solid;border-color:var(--blue)}.slider-container{display:flex;flex-direction:column;gap:8px}.slider-label{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);font-size:1rem}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background:var(--muted);border-radius:4px;outline:none;border:2px solid var(--pencil)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--accent);border:3px solid var(--pencil);cursor:pointer;box-shadow:2px 2px 0 0 var(--pencil)}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--accent);border:3px solid var(--pencil);cursor:pointer;box-shadow:2px 2px 0 0 var(--pencil)}.container{max-width:1100px;margin:0 auto;padding:0 24px}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.w-full{width:100%}.grid{display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}h1{font-size:2.25rem}h2{font-size:1.75rem}.container{padding:0 16px}}.progress-bar{width:100%;height:16px;background:var(--muted);border:2px solid var(--pencil);border-radius:var(--wobbly-sm);overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--blue));border-radius:var(--wobbly-sm);transition:width .3s ease}.tab-nav{display:flex;gap:4px;border-bottom:3px solid var(--pencil);padding-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-btn{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;padding:12px 20px;border:2px solid transparent;border-bottom:none;background:none;color:var(--pencil);cursor:pointer;border-radius:12px 12px 0 0;transition:all .1s ease;white-space:nowrap;opacity:.6}.tab-btn:hover{opacity:1;background:#2d2d2d0a}.tab-btn.active{border-color:var(--pencil);background:var(--white);opacity:1;position:relative;bottom:-3px;border-bottom:3px solid var(--white)}.tab-content{padding:32px 0}.file-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border:2px solid var(--muted);border-radius:var(--wobbly-sm);background:var(--white);gap:12px}.file-item+.file-item{margin-top:8px}.file-name{font-weight:400;word-break:break-all;flex:1}.file-size{color:#2d2d2d80;font-size:.9rem;white-space:nowrap}.log-output{font-family:Courier New,monospace;font-size:.85rem;background:var(--pencil);color:#98fb98;padding:16px;border-radius:var(--wobbly-sm);border:2px solid var(--pencil);max-height:250px;overflow-y:auto;white-space:pre-wrap;line-height:1.6}.format-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}.format-chip{font-family:var(--font-body);font-size:.9rem;padding:8px 12px;border:2px solid var(--muted);border-radius:var(--wobbly-sm);background:var(--white);cursor:pointer;text-align:center;transition:all .1s ease}.format-chip:hover{border-color:var(--blue);transform:rotate(-1deg)}.format-chip.selected{border-color:var(--blue);background:var(--blue);color:var(--white);box-shadow:var(--shadow-hover)}.section-title{display:inline-block;position:relative;margin-bottom:4px}.section-title:after{content:"";position:absolute;bottom:-4px;left:0;width:100%;height:3px;background:var(--accent);border-radius:2px;transform:rotate(-.5deg)}.badge{display:inline-block;font-family:var(--font-body);font-size:.8rem;padding:4px 10px;border:2px solid var(--pencil);border-radius:var(--wobbly-sm);background:var(--postit);transform:rotate(-1deg)}.toggle-container{display:flex;align-items:center;gap:10px;cursor:pointer}.toggle-track{width:48px;height:26px;border:2px solid var(--pencil);border-radius:13px;background:var(--muted);position:relative;transition:background .15s ease}.toggle-track.on{background:var(--blue)}.toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--pencil);transition:left .15s ease}.toggle-track.on .toggle-thumb{left:24px}@keyframes bounce-gentle{0%,to{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-8px) rotate(3deg)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-bounce{animation:bounce-gentle 3s ease-in-out infinite}.animate-spin{animation:spin-slow 1.5s linear infinite}.result-bar{position:sticky;bottom:0;left:0;right:0;z-index:100;background:var(--white);border-top:3px solid var(--pencil);box-shadow:0 -4px 12px #2d2d2d1a;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;animation:slide-up .3s ease}@keyframes slide-up{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.result-bar .result-info{display:flex;align-items:center;gap:12px;font-family:var(--font-heading);font-weight:700;font-size:1.1rem}.result-bar .size-compare{display:flex;align-items:center;gap:8px;font-size:1rem}.result-bar .savings{color:var(--blue);font-family:var(--font-heading);font-weight:700}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--muted)}::-webkit-scrollbar-thumb{background:var(--pencil);border-radius:4px}::selection{background:var(--accent);color:var(--white)}