:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--primary:221.2 83.2% 53.3%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:221.2 83.2% 53.3%;--radius:.5rem}body{background-color:hsl(var(--background));color:hsl(var(--foreground));flex-direction:column;min-height:100vh;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;display:flex}*{box-sizing:border-box}.container{width:100%;max-width:1200px;margin:0 auto;padding:2rem}.title{letter-spacing:-.05em;color:hsl(var(--foreground));text-align:center;margin-bottom:.5rem;font-size:3rem;font-weight:800}.subtitle{text-align:center;color:hsl(var(--foreground)/.6);margin-bottom:3rem;font-size:1.125rem}.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);flex-direction:column;height:100%;padding:2rem;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.flex-center{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.grid-cols-2{grid-template-columns:1fr;align-items:stretch;gap:2rem;display:grid}@media (min-width:768px){.grid-cols-2{grid-template-columns:1fr 1fr}}.button{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-radius:var(--radius);cursor:pointer;border:none;align-items:center;gap:.5rem;margin-top:1rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:background .2s,transform .1s;display:inline-flex}.button:hover{background:#134fd2;transform:translateY(-1px)}.button:active{transform:translateY(0)}.dropzone{border:2px dashed hsl(var(--border));background:hsl(var(--secondary)/.5);border-radius:var(--radius);text-align:center;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;width:100%;height:400px;padding:1rem;transition:all .2s;display:flex}.sidebar{flex-direction:column;gap:1.5rem;width:320px;display:flex}.sidebar-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.5rem;box-shadow:0 1px 3px #0000001a}.sidebar-title{color:hsl(var(--foreground));align-items:center;gap:.5rem;margin-bottom:1.25rem;font-size:1rem;font-weight:700;display:flex}.dropzone:hover,.dropzone.active{border-color:hsl(var(--primary));background:hsl(var(--primary)/.05)}.preview-container{border-radius:var(--radius);border:1px solid hsl(var(--border));background-color:#0000;background-image:linear-gradient(45deg,#eee 25%,#0000 25%),linear-gradient(-45deg,#eee 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#eee 75%),linear-gradient(-45deg,#0000 75%,#eee 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;justify-content:center;align-items:center;width:100%;height:400px;display:flex;position:relative;overflow:hidden}.preview-img,.preview-svg{object-fit:contain;width:100%;height:100%;display:block}.preview-container svg{display:block;width:100%!important;height:100%!important}.label{color:hsl(var(--foreground));margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:block}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{color:hsl(var(--primary));animation:1s linear infinite spin}.segmented-control{background:hsl(var(--secondary));border-radius:calc(var(--radius) + .25rem);border:1px solid hsl(var(--border));gap:.25rem;padding:.25rem;display:flex}.segment-button{border-radius:var(--radius);cursor:pointer;color:hsl(var(--foreground)/.6);background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.segment-button:hover{color:hsl(var(--foreground));background:hsl(var(--background)/.5)}.segment-button.active{background:hsl(var(--background));color:hsl(var(--primary));font-weight:600;box-shadow:0 1px 2px #0000000d,0 1px 3px #0000001a}.segment-button svg{stroke-width:2.5px;width:1rem;height:1rem}.toolbar{align-items:center;gap:.5rem;display:flex}.toolbar .button{margin-top:0;padding:.5rem .875rem;font-size:.875rem}.toolbar-divider{background:hsl(var(--border));width:1px;height:1.25rem;margin:0 .5rem}.ghost-link{border-radius:var(--radius);color:hsl(var(--foreground)/.7);cursor:pointer;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:hsl(var(--secondary));border:1px solid hsl(var(--border));border-radius:3px;height:6px}input[type=range]::-moz-range-track{background:hsl(var(--secondary));border:1px solid hsl(var(--border));border-radius:3px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:hsl(var(--background));border:2px solid hsl(var(--primary));border-radius:50%;width:20px;height:20px;margin-top:-8px;transition:all .2s;box-shadow:0 2px 4px #0000001a}input[type=range]::-moz-range-thumb{background:hsl(var(--background));border:2px solid hsl(var(--primary));border-radius:50%;width:20px;height:20px;transition:all .2s;box-shadow:0 2px 4px #0000001a}input[type=range]:hover::-webkit-slider-thumb{background:hsl(var(--primary));border-color:hsl(var(--primary));transform:scale(1.15);box-shadow:0 3px 6px #00000026}input[type=range]:active::-webkit-slider-thumb{background:hsl(var(--primary));transform:scale(.95)}input[type=range]:hover::-moz-range-thumb{background:hsl(var(--primary));transform:scale(1.15);box-shadow:0 3px 6px #00000026}input[type=number]{background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:calc(var(--radius)/1.5);color:hsl(var(--primary));text-align:right;width:60px;padding:.25rem .5rem;font-size:.875rem;font-weight:600;transition:all .2s}input[type=number]:focus{border-color:hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--primary)/.1);outline:none}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}