:root{--font-display:"Fraunces", "Times New Roman", serif;--font-ui:"Manrope", "Zen Kaku Gothic New", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;--paper:#f5f0e6;--surface:#fffdf8;--surface-sunken:#f7f2e9;--ink:#211b14;--ink-soft:#4f463b;--muted:#8a7d6c;--hairline:#e7dccb;--hairline-strong:#d8c9b2;--amber:#c0712a;--amber-deep:#a4561a;--amber-soft:#f0d9b8;--amber-tint:#c0712a1a;--danger:#a8392a;--danger-soft:#f3dcd4;--cream:#fbf6ec;color:var(--ink);font-family:var(--font-ui);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(58% 48% at 8% -4%,#c0712a1a,#0000 64%),radial-gradient(46% 52% at 102% 6%,#a0784614,#0000 60%),radial-gradient(70% 60% at 50% 116%,#78644612,#0000 70%);background-attachment:fixed;margin:0}body:before{content:"";z-index:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");position:fixed;inset:0}button,input,textarea,select{font:inherit}:is(button,a)[data-react-aria-pressable=true]{min-width:132px;min-height:48px;color:var(--cream);cursor:pointer;font-family:var(--font-ui);letter-spacing:.01em;background:linear-gradient(#34291d,#1d160e);border:0;border-radius:12px;justify-content:center;align-items:center;padding:0 22px;font-size:.98rem;font-weight:600;line-height:1;text-decoration:none;transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,filter .16s;display:inline-flex;position:relative;box-shadow:inset 0 1px #ffffff14,0 10px 22px -12px #211b14b3}:is(button,a)[data-react-aria-pressable=true]:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:inset 0 1px #ffffff1a,0 16px 30px -14px #211b14c7}:is(button,a)[data-react-aria-pressable=true]:active{transform:translateY(0)}:is(button,a)[data-react-aria-pressable=true]:focus-visible{outline:2px solid var(--amber);outline-offset:3px}:is(button,a)[data-react-aria-pressable=true][disabled],:is(button,a)[data-react-aria-pressable=true][data-disabled=true]{color:#b1a48f;cursor:not-allowed;box-shadow:none;filter:none;background:#e9e0d2;transform:none}:is(button,a)[data-react-aria-pressable=true][class*=bg-success]{background:linear-gradient(180deg, var(--amber), var(--amber-deep));color:var(--cream);box-shadow:inset 0 1px #ffffff2e,0 12px 24px -12px #a4561ab3}:is(button,a)[data-react-aria-pressable=true][class*=bg-success]:hover{box-shadow:inset 0 1px #ffffff38,0 18px 32px -14px #a4561ac7}.app-shell{z-index:1;min-height:100vh;padding:clamp(32px,6vw,72px) clamp(20px,5vw,56px);position:relative}.hero{width:min(100%,1180px);margin:0 auto 40px;animation:.72s cubic-bezier(.22,1,.36,1) both rise-in}.eyebrow{color:var(--amber-deep);letter-spacing:.28em;text-transform:uppercase;align-items:center;gap:12px;margin:0 0 18px;font-size:.78rem;font-weight:600;display:inline-flex}.eyebrow:before{content:"";background:linear-gradient(90deg, transparent, var(--amber));width:34px;height:1.5px}h1{color:var(--ink);font-family:var(--font-display);font-optical-sizing:auto;letter-spacing:-.015em;margin:0;font-size:clamp(2.8rem,6vw,4.6rem);font-weight:540;line-height:.98}.lead{max-width:36ch;color:var(--ink-soft);margin:22px 0 0;font-size:1.08rem;line-height:1.75}.tool-layout{grid-template-columns:minmax(0,1fr) 384px;align-items:start;gap:28px;width:min(100%,1180px);margin:0 auto;display:grid}.work-area,.side-panel{gap:20px;display:grid}.work-area{animation:.76s cubic-bezier(.22,1,.36,1) 80ms both rise-in}.side-panel{animation:.76s cubic-bezier(.22,1,.36,1) .18s both rise-in}.drop-zone{border:1.5px dashed var(--hairline-strong);background:linear-gradient(180deg, var(--surface), #fcf8f0);border-radius:22px;min-height:440px;padding:40px;transition:border-color .2s,background-color .2s,box-shadow .2s;display:grid;position:relative;box-shadow:inset 0 1px #fff9,0 26px 60px -34px #503c2357}.drop-zone:before,.drop-zone:after{content:"";border:2px solid var(--amber);opacity:.55;width:26px;height:26px;transition:opacity .2s;position:absolute}.drop-zone:before{border-bottom:0;border-right:0;border-top-left-radius:6px;top:16px;left:16px}.drop-zone:after{border-top:0;border-left:0;border-bottom-right-radius:6px;bottom:16px;right:16px}.drop-zone.is-dragging{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-tint), 0 30px 70px -34px #a4561a66;background:linear-gradient(#fff7ea,#fdefdb)}.drop-zone.is-dragging:before,.drop-zone.is-dragging:after{opacity:1}.drop-zone__input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.file-select-button{min-width:132px;min-height:48px;color:var(--cream);cursor:pointer;letter-spacing:.01em;background:linear-gradient(#34291d,#1d160e);border-radius:12px;justify-content:center;align-items:center;padding:0 24px;font-size:.98rem;font-weight:600;line-height:1;transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,filter .16s;display:inline-flex;box-shadow:inset 0 1px #ffffff14,0 10px 22px -12px #211b14b3}.file-select-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.file-select-button:focus-within{outline:2px solid var(--amber);outline-offset:3px}.file-select-button.is-disabled{color:#b1a48f;cursor:not-allowed;box-shadow:none;filter:none;background:#e9e0d2;transform:none}.drop-zone__content{text-align:center;place-items:center;gap:26px;min-height:360px;display:grid}.drop-zone__title{color:var(--ink);font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-size:1.9rem;font-weight:500}.drop-zone__text{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin:10px 0 0;font-size:.86rem}.image-preview{justify-items:center;gap:20px;width:100%;margin:0;display:grid}.image-preview__image{border:1px solid var(--hairline);object-fit:contain;background:repeating-conic-gradient(#f4eee2 0% 25%,#fbf7ef 0% 50%) 0/22px 22px;border-radius:10px;width:min(100%,540px);max-height:380px;padding:12px;box-shadow:0 2px 4px #503c2314,0 22px 44px -26px #503c2366}.image-preview__caption{text-align:center;gap:6px;max-width:100%;display:grid}.image-preview__caption .drop-zone__title{font-size:1.05rem}.image-preview__caption .drop-zone__text{max-width:min(100%,540px);font-family:var(--font-mono);letter-spacing:.02em;text-transform:none;color:var(--ink-soft);overflow-wrap:anywhere;margin:0;font-size:.8rem}.panel{border:1px solid var(--hairline);background:var(--surface);border-radius:18px;padding:26px;position:relative;box-shadow:inset 0 1px #ffffffb3,0 22px 48px -30px #503c2361}.panel h2{color:var(--ink);font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:10px;margin:0 0 20px;font-size:1.18rem;font-weight:500;line-height:1.3;display:flex}.panel h2:before{content:"";background:var(--amber);width:7px;height:7px;box-shadow:0 0 0 3px var(--amber-tint);border-radius:2px;flex-shrink:0}.info-list{gap:0;margin:0;display:grid}.info-list div{border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;display:flex}.info-list div:last-child{border-bottom:0;padding-bottom:0}.info-list dt{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;flex-shrink:0;font-size:.78rem;font-weight:600}.info-list dd{text-align:right;overflow-wrap:anywhere;min-width:0;color:var(--ink);font-family:var(--font-mono);letter-spacing:-.01em;margin:0;font-size:.92rem;font-weight:500}.resize-controls{gap:20px;display:grid}.size-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.size-inputs [data-slot=base]{min-width:0}.size-inputs [data-slot=input-wrapper]{border:1px solid var(--hairline-strong);background:var(--surface-sunken);border-radius:12px;gap:8px;min-height:74px;padding:12px 14px;transition:border-color .16s,box-shadow .16s,background-color .16s;display:grid;position:relative}.size-inputs [data-slot=input-wrapper]:focus-within{border-color:var(--amber);background:var(--surface);box-shadow:0 0 0 4px var(--amber-tint)}.size-inputs [data-slot=base][data-disabled=true] [data-slot=input-wrapper]{border-color:var(--hairline);opacity:.7;background:#f1ece2}.size-inputs [data-slot=label]{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.74rem;font-weight:600}.size-inputs [data-slot=input]{width:100%;min-width:0;color:var(--ink);font-family:var(--font-mono);letter-spacing:-.01em;background:0 0;border:0;outline:none;padding:0;font-size:1.28rem;font-weight:500}.size-inputs [data-slot=input-wrapper]:after{content:"px";color:var(--muted);font-family:var(--font-mono);pointer-events:none;font-size:.78rem;position:absolute;bottom:13px;right:14px}.aspect-switch{color:var(--ink-soft);justify-self:start;align-items:center;gap:12px;font-size:.95rem;font-weight:500;display:inline-flex;position:relative}.aspect-switch>span[aria-hidden=true]{background:var(--hairline-strong);border-radius:999px;flex-shrink:0;align-items:center;width:46px;height:26px;padding:3px;transition:background-color .2s;display:inline-flex;position:relative}.aspect-switch input[role=switch]{z-index:1;cursor:pointer;opacity:.0001;width:100%;height:100%;margin:0;position:absolute;inset:0}.aspect-switch>span[aria-hidden=true]>span{background:#fff;border-radius:999px;width:20px;height:20px;transition:transform .2s cubic-bezier(.22,1,.36,1);box-shadow:0 1px 3px #211b1447}.aspect-switch[data-selected=true]>span[aria-hidden=true]{background:linear-gradient(180deg, var(--amber), var(--amber-deep))}.aspect-switch[data-selected=true]>span[aria-hidden=true]>span{transform:translate(20px)}.aspect-switch[data-disabled=true]{opacity:.5}.progress-panel{gap:8px;display:grid}.progress-panel__bar{gap:12px;width:100%;display:grid}.progress-panel__label-wrapper{color:var(--ink-soft);justify-content:space-between;align-items:center;gap:12px;font-size:.9rem;font-weight:500;line-height:1.4;display:flex}.progress-panel__label,.progress-panel__value{overflow-wrap:anywhere;min-width:0}.progress-panel__value{font-family:var(--font-mono);color:var(--amber-deep);flex-shrink:0;font-size:.82rem}.progress-panel__track{background:var(--surface-sunken);border-radius:999px;width:100%;height:10px;overflow:hidden;box-shadow:inset 0 1px 2px #503c231f}.progress-panel__indicator{border-radius:inherit;background:linear-gradient(90deg, var(--amber), var(--amber-deep));background-image:linear-gradient(135deg, #ffffff47 25%, transparent 25%, transparent 50%, #ffffff47 50%, #ffffff47 75%, transparent 75%, transparent), linear-gradient(90deg, var(--amber), var(--amber-deep));background-size:22px 22px,100% 100%;height:100%;transition:transform .2s;animation:.9s linear infinite progress-stripes}.progress-panel__bar[aria-valuenow="100"] .progress-panel__indicator{animation:none}.progress-panel__indicator[class*=danger]{background:var(--danger);background-image:none;animation:none}.progress-panel__bar[aria-valuenow="0"] .progress-panel__indicator{min-width:0}.error-message{border:1px solid var(--danger-soft);color:var(--danger);background:#fbeee9;border-radius:10px;margin:0;padding:12px 14px;font-size:.88rem;font-weight:500;line-height:1.6}.side-panel>.error-message{color:var(--muted);background:0 0;border:0;padding:0;font-size:.82rem;font-weight:400;line-height:1.7}.result-panel{gap:20px;display:grid}@keyframes rise-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes progress-stripes{0%{background-position:0 0,0 0}to{background-position:22px 0,0 0}}@media (prefers-reduced-motion:reduce){.hero,.work-area,.side-panel,.progress-panel__indicator{animation:none}:is(button,a)[data-react-aria-pressable=true],.file-select-button{transition:none}}@media (width<=860px){.tool-layout{grid-template-columns:1fr}}@media (width<=640px){.app-shell{padding:28px 18px}.drop-zone{min-height:320px;padding:26px}.drop-zone__content{min-height:260px}.drop-zone:before,.drop-zone:after{width:18px;height:18px}.size-inputs{grid-template-columns:1fr}}