@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;700&display=swap";:root{--bg:#090d14;--bg-elevated:#101722;--border:#ffffff1f;--text-strong:#f8f2ea;--text-soft:#d4ccbf;--text-muted:#a7a092;--accent:#ffc470;--accent-cool:#80b8ff;--shadow-soft:0 32px 90px #00000057;--font-sans:"Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;--font-mono:"IBM Plex Mono", "SFMono-Regular", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font:16px/1.5 var(--font-sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{background:radial-gradient(circle at top,#ffc47014,#0000 28%),linear-gradient(#0b1018,#070a11 64%)}body{color:var(--text-soft);background:0 0;margin:0}body,button,input{font:inherit}#root{min-height:100svh}h1,h2,h3,p{margin:0}h1,h2,h3{color:var(--text-strong);letter-spacing:-.04em}a{color:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shell{min-height:100svh;padding:28px;display:flex}.app-frame{border:1px solid var(--border);width:min(1320px,100%);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:radial-gradient(circle at 0 0,#ffc4701f,#0000 32%),radial-gradient(circle at 100% 100%,#4a90e224,#0000 38%),linear-gradient(#0e121af2,#0a0d14fa);border-radius:32px;flex-direction:column;margin:0 auto;padding:28px;display:flex;position:relative;overflow:hidden}.app-frame:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:72px 72px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#00000061,#0000 82%);mask-image:linear-gradient(#00000061,#0000 82%)}.topbar,.workspace,.hero-grid,.footer,.top-level-error{z-index:1;position:relative}.topbar{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:32px;display:flex}.privacy-pill,.footer-pill{color:var(--text-strong);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:10px;padding:12px 14px;font-size:.92rem;display:inline-flex}.eyebrow{color:var(--accent);letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;font-size:.78rem}.hero-grid{grid-template-columns:1.05fr .95fr;align-items:stretch;gap:28px;display:grid}.hero-copy{flex-direction:column;gap:24px;padding:24px 8px 16px 0;display:flex}.hero-copy h2{max-width:13ch;margin:0;font-size:clamp(2.25rem,4vw,4.6rem);line-height:.98}.hero-text{max-width:64ch;color:var(--text-muted);font-size:1.04rem}.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.feature-card{background:#ffffff0b;border:1px solid #ffffff14;border-radius:24px;flex-direction:column;gap:10px;padding:18px;display:flex}.feature-card strong{color:var(--text-strong);font-size:1rem}.feature-card p{color:var(--text-muted);font-size:.95rem}.feature-icon{width:42px;height:42px;color:var(--text-strong);background:linear-gradient(#ffc47024,#4a90e21f);border-radius:16px;justify-content:center;align-items:center;display:inline-flex}.upload-card{width:100%;min-height:520px;color:inherit;text-align:left;cursor:pointer;background:radial-gradient(circle at top,#ffffff14,#0000 34%),#ffffff0a;border:1px solid #ffffff1a;border-radius:30px;flex-direction:column;justify-content:center;gap:22px;padding:36px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;display:flex}.upload-card:hover,.upload-card:focus-visible,.upload-card-active{background:radial-gradient(circle at top,#ffc47021,#0000 35%),#ffffff0f;border-color:#ffc47057;transform:translateY(-2px);box-shadow:0 28px 70px #00000047}.upload-card:focus-visible,.ghost-button:focus-visible,.tab-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.format-card:focus-visible,.aspect-button:focus-visible,.icon-button:focus-visible{outline-offset:3px;outline:2px solid #ffc470bf}.upload-icon{width:72px;height:72px;color:var(--text-strong);background:#ffffff0f;border-radius:24px;justify-content:center;align-items:center;display:inline-flex}.upload-copy{flex-direction:column;gap:8px;display:flex}.upload-copy strong{color:var(--text-strong);font-size:1.4rem}.upload-copy span{color:var(--text-muted);font-size:1rem}.upload-meta{flex-wrap:wrap;gap:10px;display:flex}.upload-meta span,.chip,.result-pill{color:var(--text-soft);background:#ffffff12;border-radius:999px;align-items:center;gap:8px;max-width:100%;padding:8px 12px;font-size:.84rem;display:inline-flex}.workspace{flex:1;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:24px;min-height:0;display:grid}.preview-panel,.editor-panel,.result-card{background:#ffffff0b;border:1px solid #ffffff17;border-radius:30px}.preview-panel{flex-direction:column;min-height:720px;padding:18px;display:flex}.preview-meta,.editor-heading,.result-heading{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.chip-row{flex-wrap:wrap;gap:10px;display:flex}.preview-actions{gap:10px;display:flex}.ghost-button,.tab-button,.format-card,.aspect-button,.icon-button,.secondary-button,.primary-button{font:inherit;border:1px solid #0000}.ghost-button,.tab-button,.icon-button,.secondary-button,.primary-button{cursor:pointer;justify-content:center;align-items:center;gap:10px;transition:background .16s,border-color .16s,transform .16s,color .16s;display:inline-flex}.ghost-button{color:var(--text-soft);background:#ffffff0d;border-radius:999px;padding:10px 14px}.ghost-button:hover,.tab-button:hover,.secondary-button:hover,.icon-button:hover{background:#ffffff14;border-color:#ffffff24}.ghost-button.danger{color:#ffd1cb;background:#ad351d24}.preview-stage{background:linear-gradient(135deg,#ffffff08,#fff0),#06090feb;border:1px solid #ffffff14;border-radius:24px;flex:1;justify-content:center;align-items:stretch;min-height:0;margin-top:18px;display:flex;position:relative;overflow:hidden}.preview-image,.result-preview{object-fit:contain;width:100%;height:100%;display:block}.cropper-wrap{width:100%;min-height:0;position:relative}.cropper-wrap .reactEasyCrop_Container{background:radial-gradient(circle at top,#ffffff0d,#0000 40%),#04060af5}.cropper-toolbar{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px 6px 4px;display:grid}.crop-output{flex-direction:column;align-items:flex-end;display:flex}.crop-output span{color:var(--text-strong);font-family:var(--font-mono);font-size:1rem}.crop-output small{color:var(--text-soft)}.preview-footnote,.helper-text{color:var(--text-muted);font-size:.95rem}.preview-footnote{padding:14px 4px 0}.mobile-editor-title{display:none}.editor-panel{flex-direction:column;gap:20px;padding:22px;display:flex}.app-frame-editor{height:calc(100svh - 56px);min-height:calc(100svh - 56px);max-height:calc(100svh - 56px);padding:20px}.app-frame-editor .topbar{margin-bottom:18px}.app-frame-editor .workspace{overflow:hidden}.app-frame-editor .preview-panel,.app-frame-editor .editor-panel{height:100%;min-height:0}.app-frame-editor .preview-panel{padding:14px}.app-frame-editor .preview-stage{margin-top:14px}.app-frame-editor .preview-footnote{padding-top:10px;font-size:.9rem}.app-frame-editor .editor-panel{scrollbar-width:thin;gap:16px;padding:18px;overflow-y:auto}.app-frame-editor .control-stack{gap:12px}.app-frame-editor .control-card,.app-frame-editor .metric-card,.app-frame-editor .share-box,.app-frame-editor .result-card{border-radius:20px;padding:14px}.app-frame-editor .tab-button{padding:12px 14px}.app-frame-editor .format-card{gap:8px;padding:14px}.app-frame-editor .card-heading{margin-bottom:12px}.app-frame-editor .primary-button,.app-frame-editor .secondary-button{padding:13px 16px}.app-frame-editor .result-card{gap:14px}.app-frame-editor .result-placeholder,.app-frame-editor .error-banner{padding:14px 16px}.editor-heading p:last-child{max-width:30rem;color:var(--text-muted)}.editor-heading h2,.result-heading h3{color:var(--text-strong);margin:4px 0 0}.tab-strip{background:#ffffff0a;border-radius:22px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:8px;display:grid}.tab-button{color:var(--text-soft);background:0 0;border-radius:16px;padding:14px 16px}.tab-button-active{color:var(--text-strong);background:#ffffff14;border-color:#ffffff1a}.summary-strip{background:#ffffff08;border:1px solid #ffffff14;border-radius:22px;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;display:flex}.summary-badge{min-width:4.25rem;color:var(--text-strong);background:#05080db3;border:1px solid #ffffff1f;border-radius:12px;justify-content:center;align-items:center;padding:9px 14px;font-size:.95rem;font-weight:600;display:inline-flex}.section-title{color:var(--text-soft);font-size:1rem}.control-stack{flex-direction:column;gap:16px;display:flex}.control-card,.metric-card,.share-box{background:#ffffff09;border:1px solid #ffffff14;border-radius:22px;padding:18px}.card-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.mini-label,.metric-card span{color:var(--text-soft);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}.mini-value{color:var(--text-strong);font-family:var(--font-mono);font-size:.92rem}.format-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.format-card{color:inherit;cursor:pointer;text-align:left;background:#ffffff06;border-radius:20px;flex-direction:column;gap:10px;padding:16px;display:flex}.format-card:hover,.aspect-button:hover{background:#ffffff0f;border-color:#ffffff1f}.format-card strong{color:var(--text-strong);font-size:1rem}.format-card-header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.format-card span{color:var(--text-muted);font-size:.92rem}.format-card-check{width:28px;height:28px;color:var(--accent);border:1px solid #ffc47075;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.format-card-active,.aspect-button-active{background:#ffc4701f;border-color:#ffc4706b}.range-meta,.metric-grid,.size-grid,.result-actions,.share-link-row,.footer{gap:12px;display:grid}.range-meta,.share-link-row{grid-template-columns:repeat(2,minmax(0,1fr))}.range-meta{color:var(--text-soft);margin-top:10px;font-size:.88rem}.range-meta span:last-child{text-align:right}.metric-grid,.size-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.size-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card{flex-direction:column;gap:8px;display:flex}.metric-card strong{color:var(--text-strong);font-size:1.25rem}.field{flex-direction:column;gap:8px;display:flex}.field span{color:var(--text-soft);font-size:.92rem}.field input,.share-link-row input{box-sizing:border-box;width:100%;color:var(--text-strong);font:inherit;background:#020509a6;border:1px solid #ffffff1f;border-radius:16px;padding:14px 16px}.aspect-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.aspect-button{color:var(--text-strong);cursor:pointer;background:#ffffff08;border-radius:16px;padding:13px 12px}.primary-button,.secondary-button{border-radius:18px;width:100%;padding:15px 18px;font-weight:600}.primary-button{color:#24160a;background:linear-gradient(135deg,#ffc470,#f8aa42)}.primary-button:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.ghost-button:disabled{opacity:.62;cursor:not-allowed;transform:none}.secondary-button{color:var(--text-strong);background:#ffffff0f}.result-card{flex-direction:column;gap:18px;padding:20px;display:flex}.result-body{grid-template-columns:136px minmax(0,1fr);align-items:center;gap:16px;display:grid}.result-preview{aspect-ratio:1;background:#04070cdb;border:1px solid #ffffff14;border-radius:18px}.result-copy{flex-direction:column;gap:12px;display:flex}.result-copy p{color:var(--text-muted)}.result-copy .chip{overflow-wrap:anywhere}.share-box{flex-direction:column;gap:12px;display:flex}.share-link-row{grid-template-columns:minmax(0,1fr) auto}.icon-button{width:48px;height:48px;color:var(--text-strong);background:#ffffff14;border-radius:16px}.result-placeholder,.error-banner{border-radius:18px;align-items:center;gap:12px;padding:16px 18px;display:flex}.result-placeholder{color:var(--text-soft);border:1px dashed #ffffff24}.error-banner{color:#ffe1dd;background:#ad351d29;border:1px solid #ff7b6947}.top-level-error{margin-top:20px}.footer{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px}input[type=range]{accent-color:#ffc470;width:100%}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=1120px){.shell{padding:18px}.app-frame-editor{height:auto;min-height:0;max-height:none}.app-frame-editor .workspace,.app-frame-editor .editor-panel{overflow:visible}.hero-grid,.workspace,.footer,.feature-grid{grid-template-columns:1fr}.preview-panel{min-height:620px}}@media (width<=760px){.shell{padding:0}.app-frame{width:100%;min-height:100svh;padding:calc(14px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));box-shadow:none;border:none;border-radius:0}.app-frame:before{background-size:48px 48px}.topbar,.preview-meta,.editor-heading,.result-heading{flex-direction:column}.topbar h1{margin-bottom:0}.topbar{margin-bottom:18px}.workspace{gap:16px}.mobile-editor-title{margin:0 0 4px;font-size:clamp(2rem,8vw,2.8rem);line-height:1.02;display:block}.upload-card{border-radius:24px;min-height:420px;padding:24px}.preview-panel,.editor-panel,.result-card,.control-card,.metric-card,.share-box{border-radius:20px}.preview-panel,.editor-panel{padding:14px}.editor-panel{background:#111317e6;gap:16px;padding:18px 16px}.preview-panel{min-height:460px}.preview-stage{margin-top:14px}.preview-footnote{padding-top:10px;font-size:.9rem}.chip-row{gap:8px}.chip,.result-pill{padding:7px 10px;font-size:.8rem}.control-stack{gap:12px}.card-heading{margin-bottom:12px}.summary-strip,.control-card,.metric-card,.share-box,.result-card{padding:16px}.summary-strip{background:#ffffff09;border-radius:18px}.summary-badge{min-width:4rem}.format-card,.aspect-button,.field input,.share-link-row input{border-radius:14px}.format-card{background:#06080ae0;border-color:#ffffff14;gap:12px;min-height:150px;padding:18px 18px 20px}.format-card span{font-size:.94rem;line-height:1.5}.format-card-active{background:#0e141ef5;border-color:#3880ffb8;box-shadow:inset 0 0 0 1px #3880ff3d}.format-card-active strong,.format-card-active .format-card-check{color:#55a3ff}.format-card-active .format-card-check{border-color:#3880ffe6}.primary-button,.secondary-button{padding:14px 16px}.feature-grid,.format-grid,.metric-grid,.size-grid,.aspect-grid,.tab-strip,.result-body,.result-actions,.share-link-row{grid-template-columns:1fr}.preview-actions{justify-content:space-between;width:100%}.tab-strip{background:#ffffff0f;border:1px solid #ffffff14;border-radius:20px;gap:6px;padding:6px}.tab-button{color:#f8f2eab8;border-radius:16px;justify-content:flex-start;padding:16px 14px;font-size:1.02rem}.tab-button-active{color:var(--text-strong);background:#050506f5;border-color:#ffffff0d}.app-frame-editor .editor-heading,.app-frame-tab-transform .preview-panel,.app-frame-tab-compress .preview-panel{display:none}.app-frame-tab-transform .workspace,.app-frame-tab-compress .workspace{grid-template-columns:1fr}.app-frame-tab-transform .editor-panel,.app-frame-tab-compress .editor-panel{background:#0f0f10f0;border-radius:28px;padding:20px 16px}.app-frame-tab-transform .control-card,.app-frame-tab-compress .control-card{background:#ffffff05}.app-frame-tab-transform .control-card .card-heading,.app-frame-tab-compress .control-card .card-heading{margin-bottom:14px}.app-frame-tab-transform .result-card:has(.result-placeholder){display:none}.app-frame-tab-transform .result-actions .primary-button,.app-frame-tab-compress .result-actions .primary-button{color:#111010;background:#f1efed}.app-frame-tab-transform .result-actions .secondary-button,.app-frame-tab-compress .result-actions .secondary-button{background:#ffffff14}.app-frame-tab-transform .result-card,.app-frame-tab-compress .result-card{gap:16px}.app-frame-tab-transform .result-body,.app-frame-tab-compress .result-body{grid-template-columns:112px minmax(0,1fr);align-items:flex-start;gap:14px}.app-frame-tab-transform .result-preview,.app-frame-tab-compress .result-preview{aspect-ratio:auto;justify-self:flex-start;width:112px;height:148px}.app-frame-tab-transform .result-copy,.app-frame-tab-compress .result-copy{gap:10px;min-width:0}.app-frame-tab-transform .result-copy p,.app-frame-tab-compress .result-copy p{font-size:.94rem;line-height:1.4}.app-frame-tab-transform .result-copy .chip-row,.app-frame-tab-compress .result-copy .chip-row{flex-direction:column;align-items:flex-start;gap:10px}.app-frame-tab-transform .result-copy .chip,.app-frame-tab-compress .result-copy .chip{width:100%}.cropper-toolbar{grid-template-columns:1fr;align-items:stretch}.crop-output{align-items:flex-start}}.reactEasyCrop_Container{-webkit-user-select:none;user-select:none;touch-action:none;cursor:move;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.reactEasyCrop_Image,.reactEasyCrop_Video{will-change:transform}.reactEasyCrop_Contain{max-width:100%;max-height:100%;margin:auto;position:absolute;inset:0}.reactEasyCrop_Cover_Horizontal{width:100%;height:auto}.reactEasyCrop_Cover_Vertical{width:auto;height:100%}.reactEasyCrop_CropArea{box-sizing:border-box;color:#00000080;border:1px solid #ffffff80;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 0 9999em}.reactEasyCrop_CropAreaRound{border-radius:50%}.reactEasyCrop_CropAreaGrid:before{content:" ";box-sizing:border-box;border:0;border-left:1px solid #ffffff80;border-right:1px solid #ffffff80;position:absolute;inset:0 33.33%}.reactEasyCrop_CropAreaGrid:after{content:" ";box-sizing:border-box;border:1px solid #ffffff80;border-left:0;border-right:0;position:absolute;inset:33.33% 0}